Skip to content

Commit

Permalink
chore: storybook7 config
Browse files Browse the repository at this point in the history
  • Loading branch information
hyochan committed Feb 4, 2024
1 parent 3a72b31 commit 2436337
Show file tree
Hide file tree
Showing 11 changed files with 2,958 additions and 3,879 deletions.
5 changes: 0 additions & 5 deletions .storybook/main.cjs

This file was deleted.

19 changes: 19 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/** @type{import("@storybook/react-webpack5").StorybookConfig} */
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-react-native-web",
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
docs: {
autodocs: true,
},
};
1 change: 0 additions & 1 deletion .storybook/package.json

This file was deleted.

13 changes: 13 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { Preview } from "@storybook/react";

const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};
103 changes: 82 additions & 21 deletions App.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,93 @@
import '@storybook/addon-ondevice-notes/register';
import '@storybook/addon-ondevice-controls/register';
import '@storybook/addon-ondevice-backgrounds/register';
import '@storybook/addon-ondevice-actions/register';
import '@expo/match-media';
import './storybook/addons';

import AsyncStorage from '@react-native-async-storage/async-storage';
import {configure, getStorybookUI} from '@storybook/react-native';
import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
import type {Preview} from '@storybook/react';
import {start} from '@storybook/react-native';

const storiesOfUIs = require.context('./stories/uis', true, /\.stories\.tsx$/);
const stories: Parameters<typeof start>[0]['storyEntries'] = [
{
titlePrefix: 'UI',
directory: './stories/uis',
files: '**/*.stories.?(ts|tsx|js|jsx)',
importPathMatcher:
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
// @ts-ignore
req: require.context(
'./stories/uis',
true,
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
),
},
{
titlePrefix: 'Modal',
directory: './stories/modals',
files: '**/*.stories.?(ts|tsx|js|jsx)',
importPathMatcher:
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
// @ts-ignore
req: require.context(
'./stories/modals',
true,
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
),
},
{
titlePrefix: 'Package',
directory: './stories/packages',
files: '**/*.stories.?(ts|tsx|js|jsx)',
importPathMatcher:
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
// @ts-ignore
req: require.context(
'./stories/packages',
true,
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
),
},
];

const storiesOfModals = require.context(
'./stories/modals',
true,
/\.stories\.tsx$/,
);
// @ts-ignore
global.STORIES = stories;

