@strapi/design-system 1.3.0-beta.1 → 1.3.0-beta.3

package/src/Combobox/Combobox.stories.mdx

@@ -1,191 +0,0 @@
-<!--- Combobox.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { Combobox, CreatableCombobox } from './Combobox';
-import { ComboboxOption } from './ComboboxOption';
-
-<Meta title="Design System/Components/Combobox" component={Combobox} />
-
-# Combobox
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Combobox)
-
-## Imports
-
-```js
-import { Combobox } from '@strapi/design-system/Combobox';
-```
-
-This is the doc of the `Combobox` component
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [value, setValue] = useState('');
-      return (
-        <Combobox label="Food" value={value} onChange={setValue}>
-          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
-          <ComboboxOption value="bagel">Bagel</ComboboxOption>
-          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
-          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
-        </Combobox>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Disabled
-
-This is the doc of the `Combobox` component
-
-<Canvas>
-  <Story name="disabled">
-    {() => {
-      const [value, setValue] = useState('');
-      return (
-        <Combobox label="Food" disabled value={value} onChange={setValue}>
-          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
-          <ComboboxOption value="bagel">Bagel</ComboboxOption>
-          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
-          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
-        </Combobox>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Without label
-
-This is the doc of the `Combobox` component
-
-<Canvas>
-  <Story name="withoutLabel">
-    {() => {
-      const [value, setValue] = useState('');
-      return (
-        <Combobox aria-label="Food" value={value} onChange={setValue}>
-          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
-          <ComboboxOption value="bagel">Bagel</ComboboxOption>
-          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
-          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
-        </Combobox>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Error
-
-This is the doc of the `Combobox` component
-
-<Canvas>
-  <Story name="error">
-    {() => {
-      const [value, setValue] = useState('');
-      return (
-        <Combobox label="Food" value={value} error="An error occured" onChange={setValue}>
-          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
-          <ComboboxOption value="bagel">Bagel</ComboboxOption>
-          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
-          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
-        </Combobox>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Initial data
-
-This is the doc of the `Combobox` component
-
-<Canvas>
-  <Story name="initial-data">
-    {() => {
-      const [value, setValue] = useState('tartuffo');
-      return (
-        <Combobox label="Food" value={value} onChange={setValue}>
-          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
-          <ComboboxOption value="bagel">Bagel</ComboboxOption>
-          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
-          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
-        </Combobox>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Creatable
-
-This is the doc of the `Combobox` component
-
-<Canvas>
-  <Story name="creatable">
-    {() => {
-      const [value, setValue] = useState('');
-      const [options, setOptions] = useState([
-        {
-          name: 'Hamburger',
-          value: 'hamburger',
-        },
-        {
-          name: 'Hambu',
-          value: 'hambu',
-        },
-        {
-          name: 'Ham',
-          value: 'ham',
-        },
-        {
-          name: 'Sandwich',
-          value: 'sandwich',
-        },
-        {
-          name: 'Peperroni',
-          value: 'peperroni',
-        },
-        {
-          name: 'Asparagus',
-          value: 'asparagus',
-        },
-        {
-          name: 'Lettuce',
-          value: 'lettuce',
-        },
-        {
-          name: 'Tomato',
-          value: 'tomato',
-        },
-        {
-          name: 'Bagel',
-          value: 'bagel',
-        },
-        {
-          name: 'Tartuffo',
-          value: 'tartuffo',
-        },
-        {
-          name: 'Carbonara',
-          value: 'carbonara',
-        },
-      ]);
-      const onCreateOption = (value) => {
-        setOptions((opt) => [...opt, { name: value, value }]);
-        setValue(value);
-      };
-      return (
-        <CreatableCombobox label="Food" value={value} onChange={setValue} onCreateOption={onCreateOption}>
-          {options.map(({ name, value }) => (
-            <ComboboxOption key={value} value={value}>
-              {name}
-            </ComboboxOption>
-          ))}
-        </CreatableCombobox>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={Combobox} />

package/src/Combobox/ComboboxList.js

@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import { maintainScrollVisibility } from './utils';
-
-export const ComboboxList = ({ options, activeOptionRef }) => {
-  useEffect(() => {
-    if (activeOptionRef.current) {
-      maintainScrollVisibility(activeOptionRef.current);
-    }
-  }, []);
-
-  return options;
-};
-
-ComboboxList.defaultProps = {
-  activeOptionRef: undefined,
-};
-
-ComboboxList.propTypes = {
-  options: PropTypes.array.isRequired,
-};

package/src/Combobox/ComboboxOption.js

@@ -1,36 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { Typography } from '../Typography';
-import { OptionBox } from './components';
-
-export const ComboboxOption = forwardRef(({ isSelected, children, ...props }, ref) => {
-  return (
-    <OptionBox
-      hasRadius
-      paddingLeft={4}
-      paddingRight={4}
-      paddingTop={2}
-      paddingBottom={2}
-      role="option"
-      background={'neutral0'}
-      isSelected={isSelected}
-      ref={ref}
-      {...props}
-    >
-      <Typography textColor={isSelected ? 'primary600' : 'neutral800'} fontWeight={isSelected ? 'bold' : null}>
-        {children}
-      </Typography>
-    </OptionBox>
-  );
-});
-
-ComboboxOption.defaultProps = {
-  isSelected: false,
-};
-
-ComboboxOption.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  isSelected: PropTypes.bool,
-};
-
-ComboboxOption.displayName = 'ComboboxOption';

package/src/Combobox/__tests__/Combobox.e2e.js

@@ -1,133 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('Combobox', () => {
-  test.describe('light mode', () => {
-    test.beforeEach(async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-combobox--base&globals=&viewMode=story');
-      await injectAxe(page);
-    });
-
-    test('triggers axe on the document', async ({ page }) => {
-      await checkA11y(page);
-    });
-
-    test('Focus and select a value then close the combobox', async ({ page }) => {
-      await page.click('input');
-      await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 300 });
-
-      await page.click('text="Tartuffo"');
-
-      const selectedValue = await page.textContent('#combobox-1-selected-value');
-      await expect(selectedValue).toBe('Tartuffo');
-      await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 300 });
-    });
-
-    test('Select a value', async ({ page }) => {
-      await page.click('input');
-      await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 300 });
-
-      await page.click('text="Tartuffo"');
-
-      const selectedValue = await page.textContent('#combobox-1-selected-value');
-      await expect(selectedValue).toBe('Tartuffo');
-      await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 300 });
-    });
-
-    test('Displays no results', async ({ page }) => {
-      await page.fill('input', 'Apple Pie');
-      const content = await page.textContent('text="No results found"');
-      await expect(content).toBe('No results found');
-    });
-
-    test('Type a value', async ({ page }) => {
-      await page.fill('input', 'Hamburger');
-      let options = await page.$$('[role="option"]');
-      expect(options.length).toEqual(1);
-
-      await page.fill('input', '');
-      options = await page.$$('[role="option"]');
-      expect(options.length).toEqual(4);
-    });
-
-    test('Select with keyboard', async ({ page }) => {
-      await page.focus('input');
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
-
-      const ariaDescendantValue = await page.getAttribute('input', 'aria-activedescendant');
-      expect(ariaDescendantValue).toBe('combobox-1-2');
-
-      await page.keyboard.press('Enter');
-
-      const selectedValue = await page.textContent('#combobox-1-selected-value');
-      await expect(selectedValue).toBe('Tartuffo');
-    });
-  });
-
-  test.describe.parallel('Combobox - initial data', () => {
-    test.beforeEach(async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-combobox--initial-data&args=&viewMode=story');
-      await injectAxe(page);
-    });
-
-    test('triggers axe on the document', async ({ page }) => {
-      await checkA11y(page);
-    });
-
-    test('initialize the value', async ({ page }) => {
-      const selectedValue = await page.textContent('#combobox-1-selected-value');
-      await expect(selectedValue).toBe('Tartuffo');
-    });
-  });
-
-  test.describe.parallel('Combobox - creatable', () => {
-    test.beforeEach(async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-combobox--creatable&globals=&viewMode=story');
-      await injectAxe(page);
-    });
-
-    test('triggers axe on the document', async ({ page }) => {
-      await checkA11y(page);
-    });
-
-    test('Create a new item', async ({ page }) => {
-      await page.fill('input', 'Apple Pie');
-      const content = await page.textContent('[role="option"]');
-      await expect(content).toBe('Create "Apple Pie"');
-
-      await page.click('[role="option"]');
-
-      const selectedValue = await page.textContent('#combobox-1-selected-value');
-      await expect(selectedValue).toBe('Apple Pie');
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('base A11y', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-combobox--base&globals=&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('disabled A11y', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-combobox--disabled&globals=&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('error A11y', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-combobox--error&globals=&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Combobox/__tests__/utils.spec.js

@@ -1,94 +0,0 @@
-import { filterOptions } from '../utils';
-
-describe('Combobox | utils', () => {
-  describe('filterOptions', () => {
-    const options = [{ props: { children: 'Hamburger' } }, { props: { children: 'Bagel' } }];
-
-    it('should filter the options correctly', () => {
-      const actual = filterOptions(options, 'ham');
-      const expected = [options[0]];
-
-      expect(actual).toEqual(expected);
-    });
-
-    it('empty array, without any param', () => {
-      const expected = [];
-      const result = filterOptions();
-
-      expect(result).toEqual(expected);
-    });
-
-    it('all items, without filter param', () => {
-      const expected = options;
-      const result = filterOptions(options);
-
-      expect(result).toEqual(expected);
-    });
-
-    it('all items, with empty filter param', () => {
-      const expected = options;
-      const result = filterOptions(options, '');
-
-      expect(result).toEqual(expected);
-    });
-
-    it('all items, with null as filter param', () => {
-      const expected = options;
-      const result = filterOptions(options, null);
-
-      expect(result).toEqual(expected);
-    });
-
-    it('no items, with 0 as filter param', () => {
-      const expected = [];
-      const result = filterOptions(options, 0);
-
-      expect(result).toEqual(expected);
-    });
-
-    it('should filter the options if the search is a number', () => {
-      const optionsNumeric = [{ props: { children: 421 } }, { props: { children: 1285 } }];
-      const expected = [optionsNumeric[1]];
-
-      expect(filterOptions(optionsNumeric, 12)).toEqual(expected);
-    });
-
-    describe('should filter the options correctly, with partial term', () => {
-      const optionsPartial = [
-        { props: { children: 'some-gh-user/project-super-cms' } },
-        { props: { children: 'other-gh-user/project-awesome-cms' } },
-        { props: { children: 'one-more-gh-user/cool-cms' } },
-        { props: { children: 'strapi/strapi' } },
-        { props: { children: 'strapi/design-system' } },
-      ];
-
-      it('3 of 5 items', () => {
-        const result = filterOptions(optionsPartial, 'cms');
-        const expected = [optionsPartial[0], optionsPartial[1], optionsPartial[2]];
-
-        expect(result).toEqual(expected);
-      });
-
-      it('2 of 5 items', () => {
-        const result = filterOptions(optionsPartial, 'project');
-        const expected = [optionsPartial[0], optionsPartial[1]];
-
-        expect(result).toEqual(expected);
-      });
-
-      it('2 last of 5 items', () => {
-        const result = filterOptions(optionsPartial, 'strapi');
-        const expected = [optionsPartial[3], optionsPartial[4]];
-
-        expect(result).toEqual(expected);
-      });
-
-      it('1 item', () => {
-        const result = filterOptions(optionsPartial, 'awesome');
-        const expected = [optionsPartial[1]];
-
-        expect(result).toEqual(expected);
-      });
-    });
-  });
-});

package/src/Combobox/components.js

@@ -1,69 +0,0 @@
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import styled from 'styled-components';
-import { inputFocusStyle } from '../themes/utils';
-
-export const MainRow = styled(Flex)`
-  position: relative;
-  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-  padding-right: ${({ theme }) => theme.spaces[3]};
-  padding-left: ${({ theme }) => theme.spaces[3]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-
-  ${({ theme, $disabled }) =>
-    $disabled
-      ? `
-    color: ${theme.colors.neutral600};
-    background: ${theme.colors.neutral150};
-  `
-      : undefined}
-
-  ${inputFocusStyle()}
-`;
-
-export const ValueContainer = styled.div`
-  padding: 1px 2px;
-  grid-area: 1 / 1 / 2 / 3;
-`;
-
-export const InputContainer = styled(Flex)`
-  display: grid;
-  flex: 1 1 0%;
-  position: relative;
-`;
-
-export const Input = styled.input`
-  display: inline-grid;
-  grid-area: 1 / 1 / 2 / 3;
-  grid-template-columns: 0px min-content;
-  background: transparent;
-  min-height: ${40 / 16}rem;
-  border: none;
-  flex: 1;
-  font-size: ${14 / 16}rem;
-  color: ${({ theme }) => theme.colors.neutral800};
-  outline: none;
-  &:focus-visible {
-    outline: none;
-    box-shadow: none;
-    outline-offset: 0;
-  }
-  &[aria-disabled='true'] {
-    background: inherit;
-    color: inherit;
-    cursor: not-allowed;
-  }
-`;
-
-export const OptionBox = styled(Box)`
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  ${({ isSelected, theme }) => isSelected && `background: ${theme.colors.primary100};`}
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.primary100};
-  }
-`;

package/src/Combobox/index.js

@@ -1,2 +0,0 @@
-export * from './Combobox';
-export * from './ComboboxOption';

package/src/Combobox/utils.js

@@ -1,97 +0,0 @@
-import computeScrollIntoView from 'compute-scroll-into-view';
-import { KeyboardKeys } from '../helpers/keyboardKeys';
-
-export const MenuActions = {
-  Close: 'Close',
-  CloseSelect: 'CloseSelect',
-  First: 'First',
-  Last: 'Last',
-  Next: 'Next',
-  Open: 'Open',
-  PageDown: 'PageDown',
-  PageUp: 'PageUp',
-  Previous: 'Previous',
-  Select: 'Select',
-  Space: 'Space',
-  Type: 'Type',
-};
-
-export const TreeActions = {
-  Close: 'Close',
-  First: 'First',
-  Last: 'Last',
-  Next: 'Next',
-  Open: 'Open',
-  Previous: 'Previous',
-  Select: 'Select',
-  UpLevel: 'UpLevel',
-};
-
-// filter an array of options against an input string
-// returns an array of options that contains the filter string, case-independent
-export function filterOptions(options = [], filter, exclude = []) {
-  const equalizedTerm = String(filter ?? '').toLowerCase();
-
-  return equalizedTerm
-    ? options.filter((option) => {
-        const equalizedOptionChildren = option.props.children.toString().toLowerCase();
-        const matches = equalizedOptionChildren.includes(equalizedTerm);
-
-        return matches && exclude.indexOf(option) < 0;
-      })
-    : options;
-}
-
-// return combobox action from key press
-export function getActionFromKey(key, menuOpen) {
-  // handle opening when closed
-  if (!menuOpen && key === KeyboardKeys.DOWN) {
-    return MenuActions.Open;
-  }
-  // handle keys when open
-  if (key === KeyboardKeys.DOWN) {
-    return MenuActions.Next;
-  } else if (key === KeyboardKeys.UP) {
-    return MenuActions.Previous;
-  } else if (key === KeyboardKeys.HOME) {
-    return MenuActions.First;
-  } else if (key === KeyboardKeys.END) {
-    return MenuActions.Last;
-  } else if (key === KeyboardKeys.ESCAPE) {
-    return MenuActions.Close;
-  } else if (key === KeyboardKeys.ENTER) {
-    return MenuActions.CloseSelect;
-  } else if (key === KeyboardKeys.BACKSPACE || key === KeyboardKeys.CLEAR || key.length === 1) {
-    return MenuActions.Type;
-  }
-}
-
-// get updated option index
-export function getUpdatedIndex(current, max, action) {
-  switch (action) {
-    case MenuActions.First:
-      return 0;
-    case MenuActions.Last:
-      return max;
-    case MenuActions.Previous:
-      return Math.max(0, current - 1);
-    case MenuActions.Next:
-      return Math.min(max, current + 1);
-    default:
-      return current;
-  }
-}
-
-// ensure given child element is within the parent's visible scroll area
-export function maintainScrollVisibility(activeElement) {
-  const actions = computeScrollIntoView(activeElement, {
-    scrollMode: 'if-needed',
-    block: 'nearest',
-    inline: 'nearest',
-  });
-
-  actions.forEach(({ el, top, left }) => {
-    el.scrollTop = top;
-    el.scrollLeft = left;
-  });
-}