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 && }