update readme for storybook issue

solidstart-tanstackquery-tailwind-modules/README.md

@@ -35,6 +35,12 @@ SolidStart is a meta-framework for SolidJS that is built on top of the React API
 - [ESLint](https://eslint.org/) - Code linting
 - [Prettier](https://prettier.io/) - Code formatting
 
+#### Note*
+We encountered an issue using Storybook in this showcase involving routes `Route layout not defined`.
+SolidStart Link needs to be aware of the routes that are generated by the compiler, but Storybook does not include the vite plugins to do this.
+You can follow the Discord discussion [here](https://discord.com/channels/722131463138705510/1072093687892426843)  
+
+
 ## Installation
 
 This README is written with npm in mind but you can use other manager runners (yarn, pnpm, etc.)

solidstart-tanstackquery-tailwind-modules/package.json

@@ -28,55 +28,55 @@
   },
   "type": "module",
   "devDependencies": {
-    "@babel/core": "7.21.0",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-backgrounds": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addon-measure": "6.5.16",
-    "@storybook/addon-outline": "6.5.16",
-    "@storybook/builder-vite": "0.2.7",
-    "@storybook/client-api": "6.5.16",
-    "@storybook/client-logger": "6.5.16",
-    "@storybook/html": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
-    "@tanstack/solid-query": "4.26.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.54.0",
-    "autoprefixer": "10.4.13",
-    "babel-loader": "8.3.0",
+    "@babel/core": "7.22.9",
+    "@storybook/addon-actions": "7.1.1",
+    "@storybook/addon-backgrounds": "7.1.1",
+    "@storybook/addon-docs": "7.1.1",
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addon-interactions": "7.1.1",
+    "@storybook/addon-links": "7.1.1",
+    "@storybook/addon-measure": "7.1.1",
+    "@storybook/addon-outline": "7.1.1",
+    "@storybook/builder-vite": "7.1.1",
+    "@storybook/client-api": "7.1.1",
+    "@storybook/client-logger": "7.1.1",
+    "@storybook/html": "7.1.1",
+    "@storybook/testing-library": "0.2.0",
+    "@tanstack/solid-query": "4.32.0",
+    "@testing-library/jest-dom": "5.17.0",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
+    "autoprefixer": "10.4.14",
+    "babel-loader": "9.1.3",
     "classnames": "2.3.2",
-    "date-fns": "2.29.3",
-    "eslint-plugin-solid": "0.9.4",
-    "eslint-plugin-unused-imports": "2.0.0",
-    "jsdom": "21.1.0",
-    "msw": "0.35.0",
-    "msw-storybook-addon": "1.7.0",
-    "postcss": "8.4.21",
-    "solid-start-netlify": "^0.2.23",
-    "solid-start-node": "0.2.23",
+    "date-fns": "2.30.0",
+    "eslint-plugin-solid": "0.12.1",
+    "eslint-plugin-unused-imports": "3.0.0",
+    "jsdom": "22.1.0",
+    "msw": "1.2.3",
+    "msw-storybook-addon": "1.8.0",
+    "postcss": "8.4.27",
+    "solid-start-netlify": "^0.2.29",
+    "solid-start-node": "0.2.29",
     "solid-testing-library": "0.5.1",
-    "tailwindcss": "3.2.7",
-    "typescript": "4.9.5",
-    "undici": "5.21.0",
-    "vite": "3.1.8",
-    "vitest": "0.28.5",
-    "whatwg-fetch": "3.6.2"
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6",
+    "undici": "5.22.1",
+    "vite": "4.4.7",
+    "vitest": "0.33.0",
+    "whatwg-fetch": "3.6.17"
   },
   "dependencies": {
-    "@solidjs/meta": "0.28.2",
-    "@solidjs/router": "0.6.0",
+    "@solidjs/meta": "0.28.6",
+    "@solidjs/router": "0.8.2",
     "@tailwindcss/typography": "0.5.9",
     "rehype-raw": "6.1.1",
     "remark-gfm": "3.0.1",
-    "solid-heroicons": "3.1.1",
+    "solid-heroicons": "3.2.4",
     "solid-highlight": "0.1.12",
-    "solid-js": "1.6.11",
-    "solid-markdown": "1.2.0",
-    "solid-start": "0.2.15"
+    "solid-js": "1.7.8",
+    "solid-markdown": "1.2.2",
+    "solid-start": "0.2.29"
   },
   "engines": {
     "node": ">=16"

solidstart-tanstackquery-tailwind-modules/src/auth/AuthStore.ts

@@ -1,4 +1,7 @@
 import { createStore } from 'solid-js/store';
+import { isServer } from 'solid-js/web';
+
+const isToken = !isServer && window.sessionStorage.getItem('token');
 
 export type StoreProps = {
   token: string | null;
@@ -7,7 +10,7 @@ export type StoreProps = {
 };
 
 const [authStore, setAuth] = createStore<StoreProps>({
-  token: null,
+  token: isToken || null,
   user: null,
   get isAuthenticated() {
     return !!this.token;

solidstart-tanstackquery-tailwind-modules/src/components/BranchNavigation/BranchNavigation.tsx

@@ -9,11 +9,12 @@ interface Props {
 
 const BranchNavigation = (props: Props) => {
   const params = useParams();
-  const crumbs = () => params.path?.split('/').filter(Boolean) || [];
+  const path = params.path || params['path/'];
+  const crumbs = () => path?.split('/').filter(Boolean) || [];
 
   // creates a proper GitHub url path from a repo path
   const hrefPath = (index: number) => {
-    const crumbPath = params.path
+    const crumbPath = path
       ?.split('/')
       .filter(Boolean)
       .slice(0, index + 1)
@@ -40,7 +41,7 @@ const BranchNavigation = (props: Props) => {
           <For each={crumbs()}>
             {(crumb, index) => (
               <Switch
-                fallback={() => (
+                fallback={
                   <>
                     <A
                       href={`${hrefPath(index())}`}
@@ -51,7 +52,7 @@ const BranchNavigation = (props: Props) => {
                     </A>
                     <span class={styles.separator}>/</span>
                   </>
-                )}
+                }
               >
                 <Match when={index() === crumbs().length - 1}>
                   <span

solidstart-tanstackquery-tailwind-modules/src/components/FileViewer/FileViewer.tsx

@@ -1,5 +1,4 @@
 import { createSignal, createEffect, Switch, Match, Show } from 'solid-js';
-import { useParams } from '@solidjs/router';
 import styles from './FileViewer.module.css';
 import FileText from './FileText';
 
@@ -12,6 +11,7 @@ import {
 } from './mapExtensionToLanguage';
 import FileCode from './FileCode';
 import { LoadingPulseDot } from '../LoadingPulseDot';
+import { useParams } from 'solid-start';
 
 const FileViewer = () => {
   const params = useParams();
@@ -20,26 +20,26 @@ const FileViewer = () => {
     text: '',
   });
 
+  const branch = params.branch;
+  const path = params.path || params['path/'];
+
   const query = createQuery(
-    () => [`repo-file_${params.path}`],
+    () => [`repo-file_${path || ''}`],
     () =>
       getRepoFile({
         owner: params.owner,
         name: params.name,
-        expression: `${branch}:${params.path || ''}`,
+        expression: `${branch}:${path || ''}`,
       })
   );
 
-  const branch = params.branch;
-  const path = params.path;
-
   createEffect(() => {
     if (query.isSuccess && !query.isLoading && query.data) {
       setResBlob(query.data);
     }
   });
 
-  const extension = path.split('.').pop() as ExtensionType;
+  const extension = path?.split('.').pop() as ExtensionType;
   const language = mapExtensionToLanguage(extension);
 
   return (

solidstart-tanstackquery-tailwind-modules/src/components/PRAndIssuesData/PRAndIssuesData.tsx

@@ -1,8 +1,8 @@
 import { For, Show } from 'solid-js';
 import PRAndIssuesListItem from '../PRAndIssuesListItem';
-import { activeTab } from '../PRAndIssuesHeader';
 import { Issue } from '~/types/issues-type';
 import { PullRequest } from '~/types/pull-request-type';
+import { activeTab } from '~/store';
 
 interface PRAndIssuesDataProps {
   type: 'pr' | 'issue';

solidstart-tanstackquery-tailwind-modules/src/components/PRAndIssuesHeader/PRAndIssuesHeader.tsx

@@ -2,30 +2,22 @@ import cn from 'classnames';
 import { CheckIcon, PullRequestIcon, IssuesIcon } from '../Icons';
 import FilterDropdown from '../FilterDropDown/FilterDropdown';
 import { SORT_OPTIONS } from '../../utils/constants';
-import { createMemo, createSignal, Show } from 'solid-js';
+import { createMemo, Show } from 'solid-js';
 import { getSelectedMilestoneId } from './utils';
-import { issues } from '../../routes/[owner]/[name]/issues';
-import { pullRequests } from '../../routes/[owner]/[name]/pulls';
 import { useSearchParams } from 'solid-start';
-
-const [activeTab, setActiveTab] = createSignal<'OPEN' | 'CLOSED'>('OPEN');
-const [sortBy, setSortBy] = createSignal('Newest');
-const [selectedLabel, setSelectedLabel] = createSignal<string>();
-const [selectedMilestone, setSelectedMilestone] = createSignal<string>();
-const [milestoneId, setMilestoneId] = createSignal<string>();
-
-export {
-  activeTab,
-  setActiveTab,
-  sortBy,
-  setSortBy,
-  selectedLabel,
+import {
   setSelectedLabel,
-  selectedMilestone,
+  selectedLabel,
   setSelectedMilestone,
-  milestoneId,
+  selectedMilestone,
   setMilestoneId,
-};
+  setActiveTab,
+  activeTab,
+  setSortBy,
+  sortBy,
+  pullRequests,
+  issues,
+} from '~/store';
 
 interface PRAndIssuesHeaderProps {
   type: 'pr' | 'issue';

solidstart-tanstackquery-tailwind-modules/src/components/ProfileNav/ProfileNav.spec.tsx

@@ -23,3 +23,4 @@ describe('Profile Navigation', () => {
     expect(text).toBeDefined();
   });
 });
+

solidstart-tanstackquery-tailwind-modules/src/components/RepoIssues/RepoIssues.tsx

@@ -2,16 +2,17 @@ import { useParams } from '@solidjs/router';
 import PRAndIssuesData from '../PRAndIssuesData';
 import { CloseIcon } from '../Icons';
 import { Pagination } from '../Pagination';
-import { issues } from '../../routes/[owner]/[name]/issues';
-import PRAndIssuesHeader, {
+import PRAndIssuesHeader from '../PRAndIssuesHeader';
+import { Match, Show, Switch } from 'solid-js';
+import {
   activeTab,
+  issues,
   selectedLabel,
   setSelectedLabel,
   setSelectedMilestone,
   setSortBy,
   sortBy,
-} from '../PRAndIssuesHeader';
-import { Match, Show, Switch } from 'solid-js';
+} from '~/store';
 
 const RepoIssues = () => {
   const params = useParams();

solidstart-tanstackquery-tailwind-modules/src/components/RepoPullRequests/RepoPullrequests.tsx

@@ -2,16 +2,17 @@ import { useParams } from '@solidjs/router';
 import PRAndIssuesData from '../PRAndIssuesData';
 import { CloseIcon } from '../Icons';
 import { Pagination } from '../Pagination';
-import PRAndIssuesHeader, {
+import PRAndIssuesHeader from '../PRAndIssuesHeader';
+import { Match, Show, Switch } from 'solid-js';
+import {
   activeTab,
+  pullRequests,
   selectedLabel,
   setSelectedLabel,
   setSelectedMilestone,
   setSortBy,
   sortBy,
-} from '../PRAndIssuesHeader';
-import { Match, Show, Switch } from 'solid-js';
-import { pullRequests } from '../../routes/[owner]/[name]/pulls';
+} from '~/store';
 
 const RepoPullRequests = () => {
   const params = useParams();

solidstart-tanstackquery-tailwind-modules/src/components/RepoReadMe/RepoReadMe.tsx

@@ -21,15 +21,15 @@ const RepoReadMe = () => {
   const params = useParams();
   const [readme, setReadme] = createSignal<string>();
 
+  const path = params.path || params['path/'];
+
   const resReadMe = createQuery(
     () => [`read-me_${params.owner}_${params.name}`],
     () =>
       getReadme({
         owner: params.owner,
         name: params.name,
-        expression: params.path
-          ? `HEAD:${params.path}/README.md`
-          : 'HEAD:README.md',
+        expression: path ? `HEAD:${path}/README.md` : 'HEAD:README.md',
       })
   );
 

solidstart-tanstackquery-tailwind-modules/src/components/TabNavigation/TabNavigation.tsx

@@ -8,7 +8,7 @@ import {
   setMilestoneId,
   setSelectedLabel,
   setSelectedMilestone,
-} from '../PRAndIssuesHeader';
+} from '~/store';
 
 export type Tab = {
   path: string;

solidstart-tanstackquery-tailwind-modules/src/routes/[owner]/[name]/issues.tsx

@@ -1,22 +1,17 @@
-import { Switch, Match, createSignal, createEffect } from 'solid-js';
+import { Switch, Match, createEffect } from 'solid-js';
 import { createQuery } from '@tanstack/solid-query';
 import { useParams, useSearchParams } from 'solid-start';
 import { LoadingPulseDot } from '../../../components/LoadingPulseDot';
 import { RepoHeader } from '../../../components/RepoHeader';
 import getIssues from '../../../services/get-issues';
 import RepoIssues from '../../../components/RepoIssues';
-import {
-  milestoneId,
-  selectedLabel,
-  selectedMilestone,
-  sortBy,
-} from '../../../components/PRAndIssuesHeader';
 import { parseSortParams } from '../../../components/RepoIssues/utils';
 import { DEFAULT_PAGE_SIZE, SORT_OPTIONS } from '../../../utils/constants';
 import { Issue, MilestoneProps, PageInfo } from '~/types/issues-type';
 import { Label } from '~/types/label-type';
 import styles from '../style.module.css';
 import useGetRepoInfo from '~/hooks/useGetRepoInfo';
+import { milestoneId, selectedLabel, selectedMilestone, setIssues, sortBy } from '~/store';
 
 export type IssuesSignal = {
   openIssues: {
@@ -33,23 +28,6 @@ export type IssuesSignal = {
   labels: Label[];
 };
 
-const [issues, setIssues] = createSignal<IssuesSignal>({
-  openIssues: {
-    issues: [],
-    totalCount: 0,
-    pageInfo: { hasNextPage: false, hasPreviousPage: false },
-  },
-  closedIssues: {
-    issues: [],
-    totalCount: 0,
-    pageInfo: { hasNextPage: false, hasPreviousPage: false },
-  },
-  milestones: [],
-  labels: [],
-});
-
-export { issues, setIssues };
-
 const Issues = () => {
   const params = useParams();
   const [searchParams] = useSearchParams();