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

package/src/docs/Colors.story.mdx

@@ -1,8 +1,8 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
 import { CustomColorPalette } from "../storybook-components/CustomColorPalette";
-import { colors } from "../tokens";
+import { tokens } from "../style-dictionary/dist/tokens";
 
-<Meta title="Tokens/Colors" />
+<Meta title="Styles/Colors" />
 
 export const palette = (color, range = [200, 600]) => {
   const offset = (range[0] - 100) / 100;
@@ -12,15 +12,15 @@ export const palette = (color, range = [200, 600]) => {
   const object = {};
   array.forEach((n) => {
     Object.assign(object, {
-      [n * 100]: colors[color][n * 100],
+      [n * 100]: tokens.color[color][n * 100],
     });
   });
   return object;
 };
 
 export const bw = {
-  black: colors.black,
-  white: colors.white,
+  black: tokens.color.black,
+  white: tokens.color.white,
 };
 
 export const grays = palette("gray", [100, 900]);
@@ -35,26 +35,26 @@ export const cyan = palette("cyan");
 export const purple = palette("purple");
 
 export const lighten = {
-  100: colors.lighten["100"],
-  200: colors.lighten["200"],
-  300: colors.lighten["300"],
+  100: tokens.color.lighten["100"],
+  200: tokens.color.lighten["200"],
+  300: tokens.color.lighten["300"],
 };
 
 export const functional = {
   border: {
-    border: colors.border,
+    border: tokens.color.border,
   },
   link: {
-    link: colors.link,
+    link: tokens.color.link,
   },
   success: {
-    success: colors.success,
+    success: tokens.color.success,
   },
   failure: {
-    failure: colors.failure,
+    failure: tokens.color.failure,
   },
   caution: {
-    caution: colors.caution,
+    caution: tokens.color.caution,
   },
 };
 

package/src/docs/Spacing.story.mdx

@@ -1,8 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
-import { padding } from "../tokens/padding";
 import { SimpleTable } from "../components/SimpleTable";
 
-<Meta title="Tokens/Spacing" />
+<Meta title="Styles/Spacing" />
 
 export const Table = ({ children, columns }) => (
   <SimpleTable className="w-1/2">
@@ -35,22 +34,7 @@ The follow values can be used for `margin`, `padding` and `gap`.
 
 `margin` also includes a negative scale and the `auto` keyword.
 
-<Table columns={["Key", "Value"]}>
-  {Object.keys(padding).map((key) => (
-    <Row key={key}>
-      <Cell>
-        <code>{key}</code>
-      </Cell>
-      <Cell>
-        <code>{padding[key]}</code>
-      </Cell>
-    </Row>
-  ))}
-</Table>
-
-## Using spacing tokens
-
-### Margin
+## Margin
 
 Margin controls the spacing on the outside of an element.
 
@@ -99,7 +83,7 @@ Margin controls the spacing on the outside of an element.
   </Row>
 </Table>
 
-### Padding
+## Padding
 
 Padding controls the spacing on the inside of an element.
 
@@ -148,7 +132,7 @@ Padding controls the spacing on the inside of an element.
   </Row>
 </Table>
 
-### Gap
+## Gap
 
 Gap is used to space items within grid and flexbox layouts.
 

package/src/docs/Tokens.story.mdx

@@ -0,0 +1,230 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import { tokens } from "../style-dictionary/dist/tokens";
+import { Button, SimpleTable, Tooltip, BUTTON_VARIANT, ICON_TYPE } from "../..";
+
+<Meta title="Documentation/Tokens" />
+
+export const categories = Object.keys(tokens);
+
+export const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text);
+};
+
+export const ClickToCopy = ({ text }) => {
+  const [copied, setCopied] = React.useState(false);
+  const renderProps = {
+    onMouseOut: () => setCopied(false),
+    onBlur: () => setCopied(false),
+    onClick: () => {
+      copyToClipboard(text);
+      setCopied(true);
+    },
+  };
+  return (
+    <Tooltip
+      placement="top"
+      referenceElement={
+        <Button
+          variant={BUTTON_VARIANT.MINIMAL}
+          icon={ICON_TYPE.CLIPBOARD}
+          {...renderProps}
+        />
+      }
+    >
+      {copied ? "Copied!" : "Copy token path"}
+    </Tooltip>
+  );
+};
+
+export const Swatch = ({ color }) => (
+  <div
+    style={{
+      width: "21px",
+      height: "21px",
+      borderRadius: "3px",
+      backgroundColor: color,
+    }}
+  />
+);
+
+export const Table = ({ children, columns }) => (
+  <SimpleTable style={{ width: "100%" }}>
+    {columns && (
+      <SimpleTable.Row>
+        {columns.map((column, i) => (
+          <SimpleTable.HeaderCell
+            key={column}
+            style={{
+              width: i === columns.length - 1 ? "auto" : "50%",
+            }}
+          >
+            {column}
+          </SimpleTable.HeaderCell>
+        ))}
+      </SimpleTable.Row>
+    )}
+    {children}
+  </SimpleTable>
+);
+
+export const Row = ({ children, style }) => (
+  <SimpleTable.Row
+    style={{
+      borderBottom: `1px solid ${tokens.color.gray[300]}`,
+      verticalAlign: "top",
+      ...style,
+    }}
+  >
+    {children}
+  </SimpleTable.Row>
+);
+
+export const Cell = ({ children, ...rest }) => (
+  <SimpleTable.Cell {...rest}>{children}</SimpleTable.Cell>
+);
+
+# Tokens
+
+These tokens are normally used in JavaScript. In almost all cases, you’ll
+want to use the Tailwind CSS utility classnames instead.
+
+## Usage
+
+```js
+import { tokens } from "@conveyorhq/design-tokens";
+```
+
+export const titleize = (string) => {
+  const title = string.replace(/([A-Z])/g, " $1").toLowerCase();
+  return `${title.charAt(0).toUpperCase()}${title.slice(1)}`;
+};
+
+<ul
+  style={{
+    listStyle: "none",
+    padding: 0,
+  }}
+>
+  {categories.map((category) => (
+    <li key={category}>
+      <a href={`#${category}`}>
+        {titleize(category)}
+        {category === "leading" && " (line height)"}
+        {category === "screenWidth" && " (breakpoints)"}
+        {category === "tracking" && " (letter spacing)"}
+        {category === "type" && " (font family)"}
+      </a>
+    </li>
+  ))}
+</ul>
+
+<div>
+  <br />
+  <br />
+  {categories.map((category) => (
+    <div key={category} id={category}>
+      <h2>
+        {titleize(category)}
+        {category === "leading" && " (line height)"}
+        {category === "screenWidth" && " (breakpoints)"}
+        {category === "tracking" && " (letter spacing)"}
+        {category === "type" && " (font family)"}
+      </h2>
+      <p>
+        {category === "color" ? (
+          <>
+            <code>tokens.{category}[key]</code> or{" "}
+            <code>tokens.{category}[key][key]</code>
+          </>
+        ) : (
+          <code>tokens.{category}[key]</code>
+        )}
+      </p>
+      {category === "fontWeight" && (
+        <p>Weight can only be applied to Neue Montreal.</p>
+      )}
+      <Table columns={["Key", "Value", ""]}>
+        {Object.keys(tokens[category]).map((key) => (
+          <Row key={key}>
+            <Cell>
+              <code>{key}</code>
+            </Cell>
+            <Cell
+              colspan={typeof tokens[category][key] === "object" ? 2 : null}
+            >
+              {typeof tokens[category][key] === "object" ? (
+                <Table>
+                  {Object.keys(tokens[category][key]).map((k, i) => (
+                    <Row
+                      key={k}
+                      style={
+                        i === Object.keys(tokens[category][key]).length - 1
+                          ? {
+                              borderBottom: 0,
+                            }
+                          : {}
+                      }
+                    >
+                      <Cell style={{ width: "50%" }}>
+                        <code>{k}</code>
+                      </Cell>
+                      <Cell style={{ width: "50%" }}>
+                        <div style={{ display: "flex", gap: "4px" }}>
+                          <code>{tokens[category][key][k]}</code>
+                          {category === "color" && (
+                            <Swatch color={tokens[category][key][k]} />
+                          )}
+                        </div>
+                      </Cell>
+                      <Cell style={{ width: "auto" }}>
+                        {typeof tokens[category][key][k] !== "object" && (
+                          <>
+                            {isNaN(parseInt(k, 10)) ? (
+                              <ClickToCopy
+                                text={`tokens.${category}.${key}.${k}`}
+                              />
+                            ) : (
+                              <ClickToCopy
+                                text={`tokens.${category}.${key}[${k}]`}
+                              />
+                            )}
+                          </>
+                        )}
+                      </Cell>
+                    </Row>
+                  ))}
+                </Table>
+              ) : (
+                <div style={{ display: "flex", gap: "4px" }}>
+                  {category === "type" ? (
+                    <code>
+                      <pre style={{ fontSize: "inherit" }}>
+                        {tokens[category][key].replaceAll(", ", ",\n")}
+                      </pre>
+                    </code>
+                  ) : (
+                    <code>{tokens[category][key]}</code>
+                  )}
+                  {category === "color" && (
+                    <Swatch color={tokens[category][key]} />
+                  )}
+                </div>
+              )}
+            </Cell>
+            {typeof tokens[category][key] !== "object" && (
+              <Cell style={{ textAlign: "right" }}>
+                {isNaN(parseInt(key, 10)) ? (
+                  <ClickToCopy text={`tokens.${category}.${key}`} />
+                ) : (
+                  <ClickToCopy text={`tokens.${category}[${key}]`} />
+                )}
+              </Cell>
+            )}
+          </Row>
+        ))}
+      </Table>
+      <br />
+      <br />
+    </div>
+  ))}
+</div>

