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

package/src/docs/hooks/useOutsideClickHook.story.mdx

@@ -0,0 +1,56 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-outside-click" />
+
+# use-outside-click hook
+
+Call a function when a click happens outside the bounds of a component.
+
+## Purpose
+
+The use-outside-click hook detects when a click happens outside of a given
+element and calls a function.
+
+## Usage
+
+A common scenario is clicking on a backdrop to close a popover. In the example
+below, this is paired with `useDisclosure`.
+
+```jsx
+import React from "react";
+import { useOutsideClick, useDisclosure } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const popoverRef = React.useRef(null);
+
+  useOutsideClick(popoverRef, () => {
+    onClose();
+  });
+
+  return (
+    <Box>
+      <Button onClick={onOpen}>Open Popover</Button>
+      {isOpen && <Box ref={popoverRef}>Popover; click outside to close</Box>}
+    </Box>
+  );
+};
+```
+
+## API
+
+### refs
+
+Ref(s) of the element(s) where the outside click is going to happen
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `RefObject`, `Array<RefObject>`
+
+### callback
+
+The function to call
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `function`

package/src/docs/hooks/usePrefersReducedMotion.story.mdx

@@ -0,0 +1,61 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-prefers-reduced-motion" />
+
+# use-prefers-reduced-motion hook
+
+Detect whether or not a system preference is set to reduce motion.
+
+## Purpose
+
+The use-prefers-reduced-motion hook uses a
+[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
+to detect if a system-level preference has been set by the user to reduce the
+amount of non-essential motion.
+
+This hook can be used to allow people to “opt-out” of transitions and animations
+that they may find disorienting or distracting.
+
+## Usage
+
+```jsx
+import React from "react";
+import { usePrefersReducedMotion } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  return (
+    <Box className={prefersReducedMotion ? "no-animation" : "animation"}>
+      The CSS animation will run if no preference is set.
+    </Box>
+  );
+};
+```
+
+In combination with `react-spring`
+
+```jsx
+import React from "react";
+import { animated, useSpring } from "@react-spring/web";
+import { usePrefersReducedMotion } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [viz, setViz] = React.useState(false);
+  const props = useSpring({
+    opacity: viz ? 1 : 0,
+    immediate: prefersReducedMotion,
+  });
+
+  return (
+    <animated.div style={opacity}>
+      The opacity will transition if no preference is set.
+    </animated.div>
+  );
+};
+```
+
+## API
+
+This hook accepts no props.

package/src/docs/hooks/useScreenOrientationHook.story.mdx

@@ -0,0 +1,56 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-screen-orientation" />
+
+# use-screen-orientation hook
+
+Call a function when a click happens outside the bounds of a component.
+
+## Purpose
+
+The use-outside-click hook detects when a click happens outside of a given
+element and calls a function.
+
+## Usage
+
+A common scenario is clicking on a backdrop to close a popover. In the example
+below, this is paired with `useDisclosure`.
+
+```jsx
+import React from "react";
+import { useOutsideClick, useDisclosure } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const popoverRef = React.useRef(null);
+
+  useOutsideClick(popoverRef, () => {
+    onClose();
+  });
+
+  return (
+    <Box>
+      <Button onClick={onOpen}>Open Popover</Button>
+      {isOpen && <Box ref={popoverRef}>Popover; click outside to close</Box>}
+    </Box>
+  );
+};
+```
+
+## API
+
+### refs
+
+Ref(s) of the element(s) where the outside click is going to happen
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `RefObject`, `Array<RefObject>`
+
+### callback
+
+The function to call
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `function`

package/src/docs/hooks/useStepHook.story.mdx

@@ -0,0 +1,102 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-step" />
+
+# use-step hook
+
+Manage a multiple step sequence
+
+## Purpose
+
+The use-step hook provides a way to track a multiple step sequence. The hook
+needs to know how many total steps are in the sequence and then it will keep
+track of which step is current and provide methods for navigating between each
+step. The UI is up to you.
+
+## Usage
+
+To see an example within a modal, look at the [modal story](/?path=/docs/components-modal--default#set-up-wizard-example).
+
+```jsx
+export const Component = () => {
+  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
+    steps: 4,
+    initialStep: 2,
+  });
+
+  return (
+    <Box>
+      <Box className="p-8">
+        {step === 1 && <>Step 1</>}
+        {step === 2 && <>Step 2</>}
+        {step === 3 && <>Step 3</>}
+        {step === 4 && <>Step 4</>}
+      </Panel>
+
+      <Button.Group className="mt-4 justify-end">
+        {step !== 1 && (
+          <Button.Group className="mr-auto">
+            <Button
+              variant={BUTTON_VARIANT.SECONDARY}
+              onClick={goToPreviousStep}
+            >
+              Previous Step
+            </Button>
+          </Button.Group>
+        )}
+
+        <Button
+          variant={BUTTON_VARIANT.SECONDARY}
+          onClick={() => {
+            goToStep(1);
+          }}
+        >
+          Cancel
+        </Button>
+
+        {step === 4 ? (
+          <Button
+            onClick={() => {
+              console.log("Create button clicked");
+            }}
+          >
+            Create
+          </Button>
+        ) : (
+          <Button onClick={goToNextStep}>Next Step</Button>
+        )}
+      </Button.Group>
+    </Box>
+  );
+};
+```
+
+## Return values
+
+- `step`: the current step, a `number`
+- `goToNextStep`: function to advance to the next step, `step + 1`
+- `goToPreviousStep`: function to advance to the previous step, `step - 1`
+- `goToStep`: function to advance to a specific step; accepts the argument `newStep`, a `number`
+- `currentStepIndex`: the index value of the current step, `step - 1`
+- `nextStepIndex`: the index value of the next step, `currentStepIndex + 1`
+- `previousStepIndex`: the index value of the previous step, `currentStepIndex - 1`
+- `isFirstStep`: boolean to determine if the current step is the first step in the sequence
+- `isLastStep`: boolean to determine if the current step is the last step in the sequence
+
+## API
+
+### steps
+
+Total number of steps
+
+Required: No<br />
+Default value: `1`<br />
+Type: `number`
+
+### initialStep
+
+The step on which to begin; should not exceed `steps`
+
+Required: No<br />
+Default value: `1`<br />
+Type: `number`

package/src/hooks/index.ts

@@ -1,4 +1,9 @@
+export { useCopyToClipboard } from "./useCopyToClipboard";
 export { useDisclosure } from "./useDisclosure";
+export { useIntersection } from "./useIntersection";
 export { useKeyPress } from "./useKeyPress";
+export { useMatchMedia } from "./useMatchMedia";
 export { useOutsideClick } from "./useOutsideClick";
+export { usePrefersReducedMotion } from "./usePrefersReducedMotion";
+export { useScreenOrientation } from "./useScreenOrientation";
 export { useStep } from "./useStep";

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,61 @@
+// Adapted from https://www.benmvp.com/blog/copy-to-clipboard-react-custom-hook/
+import React from "react";
+import { useSnackbar } from "../components/Snackbar";
+
+type State = {
+  status: "inactive" | "success" | "failure";
+  message: string;
+};
+
+export const useCopyToClipboard = (text: string, notifyDuration = 2000) => {
+  const initialState: State = React.useMemo(
+    () => ({
+      status: "inactive",
+      message: "",
+    }),
+    [],
+  );
+  const [state, setState] = React.useState<State>(initialState);
+  const { status, message } = state;
+
+  const onSuccess = () => {
+    setState({
+      status: "success",
+      message: "Copied to clipboard",
+    });
+  };
+
+  const onFailure = () => {
+    setState({
+      status: "failure",
+      message: "Unable to copy to clipboard; please try again",
+    });
+  };
+
+  const onReset = React.useCallback(() => {
+    setState(initialState);
+  }, [initialState]);
+
+  const onCopy = React.useCallback(() => {
+    navigator.clipboard.writeText(text).then(onSuccess, onFailure);
+  }, [text]);
+
+  React.useEffect(() => {
+    if (status === "inactive") {
+      return undefined;
+    }
+
+    const timeout = setTimeout(onReset, notifyDuration);
+
+    return () => clearTimeout(timeout);
+  }, [onReset, status, notifyDuration]);
+
+  useSnackbar({
+    message,
+    isVisible: message !== "",
+    disableClose: true,
+    duration: notifyDuration,
+  });
+
+  return onCopy;
+};

package/src/hooks/useIntersection.ts

@@ -0,0 +1,45 @@
+import { RefObject, useEffect, useMemo, useState } from "react";
+
+export function useIntersection(
+  ref: RefObject<HTMLElement>,
+  options?: {
+    root?: Element | Document | null | undefined;
+    rootMargin?: string | undefined;
+    threshold?: number | number[] | undefined;
+  },
+  initialState?: {
+    isIntersecting?: boolean;
+  },
+) {
+  const defaultIsIntersecting =
+    initialState && typeof initialState.isIntersecting !== "undefined"
+      ? initialState.isIntersecting
+      : false;
+
+  const [isIntersecting, setIsIntersecting] = useState(defaultIsIntersecting);
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(
+        ([entry]) => setIsIntersecting(entry.isIntersecting),
+        {
+          root: undefined,
+          rootMargin: "0px",
+          threshold: 1.0,
+          ...options,
+        },
+      ),
+    [options],
+  );
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [observer, ref]);
+
+  return isIntersecting;
+}

