diff --git a/packages/configuration-builder/package.json b/packages/configuration-builder/package.json
index 5f76fea29..137f46588 100644
--- a/packages/configuration-builder/package.json
+++ b/packages/configuration-builder/package.json
@@ -19,11 +19,14 @@
"@react-aria/i18n": "3.8.1",
"@react-aria/numberfield": "3.7.0",
"@react-stately/numberfield": "3.6.0",
+ "@vanilla-extract/css": "1.12.0",
+ "@vanilla-extract/recipes": "0.5.0",
"i18next": "22.5.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-i18next": "12.3.1",
- "ts-pattern": "5.0.5"
+ "react-router-dom": "^6.15.0",
+ "ts-pattern": "3.3.5"
},
"devDependencies": {
"@react-types/numberfield": "3.5.0",
@@ -32,11 +35,15 @@
"@types/react-dom": "18.2.7",
"@typescript-eslint/eslint-plugin": "6.5.0",
"@typescript-eslint/parser": "6.5.0",
+ "@vanilla-extract/dynamic": "2.0.3",
+ "@vanilla-extract/sprinkles": "1.6.1",
+ "@vanilla-extract/vite-plugin": "3.8.2",
"@vitejs/plugin-react": "4.0.4",
"eslint": "8.48.0",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-react-refresh": "0.4.3",
"typescript": "5.1.3",
- "vite": "4.4.9"
+ "vite": "4.4.9",
+ "vite-plugin-checker": "^0.6.2"
}
}
diff --git a/packages/configuration-builder/src/App.tsx b/packages/configuration-builder/src/App.tsx
index 38148d669..c4231055f 100644
--- a/packages/configuration-builder/src/App.tsx
+++ b/packages/configuration-builder/src/App.tsx
@@ -1,14 +1,18 @@
-import { Stack } from "@buildo/bento-design-system";
+import { Box, Divider } from "@buildo/bento-design-system";
import { Header } from "./Header/Header";
-import { ThemeConfigurator } from "./ThemeConfigurator/ThemeConfigurator";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
-function App() {
+export function App() {
return (
-
+
-
-
+
+
+
+
+
+
+
);
}
-
-export default App;
diff --git a/packages/configuration-builder/src/ColorEditor/Palette.tsx b/packages/configuration-builder/src/ColorEditor/Palette.tsx
index 0f26f6036..d0188654e 100644
--- a/packages/configuration-builder/src/ColorEditor/Palette.tsx
+++ b/packages/configuration-builder/src/ColorEditor/Palette.tsx
@@ -1,7 +1,7 @@
import { Box } from "@buildo/bento-design-system";
import { LightnessInterpolation } from "./ColorEditor";
import { useState } from "react";
-import { IconEyedropper } from "../Icons/IconEyedropper";
+import { IconEyedropper } from "../PhosphorIcons";
import { HSLToHex, HexColor } from "../utils/colorUtils";
type Props = {
diff --git a/packages/configuration-builder/src/ColorsSection/BrandColors.tsx b/packages/configuration-builder/src/ColorsSection/BrandColors.tsx
index 1fb6de325..3d0f4d847 100644
--- a/packages/configuration-builder/src/ColorsSection/BrandColors.tsx
+++ b/packages/configuration-builder/src/ColorsSection/BrandColors.tsx
@@ -2,8 +2,8 @@ import { Button, Headline, Inline, Stack, Actions } from "@buildo/bento-design-s
import { useTranslation } from "react-i18next";
import { ColorConfig, ColorEditor } from "../ColorEditor/ColorEditor";
import { HexColor } from "../utils/colorUtils";
-import { ThemeConfig } from "../ThemeConfigurator/ThemeConfigurator";
import { defaultColorConfig } from "./defaultColor";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
type BrandColors = ThemeConfig["colors"]["brand"];
diff --git a/packages/configuration-builder/src/ColorsSection/ColorsSection.tsx b/packages/configuration-builder/src/ColorsSection/ColorsSection.tsx
index 954231941..24f3e2229 100644
--- a/packages/configuration-builder/src/ColorsSection/ColorsSection.tsx
+++ b/packages/configuration-builder/src/ColorsSection/ColorsSection.tsx
@@ -1,7 +1,6 @@
import { useTranslation } from "react-i18next";
import { ConfiguratorSection } from "../ConfiguratorSection/ConfiguratorSection";
import { BrandColors } from "./BrandColors";
-import { ThemeConfig } from "../ThemeConfigurator/ThemeConfigurator";
import { useState } from "react";
import { match } from "ts-pattern";
import { InteractiveColor } from "./InteractiveColor";
@@ -9,16 +8,9 @@ import { NeutralColor } from "./NeutralColor";
import { SemanticColors } from "./SemanticColors";
import { DataVizColors } from "./DataVizColors";
import { SectionCompleted } from "./SectionCompleted";
+import { ThemeConfig, useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-type ColorsConfig = ThemeConfig["colors"];
-
-type Props = {
- value: ColorsConfig;
- onChange: (value: ColorsConfig) => void;
- onComplete: () => void;
-};
-
-export function ColorsSection(props: Props) {
+export function ColorsSection() {
const steps = [
"brand" as const,
"interactive" as const,
@@ -27,6 +19,13 @@ export function ColorsSection(props: Props) {
"dataVisualization" as const,
];
const { t } = useTranslation();
+ const { theme, setTheme, completeSection } = useConfiguratorStatusContext();
+
+ const colors = theme.colors;
+
+ const onChange = (newValue: ThemeConfig["colors"]) => {
+ setTheme({ ...theme, colors: newValue });
+ };
const [completed, setCompleted] = useState(false);
const [currentStep, setCurrentStep] = useState<(typeof steps)[0]>("brand");
@@ -42,11 +41,12 @@ export function ColorsSection(props: Props) {
return match(completed)
.with(true, () => (
- {}} goToTypography={() => {}} />
+
))
.with(false, () => (
({ label: t(`ColorsSection.Step.${step}`) }))}
currentStep={currentStepIndex}
@@ -54,47 +54,45 @@ export function ColorsSection(props: Props) {
{match(currentStep)
.with("brand", () => (
props.onChange({ ...props.value, brand: value })}
+ value={colors.brand}
+ onChange={(value) => onChange({ ...colors, brand: value })}
onCancel={() => {}}
onNext={onNext}
/>
))
.with("interactive", () => (
props.onChange({ ...props.value, interactive: value })}
- brandColors={props.value.brand}
+ value={theme.colors.interactive}
+ onChange={(value) => onChange({ ...colors, interactive: value })}
+ brandColors={colors.brand}
onBack={onBack}
onNext={onNext}
/>
))
.with("neutral", () => (
props.onChange({ ...props.value, neutral })}
+ value={colors.neutral}
+ onChange={(neutral) => onChange({ ...colors, neutral })}
onBack={onBack}
onNext={onNext}
/>
))
.with("semantic", () => (
props.onChange({ ...props.value, semantic })}
+ value={colors.semantic}
+ onChange={(semantic) => onChange({ ...colors, semantic })}
onBack={onBack}
onNext={onNext}
/>
))
.with("dataVisualization", () => (
- props.onChange({ ...props.value, dataVisualization })
- }
+ value={colors.dataVisualization}
+ onChange={(dataVisualization) => onChange({ ...colors, dataVisualization })}
onBack={onBack}
onNext={() => {
setCompleted(true);
- props.onComplete();
+ completeSection("colors");
}}
/>
))
diff --git a/packages/configuration-builder/src/ColorsSection/DataVizColors.tsx b/packages/configuration-builder/src/ColorsSection/DataVizColors.tsx
index 002332fa3..3994c0d60 100644
--- a/packages/configuration-builder/src/ColorsSection/DataVizColors.tsx
+++ b/packages/configuration-builder/src/ColorsSection/DataVizColors.tsx
@@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next";
-import { ThemeConfig } from "../ThemeConfigurator/ThemeConfigurator";
import { Actions, Headline, Stack } from "@buildo/bento-design-system";
import { ColorEditor } from "../ColorEditor/ColorEditor";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
type DataVizColors = ThemeConfig["colors"]["dataVisualization"];
diff --git a/packages/configuration-builder/src/ColorsSection/InteractiveColor.tsx b/packages/configuration-builder/src/ColorsSection/InteractiveColor.tsx
index fba935c2d..52566a39f 100644
--- a/packages/configuration-builder/src/ColorsSection/InteractiveColor.tsx
+++ b/packages/configuration-builder/src/ColorsSection/InteractiveColor.tsx
@@ -6,10 +6,10 @@ import {
Stack,
unsafeLocalizedString,
} from "@buildo/bento-design-system";
-import { ThemeConfig } from "../ThemeConfigurator/ThemeConfigurator";
import { ColorEditor } from "../ColorEditor/ColorEditor";
import { useTranslation } from "react-i18next";
import { useState } from "react";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
type InteractiveColor = ThemeConfig["colors"]["interactive"];
type BrandColors = ThemeConfig["colors"]["brand"];
diff --git a/packages/configuration-builder/src/ColorsSection/NeutralColor.tsx b/packages/configuration-builder/src/ColorsSection/NeutralColor.tsx
index bb3f7f9f7..3913f959b 100644
--- a/packages/configuration-builder/src/ColorsSection/NeutralColor.tsx
+++ b/packages/configuration-builder/src/ColorsSection/NeutralColor.tsx
@@ -1,10 +1,10 @@
import { useTranslation } from "react-i18next";
-import { ThemeConfig } from "../ThemeConfigurator/ThemeConfigurator";
import { Actions, Headline, Stack } from "@buildo/bento-design-system";
import { ColorEditor } from "../ColorEditor/ColorEditor";
import { ColorPresets } from "./ColorPresets";
import { HexColor } from "../utils/colorUtils";
import { defaultColorConfig } from "./defaultColor";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
type NeutralColor = ThemeConfig["colors"]["neutral"];
diff --git a/packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx b/packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx
index 3d96a6681..c985d71e6 100644
--- a/packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx
+++ b/packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx
@@ -1,31 +1,26 @@
-import { Button, Feedback, Inline, Stack } from "@buildo/bento-design-system";
+import { ButtonLink, Feedback, Inline, Stack } from "@buildo/bento-design-system";
import { useTranslation } from "react-i18next";
-import { IconConfetti } from "../Icons/IconConfetti";
+import { IconConfetti } from "../PhosphorIcons";
-type Props = {
- goToMyTheme: () => void;
- goToTypography: () => void;
-};
-
-export function SectionCompleted(props: Props) {
+export function SectionCompleted() {
const { t } = useTranslation();
return (
-
-
diff --git a/packages/configuration-builder/src/ColorsSection/SemanticColors.tsx b/packages/configuration-builder/src/ColorsSection/SemanticColors.tsx
index a82971830..091c9300e 100644
--- a/packages/configuration-builder/src/ColorsSection/SemanticColors.tsx
+++ b/packages/configuration-builder/src/ColorsSection/SemanticColors.tsx
@@ -1,10 +1,10 @@
import { useTranslation } from "react-i18next";
-import { ThemeConfig } from "../ThemeConfigurator/ThemeConfigurator";
import { Actions, Headline, Stack } from "@buildo/bento-design-system";
import { ColorEditor } from "../ColorEditor/ColorEditor";
import { ColorPresets } from "./ColorPresets";
import { HexColor } from "../utils/colorUtils";
import { defaultColorConfig } from "./defaultColor";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
type SemanticColors = ThemeConfig["colors"]["semantic"];
diff --git a/packages/configuration-builder/src/ConfiguratorSection/ConfiguratorSection.tsx b/packages/configuration-builder/src/ConfiguratorSection/ConfiguratorSection.tsx
index 82347dc22..42a052b91 100644
--- a/packages/configuration-builder/src/ConfiguratorSection/ConfiguratorSection.tsx
+++ b/packages/configuration-builder/src/ConfiguratorSection/ConfiguratorSection.tsx
@@ -18,11 +18,14 @@ type Props = {
export function ConfiguratorSection(props: Props) {
const { t } = useTranslation();
return (
-
+
{props.title}
{!props.endStep && }
diff --git a/packages/configuration-builder/src/ThemeConfigurator/ThemeConfigurator.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
similarity index 64%
rename from packages/configuration-builder/src/ThemeConfigurator/ThemeConfigurator.tsx
rename to packages/configuration-builder/src/ConfiguratorStatusContext.tsx
index a12228e41..a30c43bb3 100644
--- a/packages/configuration-builder/src/ThemeConfigurator/ThemeConfigurator.tsx
+++ b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -1,9 +1,8 @@
-import { useState } from "react";
-import { ColorConfig } from "../ColorEditor/ColorEditor";
-import { ColorsSection } from "../ColorsSection/ColorsSection";
-import { HexColor } from "../utils/colorUtils";
-import { defaultTokens } from "@buildo/bento-design-system";
-import { defaultColorConfig } from "../ColorsSection/defaultColor";
+import { createContext, useContext, useState } from "react";
+import { defaultColorConfig } from "./ColorsSection/defaultColor";
+import { Children, defaultTokens } from "@buildo/bento-design-system";
+import { HexColor } from "./utils/colorUtils";
+import { ColorConfig } from "./ColorEditor/ColorEditor";
type BrandColors =
| [ColorConfig]
@@ -36,8 +35,19 @@ export type ThemeConfig = {
};
};
-export function ThemeConfigurator() {
- const [themeConfig, setThemeConfig] = useState({
+export type ThemeSection = "colors";
+
+type ConfiguratorStatus = {
+ theme: ThemeConfig;
+ sections: { [key in ThemeSection]: boolean };
+ completeSection: (section: ThemeSection) => void;
+ setTheme: (newTheme: ThemeConfig) => void;
+};
+
+export const ConfiguratorStatusContext = createContext(null);
+
+export function ConfiguratorStatusProvider(props: { children: Children }) {
+ const [theme, setTheme] = useState({
colors: {
brand: [defaultColorConfig(defaultTokens.brandColor.brandPrimary as HexColor)],
interactive: defaultColorConfig(
@@ -67,11 +77,28 @@ export function ThemeConfigurator() {
},
});
+ const [sections, setSections] = useState({
+ colors: false,
+ });
+
return (
- setThemeConfig({ ...themeConfig, colors })}
- onComplete={() => {}}
- />
+ setTheme(newTheme),
+ sections,
+ completeSection: (section) => setSections({ ...sections, [section]: true }),
+ }}
+ >
+ {props.children}
+
);
}
+
+export function useConfiguratorStatusContext() {
+ const value = useContext(ConfiguratorStatusContext);
+ if (!value) {
+ throw new Error("Missing ConfiguratorStatusContext.Provider");
+ }
+ return value;
+}
diff --git a/packages/configuration-builder/src/Home.tsx b/packages/configuration-builder/src/Home.tsx
new file mode 100644
index 000000000..ff826b351
--- /dev/null
+++ b/packages/configuration-builder/src/Home.tsx
@@ -0,0 +1,38 @@
+import {
+ Body,
+ Columns,
+ Display,
+ Inline,
+ Stack,
+ Inset,
+ ButtonLink,
+} from "@buildo/bento-design-system";
+import { useTranslation } from "react-i18next";
+import Cover from "./assets/Cover.svg";
+
+export function Home() {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ {t("App.name")}
+ {t("App.description")}
+
+
+
+
+
+ 
+
+
+ );
+}
diff --git a/packages/configuration-builder/src/Icons/IconConfetti.ts b/packages/configuration-builder/src/Icons/IconConfetti.ts
deleted file mode 100644
index bfebad7e7..000000000
--- a/packages/configuration-builder/src/Icons/IconConfetti.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Confetti } from "@phosphor-icons/react";
-import { phosphorToBento } from "../utils/PhosphorIconWrapper";
-
-export const IconConfetti = phosphorToBento(Confetti);
diff --git a/packages/configuration-builder/src/Icons/IconEyedropper.ts b/packages/configuration-builder/src/Icons/IconEyedropper.ts
deleted file mode 100644
index 03aa1e37d..000000000
--- a/packages/configuration-builder/src/Icons/IconEyedropper.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Eyedropper } from "@phosphor-icons/react";
-import { phosphorToBento } from "../utils/PhosphorIconWrapper";
-
-export const IconEyedropper = phosphorToBento(Eyedropper);
diff --git a/packages/configuration-builder/src/MyTheme.tsx b/packages/configuration-builder/src/MyTheme.tsx
new file mode 100644
index 000000000..9e2d27484
--- /dev/null
+++ b/packages/configuration-builder/src/MyTheme.tsx
@@ -0,0 +1,209 @@
+import {
+ Body,
+ Box,
+ Button,
+ Card,
+ Children,
+ Headline,
+ Inline,
+ LocalizedString,
+ SprinklesFn,
+ Stack,
+ Title,
+} from "@buildo/bento-design-system";
+import { useTranslation } from "react-i18next";
+import { SectionCard } from "./SectionCard/SectionCard";
+import { useConfiguratorStatusContext } from "./ConfiguratorStatusContext";
+import { useNavigate } from "react-router-dom";
+import foundationsImg from "./assets/Foundations.svg";
+import configurationImg from "./assets/Configuration.svg";
+import exportImg from "./assets/Export.svg";
+import image1 from "./assets/1.svg";
+import image2 from "./assets/2.svg";
+import image3 from "./assets/3.svg";
+import {
+ IconFigmaLogo,
+ IconAtom,
+ IconTextAa,
+ IconSubtract,
+ IconCards,
+ IconLayout,
+ IconDiamond,
+ IconDiamondsFour,
+ IconSwatches,
+} from "./PhosphorIcons";
+
+const numberImages = [image1, image2, image3];
+
+type ColumnProps = {
+ title: LocalizedString;
+ description: LocalizedString;
+ background: Parameters[0]["background"];
+ image: string;
+ stepNumber: number;
+};
+
+function MainColumn(
+ props: ColumnProps & {
+ children: Children;
+ }
+) {
+ return (
+
+
+
+ 
+
+ 
+
+
+
+
+ {props.title}
+ {props.description}
+
+ {props.children}
+
+
+
+
+
+ );
+}
+
+export function MyTheme() {
+ const { t } = useTranslation();
+
+ const { sections } = useConfiguratorStatusContext();
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+ navigate("/theme/colors")}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("Theme.Export.Figma.title")}
+ {t("Theme.Export.Figma.description")}
+
+
+
+
+
+
+
+
+
+ {t("Theme.Export.React.title")}
+ {t("Theme.Export.React.description")}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/configuration-builder/src/PhosphorIcons.tsx b/packages/configuration-builder/src/PhosphorIcons.tsx
new file mode 100644
index 000000000..4cb46905b
--- /dev/null
+++ b/packages/configuration-builder/src/PhosphorIcons.tsx
@@ -0,0 +1,38 @@
+import { IconProps, svgIconProps } from "@buildo/bento-design-system";
+import {
+ Atom,
+ Cards,
+ FigmaLogo,
+ Subtract,
+ type Icon as PhosphorIcon,
+ TextAa,
+ CaretRight,
+ CheckCircle,
+ Confetti,
+ Diamond,
+ DiamondsFour,
+ Layout,
+ Eyedropper,
+ Swatches,
+} from "@phosphor-icons/react";
+
+function phosphorToBento(Icon: PhosphorIcon) {
+ return (props: IconProps) => {
+ const { viewBox, ...svgProps } = svgIconProps(props);
+ return ;
+ };
+}
+
+export const IconFigmaLogo = phosphorToBento(FigmaLogo);
+export const IconAtom = phosphorToBento(Atom);
+export const IconCards = phosphorToBento(Cards);
+export const IconCaretRight = phosphorToBento(CaretRight);
+export const IconCheckCircle = phosphorToBento(CheckCircle);
+export const IconConfetti = phosphorToBento(Confetti);
+export const IconDiamond = phosphorToBento(Diamond);
+export const IconDiamondsFour = phosphorToBento(DiamondsFour);
+export const IconEyedropper = phosphorToBento(Eyedropper);
+export const IconLayout = phosphorToBento(Layout);
+export const IconSubtract = phosphorToBento(Subtract);
+export const IconSwatches = phosphorToBento(Swatches);
+export const IconTextAa = phosphorToBento(TextAa);
diff --git a/packages/configuration-builder/src/SectionCard/SectionCard.tsx b/packages/configuration-builder/src/SectionCard/SectionCard.tsx
new file mode 100644
index 000000000..f59bc1859
--- /dev/null
+++ b/packages/configuration-builder/src/SectionCard/SectionCard.tsx
@@ -0,0 +1,86 @@
+import {
+ Body,
+ Box,
+ Card,
+ Children,
+ Column,
+ Columns,
+ IconProps,
+ LocalizedString,
+ Stack,
+ Title,
+} from "@buildo/bento-design-system";
+import { IconCaretRight, IconCheckCircle } from "../PhosphorIcons";
+import { match } from "ts-pattern";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+ name: LocalizedString;
+ description: LocalizedString;
+ icon: (props: IconProps) => Children;
+} & (
+ | {
+ disabled?: false;
+ onClick: () => void;
+ kind: "todo" | "done";
+ }
+ | {
+ disabled: true;
+ onClick?: never;
+ kind?: never;
+ }
+);
+
+export function SectionCard(props: Props) {
+ const { t } = useTranslation();
+ const icon = match(props.kind)
+ .with("todo", undefined, () =>
+ props.icon({ size: 40, color: props.disabled ? "secondary" : "primary" })
+ )
+ .with("done", () => )
+ .exhaustive();
+
+ return (
+
+
+
+ {icon}
+
+
+ {props.name}
+
+
+ {props.description}
+
+
+ {!props.disabled && (
+
+
+
+ )}
+
+ {props.disabled && (
+
+
+ {t("Theme.comingSoon")}
+
+
+ )}
+
+
+ );
+}
diff --git a/packages/configuration-builder/src/assets/1.svg b/packages/configuration-builder/src/assets/1.svg
new file mode 100644
index 000000000..38e70a51e
--- /dev/null
+++ b/packages/configuration-builder/src/assets/1.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/configuration-builder/src/assets/2.svg b/packages/configuration-builder/src/assets/2.svg
new file mode 100644
index 000000000..b0a5c6b4f
--- /dev/null
+++ b/packages/configuration-builder/src/assets/2.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/configuration-builder/src/assets/3.svg b/packages/configuration-builder/src/assets/3.svg
new file mode 100644
index 000000000..46fc91c12
--- /dev/null
+++ b/packages/configuration-builder/src/assets/3.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/configuration-builder/src/assets/Configuration.svg b/packages/configuration-builder/src/assets/Configuration.svg
new file mode 100644
index 000000000..e869a9a59
--- /dev/null
+++ b/packages/configuration-builder/src/assets/Configuration.svg
@@ -0,0 +1,77 @@
+
diff --git a/packages/configuration-builder/src/assets/Cover.svg b/packages/configuration-builder/src/assets/Cover.svg
new file mode 100644
index 000000000..377ded5db
--- /dev/null
+++ b/packages/configuration-builder/src/assets/Cover.svg
@@ -0,0 +1,128 @@
+
diff --git a/packages/configuration-builder/src/assets/Export.svg b/packages/configuration-builder/src/assets/Export.svg
new file mode 100644
index 000000000..796e1e076
--- /dev/null
+++ b/packages/configuration-builder/src/assets/Export.svg
@@ -0,0 +1,26 @@
+
diff --git a/packages/configuration-builder/src/assets/Foundations.svg b/packages/configuration-builder/src/assets/Foundations.svg
new file mode 100644
index 000000000..7639a43e0
--- /dev/null
+++ b/packages/configuration-builder/src/assets/Foundations.svg
@@ -0,0 +1,21 @@
+
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
index 874a74adf..08a1ae6ca 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -4,7 +4,36 @@
"Back": "Back",
"Cancel": "Cancel",
"App.name": "Design System Configurator",
+ "App.description": "In three simple steps, the configurator will guide you through the customization of your new design system.",
"App.bentoDS": "Bento Design System",
+ "Home.createTheme": "Create a theme",
+ "Theme.comingSoon": "Coming soon",
+ "Theme.Foundations.title": "Foundations",
+ "Theme.Foundations.description": "Define the colors, fonts, and shadows of your new design system.",
+ "Theme.Foundations.Colors.title": "Colors",
+ "Theme.Foundations.Colors.description": "Use our editor to create beautiful and functional palettes.",
+ "Theme.Foundations.Typography.title": "Typography",
+ "Theme.Foundations.Typography.description": "Set the typograpic scale by choosing a Google font or a custom one.",
+ "Theme.Foundations.Elevations.title": "Elevations",
+ "Theme.Foundations.Elevations.description": "Define the properties of the shadows cast by Bento DS elevations.",
+ "Theme.Foundations.Tokens.title": "Tokens",
+ "Theme.Foundations.Tokens.description": "Assign the colors from your palettes to the theme tokens.",
+ "Theme.Configuration.title": "Configuration",
+ "Theme.Configuration.description": "Set the padding, spacing, and border radius of your components and patterns.",
+ "Theme.Configuration.General.title": "General",
+ "Theme.Configuration.General.description": "Define common appearance rules for your components.",
+ "Theme.Configuration.Components.title": "Components",
+ "Theme.Configuration.Components.description": "Choose the design of your components as padding, spacing, or border radius.",
+ "Theme.Configuration.Patterns.title": "Patterns",
+ "Theme.Configuration.Patterns.description": "Design the appearance of complex components and templates.",
+ "Theme.Export.title": "Export",
+ "Theme.Export.description": "Now that all the settings are done, you are ready to set up the Figma and React libraries.",
+ "Theme.Export.Figma.title": "Figma library",
+ "Theme.Export.Figma.description": "Use the button below to copy the configuration JSON and paste it into the Figma plugin Bento DS Configurator.",
+ "Theme.Export.Figma.action": "Copy JSON",
+ "Theme.Export.React.title": "React library",
+ "Theme.Export.React.description": "Download the configuration file and use it to replace the default one inside the React library.",
+ "Theme.Export.React.action": "Download file",
"ColorEditor.referenceColor": "Reference Color",
"ColorEditor.lightnessInterpolation": "Lightness interpolation",
"ColorEditor.LightnessInterpolation.linear": "Linear",
diff --git a/packages/configuration-builder/src/main.css b/packages/configuration-builder/src/main.css
new file mode 100644
index 000000000..9b1fd8320
--- /dev/null
+++ b/packages/configuration-builder/src/main.css
@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+ height: 100vh;
+ overflow-y: hidden;
+}
diff --git a/packages/configuration-builder/src/main.tsx b/packages/configuration-builder/src/main.tsx
index 0996e3d95..a8fbe744c 100644
--- a/packages/configuration-builder/src/main.tsx
+++ b/packages/configuration-builder/src/main.tsx
@@ -1,17 +1,41 @@
import React from "react";
import ReactDOM from "react-dom/client";
-import App from "./App";
-import { BentoProvider } from "@buildo/bento-design-system";
+import { BentoProvider, LinkComponentProps } from "@buildo/bento-design-system";
import { defaultMessages } from "@buildo/bento-design-system/defaultMessages/en";
+import { Link } from "react-router-dom";
+import { App } from "./App";
+import { ConfiguratorStatusProvider } from "./ConfiguratorStatusContext";
import "./intl";
import "@buildo/bento-design-system/index.css";
import "@buildo/bento-design-system/defaultTheme.css";
+import "./main.css";
+import { sprinkles } from "./sprinkles.css";
+
+function LinkComponent({ href, ...props }: LinkComponentProps) {
+ return (
+
+ {props.children}
+
+ );
+}
+
+declare module "@buildo/bento-design-system" {
+ interface TypeOverrides {
+ SprinklesFn: typeof sprinkles;
+ }
+}
ReactDOM.createRoot(document.getElementById("root")!).render(
-
-
+
+
+
+
);
diff --git a/packages/configuration-builder/src/router.tsx b/packages/configuration-builder/src/router.tsx
new file mode 100644
index 000000000..6df5ffb20
--- /dev/null
+++ b/packages/configuration-builder/src/router.tsx
@@ -0,0 +1,23 @@
+import { createBrowserRouter } from "react-router-dom";
+import { MyTheme } from "./MyTheme";
+import { Home } from "./Home";
+import { ColorsSection } from "./ColorsSection/ColorsSection";
+
+export const router = createBrowserRouter([
+ {
+ path: "/",
+ element: ,
+ },
+ {
+ path: "/theme",
+ element: ,
+ },
+ {
+ path: "/theme/colors",
+ element: ,
+ },
+ {
+ path: "/theme/typography",
+ element: null,
+ },
+]);
diff --git a/packages/configuration-builder/src/sprinkles.css.ts b/packages/configuration-builder/src/sprinkles.css.ts
new file mode 100644
index 000000000..e994e3b57
--- /dev/null
+++ b/packages/configuration-builder/src/sprinkles.css.ts
@@ -0,0 +1,54 @@
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
+import {
+ unconditionalProperties,
+ unconditionalPropertiesShorthands,
+ responsiveProperties as bentoResponsiveProperties,
+ responsivePropertiesConditions,
+ responsivePropertiesDefaultCondition,
+ responsivePropertiesShorthands,
+ statusProperties as bentoStatusProperties,
+ statusPropertiesConditions,
+ statusPropertiesDefaultCondition,
+} from "@buildo/bento-design-system";
+
+const spaces = { ...bentoResponsiveProperties.gap, 120: "120px" };
+const backgrounds = {
+ ...bentoStatusProperties.background,
+ "linear-gradient-1": "linear-gradient(285deg, #E0D5F5 0%, #EFE9FA 100%)",
+ "linear-gradient-2": "linear-gradient(285deg, #DCE0FB 0%, #EDEFFD 100%)",
+ "linear-gradient-3": "linear-gradient(285deg, #CCE6FB 0%, #E4F2FD 100%)",
+};
+
+const responsiveProperties = {
+ ...bentoResponsiveProperties,
+ paddingTop: spaces,
+ paddingBottom: spaces,
+ paddingLeft: spaces,
+ paddingRight: spaces,
+ gap: spaces,
+};
+
+const statusProperties = {
+ ...bentoStatusProperties,
+ background: backgrounds,
+};
+
+const unconditionalStyles = defineProperties({
+ properties: unconditionalProperties,
+ shorthands: unconditionalPropertiesShorthands,
+});
+
+const responsiveStyles = defineProperties({
+ conditions: responsivePropertiesConditions,
+ defaultCondition: responsivePropertiesDefaultCondition,
+ properties: responsiveProperties,
+ shorthands: responsivePropertiesShorthands,
+});
+
+const statusStyles = defineProperties({
+ conditions: statusPropertiesConditions,
+ defaultCondition: statusPropertiesDefaultCondition,
+ properties: statusProperties,
+});
+
+export const sprinkles = createSprinkles(unconditionalStyles, responsiveStyles, statusStyles);
diff --git a/packages/configuration-builder/src/utils/PhosphorIconWrapper.tsx b/packages/configuration-builder/src/utils/PhosphorIconWrapper.tsx
deleted file mode 100644
index 29310ad45..000000000
--- a/packages/configuration-builder/src/utils/PhosphorIconWrapper.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { IconProps, svgIconProps } from "@buildo/bento-design-system";
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-
-export function phosphorToBento(Icon: PhosphorIcon) {
- return (props: IconProps) => {
- const { viewBox, ...svgProps } = svgIconProps(props);
- return ;
- };
-}
diff --git a/packages/configuration-builder/vite.config.ts b/packages/configuration-builder/vite.config.ts
index 5a33944a9..c8972c231 100644
--- a/packages/configuration-builder/vite.config.ts
+++ b/packages/configuration-builder/vite.config.ts
@@ -1,7 +1,9 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { checker } from "vite-plugin-checker";
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
-})
+ plugins: [react(), checker({ typescript: true }), vanillaExtractPlugin()],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b3adbf1a..d6b72ea04 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -293,6 +293,11 @@ importers:
'@types/react-dom': 18.2.7
'@typescript-eslint/eslint-plugin': 6.5.0
'@typescript-eslint/parser': 6.5.0
+ '@vanilla-extract/css': 1.12.0
+ '@vanilla-extract/dynamic': 2.0.3
+ '@vanilla-extract/recipes': 0.5.0
+ '@vanilla-extract/sprinkles': 1.6.1
+ '@vanilla-extract/vite-plugin': 3.8.2
'@vitejs/plugin-react': 4.0.4
eslint: 8.48.0
eslint-plugin-react-hooks: 4.6.0
@@ -301,20 +306,25 @@ importers:
react: 18.2.0
react-dom: 18.2.0
react-i18next: 12.3.1
- ts-pattern: 5.0.5
+ react-router-dom: ^6.15.0
+ ts-pattern: 3.3.5
typescript: 5.1.3
vite: 4.4.9
+ vite-plugin-checker: ^0.6.2
dependencies:
'@buildo/bento-design-system': link:../bento-design-system
'@phosphor-icons/react': 2.0.13_biqbaboplfbrettd7655fr4n2y
'@react-aria/i18n': 3.8.1_react@18.2.0
'@react-aria/numberfield': 3.7.0_biqbaboplfbrettd7655fr4n2y
'@react-stately/numberfield': 3.6.0_react@18.2.0
+ '@vanilla-extract/css': 1.12.0
+ '@vanilla-extract/recipes': 0.5.0_zd2pmj2rl4fq6dchynq6tm4lty
i18next: 22.5.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-i18next: 12.3.1_spyi3zqm3bqfobczid2f6jym6y
- ts-pattern: 5.0.5
+ react-router-dom: 6.15.0_biqbaboplfbrettd7655fr4n2y
+ ts-pattern: 3.3.5
devDependencies:
'@react-types/numberfield': 3.5.0_react@18.2.0
'@tsconfig/vite-react': 2.0.0
@@ -322,12 +332,16 @@ importers:
'@types/react-dom': 18.2.7
'@typescript-eslint/eslint-plugin': 6.5.0_zcnsnkqwyqryk5co7u7tcltrje
'@typescript-eslint/parser': 6.5.0_jkonsiqll5kf7uvjobvewtpypa
+ '@vanilla-extract/dynamic': 2.0.3
+ '@vanilla-extract/sprinkles': 1.6.1_zd2pmj2rl4fq6dchynq6tm4lty
+ '@vanilla-extract/vite-plugin': 3.8.2_vite@4.4.9
'@vitejs/plugin-react': 4.0.4_vite@4.4.9
eslint: 8.48.0
eslint-plugin-react-hooks: 4.6.0_eslint@8.48.0
eslint-plugin-react-refresh: 0.4.3_eslint@8.48.0
typescript: 5.1.3
vite: 4.4.9
+ vite-plugin-checker: 0.6.2_n6mu2ofuv5rkccc7cdbyivyvjq
packages/website:
specifiers:
@@ -6055,6 +6069,11 @@ packages:
react: 18.2.0
dev: false
+ /@remix-run/router/1.8.0:
+ resolution: {integrity: sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==}
+ engines: {node: '>=14.0.0'}
+ dev: false
+
/@rollup/pluginutils/5.0.4:
resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
engines: {node: '>=14.0.0'}
@@ -8409,6 +8428,21 @@ packages:
/@vanilla-extract/css-utils/0.1.3:
resolution: {integrity: sha512-PZAcHROlgtCUGI2y0JntdNwvPwCNyeVnkQu6KTYKdmxBbK3w72XJUmLFYapfaFfgami4I9CTLnrJTPdtmS3gpw==}
+ /@vanilla-extract/css/1.12.0:
+ resolution: {integrity: sha512-TEttZfnqTRtwgVYiBWQSGGUiVaYWReHp59DsavITEvh4TpJNifZFGhBznHx4wQFEsyio6xA513jps4tmqR6zmw==}
+ dependencies:
+ '@emotion/hash': 0.9.1
+ '@vanilla-extract/private': 1.0.3
+ ahocorasick: 1.0.2
+ chalk: 4.1.2
+ css-what: 6.1.0
+ cssesc: 3.0.0
+ csstype: 3.1.2
+ deep-object-diff: 1.1.9
+ deepmerge: 4.3.1
+ media-query-parser: 2.0.2
+ outdent: 0.8.0
+
/@vanilla-extract/css/1.13.0:
resolution: {integrity: sha512-JFFBXhnJrPlGqHBabagXqo5ghXw9mtV270ycIGyLDZG8NAK5eRwAYkMowAxuzK7wZSm67GnETWYB7b0AUmyttg==}
dependencies:
@@ -8428,7 +8462,6 @@ packages:
resolution: {integrity: sha512-Rglfw2gXAYiBzAQ4jgUG7rBgE2c88e/zcG27ZVoIqMHVq56wf2C1katGMm1yFMNBgzqM7oBNYzz4YOMzznydkg==}
dependencies:
'@vanilla-extract/private': 1.0.3
- dev: false
/@vanilla-extract/esbuild-plugin/2.3.0:
resolution: {integrity: sha512-YsBLRDWvbqj/Zep0UdbgI1FfHfXJhf4tHYbVr5oPbVIf53p736hx+V3Wggo9ScK8Eu0aWVavxg6OvPOUITxdqg==}
@@ -8494,6 +8527,14 @@ packages:
'@vanilla-extract/css': 1.13.0
dev: false
+ /@vanilla-extract/recipes/0.5.0_zd2pmj2rl4fq6dchynq6tm4lty:
+ resolution: {integrity: sha512-NfdZ8XyqCDG2RsO3FmYPALDMKg5045dRD97NbBb0Fog3LMDVXZxYgDOct5FAWob8U6W4GbhVpRZt1X9hNnH6fA==}
+ peerDependencies:
+ '@vanilla-extract/css': ^1.0.0
+ dependencies:
+ '@vanilla-extract/css': 1.12.0
+ dev: false
+
/@vanilla-extract/sprinkles/1.6.1_3qusp464cmatvw2qbjjzblbe54:
resolution: {integrity: sha512-N/RGKwGAAidBupZ436RpuweRQHEFGU+mvAqBo8PRMAjJEmHoPDttV8RObaMLrJHWLqvX+XUMinHUnD0hFRQISw==}
peerDependencies:
@@ -8501,6 +8542,36 @@ packages:
dependencies:
'@vanilla-extract/css': 1.13.0
+ /@vanilla-extract/sprinkles/1.6.1_zd2pmj2rl4fq6dchynq6tm4lty:
+ resolution: {integrity: sha512-N/RGKwGAAidBupZ436RpuweRQHEFGU+mvAqBo8PRMAjJEmHoPDttV8RObaMLrJHWLqvX+XUMinHUnD0hFRQISw==}
+ peerDependencies:
+ '@vanilla-extract/css': ^1.0.0
+ dependencies:
+ '@vanilla-extract/css': 1.12.0
+ dev: true
+
+ /@vanilla-extract/vite-plugin/3.8.2_vite@4.4.9:
+ resolution: {integrity: sha512-i0vpuBUoh10Obl0hJr0dWQa6M3Udu/irm4tnsg1lUze8DXTbv3ctHmVu/wrRZHKw1EzzW/v+nLoJJRvisApspQ==}
+ peerDependencies:
+ vite: ^2.2.3 || ^3.0.0 || ^4.0.3
+ dependencies:
+ '@vanilla-extract/integration': 6.2.1
+ outdent: 0.8.0
+ postcss: 8.4.29
+ postcss-load-config: 3.1.4_postcss@8.4.29
+ vite: 4.4.9
+ transitivePeerDependencies:
+ - '@types/node'
+ - less
+ - lightningcss
+ - sass
+ - stylus
+ - sugarss
+ - supports-color
+ - terser
+ - ts-node
+ dev: true
+
/@vanilla-extract/vite-plugin/3.9.0_vite@4.4.9:
resolution: {integrity: sha512-Q2HYAyEJ93Uy7GHQPPiP8SXwPMHGpd4d0YnrIQqB0YZccYbGJR/WFIln9Dmbzx2pdngQUoOfhwEg6kJF8sQrog==}
peerDependencies:
@@ -8972,6 +9043,13 @@ packages:
dependencies:
string-width: 4.2.3
+ /ansi-escapes/4.3.2:
+ resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+ engines: {node: '>=8'}
+ dependencies:
+ type-fest: 0.21.3
+ dev: true
+
/ansi-escapes/5.0.0:
resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
engines: {node: '>=12'}
@@ -14029,7 +14107,6 @@ packages:
/lodash.pick/4.4.0:
resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
- dev: false
/lodash.sortby/4.7.0:
resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
@@ -16528,6 +16605,19 @@ packages:
tiny-invariant: 1.3.1
tiny-warning: 1.0.3
+ /react-router-dom/6.15.0_biqbaboplfbrettd7655fr4n2y:
+ resolution: {integrity: sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==}
+ engines: {node: '>=14.0.0'}
+ peerDependencies:
+ react: '>=16.8 || 18'
+ react-dom: '>=16.8 || 18'
+ dependencies:
+ '@remix-run/router': 1.8.0
+ react: 18.2.0
+ react-dom: 18.2.0_react@18.2.0
+ react-router: 6.15.0_react@18.2.0
+ dev: false
+
/react-router/5.3.4_react@18.2.0:
resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==}
peerDependencies:
@@ -16544,6 +16634,16 @@ packages:
tiny-invariant: 1.3.1
tiny-warning: 1.0.3
+ /react-router/6.15.0_react@18.2.0:
+ resolution: {integrity: sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==}
+ engines: {node: '>=14.0.0'}
+ peerDependencies:
+ react: '>=16.8 || 18'
+ dependencies:
+ '@remix-run/router': 1.8.0
+ react: 18.2.0
+ dev: false
+
/react-select/5.7.4_qzycrpzqvmvb7wd2jdibmpq2cy:
resolution: {integrity: sha512-NhuE56X+p9QDFh4BgeygHFIvJJszO1i1KSkg/JPcIJrbovyRtI+GuOEa4XzFCEpZRAEoEI8u/cAHK+jG/PgUzQ==}
peerDependencies:
@@ -18318,10 +18418,6 @@ packages:
resolution: {integrity: sha512-LD+wFR/RNckk1DrKV0LTH4KIT9wRqnnOjtEf77ovhKcVi8gf83Uf6U7OdywEua6KD9SbHadUdfolayfIUiPxzw==}
dev: false
- /ts-pattern/5.0.5:
- resolution: {integrity: sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA==}
- dev: false
-
/tsconfig-paths/3.14.2:
resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
dependencies:
@@ -18488,6 +18584,11 @@ packages:
resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
engines: {node: '>=10'}
+ /type-fest/0.21.3:
+ resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+ engines: {node: '>=10'}
+ dev: true
+
/type-fest/0.6.0:
resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
engines: {node: '>=8'}
@@ -19069,6 +19170,59 @@ packages:
- terser
dev: true
+ /vite-plugin-checker/0.6.2_n6mu2ofuv5rkccc7cdbyivyvjq:
+ resolution: {integrity: sha512-YvvvQ+IjY09BX7Ab+1pjxkELQsBd4rPhWNw8WLBeFVxu/E7O+n6VYAqNsKdK/a2luFlX/sMpoWdGFfg4HvwdJQ==}
+ engines: {node: '>=14.16'}
+ peerDependencies:
+ eslint: '>=7'
+ meow: ^9.0.0
+ optionator: ^0.9.1
+ stylelint: '>=13'
+ typescript: '*'
+ vite: '>=2.0.0'
+ vls: '*'
+ vti: '*'
+ vue-tsc: '>=1.3.9'
+ peerDependenciesMeta:
+ eslint:
+ optional: true
+ meow:
+ optional: true
+ optionator:
+ optional: true
+ stylelint:
+ optional: true
+ typescript:
+ optional: true
+ vls:
+ optional: true
+ vti:
+ optional: true
+ vue-tsc:
+ optional: true
+ dependencies:
+ '@babel/code-frame': 7.22.13
+ ansi-escapes: 4.3.2
+ chalk: 4.1.2
+ chokidar: 3.5.3
+ commander: 8.3.0
+ eslint: 8.48.0
+ fast-glob: 3.3.0
+ fs-extra: 11.1.1
+ lodash.debounce: 4.0.8
+ lodash.pick: 4.4.0
+ npm-run-path: 4.0.1
+ semver: 7.5.4
+ strip-ansi: 6.0.1
+ tiny-invariant: 1.3.1
+ typescript: 5.1.3
+ vite: 4.4.9
+ vscode-languageclient: 7.0.0
+ vscode-languageserver: 7.0.0
+ vscode-languageserver-textdocument: 1.0.8
+ vscode-uri: 3.0.7
+ dev: true
+
/vite/4.4.9:
resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
engines: {node: ^14.18.0 || >=16.0.0}
@@ -19215,6 +19369,46 @@ packages:
engines: {node: '>=0.10.0'}
dev: false
+ /vscode-jsonrpc/6.0.0:
+ resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==}
+ engines: {node: '>=8.0.0 || >=10.0.0'}
+ dev: true
+
+ /vscode-languageclient/7.0.0:
+ resolution: {integrity: sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==}
+ engines: {vscode: ^1.52.0}
+ dependencies:
+ minimatch: 3.1.2
+ semver: 7.5.4
+ vscode-languageserver-protocol: 3.16.0
+ dev: true
+
+ /vscode-languageserver-protocol/3.16.0:
+ resolution: {integrity: sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==}
+ dependencies:
+ vscode-jsonrpc: 6.0.0
+ vscode-languageserver-types: 3.16.0
+ dev: true
+
+ /vscode-languageserver-textdocument/1.0.8:
+ resolution: {integrity: sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==}
+ dev: true
+
+ /vscode-languageserver-types/3.16.0:
+ resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==}
+ dev: true
+
+ /vscode-languageserver/7.0.0:
+ resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==}
+ hasBin: true
+ dependencies:
+ vscode-languageserver-protocol: 3.16.0
+ dev: true
+
+ /vscode-uri/3.0.7:
+ resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
+ dev: true
+
/w3c-xmlserializer/4.0.0:
resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
engines: {node: '>=14'}