package/src/docs/Typography.story.mdx

@@ -1,140 +1,66 @@
 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.";
 
 # Typography
 
-## Fonts
+## Sans Serif Font – Neue Montreal
 
-### Neue Montreal (normal)
+### Regular
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.normal}
-  fontFamily={fontFamily.sans}
+  fontWeight={tokens.fontWeight.regular}
+  fontFamily={tokens.type.sans.split(", ")}
   sampleText={sampleText}
 />
 
-### Neue Montreal (medium)
+### Medium
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.medium}
-  fontFamily={fontFamily.sans}
+  fontWeight={tokens.fontWeight.medium}
+  fontFamily={tokens.type.sans.split(", ")}
   sampleText={sampleText}
 />
 
-### Neue Montreal (bold)
+### Bold
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.bold}
-  fontFamily={fontFamily.sans}
+  fontWeight={tokens.fontWeight.bold}
+  fontFamily={tokens.type.sans.split(", ")}
   sampleText={sampleText}
 />
 
-### IBM Plex Serif (semi-bold)
+## Serif Font – Galaxie Copernicus
+
+### Bold
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={600}
-  fontFamily={fontFamily.serif}
+  fontFamily={tokens.type.serif.split(", ")}
   sampleText={sampleText}
 />
 
-### Monospace (normal)
+## Monospace Font
+
+### Regular
 
 <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]}</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`