package/src/hooks/useMatchMedia.ts

@@ -0,0 +1,40 @@
+import { useLayoutEffect, useState } from "react";
+
+export function useMatchMedia(query: string): boolean {
+  const getMatches = (q: string) => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(q).matches;
+    }
+
+    return false;
+  };
+
+  const [matches, setMatches] = useState(getMatches(query));
+
+  useLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const onChange = (event: MediaQueryListEvent) => setMatches(event.matches);
+
+    /**
+     * 1. Safari currently doesn't support add/removeEventListener, so we use
+     *    add/removeListener
+     * 2. add/removeListener are maybe marked as deprecated, but that could be
+     *    wrong, see https://github.com/microsoft/TypeScript/issues/32210
+     * 3. This change came about due to error being captured in Sentry, see
+     *    https://sentry.io/organizations/conveyorhq/issues/2733251662/?project=5829161
+     * 4. Change to `mediaQueryList.addEventListener("change", onChange)` when
+     *    supported
+     */
+    if (mediaQueryList) {
+      mediaQueryList.addListener(onChange);
+    }
+
+    return () => {
+      if (mediaQueryList) {
+        mediaQueryList.removeListener(onChange);
+      }
+    };
+  }, [query]);
+
+  return matches;
+}

package/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,9 @@
+import { useMatchMedia } from "./useMatchMedia";
+
+export function usePrefersReducedMotion() {
+  const hasNoPreference = useMatchMedia(
+    "(prefers-reduced-motion: no-preference)",
+  );
+
+  return !hasNoPreference;
+}

