update readme for storybook issue (#1628)

* update readme for storybook issue * update read mean * updates * fix comments * fix test, but something still wrong with solid start when we run the app * fix test, but something still wrong with solid start when we run the app * fix test, but something still wrong with solid start when we run the app * fix build * fix lint * upgraded some solidjs dependencies * upgraded vite * netlify header issue fix * revert ci * ... * ... fixing build issue * ... fix lint * ... fix deploments * ... fix deploments * ... deps upgrades * fixed folder navigation * fixed inner folder navigation * chore: fix again folder nav * chore: lock fine passing through --------- Co-authored-by: Jerry Hogan <[email protected]>
thisdot · Aug 1, 2023 · e2688ac · e2688ac
1 parent 547381e
commit e2688ac
Show file tree

Hide file tree

Showing 22 changed files with 8,394 additions and 150 deletions.
diff --git a/solidstart-tanstackquery-tailwind-modules/.gitignore b/solidstart-tanstackquery-tailwind-modules/.gitignore
@@ -25,7 +25,6 @@ Thumbs.db
 
 yarn-error.log
 
-yarn.lock
 package-lock.json
 
 # env file

diff --git a/solidstart-tanstackquery-tailwind-modules/README.md b/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.)

diff --git a/solidstart-tanstackquery-tailwind-modules/package.json b/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"

diff --git a/solidstart-tanstackquery-tailwind-modules/src/auth/AuthStore.ts b/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;

diff --git a/...start-tanstackquery-tailwind-modules/src/components/BranchNavigation/BranchNavigation.tsx b/...start-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,18 +41,18 @@ const BranchNavigation = (props: Props) => {
           <For each={crumbs()}>
             {(crumb, index) => (
               <Switch
-                fallback={() => (
+                fallback={
                   <>
-                    <A
+                    <a
                       href={`${hrefPath(index())}`}
                       data-testid={`file explorer nav crumb ${crumb}`}
                       class={styles.crumbLink}
                     >
                       {crumb}
-                    </A>
+                    </a>
                     <span class={styles.separator}>/</span>
                   </>
-                )}
+                }
               >
                 <Match when={index() === crumbs().length - 1}>
                   <span

diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/FileExplorer/FileExplorer.tsx b/solidstart-tanstackquery-tailwind-modules/src/components/FileExplorer/FileExplorer.tsx
@@ -7,13 +7,13 @@ import {
   Switch,
   Match,
 } from 'solid-js';
-import { A } from '@solidjs/router';
 import { DocumentIcon, FolderIcon } from '../Icons';
 import styles from './FileExplorer.module.css';
 import getRepoTree from '../../services/get-repo-tree';
 import { parseQueryData } from './parseTree';
 import { createQuery } from '@tanstack/solid-query';
 import { TreeProps } from '~/types/repo-tree-type';
+import { A } from '@solidjs/router';
 
 export type IProps = {
   branch: string;
@@ -58,6 +58,7 @@ const FileExplorerView = (props: IProps) => {
             <A
               href={`${basePath()}/tree/${local.branch}/${local.path}`}
               class={styles.cellBack}
+              replace
             >
               <div class="text-blue-600">..</div>
             </A>
@@ -73,15 +74,15 @@ const FileExplorerView = (props: IProps) => {
                       </Match>
                     </Switch>
                   </div>
-                  <A
+                  <a
                     href={`${basePath()}/${item.type}/${local.branch}/${
                       item.path
                     }`}
                     data-testid={`file explorer list ${item.name}`}
                     class={styles.link}
                   >
                     {item.name}
-                  </A>
+                  </a>
                 </div>
               </div>
             )}

diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/FileViewer/FileViewer.tsx b/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 '@solidjs/router';
 
 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 (

diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/PRAndIssuesData/PRAndIssuesData.tsx b/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';

diff --git a/...art-tanstackquery-tailwind-modules/src/components/PRAndIssuesHeader/PRAndIssuesHeader.tsx b/...art-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';

diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/ProfileNav/ProfileNav.spec.tsx b/solidstart-tanstackquery-tailwind-modules/src/components/ProfileNav/ProfileNav.spec.tsx
@@ -23,3 +23,4 @@ describe('Profile Navigation', () => {
     expect(text).toBeDefined();
   });
 });
+
diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/RepoIssues/RepoIssues.tsx b/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();

diff --git a/...start-tanstackquery-tailwind-modules/src/components/RepoPullRequests/RepoPullrequests.tsx b/...start-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();

diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/RepoReadMe/RepoReadMe.tsx b/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',
       })
   );
 

diff --git a/solidstart-tanstackquery-tailwind-modules/src/components/TabNavigation/TabNavigation.tsx b/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;