change storybook to use our custom webpack config and add vtex-tachyons

Author: thayannevls

.storybook/config.js

@@ -0,0 +1 @@
+import 'vtex-tachyons'

.storybook/main.js

@@ -1,19 +1,11 @@
-module.exports = {
-  stories: ['../react/components/**/*.stories.(ts|tsx)'],
-  webpackFinal: async config => {
-    config.module.rules = [
-      ...config.module.rules,
-      {
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve('babel-loader')
-      }
-    ]
+const path = require('path');
+
+const custom = require('../config/webpack.config.js')
 
-    config.resolve = {
-      ...config.resolve,
-      extensions: ['.ts', '.tsx'],
-    }
-    
-    return config
-  },
+module.exports = {
+  stories: ['../react/components/**/*.stories.tsx'],
+  webpackFinal: (config) => {
+    config.resolve.extensions.push('.ts', '.tsx')
+    return { ...config, module: { ...config.module, rules: custom.module.rules } }
+  }
 }

config/webpack.config.js

@@ -131,7 +131,7 @@ module.exports = {
         // its runtime that would otherwise processed through "file" loader.
         // Also exclude `html` and `json` extensions so they get processed
         // by webpacks internal loaders.
-        exclude: [/\.(js|jsx|mjs|ts|tsx)$/, /\.css$/, /\.html$/, /\.json$/],
+        exclude: [/\.(js|jsx|mjs|ts|tsx|ejs)$/, /\.css$/, /\.html$/, /\.json$/],
         loader: require.resolve('file-loader'),
         options: {
           name: 'static/media/[name].[hash:8].[ext]',

react/components/Button/button.stories.tsx

@@ -7,4 +7,8 @@ export default {
   component: Button,
 }
 
-export const Text = () => <Button type="primary">Oie</Button>
+export const withText = () => (
+  <Button type="primary">
+    With a text
+  </Button>
+)

react/components/Tooltip/tooltip.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import Tooltip from '.'
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+}
+
+export const tooltipTop = () => (
+  <Tooltip label="tooltip text">
+    <span>oi</span>
+  </Tooltip>
+)