const storiesOfPackages = require.context(
'./stories/packages',
true,
/\.stories\.tsx$/,
);
const preview: Preview = {
decorators: [withBackgrounds],

const getStories = (): any => {
storiesOfUIs.keys().forEach((filename) => storiesOfUIs(filename));
storiesOfModals.keys().forEach((filename) => storiesOfModals(filename));
storiesOfPackages.keys().forEach((filename) => storiesOfPackages(filename));
parameters: {
backgrounds: {
default: 'plain',
values: [
{name: 'plain', value: 'white'},
{name: 'warm', value: 'hotpink'},
{name: 'cool', value: 'deepskyblue'},
],
},
actions: {argTypesRegex: '^on[A-Z].*'},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};

configure(getStories, module);
const view = start({
annotations: [
preview,
require('@storybook/react-native/dist/preview'),
require('@storybook/addon-actions/preview'),
],
storyEntries: global.STORIES,
});

export default getStorybookUI({
// @ts-ignore
asyncStorage: AsyncStorage,
export default view.getStorybookUI({
storage: {
getItem: AsyncStorage.getItem,
setItem: AsyncStorage.setItem,
},
});
9 changes: 0 additions & 9 deletions metro.config.js

This file was deleted.

16 changes: 13 additions & 3 deletions metro.config.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
const path = require('path');
const {getDefaultConfig} = require('expo/metro-config');
const {generate} = require('@storybook/react-native/scripts/generate');

const exclusionList = require('metro-config/src/defaults/exclusionList');

generate({
configPath: path.resolve(__dirname, './.ondevice'),
});

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.transformer.unstable_allowRequireContext = true;

const config = async (): Promise<any> => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig(__dirname);
} = await defaultConfig;

return {
blacklist: exclusionList([/docs\/.*/]),
Expand All @@ -16,6 +26,6 @@ const config = async (): Promise<any> => {
};
};

const defaultConfig = config();
const newConfig = config();

module.exports = defaultConfig;
module.exports = newConfig;
41 changes: 29 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@
"cp:main": "cp -r main/* ./lib",
"postbuild": "cp ./main/react-native.config.cjs ./lib/react-native.config.cjs && rm -rf ./lib/tsconfig* && cp README.md ./lib/README.md && cp -R main/__assets__ lib && cp ./main/uis/Icon/**.otf ./lib/uis/Icon/",
"build:storybook": "NODE_OPTIONS=--openssl-legacy-provider expo export:web && sh web-build-postinstall.sh",
"build:storybook:web": "storybook dev -p 6006",
"deploy:storybook": "gh-pages -d web-build",
"build:packages": "lerna exec -- yarn build",
"install:packages": "lerna exec -- yarn",
"upgrade:packages": "lerna exec -- ncu -u && yarn install:packages",
"prepare": "husky install"
"prepare": "husky install",
"storybook:web": "storybook dev -p 6006"
},
"dependencies": {
"@dooboo-ui/theme": "^0.12.16",
Expand Down Expand Up @@ -64,30 +66,33 @@
"@jest/types": "^29.6.3",
"@react-native-community/datetimepicker": "7.6.1",
"@react-native-community/slider": "4.4.2",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-knobs": "^6.4.0",
"@storybook/addon-ondevice-actions": "^6.5.3",
"@storybook/addon-ondevice-knobs": "^6.5.3",
"@storybook/addons": "^6.5.16",
"@storybook/addon-ondevice-actions": "^7.6.11",
"@storybook/addon-ondevice-backgrounds": "^7.6.11",
"@storybook/addon-ondevice-controls": "^7.6.11",
"@storybook/addon-ondevice-knobs": "^7.6.14",
"@storybook/addon-ondevice-notes": "^7.6.11",
"@storybook/addon-react-native-web": "^0.0.22",
"@storybook/addons": "^7.6.12",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.5.16",
"@storybook/react-native": "6.5.6",
"@storybook/react-native-server": "6.5.6",
"@testing-library/jest-dom": "^6.4.1",
"@storybook/react": "^7.6.10",
"@storybook/react-native": "^7.6.11",
"@storybook/react-webpack5": "^7.6.10",
"@testing-library/jest-native": "^5.4.3",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/react-native": "^12.4.3",
"@types/jest": "^29.5.11",
"@types/jest-plugin-context": "^2.9.7",
"@types/node": "^20.11.15",
"@types/react": "~18.2.51",
"@types/react": "~18.2.45",
"@types/react-dom": "~18.0.10",
"@types/react-responsive": "^8.0.8",
"@types/react-test-renderer": "^18.0.7",
"babel-loader": "^9.1.3",
"babel-plugin-react-native-web": "^0.19.10",
"babel-preset-expo": "^9.5.2",
"babel-preset-react-app": "^10.0.1",
"commitlint-plugin-function-rules": "^3.0.0",
"cross-env": "^7.0.3",
"eslint": "^8.56.0",
"eslint-plugin-storybook": "^0.6.15",
"gh-pages": "^6.1.1",
Expand All @@ -100,13 +105,25 @@
"lerna": "^8.0.2",
"prettier": "^3.2.4",
"react-test-renderer": "^18.2.0",
"storybook": "^7.6.10",
"ts-jest": "^29.1.2",
"ts-node": "^10.9.2",
"typescript": "5.3.3"
"typescript": "^5.3.0"
},
"workspaces": {
"packages": [
"packages/*"
]
},
"resolutions": {
"react-docgen-typescript": "2.2.2"
},
"overrides": {
"react-docgen-typescript": "2.2.2"
},
"pnpm": {
"overrides": {
"react-docgen-typescript": "2.2.2"
}
}
}
2 changes: 1 addition & 1 deletion stories/GlobalStyles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const StoryContainer = styled.View`
flex: 1;
align-self: stretch;
background-color: ${({theme}) => theme.bg.paper};
padding: 0 12px;
padding: 24px 24px 48px;
`;

export const ScrollContainer = styled.ScrollView`
Expand Down
3 changes: 0 additions & 3 deletions storybook/addons.js

This file was deleted.

Loading

0 comments on commit 2436337

Please sign in to comment.