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

package/src/components/SearchFilter/SearchFilter.story.mdx

@@ -1,186 +0,0 @@
-import {
-  Meta,
-  Preview,
-  Props,
-  Story,
-  SourceState,
-} from "@storybook/addon-docs/blocks";
-import { useState } from "react";
-import { SearchFilter, SEARCH_FILTER_DIRECTION } from "./SearchFilter";
-import { Flex } from "../Flex";
-import { Button, BUTTON_VARIANT } from "../Button";
-import { ICON_TYPE } from "../Icon";
-import { Token } from "../Token";
-import { Stack } from "../Stack";
-import { EnumTable } from "../../storybook-components/EnumTable";
-
-<Meta title="Deprecated/Search Filter" component={SearchFilter} />
-
-# SearchFilter
-
-The `SearchFilter` component is a controlled component where a user can enter a text string to be used in a search or filter operation elsewhere on the page. The component uses a `form` to wrap an `input`.
-
-```jsx
-import { SearchFilter } from "@conveyorhq/arrow-ds";
-```
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="SearchFilter">
-    {() => {
-      const [searchQuery, setSearchQuery] = useState("");
-      const onInputChange = (event) => {
-        setSearchQuery(event.target.value);
-      };
-      const handleSubmit = (event) => {
-        event.preventDefault();
-        console.log(searchQuery);
-      };
-      const handleClose = () => {
-        console.log("closed");
-        setSearchQuery("");
-      };
-      return (
-        <SearchFilter
-          inputValue={searchQuery}
-          onInputChange={onInputChange}
-          onSearchSubmit={handleSubmit}
-          onClose={handleClose}
-        />
-      );
-    }}
-  </Story>
-</Preview>
-
-## Custom Props
-
-These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).
-
-<Props of={SearchFilter} />
-<EnumTable enums={{ SEARCH_FILTER_DIRECTION }} />
-
-## Demos
-
-### Expand Direction
-
-The `direction` prop sets the slide out direction of the input. It is specifified with respect to the position of the toggle button. If the `SearchFilter` is positioned on the left side of a page, use direction="left" to avoid shifting adjacent content. If the `SearchFilter` is positioned on the right side of a page, use direction="right".
-
-<Preview isColumn>
-  <Story name="ExpandDirectionLeft">
-    <Flex className="w-full justify-end">
-      <Stack>
-        <SearchFilter />
-        <Button icon={ICON_TYPE.POO_STORM} variant={BUTTON_VARIANT.UTILITY} />
-      </Stack>
-    </Flex>
-  </Story>
-  <Story name="ExpandDirectionRight">
-    <Flex className="w-full">
-      <Stack>
-        <Button icon={ICON_TYPE.POO_STORM} variant={BUTTON_VARIANT.UTILITY} />
-        <SearchFilter direction={SEARCH_FILTER_DIRECTION.RIGHT} />
-      </Stack>
-    </Flex>
-  </Story>
-</Preview>
-
-### Disable AutoClose
-
-By default, the search input is opened via a toogle button and automatically closed when the user clicks outside the component or presses `ESC`. This can be disabled by setting the `autoClose` prop to `false`. Then the component will render in an "always open" state.
-
-<Preview isColumn>
-  <Story name="DisableAutoClose">
-    <Flex className="w-full justify-end">
-      <SearchFilter autoClose={false} />
-    </Flex>
-  </Story>
-</Preview>
-
-### Working Example | Search as you type
-
-<Preview isColumn>
-  <Story name="SearchAsYouType">
-    {() => {
-      const [searchQuery, setSearchQuery] = useState("");
-      const initialItems = ["Chocolate", "Strawberry", "Banana", "Vanilla"];
-      const [items, setItems] = useState(initialItems);
-      const onInputChange = (event) => {
-        setSearchQuery(event.target.value);
-        const filteredItems = [...initialItems].filter((item) => {
-          return item.toLowerCase().includes(event.target.value.toLowerCase());
-        });
-        setItems(filteredItems);
-      };
-      const handleClear = () => {
-        setSearchQuery("");
-        setItems([...initialItems]);
-      };
-      return (
-        <Flex className="w-full flex-col h-64">
-          <Flex className="w-full justify-end">
-            <SearchFilter
-              className="mb-2"
-              inputValue={searchQuery}
-              onInputChange={onInputChange}
-              onClear={handleClear}
-              autoClose={false}
-            />
-          </Flex>
-          <ul>
-            {items.map((item) => (
-              <li key={item}>{item} </li>
-            ))}
-          </ul>
-        </Flex>
-      );
-    }}
-  </Story>
-</Preview>
-
-### Working Example | Search on submit
-
-<Preview isColumn>
-  <Story name="SearchOnSubmit">
-    {() => {
-      const [searchQuery, setSearchQuery] = useState("");
-      const initialItems = ["Chocolate", "Strawberry", "Banana", "Vanilla"];
-      const [items, setItems] = useState(initialItems);
-      const [searchTokens, setSearchTokens] = useState([]);
-      const onInputChange = (event) => {
-        setSearchQuery(event.target.value);
-      };
-      const handleSubmit = (event) => {
-        event.preventDefault();
-        const filteredItems = [...initialItems].filter((item) => {
-          return item.toLowerCase().includes(searchQuery.toLowerCase());
-        });
-        setItems(filteredItems);
-        setSearchTokens([searchQuery]);
-      };
-      const handleClose = () => {
-        setSearchQuery("");
-      };
-      return (
-        <Flex className="w-full flex-col">
-          <Flex className="w-full justify-end">
-            <Stack>
-              {searchTokens.map(
-                (token) => token && <Token key={token} label={token} />,
-              )}
-              <SearchFilter
-                inputValue={searchQuery}
-                onInputChange={onInputChange}
-                onSearchSubmit={handleSubmit}
-                onClose={handleClose}
-              />
-            </Stack>
-          </Flex>
-          <ul>
-            {items.map((item) => (
-              <li key={item}>{item} </li>
-            ))}
-          </ul>
-        </Flex>
-      );
-    }}
-  </Story>
-</Preview>

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,187 +0,0 @@
-import classNames from "classnames";
-import React, { useRef, useState } from "react";
-import { useKeyPress, useOutsideClick } from "../../hooks";
-import { KEY_CODE } from "../../types";
-import { bem } from "../../utilities/bem";
-import { BoxProps, Box } from "../Box";
-import { Button, BUTTON_VARIANT } from "../Button";
-import { Flex } from "../Flex";
-import { ICON_TYPE, Icon } from "../Icon";
-
-const cn = "SearchFilter";
-
-export enum SEARCH_FILTER_DIRECTION {
-  LEFT = "left",
-  RIGHT = "right",
-}
-
-export interface SearchFilterProps extends BoxProps {
-  /**
-   * Current value of the search input
-   */
-  inputValue: string;
-  /**
-   * Handler for the onChange event of the search input
-   */
-  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * Handler for the onSubmit event of the search form.
-   */
-  onSearchSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-  /**
-   * Called when the input is cleared (only available if autoClose is false) and should be used to clear the input since this is a controlled component
-   */
-  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /**
-   * If false, the search input will remain in the open state and not be closed when it loses focus
-   */
-  autoClose?: boolean;
-  /**
-   * Callback to execute when the input is collapsed.  If using autoClose mode, this should be used to clear the inputValue.
-   */
-  onClose?: () => void;
-  /**
-   * The direction (relative to the button) to which the input should expand when opened.
-   */
-  direction?: SEARCH_FILTER_DIRECTION;
-  /**
-   * Placeholder text for the input
-   */
-  placeholder?: string;
-}
-
-export const SearchFilter = ({
-  className,
-  direction = SEARCH_FILTER_DIRECTION.LEFT,
-  placeholder = "Search",
-  inputValue,
-  onInputChange,
-  onSearchSubmit,
-  onClear,
-  autoClose = true,
-  onClose,
-  ...rest
-}: SearchFilterProps) => {
-  const Component = autoClose ? "button" : "div";
-  const [isOpen, setIsOpen] = useState(!autoClose);
-  const searchElement = useRef<HTMLDivElement>(null);
-  const inputElement = useRef<HTMLInputElement>(null);
-
-  const focusInput = () => {
-    if (inputElement && inputElement.current) {
-      inputElement.current.focus();
-    }
-  };
-
-  const blurInput = () => {
-    if (inputElement && inputElement.current) {
-      inputElement.current.blur();
-    }
-  };
-
-  const openSearch = () => {
-    setIsOpen(true);
-    focusInput();
-  };
-
-  const closeSearch = () => {
-    setIsOpen(false);
-    blurInput();
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  const toggleSearchInput = () => {
-    if (isOpen) {
-      closeSearch();
-    } else {
-      openSearch();
-    }
-  };
-
-  const handleToggleClick = () => {
-    if (autoClose) {
-      toggleSearchInput();
-    }
-  };
-
-  useOutsideClick(searchElement, () => {
-    if (autoClose) {
-      closeSearch();
-    }
-  });
-
-  useKeyPress(KEY_CODE.ESC, () => {
-    if (autoClose) {
-      closeSearch();
-    }
-  });
-
-  const ToggleButton = () => {
-    return (
-      <Component
-        className={classNames(
-          bem(cn, { e: "toggle-button" }),
-          autoClose && bem(cn, { e: "toggle-button", m: "autoClose" }),
-          isOpen && bem(cn, { e: "toggle-button", m: "isOpen" }),
-        )}
-        onClick={handleToggleClick}
-      >
-        <Icon icon={ICON_TYPE.SEARCH} />
-      </Component>
-    );
-  };
-
-  return (
-    <Box
-      ref={searchElement}
-      className={classNames(
-        className,
-        bem(cn),
-        isOpen && bem(cn, { m: "isOpen" }),
-        bem(cn, { m: direction }),
-      )}
-      {...rest}
-    >
-      {direction === SEARCH_FILTER_DIRECTION.RIGHT && <ToggleButton />}
-      <form onSubmit={onSearchSubmit}>
-        <Flex className="items-center h-full">
-          <input
-            ref={inputElement}
-            className={classNames(
-              bem(cn, { e: "input" }),
-              isOpen && bem(cn, { e: "input", m: "isOpen" }),
-            )}
-            value={inputValue}
-            placeholder={placeholder}
-            tabIndex={isOpen ? 0 : -1}
-            onChange={onInputChange}
-            type="text"
-          />
-          {autoClose && isOpen && (
-            <Button
-              type="submit"
-              className={classNames(bem(cn, { e: "submit-button" }))}
-              variant={BUTTON_VARIANT.SECONDARY}
-              icon={ICON_TYPE.ARROW_RIGHT}
-            />
-          )}
-          {!autoClose && onClear && (
-            <Button
-              type="button"
-              className={classNames(
-                bem(cn, { e: "clear-button" }),
-                !inputValue && "invisible",
-              )}
-              variant={BUTTON_VARIANT.SECONDARY}
-              icon={ICON_TYPE.TIMES}
-              onClick={onClear}
-            />
-          )}
-        </Flex>
-      </form>
-      {direction === SEARCH_FILTER_DIRECTION.LEFT && <ToggleButton />}
-    </Box>
-  );
-};

package/src/components/SearchFilter/index.css

@@ -1,83 +0,0 @@
-.ads-SearchFilter {
-  @apply bg-white
-    rounded
-    border
-    border-gray-500
-    inline-flex
-    relative
-    h-8;
-}
-
-.ads-SearchFilter-submit-button,
-.ads-SearchFilter-clear-button {
-  @apply border-0
-    bg-transparent
-    shadow-none
-    text-brandGreen-400
-    relative
-    right-0
-    -my-px;
-}
-
-.ads-SearchFilter-submit-button:hover,
-.ads-SearchFilter-submit-button:active,
-.ads-SearchFilter-submit-button:focus,
-.ads-SearchFilter-clear-button:hover,
-.ads-SearchFilter-clear-button:active,
-.ads-SearchFilter-clear-button:focus {
-  @apply text-brandGreen-500
-    bg-transparent;
-}
-
-.ads-SearchFilter-toggle-button {
-  @apply w-8
-    h-8
-    bg-gray-200
-    text-gray-600
-    border
-    border-gray-500
-    rounded
-    flex
-    items-center
-    justify-center
-    -m-px
-    duration-200;
-}
-
-.ads-SearchFilter-toggle-button--autoClose:hover,
-.ads-SearchFilter-toggle-button--autoClose:focus,
-.ads-SearchFilter-toggle-button--autoClose:active {
-  @apply bg-gray-400;
-}
-
-.ads-SearchFilter--left .ads-SearchFilter-toggle-button--isOpen {
-  @apply rounded-tl-none
-    rounded-bl-none
-    ml-0;
-}
-
-.ads-SearchFilter--right .ads-SearchFilter-toggle-button--isOpen {
-  @apply rounded-tr-none
-    rounded-br-none
-    mr-0;
-}
-
-.ads-SearchFilter-input {
-  @apply duration-300
-    bg-transparent
-    appearance-none
-    px-0
-    rounded;
-
-  width: 0;
-}
-
-.ads-SearchFilter-input--isOpen {
-  @apply w-42
-    pl-2;
-}
-
-.ads-SearchFilter-toggle-button:focus,
-.ads-SearchFilter-input:focus {
-  @apply outline-none;
-}

package/src/components/SearchFilter/index.ts

@@ -1 +0,0 @@
-export * from "./SearchFilter";

package/src/components/SpeechBubble/SpeechBubble.md

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

package/src/components/SpeechBubble/SpeechBubble.story.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import Examples from "../../storybook-components/Examples";
-import { SpeechBubble, SpeechBubblePlacement } from "./SpeechBubble";
-
-const stories = storiesOf("Components/Data/Speech Bubble", module);
-
-const placementOptions: SpeechBubblePlacement[] = [
-  "top-start",
-  "top-end",
-  "bottom-start",
-  "bottom-end",
-];
-
-stories.add("Default", () => (
-  <Story title="SpeechBubble">
-    <Examples>
-      {placementOptions.map((placement) => (
-        <SpeechBubble data-placement={placement}>
-          This is the SpeechBubble component
-        </SpeechBubble>
-      ))}
-    </Examples>
-  </Story>
-));