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

package/src/docs/brand-components/BrandCheckbox.story.mdx

@@ -1,63 +0,0 @@
-import { useState } from "react";
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME } from "../../types";
-import { Checkbox } from "../../components/Checkbox";
-
-export const decorators = [
-  (storyFn) => (
-    <div className="p-8" style={{ backgroundColor: "#132433" }}>
-      {storyFn()}
-    </div>
-  ),
-];
-
-<Meta
-  title="Components/Forms/Checkbox (Branded)"
-  component={Checkbox}
-  decorators={decorators}
-/>
-
-# Brand Checkbox
-
-The [`Checkbox`](/?path=/docs/components-forms-checkbox--default) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Checkbox` is shown below. If a `Checkbox` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Checkbox`'s `theme` prop.
-
-<Preview>
-  <Story name="Brand Checkbox - Default">
-    <Checkbox theme={THEME.BRAND} label="Unchecked" />
-    <Checkbox theme={THEME.BRAND} checked label="Checked" />
-  </Story>
-</Preview>
-
-## Demos
-
-### Interactive
-
-<Preview>
-  <Story name="Brand Checkbox - Interactive">
-    {() => {
-      const [checked, setChecked] = useState(false);
-      const handleCheckboxClick = () => {
-        setChecked(!checked);
-      };
-      return (
-        <Checkbox
-          theme={THEME.BRAND}
-          label="Interactive"
-          checked={checked}
-          onChange={handleCheckboxClick}
-        />
-      );
-    }}
-  </Story>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <Story name="Brand Checkbox - Disabled">
-    <Checkbox theme={THEME.BRAND} label="Unchecked" />
-    <Checkbox theme={THEME.BRAND} checked label="Checked" />
-    <Checkbox theme={THEME.BRAND} label="Disabled" disabled />
-    <Checkbox theme={THEME.BRAND} label="Checked + Disabled" checked disabled />
-  </Story>
-</Preview>

package/src/docs/brand-components/BrandFormGroup.story.mdx

@@ -1,76 +0,0 @@
-import { useState } from "react";
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME, STATUS_VARIANT } from "../../types";
-import { ThemeContext } from "../../contexts/theme";
-import { Input } from "../../components/Input";
-import { Button } from "../../components/Button";
-import { Textarea } from "../../components/Textarea";
-import { FormGroup } from "../../components/FormGroup";
-import { Description } from "../../components/Description";
-import { InputFeedback } from "../../components/InputFeedback";
-import { Label } from "../../components/Label";
-
-export const decorators = [
-  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
-];
-
-<Meta
-  title="Components/Forms/Form Group (Branded)"
-  component={Input}
-  decorators={decorators}
-/>
-
-# Brand Form Group
-
-The [`FormGroup`](/?path=/docs/components-formgroup--formgroup) component is also available in a `brand` theme variant. `FormGroup` will act as a `ThemeContext.Provider` to its children, providing the brand theme to its `Labels`, `Descriptions`, and inputs. If a `FormGroup` itself is within a `ThemeContext.Provider`, it will automatically use that as its `theme`. To override this, provide a value to the `FormGroups`'s `theme` prop.
-
-<Preview>
-  <Story name="FormGroup">
-    <FormGroup theme={THEME.BRAND}>
-      <Label>Label</Label>
-      <Description>Additional descriptor text, if needed.</Description>
-      <Textarea rows={2} />
-    </FormGroup>
-  </Story>
-</Preview>
-
-## Demos
-
-### Required
-
-<Preview>
-  <Story name="Required">
-    {() => {
-      const [inputValue, setInputValue] = useState("");
-      const [isError, setIsError] = useState(false);
-      const handleInputChange = (e) => {
-        const newVal = e.target.value;
-        setInputValue(newVal);
-      };
-      const handleSubmit = (e) => {
-        e.preventDefault();
-        setIsError(!inputValue);
-      };
-      return (
-        <ThemeContext.Provider value={THEME.BRAND}>
-          <form onSubmit={handleSubmit}>
-            <FormGroup
-              isRequired
-              variant={isError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT}
-            >
-              <Label>Label</Label>
-              <Description>Additional descriptor text, if needed.</Description>
-              <Textarea
-                rows={2}
-                value={inputValue}
-                onChange={handleInputChange}
-              />
-              {isError && <InputFeedback>This field is required</InputFeedback>}
-            </FormGroup>
-            <Button type="submit">Submit</Button>
-          </form>
-        </ThemeContext.Provider>
-      );
-    }}
-  </Story>
-</Preview>

package/src/docs/brand-components/BrandInput.story.mdx