package/src/hooks/useScreenOrientation.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from "react";
+
+export const useScreenOrientation = () => {
+  const getOrientation = () => {
+    if (typeof window !== "undefined") {
+      return window.screen.orientation.type;
+    }
+
+    return undefined;
+  };
+
+  const [orientation, setOrientation] = useState(getOrientation());
+
+  const updateOrientation = useCallback(() => {
+    setOrientation(getOrientation());
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("orientationchange", updateOrientation);
+
+    return () => {
+      window.removeEventListener("orientationchange", updateOrientation);
+    };
+  }, [updateOrientation]);
+
+  return orientation;
+};

package/src/index.ts

@@ -1,15 +1,9 @@
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
 import { RemoveScroll } from "react-remove-scroll";
-import { usePopper } from "react-popper-2";
+import { usePopper } from "react-popper";
 
-export * from "./components/Absolute";
 export * from "./components/Accordion";
-export * from "./components/Appbar";
-export * from "./components/AptibleLogo";
-export * from "./components/ArrowButton";
-export * from "./components/ArrowLink";
-export * from "./components/Aside";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Banner";
@@ -18,15 +12,12 @@ export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/CloseButton";
-export * from "./components/Combobox/Combobox";
-export * from "./components/Combobox/ComboboxMulti";
 export * from "./components/ConveyorLogo";
 export * from "./components/DatePicker";
 export * from "./components/DateRangePicker";
 export * from "./components/Description";
 export * from "./components/Divider";
 export * from "./components/Drawer";
