permissions: UI + Storybook

ui/.eslintrc.js

@@ -1,42 +1,34 @@
 module.exports = {
-  extends: ['@tloncorp/eslint-config', 'plugin:storybook/recommended'],
-  overrides: [
-    {
-      files: ['**/*.ts', '**/*.tsx'],
-      parserOptions: {
-        project: ['tsconfig.json'],
-        tsconfigRootDir: __dirname
-      }
+  extends: ['@tloncorp/eslint-config', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
+  overrides: [{
+    files: ['**/*.ts', '**/*.tsx'],
+    parserOptions: {
+      project: ['tsconfig.json'],
+      tsconfigRootDir: __dirname
     }
-  ],
+  }],
   rules: {
     semi: [2, 'always'],
     'react/destructuring-assignment': 'off',
     'react/require-default-props': 'off',
-    'react/jsx-filename-extension': [
-      1,
-      {
-        extensions: ['.jsx', '.tsx']
-      }
-    ],
-    'tailwindcss/no-custom-classname': [
-      0,
-      {
-        config: 'tailwind.config.js'
-      }
-    ],
-    'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['draft'] }],
+    'react/jsx-filename-extension': [1, {
+      extensions: ['.jsx', '.tsx']
+    }],
+    'tailwindcss/no-custom-classname': [0, {
+      config: 'tailwind.config.js'
+    }],
+    'no-param-reassign': ['error', {
+      props: true,
+      ignorePropertyModificationsFor: ['draft']
+    }],
     'no-use-before-define': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
-      { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }
-    ],
-    '@typescript-eslint/no-use-before-define': [
-      'error',
-      {
-        typedefs: false
-      }
-    ]
+    '@typescript-eslint/no-unused-vars': ['warn', {
+      argsIgnorePattern: '^_',
+      destructuredArrayIgnorePattern: '^_'
+    }],
+    '@typescript-eslint/no-use-before-define': ['error', {
+      typedefs: false
+    }]
   },
   settings: {
     tailwindcss: {
@@ -46,14 +38,9 @@ module.exports = {
       alias: {
         // mapping big-integer and fuzzy to a non-existent to squash error described here:
         // https://github.com/johvin/eslint-import-resolver-alias/issues/18
-        map: [
-          ['@', './src'],
-          ['big-integer', 'hack'],
-          ['fuzzy', 'hack'],
-          ['vitest', 'hack']
-        ],
+        map: [['@', './src'], ['big-integer', 'hack'], ['fuzzy', 'hack'], ['vitest', 'hack']],
         extensions: ['.ts', '.tsx']
       }
     }
   }
-};
+};

ui/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

ui/.storybook/preview.ts

@@ -0,0 +1,27 @@
+import { withThemeByClassName } from "@storybook/addon-styling";
+import "../src/styles/index.css";
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: "",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+  }),
+];
+
+export default preview;