Merge pull request #4 from smartive-education/storybook-setup

Storybook setup
ost-cas-fee-adv-22-23 · Nov 30, 2022 · 44af377 · 44af377
2 parents 158d180 + f518208
commit 44af377
Show file tree

Hide file tree

Showing 17 changed files with 525 additions and 12 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -4,6 +4,8 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    'storybook-addon-designs',
     {
       name: '@storybook/addon-postcss',
       options: {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,5 +1,6 @@
 import 'tailwindcss/tailwind.css';
 import '../src/global.css';
+import { customViewports } from './viewports';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -9,4 +10,28 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    default: 'background',
+    values: [
+      {
+        name: 'surface',
+        value: '#ffffff',
+      },
+      {
+        name: 'background',
+        value: '#f1f5f9', // bg-slate-100
+      },
+    ],
+    grid: {
+      disable: true,
+    },
+  },
+  viewport: {
+    viewports: customViewports,
+  },
+  options: {
+    storySort: {
+      order: ['Foundation', 'Components'],
+    },
+  },
 };
diff --git a/.storybook/viewports.js b/.storybook/viewports.js
@@ -0,0 +1,37 @@
+export const customViewports = {
+  sm: {
+    name: 'sm',
+    styles: {
+      width: '640px',
+      height: '960px',
+    },
+  },
+  md: {
+    name: 'md',
+    styles: {
+      width: '768px',
+      height: '960px',
+    },
+  },
+  lg: {
+    name: 'lg',
+    styles: {
+      width: '1024px',
+      height: '960px',
+    },
+  },
+  xl: {
+    name: 'xl',
+    styles: {
+      width: '1280px',
+      height: '960px',
+    },
+  },
+  xxl: {
+    name: '2xl',
+    styles: {
+      width: '1536px',
+      height: '960px',
+    },
+  },
+};