@@ -1,41 +0,0 @@
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME } from "../../types";
-import { Input } from "../../components/Input";
-
-export const decorators = [
-  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
-];
-
-<Meta
-  title="Components/Forms/Input (Branded)"
-  component={Input}
-  decorators={decorators}
-/>
-
-# Brand Input
-
-The [`Input`](/?path=/docs/components-input--input) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Input` is shown below. If an `Input` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Input`'s `theme` prop.
-
-<Preview>
-  <Story name="Brand Input">
-    <Input type="text" theme={THEME.BRAND} />
-  </Story>
-</Preview>
-
-## Demos
-
-### Disabled
-
-<Preview>
-  <Story name="Disabled">
-    <Input type="text" theme={THEME.BRAND} value="Disabled" disabled />
-  </Story>
-</Preview>
-
-### With Placeholder
-
-<Preview>
-  <Story name="Placeholder">
-    <Input type="text" theme={THEME.BRAND} placeholder="Placeholder Text" />
-  </Story>
-</Preview>

package/src/docs/brand-components/BrandRadio.story.mdx

@@ -1,45 +0,0 @@
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME } from "../../types";
-import { Radio } from "../../components/Radio";
-
-export const decorators = [
-  (storyFn) => (
-    <div className="p-8" style={{ backgroundColor: "#132433" }}>
-      {storyFn()}
-    </div>
-  ),
-];
-
-<Meta
-  title="Components/Forms/Radio (Branded)"
-  component={Radio}
-  decorators={decorators}
-/>
-
-# Brand Radio
-
-The [`Radio`](/?path=/docs/components-forms-radio--default) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Radio` is shown below. If a `Radio` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Radio`'s `theme` prop.
-
-<Preview>
-  <Story name="Brand Radio - Default">
-    <Radio.Group>
-      <Radio theme={THEME.BRAND} label="Unchecked" />
-      <Radio theme={THEME.BRAND} checked label="Checked" />
-    </Radio.Group>
-  </Story>
-</Preview>
-
-## Demos
-
-### Disabled
-
-<Preview>
-  <Story name="Brand Radio - Disabled">
-    <Radio.Group>
-      <Radio theme={THEME.BRAND} label="Unchecked" />
-      <Radio theme={THEME.BRAND} checked label="Checked" />
-      <Radio theme={THEME.BRAND} label="Disabled" disabled />
-      <Radio theme={THEME.BRAND} label="Checked + Disabled" checked disabled />
-    </Radio.Group>
-  </Story>
-</Preview>

package/src/docs/brand-components/BrandTextArea.story.mdx

@@ -1,41 +0,0 @@
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME } from "../../types";
-import { Textarea } from "../../components/Textarea";
-
-export const decorators = [
-  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
-];
-
-<Meta
-  title="Components/Forms/Textarea (Branded)"
-  component={Textarea}
-  decorators={decorators}
-/>
-
-# Brand Textarea
-
-The [`Textarea`](/?path=/docs/components-textarea--textarea) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Textarea` is shown below. If a `Textarea` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Textarea`'s `theme` prop.
-
-<Preview>
-  <Story name="Brand Textarea">
-    <Textarea theme={THEME.BRAND} />
-  </Story>
-</Preview>
-
-## Demos
-
-### Disabled
-
-<Preview>
-  <Story name="Disabled">
-    <Textarea theme={THEME.BRAND} value="Disabled" disabled />
-  </Story>
-</Preview>
-
-### With Placeholder
-
-<Preview>
-  <Story name="Placeholder">
-    <Textarea theme={THEME.BRAND} placeholder="Placeholder Text" />
-  </Story>
-</Preview>

package/src/storybook-components/TailwindPropertyClasses.tsx

