MI-153: Add color picker component with hex color input (#469)

* MI-153: Add color picker component with hex color input

* bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/ColorPicker/BaseColorPicker.vue

@@ -0,0 +1,57 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import ColorPickerStyle from 'primevue/colorpicker/style';
+
+export default {
+  name: 'BaseColorPicker',
+  extends: BaseComponent,
+  provide() {
+    return {
+      $parentInstance: this
+    };
+  },
+  props: {
+    modelValue: {
+      type: null,
+      default: null
+    },
+    defaultColor: {
+      type: null,
+      default: 'ff0000'
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: 'hex'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    tabindex: {
+      type: String,
+      default: null
+    },
+    autoZIndex: {
+      type: Boolean,
+      default: true
+    },
+    baseZIndex: {
+      type: Number,
+      default: 0
+    },
+    appendTo: {
+      type: [String, Object],
+      default: 'body'
+    },
+    panelClass: {
+      type: String,
+      default: null
+    }
+  },
+  style: ColorPickerStyle
+};
+</script>

src/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,181 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  HintedString
+} from 'primevue/ts-helpers';
+
+/**
+ *
+ * ColorPicker groups a collection of contents in tabs.
+ *
+ * @module colorpicker
+ *
+ */
+
+/**
+ * Defines valid properties in ColorPicker component.
+ */
+export interface ColorPickerProps {
+  /**
+   * Value of the component.
+   */
+  modelValue?: any;
+  /**
+   * Initial color to display when value is not defined.
+   * @defaultValue ff0000
+   */
+  defaultColor?: any;
+  /**
+   * Whether to display as an overlay or not.
+   * @defaultValue false
+   */
+  inline?: boolean | undefined;
+  /**
+   * Format to use in value binding, supported formats are 'hex', 'rgb' and 'hsb'.
+   * @defaultValue hex
+   */
+  format?: 'hex' | 'rgb' | 'hsb' | undefined;
+  /**
+   * When present, it specifies that the component should be disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Index of the element in tabbing order.
+   */
+  tabindex?: string | undefined;
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean | undefined;
+  /**
+   * Base zIndex value to use in layering.
+   * @defaultValue 0
+   */
+  baseZIndex?: number | undefined;
+  /**
+   * Style class of the overlay panel.
+   */
+  panelClass?: any;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
+   * @defaultValue body
+   */
+  appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+  /**
+   * Indicates whether or not to show the hex color input within the panel.
+   *
+   * @defaultValue true
+   */
+  showHexInput?: boolean | undefined;
+  /**
+   * Id for the screen reader hex color input field.
+   */
+  accessibleInputId?: string | undefined;
+}
+
+/**
+ * Defines current inline state in ColorPicker component.
+ */
+export interface ColorPickerState {
+  /**
+   * Current overlay visible state as a boolean.
+   * @defaultValue false
+   */
+  overlayVisible: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColorPickerPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: ColorPickerProps;
+  /**
+   * Defines current inline state.
+   */
+  state: ColorPickerState;
+  /**
+   * Defines valid attributes.
+   */
+  attrs: any;
+  /**
+   * Defines parent options.
+   */
+  parent: any;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom change event.
+ * @see {@link ColorPickerEmits.change}
+ */
+export interface ColorPickerChangeEvent {
+  /**
+   * Browser event
+   */
+  event: Event;
+  /**
+   * Selected color value.
+   */
+  value: any;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColorPickerPassThroughAttributes {
+  [key: string]: any;
+}
+
+export interface ColorPickerSlots {}
+
+/**
+ * Defines valid emits in ColorPicker component.
+ */
+export interface ColorPickerEmits {
+  /**
+   * Emitted when the value changes.
+   * @param {*} value - New value.
+   */
+  'update:modelValue'(value: any): void;
+  /**
+   * Callback to invoke when a color is selected.
+   * @param {ColorPickerChangeEvent} event - Custom add event.
+   */
+  change(event: ColorPickerChangeEvent): void;
+  /**
+   * Callback to invoke when input is cleared by the user.
+   */
+  show(): void;
+  /**
+   * Callback to invoke when input is cleared by the user.
+   */
+  hide(): void;
+}
+
+declare module './ColorPicker.vue' {
+  declare class ColorPicker extends ClassComponent<
+    ColorPickerProps,
+    ColorPickerSlots,
+    ColorPickerEmits
+  > {}
+
+  export default ColorPicker;
+
+  declare module 'vue' {
+    export interface GlobalComponents {
+      ColorPicker: GlobalComponentConstructor<ColorPicker>;
+    }
+  }
+}

src/components/ColorPicker/ColorPicker.mdx

@@ -0,0 +1,36 @@
+import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import {
+  Default,
+  Inline,
+  InlineNoHexInput,
+  NoHexInput
+} from '@/components/ColorPicker/ColorPicker.stories';
+
+# Color Picker
+
+A color picker is a component that allows users to select a color from a color palette.
+By default, the color picker will display a color input field, a color palette, and a hex input field.
+The hex input field may be hidden by setting the showHexInput prop to false.
+
+This component is a clone of the [PrimeVue ColorPicker component](https://primevue.org/colorpicker/), with the
+addition of the hex input field in the color picker panel and a non visible color input field for accessibility purposes.
+
+## Default Configuration
+
+<Canvas of={Default} />
+
+## Without Hex Input
+
+<Canvas of={NoHexInput} />
+
+## Inline
+
+<Canvas of={Inline} />
+
+## Inline - Without Hex Input
+
+<Canvas of={InlineNoHexInput} />
+
+## Props
+
+<ArgTypes story={PRIMARY_STORY} />

src/components/ColorPicker/ColorPicker.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import ColorPickerType from '@/components/ColorPicker/ColorPicker';
+import ColorPicker from '@/components/ColorPicker/ColorPicker.vue';
+import mdx from './ColorPicker.mdx';
+
+const meta: Meta<typeof ColorPickerType> = {
+  title: 'Components/Color Picker',
+  component: ColorPicker,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorPickerType>;
+
+export const Default: Story = {
+  args: {
+    inputId: 'colorpicker-demo',
+    defaultColor: '#000000'
+  }
+};
+
+export const NoHexInput: Story = {
+  args: {
+    inputId: 'colorpicker-demo--no-hex-input',
+    defaultColor: '#000000',
+    showHexInput: false
+  }
+};
+
+export const Inline: Story = {
+  args: {
+    inputId: 'colorpicker-demo--inline',
+    defaultColor: '#000000',
+    inline: true
+  }
+};
+
+export const InlineNoHexInput: Story = {
+  args: {
+    inputId: 'colorpicker-demo--inline',
+    defaultColor: '#000000',
+    inline: true,
+    showHexInput: false
+  }
+};