✨ feat: Add ColorSwatches

Author: canisminor1990

src/ColorSwatches/demos/index.tsx

@@ -0,0 +1,93 @@
+import { ColorSwatches, type ColorSwatchesProps } from '@lobehub/ui';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
+import { useTheme } from 'antd-style';
+
+export default () => {
+  const theme = useTheme();
+  const store = useCreateStore();
+
+  const controls: ColorSwatchesProps | any = useControls(
+    {
+      enableColorPicker: false,
+      enableColorSwatches: true,
+      gap: {
+        step: 1,
+        value: 4,
+      },
+      shape: {
+        options: ['circle', 'square'],
+        value: 'circle',
+      },
+      size: {
+        step: 1,
+        value: 24,
+      },
+    },
+    {
+      store,
+    },
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ColorSwatches
+        colors={[
+          {
+            color: '',
+            label: 'Default',
+          },
+          {
+            color: theme.red,
+            label: 'Red',
+          },
+          {
+            color: theme.orange,
+            label: 'Orange',
+          },
+          {
+            color: theme.gold,
+            label: 'Gold',
+          },
+          {
+            color: theme.yellow,
+            label: 'Yellow',
+          },
+          {
+            color: theme.lime,
+            label: 'Lime',
+          },
+          {
+            color: theme.green,
+            label: 'Green',
+          },
+          {
+            color: theme.cyan,
+            label: 'Cyan',
+          },
+          {
+            color: theme.blue,
+            label: 'Blue',
+          },
+          {
+            color: theme.geekblue,
+            namlabele: 'Geekblue',
+          },
+          {
+            color: theme.purple,
+            label: 'Purple',
+          },
+          {
+            color: theme.magenta,
+            label: 'Magenta',
+          },
+          {
+            color: theme.volcano,
+            label: 'Volcano',
+          },
+        ]}
+        onChange={(color) => console.log(color)}
+        {...controls}
+      />
+    </StoryBook>
+  );
+};

src/Swatches/index.md renamed to src/ColorSwatches/index.md

@@ -1,13 +1,13 @@
 ---
 nav: Components
 group: Data Entry
-title: Swatches
+title: ColorSwatches
 description: The Swatches component is a memoized React component that displays a list of color swatches
 ---
 
 ## Default
 
-<code src="./demos/index.tsx" center></code>
+<code src="./demos/index.tsx" nopadding></code>
 
 ## APIs
 

src/ColorSwatches/index.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { ColorPicker } from 'antd';
+import { CheckIcon } from 'lucide-react';
+import { readableColor, rgba } from 'polished';
+import { memo } from 'react';
+import { Center, Flexbox, FlexboxProps } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+import Icon from '@/Icon';
+import Tooltip from '@/Tooltip';
+
+import { useStyles } from './style';
+
+interface ColorItem {
+  color: string;
+  label: string;
+}
+
+export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
+  colors: ColorItem[];
+  defaultValue?: string;
+  enableColorPicker?: boolean;
+  enableColorSwatches?: boolean;
+  onChange?: (color?: string) => void;
+  shape?: 'circle' | 'square';
+  size?: number;
+  texts: {
+    custom: string;
+    presets: string;
+  };
+  value?: string;
+}
+
+const ColorSwatches = memo<ColorSwatchesProps>(
+  ({
+    enableColorPicker,
+    enableColorSwatches = true,
+    defaultValue,
+    value,
+    style,
+    colors,
+    onChange,
+    size = 24,
+    shape = 'circle',
+    texts,
+    ...rest
+  }) => {
+    const [active, setActive] = useMergeState(defaultValue, {
+      defaultValue,
+      onChange,
+      value,
+    });
+    const { cx, styles, theme } = useStyles(size);
+
+    const isCustomActive =
+      active && active !== theme.colorPrimary && !colors.some((c) => c.color === active);
+
+    return (
+      <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap', ...style }} {...rest}>
+        {enableColorSwatches &&
+          colors.map((c) => {
+            const color = c.color || theme.colorPrimary;
+            const isActive = (!active && !c.color) || color === active;
+            return (
+              <Tooltip key={c.label} title={c.label}>
+                <Center
+                  className={cx(styles.container, isActive && styles.active)}
+                  onClick={() => setActive(color)}
+                  style={{
+                    background: color,
+                    borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,
+                  }}
+                >
+                  {isActive && (
+                    <Icon
+                      color={rgba(readableColor(color), 0.33)}
+                      icon={CheckIcon}
+                      size={{ fontSize: 14, strokeWidth: 4 }}
+                      style={{
+                        pointerEvents: 'none',
+                      }}
+                    />
+                  )}
+                </Center>
+              </Tooltip>
+            );
+          })}
+        {enableColorPicker && (
+          <Tooltip title={texts?.custom || 'Custom'}>
+            <Center style={{ position: 'relative' }}>
+              {isCustomActive && (
+                <Icon
+                  color={rgba(readableColor(active), 0.33)}
+                  icon={CheckIcon}
+                  size={{ fontSize: 14, strokeWidth: 4 }}
+                  style={{
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    zIndex: 1,
+                  }}
+                />
+              )}
+              <ColorPicker
+                arrow={false}
+                className={cx(styles.picker, isCustomActive && styles.active)}
+                disabledAlpha
+                format={'hex'}
+                onChangeComplete={(c) => setActive(c.toHexString())}
+                presets={[
+                  {
+                    colors: colors.map((c) => c.color),
+                    label: texts?.presets || 'Presets',
+                  },
+                ]}
+                style={{
+                  borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,
+                }}
+                value={active}
+              />
+            </Center>
+          </Tooltip>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default ColorSwatches;

src/ColorSwatches/style.ts

@@ -0,0 +1,54 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, prefixCls }, size: number) => {
+  return {
+    active: css`
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 20%);
+    `,
+    container: css`
+      cursor: pointer;
+
+      flex: none;
+
+      width: ${size}px;
+      min-width: ${size}px;
+      height: ${size}px;
+      min-height: ${size}px;
+
+      background: ${token.colorBgContainer};
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);
+
+      &:hover {
+        box-shadow:
+          inset 0 0 0 1px rgba(0, 0, 0, 5%),
+          0 0 0 2px ${token.colorText};
+      }
+    `,
+    picker: css`
+      overflow: hidden;
+      flex: none;
+
+      width: ${size}px;
+      min-width: ${size}px;
+      height: ${size}px;
+      min-height: ${size}px;
+      padding: 0;
+
+      border: none;
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);
+
+      &:hover {
+        box-shadow:
+          inset 0 0 0 1px rgba(0, 0, 0, 5%),
+          0 0 0 2px ${token.colorText};
+      }
+
+      .${prefixCls}-color-picker-color-block {
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: inherit;
+      }
+    `,
+  };
+});

src/Swatches/demos/index.tsx

@@ -10,6 +10,7 @@ export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as Burger, type BurgerProps } from './Burger';
 export { default as CodeEditor, type CodeEditorProps } from './CodeEditor';
 export { default as Collapse, type CollapseProps } from './Collapse';
+export { default as ColorSwatches, type ColorSwatchesProps } from './ColorSwatches';
 export { type Config, default as ConfigProvider, useCdnFn } from './ConfigProvider';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';