@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.9

package/src/docs/Typography.story.mdx

@@ -1,41 +1,15 @@
 import { Meta, Typeset } from "@storybook/addon-docs/blocks";
-import { fontFamily } from "../tokens/font-family";
-import { fontSize } from "../tokens/font-size";
-import { fontWeight } from "../tokens/font-weight";
-import { SimpleTable } from "../components/SimpleTable";
-
-<Meta title="Tokens/Typography" />
-
-export const Table = ({ children, columns }) => (
-  <SimpleTable className="w-1/2">
-    <SimpleTable.Row>
-      {columns.map((column) => (
-        <SimpleTable.HeaderCell key={column} className="w-1/2">
-          {column}
-        </SimpleTable.HeaderCell>
-      ))}
-    </SimpleTable.Row>
-    {children}
-  </SimpleTable>
-);
-
-export const Row = ({ children }) => (
-  <SimpleTable.Row className="border-b border-gray-300">
-    {children}
-  </SimpleTable.Row>
-);
-
-export const Cell = ({ children }) => (
-  <SimpleTable.Cell>{children}</SimpleTable.Cell>
-);
+import { tokens } from "../style-dictionary/dist/tokens";
+
+<Meta title="Styles/Typography" />
 
 export const fontSizes = [
-  fontSize.h1,
-  fontSize.h2,
-  fontSize.h3,
-  fontSize.h4,
-  fontSize.h5,
-  fontSize.h6,
+  tokens.fontSize.h1,
+  tokens.fontSize.h2,
+  tokens.fontSize.h3,
+  tokens.fontSize.h4,
+  tokens.fontSize.h5,
+  tokens.fontSize.h6,
 ].map((size) => Number(size.replace("px", "")));
 
 export const sampleText = "The quick brown fox jumps over the lazy dog.";
@@ -48,8 +22,8 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.regular}
-  fontFamily={fontFamily.sans}
+  fontWeight={tokens.fontWeight.regular}
+  fontFamily={tokens.type.sans.split(", ")}
   sampleText={sampleText}
 />
 
@@ -57,8 +31,8 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.medium}
-  fontFamily={fontFamily.sans}
+  fontWeight={tokens.fontWeight.medium}
+  fontFamily={tokens.type.sans.split(", ")}
   sampleText={sampleText}
 />
 
@@ -66,8 +40,8 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.bold}
-  fontFamily={fontFamily.sans}
+  fontWeight={tokens.fontWeight.bold}
+  fontFamily={tokens.type.sans.split(", ")}
   sampleText={sampleText}
 />
 
@@ -77,7 +51,7 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
 
 <Typeset
   fontSizes={fontSizes}
-  fontFamily={fontFamily.serif}
+  fontFamily={tokens.type.serif.split(", ")}
   sampleText={sampleText}
 />
 
@@ -87,57 +61,6 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
 
 <Typeset
   fontSizes={fontSizes}
-  fontFamily={fontFamily.mono}
+  fontFamily={tokens.type.mono.split(", ")}
   sampleText={sampleText}
 />
-
-<hr />
-
-## Tokens
-
-### Font family
-
-<Table columns={["Key", "Value"]}>
-  {Object.keys(fontFamily).map((key) => (
-    <Row key={key}>
-      <Cell>
-        <code>{key}</code>
-      </Cell>
-      <Cell>
-        <code>{fontFamily[key].join(", ")}</code>
-      </Cell>
-    </Row>
-  ))}
-</Table>
-
-### Font size
-
-<Table columns={["Key", "Value"]}>
-  {Object.keys(fontSize).map((key) => (
-    <Row key={key}>
-      <Cell>
-        <code>{key}</code>
-      </Cell>
-      <Cell>
-        <code>{fontSize[key]}</code>
-      </Cell>
-    </Row>
-  ))}
-</Table>
-
-### Font weight
-
-Weight can only be applied to Neue Montreal.
-
-<Table columns={["Key", "Value"]}>
-  {Object.keys(fontWeight).map((key) => (
-    <Row key={key}>
-      <Cell>
-        <code>{key}</code>
-      </Cell>
-      <Cell>
-        <code>{fontWeight[key].toString()}</code>
-      </Cell>
-    </Row>
-  ))}
-</Table>

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

