@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Combobox/Combobox.story.mdx

@@ -1,199 +0,0 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
-import {
-  ComponentStatus,
-  COMPONENT_STATUS,
-} from "../../storybook-components/ComponentStatus";
-import { Combobox } from "./Combobox";
-import { ComboboxMulti } from "./ComboboxMulti";
-
-<Meta title="Deprecated/Combobox" component={Combobox} />
-
-export const options = [
-  { value: "red", label: "Red" },
-  { value: "blue", label: "Blue" },
-  { value: "yellow", label: "Yellow" },
-  { value: "orange", label: "Orange" },
-  { value: "green", label: "Green" },
-  { value: "purple", label: "Purple" },
-  { value: "pink", label: "Pink" },
-  { value: "teal", label: "Teal" },
-  { value: "tan", label: "Tan" },
-  { value: "brown", label: "Brown" },
-  { value: "white", label: "White" },
-  { value: "black", label: "Black" },
-  { value: "gray", label: "Gray" },
-];
-
-# Combobox
-
-<ComponentStatus status={COMPONENT_STATUS.BETA} />
-
-A combobox is the combination of a text input and a list of options. The list is
-used to help the user select a value, but the value does not necessarily have to
-come from that list.
-
-This component is also sometimes referred to as an autocomplete or autosuggest.
-
-<Preview>
-  <Story name="Default">
-    <Combobox options={options} defaultValue={options[0]} />
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={Combobox} />
-
-## Demos
-
-### Single option
-
-Use the single option combobox when you want users to be able to select only one
-value.
-
-#### Clearable
-
-The selected value can be cleared by using the `isClearable` prop.
-
-<Preview>
-  <Story name="Combobox clearable">
-    <Combobox options={options} isClearable />
-  </Story>
-</Preview>
-
-#### Not searchable
-
-The combobox is searchable by default. This can be disabled by setting
-`isSearchable` to false.
-
-A non-searchable combobox behaves like a typical HTML select element.
-
-<Preview>
-  <Story name="Combobox not searchable">
-    <Combobox options={options} isSearchable={false} />
-  </Story>
-</Preview>
-
-#### Creatable
-
-Options can be created by setting `isCreatable` to true and passing a function
-to `onCreate`.
-
-<Preview>
-  <Story name="Combobox creatable">
-    {() => {
-      const [creatableOptions, setState] = React.useState(options);
-      const onCreate = (value) => {
-        setState([...creatableOptions, value]);
-      };
-      return (
-        <Combobox options={creatableOptions} onCreate={onCreate} isCreatable />
-      );
-    }}
-  </Story>
-</Preview>
-
-#### Setting a default value
-
-A default value can be passed in.
-
-<Preview>
-  <Story name="Combobox default value">
-    <Combobox options={options} defaultValue={options[0]} />
-  </Story>
-</Preview>
-
-#### Using value transformation
-
-You can use the `getOptionLabel` and `getOptionValue` to set the value and label.
-
-<Preview>
-  <Story name="Combobox value transformation">
-    <Combobox
-      options={options}
-      getOptionLabel={(color) => color.name}
-      getOptionValue={(color) => color.id}
-    />
-  </Story>
-</Preview>
-
-#### Changing placeholder text
-
-The placeholder text can be customized to better describe the options.
-
-<Preview>
-  <Story name="Combobox placeholder">
-    <Combobox options={options} placeholder="Choose your favorite color" />
-  </Story>
-</Preview>
-
-#### Disabled
-
-The combobox can be disabled.
-
-<Preview>
-  <Story name="Combobox disabled">
-    <Combobox options={options} disabled />
-  </Story>
-</Preview>
-
-### Multiple option
-
-Use the multiple option combobox when you want users to be able to select more
-than one value. There is no limit to how many options can be selected.
-
-#### Clearable
-
-Each option can be removed individually, but if the `isClearable` prop is set to
-true, then all of the options will be removed at once.
-
-<Preview>
-  <Story name="MultiCombobox clearable">
-    <ComboboxMulti options={options} isClearable />
-  </Story>
-</Preview>
-
-#### Not searchable
-
-The combobox is searchable by default. This can be disabled by setting
-`isSearchable` to false.
-
-<Preview>
-  <Story name="MultiCombobox not searchable">
-    <ComboboxMulti options={options} isSearchable={false} />
-  </Story>
-</Preview>
-
-#### Creatable
-
-Options can be created by setting `isCreatable` to true and passing a function
-to `onCreate`.
-
-<Preview>
-  <Story name="MultiCombobox creatable">
-    {() => {
-      const [creatableOptions, setState] = React.useState(options);
-      const onCreate = (value) => {
-        console.log(value);
-        setState([...creatableOptions, value]);
-      };
-      return (
-        <ComboboxMulti
-          options={creatableOptions}
-          onCreate={onCreate}
-          isCreatable
-        />
-      );
-    }}
-  </Story>
-</Preview>
-
-#### Disabled
-
-The combobox can be disabled.
-
-<Preview>
-  <Story name="MultiCombobox disabled">
-    <ComboboxMulti options={options} disabled />
-  </Story>
-</Preview>

