feat: ✨ configurado storybook do react

kevinDsousa · kevinDsousa · commit bb7b200059e5 · 2024-05-20T18:20:38.000-03:00
adicioado o mdx da base do design system para react
diff --git a/applications/react/package.json b/applications/react/package.json
@@ -5,8 +5,8 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
-    "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
     "lint": "eslint src/**/*.ts --fix"
   },
   "keywords": [],
diff --git a/applications/react/src/components/Button.tsx b/applications/react/src/components/Button.tsx
@@ -1,4 +1,5 @@
-import { styled } from "./styles";
+import { styled } from "../styles";
+import { ComponentProps } from "react";
 
 export const Button = styled("button", {
   backgroundColor: "$gray900",
diff --git a/applications/react/src/index.ts b/applications/react/src/index.ts
@@ -0,0 +1,3 @@
+import { Button } from "./components/Button";
+
+export { Button };
diff --git a/applications/react/src/types/ButtonProps.ts b/applications/react/src/types/ButtonProps.ts
@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import { Button } from "../components/Button";
+
+export type ButtonProps = ComponentProps<typeof Button>;
diff --git a/documentations/angular/.storybook/preview.ts b/documentations/angular/.storybook/preview.ts
@@ -1,17 +1,20 @@
-import type { Preview } from "@storybook/angular";
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import docJson from "../documentation.json";
-setCompodocJson(docJson);
+import type { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
+        date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: 'dark',
+    },
+    docs: {
+      theme: themes.dark,
+    },
   },
 };
 
diff --git a/documentations/react/.storybook/main.ts b/documentations/react/.storybook/main.ts
@@ -11,7 +11,7 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: [
-    "../src/stories/**/*.mdx",
+    "../src/pages/**/*.mdx",
     "../src/stories**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
diff --git a/documentations/react/.storybook/preview-head.html b/documentations/react/.storybook/preview-head.html
@@ -0,0 +1,10 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+  rel="stylesheet"
+/>
+
+<script>
+  window.global = window;
+</script>
diff --git a/documentations/react/.storybook/preview.ts b/documentations/react/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import { themes } from "@storybook/theming";
 
 const preview: Preview = {
   parameters: {
@@ -8,6 +9,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: "dark",
+    },
+    docs: {
+      theme: themes.dark,
+    },
   },
 };
 