-export * from "./components/Fixed";
 export * from "./components/FileUpload";
 export * from "./components/Flex";
 export * from "./components/FormGroup";
@@ -37,7 +28,7 @@ export * from "./components/Icon";
 export * from "./components/Image";
 export * from "./components/Input";
 export * from "./components/InputFeedback";
-export * from "./components/IntegrationLogo";
+export * from "./components/Kbd";
 export * from "./components/Label";
 export * from "./components/Link";
 export * from "./components/List";
@@ -46,23 +37,18 @@ export * from "./components/Markdown";
 export * from "./components/MarkdownEditor";
 export * from "./components/Menu";
 export * from "./components/MenuRenderer";
-export * from "./components/Meta";
 export * from "./components/Modal";
 export * from "./components/OptionButton";
-export * from "./components/Pagination";
 export * from "./components/Panel";
 export * from "./components/Paper";
 export * from "./components/Paragraph";
 export * from "./components/Popover";
 export * from "./components/PopoverMenu";
 export * from "./components/Portal";
-export * from "./components/ProductIcon";
-export * from "./components/PropertyDiff";
 export * from "./components/Radio";
-export * from "./components/Relative";
 export * from "./components/Reference";
 export * from "./components/ScrollPane";
-export * from "./components/SearchFilter";
+export * from "./components/ScrollSpy";
 export * from "./components/Select";
 export * from "./components/SelectNew";
 export * from "./components/SimpleTable";
@@ -71,9 +57,6 @@ export * from "./components/SmallCaps";
 export * from "./components/Snackbar";
 export * from "./components/SpeechBubble";
 export * from "./components/Stack";
-export * from "./components/StatusLabel";
-export * from "./components/StatusPanel";
-export * from "./components/Sticky";
 export * from "./components/Svg";
 export * from "./components/Tab";
 export * from "./components/Table";
@@ -83,10 +66,8 @@ export * from "./components/Textarea";
 export * from "./components/Toast";
 export * from "./components/Toggle";
 export * from "./components/Token";
-export * from "./components/TopBar";
 export * from "./components/Tooltip";
 export * from "./components/Truncate";
-export * from "./components/VendorLogo";
 export * from "./components/VisuallyHidden";
 
 export * from "./contexts";

package/src/storybook-components/ComponentHeading.tsx

@@ -1,14 +1,5 @@
 import React from "react";