@@ -0,0 +1,58 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-disclosure" />
+
+# use-disclosure hook
+
+Control the visibility of content.
+
+## Purpose
+
+The use-disclosure hook is used to detect and control the visibility of a
+component by providing events `onOpen`, `onClose`, and `onToggle` which alter
+the `isOpen` state.
+
+By default, `isOpen` is false, but you can pass `true` to the hook to change
+the initial state.
+
+## Usage
+
+The most common scenario is the combination of a toggle button outside of the
+disclosed component and a close button on the inside.
+
+```jsx
+import React from "react";
+import { useDisclosure } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const initialState = true; // optional, false otherwise
+  const { isOpen, onClose, onToggle } = useDisclosure(initialState);
+
+  return (
+    <Box>
+      <Button onClick={onToggle}>Toggle box</Button>
+      <Box hidden={isOpen}>
+        <Button onClick={onClose}>Close box</Button>
+        <Paragraph>Box content</Paragraph>
+      </Box>
+    </Box>
+  );
+};
+```
+
+## Return values
+
+- `isOpen`: whether or not the content has been disclosed
+- `onOpen`: function to show the content; sets `isOpen` to `true`
+- `onClose`: function to hide the content; sets `isOpen` to `false`
+- `onToggle`: function to either show or hide the content based on the value of `isOpen`
+
+## API
+
+### defaultIsOpen
+
+Determines the default visibility
+
+Required: No<br />
+Default value: `false`<br />
+Type: `boolean`

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

@@ -0,0 +1,54 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-key-press" />
+
+# use-key-press hook
+
+Call a function when a key is pressed.
+
+## Purpose
+
+The use-key-press hook is used to call a function when a specific key is
+pressed. This is useful when you want to add a simple keyboard command to a
+component.
+
+## Usage
+
+A common scenario is pressing the escape key to close a popover. In the example
+below, this is paired with `useDisclosure`.
+
+```jsx
+import React from "react";
+import { useKeyPress, KEY_CODE, useDisclosure } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  useKeyPress(KEY_CODE.ESC, onClose);
+
+  return (
+    <Box>
+      <Button onClick={onOpen}>Open Popover</Button>
+      {isOpen && <Box>Popover; press escape to close</Box>}
+    </Box>
+  );
+};
+```
+
+## API
+
+### targetKeyCode
+
+The key being pressed
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `number`, `KEY_CODE`
+
+### callback
+
+The function to call
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `function`

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

@@ -0,0 +1,42 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/use-match-media" />
+
+# use-match-media hook
+
+Detect whether or not a media query matches.
+
+## Purpose
+
+The use-match-media hook uses the native JavaScript API
+[window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+to determine if the document matches a given media query string. It also
+monitors the document when it’s being resized to check when it matches (or stops
+matching) the media query.
+
+## Usage
+
+```jsx
+import React from "react";
+import { useMatchMedia } from "@conveyorhq/arrow-ds";
+
+export const Component = () => {
+  const isMobile = useMatchMedia("(max-width: 768px)");
+
+  return (
+    <Box className={isMobile ? "mobile" : "desktop"}>
+      The current layout is {isMobile ? "mobile" : "desktop"}.
+    </Box>
+  );
+};
+```
+
+## API
+
+### query
+
+Media query to check
+
+Required: Yes<br />
+Default value: N/A<br />
+Type: `string`

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,5 +1,8 @@
 export { useCopyToClipboard } from "./useCopyToClipboard";
 export { useDisclosure } from "./useDisclosure";
 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/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/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>