wip

package.json

@@ -23,6 +23,8 @@
     "@heroicons/react": "2.1.5",
     "@internationalized/number": "3.5.3",
     "@maplibre/maplibre-gl-style-spec": "20.3.1",
+    "@react-aria/color": "3.0.0-rc.2",
+    "@react-stately/color": "3.7.2",
     "@tanstack/react-query": "5.56.2",
     "maplibre-gl": "4.7.0",
     "react": "19.0.0-rc-206df66e-20240912",

plop-templates/component/Component.tsx.hbs

@@ -1,10 +1,10 @@
-import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import { cn } from '~/utils/tailwindUtil';
 
-export type {{pascalCase name}}Props = {} & ComponentPropsWithoutRef<'div'>;
+export type {{pascalCase name}}Props = {} & ComponentProps<'div'>;
 
-export const {{pascalCase name}}:FC<{{pascalCase name}}Props> = ({ className, children, ...props }) => {
+export const {{pascalCase name}}: FC<{{pascalCase name}}Props> = ({ className, children, ...props }) => {
 
   return (
     <div {...props} className={cn('', className)}>

src/components/common/ColorField/ColorField.stories.tsx

@@ -0,0 +1,14 @@
+import { ColorField } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: ColorField,
+} satisfies Meta<typeof ColorField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/common/ColorField/ColorField.test.tsx

@@ -0,0 +1,16 @@
+import { describe } from 'vitest';
+import { render } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+
+import * as Stories from './ColorField.stories';
+
+const { Default } = composeStories(Stories);
+
+describe('Component: ColorField', () => {
+  describe('Snapshot', () => {
+    it('Default', () => {
+      const { asFragment } = render(<Default />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

src/components/common/ColorField/ColorField.tsx

@@ -0,0 +1,54 @@
+import type { FC } from 'react';
+import { useRef } from 'react';
+
+import type { AriaColorFieldProps } from '@react-aria/color';
+import { useColorField } from '@react-aria/color';
+import { useColorFieldState } from '@react-stately/color';
+
+import { cn } from '~/utils/tailwindUtil';
+
+export type ColorFieldProps = {
+  className?: string;
+} & AriaColorFieldProps;
+
+export const ColorField: FC<ColorFieldProps> = ({ className, label, ...props }) => {
+  const state = useColorFieldState(props);
+  const ref = useRef(null);
+  const {
+    labelProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+  } = useColorField(props, state, ref);
+  return (
+    <div className={cn('flex flex-row items-center justify-between', className)}>
+      <label
+        {...labelProps}
+        className={cn('text-sm font-semibold text-gray-600', labelProps.className)}
+      >
+        {label}
+      </label>
+      <div
+        className={
+          'rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0'
+        }
+      >
+        <input {...inputProps} ref={ref} className={cn('', inputProps.className)} />
+      </div>
+      {props.description && (
+        <div {...descriptionProps} className={cn('text-xs', descriptionProps.className)}>
+          {props.description}
+        </div>
+      )}
+      {isInvalid && (
+        <div {...errorMessageProps} className={cn('text-red text-xs', errorMessageProps.className)}>
+          {validationErrors.join(' ')}
+        </div>
+      )}
+    </div>
+  );
+};
+
+ColorField.displayName = 'ColorField';

src/components/common/ColorField/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,14 @@
+import { ColorPicker } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: ColorPicker,
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/common/ColorField/ColorPicker/ColorPicker.test.tsx

@@ -0,0 +1,16 @@
+import { describe } from 'vitest';
+import { render } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+
+import * as Stories from './ColorPicker.stories';
+
+const { Default } = composeStories(Stories);
+
+describe('Component: ColorPicker', () => {
+  describe('Snapshot', () => {
+    it('Default', () => {
+      const { asFragment } = render(<Default />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

src/components/common/ColorField/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from 'react';
+
+import { cn } from '~/utils/tailwindUtil';
+
+export type ColorPickerProps = {} & ComponentProps<'div'>;
+
+export const ColorPicker: FC<ColorPickerProps> = ({ className, children, ...props }) => {
+
+  return (
+    <div {...props} className={cn('', className)}>
+      {children}
+    </div>
+  );
+};
+
+ColorPicker.displayName = 'ColorPicker';

src/components/common/ColorField/ColorPicker/index.ts

@@ -0,0 +1 @@
+export * from './ColorPicker';

src/components/common/ColorField/ColorSwatch/ColorSwatch.stories.tsx

@@ -0,0 +1,14 @@
+import { ColorSwatch } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: ColorSwatch,
+} satisfies Meta<typeof ColorSwatch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/common/ColorField/ColorSwatch/ColorSwatch.test.tsx

@@ -0,0 +1,16 @@
+import { describe } from 'vitest';
+import { render } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+
+import * as Stories from './ColorSwatch.stories';
+
+const { Default } = composeStories(Stories);
+
+describe('Component: ColorSwatch', () => {
+  describe('Snapshot', () => {
+    it('Default', () => {
+      const { asFragment } = render(<Default />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

src/components/common/ColorField/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from 'react';
+
+import { cn } from '~/utils/tailwindUtil';
+
+export type ColorSwatchProps = {} & ComponentProps<'div'>;
+
+export const ColorSwatch: FC<ColorSwatchProps> = ({ className, children, ...props }) => {
+
+  return (
+    <div {...props} className={cn('', className)}>
+      {children}
+    </div>
+  );
+};
+
+ColorSwatch.displayName = 'ColorSwatch';

src/components/common/ColorField/ColorSwatch/index.ts

@@ -0,0 +1 @@
+export * from './ColorSwatch';

src/components/common/ColorField/index.ts

@@ -0,0 +1 @@
+export * from './ColorField';

src/components/common/NumberField/NumberField.stories.tsx

@@ -0,0 +1,14 @@
+import { NumberField } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: NumberField,
+} satisfies Meta<typeof NumberField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/common/NumberField/NumberField.test.tsx

@@ -0,0 +1,16 @@
+import { describe } from 'vitest';
+import { render } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+
+import * as Stories from './NumberField.stories';
+
+const { Default } = composeStories(Stories);
+
+describe('Component: NumberField', () => {
+  describe('Snapshot', () => {
+    it('Default', () => {
+      const { asFragment } = render(<Default />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});