Skip to content

Commit ed9b575

Browse files
olaywayolayway
authored
Core package storybook setup (#1003)
* [/][m]: add storybook to core package * [/][s]: replace nx with nrwl packages for storybook * [core][xs]: mv tsconfig.storybook.json to .storybook/tsconfig.json * [/][s]: configure storybook with tailwind * [core/tailwind.config.js][xs]: add basic Flowershow tailwind config * [core][xs]: add example story * [core][s]: darkmode storybook addon
1 parent 8327f4e commit ed9b575

14 files changed

Lines changed: 43308 additions & 30239 deletions

‎nx.json‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@
55
"default": {
66
"runner": "nx/tasks-runners/default",
77
"options": {
8-
"cacheableOperations": ["build", "lint", "test", "e2e"]
8+
"cacheableOperations": [
9+
"build",
10+
"lint",
11+
"test",
12+
"e2e",
13+
"build-storybook"
14+
]
915
}
1016
}
1117
},
@@ -30,6 +36,14 @@
3036
"{workspaceRoot}/.eslintrc.json",
3137
"{workspaceRoot}/.eslintignore"
3238
]
39+
},
40+
"build-storybook": {
41+
"inputs": [
42+
"default",
43+
"^production",
44+
"{projectRoot}/.storybook/**/*",
45+
"{projectRoot}/tsconfig.storybook.json"
46+
]
3347
}
3448
},
3549
"namedInputs": {
@@ -39,7 +53,10 @@
3953
"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
4054
"!{projectRoot}/tsconfig.spec.json",
4155
"!{projectRoot}/jest.config.[jt]s",
42-
"!{projectRoot}/.eslintrc.json"
56+
"!{projectRoot}/.eslintrc.json",
57+
"!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
58+
"!{projectRoot}/.storybook/**/*",
59+
"!{projectRoot}/tsconfig.storybook.json"
4360
],
4461
"sharedGlobals": ["{workspaceRoot}/babel.config.json"]
4562
},

‎package-lock.json‎

Lines changed: 43058 additions & 30233 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,20 @@
2020
"@nrwl/js": "15.9.2",
2121
"@nrwl/linter": "15.9.2",
2222
"@nrwl/next": "15.9.2",
23-
"@nrwl/react": "15.9.2",
23+
"@nrwl/react": "^15.9.2",
2424
"@nrwl/rollup": "15.9.2",
25+
"@nrwl/storybook": "15.9.2",
26+
"@nrwl/webpack": "15.9.2",
2527
"@nrwl/workspace": "15.9.2",
28+
"@nx/js": "16.6.0",
2629
"@rollup/plugin-url": "^7.0.0",
30+
"@storybook/addon-essentials": "7.0.18",
31+
"@storybook/addon-interactions": "7.0.18",
32+
"@storybook/core-server": "7.0.18",
33+
"@storybook/jest": "~0.1.0",
34+
"@storybook/react-webpack5": "^7.0.18",
35+
"@storybook/test-runner": "^0.11.0",
36+
"@storybook/testing-library": "~0.2.0",
2737
"@svgr/rollup": "^6.1.2",
2838
"@swc/core": "^1.2.173",
2939
"@swc/helpers": "~0.5.0",
@@ -39,6 +49,7 @@
3949
"@typescript-eslint/parser": "^5.36.1",
4050
"babel-jest": "^29.4.1",
4151
"chai": "^4.3.7",
52+
"core-js": "^3.6.5",
4253
"cypress": "^12.2.0",
4354
"eslint": "~8.15.0",
4455
"eslint-config-next": "13.1.1",
@@ -58,11 +69,16 @@
5869
"react-test-renderer": "18.2.0",
5970
"rehype-stringify": "^9.0.3",
6071
"remark": "^14.0.3",
72+
"storybook-tailwind-dark-mode": "^1.0.22",
6173
"swc-loader": "0.1.15",
6274
"ts-jest": "^29.0.5",
6375
"ts-node": "10.9.1",
6476
"typescript": "~4.9.5",
6577
"unist-util-select": "^4.0.3",
6678
"unist-util-visit": "^4.1.2"
79+
},
80+
"dependencies": {
81+
"react": "^18.2.0",
82+
"react-dom": "^18.2.0"
6783
}
6884
}

