feat(twake-mui): Add ColorPickerCustom and ColorPicker, extend ColorList

packages/twake-mui/package.json

@@ -64,6 +64,7 @@
     "classnames": "2.5.1",
     "cozy-minilog": "^3.10.1",
     "pdf-lib": "1.17.1",
+    "react-colorful": "5.8.1",
     "react-markdown": "10.1.0",
     "react-use-measure": "2.1.7",
     "react-virtuoso": "4.13.0",

packages/twake-mui/src/components/ColorList/ColorList.stories.tsx

@@ -52,6 +52,18 @@ export const Default: Story = {
   )
 }
 
+export const ExtraColors: Story = {
+  args: {
+    extraColors: ['#617ADB', '#4896E5'],
+    selectedColor: '#617ADB'
+  },
+  render: args => (
+    <Box sx={{ width: { xs: '100%', md: 200 } }}>
+      <SelectableColorList {...args} />
+    </Box>
+  )
+}
+
 const Section: React.FC<{
   title: string
   width?: number
@@ -87,6 +99,13 @@ export const Screenshot: Story = {
       <Section title="Without custom color" width={200}>
         <ColorList size="small" />
       </Section>
+      <Section title="Extra colors" width={200}>
+        <ColorList
+          size="small"
+          extraColors={['#617ADB', '#4896E5']}
+          selectedColor="#617ADB"
+        />
+      </Section>
     </Stack>
   )
 }

packages/twake-mui/src/components/ColorList/ColorList.test.tsx

@@ -4,6 +4,7 @@ import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
+import { COLORS } from './helpers'
 import ColorList, { ColorListProps } from './index'
 import { theme } from '../../lib/theme'
 
@@ -61,4 +62,31 @@ describe('ColorList', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
     expect(screen.queryByTestId('custom')).not.toBe(null)
   })
+
+  it('draws the extra colors after its own, each once and in capitals', () => {
+    const onClick = vi.fn()
+    setup({ extraColors: ['#617adb', '#273891', '#617ADB'], onClick })
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons).toHaveLength(COLORS.length + 1)
+    expect(buttons.at(-1)?.getAttribute('aria-label')).toBe('#617ADB')
+    fireEvent.click(screen.getByRole('button', { name: '#617ADB' }))
+    expect(onClick).toHaveBeenCalledWith('#617ADB')
+  })
+
+  it('draws only its own colors without extra colors', () => {
+    setup({})
+
+    expect(screen.getAllByRole('button')).toHaveLength(COLORS.length)
+  })
+
+  it('reads its colors as hexadecimal codes, 3 digits or without #', () => {
+    setup({ selectedColor: 'aabbcc', extraColors: ['#abc'] })
+
+    expect(
+      screen
+        .getByRole('button', { name: '#AABBCC' })
+        .getAttribute('aria-pressed')
+    ).toBe('true')
+  })
 })

packages/twake-mui/src/components/ColorList/helpers.ts

@@ -20,3 +20,14 @@ export const COLORS = [
   '#131326',
   '#646580'
 ]
+
+const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i
+
+/** `#RRGGBB` in capitals for a 3 or 6 digit hexadecimal color, else null */
+export const toHex = (text: string): string | null => {
+  const digits = HEX.exec(text.trim())?.[1]
+  if (digits === undefined) return null
+  const full =
+    digits.length === 3 ? digits.replace(/./g, digit => digit + digit) : digits
+  return `#${full.toUpperCase()}`
+}

packages/twake-mui/src/components/ColorList/index.tsx

