chore: add storybook, basic story and documentation example

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: [
     'eslint-config-standard',
     'plugin:@typescript-eslint/recommended',
+    'plugin:storybook/recommended',
     'plugin:prettier/recommended'
   ],
   plugins: ['@typescript-eslint', 'prettier'],

.storybook/main.ts

@@ -0,0 +1,38 @@
+// Imports the Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions'
+  ],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
+  },
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5'
+  },
+  features: {
+    postcss: false
+  }
+  // refs: {
+  //   'design-system': {
+  //     title: 'Design System',
+  //     url: 'https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com'
+  //   }
+  // }
+}
+
+module.exports = config

.storybook/preview.tsx

@@ -0,0 +1,72 @@
+import { Story } from '@storybook/react'
+import { IonApp } from '@ionic/react'
+import { setupIonicReact } from '@ionic/react'
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css'
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css'
+import '@ionic/react/css/structure.css'
+import '@ionic/react/css/typography.css'
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css'
+import '@ionic/react/css/float-elements.css'
+import '@ionic/react/css/text-alignment.css'
+import '@ionic/react/css/text-transformation.css'
+import '@ionic/react/css/flex-utils.css'
+import '@ionic/react/css/display.css'
+
+setupIonicReact()
+
+export const decorators = [
+  (Story: Story) => (
+    <IonApp>
+      <Story />
+    </IonApp>
+  )
+]
+
+const customViewports = {
+  mobileMin: {
+    name: 'Small Mobile',
+    styles: {
+      width: '360px',
+      height: '640px'
+    },
+    type: 'mobile'
+  },
+  mobileMax: {
+    name: 'Large Mobile',
+    styles: {
+      width: '540px',
+      height: '960px'
+    },
+    type: 'mobile'
+  },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      width: '768px',
+      height: '1024px'
+    },
+    type: 'tablet'
+  }
+}
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  backgrounds: {
+    disable: true,
+    grid: {
+      disable: true
+    }
+  },
+  chromatic: { viewports: [360] },
+  controls: { disabled: true },
+  layout: 'fullscreen',
+  viewport: {
+    viewports: customViewports
+  }
+}