-import {
-  Box,
-  Heading,
-  Text,
-  Stack,
-  Link,
-  IntegrationLogo,
-  Divider,
-  ORIENTATION,
-} from "..";
+import { Box, Heading, Text, Stack, Link, Divider, ORIENTATION } from "..";
 
 interface ComponentHeadingProps {
   componentName: string;
@@ -18,8 +9,8 @@ interface ComponentHeadingProps {
   hideDemosLink?: boolean;
 }
 
-// change this when changing from master/alpha/beta branches
-const CURRENT_BRANCH = "master";
+// change this when changing from main/alpha/beta branches
+const CURRENT_BRANCH = "main";
 
 export const ComponentHeading = ({
   componentName,
@@ -29,7 +20,7 @@ export const ComponentHeading = ({
   hideDemosLink = false,
 }: ComponentHeadingProps) => {
   return (
-    <Box>
+    <Box className="mb-4">
       <Heading.H1 style={{ fontSize: "36px" }} className="mb-1">
         {componentName}
       </Heading.H1>
@@ -57,12 +48,6 @@ export const ComponentHeading = ({
               className="inline-flex items-center"
             >
               Source
-              <IntegrationLogo
-                logo="github"
-                color="currentColor"
-                className="ml-1 inline-block"
-                size={18}
-              />
             </Link>
           </>
         )}

package/src/storybook-components/ComponentStatus.tsx

@@ -4,6 +4,7 @@ import { Banner } from "../components/Banner";
 
 export enum COMPONENT_STATUS {
   BETA = "beta",
+  DEPRECATED = "deprecated",
   DOCUMENTATION_PENDING = "documentation-pending",
   A11Y_VIOLATION_COLOR_CONTRAST = "a11y-violation-color-contrast",
 }
@@ -14,12 +15,14 @@ export interface ComponentStatusProps {
 
 const statusVariantMap = {
   [COMPONENT_STATUS.BETA]: STATUS_VARIANT.DANGER,
+  [COMPONENT_STATUS.DEPRECATED]: STATUS_VARIANT.WARNING,
   [COMPONENT_STATUS.DOCUMENTATION_PENDING]: STATUS_VARIANT.WARNING,
   [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: STATUS_VARIANT.WARNING,
 };
 
 const statusTitleMap = {
   [COMPONENT_STATUS.BETA]: "Beta",
+  [COMPONENT_STATUS.DEPRECATED]: "Deprecated",
   [COMPONENT_STATUS.DOCUMENTATION_PENDING]: "Documentation Pending",
   [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: "Poor Color Contrast",
 };
@@ -27,6 +30,7 @@ const statusTitleMap = {
 const statusMessageMap = {
   [COMPONENT_STATUS.BETA]: `This component is still a work-in-progress and should not be used for
   production-ready apps.`,
+  [COMPONENT_STATUS.DEPRECATED]: `This component has been deprecated and will be removed from the next major version.`,
   [COMPONENT_STATUS.DOCUMENTATION_PENDING]: `The documentation for this component is undergoing maintenance. All component configuration examples may not be illustrated below and some demonstrations may not be working`,
   [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: `Variants of this component violate acceptable color contrast ratio for legibility.`,
 };

package/src/storybook-components/EnumTable.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, Flex, SimpleTable, tokens } from "..";
+import { Box, Flex, SimpleTable } from "..";
+import { tokens } from "../style-dictionary/dist/tokens";
 import { Code } from "./Code";
 
 interface EnumItemObject {
@@ -31,7 +32,7 @@ export const EnumTable = ({ enums }: EnumTableProps) => {
               <code className="mr-6 mt-1 block">{enumName}</code>
             </SimpleTable.Cell>
             <SimpleTable.Cell className="whitespace-normal">
-              <Flex className="flex-wrap" style={{ gap: tokens.margin[1] }}>
+              <Flex className="flex-wrap" style={{ gap: tokens.spacing[1] }}>
                 {Object.keys(enums[enumName]).map((enumValue) => (
                   <Box key={enumValue}>
                     <Code>{enumValue}</Code>

package/src/storybook-components/Story.tsx

@@ -2,14 +2,26 @@ import React from "react";
 import classNames from "classnames";
 import { Box, BoxProps } from "../components/Box";
 import { Heading } from "../components/Heading";
+import { ComponentStatus, COMPONENT_STATUS } from "./ComponentStatus";
 
 interface StoryProps extends BoxProps {
   title?: string;
+  deprecated?: boolean;
 }
 
-const Story = ({ className, title, children }: StoryProps) => (
+const Story = ({
+  className,
+  title,
+  children,
+  deprecated = false,
+}: StoryProps) => (
   <Box className={classNames("p-6 relative", className)}>
     {title && <Heading.H1 className="mb-6">{title}</Heading.H1>}
+    {deprecated && (
+      <Box className="mb-6">
+        <ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />
+      </Box>
+    )}
 
     {children}
   </Box>