feat(console): color picker (#541)

* feat(console): add experience form fields

* feat(console): color picker

packages/console/package.json

@@ -30,6 +30,7 @@
     "ky": "^0.30.0",
     "lodash.kebabcase": "^4.1.1",
     "monaco-editor": "^0.32.1",
+    "nanoid": "^3.1.23",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.27.1",

packages/console/src/components/ColorPicker/index.module.scss

@@ -0,0 +1,40 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  outline: 3px solid transparent;
+  transition-property: outline, border;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  padding: _.unit(2) _.unit(3);
+  font: var(--font-body-medium);
+  position: relative;
+
+  &:focus-within {
+    border-color: var(--color-primary);
+    outline-color: var(--color-focused-variant);
+  }
+
+  input {
+    position: absolute;
+    left: _.unit(3);
+    top: _.unit(2);
+    width: 24px;
+    height: 24px;
+    border-radius: _.unit(1);
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .preview {
+      width: 24px;
+      height: 24px;
+      margin-right: _.unit(2);
+      border-radius: _.unit(1);
+    }
+  }
+}

packages/console/src/components/ColorPicker/index.tsx

@@ -0,0 +1,28 @@
+import { nanoid } from 'nanoid';
+import React, { ChangeEventHandler, useState } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const ColorPicker = ({ onChange, value = '#000000' }: Props) => {
+  const [id] = useState(nanoid());
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    onChange?.(event.target.value);
+  };
+
+  return (
+    <div className={styles.container}>
+      <input type="color" id={id} value={value} onChange={handleChange} />
+      <label htmlFor={id}>
+        <div className={styles.preview} style={{ backgroundColor: value }} />
+        {value.toUpperCase()}
+      </label>
+    </div>
+  );
+};
+export default ColorPicker;

packages/console/src/pages/SignInExperience/components/BrandingForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import ColorPicker from '@/components/ColorPicker';
 import FormField from '@/components/FormField';
 import RadioGroup, { Radio } from '@/components/RadioGroup';
 import Switch from '@/components/Switch';
@@ -23,8 +24,13 @@ const BrandingForm = () => {
     <>
       <div className={styles.title}>{t('sign_in_exp.branding.title')}</div>
       <FormField isRequired title="admin_console.sign_in_exp.branding.primary_color">
-        {/* TODO: LOG-1733 color-picker */}
-        <TextInput {...register('branding.primaryColor', { required: true })} />
+        <Controller
+          name="branding.primaryColor"
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <ColorPicker value={value} onChange={onChange} />
+          )}
+        />
       </FormField>
       <FormField isRequired title="admin_console.sign_in_exp.branding.dark_mode">
         <Switch
@@ -36,8 +42,13 @@ const BrandingForm = () => {
         isRequired={isDarkModeEnabled}
         title="admin_console.sign_in_exp.branding.dark_primary_color"
       >
-        {/* TODO: LOG-1733 color-picker */}
-        <TextInput {...register('branding.darkPrimaryColor', { required: isDarkModeEnabled })} />
+        <Controller
+          name="branding.darkPrimaryColor"
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <ColorPicker value={value} onChange={onChange} />
+          )}
+        />
       </FormField>
       <FormField isRequired title="admin_console.sign_in_exp.branding.ui_style">
         <Controller

pnpm-lock.yaml

@@ -84,6 +84,7 @@ importers:
       lint-staged: ^11.1.1
       lodash.kebabcase: ^4.1.1
       monaco-editor: ^0.32.1
+      nanoid: ^3.1.23
       parcel: ^2.3.2
       postcss: ^8.4.6
       postcss-modules: ^4.3.0
@@ -115,6 +116,7 @@ importers:
       ky: 0.30.0
       lodash.kebabcase: 4.1.1
       monaco-editor: 0.32.1
+      nanoid: 3.3.1
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-hook-form: 7.27.1_react@17.0.2