Melhorias iniciais no Storybook

.storybook/global.js

@@ -0,0 +1,14 @@
+import { createGlobalStyle, css } from 'styled-components';
+// import { color, typography } from './styles';
+import { typography } from '@storybook/theming';
+
+export const bodyStyles = css`
+  /* Same as before */
+`;
+
+export const GlobalStyle = createGlobalStyle`
+ body {
+   background: #F00;
+   ${bodyStyles}
+ }`;
+

.storybook/iux.js

@@ -5,6 +5,54 @@ export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].
   (size) => `${typography.size[size]}px`
 );
 
+/*
+export const typography = {
+  fonts: {
+    base: [
+      '"Nunito Sans"',
+      '-apple-system',
+      '".SFNSText-Regular"',
+      '"San Francisco"',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      'Helvetica',
+      'Arial',
+      'sans-serif',
+    ].join(', '),
+    mono: [
+      'ui-monospace',
+      'Menlo',
+      'Monaco',
+      '"Roboto Mono"',
+      '"Oxygen Mono"',
+      '"Ubuntu Monospace"',
+      '"Source Code Pro"',
+      '"Droid Sans Mono"',
+      '"Courier New"',
+      'monospace',
+    ].join(', '),
+  },
+  weight: {
+    regular: 400,
+    bold: 700,
+    black: 900,
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90,
+  },
+};
+*/
+
 export default create({
   base: 'light',
 
@@ -19,7 +67,7 @@ export default create({
 
   // Typography
   fontBase: '"Museo Sans", museo-sans',
-  fontCode: 'monospace',
+  // fontCode: 'monospace',
 
   // Text colors
   textColor: '#657373',

.storybook/main.js

@@ -12,7 +12,16 @@ module.exports = {
     "@storybook/preset-scss",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@whitespace/storybook-addon-html"
+    "@whitespace/storybook-addon-html",
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
+      },
+    }
   ],
   "features": {
     postcss: false,
@@ -27,7 +36,19 @@ module.exports = {
     // 'PRODUCTION' is used when building the static version of storybook.
 
     // Make whatever fine-grained changes you need
-    config.module.rules.push(
+    config.module.rules.push({
+          test: path.join(__dirname, '.'),
+          exclude: /(node_modules)/,
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-react',
+              {
+                'plugins': ['@babel/plugin-syntax-jsx']
+              }
+            ]
+          }
+      }
     );
 
     // Return the altered config

.storybook/preview.js

@@ -1,4 +1,6 @@
 import styles from '../src/css/index.scss';
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+import iux from './iux';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -9,17 +11,7 @@ export const parameters = {
     },
   },
   backgrounds: {
-    default: 'Claro',
-    values: [
-      {
-        name: 'Claro',
-        value: '#F3F5F7',
-      },
-      {
-        name: 'Escuro',
-        value: '#2C3636',
-      },
-    ],
+    disable: true,
     grid: {
       cellSize: 20,
       opacity: 0.2,
@@ -33,4 +25,7 @@ export const parameters = {
       order: ['Visão Geral', 'Base'],
     },
   },
+  docs: {
+    theme: iux,
+  },
 }

package.json

@@ -37,7 +37,9 @@
   "dependencies": {
     "@storybook/builder-webpack5": "^6.4.22",
     "@storybook/manager-webpack5": "^6.4.22",
+    "modern-css-reset": "^1.4.0",
     "sass": "^1.50.0",
+    "styled-components": "^5.3.5",
     "webpack": "^5.72.0"
   }
 }

src/css/core/typography.scss

@@ -11,6 +11,10 @@ body {
 }
 
 h1,h2,h3,h4,h5,h6 {
+  margin-block-start: 0px;
+  margin-block-end: 0px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
   margin: 0px;
   padding: 0px;
   font-size: em(20px);

src/css/index.scss

@@ -1,15 +1,7 @@
+@import 'modern-css-reset/dist/reset.css';
 @import "./core/sizing";
 @import "./core/colors";
 @import "./core/typography";
-@import "./core/layout.scss";
+@import "./core/layout";
 @import "./components/panel";
-@import "./core/preview.scss";
-
-.iux {
-  @import "./core/sizing";
-  @import "./core/colors";
-  @import "./core/typography";
-  @import "./core/layout.scss";
-  @import "./components/panel";
-  @import "./core/preview.scss";
-}
+@import "./core/preview";

stories/Button.js

@@ -1,4 +1,5 @@
 import './button.css';
+import './global.css';
 
 export const createButton = ({
   primary = false,

stories/global.scss

@@ -0,0 +1,29 @@
+#stories {
+  margin-top: 40px;
+  font-size: 30px;
+}
+
+h1 {
+  &.sbdocs-title {
+    font-weight: 300;
+  }
+}
+
+h1,h2,h3,h4,h5,h6,h3 {
+  &.sbdocs {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+h3.sbdocs-h3 {
+  margin-top: 20px;
+}
+
+.sbdocs,.docs-story {
+  margin-bottom: 20px !important;
+}
+
+.sbdocs >div {
+  margin-bottom: 20px !important;
+}

stories/header.css

@@ -1,32 +0,0 @@
-.wrapper {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-h1 {
-  font-weight: 900;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-button + button {
-  margin-left: 10px;
-}
-
-.welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
-}

stories/iux/Panel.stories.js

@@ -1,3 +1,5 @@
+import '../global.scss';
+
 export default {
   title: 'IUX/Painel',
   // More on argTypes: https://storybook.js.org/docs/html/api/argtypes

stories/iux/Typography.stories.mdx

@@ -1,4 +1,13 @@
-<Meta title="IUX/Base/Tipografia" />
+import { Meta, Story, Title } from '@storybook/addon-docs';
+
+<Meta title="IUX/Base/Tipografia" decorators={[
+    (DocsContainer) => (
+      <div style={{ margin: '10em', background: '#0F0' }}>
+        <DocsContainer />
+      </div>
+    ),
+  ]}
+/>
 
 # Tipografia
 

stories/page.css

@@ -1,69 +0,0 @@
-section {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-section h2 {
-  font-weight: 900;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-section p {
-  margin: 1em 0;
-}
-
-section a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-section ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-section li {
-  margin-bottom: 8px;
-}
-
-section .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-section .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-section .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-section .tip-wrapper svg path {
-  fill: #1ea7fd;
-}