feat: add storybook with governance custom components (#1253)

* feat: add storybook with pill component example

* feat: add css imports and some typography stories

* feat: add sidebar link button story

* refactor: remove unused component and reorder files

* fix: login component imports

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.json

@@ -7,7 +7,8 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

.storybook/main.ts

@@ -0,0 +1,27 @@
+import React from 'react'
+
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config) => {
+    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby|gatsby-script)\/)/]
+    if (parseInt(React.version) <= 18) {
+      config.externals = ['react-dom/client']
+    }
+    config.module.rules[0].exclude = [/core-js/]
+    config.resolve.mainFields = ['browser', 'module', 'main']
+    return config
+  },
+}

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css" />

.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react'
+import 'decentraland-ui/dist/themes/alternative/light-theme.css'
+import 'decentraland-ui/dist/themes/base-theme.css'
+
+import '../src/theme.css'
+import '../src/ui-overrides.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview