Merge pull request #529 from buildo/esm2

Author: gabro

packages/bento-design-system/babel-jest.config.js packages/bento-design-system/babel-jest.config.cjs

@@ -1,4 +1,4 @@
-const baseConfig = require("./babel.config");
+const baseConfig = require("./babel.config.cjs");
 
 module.exports = {
   ...baseConfig,

packages/bento-design-system/babel.config.js packages/bento-design-system/babel.config.cjs

@@ -0,0 +1,8 @@
+{
+  "preset": "ts-jest",
+  "testEnvironment": "jsdom",
+  "transform": {
+    "\\.tsx?$": ["babel-jest", { "configFile": "./babel-jest.config.cjs" }]
+  },
+  "setupFilesAfterEnv": ["<rootDir>/test/setupTests.ts"]
+}

packages/bento-design-system/jest.config.js

@@ -2,14 +2,27 @@
   "name": "@buildo/bento-design-system",
   "version": "0.16.4",
   "description": "The buildo DS",
-  "main": "lib/index.js",
+  "main": "lib/index.cjs",
+  "module": "lib/index.js",
   "files": [
     "lib"
   ],
   "sideEffects": [
-    "*.css",
-    "*.css.ts"
+    "global.css.ts",
+    "reset.css.ts",
+    "defaultTheme.css.ts"
   ],
+  "exports": {
+    ".": {
+      "node": "./lib/index.cjs",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./index.css": "./lib/index.css",
+    "./defaultTheme.css": "./lib/defaultTheme.css"
+  },
+  "types": "lib/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "tsup --minify --clean",
     "prepublishOnly": "pnpm build",
@@ -20,8 +33,8 @@
     "prepublish": "pnpm test && pnpm build",
     "test": "jest",
     "lint-staged": "lint-staged",
-    "playroom-start": "playroom start",
-    "playroom-build": "playroom build",
+    "playroom-start": "playroom start --config playroom.config.cjs",
+    "playroom-build": "playroom build --config playroom.config.cjs",
     "start": "tsup --watch",
     "check-circular-deps": "madge --circular src"
   },
@@ -84,15 +97,15 @@
     "@vanilla-extract/recipes": "0.2.5",
     "@vanilla-extract/sprinkles": "1.5.1",
     "clsx": "^1.2.1",
+    "deepmerge-ts": "^4.3.0",
     "react-cool-dimensions": "^2.0.7",
     "react-dropzone": "^14.2.3",
     "react-input-mask": "^2.0.4",
-    "react-keyed-flatten-children": "^1.3.0",
+    "react-is": "18.2.0",
     "react-select": "^5.4.0",
     "react-table": "^7.8.0",
     "react-use": "^17.4.0",
     "recharts": "^2.1.16",
-    "ts-deepmerge": "^2.0.3",
     "ts-pattern": "^3.3.5"
   },
   "devDependencies": {
@@ -116,6 +129,7 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/react-input-mask": "2.0.5",
+    "@types/react-is": "^17.0.3",
     "@types/react-table": "7.7.14",
     "@vanilla-extract/babel-plugin": "1.1.7",
     "@vanilla-extract/esbuild-plugin": "2.1.0",
@@ -142,7 +156,7 @@
     "style-loader": "3.3.1",
     "ts-jest": "28.0.8",
     "ts-loader": "9.3.1",
-    "tsup": "6.4.0",
+    "tsup": "6.6.3",
     "typescript": "4.7.4",
     "webpack": "5.74.0",
     "webpack-cli": "4.10.0"

packages/bento-design-system/jest.config.json

@@ -3,8 +3,7 @@ const { ProvidePlugin } = require("webpack");
 const { ESBuildMinifyPlugin } = require("esbuild-loader");
 
 module.exports = {
-  components: "../storybook/stories/index.tsx",
-  typeScriptFiles: ["../storybook/stories/index.tsx"],
+  components: "./src/index.ts",
   outputPath: "./dist/playroom",
   title: "Bento 🍱",
   widths: [320, 425, 768, 1024, 1440, 2560],
@@ -34,7 +33,9 @@ module.exports = {
         {
           test: /\.css$/,
           use: ["style-loader", "css-loader"],
-          exclude: /node_modules/,
+          exclude: (modulePath) => {
+            return /node_modules/.test(modulePath) && !modulePath.includes("@fontsource");
+          },
         },
       ],
     },

packages/bento-design-system/jsxShim.ts

@@ -1,4 +1,11 @@
-import { Box, BentoProvider } from "../../storybook/stories";
+import * as React from "react";
+import { Box, BentoProvider } from "../src";
+import "../src/reset.css";
+import "../src/global.css";
+import "../src/defaultTheme.css";
+import "@fontsource/ibm-plex-sans/400.css";
+import "@fontsource/ibm-plex-sans/500.css";
+import "@fontsource/ibm-plex-sans/600.css";
 import { defaultMessages } from "../../storybook/stories/defaultMessages";
 
 export default function FrameComponent({ theme, children }) {

packages/bento-design-system/package.json

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
 import * as defaultConfigs from "./util/defaultConfigs";
 import type { BentoConfig, PartialBentoConfig } from "./BentoConfig";
-import merge from "ts-deepmerge";
+import { deepmerge } from "deepmerge-ts";
 import { Children } from "./util/Children";
 
 const BentoConfigContext = createContext<BentoConfig>(defaultConfigs);
@@ -22,8 +22,9 @@ export function BentoConfigProvider({
   // So we retrieve the parent config via useBentoConfig(), which will default to the default config
   // in case this is the top level provider.
   const parentConfig = useBentoConfig();
+
   return (
-    <BentoConfigContext.Provider value={merge(parentConfig, config)}>
+    <BentoConfigContext.Provider value={deepmerge(parentConfig, config) as BentoConfig}>
       {children}
     </BentoConfigContext.Provider>
   );

packages/bento-design-system/playroom.config.js packages/bento-design-system/playroom.config.cjs

@@ -1,7 +1,7 @@
 import { extractAtomsFromProps } from "@dessert-box/core";
 import * as resetStyles from "../reset.css";
 import { forwardRef, createElement } from "react";
-import clsx, { ClassValue } from "clsx";
+import { ClassValue, clsx } from "clsx";
 import { useSprinkles } from "../SprinklesContext";
 import { SprinklesFn } from "../util/ConfigurableTypes";
 

packages/bento-design-system/playroom/FrameComponent.tsx

@@ -9,7 +9,6 @@ import { useField } from "@react-aria/label";
 import { Input } from "./Input";
 import { IconMinus } from "../Icons";
 import { dateFieldRecipe } from "./DateField.css";
-import clsx from "clsx";
 import { LocalizedString } from "../util/LocalizedString";
 import { useBentoConfig } from "../BentoConfigContext";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
@@ -159,7 +158,7 @@ export function DateField(props: Props) {
         paddingX={inputConfig.paddingX}
         paddingY={inputConfig.paddingY}
         background={inputConfig.background.default}
-        className={clsx(
+        className={[
           inputRecipe({ validation: validationState || "notSet" }),
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
@@ -169,8 +168,8 @@ export function DateField(props: Props) {
           dateFieldRecipe({ validation: validationState || "notSet", isFocused }),
           {
             readOnly: props.readOnly,
-          }
-        )}
+          },
+        ]}
         style={getReadOnlyBackgroundStyle(inputConfig)}
         disabled={props.disabled}
       >

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

@@ -1,5 +1,5 @@
 import { ReactChild, ReactElement } from "react";
-import flattenChildren from "react-keyed-flatten-children";
+import { flattenChildren } from "../util/flattenChildren";
 import { BoxProps, Box } from "../Box/Box";
 import { ResponsiveSpace } from "../internal";
 import { normalizeResponsiveValue, OptionalResponsiveValue } from "../internal/sprinkles.css";

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

@@ -1,4 +1,4 @@
-import flattenChildren from "react-keyed-flatten-children";
+import { flattenChildren } from "../util/flattenChildren";
 import { Box, AsProp } from "../Box/Box";
 import { ResponsiveSpace } from "../internal";
 import { Children } from "../util/Children";

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

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import flattenChildren from "react-keyed-flatten-children";
+import { flattenChildren } from "../util/flattenChildren";
 import { Divider } from "../Divider/Divider";
 import { ResponsiveAlign, alignToFlexAlign } from "../util/align";
 import { childKey } from "../util/childKey";

packages/bento-design-system/src/Layout/Columns.tsx

@@ -1,4 +1,4 @@
-import flattenChildren from "react-keyed-flatten-children";
+import { flattenChildren } from "../util/flattenChildren";
 import { Children } from "..";
 import { mobileColumns, tabletColumns, desktopColumns, wideColumns } from "./Tiles.css";
 import { ResponsiveAlignY, alignYToFlexAlign } from "../util/align";

packages/bento-design-system/src/Layout/Inline.tsx

@@ -14,7 +14,7 @@ import { useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
 import { useDialog } from "@react-aria/dialog";
 import { FocusScope } from "@react-aria/focus";
 import { modalRecipe, underlay, modalBody } from "./Modal.css";
-import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
+import { useKeyPressEvent } from "react-use";
 import { useDefaultMessages } from "../util/useDefaultMessages";
 import { IconButton } from "../IconButton/IconButton";
 import { createPortal } from "../util/createPortal";

packages/bento-design-system/src/Layout/Stack.tsx

@@ -30,7 +30,7 @@ import {
 } from "..";
 import { singleValue, placeholder, menu, control } from "./SelectField.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import type { SelectOption } from "./SelectField";
 import { InternalList } from "../List/InternalList";
 import { ListItem } from "../List/ListItem";

packages/bento-design-system/src/Layout/Tiles.tsx

@@ -0,0 +1,34 @@
+// NOTE(gabro): Adapted from react-keyed-flatten-children, due to lack of ESM build
+// Released under the MIT license (https://github.com/grrowl/react-keyed-flatten-children/blob/master/LICENSE)
+
+/* Returns React children into an array, flattening fragments. */
+import { ReactNode, ReactElement, Children, isValidElement, cloneElement } from "react";
+import { isFragment } from "react-is";
+
+type ReactChild = ReactElement | string | number;
+
+export function flattenChildren(
+  children: ReactNode,
+  depth: number = 0,
+  keys: (string | number)[] = []
+): ReactChild[] {
+  return Children.toArray(children).reduce((acc: ReactChild[], node, nodeIndex) => {
+    if (isFragment(node)) {
+      acc.push.apply(
+        acc,
+        flattenChildren(node.props.children, depth + 1, keys.concat(node.key || nodeIndex))
+      );
+    } else {
+      if (isValidElement(node)) {
+        acc.push(
+          cloneElement(node, {
+            key: keys.concat(String(node.key)).join("."),
+          })
+        );
+      } else if (typeof node === "string" || typeof node === "number") {
+        acc.push(node);
+      }
+    }
+    return acc;
+  }, []);
+}

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

@@ -8,7 +8,7 @@ export function withBentoConfig<Props>(
   return (props: Props) => {
     return (
       <BentoConfigProvider value={config}>
-        <Component {...props} />{" "}
+        <Component {...props} />
       </BentoConfigProvider>
     );
   };

packages/bento-design-system/src/SelectField/components.tsx

@@ -3,10 +3,10 @@ import { vanillaExtractPlugin } from "@vanilla-extract/esbuild-plugin";
 
 export default defineConfig({
   entry: ["src/index.ts", "src/defaultTheme.ts"],
+  sourcemap: true,
   outDir: "lib",
+  format: ["esm", "cjs"],
   esbuildPlugins: [vanillaExtractPlugin()],
   dts: true,
-  // See https://esbuild.github.io/content-types/#auto-import-for-jsx
-  inject: ["./jsxShim.ts"],
   noExternal: ["@fontsource"],
 });

packages/bento-design-system/src/util/flattenChildren.ts

@@ -1,5 +1,5 @@
-import "@buildo/bento-design-system/lib/index.css";
-import "@buildo/bento-design-system/lib/defaultTheme.css";
+import "@buildo/bento-design-system/index.css";
+import "@buildo/bento-design-system/defaultTheme.css";
 import "./theme.css";
 import {
   createBentoProvider,

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

@@ -17,8 +17,8 @@ Add the Bento package to your project:
 Here's how an hello world looks like:
 
 ```ts
-import "@buildo/bento-design-system/lib/index.css";
-import "@buildo/bento-design-system/lib/defaultTheme.css";
+import "@buildo/bento-design-system/index.css";
+import "@buildo/bento-design-system/defaultTheme.css";
 import { BentoProvider, Title } from "@buildo/bento-design-system";
 import { defaultMessages } from "./defaultMessages";
 

packages/bento-design-system/tsup.config.ts

@@ -103,7 +103,7 @@ export default defineConfig({
   // Include here the css files coming from external dependencies, which we
   // recommend to bundle in your design system package.
   noExternal: [
-    "@buildo/bento-design-system/lib/index.css",
+    "@buildo/bento-design-system/index.css",
     // e.g. here's how to include fonts from Fontsource, a popular library for self-hosting fonts
     // "@fontsource",
 

packages/storybook/stories/index.tsx

@@ -89,13 +89,13 @@ This option is available but not recommended, as it's easy to forget or misspell
 You can either import the default theme and then override some of the default values using an additional stylesheet, or completely replace `defaultTheme.css` with your own stylesheet defining a value for each of the Bento variables.
 
 ```ts title="my-project/design-system/src/index.tsx"
-import "@buildo/bento-design-system/lib/index.css";
+import "@buildo/bento-design-system/index.css";
 import "./theme.css";
 ```
 
 ```css title="my-project/design-system/src/theme.css"
 /* Import this file if you want to start from the defaultTheme and only override some variables */
-@import "@buildo/bento-design-system/lib/defaultTheme.css";
+@import "@buildo/bento-design-system/defaultTheme.css";
 
 :root {
   /* change the brand primary color */

packages/website/docs/02-Getting Started/01-quick-start.mdx

@@ -1,5 +1,4 @@
 import React from "react";
-import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
 
 type FeatureItem = {
@@ -44,7 +43,7 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({ title, image, description }: FeatureItem) {
   return (
-    <div className={clsx("col col--4")}>
+    <div className={"col col--4"}>
       <div className="text--center padding-vert--md">
         <img className={styles.featureSvg} alt={title} src={image} />
       </div>

packages/website/docs/02-Getting Started/03-project-structure.mdx

@@ -1,5 +1,5 @@
-@import "@buildo/bento-design-system/lib/index.css";
-@import "@buildo/bento-design-system/lib/defaultTheme.css";
+@import "@buildo/bento-design-system/index.css";
+@import "@buildo/bento-design-system/defaultTheme.css";
 
 /**
  * Any CSS included here will be global. The classic template

packages/website/docs/03-Customization/01-theming.mdx

@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";