@@ -1,285 +0,0 @@
-import React, { useMemo, useState } from "react";
-import * as twPlugins from "tailwindcss/lib/plugins";
-import * as corePlugins from "tailwindcss/lib/corePlugins";
-import * as twPluginList from "tailwindcss/lib/corePluginList";
-import resolveConfig from "tailwindcss/resolveConfig";
-import { Box } from "../components/Box";
-import { Heading } from "../components/Heading";
-import { SimpleTable } from "../components/SimpleTable";
-import { Code } from "./Code";
-import { Link } from "../components/Link";
-
-import { tailwindConfig } from "../tokens/_tailwind-config";
-import { camelToTitleCase } from "../utilities";
-import { Flex } from "../components/Flex";
-import { Icon, ICON_TYPE } from "../components/Icon";
-import { Reference } from "../components/Reference";
-
-const config = resolveConfig(tailwindConfig as any);
-
-type Variant =
-  | "responsive"
-  | "first"
-  | "last"
-  | "odd"
-  | "even"
-  | "visited"
-  | "checked"
-  | "group-hover"
-  | "group-focus"
-  | "focus-within"
-  | "hover"
-  | "focus"
-  | "focus-visible"
-  | "active"
-  | "disabled"
-  | "dark";
-
-export const getTailwindPluginList = (): string[] =>
-  twPluginList.corePluginList.filter((p: string) => p !== "preflight").sort();
-
-const useTailwindPluginList = () => {
-  const [pluginList, setPluginList] = useState<string[]>([]);
-  const corePluginList: string[] = twPluginList
-    ? twPluginList.corePluginList
-    : [];
-  if (corePluginList.length - 1 !== pluginList.length) {
-    setPluginList(getTailwindPluginList());
-  }
-  return pluginList;
-};
-
-export interface TailwindPropertyClassesProps {
-  pluginName: string;
-}
-
-const PropertyRow = ({
-  propertyKey,
-  value,
-}: {
-  propertyKey: string;
-  value: { [key: string]: string };
-}) => {
-  return (
-    <SimpleTable.Row className="border-b border-gray-200">
-      <SimpleTable.Cell className="break-words whitespace-pre-wrap">
-        {propertyKey}
-      </SimpleTable.Cell>
-      <SimpleTable.Cell className="break-words whitespace-pre-wrap">
-        <Flex className="flex-col items-start">
-          {Object.keys(value).map((prop, i) => {
-            const isLast = i === Object.keys(value).length - 1;
-            return (
-              <Code key={prop} className={isLast ? "" : "mb-1"}>
-                {prop}: {value[prop]}
-              </Code>
-            );
-          })}
-        </Flex>
-      </SimpleTable.Cell>
-    </SimpleTable.Row>
-  );
-};
-
-interface PropertiesState {
-  [key: string]: {
-    [key: string]: string;
-  };
-}
-
-const getPropertiesStateArray = (state: PropertiesState): PropertiesState[] => {
-  return Array.isArray(state) ? state : [state];
-};
-
-export const TailwindPropertyClasses = ({
-  pluginName,
-}: TailwindPropertyClassesProps) => {
-  const [
-    propertiesState,
-    setPropertiesState,
-  ] = useState<PropertiesState | null>(null);
-
-  const propertiesStateArray = useMemo(() => {
-    return propertiesState ? getPropertiesStateArray(propertiesState) : [];
-  }, [propertiesState]);
-
-  const wrapperFunc = twPlugins[pluginName];
-  if (!wrapperFunc) return null;
-
-  const addUtilities = (properties: PropertiesState) => {
-    if (!propertiesState) {
-      setPropertiesState(properties);
-    }
-  };
-  const themeFunc = (key: string) => {
-    const parts = key.split(".");
-    return parts.reduce<any>((acc, cur) => acc[cur], config.theme);
-  };
-  const variantsFunc = () => {};
-  const prefix = () => "";
-
-  const pluginFunction = wrapperFunc();
-
-  pluginFunction({
-    addUtilities,
-    theme: themeFunc,
-    variants: variantsFunc,
-    prefix,
-    corePlugins: corePlugins.default,
-    addComponents: addUtilities,
-  });
-
-  const headingText = camelToTitleCase(pluginName);
-  const variants: Variant[] = (config.variants as any)[pluginName] || [];
-
-  return (
-    <Box className="mb-10">
-      <Flex className="items-center mb-2 justify-between">
-        <Heading.H2 className="inline-flex items-start" id={headingText}>
-          {headingText}
-        </Heading.H2>
-        <Link href="#tailwind-classes" target="_self" noStyles>
-          <Flex className="items-center text-gray-600 hover:text-gray-700 text-bodySm">
-            Back to top <Icon className="ml-1" icon={ICON_TYPE.CHEVRON_UP} />
-          </Flex>
-        </Link>
-      </Flex>
-      <Flex className="items-center mb-4">
-        Variants:
-        <Reference.Group className="ml-2">
-          {variants.map((v) => {
-            let href = "";
-            switch (v) {
-              case "responsive":
-                href = "https://tailwindcss.com/docs/responsive-design";
-                break;
-              case "first":
-                href =
-                  "https://tailwindcss.com/docs/hover-focus-and-other-states#first-child";
-                break;
-              case "last":
-                href =
-                  "https://tailwindcss.com/docs/hover-focus-and-other-states#last-child";
-                break;
-              case "odd":
-                href =
-                  "https://tailwindcss.com/docs/hover-focus-and-other-states#odd-child";
-                break;
-              case "even":
-                href =
-                  "https://tailwindcss.com/docs/hover-focus-and-other-states#even-child";
-                break;
-              case "visited":
-              case "checked":
-              case "group-hover":
-              case "group-focus":
-              case "focus-within":
-              case "hover":
-              case "focus":
-              case "focus-visible":
-              case "active":
-              case "disabled":
-                href = `https://tailwindcss.com/docs/hover-focus-and-other-states#${v}`;
-                break;
-              case "dark":
-                href = "https://tailwindcss.com/docs/dark-mode";
-                break;
-              default:
-                break;
-            }
-            return (
-              <Reference href={href} target="_blank" key={v}>
-                {v}
-              </Reference>
-            );
-          })}
-        </Reference.Group>
-      </Flex>
-      <SimpleTable className="w-full">
-        <SimpleTable.Head>
-          <SimpleTable.Row>
-            <SimpleTable.HeaderCell className="w-64">
-              Classname
-            </SimpleTable.HeaderCell>
-            <SimpleTable.HeaderCell>Value</SimpleTable.HeaderCell>
-          </SimpleTable.Row>
-        </SimpleTable.Head>
-        <SimpleTable.Body>
-          {propertiesState
-            ? propertiesStateArray.map((propState) => {
-                return Object.keys(propState).map((key) => {
-                  const value = propState[key];
-                  return (
-                    <PropertyRow key={key} propertyKey={key} value={value} />
-                  );
-                });
-              })
-            : null}
-        </SimpleTable.Body>
-      </SimpleTable>
-    </Box>
-  );
-};
-
-export const TailwindPluginList = ({
-  columnCount,
-}: {
-  columnCount: number;
-}) => {
-  const tailwindPluginList = useTailwindPluginList();
-  const itemsPerColumn = useMemo(
-    () => Math.ceil(tailwindPluginList.length / columnCount),
-    [tailwindPluginList.length, columnCount],
-  );
-
-  const dividedPluginList = useMemo(
-    () =>
-      tailwindPluginList.reduce<Array<string[]>>((acc, cur, i) => {
-        const addToColumn = Math.floor(i / itemsPerColumn);
-        let newArray = [...acc];
-        const colExists = !!newArray[addToColumn];
-        if (colExists) {
-          newArray[addToColumn].push(cur);
-        } else {
-          newArray = [...newArray, [cur]];
-        }
-        return newArray;
-      }, []),
-    [itemsPerColumn, tailwindPluginList],
-  );
-
-  return (
-    <Flex className="mb-10">
-      {dividedPluginList.map((pl, i) => {
-        return (
-          <Flex className="flex-col items-start flex-grow" key={pl[i]}>
-            {pl.map((p) => {
-              const formattedName = camelToTitleCase(p);
-              return (
-                <Link
-                  key={p}
-                  href={`#${formattedName}`}
-                  className="block mb-2"
-                  target="_self"
-                >
-                  {formattedName}
-                </Link>
-              );
-            })}
-          </Flex>
-        );
-      })}
-    </Flex>
-  );
-};
-
-export const TailwindPropertiesFullList = () => {
-  const tailwindPluginList = useTailwindPluginList();
-  return (
-    <Box>
-      {tailwindPluginList.map((p) => {
-        return <TailwindPropertyClasses key={p} pluginName={p} />;
-      })}
-    </Box>
-  );
-};

