Configurator

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

@@ -38,17 +38,21 @@ type Props = {
   size?: ModalSize;
   kind?: ModalKind;
   autoFocus?: boolean;
+  portalContainer?: HTMLElement;
 };
 
-type CustomModalProps = Pick<Props, "children" | "isDestructive" | "size" | "autoFocus"> & {
+type CustomModalProps = Pick<
+  Props,
+  "children" | "isDestructive" | "size" | "autoFocus" | "portalContainer"
+> & {
   ["aria-label"]: string;
 };
 
 export function CustomModal(props: CustomModalProps) {
   const config = useBentoConfig().modal;
   const ref = useRef<HTMLDivElement>(null);
   const { overlayProps, underlayProps } = useOverlay({ ...props, isOpen: true }, ref);
-  const createPortal = useCreatePortal();
+  const createPortal = useCreatePortal(props.portalContainer);
 
   usePreventScroll();
 

packages/bento-design-system/src/index.ts

@@ -95,6 +95,7 @@ export * from "./util/NonEmptyArray";
 export * from "./util/Omit";
 export * from "./util/align";
 export * from "./util/atoms";
+export * from "./util/bentoTokens";
 export * from "./util/breakpoints";
 export * from "./util/conditions";
 export * from "./util/link";
@@ -113,11 +114,14 @@ export { titleRecipe } from "./Typography/Title/Title.css";
 export { headlineRecipe } from "./Typography/Headline/Headline.css";
 export { displayRecipe } from "./Typography/Display/Display.css";
 export { inputRecipe } from "./Field/Field.css";
+export { control } from "./SelectField/SelectField.css";
 export * from "./vars.css";
 export { defaultTheme } from "./defaultThemeClass.css";
 export { defaultTokens } from "./util/defaultTokens";
 
 export type { BentoConfig, PartialBentoConfig } from "./BentoConfig";
+export { useBentoConfig } from "./BentoConfigContext";
+export { getRadiusPropsFromConfig } from "./util/BorderRadiusConfig";
 export { defaultConfigs };
 export { BentoConfigProvider } from "./BentoConfigContext";
 

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

@@ -4,11 +4,13 @@ import { Children } from "./Children";
 import { useIsSSR } from "@react-aria/ssr";
 import { BentoThemePortalProvider } from "../BentoThemeContext";
 
-export function useCreatePortal(): (children: Children) => ReactPortal | null {
+export function useCreatePortal(
+  portalContainer?: HTMLElement
+): (children: Children) => ReactPortal | null {
   const isSSR = useIsSSR();
 
   return (children) => {
     const content = <BentoThemePortalProvider>{children}</BentoThemePortalProvider>;
-    return isSSR ? null : createReactPortal(content, document.body);
+    return isSSR ? null : createReactPortal(content, portalContainer ?? document.body);
   };
 }

packages/configuration-builder/package.json

@@ -16,11 +16,15 @@
   "dependencies": {
     "@buildo/bento-design-system": "workspace:*",
     "@phosphor-icons/react": "2.0.13",
+    "@react-aria/button": "3.8.1",
     "@react-aria/i18n": "3.8.1",
     "@react-aria/numberfield": "3.7.0",
+    "@react-aria/select": "3.12.1",
     "@react-stately/numberfield": "3.6.0",
+    "@react-stately/select": "3.5.4",
     "@vanilla-extract/css": "1.12.0",
     "@vanilla-extract/recipes": "0.5.0",
+    "file-saver": "^2.0.5",
     "i18next": "22.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -29,8 +33,12 @@
     "ts-pattern": "3.3.5"
   },
   "devDependencies": {
+    "@react-aria/listbox": "^3.10.2",
+    "@react-stately/collections": "^3.10.1",
     "@react-types/numberfield": "3.5.0",
+    "@react-types/shared": "3.19.0",
     "@tsconfig/vite-react": "2.0.0",
+    "@types/file-saver": "^2.0.7",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "6.5.0",
@@ -42,6 +50,7 @@
     "eslint": "8.48.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",
+    "prettier": "2.8.8",
     "typescript": "5.1.3",
     "vite": "4.4.9",
     "vite-plugin-checker": "0.6.2"

packages/configuration-builder/src/ColorEditor/ColorEditor.tsx

@@ -17,24 +17,15 @@ import { HexToHSL, HexColor } from "../utils/colorUtils";
 import { useTranslation } from "react-i18next";
 import { LightnessInterpolationSelector } from "./LightnessInterpolationSelector";
 import { CounterField } from "./CounterField";
-
-export type LightnessInterpolation = "Linear" | "EaseIn" | "EaseOut" | "EaseInOut";
-
-export type ColorConfig = {
-  referenceColor: HexColor;
-  useReferenceAsKeyColor: boolean;
-  lightnessInterpolation: LightnessInterpolation;
-  hue: number;
-  saturation: number;
-};
+import { PaletteConfig } from "../utils/paletteUtils";
 
 type Props = {
   name: LocalizedString;
-  value: ColorConfig;
+  value: PaletteConfig;
 } & (
   | {
       isReadOnly?: false;
-      onChange: (value: ColorConfig) => void;
+      onChange: (value: PaletteConfig) => void;
       onDelete?: () => void;
     }
   | {

packages/configuration-builder/src/ColorEditor/LightnessInterpolationSelector.tsx

@@ -1,6 +1,6 @@
 import { SelectField } from "@buildo/bento-design-system";
-import { LightnessInterpolation } from "./ColorEditor";
 import { useTranslation } from "react-i18next";
+import { LightnessInterpolation } from "../utils/paletteUtils";
 
 type Props = {
   value: LightnessInterpolation;

packages/configuration-builder/src/ColorEditor/Palette.tsx

@@ -1,22 +1,15 @@
 import { Box } from "@buildo/bento-design-system";
-import { LightnessInterpolation } from "./ColorEditor";
 import { useState } from "react";
 import { IconEyedropper } from "../PhosphorIcons";
-import { HSLToHex, HexColor } from "../utils/colorUtils";
+import { HexColor } from "../utils/colorUtils";
+import { LightnessInterpolation, getPalette } from "../utils/paletteUtils";
 
 type Props = {
   hue: number;
   saturation: number;
   lightnessInterpolation: LightnessInterpolation;
 };
 
-const interpolations: Record<LightnessInterpolation, number[]> = {
-  Linear: [97, 91, 82, 73, 64, 55, 46, 37, 28, 19, 10],
-  EaseIn: [97, 93, 88, 82, 75, 65, 54, 43, 32, 21, 10],
-  EaseOut: [97, 86, 75, 64, 53, 42, 32, 25, 19, 14, 10],
-  EaseInOut: [97, 93, 87, 79, 67, 54, 41, 28, 20, 14, 10],
-};
-
 export function PaletteColorBox(props: { color: HexColor }) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -51,9 +44,7 @@ export function PaletteColorBox(props: { color: HexColor }) {
 }
 
 export function Palette(props: Props) {
-  const { hue, saturation, lightnessInterpolation } = props;
-
-  const lightnesses = interpolations[lightnessInterpolation];
+  const colors = getPalette(props);
 
   return (
     <Box
@@ -65,9 +56,8 @@ export function Palette(props: Props) {
       style={{ height: 160 }}
     >
       <Box display="flex" gap={4} flexGrow={1}>
-        {lightnesses.map((lightness) => {
-          const color = HSLToHex({ h: hue, s: saturation, l: lightness });
-          return <PaletteColorBox color={color} key={lightness} />;
+        {colors.map((color) => {
+          return <PaletteColorBox color={color.value} key={color.value} />;
         })}
       </Box>
     </Box>

packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx

@@ -0,0 +1,169 @@
+import {
+  Box,
+  FieldProps,
+  control,
+  useBentoConfig,
+  getRadiusPropsFromConfig,
+  Body,
+  Field,
+  Popover,
+} from "@buildo/bento-design-system";
+import { useRef } from "react";
+import { useSelectState } from "@react-stately/select";
+import { Section, Item } from "@react-stately/collections";
+import { useSelect, HiddenSelect } from "@react-aria/select";
+import { PalettesDropdown } from "./PalettesDropdown";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
+import { useButton } from "@react-aria/button";
+import { ColorKey, PaletteConfig, stepNames } from "../utils/paletteUtils";
+
+type Props = FieldProps<ColorKey> & { colors: ThemeConfig["colors"] };
+
+function getPaletteItemsSection(key: string, paletteConfig: PaletteConfig) {
+  const paletteItems = [...Array(stepNames.length)].map((_, index) => {
+    const stepName = stepNames[index];
+    const colorKey = `${key}-${stepName}`;
+    const colorText = `${key} ${stepName}`;
+    return (
+      <Item key={colorKey} textValue={colorKey}>
+        {colorText}
+      </Item>
+    );
+  });
+  return (
+    <Section
+      key={key}
+      children={
+        paletteConfig.useReferenceAsKeyColor
+          ? [
+              ...paletteItems,
+              <Item key={`${key}-ref`} textValue={`${key}-ref`}>
+                {`${key}Reference`}
+              </Item>,
+            ]
+          : paletteItems
+      }
+    />
+  );
+}
+
+function getColorItems(colors: ThemeConfig["colors"]) {
+  return [
+    <Section key="General">
+      <Item key="white" textValue="white">
+        White
+      </Item>
+      <Item key="black" textValue="black">
+        Black
+      </Item>
+    </Section>,
+    ...colors.brand.map((brandColor, i) =>
+      getPaletteItemsSection(
+        i === 0 ? "BrandPrimary" : i === 1 ? "BrandSecondary" : "BrandTertiary",
+        brandColor
+      )
+    ),
+    getPaletteItemsSection("Interactive", colors.interactive),
+    getPaletteItemsSection("Neutral", colors.neutral),
+    getPaletteItemsSection("Informative", colors.semantic.informative),
+    getPaletteItemsSection("Positive", colors.semantic.positive),
+    getPaletteItemsSection("Warning", colors.semantic.warning),
+    getPaletteItemsSection("Negative", colors.semantic.negative),
+    getPaletteItemsSection("Grey", colors.dataVisualization.grey),
+    getPaletteItemsSection("Red", colors.dataVisualization.red),
+    getPaletteItemsSection("Orange", colors.dataVisualization.orange),
+    getPaletteItemsSection("Yellow", colors.dataVisualization.yellow),
+    getPaletteItemsSection("Green", colors.dataVisualization.green),
+    getPaletteItemsSection("Jade", colors.dataVisualization.jade),
+    getPaletteItemsSection("Blue", colors.dataVisualization.blue),
+    getPaletteItemsSection("Indigo", colors.dataVisualization.indigo),
+    getPaletteItemsSection("Violet", colors.dataVisualization.violet),
+    getPaletteItemsSection("Pink", colors.dataVisualization.pink),
+  ];
+}
+
+export function ColorPickerField(props: Props) {
+  const inputConfig = useBentoConfig().input;
+  const dropdownConfig = useBentoConfig().dropdown;
+
+  const ref = useRef(null);
+
+  const state = useSelectState({
+    ...props,
+    selectedKey: props.value,
+    isDisabled: props.disabled,
+    children: getColorItems(props.colors),
+    onSelectionChange: (key) => {
+      const item = state.collection.getItem(key);
+      if (item) {
+        props.onChange(item.textValue as ColorKey);
+      }
+    },
+  });
+
+  const { labelProps, errorMessageProps, descriptionProps, triggerProps, valueProps, menuProps } =
+    useSelect(
+      {
+        ...props,
+        isDisabled: props.disabled,
+      },
+      state,
+      ref
+    );
+
+  const { buttonProps } = useButton(
+    {
+      ...triggerProps,
+      elementType: "div",
+    },
+    ref
+  );
+
+  return (
+    <Field
+      {...props}
+      labelProps={labelProps}
+      assistiveTextProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+    >
+      <HiddenSelect
+        isDisabled={props.disabled}
+        state={state}
+        triggerRef={ref}
+        label={props.label}
+        name={props.name}
+      />
+      <Box
+        as="button"
+        {...buttonProps}
+        color={undefined}
+        display="flex"
+        cursor="pointer"
+        outline="none"
+        className={control({ validation: "valid", menuIsOpen: state.isOpen, isReadOnly: false })}
+        disabled={props.disabled}
+        {...getRadiusPropsFromConfig(inputConfig.radius)}
+        paddingX={inputConfig.paddingX}
+        paddingY={inputConfig.paddingY}
+        ref={ref}
+      >
+        <Box {...valueProps} flexGrow={1} textAlign="left">
+          <Body size={inputConfig.fontSize} color={props.disabled ? "disabled" : "primary"}>
+            {state.selectedItem ? state.selectedItem.rendered : ""}
+          </Body>
+        </Box>
+        <Box paddingLeft={16} aria-hidden="true">
+          {dropdownConfig.openIndicatorIcon({
+            size: dropdownConfig.openIndicatorIconSize,
+            color: props.disabled ? "disabled" : "default",
+          })}
+        </Box>
+      </Box>
+      {state.isOpen && (
+        <Popover triggerRef={ref} onClose={state.close}>
+          <PalettesDropdown colors={props.colors} state={state} menuProps={menuProps} />
+        </Popover>
+      )}
+    </Field>
+  );
+}

packages/configuration-builder/src/ColorPickerField/PalettesDropdown.css.ts

@@ -0,0 +1,28 @@
+import { sprinkles } from "../sprinkles.css";
+import { strictRecipe } from "@buildo/bento-design-system";
+
+export const colorBoxRecipe = strictRecipe({
+  base: [
+    {
+      width: 28,
+      height: 28,
+    },
+    sprinkles({
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: {
+        default: "outlineContainer",
+        hover: "outlineInputHover",
+        focus: "outlineInputHover",
+      },
+      cursor: "pointer",
+      outline: "none",
+    }),
+  ],
+  variants: {
+    isSelected: {
+      true: sprinkles({ borderRadius: "circled" }),
+      false: {},
+    },
+  },
+});