@kaizen/components 2.0.0 → 2.0.2

package/src/__alpha__/SingleSelect/_docs/SingleSelect.stickersheet.stories.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
+import { Avatar } from '~components/Avatar'
+import { Icon } from '~components/Icon'
+import { Text } from '~components/Text'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { SingleSelect } from '../index'
 import { groupedMockItems, singleMockItems } from './mockData'
@@ -14,31 +17,395 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => {
+    const [filterText, setFilterText] = React.useState('')
     return (
-      <StickerSheet isReversed={isReversed} title="SingleSelect" headers={['Items', 'Grouped']}>
+      <StickerSheet isReversed={isReversed} title="SingleSelect" headers={['Combobox', 'Select']}>
         <StickerSheet.Row>
-          <SingleSelect items={singleMockItems}>
-            <SingleSelect.List>
-              {singleMockItems.map((item) => (
-                <SingleSelect.ListItem key={item.value} id={item.value}>
+          <SingleSelect label="Coffee" isComboBox description="Default">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="Default">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect
+            label="Coffee"
+            isComboBox
+            description="Manual filter"
+            items={singleMockItems.filter((item) =>
+              item.label.toLowerCase().includes(filterText.toLowerCase()),
+            )}
+            onInputChange={setFilterText}
+          >
+            {(item) => (
+              <SingleSelect.Item key={item.key} textValue={item.label}>
+                {item.label}
+              </SingleSelect.Item>
+            )}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="Render function" items={singleMockItems}>
+            {(item) => (
+              <SingleSelect.Item key={item.key} textValue={item.label}>
+                {item.label}
+              </SingleSelect.Item>
+            )}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Pick a colour" isComboBox description="Grouped">
+            {groupedMockItems.map((section) => (
+              <SingleSelect.Section key={section.label} title={section.label}>
+                {section.options.map((item) => (
+                  <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+                ))}
+              </SingleSelect.Section>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Pick a colour" description="Grouped">
+            {groupedMockItems.map((section) => (
+              <SingleSelect.Section key={section.label} title={section.label}>
+                {section.options.map((item) => (
+                  <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+                ))}
+              </SingleSelect.Section>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Pick a colour" isComboBox description="Label hidden" labelHidden>
+            {groupedMockItems.map((section) => (
+              <SingleSelect.Section key={section.label} title={section.label}>
+                {section.options.map((item) => (
+                  <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+                ))}
+              </SingleSelect.Section>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Pick a colour" description="Label hidden" labelHidden>
+            {groupedMockItems.map((section) => (
+              <SingleSelect.Section key={section.label} title={section.label}>
+                {section.options.map((item) => (
+                  <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+                ))}
+              </SingleSelect.Section>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox description="inline" labelPosition="side">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="inline" labelPosition="side">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect
+            label="Coffee"
+            isComboBox
+            isDisabled
+            description="disabled"
+            defaultSelectedKey={'magic'}
+          >
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect
+            label="Coffee"
+            isDisabled
+            description="disabled"
+            defaultSelectedKey={'magic'}
+          >
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect
+            label="Coffee"
+            isComboBox
+            isReadOnly
+            description="read only"
+            defaultSelectedKey={'magic'}
+          >
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect
+            label="Coffee"
+            isReadOnly
+            description="read only"
+            defaultSelectedKey={'magic'}
+          >
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox variant="secondary" description="secondary">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" variant="secondary" description="secondary">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox size="small" description="small">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" size="small" description="small">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox size="medium" description="medium">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" size="medium" description="medium">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox size="large" description="large">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" size="large" description="large">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect
+            label="Coffee"
+            isComboBox
+            description="Disabled items"
+            disabledKeys={['magic', 'flat-white']}
+          >
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect
+            label="Coffee"
+            description="Disabled items"
+            disabledKeys={['magic', 'flat-white']}
+          >
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox description="Checked items">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item selectedIcon="check" key={item.key}>
+                {item.label}
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="Radio items">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item selectedIcon="radio" key={item.key}>
+                {item.label}
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox description="Radio items start">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item selectedIcon="radio" selectedPosition="start" key={item.key}>
+                {item.label}
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="Check items start">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item selectedIcon="check" selectedPosition="start" key={item.key}>
+                {item.label}
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox description="Icon at start inline text">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item
+                key={item.key}
+                textValue={item.label}
+                className="flex flex-row items-center"
+              >
+                <Icon name="favorite" isPresentational />
+                <span style={{ paddingRight: 12 }} />
+                <Text
+                  variant="body"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    marginRight: 8,
+                    flexShrink: 0,
+                  }}
+                >
                   {item.label}
-                </SingleSelect.ListItem>
-              ))}
-            </SingleSelect.List>
-          </SingleSelect>
-
-          <SingleSelect items={groupedMockItems}>
-            <SingleSelect.List>
-              {groupedMockItems.map((section) => (
-                <SingleSelect.ListSection name={section.label} key={section.label}>
-                  {section.options.map((item) => (
-                    <SingleSelect.ListItem key={item.value} id={item.value}>
-                      {item.label}
-                    </SingleSelect.ListItem>
-                  ))}
-                </SingleSelect.ListSection>
-              ))}
-            </SingleSelect.List>
+                </Text>
+                <Text
+                  variant="body"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    minWidth: 0,
+                    flexShrink: 20,
+                  }}
+                >
+                  Supporting text
+                </Text>
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="Radio and multiline">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item
+                selectedIcon="radio"
+                key={item.key}
+                textValue={item.label}
+                className="flex flex-col"
+              >
+                <Text
+                  variant="body"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                  }}
+                >
+                  {item.label}
+                </Text>
+                <Text
+                  variant="body"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: 'block',
+                  }}
+                >
+                  Supporting text
+                </Text>
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+        </StickerSheet.Row>
+
+        <StickerSheet.Row>
+          <SingleSelect label="Coffee" isComboBox description="Avatar and inline">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item
+                key={item.key}
+                textValue={item.label}
+                className="flex flex-row items-center"
+              >
+                <div style={{ flexShrink: 0 }}>
+                  <Avatar fullName="Senior Popsicle" size="small" />
+                </div>
+                <span style={{ paddingRight: 12 }} />
+                <Text
+                  variant="body"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                    marginRight: 8,
+                  }}
+                >
+                  {item.label}
+                </Text>
+
+                <Text
+                  variant="body"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: 'block',
+                  }}
+                >
+                  Supporting text
+                </Text>
+              </SingleSelect.Item>
+            ))}
+          </SingleSelect>
+
+          <SingleSelect label="Coffee" description="Avatar and multiline text">
+            {singleMockItems.map((item) => (
+              <SingleSelect.Item
+                key={item.key}
+                textValue={item.label}
+                className="flex flex-row items-center gap-12"
+              >
+                <Avatar fullName="Senior Popsicle" size="medium" />
+
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                  {item.label}
+                  <Text variant="body">Supporting text</Text>
+                </div>
+              </SingleSelect.Item>
+            ))}
           </SingleSelect>
         </StickerSheet.Row>
       </StickerSheet>
