@indico-data/design-system 2.11.0 → 2.12.0

package/lib/src/components/forms/form/index.d.ts

@@ -0,0 +1 @@
+export { Form } from './Form';

package/lib/src/components/forms/select/Select.d.ts

@@ -0,0 +1,6 @@
+import { Props as ReactSelectProps } from 'react-select';
+import { SelectOption } from './types';
+export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
+    options: OptionType[];
+}
+export declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/select/Select.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SelectProps } from './Select';
+import { SelectOption } from './types';
+declare const meta: Meta<SelectProps<SelectOption>>;
+export default meta;
+type Story = StoryObj<SelectProps<SelectOption>>;
+export declare const Default: Story;

package/lib/src/components/forms/select/__tests__/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/forms/select/index.d.ts

@@ -0,0 +1 @@
+export { Select } from './Select';

package/lib/src/components/forms/select/types.d.ts

@@ -0,0 +1,6 @@
+export type SelectOption = {
+    label: string;
+    value: string;
+    detail?: string;
+    [key: string]: any;
+};

package/lib/src/components/index.d.ts

@@ -8,3 +8,5 @@ export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
 export { Textarea } from './forms/textarea';
 export { PasswordInput } from './forms/passwordInput';
+export { Select } from './forms/select';
+export { Form } from './forms/form';

package/lib/src/index.d.ts

@@ -13,3 +13,5 @@ export { Checkbox } from './components/forms/checkbox';
 export { Toggle as ToggleInput } from './components/forms/toggle';
 export { Textarea } from './components/forms/textarea';
 export { PasswordInput } from './components/forms/passwordInput';
+export { Select as SelectInput } from './components/forms/select';
+export { Form } from './components/forms/form';

package/lib/src/types.d.ts

@@ -10,3 +10,5 @@ import { IconName } from '../build/generated/iconTypes';
 export type { IconName };
 import { IconSizes } from './components/icons/types';
 export type { IconSizes };
+import { SelectOption } from './components/forms/select/types';
+export type { SelectOption };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/form/Form.mdx