@@ -1,5 +1,6 @@
 import {
   ButtonBase,
+  buttonBaseClasses,
   ImageList,
   ImageListItem,
   ImageListProps,
@@ -12,17 +13,36 @@ import { Icon, Check, Palette } from '@linagora/twake-icons'
 
 import { useBreakpoints } from '../../hooks/useBreakpoints'
 import Avatar from '../Avatar'
-import { COLORS } from './helpers'
+import { COLORS, toHex } from './helpers'
 
+// `touch` is the area a finger hits: 44 px when the gap has room for it, else
+// the whole pitch, so that two colors never overlap
 const sizes = {
-  small: { avatar: 21, icon: 10, cols: 7, gap: 5 },
-  medium: { avatar: 41, icon: 16, cols: 5, gap: 16 }
+  small: { avatar: 21, icon: 10, cols: 7, gap: 5, touch: 26 },
+  medium: { avatar: 41, icon: 16, cols: 5, gap: 16, touch: 44 }
 }
 
-const ColorListRoot = styled(ImageList)({
+const CUSTOM_CLASS = 'ColorList-custom'
+
+const ColorListRoot = styled(ImageList, {
+  shouldForwardProp: prop => prop !== 'touchInset'
+})<{ touchInset: number }>(({ touchInset }) => ({
   margin: 0,
-  [`& .${imageListItemClasses.root}`]: { alignItems: 'center' }
-})
+  [`& .${imageListItemClasses.root}`]: { alignItems: 'center' },
+  // Room for the touch areas, which go past the edges of the list while it
+  // stays scrollable, as `overflow: visible` would not
+  '@media (pointer: coarse)': {
+    padding: 4,
+    margin: -4,
+    [`& .${buttonBaseClasses.root}::after`]: {
+      content: '""',
+      position: 'absolute',
+      inset: touchInset
+    },
+    // Its inset starts inside its 1 px border
+    [`& .${CUSTOM_CLASS}::after`]: { inset: touchInset - 1 }
+  }
+}))
 
 export type ColorListSize = keyof typeof sizes
 
@@ -33,6 +53,8 @@ export interface ColorListProps extends Omit<
   /** Defaults to `medium` on mobile and `small` otherwise */
   size?: ColorListSize
   selectedColor?: string
+  /** Hexadecimal colors drawn after `COLORS`, those already in it left out */
+  extraColors?: readonly string[]
   /** Accessible name of a color. Defaults to its hexadecimal code */
   getColorLabel?: (color: string) => string
   customColorProps?: {
@@ -41,41 +63,52 @@ export interface ColorListProps extends Omit<
     'aria-label'?: string
     'aria-pressed'?: boolean
     'data-testid'?: string
+    ref?: React.Ref<HTMLButtonElement>
   }
   onClick?: (color: string) => void
 }
 
 const ColorList: React.FC<ColorListProps> = ({
   size,
   selectedColor,
+  extraColors = [],
   getColorLabel,
   customColorProps,
   onClick,
   ...props
 }) => {
   const { enabled: isCustomEnabled, ...customButtonProps } =
     customColorProps ?? {}
+  const colors = [
+    ...new Set([
+      ...COLORS,
+      ...extraColors.map(color => toHex(color) ?? color.toUpperCase())
+    ])
+  ]
+  const selected = toHex(selectedColor ?? '')
   const { isMobile } = useBreakpoints()
-  const { avatar, icon, cols, gap } =
+  const { avatar, icon, cols, gap, touch } =
     sizes[size ?? (isMobile ? 'medium' : 'small')]
 
   return (
-    <ColorListRoot cols={cols} rowHeight={avatar} gap={gap} {...props}>
-      {COLORS.map(color => (
+    <ColorListRoot
+      cols={cols}
+      rowHeight={avatar}
+      gap={gap}
+      touchInset={(avatar - touch) / 2}
+      {...props}
+    >
+      {colors.map(color => (
         <ImageListItem key={color}>
           <ButtonBase
             component="div"
             className="u-bdrs-circle"
             aria-label={getColorLabel?.(color) ?? color}
-            aria-pressed={selectedColor?.toUpperCase() === color}
+            aria-pressed={selected === color}
             onClick={() => onClick?.(color)}
           >
             <Avatar color={color} size={avatar}>
-              {selectedColor?.toUpperCase() === color ? (
-                <Icon icon={Check} size={icon} />
-              ) : (
-                ' '
-              )}
+              {selected === color ? <Icon icon={Check} size={icon} /> : ' '}
             </Avatar>
           </ButtonBase>
         </ImageListItem>
@@ -84,6 +117,7 @@ const ColorList: React.FC<ColorListProps> = ({
         <ImageListItem>
           <ButtonBase
             {...customButtonProps}
+            className={CUSTOM_CLASS}
             sx={{
               width: avatar,
               height: avatar,

packages/twake-mui/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,34 @@
+import { Paper } from '@mui/material'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import React, { useState } from 'react'
+
+import ColorPicker, { ColorPickerProps } from './index'
+
+const meta: Meta<typeof ColorPicker> = {
+  title: 'ColorPicker',
+  component: ColorPicker,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs', 'argos'],
+  args: { color: '#273891' }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SelectableColorPicker: React.FC<ColorPickerProps> = props => {
+  const [color, setColor] = useState(props.color)
+  return <ColorPicker {...props} color={color} onChange={setColor} />
+}
+
+export const Default: Story = {
+  render: args => (
+    <Paper className="u-p-1 u-dib">
+      <SelectableColorPicker {...args} />
+    </Paper>
+  )
+}
+
+export const OtherColor: Story = {
+  args: { color: '#12AB34' },
+  render: Default.render
+}

packages/twake-mui/src/components/ColorPicker/ColorPicker.test.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+import { ThemeProvider } from '@mui/material'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import React, { useState } from 'react'
+import { I18n } from 'twake-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import ColorPicker from './index'
+import { theme } from '../../lib/theme'
+
+afterEach(cleanup)
+
+const Picker: React.FC<{ onChange: (color: string) => void }> = ({
+  onChange
+}) => {
+  const [color, setColor] = useState('#273891')
+  return (
+    <ColorPicker
+      color={color}
+      onChange={picked => {
+        setColor(picked)
+        onChange(picked)
+      }}
+    />
+  )
+}
+
+const setup = (onChange: (color: string) => void): void => {
+  render(
+    <ThemeProvider theme={theme}>
+      <I18n lang="en" dictRequire={() => ({})}>
+        <Picker onChange={onChange} />
+      </I18n>
+    </ThemeProvider>
+  )
+}
+
+const customButton = (): HTMLElement =>
+  screen.getByRole('button', { name: 'Custom color' })
+
+describe('ColorPicker', () => {
+  it('picks a color of the list', () => {
+    const onChange = vi.fn()
+    setup(onChange)
+
+    fireEvent.click(screen.getByRole('button', { name: '#7E57E3' }))
+    expect(onChange).toHaveBeenCalledWith('#7E57E3')
+  })
+
+  it('opens the custom picker on its field, saves its color and comes back to its button', () => {
+    const onChange = vi.fn()
+    setup(onChange)
+
+    fireEvent.click(customButton())
+    const field = screen.getByRole('textbox', { name: 'Hex' })
+    expect(document.activeElement).toBe(field)
+    fireEvent.change(field, { target: { value: '#12ab34' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(onChange).toHaveBeenCalledWith('#12AB34')
+    expect(document.activeElement).toBe(customButton())
+    expect(customButton().getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('comes back to its button on cancel, the color unchanged', () => {
+    const onChange = vi.fn()
+    setup(onChange)
+
+    fireEvent.click(customButton())
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onChange).not.toHaveBeenCalled()
+    expect(document.activeElement).toBe(customButton())
+    expect(customButton().getAttribute('aria-pressed')).toBe('false')
+  })
+})