Update to RAC 1.4.0, add new components in there + update storybook

packages/components/package.json

@@ -116,11 +116,11 @@
     "vitest-axe": "^0.1.0"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.22.0",
-    "@react-spectrum/utils": "^3.11.1",
+    "@react-aria/utils": "^3.25.3",
+    "@react-spectrum/utils": "^3.11.11",
     "@storybook/test": "^8.0.4",
-    "clsx": "^2.0.0",
-    "react-aria-components": "^1.2.0"
+    "clsx": "^2.1.1",
+    "react-aria-components": "^1.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

packages/components/src/components/ColorArea/ColorArea.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ColorArea } from './ColorArea';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorArea.css';
+
+const meta = {
+  component: ColorArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorArea {...args} />,
+};
+
+Default.args = {
+  defaultValue: 'hsl(30, 100%, 50%)',
+};

packages/components/src/components/ColorArea/ColorArea.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {
+  ColorArea as RACColorArea,
+  ColorAreaProps,
+  ColorThumb,
+} from 'react-aria-components';
+
+export function ColorArea(props: ColorAreaProps) {
+  return (
+    <RACColorArea {...props}>
+      <ColorThumb />
+    </RACColorArea>
+  );
+}

packages/components/src/components/ColorField/ColorField.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ColorField } from './ColorField';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorField.css';
+
+const meta = {
+  component: ColorField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorField {...args} />,
+};
+
+Default.args = {
+  label: 'Color',
+};

packages/components/src/components/ColorField/ColorField.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {
+  ColorField as RACColorField,
+  ColorFieldProps as RACColorFieldProps,
+  FieldError,
+  Input,
+  Label,
+  Text,
+  ValidationResult,
+} from 'react-aria-components';
+
+export interface ColorFieldProps extends RACColorFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+}
+
+export function ColorField({
+  label,
+  description,
+  errorMessage,
+  ...props
+}: ColorFieldProps) {
+  return (
+    <RACColorField {...props}>
+      {label && <Label>{label}</Label>}
+      <Input />
+      {description && <Text slot="description">{description}</Text>}
+      <FieldError>{errorMessage}</FieldError>
+    </RACColorField>
+  );
+}

packages/components/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ColorPicker } from './ColorPicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorPicker.css';
+
+const meta = {
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorPicker {...args} />,
+};
+
+Default.args = {
+  label: 'Fill color',
+  defaultValue: '#f00',
+};

packages/components/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {
+  Button,
+  ColorPicker as RACColorPicker,
+  ColorPickerProps as RACColorPickerProps,
+  Dialog,
+  DialogTrigger,
+  Popover,
+} from 'react-aria-components';
+import { ColorSwatch } from '../ColorSwatch/ColorSwatch';
+import { ColorSlider } from '../ColorSlider/ColorSlider';
+import { ColorArea } from '../ColorArea/ColorArea';
+import { ColorField } from '../ColorField/ColorField';
+
+export interface ColorPickerProps extends RACColorPickerProps {
+  label?: string;
+  children?: React.ReactNode;
+}
+
+export function ColorPicker({ label, children, ...props }: ColorPickerProps) {
+  return (
+    <RACColorPicker {...props}>
+      <DialogTrigger>
+        <Button className="color-picker">
+          <ColorSwatch />
+          <span>{label}</span>
+        </Button>
+        <Popover placement="bottom start">
+          <Dialog className="color-picker-dialog">
+            {children || (
+              <>
+                <ColorArea
+                  colorSpace="hsb"
+                  xChannel="saturation"
+                  yChannel="brightness"
+                />
+                <ColorSlider colorSpace="hsb" channel="hue" />
+                <ColorField label="Hex" />
+              </>
+            )}
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+    </RACColorPicker>
+  );
+}

packages/components/src/components/ColorSlider/ColorSlider.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ColorSlider } from './ColorSlider';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorSlider.css';
+
+const meta = {
+  component: ColorSlider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorSlider {...args} />,
+};
+
+Default.args = {
+  label: 'Red Opacity',
+  defaultValue: '#f00',
+  channel: 'alpha',
+};

