Skip to content

Storybook configuration with 2 stories added #48

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.

Sign up for GitHub

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

Merged
lakhansamani merged 1 commit into from
Aug 24, 2024
Merged

Storybook configuration with 2 stories added #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ node_modules
.cache
dist
.parcel-cache
.yalc
.yalc
*storybook.log
45 changes: 45 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import type { StorybookConfig } from '@storybook/react-webpack5';
import type { WebpackConfiguration } from '@storybook/core-webpack';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-webpack5-compiler-swc',
'@storybook/addon-onboarding',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-styling-webpack',
'@storybook/preset-scss'
],
framework: {
name: '@storybook/react-webpack5',
options: {
strictMode: true,
},
},
webpackFinal: async (currentConfig: WebpackConfiguration, { configType }) => {
// get index of css rule
const ruleCssIndex = currentConfig.module.rules.findIndex(
(rule) => rule.test?.toString() === "/\\.css$/"
);

// map over the 'use' array of the css rule and set the 'module' option to true
currentConfig.module.rules[ruleCssIndex].use.map((item) => {
if (item.loader && item.loader.includes("/css-loader/")) {
item.options.modules = {
mode: "local",
localIdentName:
configType === "PRODUCTION"
? "[local]__[hash:base64:5]"
: "[name]__[local]__[hash:base64:5]",
};
}

return item;
});

return currentConfig;
},
};
export default config;
15 changes: 15 additions & 0 deletions .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Preview } from '@storybook/react';

const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
tags: ['autodocs']
};

export default preview;
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,16 @@ To run tests, use `npm test` or `yarn test`.

Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.

### Storybook commands

```bash
npm run storybook
```

```bash
npm run build-storybook
```

### Jest

Jest tests are set up to run with `npm test` or `yarn test`.
Expand Down
Loading