@@ -61,17 +428,6 @@ export const StickerSheetDefault: StickerSheetStory = {
   name: 'Sticker Sheet (Default)',
 }
 
-export const StickerSheetReversed: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: 'Sticker Sheet (Reversed)',
-  parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
-    ...StickerSheetTemplate.parameters,
-    backgrounds: { default: 'Purple 700' },
-  },
-  args: { isReversed: true },
-}
-
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: 'Sticker Sheet (RTL)',

package/src/__alpha__/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -1,23 +1,12 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { SingleSelect } from '../index'
+import { type SelectItem, type SingleSelectProps } from '../types'
 import { singleMockItems } from './mockData'
 
-const meta = {
+const meta: Meta = {
   title: 'Components/SingleSelect/SingleSelect (alpha)',
   component: SingleSelect,
-  args: {
-    items: singleMockItems,
-    children: (
-      <SingleSelect.List>
-        {singleMockItems.map((item) => (
-          <SingleSelect.ListItem key={item.value} id={item.value}>
-            {item.label}
-          </SingleSelect.ListItem>
-        ))}
-      </SingleSelect.List>
-    ),
-  },
   decorators: [
     (Story) => (
       <div className="h-200 justify-center items-center position-relative flex">
@@ -25,18 +14,48 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof SingleSelect>
+  argTypes: {
+    label: { control: 'text', description: 'The label for the select/combobox input' },
+    labelHidden: { control: 'boolean', description: 'Visually hide the label' },
+    labelPosition: {
+      control: { type: 'radio' },
+      options: ['top', 'side'],
+      description: 'Position of the label relative to the input',
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['primary', 'secondary'],
+      description: 'Visual variant',
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the input',
+    },
+    isReadOnly: { control: 'boolean', description: 'Whether the input is read-only' },
+    isDisabled: { control: 'boolean', description: 'Whether the input is disabled' },
+    isComboBox: {
+      control: 'boolean',
+      description: 'Whether to render as a combobox (filterable input) or select',
+    },
+    items: { control: 'object', description: 'List of options to display' },
+  },
+}
 
 export default meta
 
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
+export const Playground: StoryObj<SingleSelectProps<SelectItem>> = {
+  args: {
+    label: 'Choose an item',
+    isComboBox: false,
+    items: singleMockItems,
+  },
+  render: (args: SingleSelectProps<SelectItem>) => (
+    <SingleSelect {...args}>
+      {(item) => <SingleSelect.Item key={item.key}>{item.label}</SingleSelect.Item>}
+    </SingleSelect>
+  ),
   parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
+    docs: { canvas: { sourceState: 'shown' } },
   },
 }

package/src/__alpha__/SingleSelect/_docs/mockData.ts

@@ -1,29 +1,35 @@
 export const singleMockItems = [
-  { label: 'Short black', value: 'short-black' },
-  { label: 'Long black', value: 'long-black' },
-  { label: 'Batch brew', value: 'batch-brew' },
-  { label: 'Latte', value: 'latte' },
-  { label: 'Flat white', value: 'flat-white' },
-  { label: 'Mocha', value: 'mocha' },
-  { label: 'Cappuccino', value: 'cappuccino' },
-  { label: 'Magic', value: 'magic' },
+  {
+    key: 'short-black',
+    label: 'Short black',
+    value: 'short-black',
+  },
+  { key: 'long-black', label: 'Long black', value: 'long-black' },
+  { key: 'batch-brew', label: 'Batch brew', value: 'batch-brew' },
+  { key: 'latte', label: 'Latte', value: 'latte' },
+  { key: 'flat-white', label: 'Flat white', value: 'flat-white' },
+  { key: 'mocha', label: 'Mocha', value: 'mocha' },
+  { key: 'cappuccino', label: 'Cappuccino', value: 'cappuccino' },
+  { key: 'magic', label: 'Magic', value: 'magic' },
 ]
 
 export const groupedMockItems = [
   {
+    type: 'section',
     label: 'Colours',
     options: [
-      { label: 'Blue', value: 'blue' },
-      { label: 'Red', value: 'red' },
-      { label: 'Green', value: 'green' },
+      { key: 'blue', label: 'Blue', value: 'blue' },
+      { key: 'red', label: 'Red', value: 'red' },
+      { key: 'green', label: 'Green', value: 'green' },
     ],
   },
   {
+    type: 'section',
     label: 'Flavours',
     options: [
-      { label: 'Vanilla', value: 'vanilla' },
-      { label: 'Chocolate', value: 'chocolate' },
-      { label: 'Strawberry', value: 'strawberry' },
+      { key: 'vanilla', label: 'Vanilla', value: 'vanilla' },
+      { key: 'chocolate', label: 'Chocolate', value: 'chocolate' },
+      { key: 'strawberry', label: 'Strawberry', value: 'strawberry' },
     ],
   },
 ]

package/src/__alpha__/SingleSelect/context/SingleSelectContext.tsx

@@ -1,15 +1,26 @@
 import { createContext, useContext } from 'react'
-import { type Key } from '@react-types/shared'
-import { type SelectItem, type SelectSection } from '../types'
+import { type ComboBoxState } from '@react-stately/combobox'
+import { type SelectState } from '@react-stately/select'
 
-type SingleSelectContextType = {
-  isOpen: boolean
-  setOpen: (open: boolean) => void
-  selectedKey: Key | null
-  items: (SelectItem | SelectSection)[]
+type BaseSingleSelectContextType = {
   anchorName: string
+  isDisabled: boolean
+  isReadOnly: boolean
+  secondary: boolean
+  size?: 'small' | 'medium' | 'large'
+  fieldLabel: React.ReactNode
 }
 
+type SingleSelectContextType =
+  | (BaseSingleSelectContextType & {
+      state: ComboBoxState<object>
+      isComboBox: true
+    })
+  | (BaseSingleSelectContextType & {
+      state: SelectState<object>
+      isComboBox: false
+    })
+
 export const SingleSelectContext = createContext<SingleSelectContextType | undefined>(undefined)
 
 export const useSingleSelectContext = (): SingleSelectContextType => {

package/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.module.css

@@ -0,0 +1,35 @@
+@layer kz-components {
+  .topLabel {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .sideLabel {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    gap: var(--spacing-4) var(--spacing-6);
+    align-items: center;
+  }
+
+  .label {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .labelTop {
+    margin-bottom: var(--spacing-6);
+  }
+
+  .comboBoxTrigger {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+  }
+
+  .description {
+    grid-column: 2;
+    grid-row: 2;
+  }
+}