Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: cleanup storybook #1568

Merged
merged 1 commit into from
Jun 26, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
chore: cleanup storybook
lifeiscontent committed Jun 26, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 9fa23d1ad87bafd1b6e71c972c87ca83b3f50f66
2 changes: 1 addition & 1 deletion .github/workflows/web.yml
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ jobs:
with:
cache-dependency-path: web/package-lock.json
cache: "npm"
node-version: "16.x"
node-version: "18.x"
- run: npm install
working-directory: ./web
- run: npm run lint
20 changes: 11 additions & 9 deletions web/.storybook/main.js → web/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const startCase = require('lodash/startCase');
function buildSection(context) {
import type { StorybookConfig } from '@storybook/nextjs';
import { startCase } from 'lodash';

function buildSection(context: string) {
return {
// 👇 The directory field sets the directory your stories
directory: `../src/${context}`,
@@ -9,23 +11,23 @@ function buildSection(context) {
files: `**/*.stories.*`,
};
}
module.exports = {

const config: StorybookConfig = {
stories: [buildSection('components'), buildSection('containers')],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-addon-apollo-client',
'@storybook/addon-interactions',
'storybook-addon-apollo-client',
],
staticDirs: ['../public'],
features: {
storyStoreV7: true,
interactionsDebugger: true,
},
framework: {
name: '@storybook/nextjs',
options: {},
},
docs: {
autodocs: true,
autodocs: 'tag',
},
};

export default config;
3 changes: 1 addition & 2 deletions web/.storybook/manager.js → web/.storybook/manager.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { addons } from '@storybook/addons';

import startCase from 'lodash/startCase';
import { startCase } from 'lodash';

addons.setConfig({
sidebar: {
9 changes: 0 additions & 9 deletions web/.storybook/preview.js

This file was deleted.

21 changes: 21 additions & 0 deletions web/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { MockedProvider } from '@apollo/client/testing';
import type { Preview } from '@storybook/react';
import { createCache } from '../src/lib/apolloClient';

const preview: Preview = {
parameters: {
apolloClient: {
MockedProvider,
cache: createCache(),
},
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};

export default preview;
2 changes: 1 addition & 1 deletion web/.tool-versions
Original file line number Diff line number Diff line change
@@ -1 +1 @@
nodejs 16.14.0
nodejs 18.16.0
68 changes: 11 additions & 57 deletions web/jest.config.js
Original file line number Diff line number Diff line change
@@ -1,61 +1,15 @@
const esModules = [
'bail',
'character-entities',
'comma-separated-tokens',
'decode-named-character-reference',
'hast-util-whitespace',
'is-plain-obj',
'mdast-util-definitions',
'mdast-util-from-markdown',
'mdast-util-to-hast',
'mdast-util-to-string',
'micromark',
'property-information',
'react-markdown',
'remark-parse',
'remark-rehype',
'space-separated-tokens',
'trough',
'unified',
'unist-builder',
'unist-util-generated',
'unist-util-is',
'unist-util-position',
'unist-util-stringify-position',
'unist-util-visit',
'trim-lines',
'vfile',
].join('|');
const nextJest = require('next/jest');

module.exports = {
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
],
moduleNameMapper: {
// Handle CSS imports (with CSS modules)
// https://jestjs.io/docs/webpack#mocking-css-modules
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
});

// Handle CSS imports (without CSS modules)
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

// Handle image imports
// https://jestjs.io/docs/webpack#handling-static-assets
'^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
},
// Add any custom config to be passed to Jest
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
// Use babel-jest to transpile tests with the next/babel preset
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
[`(${esModules}).+\\.js$`]: ['babel-jest', { presets: ['next/babel'] }],
},
transformIgnorePatterns: [
`[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)$`,
'^.+\\.module\\.(css|sass|scss)$',
],
testEnvironment: 'jest-environment-jsdom',
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
13 changes: 0 additions & 13 deletions web/jest.setup.js
Original file line number Diff line number Diff line change
@@ -4,16 +4,3 @@
// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
import { setProjectAnnotations } from '@storybook/testing-react';
import * as globalStorybookConfig from './.storybook/preview';
import { WithApolloClient } from 'storybook-addon-apollo-client/dist/decorators';
import { RouterDecorator } from '@storybook/nextjs';

setProjectAnnotations({
...globalStorybookConfig,
decorators: [
...globalStorybookConfig.decorators,
RouterDecorator,
WithApolloClient,
],
});
46,320 changes: 19,886 additions & 26,434 deletions web/package-lock.json

Large diffs are not rendered by default.

87 changes: 42 additions & 45 deletions web/package.json
Original file line number Diff line number Diff line change
@@ -1,70 +1,67 @@
{
"dependencies": {
"@apollo/client": "3.7.10",
"@apollo/client": "3.7.16",
"clsx": "1.2.1",
"cookie": "0.5.0",
"deepmerge": "4.3.1",
"formik": "2.2.9",
"graphql": "16.6.0",
"formik": "2.4.2",
"graphql": "16.7.1",
"graphql-tag": "2.12.6",
"lodash": "4.17.21",
"next": "13.2.4",
"next": "13.4.7",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "8.0.6",
"yup": "1.0.2"
"react-markdown": "8.0.7",
"yup": "1.2.0"
},
"devDependencies": {
"@babel/core": "7.20.12",
"@next/eslint-plugin-next": "13.1.1",
"@storybook/addon-actions": "next",
"@storybook/addon-essentials": "next",
"@storybook/addon-interactions": "next",
"@storybook/addon-links": "next",
"@storybook/addons": "next",
"@storybook/client-api": "next",
"@storybook/jest": "next",
"@storybook/nextjs": "next",
"@storybook/react": "next",
"@storybook/test-runner": "next",
"@storybook/testing-library": "next",
"@storybook/testing-react": "next",
"@babel/core": "7.22.5",
"@next/eslint-plugin-next": "13.4.7",
"@storybook/addon-essentials": "^7.0.23",
"@storybook/addon-interactions": "^7.0.23",
"@storybook/addon-links": "^7.0.23",
"@storybook/blocks": "^7.0.23",
"@storybook/jest": "^0.1.0",
"@storybook/nextjs": "^7.0.23",
"@storybook/react": "^7.0.23",
"@storybook/testing-library": "0.2.0",
"@storybook/testing-react": "^2.0.1",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.4.0",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/jest": "29.2.5",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"@types/jest": "29.5.2",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"babel-eslint": "10.1.0",
"babel-jest": "29.3.1",
"babel-jest": "29.5.0",
"babel-loader": "9.1.2",
"babel-plugin-graphql-tag": "3.3.0",
"chromatic": "6.14.0",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"eslint-config-prettier": "8.6.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jest": "27.2.1",
"chromatic": "6.19.9",
"eslint": "8.43.0",
"eslint-config-next": "13.4.7",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jest": "27.2.2",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-storybook": "0.6.10",
"eslint-plugin-testing-library": "5.9.1",
"eslint-plugin-storybook": "0.6.12",
"eslint-plugin-testing-library": "5.11.0",
"identity-obj-proxy": "3.0.0",
"jest": "29.3.1",
"jest-environment-jsdom": "29.3.1",
"jest-environment-node": "29.3.1",
"jest-runner": "29.3.1",
"lint-staged": "13.1.0",
"prettier": "2.8.2",
"jest": "29.5.0",
"jest-environment-jsdom": "29.5.0",
"jest-environment-node": "29.5.0",
"jest-runner": "29.5.0",
"lint-staged": "13.2.2",
"prettier": "2.8.8",
"react-test-renderer": "18.2.0",
"storybook": "next",
"storybook-addon-apollo-client": "4.1.4",
"typescript": "4.9.4",
"webpack": "^5.76.3"
"storybook": "^7.0.23",
"storybook-addon-apollo-client": "5.0.0",
"typescript": "5.1.3",
"webpack": "5.88.0"
},
"engines": {
"node": "16.x",
"npm": "8.x"
"node": "18.x",
"npm": "9.x"
},
"license": "MIT",
"main": "index.js",
2 changes: 2 additions & 0 deletions web/src/containers/article-page/index.stories.js
Original file line number Diff line number Diff line change
@@ -135,6 +135,7 @@ const meta = {
description: 'Eos facere consequuntur id.',
favoritesCount: 0,
slug: 'sunt-vitae-voluptatum-quas',
title: 'Sunt vitae voluptatum quas.',
viewerDidFavorite: false,
canDelete: {
value: false,
@@ -316,6 +317,7 @@ export const IsAuthor = {
description: 'Eos facere consequuntur id.',
favoritesCount: 0,
slug: 'sunt-vitae-voluptatum-quas',
title: 'Sunt vitae voluptatum quas.',
viewerDidFavorite: false,
canDelete: {
value: true,
158 changes: 79 additions & 79 deletions web/src/lib/apolloClient.js
Original file line number Diff line number Diff line change
@@ -12,21 +12,6 @@ export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';

let apolloClient;

const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httpLink = new HttpLink({
uri: process.env.NEXT_PUBLIC_GRAPHQL_URL, // Server URL (must be absolute)
credentials: 'omit', // Additional fetch() options like `credentials` or `headers`
});

function createApolloClient(ctx) {
const ssrMode = typeof window === 'undefined';

@@ -45,83 +30,98 @@ function createApolloClient(ctx) {
headers: { authorization },
};
}),
errorLink,
httpLink,
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
}),
new HttpLink({
uri: process.env.NEXT_PUBLIC_GRAPHQL_URL, // Server URL (must be absolute)
credentials: 'omit', // Additional fetch() options like `credentials` or `headers`
}),
]),
cache: new InMemoryCache({
resultCaching: true,
dataIdFromObject(object) {
switch (object.__typename) {
case 'Article':
return `${object.__typename}:${object.slug}`;
case 'User':
return `${object.__typename}:${object.username}`;
default:
return defaultDataIdFromObject(object);
}
},
typePolicies: {
Article: {
keyFields: ['slug'],
fields: {
comments: {
merge(_existing, incoming = []) {
return incoming;
},
cache: createCache(),
});
}

export function createCache() {
return new InMemoryCache({
resultCaching: true,
dataIdFromObject(object) {
switch (object.__typename) {
case 'Article':
return `${object.__typename}:${object.slug}`;
case 'User':
return `${object.__typename}:${object.username}`;
default:
return defaultDataIdFromObject(object);
}
},
typePolicies: {
Article: {
keyFields: ['slug'],
fields: {
comments: {
merge(_existing, incoming = []) {
return incoming;
},
},
},
User: {
keyFields: ['username'],
fields: {
profile: {
merge: true,
},
},
User: {
keyFields: ['username'],
fields: {
profile: {
merge: true,
},
},
Query: {
fields: {
articlesConnection: relayStylePagination([
'after',
'before',
'first',
'last',
'tagName',
]),
articleBySlug: {
read(_, { args, toReference }) {
return toReference({ __typename: 'Article', slug: args.slug });
},
},
Query: {
fields: {
articlesConnection: relayStylePagination([
'after',
'before',
'first',
'last',
'tagName',
]),
articleBySlug: {
read(_, { args, toReference }) {
return toReference({ __typename: 'Article', slug: args.slug });
},
comment: {
read(_, { args, toReference }) {
return toReference({ __typename: 'Comment', id: args.id });
},
},
comment: {
read(_, { args, toReference }) {
return toReference({ __typename: 'Comment', id: args.id });
},
feedConnection: relayStylePagination([
'after',
'before',
'first',
'last',
'tagName',
]),
userByUsername: {
read(_, { args, toReference }) {
return toReference({
__typename: 'User',
username: args.username,
});
},
},
feedConnection: relayStylePagination([
'after',
'before',
'first',
'last',
'tagName',
]),
userByUsername: {
read(_, { args, toReference }) {
return toReference({
__typename: 'User',
username: args.username,
});
},
tag: {
read(_, { args, toReference }) {
return toReference({ __typename: 'Tag', id: args.id });
},
},
tag: {
read(_, { args, toReference }) {
return toReference({ __typename: 'Tag', id: args.id });
},
},
},
},
}),
},
});
}