fix: storybook works (#361)

* fix: get storybook working

* fix: babel,eslint,typescript,storybook works

* fix: invalid import in explore.ipld.io

* fix: use in explore.ipld.io

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     ["@babel/preset-env", {
-      "modules": false
+      "modules": false,
+      "targets": "> 2%, not dead"
     }],
     ["@babel/preset-typescript", {
       "isTSX": true,
@@ -10,6 +11,16 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
-  ]
+    "@babel/plugin-proposal-class-properties",
+  ],
+  "ignore": [
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
 }

.eslintrc.js

@@ -1,15 +1,18 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  plugins: [
-    'import'
-  ],
+  ignorePatterns: ['node_modules'],
+  parserOptions: {
+    project: './tsconfig.eslint.json'
+  },
+  plugins: ['import'],
   extends: [
     'react-app',
     'plugin:jsx-a11y/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
     'plugin:import/typescript',
-    'ipfs'
+    'ipfs',
+    'plugin:storybook/recommended'
   ],
   rules: {
     'import/order': ['error', {
@@ -25,8 +28,12 @@ module.exports = {
       },
       warnOnUnassignedImports: true
     }],
-    'no-console': ['error', { allow: ['error', 'info', 'time', 'timeEnd', 'warn'] }],
+    'import/extensions': ['error', 'never'], // Errors using extensions because ts + vite + babel + storybook needs.
+    'no-console': ['error', {
+      allow: ['error', 'info', 'time', 'timeEnd', 'warn']
+    }],
     'no-warning-comments': ['off'],
-    strict: ['error', 'never']
+    strict: ['error', 'never'],
+    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }]
   }
 }

.gitignore

@@ -30,3 +30,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+storybook-static

.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+
+import viteConfig from '../vite.config';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, viteConfig);
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import { type Preview } from '@storybook/react';
+
+// import CSS files
+import 'ipfs-css'
+import 'react-virtualized/styles.css'
+import 'tachyons'
+import '../src/components/loader/Loader.css'
+import '../src/components/object-info/LinksTable.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;