Add ColorPicker to 2024-01 calendar version (#1625)

* chore: add ColorPicker to ui-extensions admin surface

* chore: add ColorPicker to ui-extensions-react admin surface

* chore: generate patch changeset

* chore: add onChange prop to ColorPickerProps

.changeset/perfect-timers-unite.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+'@shopify/ui-extensions-react': patch
+---
+
+Add ColorPicker remote component

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -16,6 +16,8 @@ export {Checkbox} from './components/Checkbox/Checkbox';
 export type {CheckboxProps} from './components/Checkbox/Checkbox';
 export {ChoiceList} from './components/ChoiceList/ChoiceList';
 export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
+export {ColorPicker} from './components/ColorPicker/ColorPicker';
+export type {ColorPickerProps} from './components/ColorPicker/ColorPicker';
 export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export {DatePicker} from './components/DatePicker/DatePicker';

packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts

@@ -0,0 +1,9 @@
+import {ColorPicker as BaseColorPicker} from '@shopify/ui-extensions/admin';
+import type {ColorPickerProps} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const ColorPicker = createRemoteReactComponent<
+  'ColorPicker',
+  ColorPickerProps
+>(BaseColorPicker);
+export type {ColorPickerProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-ColorPicker.example.tsx

@@ -0,0 +1,17 @@
+import {
+  render,
+  ColorPicker,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <ColorPicker
+      value="rgba(255 0 0 / 0.5)"
+      onChange={(value) => {
+        console.log({value});
+      }}
+    />
+  );
+}

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -19,6 +19,8 @@ export type {CheckboxProps} from './components/Checkbox/Checkbox';
 export {ChoiceList} from './components/ChoiceList/ChoiceList';
 export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
 export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
+export {ColorPicker} from './components/ColorPicker/ColorPicker';
+export type {ColorPickerProps} from './components/ColorPicker/ColorPicker';
 export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export {DateField} from './components/DateField/DateField';
 export type {DateFieldProps} from './components/DateField/DateField';

packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts

@@ -0,0 +1,47 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'ColorPicker',
+  description: 'Use this component if you need to select a color.',
+  requires: '',
+  thumbnail: 'colorpicker-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'ColorPickerProps',
+      description: '',
+      type: 'ColorPickerProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'colorpicker-default.png',
+    codeblock: {
+      title: 'Simple ColorPicker example',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-ColorPicker.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-ColorPicker.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [
+    {
+      type: 'component',
+      name: 'Select',
+      url: '/docs/api/admin-extensions/components/forms/select',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.ts

@@ -0,0 +1,43 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface ColorPickerProps {
+  /** ID for the element. */
+  id?: string;
+
+  /**
+   * Allow user to select an alpha value.
+   * @default false
+   */
+  allowAlpha?: boolean;
+
+  /**
+   * The `onChange` handler will emit the value in hex.
+   * If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
+   * If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
+   */
+  onChange?(value: string): void;
+
+  /**
+   * The currently selected color.
+   *
+   * Supported formats include:
+   * - RGB @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
+   * - RGBA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
+   * - Hex (3-value, 4-value, 6-value, 8-value) @see https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
+   *
+   * For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
+   *
+   * If the value is invalid, the component will select rgb(0, 0, 0).
+   *
+   * The `onChange` handler will emit the value in hex.
+   * If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
+   * If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
+   */
+  value?: string;
+}
+
+export const ColorPicker = createRemoteComponent<
+  'ColorPicker',
+  ColorPickerProps
+>('ColorPicker');

packages/ui-extensions/src/surfaces/admin/components/ColorPicker/examples/basic-ColorPicker.example.ts

@@ -0,0 +1,19 @@
+import {
+  extension,
+  ColorPicker,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'Playground',
+  (root) => {
+    const blockStack = root.createComponent(
+      ColorPicker,
+      {
+        value: "rgba(255 0 0 / 0.5)",
+        label: ""
+      },
+    );
+
+    root.appendChild(blockStack);
+  },
+);