Merge pull request #529 from buildo/esm2

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/jest.config.json

@@ -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/package.json

@@ -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/playroom.config.js → packages/bento-design-system/playroom.config.cjs

@@ -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/playroom/FrameComponent.tsx

@@ -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/src/BentoConfigContext.tsx

@@ -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/src/Box/Box.tsx

@@ -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/src/DateField/DateField.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/Layout/Columns.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/Layout/Inline.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/Layout/Stack.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/Tiles.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/Modal/Modal.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/SelectField/components.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/util/flattenChildren.ts

@@ -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/util/withBentoConfig.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/tsup.config.ts

@@ -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/storybook/stories/index.tsx

@@ -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/website/docs/02-Getting Started/01-quick-start.mdx

@@ -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/website/docs/02-Getting Started/03-project-structure.mdx

@@ -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/website/docs/03-Customization/01-theming.mdx

@@ -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/src/components/HomepageFeatures.tsx

@@ -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/src/css/custom.css

@@ -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/src/pages/index.tsx

@@ -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";