From 4547b3e97c3d75820771b51f706e498f6f9ee1d6 Mon Sep 17 00:00:00 2001 From: Dennis Torres Date: Fri, 26 Jul 2024 10:39:33 -0400 Subject: [PATCH 01/25] Start creating Slider component(s) --- .changeset/pink-dancers-run.md | 6 + .../src/components/slider/index.stories.tsx | 104 ++++++++++++++++++ packages/ui/src/components/slider.tsx | 61 ++++++++++ 3 files changed, 171 insertions(+) create mode 100644 .changeset/pink-dancers-run.md create mode 100644 packages/storybook/src/components/slider/index.stories.tsx create mode 100644 packages/ui/src/components/slider.tsx diff --git a/.changeset/pink-dancers-run.md b/.changeset/pink-dancers-run.md new file mode 100644 index 00000000..42c6f278 --- /dev/null +++ b/.changeset/pink-dancers-run.md @@ -0,0 +1,6 @@ +--- +"@spear-ai/storybook": minor +"@spear-ai/ui": minor +--- + +Created Slider component(s). diff --git a/packages/storybook/src/components/slider/index.stories.tsx b/packages/storybook/src/components/slider/index.stories.tsx new file mode 100644 index 00000000..8773932f --- /dev/null +++ b/packages/storybook/src/components/slider/index.stories.tsx @@ -0,0 +1,104 @@ +import { Slider, SliderDescription, SliderLabel } from "@spear-ai/ui/components/slider"; +import type { Meta, StoryObj } from "@storybook/react"; +import { Form } from "react-aria-components"; +import { useIntl } from "react-intl"; + +const PreviewSlider = (properties: { + hasLabel: boolean; + hasLabelDescription: boolean; + hasValence: boolean; + isDisabled: boolean; + isSquished: boolean; + maximumValue: number; + minimumValue: number; + orientation: "horizontal" | "vertical"; + originLabel: string; + originValue: number; + variant: "soft" | "surface"; +}) => { + const { + hasLabel, + hasLabelDescription, + hasValence, + isDisabled, + isSquished, + maximumValue, + minimumValue, + orientation, + // OriginLabel, + originValue, + variant, + } = properties; + const intl = useIntl(); + + return ( +
+
+ + {hasLabel ? ( + + {intl.formatMessage({ + defaultMessage: "Volume", + id: "y867Vs", + })} + + ) : null} + {hasLabel && hasLabelDescription ? ( + + {intl.formatMessage({ + defaultMessage: "How loud until the neighbors complain.", + id: "bEWLDO", + })} + + ) : null} + +
+
+ ); +}; + +const meta = { + component: PreviewSlider, +} satisfies Meta; + +type Story = StoryObj; + +export const Standard: Story = { + args: { + hasLabel: true, + hasLabelDescription: true, + hasValence: false, + isDisabled: false, + isSquished: false, + maximumValue: 100, + minimumValue: 0, + orientation: "horizontal", + originLabel: "", + originValue: 0, + variant: "surface", + }, + argTypes: { + orientation: { + control: { type: "select" }, + options: ["horizontal", "vertical"], + }, + variant: { + control: { type: "select" }, + options: ["soft", "surface"], + }, + }, + parameters: { + layout: "centered", + }, +}; + +export default meta; diff --git a/packages/ui/src/components/slider.tsx b/packages/ui/src/components/slider.tsx new file mode 100644 index 00000000..f9564b0d --- /dev/null +++ b/packages/ui/src/components/slider.tsx @@ -0,0 +1,61 @@ +import { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes } from "react"; +import { + CheckboxGroup as CheckboxGroupPrimitive, + Label as LabelPrimitive, + Slider as SliderPrimitive, +} from "react-aria-components"; +import { cx } from "@/helpers/cx"; + +export const Slider = forwardRef< + ElementRef, + ComponentPropsWithoutRef & { + className?: string | undefined; + /** The Slider color. */ + color?: "neutral" | "primary" | undefined; + /** Whether the Slider range is negative below the origin or positive above the origin. */ + hasValence?: boolean | undefined; + /** The origin of the Slider track range. */ + originValue?: number | undefined; + /** The Slider variant. */ + variant?: "soft" | "surface" | undefined; + } +>(({ className, color = "neutral", hasValence = false, variant = "surface", ...properties }, reference) => { + const mergedClassName = cx("group", className); + return ( + + ); +}); + +Slider.displayName = "Slider"; + +export const SliderLabel = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, ...properties }, reference) => { + const mergedClassName = cx( + "text-neutral-12 group-disabled:text-neutral-11 mb-2 block select-none text-base/6 sm:text-sm/6", + className, + ); + return ; +}); + +SliderLabel.displayName = "SliderLabel"; + +export const SliderDescription = forwardRef>( + ({ className, ...properties }, reference) => { + const mergedClassName = cx( + "text-neutral-11 group-disabled:text-neutral-9 -mt-1 mb-2 text-base/6 sm:text-sm/6", + className, + ); + return

; + }, +); + +SliderDescription.displayName = "SliderDescription"; From 074e18c363758edf833745d5e8e8dc88e5d3e1a3 Mon Sep 17 00:00:00 2001 From: Dennis Torres Date: Fri, 26 Jul 2024 10:43:53 -0400 Subject: [PATCH 02/25] WIP --- packages/ui/src/components/slider.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/ui/src/components/slider.tsx b/packages/ui/src/components/slider.tsx index f9564b0d..ec06942f 100644 --- a/packages/ui/src/components/slider.tsx +++ b/packages/ui/src/components/slider.tsx @@ -1,9 +1,5 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes } from "react"; -import { - CheckboxGroup as CheckboxGroupPrimitive, - Label as LabelPrimitive, - Slider as SliderPrimitive, -} from "react-aria-components"; +import { Label as LabelPrimitive, Slider as SliderPrimitive } from "react-aria-components"; import { cx } from "@/helpers/cx"; export const Slider = forwardRef< From dfc2bc526a0b1bd3c3ba5e67a18b5b1017803cfc Mon Sep 17 00:00:00 2001 From: Dennis Torres Date: Fri, 26 Jul 2024 10:51:32 -0400 Subject: [PATCH 03/25] Fix build inputs --- turbo.json | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/turbo.json b/turbo.json index bdfe6799..ec8cee25 100644 --- a/turbo.json +++ b/turbo.json @@ -13,7 +13,16 @@ "//#typescript:check": {}, "build": { "dependsOn": ["^build"], - "inputs": [".env", ".env.local", ".env.production", ".env.production.local"], + "inputs": [ + ".env", + ".env.local", + ".env.production", + ".env.production.local", + "**/*.cjs", + "**/*.js", + "**/*.ts", + "**/*.tsx" + ], "outputs": ["build/**", "dist/**", "storybook-static/**"] }, "check": { From d22c259b8ad4d815e7e05ea43104b9b0bf5af9fc Mon Sep 17 00:00:00 2001 From: Dennis Torres Date: Wed, 14 Aug 2024 16:19:45 -0400 Subject: [PATCH 04/25] WIP --- packages/storybook/src/app/providers.tsx | 9 ++- .../src/components/dialog/index.stories.tsx | 6 +- .../src/components/slider/index.stories.tsx | 70 +++++++++++++---- packages/ui/src/components/slider.tsx | 78 ++++++++++++++++++- 4 files changed, 137 insertions(+), 26 deletions(-) diff --git a/packages/storybook/src/app/providers.tsx b/packages/storybook/src/app/providers.tsx index 48506020..de4eaf51 100644 --- a/packages/storybook/src/app/providers.tsx +++ b/packages/storybook/src/app/providers.tsx @@ -3,6 +3,7 @@ import { usePreviousDistinct } from "@react-hookz/web"; import { ThemeProvider } from "next-themes"; import { ReactNode, useEffect } from "react"; +import { I18nProvider } from "react-aria-components"; import { IntlProvider, ReactIntlErrorCode } from "react-intl"; import { StorybookProvider } from "@/components/storybook-provider/storybook-provider"; @@ -38,9 +39,11 @@ export const AppProviders = (properties: { } }} > - - {children} - + + + {children} + + ); diff --git a/packages/storybook/src/components/dialog/index.stories.tsx b/packages/storybook/src/components/dialog/index.stories.tsx index 2154e349..1c7bb055 100644 --- a/packages/storybook/src/components/dialog/index.stories.tsx +++ b/packages/storybook/src/components/dialog/index.stories.tsx @@ -26,7 +26,7 @@ const PreviewDialog = (properties: { return ( -