feat(combobox): implement component

Author: var-poro

packages/ods-react/src/components/combobox/.storybook/main.ts

@@ -0,0 +1,26 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+  framework: '@storybook/react-vite',
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        font-family: "Source Sans Pro", "Trebuchet MS", "Arial", "Segoe UI", sans-serif;
+      }
+    </style>
+  `,
+  stories: [
+    '../src/dev.stories.tsx',
+    '../tests/**/*.stories.tsx',
+  ],
+};
+
+export default config;

packages/ods-react/src/components/combobox/.storybook/manager.ts

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/manager-api';
+
+addons.register('custom-panel', (api) => {
+  api.togglePanel(false);
+});
+
+addons.setConfig({
+  enableShortcuts: false,
+  showToolbar: true,
+});

packages/ods-react/src/components/combobox/.storybook/preview.ts

@@ -0,0 +1,8 @@
+import { type Preview } from '@storybook/react';
+import '@ovhcloud/ods-themes/default';
+
+const preview: Preview = {
+  parameters: {},
+};
+
+export default preview;

packages/ods-react/src/components/combobox/jest-puppeteer.config.ts

@@ -0,0 +1,17 @@
+const isCI = !!process.env.CI;
+
+export default {
+  launch: {
+    headless: isCI,
+    slowMo: isCI ? 0 : 300,
+    product: 'chrome',
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      "--disable-dev-shm-usage",
+      "--disable-accelerated-2d-canvas",
+      "--disable-gpu",
+      '--font-render-hinting=none',
+    ],
+  },
+};

packages/ods-react/src/components/combobox/jest.config.ts

@@ -0,0 +1,26 @@
+const baseOption = {
+  collectCoverage: false,
+  testPathIgnorePatterns: [
+    'node_modules/',
+    'dist/',
+  ],
+  testRegex: 'tests\\/.*\\.spec\\.ts$',
+  transform: {
+    '\\.(ts|tsx)$': 'ts-jest',
+  },
+  verbose: true,
+};
+
+export default !!process.env.E2E ?
+  {
+    ...baseOption,
+    preset: 'jest-puppeteer',
+    testRegex: 'tests\\/.*\\.e2e\\.ts$',
+    testTimeout: 60000,
+  } : {
+    ...baseOption,
+    transform: {
+      ...baseOption.transform,
+      '\\.scss$': 'jest-transform-stub',
+    }
+  };

packages/ods-react/src/components/combobox/modules.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

packages/ods-react/src/components/combobox/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@ovhcloud/ods-react-combobox",
+  "version": "18.6.3",
+  "private": true,
+  "description": "ODS React Combobox component",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rimraf documentation node_modules",
+    "doc": "typedoc",
+    "lint:a11y": "eslint --config ../../../../../.eslintrc-a11y 'src/**/*.{js,ts,tsx}' --ignore-pattern '*.stories.tsx'",
+    "lint:scss": "stylelint --aei 'src/components/**/*.scss'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}' --ignore-pattern '*.stories.tsx'",
+    "start": "npm run start:storybook",
+    "start:storybook": "storybook dev -p 3000 --no-open",
+    "test:e2e": "E2E=true start-server-and-test 'npm run start:storybook' 3000 'jest -i --detectOpenHandles'",
+    "test:e2e:ci": "CI=true npm run test:e2e",
+    "test:spec": "jest 'tests/.*.spec.ts$' --passWithNoTests",
+    "test:spec:ci": "npm run test:spec"
+  }
+}

packages/ods-react/src/components/combobox/src/components/combobox-content/ComboboxContent.tsx

@@ -0,0 +1,104 @@
+import type { ComponentPropsWithRef, FC } from 'react';
+import { Portal } from '@ark-ui/react';
+import { Combobox as VendorCombobox, useComboboxContext } from '@ark-ui/react/combobox';
+import classNames from 'classnames';
+import { forwardRef, useMemo } from 'react';
+import { useCombobox } from '../../context/useCombobox';
+import { combobox } from '../../controller/combobox';
+import { ComboboxItem, type ComboboxItemOrGroup } from '../combobox-item/ComboboxItem';
+import style from './comboboxContent.module.scss';
+
+interface ComboboxContentProp extends ComponentPropsWithRef<'div'> {
+  className?: string;
+}
+
+const ComboboxContent: FC<ComboboxContentProp> = forwardRef(({
+  className,
+  ...props
+}, ref): JSX.Element => {
+  const { items, noResultLabel, customOptionRenderer, allowCustomValue, newElementLabel, value } = useCombobox();
+  const { inputValue, value: contextValue = [] } = useComboboxContext();
+
+  const {
+    filteredItems,
+  } = combobox({
+    allowCustomValue,
+    customOptionRenderer,
+    inputValue,
+    items,
+    newElementLabel,
+    value: (value ?? []).length > 0 ? value : contextValue,
+  });
+
+  const content = useMemo(() => {
+    const hasOnlyNewElement = filteredItems.length === 1 && !('options' in filteredItems[0]) && filteredItems[0].isNewElement;
+    const hasNoResults = !filteredItems.length;
+
+    if (hasNoResults) {
+      return <div className={style['combobox-content__empty']}>{noResultLabel}</div>;
+    }
+
+    const itemsToDisplay = hasOnlyNewElement ? [] : filteredItems;
+
+    return (
+      <>
+        {hasOnlyNewElement && !('options' in filteredItems[0]) && (
+          <ComboboxItem
+            key={filteredItems[0].value}
+            item={filteredItems[0]}
+          />
+        )}
+        {itemsToDisplay.map((item) => {
+          if ('options' in item) {
+            return (
+              <div key={item.label} className={style['combobox-content__group']}>
+                <div className={style['combobox-content__group__label']}>{item.label}</div>
+                {item.options.map((option: ComboboxItemOrGroup) => {
+                  if ('options' in option) {
+                    return null;
+                  }
+                  return (
+                    <ComboboxItem
+                      key={option.value}
+                      item={option}
+                    />
+                  );
+                })}
+              </div>
+            );
+          }
+          return (
+            <ComboboxItem
+              key={item.value}
+              item={item}
+            />
+          );
+        })}
+        {hasOnlyNewElement && (
+          <div className={style['combobox-content__empty']}>{noResultLabel}</div>
+        )}
+      </>
+    );
+  }, [filteredItems, inputValue, noResultLabel]);
+
+  return (
+    <Portal>
+      <VendorCombobox.Positioner>
+        <VendorCombobox.Content
+          className={classNames(style['combobox-content'], className)}
+          ref={ref}
+          {...props}
+        >
+          {content}
+        </VendorCombobox.Content>
+      </VendorCombobox.Positioner>
+    </Portal>
+  );
+});
+
+ComboboxContent.displayName = 'ComboboxContent';
+
+export {
+  ComboboxContent,
+  type ComboboxContentProp,
+};

packages/ods-react/src/components/combobox/src/components/combobox-content/comboboxContent.module.scss

@@ -0,0 +1,46 @@
+@use '../../../../../style/focus';
+@use '../../../../../style/overlay';
+@use '../../../../../style/state';
+
+@layer ods-organisms {
+  .combobox-content {
+    box-sizing: border-box;
+    z-index: overlay.$ods-overlay-select-z-index;
+    margin: 0;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: var(--ods-border-radius-sm);
+    background: var(--ods-color-primary-000);
+    padding: 0;
+    color: var(--ods-color-text);
+
+    &__empty {
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      min-height: 32px;
+      color: var(--ods-color-text);
+    }
+
+    &__group {
+      margin: 0;
+      padding: 0;
+
+      [data-part="item"] {
+        padding: 0 16px;
+      }
+
+      &__label {
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        min-height: 32px;
+        color: var(--ods-color-heading);
+        font-weight: 600;
+      }
+
+      &[data-disabled] {
+        @include state.ods-is-disabled();
+      }
+    }
+  }
+}

packages/ods-react/src/components/combobox/src/components/combobox-control/ComboboxControl.tsx

@@ -0,0 +1,55 @@
+import type { ComponentPropsWithRef, FC } from 'react';
+import { Combobox as VendorCombobox, useComboboxContext } from '@ark-ui/react/combobox';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { Input } from '../../../../input/src';
+import style from './comboboxControl.module.scss';
+
+interface ComboboxControlProp extends ComponentPropsWithRef<'button'> {
+  className?: string;
+  clearable?: boolean;
+  loading?: boolean;
+  placeholder?: string;
+}
+
+const ComboboxControl: FC<ComboboxControlProp> = forwardRef(({
+  className,
+  clearable = false,
+  loading = false,
+  placeholder = '',
+  ...props
+}, ref): JSX.Element => {
+  const { valueAsString, getContentProps } = useComboboxContext();
+  const contentProps = getContentProps() as {
+    'data-placement'?: 'bottom' | 'top';
+    'data-state'?: 'open' | 'closed';
+  };
+  const placement = contentProps[ 'data-placement' ] as 'top' | 'bottom' | undefined;
+  const isOpen = contentProps[ 'data-state' ] === 'open';
+
+  return (
+    <VendorCombobox.Control className={ classNames(style[ 'combobox-control' ], className, {
+      [ style[ 'combobox-control--open-top' ] ]: isOpen && placement === 'top',
+      [ style[ 'combobox-control--open-bottom' ] ]: isOpen && placement === 'bottom',
+    }) }>
+      <VendorCombobox.Trigger
+        className={ classNames(style[ 'combobox-control__trigger' ], className) }
+        ref={ ref }
+        { ...props }
+      >
+        <VendorCombobox.Input defaultValue={ valueAsString } asChild>
+          <Input
+            className={ classNames(
+              style[ 'combobox-control__input' ],
+            ) }
+            clearable={ clearable }
+            loading={ loading }
+            placeholder={ placeholder }
+          />
+        </VendorCombobox.Input>
+      </VendorCombobox.Trigger>
+    </VendorCombobox.Control>
+  );
+});
+
+export { ComboboxControl, type ComboboxControlProp };