From 7b8f8d7ebc52863cdf84f68dfd432444962f1659 Mon Sep 17 00:00:00 2001 From: Mattia <32470461+Megio@users.noreply.github.com> Date: Wed, 9 Aug 2023 17:57:48 +0200 Subject: [PATCH 1/4] fix: expo react native scroll in home page and all repo link (#1896) * fix: expo react native scroll in home page and all repo link * fix: format code --- .../Repositories/Repositories.tsx | 16 +++-- .../src/screens/Home/Home.tsx | 70 ++++++++++--------- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx b/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx index a6f334d6c..acecc3478 100644 --- a/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx +++ b/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx @@ -28,15 +28,17 @@ const Repositories = ({ showsVerticalScrollIndicator={false} keyExtractor={(item, index) => item.id + index} renderItem={({ item }) => } - ListHeaderComponent={} + ListHeaderComponent={ + + } ListFooterComponent={ repos.length > 0 && ( - + ) } /> diff --git a/expo-zustand-styled-components/src/screens/Home/Home.tsx b/expo-zustand-styled-components/src/screens/Home/Home.tsx index 96b4c3a00..8634d64c8 100644 --- a/expo-zustand-styled-components/src/screens/Home/Home.tsx +++ b/expo-zustand-styled-components/src/screens/Home/Home.tsx @@ -1,6 +1,6 @@ import { openURL } from 'expo-linking'; import React, { useEffect } from 'react'; -import { Text, FlatList, TouchableOpacity, useWindowDimensions } from 'react-native'; +import { Text, TouchableOpacity, useWindowDimensions, ScrollView } from 'react-native'; import { GistsStyled, TitleStyled, @@ -19,6 +19,7 @@ import { useGistsStore, useTopReposStore } from '../../hooks/stores'; import RepoCard from '../../components/RepoCard'; import LoaderErrorView from '../../components/LoaderErrorView'; +import LinkButton from '../../components/LinkButton/LinkButton'; const Home = () => { const { width } = useWindowDimensions(); @@ -36,40 +37,43 @@ const Home = () => { return ( - - - - Gists - {gistsIsLoading || gistsError ? ( - - ) : ( - ( - openURL(item.url)}> + + + + + Gists + {gistsIsLoading || gistsError ? ( + + ) : ( + gists.map((item) => ( + openURL(item.url)}> {item.name} - )} - /> - )} - - - - Top Repositories - - {topReposIsLoading || topReposError ? ( - - ) : ( - <> - } /> - - View all repositories - - - )} - - - + )) + )} + + + + Top Repositories + + {topReposIsLoading || topReposError ? ( + + ) : ( + <> + {topRepos.map((item) => ( + + ))} + + + View all repositories + + + + )} + + + + ); }; From fe0e8d140f5e36cd106384e250bd533be2184a36 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Wed, 9 Aug 2023 17:23:41 +0100 Subject: [PATCH 2/4] chore: fix repo header links (#1894) * chore: fix repo header links * chore: remove log * Revert "chore: remove log" This reverts commit dd74a13916b7bf61ccde6ab6627f12eda08cf64f. * chore: remove log --- .../src/components/sub-header/SubHeader.styles.tsx | 2 ++ .../src/components/sub-header/SubHeader.tsx | 10 ++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/cra-rxjs-styled-components/src/components/sub-header/SubHeader.styles.tsx b/cra-rxjs-styled-components/src/components/sub-header/SubHeader.styles.tsx index aaa49c1ac..b18eb5db6 100644 --- a/cra-rxjs-styled-components/src/components/sub-header/SubHeader.styles.tsx +++ b/cra-rxjs-styled-components/src/components/sub-header/SubHeader.styles.tsx @@ -48,6 +48,7 @@ export const SubHeaderUserLink = styled.a` margin-bottom: 0.125rem; --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); + text-decoration: none; &:hover { text-decoration: underline; @@ -71,6 +72,7 @@ export const SubHeaderRepoLink = styled.a` --tw-space-x-reverse: 0; margin-right: calc(0.375rem * var(--tw-space-x-reverse)); margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse))); + text-decoration: none; &:hover { text-decoration: underline; diff --git a/cra-rxjs-styled-components/src/components/sub-header/SubHeader.tsx b/cra-rxjs-styled-components/src/components/sub-header/SubHeader.tsx index 641ad74e3..bb24115d7 100644 --- a/cra-rxjs-styled-components/src/components/sub-header/SubHeader.tsx +++ b/cra-rxjs-styled-components/src/components/sub-header/SubHeader.tsx @@ -70,9 +70,15 @@ export default function SubHeader() { - {repo.owner} + + {repo.owner} + / - {repo?.name} + + {repo?.name} + {repo.data?.isPrivate ? 'Private' : 'Public'} From 07665a26cef2739e83225de4b3096d64ec508a43 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Wed, 9 Aug 2023 17:24:42 +0100 Subject: [PATCH 3/4] chore: fix top repos api (#1901) * chore: fix top repos api * chore: modified repo card * chore: fixing failing build --- .../src/components/repo-card/RepoCard.tsx | 13 +++++++++++-- .../src/constants/url.constants.ts | 12 ++++++++++++ .../src/helpers/objectToQueryString.ts | 5 +++++ .../src/hooks/repositories/use-repos.ts | 14 ++++++++++---- .../src/routes/user-top-repos.tsx | 5 +++-- 5 files changed, 41 insertions(+), 8 deletions(-) create mode 100644 cra-rxjs-styled-components/src/helpers/objectToQueryString.ts diff --git a/cra-rxjs-styled-components/src/components/repo-card/RepoCard.tsx b/cra-rxjs-styled-components/src/components/repo-card/RepoCard.tsx index 5a3f1183f..ec2a3c11d 100644 --- a/cra-rxjs-styled-components/src/components/repo-card/RepoCard.tsx +++ b/cra-rxjs-styled-components/src/components/repo-card/RepoCard.tsx @@ -17,9 +17,10 @@ import { interface RepoCardProps { repo: Repository; star?: boolean; + isMainPage?: boolean; } -function RepoCard({ repo, star }: RepoCardProps) { +function RepoCard({ repo, star, isMainPage }: RepoCardProps) { const { id, name, @@ -32,11 +33,19 @@ function RepoCard({ repo, star }: RepoCardProps) { visibility, } = repo; + const repoNameWithOwnerLink = () => + owner?.login ? `/${owner.login}/${name || ''}` : ''; + + const repoNameWithOwner = () => + `${isMainPage ? `${owner?.login + '/' || ''}` : ''}${name || ''}`; + return (
- {name} + + {repoNameWithOwner()} + diff --git a/cra-rxjs-styled-components/src/constants/url.constants.ts b/cra-rxjs-styled-components/src/constants/url.constants.ts index 017a5e004..398315f76 100644 --- a/cra-rxjs-styled-components/src/constants/url.constants.ts +++ b/cra-rxjs-styled-components/src/constants/url.constants.ts @@ -1,3 +1,4 @@ +import convertObjectToQueryString from '../helpers/objectToQueryString'; import { IssueType, State } from '../types/types'; export const API_URL_BASE = process.env.REACT_APP_API_URL; @@ -30,6 +31,17 @@ export const ORG_REPO_LIST = (user: string) => export const USER_REPO_LIST = (user: string, page: string = '1') => `${GITHUB_URL_BASE}/users/${user}/repos?sort=pushed&page=${page}&type=all`; +export const USER_TOP_REPO_LIST = (page: string = '1') => { + const params = { + sort: 'updated', + affiliation: 'owner, collaborator, organization_member', + page, + per_page: 20, + }; + const queryStrings = convertObjectToQueryString(params); + return `${GITHUB_URL_BASE}/user/repos?${queryStrings}`; +}; + export const GISTS_URL = (user: string) => `${GITHUB_URL_BASE}/users/${user}/gists?per_page=10`; diff --git a/cra-rxjs-styled-components/src/helpers/objectToQueryString.ts b/cra-rxjs-styled-components/src/helpers/objectToQueryString.ts new file mode 100644 index 000000000..cf9d6a8f1 --- /dev/null +++ b/cra-rxjs-styled-components/src/helpers/objectToQueryString.ts @@ -0,0 +1,5 @@ +export default function convertObjectToQueryString( + object: Record +) { + return new URLSearchParams(object).toString(); +} diff --git a/cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts b/cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts index 5cea1ee4f..2c81b3f1c 100644 --- a/cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts +++ b/cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts @@ -19,11 +19,17 @@ import { } from '../../helpers/extract-branch-count'; import { useEffect, useState } from 'react'; -import { USER_REPO_LIST } from '../../constants/url.constants'; +import { + USER_REPO_LIST, + USER_TOP_REPO_LIST, +} from '../../constants/url.constants'; import { fromFetchWithAuth } from '../auth/from-fetch-with-auth'; import parse from 'parse-link-header'; -export function useRepos(username: string | undefined): UseRepo { +export function useRepos( + username: string | undefined, + isTopRepos?: boolean +): UseRepo { const [state, setState] = useState([]); const [paginationPages, setPaginationPages] = useState({ prevPage: '', @@ -36,7 +42,7 @@ export function useRepos(username: string | undefined): UseRepo { useEffect(() => { if (username) { const subscription: Subscription = fromFetchWithAuth( - USER_REPO_LIST(username, page), + isTopRepos ? USER_TOP_REPO_LIST(page) : USER_REPO_LIST(username, page), { selector: (response: Response) => { const links = parse(response.headers.get('Link')); @@ -70,7 +76,7 @@ export function useRepos(username: string | undefined): UseRepo { subscription.unsubscribe(); }; } - }, [username, page]); + }, [username, page, isTopRepos]); const nextPage = () => { setPage(paginationPages.nextPage); diff --git a/cra-rxjs-styled-components/src/routes/user-top-repos.tsx b/cra-rxjs-styled-components/src/routes/user-top-repos.tsx index 91084b6d2..ce2daa3b6 100644 --- a/cra-rxjs-styled-components/src/routes/user-top-repos.tsx +++ b/cra-rxjs-styled-components/src/routes/user-top-repos.tsx @@ -65,7 +65,8 @@ const NetlifyBadgeContainer = styled.div` export default function TopRepos() { const context = useUser(); const user = context?.user; - const { repositories } = useRepos(user?.login); + const isTopRepos: boolean = true; + const { repositories } = useRepos(user?.login, isTopRepos); const { gists, loadingGist } = useGists(); const topRepositories = [...repositories] .sort((a, b) => b.stargazers_count - a.stargazers_count) @@ -92,7 +93,7 @@ export default function TopRepos() { ) : ( <> {topRepositories.map((repo) => ( - + ))} From 10cd8ddeb4392420385814c01a9109bcbd5bc1e5 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Wed, 9 Aug 2023 18:33:27 +0100 Subject: [PATCH 4/4] chore: csf2 to csf3 (#1899) --- next-react-query-tailwind/.gitignore | 2 +- .../public/mockServiceWorker.js | 303 ++++++++++++++++++ .../FileExplorer/FileExplorer.stories.tsx | 51 +-- .../FileViewer/FileViewer.stories.tsx | 66 ++-- .../Loading/LoadingBulletList.stories.tsx | 6 +- .../Loading/LoadingPulseDots.stories.tsx | 6 +- .../Loading/LoadingTextLine.stories.tsx | 6 +- .../src/components/NavBar/NavBar.stories.tsx | 16 +- .../src/components/NavBar/NavBar.tsx | 18 +- .../OrgProfile/OrgProfile.stories.tsx | 15 +- .../RepoAboutWidget.stories.tsx | 87 ++--- .../RepoActionButtons.stories.tsx | 67 ++-- .../RepoHeader/RepoHeader.stories.tsx | 50 +-- .../RepoHeading/RepoHeading.stories.tsx | 79 +++-- .../RepoIssues/RepoIssues.stories.tsx | 58 ++-- .../RepoNavigation/RepoNavigation.stories.tsx | 57 ++-- .../components/RepoPage/RepoPage.stories.tsx | 49 ++- .../RepoPulls/RepoPulls.stories.tsx | 58 ++-- .../RepoReadMe/RepoReadMe.stories.tsx | 36 ++- .../TabNavigation/TabNavigation.stories.tsx | 37 +-- .../UserDropdown/UserDropdown.data.tsx | 7 +- .../UserDropdown/UserDropdown.stories.tsx | 21 +- .../UserGists/UserGists.stories.tsx | 8 +- .../UserProfile/LoadingProfile.stories.tsx | 6 +- .../UserProfile/UserProfile.stories.tsx | 15 +- .../UserRepos/LoadingRepos.stories.tsx | 6 +- .../UserRepos/UserRepos.stories.tsx | 22 +- .../UserTopRepos/UserTopRepos.stories.tsx | 8 +- next-react-query-tailwind/src/pages/_app.tsx | 2 +- 29 files changed, 746 insertions(+), 416 deletions(-) create mode 100644 next-react-query-tailwind/public/mockServiceWorker.js diff --git a/next-react-query-tailwind/.gitignore b/next-react-query-tailwind/.gitignore index b28b7ec6d..8f49d6983 100644 --- a/next-react-query-tailwind/.gitignore +++ b/next-react-query-tailwind/.gitignore @@ -36,4 +36,4 @@ yarn-error.log* src/lib/github.ts -public/mockServiceWorker.js \ No newline at end of file +#public/mockServiceWorker.js diff --git a/next-react-query-tailwind/public/mockServiceWorker.js b/next-react-query-tailwind/public/mockServiceWorker.js new file mode 100644 index 000000000..d2a31e170 --- /dev/null +++ b/next-react-query-tailwind/public/mockServiceWorker.js @@ -0,0 +1,303 @@ +/* eslint-disable */ +/* tslint:disable */ + +/** + * Mock Service Worker (1.2.3). + * @see https://github.com/mswjs/msw + * - Please do NOT modify this file. + * - Please do NOT serve this file on production. + */ + +const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'; +const activeClientIds = new Set(); + +self.addEventListener('install', function () { + self.skipWaiting(); +}); + +self.addEventListener('activate', function (event) { + event.waitUntil(self.clients.claim()); +}); + +self.addEventListener('message', async function (event) { + const clientId = event.source.id; + + if (!clientId || !self.clients) { + return; + } + + const client = await self.clients.get(clientId); + + if (!client) { + return; + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }); + + switch (event.data) { + case 'KEEPALIVE_REQUEST': { + sendToClient(client, { + type: 'KEEPALIVE_RESPONSE', + }); + break; + } + + case 'INTEGRITY_CHECK_REQUEST': { + sendToClient(client, { + type: 'INTEGRITY_CHECK_RESPONSE', + payload: INTEGRITY_CHECKSUM, + }); + break; + } + + case 'MOCK_ACTIVATE': { + activeClientIds.add(clientId); + + sendToClient(client, { + type: 'MOCKING_ENABLED', + payload: true, + }); + break; + } + + case 'MOCK_DEACTIVATE': { + activeClientIds.delete(clientId); + break; + } + + case 'CLIENT_CLOSED': { + activeClientIds.delete(clientId); + + const remainingClients = allClients.filter((client) => { + return client.id !== clientId; + }); + + // Unregister itself when there are no more clients + if (remainingClients.length === 0) { + self.registration.unregister(); + } + + break; + } + } +}); + +self.addEventListener('fetch', function (event) { + const { request } = event; + const accept = request.headers.get('accept') || ''; + + // Bypass server-sent events. + if (accept.includes('text/event-stream')) { + return; + } + + // Bypass navigation requests. + if (request.mode === 'navigate') { + return; + } + + // Opening the DevTools triggers the "only-if-cached" request + // that cannot be handled by the worker. Bypass such requests. + if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { + return; + } + + // Bypass all requests when there are no active clients. + // Prevents the self-unregistered worked from handling requests + // after it's been deleted (still remains active until the next reload). + if (activeClientIds.size === 0) { + return; + } + + // Generate unique request ID. + const requestId = Math.random().toString(16).slice(2); + + event.respondWith( + handleRequest(event, requestId).catch((error) => { + if (error.name === 'NetworkError') { + console.warn( + '[MSW] Successfully emulated a network error for the "%s %s" request.', + request.method, + request.url + ); + return; + } + + // At this point, any exception indicates an issue with the original request/response. + console.error( + `\ +[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`, + request.method, + request.url, + `${error.name}: ${error.message}` + ); + }) + ); +}); + +async function handleRequest(event, requestId) { + const client = await resolveMainClient(event); + const response = await getResponse(event, client, requestId); + + // Send back the response clone for the "response:*" life-cycle events. + // Ensure MSW is active and ready to handle the message, otherwise + // this message will pend indefinitely. + if (client && activeClientIds.has(client.id)) { + (async function () { + const clonedResponse = response.clone(); + sendToClient(client, { + type: 'RESPONSE', + payload: { + requestId, + type: clonedResponse.type, + ok: clonedResponse.ok, + status: clonedResponse.status, + statusText: clonedResponse.statusText, + body: + clonedResponse.body === null ? null : await clonedResponse.text(), + headers: Object.fromEntries(clonedResponse.headers.entries()), + redirected: clonedResponse.redirected, + }, + }); + })(); + } + + return response; +} + +// Resolve the main client for the given event. +// Client that issues a request doesn't necessarily equal the client +// that registered the worker. It's with the latter the worker should +// communicate with during the response resolving phase. +async function resolveMainClient(event) { + const client = await self.clients.get(event.clientId); + + if (client?.frameType === 'top-level') { + return client; + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }); + + return allClients + .filter((client) => { + // Get only those clients that are currently visible. + return client.visibilityState === 'visible'; + }) + .find((client) => { + // Find the client ID that's recorded in the + // set of clients that have registered the worker. + return activeClientIds.has(client.id); + }); +} + +async function getResponse(event, client, requestId) { + const { request } = event; + const clonedRequest = request.clone(); + + function passthrough() { + // Clone the request because it might've been already used + // (i.e. its body has been read and sent to the client). + const headers = Object.fromEntries(clonedRequest.headers.entries()); + + // Remove MSW-specific request headers so the bypassed requests + // comply with the server's CORS preflight check. + // Operate with the headers as an object because request "Headers" + // are immutable. + delete headers['x-msw-bypass']; + + return fetch(clonedRequest, { headers }); + } + + // Bypass mocking when the client is not active. + if (!client) { + return passthrough(); + } + + // Bypass initial page load requests (i.e. static assets). + // The absence of the immediate/parent client in the map of the active clients + // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet + // and is not ready to handle requests. + if (!activeClientIds.has(client.id)) { + return passthrough(); + } + + // Bypass requests with the explicit bypass header. + // Such requests can be issued by "ctx.fetch()". + if (request.headers.get('x-msw-bypass') === 'true') { + return passthrough(); + } + + // Notify the client that a request has been intercepted. + const clientMessage = await sendToClient(client, { + type: 'REQUEST', + payload: { + id: requestId, + url: request.url, + method: request.method, + headers: Object.fromEntries(request.headers.entries()), + cache: request.cache, + mode: request.mode, + credentials: request.credentials, + destination: request.destination, + integrity: request.integrity, + redirect: request.redirect, + referrer: request.referrer, + referrerPolicy: request.referrerPolicy, + body: await request.text(), + bodyUsed: request.bodyUsed, + keepalive: request.keepalive, + }, + }); + + switch (clientMessage.type) { + case 'MOCK_RESPONSE': { + return respondWithMock(clientMessage.data); + } + + case 'MOCK_NOT_FOUND': { + return passthrough(); + } + + case 'NETWORK_ERROR': { + const { name, message } = clientMessage.data; + const networkError = new Error(message); + networkError.name = name; + + // Rejecting a "respondWith" promise emulates a network error. + throw networkError; + } + } + + return passthrough(); +} + +function sendToClient(client, message) { + return new Promise((resolve, reject) => { + const channel = new MessageChannel(); + + channel.port1.onmessage = (event) => { + if (event.data && event.data.error) { + return reject(event.data.error); + } + + resolve(event.data); + }; + + client.postMessage(message, [channel.port2]); + }); +} + +function sleep(timeMs) { + return new Promise((resolve) => { + setTimeout(resolve, timeMs); + }); +} + +async function respondWithMock(response) { + await sleep(response.delay); + return new Response(response.body, response); +} diff --git a/next-react-query-tailwind/src/components/FileExplorer/FileExplorer.stories.tsx b/next-react-query-tailwind/src/components/FileExplorer/FileExplorer.stories.tsx index d0aa2446a..dfc785ab3 100644 --- a/next-react-query-tailwind/src/components/FileExplorer/FileExplorer.stories.tsx +++ b/next-react-query-tailwind/src/components/FileExplorer/FileExplorer.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import FileExplorer from './FileExplorer.data'; import { mockRepoTreeQuery } from './FileExplorer.mocks'; import { createWrapper, ErrorBoundaryTestComponent } from '@lib/testUtils'; @@ -12,7 +12,7 @@ export default { msw: [mockRepoTreeQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -25,32 +25,41 @@ export default { ], } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const RootDir = Template.bind({}); -RootDir.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: '', +export const RootDir = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: '', + }, }; -export const SrcDir = Template.bind({}); -SrcDir.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: 'src', +export const SrcDir = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: 'src', + }, }; -export const BadPathError = Template.bind({}); -BadPathError.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: 'bad/path', +export const BadPathError = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: 'bad/path', + }, }; diff --git a/next-react-query-tailwind/src/components/FileViewer/FileViewer.stories.tsx b/next-react-query-tailwind/src/components/FileViewer/FileViewer.stories.tsx index 8688108a0..9c20609dd 100644 --- a/next-react-query-tailwind/src/components/FileViewer/FileViewer.stories.tsx +++ b/next-react-query-tailwind/src/components/FileViewer/FileViewer.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import FileViewer from './FileViewer.data'; import { mockRepoFileQuery } from './FileViewer.mocks'; import { createWrapper, ErrorBoundaryTestComponent } from '@lib/testUtils'; @@ -12,7 +12,7 @@ export default { msw: [mockRepoFileQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -25,40 +25,52 @@ export default { ], } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const JsonFile = Template.bind({}); -JsonFile.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: 'package.json', +export const JsonFile = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: 'package.json', + }, }; -export const JsFile = Template.bind({}); -JsFile.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: 'src/Navigator.js', +export const JsFile = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: 'src/Navigator.js', + }, }; -export const TextFile = Template.bind({}); -TextFile.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: '.buckconfig', +export const TextFile = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: '.buckconfig', + }, }; -export const BadPathError = Template.bind({}); -BadPathError.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: 'bad/path', +export const BadPathError = { + render: Template, + + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: 'bad/path', + }, }; diff --git a/next-react-query-tailwind/src/components/Loading/LoadingBulletList.stories.tsx b/next-react-query-tailwind/src/components/Loading/LoadingBulletList.stories.tsx index a1ae7906c..cf3102e21 100644 --- a/next-react-query-tailwind/src/components/Loading/LoadingBulletList.stories.tsx +++ b/next-react-query-tailwind/src/components/Loading/LoadingBulletList.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import LoadingBulletList from './LoadingBulletList'; export default { @@ -6,6 +6,4 @@ export default { title: 'Loading/LoadingBulletList', } as Meta; -const Template: Story = () => ; - -export const Default = Template.bind({}); +export const Default = {}; diff --git a/next-react-query-tailwind/src/components/Loading/LoadingPulseDots.stories.tsx b/next-react-query-tailwind/src/components/Loading/LoadingPulseDots.stories.tsx index 73cce77ef..88ef57d28 100644 --- a/next-react-query-tailwind/src/components/Loading/LoadingPulseDots.stories.tsx +++ b/next-react-query-tailwind/src/components/Loading/LoadingPulseDots.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import LoadingPulseDots from './LoadingPulseDots'; export default { @@ -6,6 +6,4 @@ export default { title: 'Loading/LoadingPulseDots', } as Meta; -const Template: Story = () => ; - -export const Default = Template.bind({}); +export const Default = {}; diff --git a/next-react-query-tailwind/src/components/Loading/LoadingTextLine.stories.tsx b/next-react-query-tailwind/src/components/Loading/LoadingTextLine.stories.tsx index ad73d3cdf..f89f905fa 100644 --- a/next-react-query-tailwind/src/components/Loading/LoadingTextLine.stories.tsx +++ b/next-react-query-tailwind/src/components/Loading/LoadingTextLine.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import LoadingTextLine from './LoadingTextLine'; export default { @@ -6,6 +6,4 @@ export default { title: 'Loading/LoadingTextLine', } as Meta; -const Template: Story = () => ; - -export const Default = Template.bind({}); +export const Default = {}; diff --git a/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx b/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx index c59870440..56b552ee8 100644 --- a/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx +++ b/next-react-query-tailwind/src/components/NavBar/NavBar.stories.tsx @@ -1,14 +1,15 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import NavBar from './NavBar'; import { createWrapper } from '@lib/testUtils'; import { RepoProvider } from '@context/RepoContext'; +import { SessionProvider } from 'next-auth/react'; export default { component: NavBar, title: 'Components/NavBar', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -19,11 +20,14 @@ export default { ], } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( - + + + ); -export const Default = Template.bind({}); -Default.args = {}; +export const Default = { + render: Template, +}; diff --git a/next-react-query-tailwind/src/components/NavBar/NavBar.tsx b/next-react-query-tailwind/src/components/NavBar/NavBar.tsx index 82eb417bb..359f420da 100644 --- a/next-react-query-tailwind/src/components/NavBar/NavBar.tsx +++ b/next-react-query-tailwind/src/components/NavBar/NavBar.tsx @@ -9,20 +9,10 @@ function NavBar() { const user = session?.user; return (
- {user ? ( - <> - - - -
-
- -
-
- - ) : ( - '' - )} + + + +
{user && }
); } diff --git a/next-react-query-tailwind/src/components/OrgProfile/OrgProfile.stories.tsx b/next-react-query-tailwind/src/components/OrgProfile/OrgProfile.stories.tsx index 88a1d6f00..6bf9f13da 100644 --- a/next-react-query-tailwind/src/components/OrgProfile/OrgProfile.stories.tsx +++ b/next-react-query-tailwind/src/components/OrgProfile/OrgProfile.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentProps } from 'react'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import OrgProfile from './OrgProfile.data'; import { mockOrgProfileQuery } from './OrgProfile.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -11,7 +11,7 @@ export default { msw: [mockOrgProfileQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -22,11 +22,8 @@ export default { ], } as Meta; -const Template: Story> = (args) => ( - -); - -export const Default = Template.bind({}); -Default.args = { - username: 'vercel', +export const Default = { + args: { + username: 'vercel', + }, }; diff --git a/next-react-query-tailwind/src/components/RepoAboutWidget/RepoAboutWidget.stories.tsx b/next-react-query-tailwind/src/components/RepoAboutWidget/RepoAboutWidget.stories.tsx index 2d3d107c4..c66524ebb 100644 --- a/next-react-query-tailwind/src/components/RepoAboutWidget/RepoAboutWidget.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoAboutWidget/RepoAboutWidget.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoAboutWidget from './RepoAboutWidget'; import { createWrapper } from '@lib/testUtils'; import { RepoProvider } from '@context/RepoContext'; @@ -8,7 +8,7 @@ export default { component: RepoAboutWidget, title: 'RepoPage/RepoAboutWidget', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -19,52 +19,61 @@ export default { ], } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const WithDescription = Template.bind({}); -WithDescription.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: false, - data: { - isPrivate: false, - stargazerCount: 30, - forkCount: 10, - watcherCount: 5, - description: - 'Demo app for JSMarathon presentation: React Native E2E Testing with Detox', - homepageUrl: 'www.youtube.com/watch?v=vm085szsz_m', - openIssueCount: 8, - openPullRequestCount: 3, - topics: ['react-native', 'pizza', 'e2e-tests', 'detox', 'jsmarathon'], - isOrg: true, +export const WithDescription = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: false, + data: { + isPrivate: false, + stargazerCount: 30, + forkCount: 10, + watcherCount: 5, + description: + 'Demo app for JSMarathon presentation: React Native E2E Testing with Detox', + homepageUrl: 'www.youtube.com/watch?v=vm085szsz_m', + openIssueCount: 8, + openPullRequestCount: 3, + topics: ['react-native', 'pizza', 'e2e-tests', 'detox', 'jsmarathon'], + isOrg: true, + }, }, }; -export const NoDescription = Template.bind({}); -NoDescription.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: false, - data: { - isPrivate: false, - stargazerCount: 30, - forkCount: 10, - watcherCount: 5, - openIssueCount: 8, - openPullRequestCount: 3, - topics: [], - isOrg: true, +export const NoDescription = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: false, + data: { + isPrivate: false, + stargazerCount: 30, + forkCount: 10, + watcherCount: 5, + openIssueCount: 8, + openPullRequestCount: 3, + topics: [], + isOrg: true, + }, }, }; -export const Loading = Template.bind({}); -Loading.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: true, +export const Loading = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: true, + }, }; diff --git a/next-react-query-tailwind/src/components/RepoActionButtons/RepoActionButtons.stories.tsx b/next-react-query-tailwind/src/components/RepoActionButtons/RepoActionButtons.stories.tsx index 03c7223a2..1a593c46c 100644 --- a/next-react-query-tailwind/src/components/RepoActionButtons/RepoActionButtons.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoActionButtons/RepoActionButtons.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoActionButtons from './RepoActionButtons'; import { createWrapper } from '@lib/testUtils'; import { RepoProvider } from '@context/RepoContext'; @@ -8,7 +8,7 @@ export default { component: RepoActionButtons, title: 'RepoPage/RepoActionButtons', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -26,49 +26,42 @@ export default { }, } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const Default = Template.bind({}); -Default.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: false, - data: { - isPrivate: false, - stargazerCount: 30, - forkCount: 10, - watcherCount: 5, - openIssueCount: 2, - openPullRequestCount: 1, - topics: [], - isOrg: true, +export const Default = { + render: Template, + + args: { + name: 'react', + owner: 'facebook', + isRepoLoading: false, + data: { + isPrivate: false, + stargazerCount: 178350, + forkCount: 36801, + watcherCount: 6321, + openIssueCount: 2, + openPullRequestCount: 1, + topics: [], + isOrg: true, + }, }, }; -export const BigNumbers = Template.bind({}); -Default.args = { - name: 'react', - owner: 'facebook', - isRepoLoading: false, - data: { - isPrivate: false, - stargazerCount: 178350, - forkCount: 36801, - watcherCount: 6321, - openIssueCount: 2, - openPullRequestCount: 1, - topics: [], - isOrg: true, - }, +export const BigNumbers = { + render: Template, }; -export const Loading = Template.bind({}); -Loading.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: true, +export const Loading = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: true, + }, }; diff --git a/next-react-query-tailwind/src/components/RepoHeader/RepoHeader.stories.tsx b/next-react-query-tailwind/src/components/RepoHeader/RepoHeader.stories.tsx index 24f81b414..4bcccbe83 100644 --- a/next-react-query-tailwind/src/components/RepoHeader/RepoHeader.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoHeader/RepoHeader.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoHeader from './RepoHeader'; import { createWrapper } from '@lib/testUtils'; import { RepoProvider } from '@context/RepoContext'; @@ -8,7 +8,7 @@ export default { component: RepoHeader, title: 'RepoPage/RepoHeader', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -29,32 +29,38 @@ export default { }, } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const Default = Template.bind({}); -Default.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: false, - data: { - isPrivate: false, - stargazerCount: 30, - forkCount: 10, - watcherCount: 5, - openIssueCount: 2, - openPullRequestCount: 1, - topics: [], - isOrg: true, +export const Default = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: false, + data: { + isPrivate: false, + stargazerCount: 30, + forkCount: 10, + watcherCount: 5, + openIssueCount: 2, + openPullRequestCount: 1, + topics: [], + isOrg: true, + }, }, }; -export const Loading = Template.bind({}); -Loading.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: true, +export const Loading = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: true, + }, }; diff --git a/next-react-query-tailwind/src/components/RepoHeading/RepoHeading.stories.tsx b/next-react-query-tailwind/src/components/RepoHeading/RepoHeading.stories.tsx index af8225a1e..e683934f8 100644 --- a/next-react-query-tailwind/src/components/RepoHeading/RepoHeading.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoHeading/RepoHeading.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoHeading from './RepoHeading'; import { createWrapper } from '@lib/testUtils'; import { RepoProvider } from '@context/RepoContext'; @@ -8,7 +8,7 @@ export default { component: RepoHeading, title: 'RepoPage/RepoHeading', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -19,48 +19,57 @@ export default { ], } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const Public = Template.bind({}); -Public.args = { - name: 'starter.dev', - owner: 'thisdot', - data: { - isPrivate: false, - stargazerCount: 30, - forkCount: 10, - watcherCount: 5, - openIssueCount: 2, - openPullRequestCount: 1, - topics: [], - isOrg: true, +export const Public = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + data: { + isPrivate: false, + stargazerCount: 30, + forkCount: 10, + watcherCount: 5, + openIssueCount: 2, + openPullRequestCount: 1, + topics: [], + isOrg: true, + }, }, }; -export const Private = Template.bind({}); -Private.args = { - name: 'starter.dev', - owner: 'thisdot', - data: { - isPrivate: true, - stargazerCount: 30, - forkCount: 10, - watcherCount: 5, - openIssueCount: 2, - openPullRequestCount: 1, - topics: [], - isOrg: true, +export const Private = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + data: { + isPrivate: true, + stargazerCount: 30, + forkCount: 10, + watcherCount: 5, + openIssueCount: 2, + openPullRequestCount: 1, + topics: [], + isOrg: true, + }, }, }; -export const Loading = Template.bind({}); -Loading.args = { - name: 'starter.dev', - owner: 'thisdot', - isRepoLoading: true, - data: undefined, +export const Loading = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + isRepoLoading: true, + data: undefined, + }, }; diff --git a/next-react-query-tailwind/src/components/RepoIssues/RepoIssues.stories.tsx b/next-react-query-tailwind/src/components/RepoIssues/RepoIssues.stories.tsx index 51b44111d..7a035cf84 100644 --- a/next-react-query-tailwind/src/components/RepoIssues/RepoIssues.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoIssues/RepoIssues.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoIssues from './RepoIssues.data'; import { mockRepoIssuesQuery } from './RepoIssues.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -11,7 +11,7 @@ export default { msw: [mockRepoIssuesQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -22,30 +22,30 @@ export default { ], } as Meta; -const Template: Story = () => ( - - - -); - -export const Default = Template.bind({}); +export const Default = { + render: () => ( + + + + ), +}; diff --git a/next-react-query-tailwind/src/components/RepoNavigation/RepoNavigation.stories.tsx b/next-react-query-tailwind/src/components/RepoNavigation/RepoNavigation.stories.tsx index ee8fd7ca0..a81b6eb12 100644 --- a/next-react-query-tailwind/src/components/RepoNavigation/RepoNavigation.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoNavigation/RepoNavigation.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoNavigation from './RepoNavigation'; import { createWrapper } from '@lib/testUtils'; import { RepoProvider } from '@context/RepoContext'; @@ -8,7 +8,7 @@ export default { component: RepoNavigation, title: 'RepoPage/RepoNavigation', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -26,35 +26,44 @@ export default { }, } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const RepoRoot = Template.bind({}); -RepoRoot.args = { - name: 'starter.dev', - owner: 'thisdot', - branch: 'main', - path: '', - isRepoLoading: true, +export const RepoRoot = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + branch: 'main', + path: '', + isRepoLoading: true, + }, }; -export const SrcPathTree = Template.bind({}); -SrcPathTree.args = { - name: 'starter.dev', - owner: 'thisdot', - branch: 'main', - path: 'src', - isRepoLoading: true, +export const SrcPathTree = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + branch: 'main', + path: 'src', + isRepoLoading: true, + }, }; -export const DeepPathFile = Template.bind({}); -DeepPathFile.args = { - name: 'starter.dev', - owner: 'thisdot', - branch: 'main', - path: 'next-react-query/src/components/RepoNavigation.tsx', - isRepoLoading: true, +export const DeepPathFile = { + render: Template, + + args: { + name: 'starter.dev', + owner: 'thisdot', + branch: 'main', + path: 'next-react-query/src/components/RepoNavigation.tsx', + isRepoLoading: true, + }, }; diff --git a/next-react-query-tailwind/src/components/RepoPage/RepoPage.stories.tsx b/next-react-query-tailwind/src/components/RepoPage/RepoPage.stories.tsx index d74a4eb22..02f9a82c4 100644 --- a/next-react-query-tailwind/src/components/RepoPage/RepoPage.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoPage/RepoPage.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentProps } from 'react'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoPage from './RepoPage.data'; import { mockRepoPageQuery } from './RepoPage.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -12,7 +12,7 @@ export default { msw: [mockRepoPageQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -23,31 +23,30 @@ export default { ], } as Meta; -const Template: Story> = (args) => ( - -); - -export const Home = Template.bind({}); -Home.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: '', - children: , +export const Home = { + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: '', + children: , + }, }; -export const WithPath = Template.bind({}); -WithPath.args = { - name: 'testrepos', - owner: 'testowner', - branch: 'main', - path: ['src', 'components'], - children: , +export const WithPath = { + args: { + name: 'testrepos', + owner: 'testowner', + branch: 'main', + path: ['src', 'components'], + children: , + }, }; -export const NotFound = Template.bind({}); -NotFound.args = { - name: 'fourohfour', - owner: 'nobody', - children: , +export const NotFound = { + args: { + name: 'fourohfour', + owner: 'nobody', + children: , + }, }; diff --git a/next-react-query-tailwind/src/components/RepoPulls/RepoPulls.stories.tsx b/next-react-query-tailwind/src/components/RepoPulls/RepoPulls.stories.tsx index a4287b21c..c4b8652a0 100644 --- a/next-react-query-tailwind/src/components/RepoPulls/RepoPulls.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoPulls/RepoPulls.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoPulls from './RepoPulls.data'; import { mockRepoPullsQuery } from './RepoPulls.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -11,7 +11,7 @@ export default { msw: [mockRepoPullsQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -22,30 +22,30 @@ export default { ], } as Meta; -const Template: Story = () => ( - - - -); - -export const Default = Template.bind({}); +export const Default = { + render: () => ( + + + + ), +}; diff --git a/next-react-query-tailwind/src/components/RepoReadMe/RepoReadMe.stories.tsx b/next-react-query-tailwind/src/components/RepoReadMe/RepoReadMe.stories.tsx index 87f2d5b2b..6e36656f5 100644 --- a/next-react-query-tailwind/src/components/RepoReadMe/RepoReadMe.stories.tsx +++ b/next-react-query-tailwind/src/components/RepoReadMe/RepoReadMe.stories.tsx @@ -1,5 +1,5 @@ import type { RepoContext } from '../../context/RepoContext'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import RepoReadMe from './RepoReadMe.data'; import { mockRepoReadMeQuery } from './RepoReadMe.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -12,7 +12,7 @@ export default { msw: [mockRepoReadMeQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -23,24 +23,30 @@ export default { ], } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => ( ); -export const NoReadMe = Template.bind({}); -NoReadMe.args = { - name: 'noreadme', - owner: 'testowner', - branch: 'main', - path: '', +export const NoReadMe = { + render: Template, + + args: { + name: 'noreadme', + owner: 'testowner', + branch: 'main', + path: '', + }, }; -export const HasReadMe = Template.bind({}); -HasReadMe.args = { - name: 'react', - owner: 'facebook', - branch: 'main', - path: '/', +export const HasReadMe = { + render: Template, + + args: { + name: 'react', + owner: 'facebook', + branch: 'main', + path: '/', + }, }; diff --git a/next-react-query-tailwind/src/components/TabNavigation/TabNavigation.stories.tsx b/next-react-query-tailwind/src/components/TabNavigation/TabNavigation.stories.tsx index 758c87e89..63be7f881 100644 --- a/next-react-query-tailwind/src/components/TabNavigation/TabNavigation.stories.tsx +++ b/next-react-query-tailwind/src/components/TabNavigation/TabNavigation.stories.tsx @@ -1,4 +1,4 @@ -import type { Story, ComponentStory, ComponentMeta } from '@storybook/react'; +import type { StoryFn, Meta } from '@storybook/react'; import TabNavigation from './TabNavigation'; import { createWrapper } from '@lib/testUtils'; import { @@ -10,7 +10,7 @@ export default { component: TabNavigation, title: 'Components/TabNavigation', decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -26,23 +26,20 @@ export default { query: {}, }, }, -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (args) => ( - -); - -export const Default = Template.bind({}); -Default.args = { - tabs: [ - { - title: 'Profile', - path: '', - Icon: UserIcon, - }, - { - title: 'Repos', - Icon: ClipboardDocumentListIcon, - }, - ], +export const Default = { + args: { + tabs: [ + { + title: 'Profile', + path: '', + Icon: UserIcon, + }, + { + title: 'Repos', + Icon: ClipboardDocumentListIcon, + }, + ], + }, }; diff --git a/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.data.tsx b/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.data.tsx index 8252e7e97..81213dcae 100644 --- a/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.data.tsx +++ b/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.data.tsx @@ -10,7 +10,12 @@ function UserDropdown({ image }: UserDropdownProps) { const { data } = useCurrentUserQuery(gqlClient); const username = data?.viewer.login; - return ; + return ( + + ); } export default UserDropdown; diff --git a/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.stories.tsx b/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.stories.tsx index 2bd89a55a..581aa285d 100644 --- a/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.stories.tsx +++ b/next-react-query-tailwind/src/components/UserDropdown/UserDropdown.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import UserDropdown from './UserDropdown.data'; import { mockCurrentUserQuery } from './UserDropdown.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -10,7 +10,7 @@ export default { msw: [mockCurrentUserQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -21,13 +21,14 @@ export default { ], } as Meta; -const Template: Story = (args) => ( -
- -
-); +export const Default = { + render: (args: typeof UserDropdown) => ( +
+ +
+ ), -export const Default = Template.bind({}); -Default.args = { - image: 'https://avatars2.githubusercontent.com/u/17098?v=4', + args: { + image: 'https://avatars2.githubusercontent.com/u/17098?v=4', + }, }; diff --git a/next-react-query-tailwind/src/components/UserGists/UserGists.stories.tsx b/next-react-query-tailwind/src/components/UserGists/UserGists.stories.tsx index 4aab0ecd5..1fd872518 100644 --- a/next-react-query-tailwind/src/components/UserGists/UserGists.stories.tsx +++ b/next-react-query-tailwind/src/components/UserGists/UserGists.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import UserGists from './UserGists.data'; import { mockUserGistsQuery } from './UserGists.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -10,7 +10,7 @@ export default { msw: [mockUserGistsQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -21,6 +21,4 @@ export default { ], } as Meta; -const Template: Story = () => ; - -export const Default = Template.bind({}); +export const Default = {}; diff --git a/next-react-query-tailwind/src/components/UserProfile/LoadingProfile.stories.tsx b/next-react-query-tailwind/src/components/UserProfile/LoadingProfile.stories.tsx index 8501b358a..8fc9b13ed 100644 --- a/next-react-query-tailwind/src/components/UserProfile/LoadingProfile.stories.tsx +++ b/next-react-query-tailwind/src/components/UserProfile/LoadingProfile.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import LoadingProfile from './LoadingProfile'; export default { @@ -6,6 +6,4 @@ export default { title: 'Loading/LoadingProfile', } as Meta; -const Template: Story = () => ; - -export const Primary = Template.bind({}); +export const Primary = {}; diff --git a/next-react-query-tailwind/src/components/UserProfile/UserProfile.stories.tsx b/next-react-query-tailwind/src/components/UserProfile/UserProfile.stories.tsx index 193781d00..36859870e 100644 --- a/next-react-query-tailwind/src/components/UserProfile/UserProfile.stories.tsx +++ b/next-react-query-tailwind/src/components/UserProfile/UserProfile.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentProps } from 'react'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import UserProfile from './UserProfile.data'; import { mockUserProfileQuery } from './UserProfile.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -11,7 +11,7 @@ export default { msw: [mockUserProfileQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -22,11 +22,8 @@ export default { ], } as Meta; -const Template: Story> = (args) => ( - -); - -export const Default = Template.bind({}); -Default.args = { - username: 'testuser', +export const Default = { + args: { + username: 'testuser', + }, }; diff --git a/next-react-query-tailwind/src/components/UserRepos/LoadingRepos.stories.tsx b/next-react-query-tailwind/src/components/UserRepos/LoadingRepos.stories.tsx index fcb8e1093..6809a4e9d 100644 --- a/next-react-query-tailwind/src/components/UserRepos/LoadingRepos.stories.tsx +++ b/next-react-query-tailwind/src/components/UserRepos/LoadingRepos.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import LoadingRepos from './LoadingRepos'; export default { @@ -6,6 +6,4 @@ export default { title: 'Loading/LoadingRepos', } as Meta; -const Template: Story = () => ; - -export const Primary = Template.bind({}); +export const Primary = {}; diff --git a/next-react-query-tailwind/src/components/UserRepos/UserRepos.stories.tsx b/next-react-query-tailwind/src/components/UserRepos/UserRepos.stories.tsx index 3e9d18a61..76fd28c1b 100644 --- a/next-react-query-tailwind/src/components/UserRepos/UserRepos.stories.tsx +++ b/next-react-query-tailwind/src/components/UserRepos/UserRepos.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentProps } from 'react'; -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import UserRepos from './UserRepos.data'; import { mockUserReposQuery } from './UserRepos.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -11,7 +11,7 @@ export default { msw: [mockUserReposQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -22,16 +22,14 @@ export default { ], } as Meta; -const Template: Story> = (args) => ( - -); - -export const Default = Template.bind({}); -Default.args = { - username: 'testuser', +export const Default = { + args: { + username: 'testuser', + }, }; -export const ErrorMessage = Template.bind({}); -ErrorMessage.args = { - username: 'somethingbroken', +export const ErrorMessage = { + args: { + username: 'somethingbroken', + }, }; diff --git a/next-react-query-tailwind/src/components/UserTopRepos/UserTopRepos.stories.tsx b/next-react-query-tailwind/src/components/UserTopRepos/UserTopRepos.stories.tsx index 67f580e69..edd2151f6 100644 --- a/next-react-query-tailwind/src/components/UserTopRepos/UserTopRepos.stories.tsx +++ b/next-react-query-tailwind/src/components/UserTopRepos/UserTopRepos.stories.tsx @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import UserTopRepos from './UserTopRepos.data'; import { mockUserTopReposQuery } from './UserTopRepos.mocks'; import { createWrapper } from '@lib/testUtils'; @@ -10,7 +10,7 @@ export default { msw: [mockUserTopReposQuery], }, decorators: [ - (Story: Story) => { + (Story: StoryFn) => { const Wrapper = createWrapper(); return ( @@ -21,6 +21,4 @@ export default { ], } as Meta; -const Template: Story = () => ; - -export const Default = Template.bind({}); +export const Default = {}; diff --git a/next-react-query-tailwind/src/pages/_app.tsx b/next-react-query-tailwind/src/pages/_app.tsx index 184614c78..1da21877b 100644 --- a/next-react-query-tailwind/src/pages/_app.tsx +++ b/next-react-query-tailwind/src/pages/_app.tsx @@ -30,7 +30,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) { refetchOnWindowFocus={false} refetchInterval={60 * 5} > - + {session?.user && }