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

package/src/components/Combobox/ui.tsx

@@ -1,211 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { KeyboardEvent, MouseEvent, ReactNode, forwardRef } from "react";
-import Portal from "@reach/portal";
-import classNames from "classnames";
-import { bem } from "../../utilities/bem";
-import { Box } from "../Box";
-import { CloseButton } from "../CloseButton";
-import { Icon, ICON_TYPE } from "../Icon";
-import { Token } from "../Token";
-// import { Portal } from "../Portal";
-import { OptionInterface } from "./useSelect";
-
-export const cn = "Combobox";
-export const selectInputCn = bem(cn, { e: "input" });
-export const surfaceClassName = classNames([
-  bem(cn, { e: "surface" }),
-  `${bem("TextInput")}`,
-  `${bem("TextInput", { m: "default" })}`,
-]);
-export const surfaceMultiClassName = bem(cn, { e: "surface", m: "multi" });
-export const defaultPopperModifiers = {
-  offset: {
-    offset: "0, 4px",
-  },
-  preventOverflow: {
-    enabled: false,
-  },
-  hide: {
-    enabled: false,
-  },
-};
-
-export interface ComboboxSharedProps {
-  options: OptionInterface[];
-  defaultValue?: OptionInterface;
-  placeholder?: string;
-  isCreatable?: boolean;
-  isClearable?: boolean;
-  isSearchable?: boolean;
-  onCreate?: (v: OptionInterface) => any;
-  onChange?: (v: OptionInterface | OptionInterface[]) => any;
-  // getOptionLabel?: (v: string) => string;
-  // getOptionValue?: (v: string) => string;
-  // formatOptionLabel?: (option: DropdownOption) => ReactNode;
-  className?: string;
-  disabled?: boolean;
-}
-
-interface NoOptionsProps {
-  canCreate: boolean;
-  searchValue: string;
-  create: (v: OptionInterface) => any;
-}
-
-interface OptionProps {
-  onClick: () => void;
-  children: ReactNode;
-  isHover: boolean;
-  isSelected: boolean;
-  hover?: () => void;
-  id?: string;
-}
-
-export const Option = ({
-  children,
-  onClick,
-  isHover = false,
-  isSelected = false,
-  hover = () => {},
-  id,
-}: OptionProps) => {
-  return (
-    <Box
-      onClick={onClick}
-      onMouseEnter={() => hover()}
-      className={classNames([
-        bem(cn, { e: "option" }),
-        isHover && bem(cn, { e: "option", m: "isHover" }),
-        isSelected && bem(cn, { e: "option", m: "isSelected" }),
-      ])}
-      id={id}
-      aria-selected={isSelected}
-      role="option"
-    >
-      {children}
-    </Box>
-  );
-};
-
-export const NoOptions = ({
-  canCreate,
-  searchValue,
-  create,
-}: NoOptionsProps) => {
-  return canCreate ? (
-    <Option
-      onClick={() => create({ value: searchValue })}
-      id={searchValue}
-      isHover
-      isSelected
-    >
-      Create &quot;{searchValue}&quot;
-    </Option>
-  ) : (
-    <Box className={bem(cn, { e: "noOptions" })}>No options</Box>
-  );
-};
-
-interface ListboxProps {
-  children: ReactNode;
-  top: number;
-  left: number;
-  width?: string | number;
-}
-
-export const Listbox = ({
-  children,
-  top = 0,
-  left = 0,
-  width = "100%",
-}: ListboxProps) => {
-  return (
-    <Portal>
-      <Box
-        role="listbox"
-        style={{ position: "absolute", top, left, width }}
-        className={bem(cn, { e: "listbox" })}
-      >
-        {children}
-      </Box>
-    </Portal>
-  );
-};
-
-interface TagProps {
-  children: ReactNode;
-  onRemove: () => void;
-}
-
-export const Tag = ({ children, onRemove }: TagProps) => {
-  const onClick = (event: MouseEvent<HTMLButtonElement>): void => {
-    event.stopPropagation();
-    onRemove();
-  };
-
-  return (
-    <Token className={bem(cn, { e: "tag" })} onRemove={onClick} removable>
-      {children}
-    </Token>
-  );
-};
-
-interface ContainerProps {
-  isOpen: boolean;
-  children: ReactNode;
-  close: () => void;
-  selectedId?: string;
-  className?: string;
-  disabled?: boolean;
-  onKeyDown?: (event: KeyboardEvent) => void;
-}
-
-export const Container = forwardRef(
-  (
-    {
-      children,
-      selectedId,
-      className,
-      disabled,
-      onKeyDown = () => {},
-      close,
-      isOpen,
-    }: ContainerProps,
-    ref,
-  ) => {
-    return (
-      <Box
-        ref={ref}
-        className={classNames([
-          bem(cn),
-          disabled && bem(cn, { m: "disabled" }),
-          className,
-        ])}
-        aria-activedescendant={selectedId}
-        role="combobox"
-        onKeyDown={onKeyDown}
-        tabIndex={0}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
-
-export const Arrow = () => (
-  <Icon className="text-gray-700" icon={ICON_TYPE.CARET_DOWN} />
-);
-
-interface ClearButtonProps {
-  canClear: boolean;
-  clear: () => void;
-}
-
-export const ClearButton = ({ canClear, clear }: ClearButtonProps) => {
-  const onClick = (event: MouseEvent<HTMLButtonElement>): void => {
-    event.stopPropagation();
-    clear();
-  };
-
-  return canClear ? <CloseButton onClick={onClick} /> : null;
-};

package/src/components/Combobox/useSelect.ts

@@ -1,347 +0,0 @@
-import {
-  useReducer,
-  useRef,
-  useEffect,
-  useMemo,
-  useLayoutEffect,
-  useState,
-  KeyboardEvent,
-  Ref,
-  RefObject,
-} from "react";
-import { KEY_CODE } from "../../types";
-
-export interface OptionInterface {
-  value: string;
-  label?: string;
-}
-
-export interface SelectState<S = OptionInterface | OptionInterface[]> {
-  value: S;
-  isOpen: boolean;
-  searchValue: string;
-  hoverIndex: number;
-}
-
-export interface UseSelect<S = OptionInterface | OptionInterface[]> {
-  options: OptionInterface[];
-  reducer: (s: SelectState<S>, a: any) => SelectState<S>;
-  initialState: SelectState<S>;
-  filterOptions?: (
-    state: SelectState<S>,
-    options: OptionInterface[],
-  ) => OptionInterface[];
-  onChange?: (s: S) => any;
-  onCreate?: (s: OptionInterface) => any;
-}
-
-interface Action<S = any> {
-  type: string;
-  payload: S;
-}
-
-export function createBaseReducer<S>(initialState: SelectState<S>) {
-  return function baseReducer(
-    state: SelectState<S>,
-    action: Action,
-  ): SelectState<S> {
-    switch (action.type) {
-      case "close":
-        return { ...state, isOpen: false };
-      case "toggle":
-        return { ...state, isOpen: !state.isOpen };
-      case "hover":
-        return { ...state, hoverIndex: action.payload };
-      case "clear":
-        return { ...initialState };
-      default:
-        return state;
-    }
-  };
-}
-
-export function searchReducer<S>(
-  state: SelectState<S>,
-  action: Action,
-): SelectState<S> {
-  switch (action.type) {
-    case "search":
-      return { ...state, searchValue: action.payload, hoverIndex: 0 };
-    default:
-      return state;
-  }
-}
-
-export function createSingleValueReducer(
-  initialState: SelectState<OptionInterface>,
-) {
-  return function singleValueReducer(
-    state: SelectState<OptionInterface>,
-    action: Action<OptionInterface>,
-  ): SelectState<OptionInterface> {
-    switch (action.type) {
-      case "add": {
-        return { ...state, value: action.payload, searchValue: "" };
-      }
-      case "remove": {
-        return { ...state, value: initialState.value };
-      }
-      default:
-        return state;
-    }
-  };
-}
-
-export function multiValueReducer(
-  state: SelectState<OptionInterface[]>,
-  action: Action<OptionInterface>,
-): SelectState<OptionInterface[]> {
-  switch (action.type) {
-    case "add": {
-      const value = [...state.value, action.payload];
-      return { ...state, value, searchValue: "" };
-    }
-    case "remove": {
-      const rmValue = action.payload;
-      const value = [...state.value];
-      const index = value.findIndex((v) => v === rmValue);
-      if (index >= 0) {
-        value.splice(index, 1);
-      }
-      return { ...state, value, isOpen: false };
-    }
-    default:
-      return state;
-  }
-}
-
-export type Reducer<S> = (s: SelectState<S>, action: any) => SelectState<S>;
-export const combineReducers = <S>(reducers: Reducer<S>[]) => (
-  state: SelectState<S>,
-  action: any,
-) => {
-  const nextState = reducers.reduce((prev, r) => {
-    return r(prev, action);
-  }, state);
-
-  return nextState;
-};
-
-const setSearch = (payload: string) => ({ type: "search", payload });
-
-function defaultFilterOptions<S>(
-  { value, searchValue }: SelectState<S>,
-  options: OptionInterface[],
-) {
-  let opts: OptionInterface[] = options;
-  if (Array.isArray(value) && value.length > 0) {
-    opts = options.filter((opt) => value.find((v) => v.value !== opt.value));
-  }
-
-  if (searchValue) {
-    return opts.filter(
-      (opt) =>
-        opt.value
-          .toLocaleLowerCase()
-          .indexOf(searchValue.toLocaleLowerCase()) >= 0,
-    );
-  }
-
-  return opts;
-}
-
-interface UseSelectPosition {
-  listboxStyles: {
-    top: number;
-    left: number;
-    width: string;
-  };
-  comboboxRef: RefObject<HTMLDivElement>;
-}
-
-export const useSelectPosition = (): UseSelectPosition => {
-  const comboboxRef = useRef<HTMLDivElement>(null);
-  const [listboxStyles, setListboxStyles] = useState({
-    top: 0,
-    left: 0,
-    width: "100%",
-  });
-  const position = () => {
-    if (comboboxRef.current) {
-      const cur = comboboxRef.current.getBoundingClientRect();
-      setListboxStyles({ top: cur.y, left: cur.x, width: `${cur.width}px` });
-    }
-  };
-
-  useLayoutEffect(() => {
-    position();
-  }, [comboboxRef]);
-
-  useLayoutEffect(() => {
-    window.addEventListener("resize", position);
-    return () => window.removeEventListener("resize", position);
-  }, []);
-
-  return { comboboxRef, listboxStyles };
-};
-
-export const useSelect = <S = OptionInterface | OptionInterface[]>({
-  options,
-  reducer,
-  initialState,
-  filterOptions = defaultFilterOptions,
-  onChange = () => {},
-  onCreate = () => {},
-}: UseSelect<S>) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const inputEl: Ref<HTMLInputElement> = useRef<HTMLInputElement>(null);
-  const availableOptions = useMemo(() => filterOptions(state, options), [
-    state,
-    options,
-    filterOptions,
-  ]);
-
-  const hasItem = (item: OptionInterface) => {
-    if (Array.isArray(state.value)) {
-      return state.value.findIndex((i) => i.value === item.value) >= 0;
-    }
-    return false;
-  };
-
-  const focus = () => {
-    // some race condition between opening the listbox and focusing the input el
-    setTimeout(() => {
-      if (inputEl && inputEl.current) {
-        inputEl.current.focus();
-      }
-    }, 100);
-  };
-
-  // const findItemIndex = (val: string) => {
-  //   return availableOptions.findIndex((o) => o.value === val);
-  // };
-
-  const hover = (index: number | undefined) => {
-    if (typeof index === "undefined") return;
-    dispatch({ type: "hover", payload: index });
-  };
-
-  const open = () => {
-    // console.log("open", state);
-
-    // if (typeof state.value.value === "string") {
-    //   hover(findItemIndex(state.value));
-    // } else {
-    //   hover(0);
-    // }
-
-    hover(0);
-    dispatch({ type: "toggle" });
-    focus();
-  };
-
-  const closeDropdown = () => dispatch({ type: "close" });
-
-  const addItem = (value: OptionInterface) => {
-    if (!hasItem(value)) {
-      dispatch({ type: "add", payload: value });
-    }
-    closeDropdown();
-    focus();
-  };
-
-  const removeItem = (value: OptionInterface) => {
-    if (Array.isArray(state.value) && !hasItem(value)) {
-      return;
-    }
-    dispatch({ type: "remove", payload: value });
-  };
-
-  const search = (query: string) => {
-    dispatch(setSearch(query));
-    if (!state.isOpen) {
-      open();
-    }
-  };
-
-  const create = (item: OptionInterface) => {
-    const found = options.findIndex((o) => o.value === item.value);
-    if (found >= 0) {
-      dispatch(setSearch(""));
-      return;
-    }
-    addItem(item);
-    onCreate(item);
-  };
-
-  const onKeyPress = (event: KeyboardEvent) => {
-    const limit = availableOptions.length;
-
-    if (event.keyCode === KEY_CODE.ESCAPE) {
-      if (state.isOpen) {
-        closeDropdown();
-      }
-    } else if (event.keyCode === KEY_CODE.ENTER) {
-      if (!state.isOpen) {
-        open();
-        return;
-      }
-
-      const res = availableOptions[state.hoverIndex];
-
-      if (res) {
-        addItem(res);
-      } else if (state.searchValue) {
-        create({
-          // label: "",
-          value: state.searchValue,
-        });
-      }
-
-      closeDropdown();
-    } else if (event.keyCode === KEY_CODE.DOWN) {
-      const nextHover = state.hoverIndex + 1;
-      const next = nextHover === limit ? 0 : nextHover;
-      hover(next);
-    } else if (event.keyCode === KEY_CODE.UP) {
-      const prevHover = state.hoverIndex - 1;
-      const prev = prevHover === -1 ? limit - 1 : prevHover;
-      hover(prev);
-    } else if (event.keyCode === KEY_CODE.HOME) {
-      hover(0);
-    } else if (event.keyCode === KEY_CODE.END) {
-      hover(limit - 1);
-    } else if (event.keyCode === KEY_CODE.BACKSPACE) {
-      if (Array.isArray(state.value)) {
-        if (state.value.length > 0) {
-          removeItem(state.value[state.value.length - 1]);
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    onChange(state.value);
-  }, [state, onChange]);
-
-  const { listboxStyles, comboboxRef } = useSelectPosition();
-
-  return {
-    state,
-    open,
-    add: addItem,
-    select: addItem,
-    remove: removeItem,
-    search,
-    availableOptions,
-    ref: inputEl,
-    close: closeDropdown,
-    hover,
-    create,
-    onKeyPress,
-    clear: () => dispatch({ type: "clear" }),
-    listboxStyles,
-    comboboxRef,
-  };
-};

package/src/components/Fixed/Fixed.md

@@ -1,16 +0,0 @@
-# Usage
-
-`<Fixed />` is used for wrapping child nodes in an fixed-positioned Box.
-
-`import { Fixed } from "@conveyorhq/arrow-ds"`
-
-```jsx
-<Fixed>
-  {children}
-</Fixed>
-```
-
-## Props
-
-Fixed props extend `React.HTMLProps<HTMLDivElement>` via `BoxProps`, therefore
-any valid attributes for an HTML `div` element are accepted as props.

package/src/components/Fixed/Fixed.story.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Fixed } from "./Fixed";
-
-const stories = storiesOf("Components/Positioning/Fixed", module);
-
-stories.add("Default", () => (
-  <Story title="Fixed">
-    <Fixed>This is the Fixed component</Fixed>
-  </Story>
-));

package/src/components/Fixed/Fixed.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-
-export const Fixed = (props: BoxProps) => {
-  const { className, ...rest } = props;
-
-  return <Box className={classNames("fixed", className)} {...rest} />;
-};

package/src/components/Fixed/index.ts

@@ -1 +0,0 @@
-export { Fixed } from "./Fixed";

package/src/components/Flex/Flex.md

@@ -1,14 +0,0 @@
-# Usage
-
-`<Flex />` …
-
-`import { Flex } from "@conveyorhq/arrow-ds"`
-
-```jsx
-<Flex>{...}</Flex>
-```
-
-## Props
-
-| Prop | Type | Required | Default Value | Description |
-|:--- |:--- |:--- |:--- |:--- |

package/src/components/Flex/Flex.story.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Flex } from "./Flex";
-
-const stories = storiesOf("Components/Layout/Flex", module);
-
-stories.add("Default", () => (
-  <Story title="Flex">
-    <Flex>This is the Flex component</Flex>
-  </Story>
-));