package/src/components/Combobox/Combobox.tsx

@@ -1,162 +0,0 @@
-import React, { ChangeEvent, useMemo } from "react";
-import classNames from "classnames";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import {
-  SelectState,
-  OptionInterface,
-  combineReducers,
-  createBaseReducer,
-  createSingleValueReducer,
-  searchReducer,
-  useSelect,
-} from "./useSelect";
-import {
-  Option,
-  surfaceClassName,
-  selectInputCn,
-  NoOptions,
-  Container,
-  Listbox,
-  ClearButton,
-  Arrow,
-  ComboboxSharedProps,
-} from "./ui";
-
-const initialState: SelectState<OptionInterface> = {
-  value: {
-    value: "",
-    label: "",
-  },
-  isOpen: false,
-  searchValue: "",
-  hoverIndex: 0,
-};
-
-const reducers = [
-  createBaseReducer(initialState),
-  searchReducer,
-  createSingleValueReducer(initialState),
-];
-const rootReducer = combineReducers(reducers);
-function reducer(
-  state: SelectState<OptionInterface> = initialState,
-  action: any,
-) {
-  const nextState = rootReducer(state, action);
-  return nextState;
-}
-
-export const Combobox = ({
-  options,
-  placeholder = "Select…",
-  isCreatable = false,
-  isClearable = false,
-  isSearchable = true,
-  disabled = false,
-  className,
-  onCreate = () => {},
-  onChange = () => {},
-}: ComboboxSharedProps) => {
-  const {
-    state,
-    availableOptions,
-    ref,
-    onKeyPress,
-    select,
-    close,
-    hover,
-    clear,
-    create,
-    open,
-    search,
-    comboboxRef,
-    listboxStyles,
-  } = useSelect({ options, reducer, initialState, onChange, onCreate });
-  const { isOpen, searchValue, value, hoverIndex } = state;
-  const hasOptions = availableOptions.length > 0;
-  const allowInput = isSearchable || isCreatable;
-  const canCreate = isCreatable && !!searchValue;
-  const canClear = isClearable && !!value.value;
-
-  const showOptions = useMemo(() => {
-    return availableOptions.map((opt, index) => {
-      const isSelected = opt.value === value.value;
-      return (
-        <Option
-          key={opt.value}
-          id={opt.value}
-          onClick={() => select(opt)}
-          hover={() => hover(index)}
-          isHover={index === hoverIndex}
-          isSelected={isSelected}
-        >
-          {opt.label ? opt.label : opt.value}
-        </Option>
-      );
-    });
-  }, [availableOptions, value.value, hoverIndex, hover, select]);
-
-  const noOptions = (
-    <NoOptions
-      canCreate={canCreate}
-      create={create}
-      searchValue={searchValue}
-    />
-  );
-
-  return (
-    <Container
-      close={close}
-      ref={comboboxRef}
-      isOpen={isOpen}
-      selectedId={value.value}
-      onKeyDown={allowInput ? undefined : onKeyPress}
-      disabled={disabled}
-      className={className}
-    >
-      <Flex
-        onClick={disabled ? undefined : open}
-        tabIndex={disabled ? undefined : 0}
-        className={surfaceClassName}
-      >
-        <Flex className="items-center w-full">
-          {allowInput ? (
-            <>
-              {searchValue ? "" : value.value}
-              <input
-                onChange={(event: ChangeEvent<HTMLInputElement>): void =>
-                  search(event.currentTarget.value)
-                }
-                value={searchValue}
-                className={selectInputCn}
-                ref={ref}
-                onKeyDown={onKeyPress}
-                placeholder={value.value ? "" : placeholder}
-                disabled={disabled}
-              />
-            </>
-          ) : (
-            <Box as="span" className={classNames(!value && "text-placeholder")}>
-              {value.value || placeholder}
-            </Box>
-          )}
-        </Flex>
-        <Flex className="items-center">
-          <ClearButton clear={clear} canClear={canClear} />
-          <Arrow />
-        </Flex>
-      </Flex>
-
-      {isOpen && (
-        <Listbox
-          top={listboxStyles.top + 40}
-          left={listboxStyles.left}
-          width={listboxStyles.width}
-        >
-          {hasOptions ? showOptions : noOptions}
-        </Listbox>
-      )}
-    </Container>
-  );
-};

package/src/components/Combobox/ComboboxMulti.tsx

@@ -1,169 +0,0 @@
-import React, { ChangeEvent } from "react";
-import classNames from "classnames";
-import { Stack } from "../Stack";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { Portal } from "../Portal";
-import {
-  SelectState,
-  OptionInterface,
-  combineReducers,
-  createBaseReducer,
-  multiValueReducer,
-  searchReducer,
-  useSelect,
-} from "./useSelect";
-import {
-  Option,
-  Tag,
-  NoOptions,
-  surfaceClassName,
-  surfaceMultiClassName,
-  selectInputCn,
-  Container,
-  Listbox,
-  ClearButton,
-  Arrow,
-  ComboboxSharedProps,
-} from "./ui";
-
-const initialState: SelectState<OptionInterface[]> = {
-  value: [],
-  isOpen: false,
-  searchValue: "",
-  hoverIndex: 0,
-};
-
-const reducers = [
-  createBaseReducer(initialState),
-  searchReducer,
-  multiValueReducer,
-];
-const rootReducer = combineReducers(reducers);
-function reducer(
-  state: SelectState<OptionInterface[]> = initialState,
-  action: any,
-) {
-  const nextState = rootReducer(state, action);
-  return nextState;
-}
-
-export const ComboboxMulti = ({
-  options,
-  placeholder = "Select…",
-  isCreatable = false,
-  isClearable = false,
-  isSearchable = true,
-  disabled = false,
-  className,
-  onCreate = () => {},
-  onChange = () => {},
-}: ComboboxSharedProps) => {
-  const {
-    state,
-    availableOptions,
-    ref,
-    onKeyPress,
-    add,
-    open,
-    remove,
-    search,
-    close,
-    hover,
-    clear,
-    create,
-    comboboxRef,
-    listboxStyles,
-  } = useSelect({ options, reducer, initialState, onChange, onCreate });
-  const { isOpen, searchValue, value, hoverIndex } = state;
-  const hasOptions = availableOptions.length > 0;
-  const allowInput = isSearchable || isCreatable;
-  const canCreate = isCreatable && !!searchValue;
-  const canClear = isClearable && value.length > 0;
-
-  const showOptions = availableOptions.map((opt, index) => {
-    const isSelected = value.find((v) => v.value === opt.value);
-    return (
-      <Option
-        key={opt.value}
-        id={opt.value}
-        onClick={() => add(opt)}
-        hover={() => hover(index)}
-        isHover={index === hoverIndex}
-        isSelected={!!isSelected}
-      >
-        {opt.label ? opt.label : opt.value}
-      </Option>
-    );
-  });
-
-  const noOptions = (
-    <NoOptions
-      canCreate={canCreate}
-      create={create}
-      searchValue={searchValue}
-    />
-  );
-
-  return (
-    <Container
-      close={close}
-      ref={comboboxRef}
-      isOpen={isOpen}
-      selectedId={value.join(",")}
-      onKeyDown={allowInput ? undefined : onKeyPress}
-      disabled={disabled}
-      className={className}
-    >
-      <Flex
-        onClick={disabled ? undefined : open}
-        tabIndex={disabled ? undefined : 0}
-        className={classNames([surfaceClassName, surfaceMultiClassName])}
-      >
-        <Stack className="w-full">
-          {value.map((val) => {
-            return (
-              <Tag key={val.value} onRemove={() => remove(val)}>
-                {val.value}
-              </Tag>
-            );
-          })}
-          {allowInput && (
-            <input
-              onChange={(event: ChangeEvent<HTMLInputElement>): void =>
-                search(event.currentTarget.value)
-              }
-              value={searchValue}
-              className={selectInputCn}
-              ref={ref}
-              onKeyDown={onKeyPress}
-              placeholder={value.length === 0 ? placeholder : ""}
-              disabled={disabled}
-            />
-          )}
-          {!allowInput && value.length === 0 && (
-            <Box as="span" className="text-placeholder">
-              {placeholder}
-            </Box>
-          )}
-        </Stack>
-        <Flex className="items-center">
-          <ClearButton clear={clear} canClear={canClear} />
-          <Arrow />
-        </Flex>
-      </Flex>
-
-      {isOpen && (
-        <Portal>
-          <Listbox
-            top={listboxStyles.top + 40}
-            left={listboxStyles.left}
-            width={listboxStyles.width}
-          >
-            {hasOptions ? showOptions : noOptions}
-          </Listbox>
-        </Portal>
-      )}
-    </Container>
-  );
-};

package/src/components/Combobox/TODO.md

@@ -1,33 +0,0 @@
-## Combobox to-dos
-
-[ ] Passing in a defaultValue
-[x] Value stored as an object, not a string
-[ ] Value transformation using getOptionLabel and getOptionValue props
-[ ] Custom option label (people in comply)
-
-
-```jsx
-const transformToOption = (item: any) => {
-  if (!item) {
-    return {
-      label: "",
-      value: null,
-    };
-  }
-
-  const option = {
-    label: getOptionLabel ? getOptionLabel(item) : item,
-    value: getOptionValue ? getOptionValue(item) : item,
-  };
-
-  if (getOptionValue) {
-    return { ...option, ...item };
-  }
-
-  return option;
-};
-
-const selectedOption = transformToOption(value);
-// const choices = options.map(transformToOption);
-const choices = availableOptions.map(transformToOption);
-```

package/src/components/Combobox/index.css

@@ -1,97 +0,0 @@
-.ads-Combobox {
-  @apply bg-white
-    relative
-    rounded
-    outline-none;
-}
-
-.ads-Combobox-cover {
-  @apply fixed
-    top-0
-    left-0
-    w-screen
-    h-screen
-    z-overlay;
-}
-
-.ads-Combobox-surface {
-  @apply cursor-pointer
-    items-center
-    justify-between;
-}
-
-.ads-Combobox--disabled .ads-Combobox-surface {
-  @apply cursor-default;
-}
-
-/* Qualified with .ads-TextInput to overcome specificity issue */
-.ads-TextInput:not(.ads-TextInput--multiline).ads-Combobox-surface {
-  @apply min-h-10
-    h-auto;
-}
-
-/* Qualified with .ads-TextInput to overcome specificity issue */
-.ads-TextInput:not(.ads-TextInput--multiline).ads-Combobox-surface--multi {
-  @apply py-0;
-}
-
-/* Qualified with .ads-TextInput to overcome specificity issue */
-.ads-Combobox--disabled
-  .ads-TextInput:not(.ads-TextInput--multiline).ads-Combobox-surface {
-  @apply bg-gray-200
-    border-gray-400
-    text-gray-700;
-}
-
-.ads-Combobox-listbox {
-  @apply shadow-md
-    rounded
-    border
-    border-gray-400
-    py-1
-    bg-white
-    overflow-y-auto
-    z-menu;
-
-  max-height: 266px;
-}
-
-.ads-Combobox-option {
-  @apply p-2
-    cursor-default;
-}
-
-.ads-Combobox-option--isHover {
-  @apply bg-gray-200;
-}
-
-.ads-Combobox-option--isSelected {
-  @apply bg-blue-400
-    text-white;
-}
-
-.ads-Combobox-noOptions {
-  @apply flex
-    justify-center
-    p-2;
-}
-
-.ads-Combobox-input {
-  @apply bg-transparent
-    h-6
-    flex-1
-    w-full
-    outline-none;
-}
-
-.ads-Combobox-input::placeholder {
-  @apply text-placeholder;
-}
-
-/* Qualified with .ads-Token to overcome specificity issue */
-.ads-Token.ads-Combobox-tag {
-  @apply h-6
-    pr-1
-    mb-1
-    mt-1;
-}

package/src/components/Combobox/index.ts

@@ -1,2 +0,0 @@
-export * from "./Combobox";
-export * from "./ComboboxMulti";