diff --git a/documentations/react/package.json b/documentations/react/package.json
@@ -11,15 +11,17 @@
     "build": "storybook build"
   },
   "dependencies": {
+    "@storybook/addons": "^7.6.17",
+    "polished": "^4.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.4.0",
+    "@saturn/app-react": "*",
     "@saturn/pack-eslint": "*",
     "@saturn/pack-tokens": "*",
     "@saturn/pack-tsconfig": "*",
-    "@saturn/app-react": "*",
-    "@chromatic-com/storybook": "^1.4.0",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",
diff --git a/documentations/react/src/assets/react.svg b/documentations/react/src/assets/react.svg
diff --git a/documentations/react/src/components/ColorsGrid.tsx b/documentations/react/src/components/ColorsGrid.tsx
@@ -0,0 +1,23 @@
+import { colors } from "@saturn/pack-tokens";
+import { getContrast } from "polished";
+
+export const ColorsGrid = () => {
+  return Object.entries(colors).map(([key, color]) => {
+    return (
+      <div key={key} style={{ backgroundColor: color }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            fontFamily: "monospace",
+            padding: "1.5rem",
+            color: getContrast(color, "#ffffff") < 3.5 ? "#000000" : "#ffffff",
+          }}
+        >
+          <strong>${key}</strong>
+          <span>{color}</span>
+        </div>
+      </div>
+    );
+  });
+};
diff --git a/documentations/react/src/components/TokensGrid.tsx b/documentations/react/src/components/TokensGrid.tsx
@@ -0,0 +1,33 @@
+import "../styles/tokens-grid.css";
+
+import { TokensGridProps } from "../types/TokensGridProps";
+
+export const TokensGrid = ({
+  tokens,
+  hasRemValue = false,
+}: TokensGridProps) => {
+  return (
+    <table className="tokens-grid">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+          {hasRemValue && <th>Pixels</th>}
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(tokens).map(([key, value]) => {
+          return (
+            <tr key={key}>
+              <td>{key}</td>
+              <td>{value}</td>
+              {hasRemValue && (
+                <td>{Number(value.replace("rem", "")) * 16}px</td>
+              )}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
diff --git a/documentations/react/src/pages/home.mdx b/documentations/react/src/pages/home.mdx
@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Home" />
+
+# Saturn
+
+Design System for React
diff --git a/documentations/react/src/pages/tokens/colors.mdx b/documentations/react/src/pages/tokens/colors.mdx
@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/addon-docs";
+import { ColorsGrid } from "../../components/ColorsGrid";
+
+<Meta title="Tokens/Colors" />
+
+# Colors
+
+Essas são as cores utilizadas no Saturn.
+
+<ColorsGrid />
diff --git a/documentations/react/src/pages/tokens/font-sizes.mdx b/documentations/react/src/pages/tokens/font-sizes.mdx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+import { TokensGrid } from "../../components/TokensGrid";
+import { fontSizes } from "@saturn/pack-tokens";
+
+<Meta title="Tokens/fontSizes" />
+
+# Fonts Sizes
+
+<TokensGrid tokens={fontSizes} hasRemValue />
diff --git a/documentations/react/src/pages/tokens/font-weights.mdx b/documentations/react/src/pages/tokens/font-weights.mdx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+import { TokensGrid } from "../../components/TokensGrid";
+import { fontWeights } from "@saturn/pack-tokens";
+
+<Meta title="Tokens/FontsWeights" />
+
+# Font Weights
+
+<TokensGrid tokens={fontWeights} hasRemValue />
diff --git a/documentations/react/src/pages/tokens/fonts.mdx b/documentations/react/src/pages/tokens/fonts.mdx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+import { TokensGrid } from "../../components/TokensGrid";
+import { fonts } from "@saturn/pack-tokens";
+
+<Meta title="Tokens/Fonts" />
+
+# Fonts
+
+<TokensGrid tokens={fonts} />
diff --git a/documentations/react/src/pages/tokens/line-heights.mdx b/documentations/react/src/pages/tokens/line-heights.mdx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+import { TokensGrid } from "../../components/TokensGrid";
+import { lineHeights } from "@saturn/pack-tokens";
+
+<Meta title="Tokens/lineHeights" />
+
+# Line Heights
+
+<TokensGrid tokens={lineHeights} />
diff --git a/documentations/react/src/pages/tokens/radiis.mdx b/documentations/react/src/pages/tokens/radiis.mdx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+import { TokensGrid } from "../../components/TokensGrid";
+import { radii } from "@saturn/pack-tokens";
+
+<Meta title="Tokens/Radii" />
+
+# Radii
+
+<TokensGrid tokens={radii} hasRemValue />
diff --git a/documentations/react/src/pages/tokens/spaces.mdx b/documentations/react/src/pages/tokens/spaces.mdx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+import { TokensGrid } from "../../components/TokensGrid";
+import { space } from "@saturn/pack-tokens";
+
+<Meta title="Tokens/Spaces" />
+
+# Spaces
+
+<TokensGrid tokens={space} hasRemValue />
diff --git a/documentations/react/src/stories/Button.stories.tsx b/documentations/react/src/stories/Button.stories.tsx
@@ -1,17 +1,17 @@
-import { Button } from "@saturn/app-react";
+import { Button, ButtonProps } from "@saturn/app-react";
 import { StoryObj, Meta } from "@storybook/react";
 
 export default {
-  title: "Button",
+  title: "Form/Button",
   component: Button,
   args: {
     children: "Enviar",
   },
 } as Meta;
 
-export const Primary: StoryObj = {};
+export const Primary: StoryObj<ButtonProps> = {};
 
-export const Big: StoryObj = {
+export const Big: StoryObj<ButtonProps> = {
   args: {
     size: "big",
   },
diff --git a/documentations/react/src/styles/tokens-grid.css b/documentations/react/src/styles/tokens-grid.css
@@ -0,0 +1,29 @@
+.tokens-grid {
+  width: 90%;
+  border: none;
+}
+
+.tokens-grid tbody td {
+  padding: 0.75rem 2rem;
+}
+
+.tokens-grid tbody td:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border: none;
+}
+
+.tokens-grid tbody td:last-child {
+  border: none;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.tokens-grid tbody tr,
+.tokens-grid tbody tr td {
+  border: none;
+}
+
+.tokens-grid tbody tr:nth-child(even) td {
+  background: #444;
+}
diff --git a/documentations/react/src/types/TokensGridProps.ts b/documentations/react/src/types/TokensGridProps.ts
@@ -0,0 +1,4 @@
+export interface TokensGridProps {
+  tokens: Record<string, string>;
+  hasRemValue?: boolean;
+}
diff --git a/documentations/react/tsconfig.json b/documentations/react/tsconfig.json
@@ -1,25 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "extends": "@saturn/pack-tsconfig/react.json",
+  "include": ["src"]
 }
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { Button } from "./components/Button";`
	`2`	`+`
	`3`	`+export { Button };`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ function getAbsolutePath(value: string): any {`
`11`	`11`	`}`
`12`	`12`	`const config: StorybookConfig = {`
`13`	`13`	`stories: [`
`14`		`- "../src/stories/*/.mdx",`
	`14`	`+ "../src/pages/*/.mdx",`
`15`	`15`	`"../src/stories*/.stories.@(js\|jsx\|mjs\|ts\|tsx)",`
`16`	`16`	`],`
`17`	`17`	`addons: [`