Merge pull request #660 from buildo/storybook-merge

packages/bento-design-system/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-typescript", "@babel/preset-react"],
+  "plugins": ["@vanilla-extract/babel-plugin"]
+}

packages/storybook/.storybook/main.ts → packages/bento-design-system/.storybook/main.ts

@@ -15,14 +15,34 @@ const config: StorybookConfig = {
     const { module: { rules = [] } = {}, plugins = [] } = baseConfig;
 
     // by default, the rules for jsx|tsx files are including the whole monorepo root,
-    // but it's enough to check only the storybook package
+    // but it's enough to check only the current package
     const tsxRules = rules.filter((rule: any) => rule?.test?.test("test.tsx"));
     tsxRules?.forEach((rule: any) => {
       rule.include = [
         // @ts-expect-error
         path.resolve(__dirname, "../"),
       ];
     });
+
+    // Exclude vanilla extract's "*.vanilla.css" files from other "*.css" processing
+    config.module?.rules?.forEach((rule: any) => {
+      if (typeof rule !== "string" && rule.test instanceof RegExp && rule.test.test("test.css")) {
+        rule.exclude = /\.vanilla\.css$/i;
+      }
+    });
+
+    config.module?.rules?.push({
+      // Targets only CSS files generated by vanilla-extract
+      test: /\.vanilla\.css$/i,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: "css-loader",
+          options: { url: false },
+        },
+      ],
+    });
+
     return {
       ...baseConfig,
       plugins: [...plugins, new VanillaExtractPlugin(), new MiniCssExtractPlugin()],

packages/storybook/.storybook/preview.tsx → packages/bento-design-system/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { defaultMessages } from "@buildo/bento-design-system/lib/defaultMessages/en";
+import { defaultMessages } from "../src/defaultMessages/en";
 import { BentoProvider } from "../stories";
 import { useArgs } from "@storybook/addons";
 import { Decorator } from "@storybook/react";

packages/bento-design-system/package.json

@@ -36,18 +36,20 @@
   "scripts": {
     "build": "tsup --minify --clean",
     "prepublishOnly": "pnpm build",
-    "prettier-check": "prettier --parser=typescript \"src/**/*.{ts,tsx}\" --check",
-    "prettier-write": "prettier --parser=typescript \"src/**/*.{ts,tsx}\" --write",
-    "eslint-check": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "prettier-check": "prettier --parser=typescript \"{src,stories}/**/*.{ts,tsx}\" --check",
+    "prettier-write": "prettier --parser=typescript \"{src,stories}/**/*.{ts,tsx}\" --write",
+    "eslint-check": "eslint \"{src,stories}/**/*.{js,ts,tsx}\"",
     "typecheck": "tsc",
     "prepublish": "pnpm test && pnpm build",
     "test": "vitest",
     "lint-staged": "lint-staged",
     "playroom-start": "playroom start --config playroom.config.cjs",
     "playroom-build": "playroom build --config playroom.config.cjs",
-    "start": "tsup --watch",
+    "dev": "tsup --watch",
+    "start": "storybook dev -p 6006",
     "check-circular-deps": "madge --circular src",
-    "wait": "wait-on lib/index.js"
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic $CHROMATIC_OPTIONS"
   },
   "repository": {
     "type": "git",
@@ -121,9 +123,11 @@
     "ts-pattern": "^3.3.5"
   },
   "devDependencies": {
+    "@babel/core": "7.22.5",
     "@babel/preset-env": "7.22.7",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
+    "@phosphor-icons/react": "^2.0.10",
     "@react-types/breadcrumbs": "3.6.0",
     "@react-types/button": "3.7.3",
     "@react-types/datepicker": "3.4.0",
@@ -132,11 +136,21 @@
     "@react-types/numberfield": "3.4.2",
     "@react-types/slider": "3.5.1",
     "@react-types/textfield": "3.7.2",
+    "@storybook/addon-actions": "7.0.25",
+    "@storybook/addon-essentials": "7.0.25",
+    "@storybook/addon-links": "7.0.25",
+    "@storybook/addons": "7.0.25",
+    "@storybook/builder-webpack5": "^7.0.20",
+    "@storybook/react": "7.0.25",
+    "@storybook/react-webpack5": "7.0.25",
+    "@storybook/testing-library": "0.2.0",
+    "@storybook/types": "^7.0.18",
     "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
+    "@types/lodash.orderby": "4.6.7",
     "@types/lodash.pick": "4.4.7",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
@@ -151,28 +165,32 @@
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vanilla-extract/webpack-plugin": "2.2.0",
     "@vitejs/plugin-react": "^4.0.1",
+    "chromatic": "6.7.2",
     "css-loader": "6.8.1",
+    "date-fns": "^2.30.0",
     "esbuild-loader": "2.21.0",
     "eslint": "8.45.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-sort-export-all": "1.4.1",
-    "file-loader": "6.2.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "22.1.0",
     "lint-staged": "13.2.3",
+    "eslint-plugin-storybook": "^0.6.12",
+    "file-loader": "6.2.0",
+    "lodash.orderby": "4.6.0",
     "madge": "^5.0.1",
     "mini-css-extract-plugin": "2.7.6",
     "playroom": "0.32.0",
     "postcss": "8.4.25",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "storybook": "7.0.25",
     "storybook-addon-themes": "6.1.0",
     "style-loader": "3.3.3",
     "ts-loader": "9.3.1",
     "tsup": "7.1.0",
-    "typescript": "4.7.4",
+    "typescript": "5.1.3",
     "vitest": "^0.32.2",
-    "wait-on": "^7.0.1",
     "webpack": "5.76.3",
     "webpack-cli": "4.10.0"
   },

packages/bento-design-system/src/Chip/Chip.tsx

@@ -1,4 +1,3 @@
-import { FunctionComponent } from "react";
 import { IconProps } from "../Icons/IconProps";
 import {
   Label,
@@ -9,6 +8,7 @@ import {
   IconButton,
   ChipCustomColors,
   Body,
+  Children,
 } from "..";
 import { BentoSprinkles } from "../internal";
 import { chipRecipe, ellipsedLabel, maxWidth } from "./Chip.css";
@@ -44,7 +44,7 @@ type DefaultColor =
 type Props = {
   label: LocalizedString;
   color: DefaultColor | ChipCustomColors;
-  icon?: FunctionComponent<IconProps>;
+  icon?: (props: IconProps) => Children;
   /** Truncate and show ellipsis after a number of characters */
   maxCharacters?: number;
   uppercase?: boolean;

packages/bento-design-system/src/Table/cells.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FunctionComponent } from "react";
+import { ComponentProps } from "react";
 import { CellProps } from "react-table";
 import {
   LocalizedString,
@@ -84,7 +84,7 @@ export function TextWithIconCell({
 }: CellProps<
   {},
   {
-    icon: FunctionComponent<IconProps> | null;
+    icon: ((props: IconProps) => Children) | null;
     iconPosition: "left" | "right";
     text: LocalizedString;
     tooltipContent?: Children;

packages/bento-design-system/src/Table/tableColumn.tsx

@@ -22,7 +22,7 @@ import {
   TextWithIconCell,
   IconButtonCell,
 } from "./cells";
-import { ComponentProps, FunctionComponent } from "react";
+import { ComponentProps } from "react";
 import { useBentoConfig } from "../BentoConfigContext";
 
 export type { CellProps } from "react-table";
@@ -145,7 +145,7 @@ export function textWithIcon<A extends string>({
     }: CellProps<
       {},
       {
-        icon: FunctionComponent<IconProps> | null;
+        icon: ((props: IconProps) => Children) | null;
         text: LocalizedString;
         tooltipContent?: Children;
       }
@@ -205,7 +205,7 @@ export function numberWithIcon<A extends string>({
     }: CellProps<
       {},
       {
-        icon: FunctionComponent<IconProps> | null;
+        icon: ((props: IconProps) => Children) | null;
         numericValue: number;
         tooltipContent?: Children;
       }

packages/bento-design-system/src/util/withBentoConfig.tsx

@@ -1,7 +1,7 @@
 import { PartialBentoConfig } from "..";
 import { BentoConfigProvider } from "../BentoConfigContext";
 
-export function withBentoConfig<Props>(
+export function withBentoConfig<Props extends JSX.IntrinsicAttributes>(
   config: PartialBentoConfig,
   Component: (props: Props) => JSX.Element
 ): (props: Props) => JSX.Element {

packages/bento-design-system/src/util/withBentoTheme.tsx

@@ -6,7 +6,7 @@ type WrapperProps = {
   className?: string;
 };
 
-export function withBentoTheme<Props>(
+export function withBentoTheme<Props extends JSX.IntrinsicAttributes>(
   theme: BentoTheme,
   Component: (props: Props) => JSX.Element,
   wrapper?: WrapperProps

packages/storybook/.babelrc.json → packages/bento-design-system/stories/.babelrc.json

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

packages/storybook/stories/Components/AreaLoader.stories.tsx → packages/bento-design-system/stories/Components/AreaLoader.stories.tsx

@@ -1,4 +1,4 @@
-import { Body, Box, Card, AreaLoader, Stack, Title, Inset } from "../";
+import { Body, Box, Card, AreaLoader, Stack, Title, Inset } from "..";
 import { useArgs } from "@storybook/addons";
 import { useEffect } from "react";
 import { Meta, StoryObj } from "@storybook/react";

packages/storybook/stories/Components/Avatar.stories.tsx → packages/bento-design-system/stories/Components/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from "../";
+import { Avatar } from "..";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/Banner.stories.tsx → packages/bento-design-system/stories/Components/Banner.stories.tsx

@@ -1,4 +1,4 @@
-import { Banner } from "../";
+import { Banner } from "..";
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 

packages/storybook/stories/Components/Button.stories.tsx → packages/bento-design-system/stories/Components/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Button, IconCheck } from "../";
+import { Button, IconCheck } from "..";
 
 const meta = {
   component: Button,

packages/storybook/stories/Components/ButtonLink.stories.tsx → packages/bento-design-system/stories/Components/ButtonLink.stories.tsx

@@ -1,5 +1,4 @@
-import { ButtonLink } from "../";
-import { IconCheck } from "@buildo/bento-design-system";
+import { ButtonLink, IconCheck } from "..";
 import { StoryObj, Meta } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/Card.stories.tsx → packages/bento-design-system/stories/Components/Card.stories.tsx

@@ -1,5 +1,4 @@
-import { Body, Card, Stack, Title } from "../";
-import { unconditionalProperties, vars } from "@buildo/bento-design-system";
+import { Body, Card, Stack, Title, unconditionalProperties, vars } from "..";
 import { StoryObj, Meta } from "@storybook/react";
 
 const elevationType = {

packages/storybook/stories/Components/CheckboxField.stories.tsx → packages/bento-design-system/stories/Components/CheckboxField.stories.tsx

@@ -1,4 +1,4 @@
-import { CheckboxField, IconLightbulb, Body } from "../";
+import { CheckboxField, IconLightbulb, Body } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/CheckboxGroupField.stories.tsx → packages/bento-design-system/stories/Components/CheckboxGroupField.stories.tsx

@@ -1,4 +1,4 @@
-import { CheckboxGroupField } from "../";
+import { CheckboxGroupField } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/Chip.stories.tsx → packages/bento-design-system/stories/Components/Chip.stories.tsx

@@ -1,5 +1,4 @@
-import { IconPlaceholder } from "@buildo/bento-design-system";
-import { Chip } from "../";
+import { Chip, IconPlaceholder } from "..";
 import { StoryObj, Meta } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/DateField.stories.tsx → packages/bento-design-system/stories/Components/DateField.stories.tsx

@@ -1,5 +1,4 @@
-import { DateField } from "../";
-import type { DateFieldProps } from "@buildo/bento-design-system";
+import { DateField, DateFieldProps } from "..";
 import {
   startOfWeek,
   endOfWeek,

packages/storybook/stories/Components/DecorativeDivider.stories.tsx → packages/bento-design-system/stories/Components/DecorativeDivider.stories.tsx

@@ -1,5 +1,4 @@
-import { Placeholder } from "@buildo/bento-design-system";
-import { DecorativeDivider, Stack } from "../";
+import { DecorativeDivider, Stack, Placeholder } from "..";
 import { StoryObj, Meta } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/Disclosure.stories.tsx → packages/bento-design-system/stories/Components/Disclosure.stories.tsx

@@ -1,4 +1,4 @@
-import { Card, Disclosure, Placeholder } from "../";
+import { Card, Disclosure, Placeholder } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/IconButton.stories.tsx → packages/bento-design-system/stories/Components/IconButton.stories.tsx

@@ -1,5 +1,4 @@
-import { IconButton } from "../";
-import { IconPlaceholder } from "@buildo/bento-design-system";
+import { IconButton, IconPlaceholder } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/InlineLoader.stories.tsx → packages/bento-design-system/stories/Components/InlineLoader.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { InlineLoader } from "../";
+import { InlineLoader } from "..";
 
 const meta = {
   component: InlineLoader,

packages/storybook/stories/Components/List.stories.tsx → packages/bento-design-system/stories/Components/List.stories.tsx

@@ -1,5 +1,12 @@
-import { IconInfoSolid, IconNegativeSolid, IconWarningSolid, List, IconCheck, Box } from "..";
-import { Children } from "@buildo/bento-design-system";
+import {
+  Children,
+  IconInfoSolid,
+  IconNegativeSolid,
+  IconWarningSolid,
+  List,
+  IconCheck,
+  Box,
+} from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/Menu.stories.tsx → packages/bento-design-system/stories/Components/Menu.stories.tsx

@@ -1,7 +1,6 @@
-import { Body, Title } from "@buildo/bento-design-system";
 import { action } from "@storybook/addon-actions";
 import { ComponentProps } from "react";
-import { Avatar, Box, Button, Menu, Stack } from "..";
+import { Avatar, Box, Body, Button, Menu, Stack, Title } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const items: ComponentProps<typeof Menu>["items"] = [

packages/storybook/stories/Components/Modal.stories.tsx → packages/bento-design-system/stories/Components/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Modal, Body, Placeholder, Stack, CustomModal, Feedback, Inset } from "../";
+import { Modal, Body, Placeholder, Stack, CustomModal, Feedback, Inset } from "..";
 import { action } from "@storybook/addon-actions";
 import { screen } from "@storybook/testing-library";
 import { Meta, StoryObj } from "@storybook/react";

packages/storybook/stories/Components/Navigation.stories.tsx → packages/bento-design-system/stories/Components/Navigation.stories.tsx

@@ -1,6 +1,4 @@
-import { Navigation } from "../";
-import { IconInfoSolid } from "..";
-import { Box, NavigationProps, withBentoConfig } from "@buildo/bento-design-system";
+import { Navigation, IconInfoSolid, Box, NavigationProps, withBentoConfig } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const destinations: NavigationProps<"none">["destinations"] = [

packages/storybook/stories/Components/NumberField.stories.tsx → packages/bento-design-system/stories/Components/NumberField.stories.tsx

@@ -1,4 +1,4 @@
-import { NumberField } from "../";
+import { NumberField } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/storybook/stories/Components/SearchBar.stories.tsx → packages/bento-design-system/stories/Components/SearchBar.stories.tsx

@@ -1,4 +1,4 @@
-import { SearchBar } from "../";
+import { SearchBar } from "..";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {