feat(framework): chakra ui

Author: Jonathangarrido

.cssrem

@@ -0,0 +1,4 @@
+{
+  "rootFontSize": 16,
+  "fixedDigits": 3
+}

.eslintrc.json

@@ -24,5 +24,14 @@
     "plugin:jest-dom/recommended",
     "plugin:testing-library/react",
     "plugin:prettier/recommended"
-  ]
+  ],
+  "overrides": [
+    {
+      "files": ["*.mdx"],
+      "extends": "plugin:mdx/recommended"
+    }
+  ],
+  "settings": {
+    "mdx/code-blocks": true
+  }
 }

.storybook/eClassTheme.js renamed to .storybook/eClassTheme.ts

@@ -1,5 +1,3 @@
-// .storybook/YourTheme.js
-
 import { create } from '@storybook/theming';
 
 export default create({

.storybook/main.js

@@ -0,0 +1,31 @@
+const path = require('path')
+
+const toPath = (_path) => path.join(process.cwd(), _path)
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials'
+  ],
+  core: {
+    builder: 'storybook-builder-vite',
+  },
+  typescript: {
+    check: true
+  },
+  viteFinal: async config => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          '@emotion/css': toPath('node_modules/@emotion/css'),
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
+        },
+      },
+    }
+  }
+}

.storybook/main.ts

@@ -1,6 +1,5 @@
-// .storybook/manager.js
-
 import { addons } from '@storybook/addons';
+
 import eClassTheme from './eClassTheme';
 
 addons.setConfig({

.storybook/manager.js renamed to .storybook/manager.ts

@@ -0,0 +1,23 @@
+import { ChakraProvider } from "@chakra-ui/react"
+
+import { theme } from '../src/theme'
+
+const withChakra = (StoryFn: Function) => {
+  return (
+    <ChakraProvider theme={theme}>
+      <StoryFn />
+    </ChakraProvider>
+  )
+}
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [ withChakra ]