‎packages/core/.storybook/main.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { StorybookConfig } from '@storybook/react-webpack5';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
5+
addons: [
6+
'@storybook/addon-essentials',
7+
'@storybook/addon-interactions',
8+
'@nrwl/react/plugins/storybook',
9+
'storybook-tailwind-dark-mode'
10+
],
11+
framework: {
12+
name: '@storybook/react-webpack5',
13+
options: {},
14+
},
15+
};
16+
17+
export default config;
18+
19+
// To customize your webpack configuration you can use the webpackFinal field.
20+
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
21+
// and https://nx.dev/packages/storybook/documents/custom-builder-configs

‎packages/core/.storybook/preview.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import './tailwind-imports.css';
2+
3+
const preview = {
4+
globalTypes: {
5+
darkMode: {
6+
defaultValue: false, // Enable dark mode by default on all stories
7+
},
8+
className: {
9+
defaultValue: 'dark', // Set your custom dark mode class name
10+
},
11+
},
12+
};
13+
14+
export default preview;

‎packages/core/.storybook/tailwind-imports.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎packages/core/.storybook/tsconfig.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"emitDecoratorMetadata": true,
5+
"outDir": ""
6+
},
7+
"files": [
8+
"../../node_modules/@nx/react/typings/styled-jsx.d.ts",
9+
"../../node_modules/@nx/react/typings/cssmodule.d.ts",
10+
"../../node_modules/@nx/react/typings/image.d.ts"
11+
],
12+
"exclude": [
13+
"src/**/*.spec.ts",
14+
"src/**/*.test.ts",
15+
"src/**/*.spec.js",
16+
"src/**/*.test.js",
17+
"src/**/*.spec.tsx",
18+
"src/**/*.test.tsx",
19+
"src/**/*.spec.jsx",
20+
"src/**/*.test.js"
21+
],
22+
"include": [
23+
"src/**/*.stories.ts",
24+
"src/**/*.stories.js",
25+
"src/**/*.stories.jsx",
26+
"src/**/*.stories.tsx",
27+
"src/**/*.stories.mdx",
28+
".storybook/*.js",
29+
".storybook/*.ts"
30+
]
31+
}

‎packages/core/postcss.config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// libs/shared/ui/postcss.config.js
2+
const { join } = require('path');
3+
4+
module.exports = {
5+
plugins: {
6+
tailwindcss: {
7+
config: join(__dirname, 'tailwind.config.js'),
8+
},
9+
autoprefixer: {},
10+
},
11+
};

‎packages/core/project.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,37 @@
3434
"jestConfig": "packages/core/jest.config.ts",
3535
"passWithNoTests": true
3636
}
37+
},
38+
"storybook": {
39+
"executor": "@nrwl/storybook:storybook",
40+
"options": {
41+
"port": 4400,
42+
"configDir": "packages/core/.storybook"
43+
},
44+
"configurations": {
45+
"ci": {
46+
"quiet": true
47+
}
48+
}
49+
},
50+
"build-storybook": {
51+
"executor": "@nrwl/storybook:build",
52+
"outputs": ["{options.outputDir}"],
53+
"options": {
54+
"outputDir": "dist/storybook/core",
55+
"configDir": "packages/core/.storybook"
56+
},
57+
"configurations": {
58+
"ci": {
59+
"quiet": true
60+
}
61+
}
62+
},
63+
"test-storybook": {
64+
"executor": "nx:run-commands",
65+
"options": {
66+
"command": "test-storybook -c packages/core/.storybook --url=http://localhost:4400"
67+
}
3768
}
3869
}
3970
}

‎packages/core/src/ui/Card/Card.stories.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
import { Card } from './Card';
5+
6+
const meta: Meta<typeof Card> = {
7+
component: Card,
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof Card>;
12+
13+
/*
14+
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
15+
* See https://storybook.js.org/docs/react/api/csf
16+
* to learn how to use render functions.
17+
*/
18+
19+
const blog = {
20+
urlPath: "#",
21+
title: "Card title goes here",
22+
date: "2021-01-01",
23+
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis accumsan maximus, quam libero porttitor nisl, vita",
24+
}
25+
26+
export const Primary: Story = {
27+
render: () => (
28+
<Card className="md:col-span-3">
29+
<Card.Title href={`${blog.urlPath}`}>
30+
{blog.title}
31+
</Card.Title>
32+
<Card.Eyebrow
33+
as="time"
34+
dateTime={blog.date}
35+
className="md:hidden"
36+
decorate
37+
>
38+
{blog.date}
39+
</Card.Eyebrow>
40+
{blog.description && (
41+
<Card.Description>
42+
{blog.description}
43+
</Card.Description>
44+
)}
45+
<Card.Cta>Read article</Card.Cta>
46+
</Card>
47+
),
48+
};

0 commit comments

Comments
 (0)