packages/components/src/components/ColorSlider/ColorSlider.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {
+  ColorSlider as RACColorSlider,
+  ColorSliderProps as RACColorSliderProps,
+  ColorThumb,
+  Label,
+  SliderOutput,
+  SliderTrack,
+} from 'react-aria-components';
+
+export interface ColorSliderProps extends RACColorSliderProps {
+  label?: string;
+}
+
+export function ColorSlider({ label, ...props }: ColorSliderProps) {
+  return (
+    <RACColorSlider {...props}>
+      <Label>{label}</Label>
+      <SliderOutput />
+      <SliderTrack
+        style={({ defaultStyle }) => ({
+          background: `${defaultStyle.background},
+            repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
+        })}
+      >
+        <ColorThumb />
+      </SliderTrack>
+    </RACColorSlider>
+  );
+}

packages/components/src/components/ColorSwatch/ColorSwatch.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ColorSwatch } from './ColorSwatch';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorSwatch.css';
+
+const meta = {
+  component: ColorSwatch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorSwatch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorSwatch {...args} />,
+};
+
+Default.args = {
+  color: '#f00a',
+};

packages/components/src/components/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import {
+  ColorSwatch as RACColorSwatch,
+  ColorSwatchProps,
+} from 'react-aria-components';
+
+export function ColorSwatch(props: ColorSwatchProps) {
+  return (
+    <RACColorSwatch
+      {...props}
+      style={({ color }) => ({
+        background: `linear-gradient(${color}, ${color}),
+          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
+      })}
+    />
+  );
+}

packages/components/src/components/ColorSwatchPicker/ColorSwatchPicker.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ColorSwatchPicker, ColorSwatchPickerItem } from './ColorSwatchPicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorSwatchPicker.css';
+
+const meta = {
+  component: ColorSwatchPicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorSwatchPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => (
+    <ColorSwatchPicker {...args}>
+      <ColorSwatchPickerItem color="#A00" />
+      <ColorSwatchPickerItem color="#f80" />
+      <ColorSwatchPickerItem color="#080" />
+      <ColorSwatchPickerItem color="#08f" />
+      <ColorSwatchPickerItem color="#088" />
+      <ColorSwatchPickerItem color="#008" />
+    </ColorSwatchPicker>
+  ),
+};

packages/components/src/components/ColorSwatchPicker/ColorSwatchPicker.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  ColorSwatchPicker as AriaColorSwatchPicker,
+  ColorSwatchPickerItem as AriaColorSwatchPickerItem,
+  ColorSwatchPickerItemProps,
+  ColorSwatchPickerProps,
+} from 'react-aria-components';
+
+import { ColorSwatch } from '../ColorSwatch/ColorSwatch';
+
+export function ColorSwatchPicker({
+  children,
+  ...props
+}: ColorSwatchPickerProps) {
+  return <AriaColorSwatchPicker {...props}>{children}</AriaColorSwatchPicker>;
+}
+
+export { ColorSwatchPicker as MyColorSwatchPicker };
+
+export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
+  return (
+    <AriaColorSwatchPickerItem {...props}>
+      <ColorSwatch />
+    </AriaColorSwatchPickerItem>
+  );
+}

packages/components/src/components/ColorWheel/ColorWheel.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ColorWheel } from './ColorWheel';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '../../styles/basic/ColorWheel.css';
+
+const meta = {
+  component: ColorWheel,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorWheel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: any) => <ColorWheel {...args} />,
+};
+
+Default.args = {
+  defaultValue: 'hsl(30, 100%, 50%)',
+};

packages/components/src/components/ColorWheel/ColorWheel.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {
+  ColorThumb,
+  ColorWheel as AriaColorWheel,
+  ColorWheelProps as AriaColorWheelProps,
+  ColorWheelTrack,
+} from 'react-aria-components';
+
+export interface ColorWheelProps
+  extends Omit<AriaColorWheelProps, 'outerRadius' | 'innerRadius'> {}
+
+export function ColorWheel(props: ColorWheelProps) {
+  return (
+    <AriaColorWheel {...props} outerRadius={100} innerRadius={74}>
+      <ColorWheelTrack />
+      <ColorThumb />
+    </AriaColorWheel>
+  );
+}
+
+export { ColorWheel as MyColorWheel };