@@ -103,7 +103,7 @@ const {
   <div className="radio-group mb-5">
     <h2 className="mb-4">Select a class</h2>
     <Radio label="Rogue" value="Rogue" id="rogue" {...register('rpgClass')} />
-    <Radio label="Warrior" value="Warruir" id="warrior" {...register('rpgClass')} />
+    <Radio label="Warrior" value="Warrior" id="warrior" {...register('rpgClass')} />
     <Radio label="Mage" value="Mage" id="mage" {...register('rpgClass')} />
     <Radio label="Monk" value="Monk" id="monk" {...register('rpgClass')} />
   </div>

package/src/components/forms/form/Form.stories.tsx

@@ -257,7 +257,7 @@ export const Uncontrolled: Story = {
               <div className="radio-group mb-5">
                 <h2 className="mb-4">Select a class</h2>
                 <Radio label="Rogue" value="Rogue" id="rogue" {...register('rpgClass')} />
-                <Radio label="Warrior" value="Warruir" id="warrior" {...register('rpgClass')} />
+                <Radio label="Warrior" value="Warrior" id="warrior" {...register('rpgClass')} />
                 <Radio label="Mage" value="Mage" id="mage" {...register('rpgClass')} />
                 <Radio label="Monk" value="Monk" id="monk" {...register('rpgClass')} />
               </div>
@@ -383,7 +383,7 @@ export const UncontrolledPreFilled: Story = {
                 <Radio label="Rogue" value="Rogue" id="rogue" {...register('rpgClass')} />
                 <Radio
                   label="Warrior"
-                  value="Warruir"
+                  value="Warrior"
                   id="warrior"
                   {...register('rpgClass')}
                   defaultChecked

package/src/components/forms/form/index.ts

@@ -0,0 +1 @@
+export { Form } from './Form';

package/src/components/forms/select/Select.stories.tsx

@@ -0,0 +1,118 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectProps } from './Select';
+import { SelectOption } from './types';
+
+const meta: Meta<SelectProps<SelectOption>> = {
+  title: 'Forms/Select',
+  component: Select,
+  argTypes: {
+    options: {
+      control: 'object',
+      description: 'Options for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ value: string, label: string, detail?: string }[]',
+        },
+      },
+      defaultValue: { summary: '[]' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Toggles the loading state of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Enables the clearable feature of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isSearchable: {
+      control: 'boolean',
+      description: 'Enables the searchable feature of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'true' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'The placeholder text for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: 'Select...' },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    onChange: {
+      control: false,
+      description: 'Event handler for when the selected value changes',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary:
+            '(newValue: SingleValue<SelectOption> | MultiValue<SelectOption>, actionMeta: ActionMeta<SelectOption>) => void',
+        },
+      },
+      action: 'onChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<SelectProps<SelectOption>>;
+
+export const Default: Story = {
+  args: {
+    options: [
+      { value: 'option1', label: 'Option 1', detail: '123 Count' },
+      { value: 'option2', label: 'Option 2', detail: '456 Count' },
+      { value: 'option3', label: 'Option 3', detail: '789 Count' },
+    ],
+    placeholder: 'Select an option...',
+    isClearable: false,
+    isSearchable: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+};

package/src/components/forms/select/Select.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
+import { SelectOption } from './types';
+
+export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
+  options: OptionType[];
+}
+
+const OptionComponent = <OptionType extends SelectOption>({
+  ...props
+}: OptionProps<OptionType>) => {
+  return (
+    <components.Option {...props}>
+      <div className="select__items">
+        <div className="select__item-value">{props?.data?.label}</div>
+        {props?.data?.detail && <div className="select__item-detail">{props?.data?.detail}</div>}
+      </div>
+    </components.Option>
+  );
+};
+
+export const Select = <OptionType extends SelectOption>({
+  classNamePrefix = 'select',
+  className,
+  components: customComponents,
+  ...props
+}: SelectProps<OptionType>) => {
+  const defaultComponents = {
+    Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
+  };
+
+  const mergedComponents = { ...defaultComponents, ...customComponents };
+
+  return (
+    <ReactSelect
+      classNamePrefix={classNamePrefix}
+      className={classNames('select-wrapper', className)}
+      components={mergedComponents}
+      {...props}
+    />
+  );
+};

package/src/components/forms/select/__tests__/Select.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Select } from '../Select';
+import { SelectOption } from '../types';
+import { OptionProps, components } from 'react-select';
+
+const options: SelectOption[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+describe('Select Component', () => {
+  it('displays options correctly', () => {
+    render(<Select options={options} menuIsOpen />);
+    options.forEach((option) => {
+      expect(screen.getByText(option.label)).toBeInTheDocument();
+    });
+  });
+
+  it('handles onChange event', () => {
+    const handleChange = jest.fn();
+    render(<Select options={options} menuIsOpen onChange={handleChange} />);
+    const option = screen.getByText('Option 1');
+    fireEvent.click(option);
+    expect(handleChange).toHaveBeenCalledWith(options[0], expect.any(Object));
+  });
+
+  it('applies custom class names', () => {
+    const customClassName = 'custom-select-class';
+    render(<Select options={options} className={customClassName} />);
+    const selectWrapper = screen.getByRole('combobox').closest('.select-wrapper');
+    expect(selectWrapper).toHaveClass(customClassName);
+  });
+
+  it('applies custom class name prefix', () => {
+    const customClassNamePrefix = 'custom-prefix';
+    render(<Select options={options} classNamePrefix={customClassNamePrefix} />);
+    const selectWrapper = screen.getByRole('combobox');
+    expect(selectWrapper).toHaveClass(`${customClassNamePrefix}__input`);
+  });
+
+  it('displays detail when present', () => {
+    const optionsWithDetail = options.map((option, index) => ({
+      ...option,
+      detail: `${index + 1}23 Count`,
+    }));
+
+    render(<Select options={optionsWithDetail} menuIsOpen />);
+    optionsWithDetail.forEach((option) => {
+      expect(screen.getByText(option.detail)).toBeInTheDocument();
+    });
+  });
+
+  it('uses custom components', () => {
+    const oneOption = options.slice(0, 1);
+    const CustomOptionComponent = (props: OptionProps<SelectOption>) => (
+      <div data-testid="custom-option">{props.data.label}</div>
+    );
+
+    render(
+      <Select options={oneOption} components={{ Option: CustomOptionComponent }} menuIsOpen />,
+    );
+
+    expect(screen.getByTestId('custom-option')).toHaveTextContent(oneOption[0].label);
+  });
+});

package/src/components/forms/select/index.ts

@@ -0,0 +1 @@
+export { Select } from './Select';

package/src/components/forms/select/styles/Select.scss

@@ -0,0 +1,120 @@
+// Common Variables
+:root,
+:root [data-theme='light'] {
+  --pf-select-background-color: var(--pf-white-color);
+  --pf-select-border-color: var(--pf-gray-color);
+  --pf-select-text-color: var(--pf-gray-color);
+  --pf-select-indicator-color: var(--pf-gray-color);
+  --pf-select-placeholder-text-color: var(--pf-gray-color);
+  --pf-select-hover-color: var(--pf-gray-color);
+  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-text-color: var(--pf-gray-color);
+  --pf-select-option-hover-color: var(--pf-primary-color-100);
+
+  // Disabled
+  --pf-select-disabled-background-color: var(--pf-gray-color-100);
+  --pf-select-disabled-color: var(--pf-gray-color-400);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-select-background-color: var(--pf-primary-color);
+  --pf-select-border-color: var(--pf-gray-color-100);
+  --pf-select-text-color: var(--pf-gray-color-100);
+  --pf-select-indicator-color: var(--pf-gray-color-100);
+  --pf-select-placeholder-text-color: var(--pf-gray-color-100);
+  --pf-select-hover-color: var(--pf-gray-color-100);
+  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-text-color: var(--pf-gray-color-100);
+  --pf-select-option-hover-color: var(--pf-primary-color-300);
+
+  // Disabled
+  --pf-select-disabled-background-color: var(--pf-primary-color-200);
+  --pf-select-disabled-color: var(--pf-gray-color-400);
+}
+
+.select-wrapper {
+  .select__ {
+    &control {
+      background-color: var(--pf-select-background-color);
+      border: 1px solid var(--pf-select-border-color);
+      color: var(--pf-select-text-color);
+      box-shadow: none;
+
+      &:hover,
+      &:focus,
+      &--is-focused {
+        border: 1px solid var(--pf-select-hover-color);
+      }
+
+      &--is-disabled {
+        background-color: var(--pf-select-disabled-background-color);
+        color: var(--pf-select-disabled-color);
+      }
+    }
+
+    &placeholder {
+      color: var(--pf-select-placeholder-text-color);
+    }
+
+    &value-container {
+      cursor: text;
+    }
+
+    &input-container {
+      color: var(--pf-select-text-color);
+    }
+
+    &menu {
+      border: 1px solid var(--pf-select-border-color);
+      box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
+      margin: 4px 0px;
+      background-color: var(--pf-select-background-color);
+    }
+
+    &menu-notice {
+      color: var(--pf-select-text-color);
+    }
+
+    &indicator-separator {
+      background-color: var(--pf-select-indicator-color);
+    }
+
+    &indicator {
+      cursor: pointer;
+      color: var(--pf-select-indicator-color);
+
+      &:hover,
+      &:focus {
+        color: var(--pf-select-hover-color);
+      }
+    }
+
+    &items {
+      display: flex;
+      align-items: center;
+    }
+
+    &item-detail {
+      margin-left: auto;
+    }
+
+    &option {
+      cursor: pointer;
+      overflow-wrap: break-word;
+      color: var(--pf-select-option-text-color);
+      &--is-focused,
+      &:active {
+        background: var(--pf-select-option-hover-color);
+      }
+
+      &--is-selected {
+        background: var(--pf-select-option-selected-color);
+      }
+    }
+
+    &single-value {
+      color: var(--pf-select-option-text-color);
+    }
+  }
+}

package/src/components/forms/select/types.ts

@@ -0,0 +1,6 @@
+export type SelectOption = {
+  label: string;
+  value: string;
+  detail?: string;
+  [key: string]: any; // Allow for additional properties
+};

package/src/components/index.ts

@@ -8,3 +8,5 @@ export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
 export { Textarea } from './forms/textarea';
 export { PasswordInput } from './forms/passwordInput';
+export { Select } from './forms/select';
+export { Form } from './forms/form';

package/src/index.ts

@@ -67,3 +67,5 @@ export { Checkbox } from './components/forms/checkbox';
 export { Toggle as ToggleInput } from './components/forms/toggle';
 export { Textarea } from './components/forms/textarea';
 export { PasswordInput } from './components/forms/passwordInput';
+export { Select as SelectInput } from './components/forms/select';
+export { Form } from './components/forms/form';

package/src/styles/index.scss

@@ -12,8 +12,9 @@
 @import '../components/forms/textarea/styles/Textarea.scss';
 @import '../components/forms/passwordInput/styles/PasswordInput.scss';
 @import '../components/forms/form/styles/Form.scss';
-
+@import '../components/forms/select/styles/Select.scss';
 @import '../components/forms/toggle/styles/Toggle.scss';
+
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/types.ts

@@ -13,3 +13,6 @@ export type { IconName };
 
 import { IconSizes } from './components/icons/types';
 export type { IconSizes };
+
+import { SelectOption } from './components/forms/select/types';
+export type { SelectOption };