package/src/tailwind.config.ts

@@ -1,6 +0,0 @@
-import { tailwindConfig } from "./tokens/_tailwind-config";
-
-// This file is only meant to convert the ES module into CommonJS.
-// Any config values should be changed in "./tokens/_tailwind-config.ts".
-
-module.exports = tailwindConfig;

package/src/tokens/_tailwind-config.ts

@@ -1,69 +0,0 @@
-import { tokens } from ".";
-
-const {
-  borderColors,
-  borderRadius,
-  borderWidth,
-  boxShadow,
-  colors,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  height,
-  letterSpacing,
-  lineHeight,
-  margin,
-  maxHeight,
-  maxWidth,
-  minWidth,
-  padding,
-  width,
-  willChange,
-  zIndex,
-} = tokens;
-
-export const tailwindConfig = {
-  theme: {
-    backgroundColor: colors,
-    borderColor: borderColors,
-    borderRadius,
-    borderWidth,
-    boxShadow,
-    colors,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    gap: padding,
-    height,
-    letterSpacing,
-    lineHeight,
-    margin,
-    maxHeight,
-    maxWidth,
-    minHeight: height,
-    minWidth,
-    padding,
-    screens: {},
-    textColor: colors,
-    width,
-    willChange,
-    zIndex,
-    extend: {
-      transitionProperty: {
-        input: ["border-color", "box-shadow", "color"],
-      },
-    },
-  },
-  variants: {
-    extend: {
-      backgroundColor: ["group-focus"],
-      boxShadow: ["active"],
-      display: ["group-hover", "group-focus"],
-      opacity: ["group-focus"],
-      placeholderColor: ["focus-within"],
-      visibility: ["group-hover", "group-focus"],
-      textColor: ["group-focus"],
-    },
-    willChange: ["responsive"],
-  },
-};