feat(storybook): Storybook 7, migrate docs from READMEs to stories, add guides #109
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,5 +2,6 @@ | |
| "semi": false, | ||
| "singleQuote": true, | ||
| "trailingComma": "none", | ||
| "printWidth": 120, | ||
| "proseWrap": "always" | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // DO NOT REMOVE. This file is used in the build and deploy Storybook on Vercel. | ||
| // @TODO: look for more elegant solution | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { create } from '@storybook/theming/create' | ||
| import packageInfo from '../../../packages/ui-kit/package.json' | ||
|
|
||
| export const defaultTheme = create({ | ||
| base: 'light', | ||
| brandTitle: `UI-kit v.${packageInfo.version}`, | ||
| brandImage: '/propel-logo.svg' | ||
| // fontBase: '"Inter", sans-serif' | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import type { StorybookConfig } from '@storybook/react-webpack5' | ||
| import { join, dirname } from 'path' | ||
| import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin' | ||
|
|
||
| /** | ||
| * This function is used to resolve the absolute path of a package. | ||
| * It is needed in projects that use Yarn PnP or are set up within a monorepo. | ||
| */ | ||
| function getAbsolutePath(value: string): any { | ||
| return dirname(require.resolve(join(value, 'package.json'))) | ||
| } | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: ['../documentation/**/*.mdx', '../../../packages/ui-kit/src/**/*.stories.@(js|jsx|ts|tsx)'], | ||
| addons: [ | ||
| getAbsolutePath('@storybook/addon-links'), | ||
| getAbsolutePath('@storybook/addon-essentials'), | ||
| getAbsolutePath('@storybook/addon-themes'), | ||
| getAbsolutePath('@storybook/addon-interactions'), | ||
| getAbsolutePath('@storybook/addon-a11y') | ||
| ], | ||
| framework: { | ||
| name: getAbsolutePath('@storybook/react-webpack5'), | ||
| options: {} | ||
| }, | ||
| docs: { | ||
| autodocs: 'tag', | ||
| defaultName: 'Overview' | ||
| }, | ||
| features: { | ||
| storyStoreV7: true, | ||
| buildStoriesJson: true | ||
| }, | ||
| staticDirs: ['../public/assets'], | ||
| webpackFinal: async (config) => { | ||
| config.module?.rules?.push({ | ||
| test: /\.(ts|tsx)$/, | ||
| loader: require.resolve('babel-loader'), | ||
| exclude: /node_modules/, | ||
| options: { | ||
| presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'] | ||
| } | ||
| }) | ||
|
|
||
| if (config.resolve) { | ||
| config.resolve.extensions?.push('.ts', '.tsx', '.mdx') | ||
| config.resolve.plugins = [ | ||
| ...(config.resolve.plugins || []), | ||
| new TsconfigPathsPlugin({ | ||
| extensions: config.resolve.extensions, | ||
| configFile: './tsconfig.json' | ||
| }) | ||
| ] | ||
| } | ||
|
|
||
| return config | ||
| } | ||
| } | ||
|
|
||
| export default config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <link rel="shortcut icon" href="/favicon.ico" /> | ||
| <style> | ||
| .sidebar-header div { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| .sidebar-header a { | ||
| margin: 0; | ||
| padding: 0; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 15px; | ||
| } | ||
| .sidebar-header a > img { | ||
| height: 50px; | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| .sidebar-header button { | ||
| display: none; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { addons } from '@storybook/manager-api' | ||
| import { defaultTheme } from './defaultTheme' | ||
|
|
||
| addons.setConfig({ | ||
| theme: defaultTheme, | ||
| sidebar: { | ||
| filters: { | ||
| patterns: (item) => { | ||
| return !item.tags?.includes('pattern') | ||
|
There was a problem hiding this comment. The |
||
| } | ||
| } | ||
| } | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <script> | ||
| window.global = window | ||
| </script> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Establishing the serverless function on Vercel for Storybook setup is a bit tricky.
First of all, there is an official instruction: Deploying Storybook with Vercel.
Secondly, Serverless Functions Quickstart.
The thing is that seems like Vercel runs some simple HTTP server for the Storybook setup, which can’t handle unbundled files (e.g. *.ts).
So, I’ve seen two main roads here:
I didn’t find a quick solution for 1 and honestly, I don’t like the idea of proxying calls to static files through the next.js env.
I decided to follow 2. The initial assumption was to pre-build a script for the serverless function with tsc to the vercel’s
api/folder (Vercel’s reserved folder). The build workflow works without errors locally and on Vercel, but for some reasons, Vercel refuses to include tsc output in the final Deployment.What helped was the creation of an empty file (a placeholder) and adding it to the repo, e.g.
api/token/route.js.With this hack Vercel started to include the function to the Deployment.