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

package/src/style-dictionary/src/tracking.js

@@ -0,0 +1,7 @@
+module.exports = {
+  tracking: {
+    tight: { value: "-0.05em" },
+    normal: { value: "0" },
+    wide: { value: "0.05em" },
+  },
+};

package/src/style-dictionary/src/type.js

@@ -0,0 +1,34 @@
+module.exports = {
+  type: {
+    sans: {
+      value: [
+        "'Neue Montreal'",
+        "system-ui",
+        "BlinkMacSystemFont",
+        "-apple-system",
+        "'Segoe UI'",
+        "'Roboto'",
+        "'Oxygen'",
+        "'Ubuntu'",
+        "'Cantarell'",
+        "'Fira Sans'",
+        "'Droid Sans'",
+        "'Helvetica Neue'",
+        "sans-serif",
+      ].join(", "),
+    },
+    serif: {
+      value: ["'Copernicus'", "serif"].join(", "),
+    },
+    mono: {
+      value: [
+        "'Menlo'",
+        "'Monaco'",
+        "'Consolas'",
+        "'Liberation Mono'",
+        "'Courier New'",
+        "monospace",
+      ].join(", "),
+    },
+  },
+};

package/src/style-dictionary/src/width.js

@@ -0,0 +1,32 @@
+const spacing = require("./spacing").spacing;
+
+module.exports = {
+  width: {
+    ...spacing,
+    "one-half": { value: "50%", tailwindId: "1/2" },
+    "one-third": { value: "33.33333%", tailwindId: "1/3" },
+    "two-thirds": { value: "66.66667%", tailwindId: "2/3" },
+    "one-quarter": { value: "25%", tailwindId: "1/4" },
+    "three-quarters": { value: "75%", tailwindId: "3/4" },
+    "one-fifth": { value: "20%", tailwindId: "1/5" },
+    "two-fifths": { value: "40%", tailwindId: "2/5" },
+    "three-fifths": { value: "60%", tailwindId: "3/5" },
+    "four-fifths": { value: "80%", tailwindId: "4/5" },
+    "one-sixth": { value: "16.66667%", tailwindId: "1/6" },
+    "five-sixths": { value: "83.33333%", tailwindId: "5/6" },
+    auto: { value: "auto" },
+    px: { value: "1px" },
+    full: { value: "100%" },
+    screen: { value: "100vw" },
+    "max-content": { value: "max-content" },
+    xs: { value: "20rem" },
+    sm: { value: "30rem" },
+    md: { value: "40rem" },
+    lg: { value: "50rem" },
+    xl: { value: "60rem" },
+    "two-xl": { value: "70rem", tailwindId: "2xl" },
+    "three-xl": { value: "80rem", tailwindId: "3xl" },
+    "four-xl": { value: "90rem", tailwindId: "4xl" },
+    "five-xl": { value: "100rem", tailwindId: "5xl" },
+  },
+};

package/src/style-dictionary/src/z-index.js

@@ -0,0 +1,21 @@
+module.exports = {
+  zIndex: {
+    auto: { value: "auto" },
+    "0": { value: 0 },
+    "10": { value: 10 },
+    "20": { value: 20 },
+    "30": { value: 30 },
+    "40": { value: 40 },
+    "50": { value: 50 },
+    below: { value: -1 },
+    default: { value: 1 },
+    popup: { value: 400 },
+    dialog: { value: 500 },
+    dropdown: { value: 600 },
+    overlay: { value: 700 },
+    menu: { value: 800 },
+    modal: { value: 900 },
+    toast: { value: 1000 },
+    max: { value: 2147483647 },
+  },
+};

package/src/style-dictionary/tailwind.config.js

@@ -0,0 +1,87 @@
+const {
+  borderRadius,
+  borderWidth,
+  color,
+  fontSize,
+  fontWeight,
+  height,
+  leading,
+  screenWidth,
+  shadow,
+  spacing,
+  tracking,
+  type,
+  width,
+  zIndex,
+} = require("./dist/tokens.module");
+
+const colors = {
+  ...color,
+  current: "currentColor",
+  transparent: "transparent",
+};
+
+const borderColor = {
+  DEFAULT: color.gray[400],
+  ...colors,
+};
+
+const margin = {
+  ...spacing,
+  auto: "auto",
+  px: "1px",
+};
+
+const padding = {
+  ...spacing,
+  px: "1px",
+};
+
+const willChange = {
+  auto: "auto",
+  scroll: "scroll-position",
+  contents: "contents",
+  opacity: "opacity",
+  transform: "transform",
+};
+
+const extend = {
+  transitionProperty: {
+    input: ["border-color", "box-shadow", "color"],
+  },
+};
+
+module.exports = {
+  config: {
+    content: [],
+    theme: {
+      backgroundColor: colors,
+      borderColor,
+      borderRadius,
+      borderWidth,
+      boxShadow: shadow,
+      colors,
+      fontFamily: type,
+      fontSize,
+      fontWeight,
+      gap: spacing,
+      height,
+      letterSpacing: tracking,
+      lineHeight: leading,
+      margin,
+      maxHeight: height,
+      maxWidth: width,
+      minHeight: height,
+      minWidth: width,
+      padding,
+      screens: screenWidth,
+      spacing,
+      textColor: colors,
+      width,
+      willChange,
+      zIndex,
+      extend,
+    },
+    plugins: [],
+  },
+};

package/src/tokens/borders.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/border-width
+ */
 export const borderWidth = {
   DEFAULT: "1px",
   "0": "0",
@@ -6,6 +9,9 @@ export const borderWidth = {
   "8": "8px",
 };
 
+/**
+ * @deprecated Please use style-dictionary/border-radius
+ */
 export const borderRadius = {
   none: "0",
   px: "1px",

package/src/tokens/box-shadow.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/shadow
+ */
 export const boxShadow = {
   DEFAULT: "0 2px 4px 0 rgba(0,0,0,0.10)",
   up: "0 -2px 4px 0 rgba(0,0,0,0.10)",

package/src/tokens/colors.ts

@@ -106,6 +106,9 @@ const functionalColors = {
   link: blue["400"],
 };
 
+/**
+ * @deprecated Please use style-dictionary/color
+ */
 export const colors = {
   transparent: "transparent",
   white: "#fff",
@@ -126,6 +129,9 @@ export const colors = {
   ...functionalColors,
 };
 
+/**
+ * @deprecated Please use style-dictionary/color
+ */
 export const borderColors = {
   DEFAULT: gray["400"],
   ...colors,

package/src/tokens/font-family.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/type
+ */
 export const fontFamily = {
   sans: [
     "Neue Montreal",

package/src/tokens/font-size.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/font-size
+ */
 export const fontSize = {
   h1: "26px",
   h2: "20px",

package/src/tokens/font-weight.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/font-weight
+ */
 export const fontWeight = {
   regular: 400,
   medium: 500,

package/src/tokens/height.ts

@@ -1,5 +1,8 @@
 import { positiveScale } from "./sizing-scale";
 
+/**
+ * @deprecated Please use style-dictionary/height
+ */
 export const height = {
   ...positiveScale,
   auto: "auto",

package/src/tokens/index.ts

@@ -14,6 +14,9 @@ import { maxWidth, minWidth, width } from "./width";
 import { willChange } from "./will-change";
 import { zIndex } from "./z-index";
 
+/**
+ * @deprecated Please use the tokens from style-dictionary instead
+ */
 export const tokens = {
   borderColors,
   borderRadius,
@@ -37,8 +40,6 @@ export const tokens = {
   zIndex,
 };
 
-// Deprecated: tokens should be exported as part of the tokens object
-// These exports should be removed in arrow-ds 2.0
 export * from "./borders";
 export * from "./colors";
 export * from "./height";

package/src/tokens/letter-spacing.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/tracking
+ */
 export const letterSpacing = {
   tight: "-0.05em",
   normal: "0",

package/src/tokens/line-height.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/leading
+ */
 export const lineHeight = {
   none: 1,
   tight: 1.25,

package/src/tokens/margin.ts

@@ -1,5 +1,8 @@
 import { positiveScale, negativeScale } from "./sizing-scale";
 
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
 export const margin = {
   ...positiveScale,
   ...negativeScale,

package/src/tokens/padding.ts

@@ -1,5 +1,8 @@
 import { positiveScale } from "./sizing-scale";
 
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
 export const padding = {
   ...positiveScale,
   px: "1px",

package/src/tokens/screens.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/screen-width
+ */
 export const screens = {
   sm: "576px",
   md: "768px",

package/src/tokens/sizing-scale.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
 export const positiveScale = {
   0: "0",
   1: "4px",
@@ -66,6 +69,9 @@ export const positiveScale = {
   64: "256px",
 };
 
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
 export const negativeScale = {
   "-1": "-4px",
   "-2": "-8px",

package/src/tokens/width.ts

@@ -1,5 +1,8 @@
 import { positiveScale } from "./sizing-scale";
 
+/**
+ * @deprecated Please use style-dictionary/width
+ */
 export const width = {
   ...positiveScale,
   "1/2": "50%",
@@ -20,11 +23,17 @@ export const width = {
   "max-content": "max-content",
 };
 
+/**
+ * @deprecated Please use style-dictionary/width
+ */
 export const minWidth = {
   ...positiveScale,
   full: "100%",
 };
 
+/**
+ * @deprecated Please use style-dictionary/width
+ */
 export const maxWidth = {
   ...positiveScale,
   xs: "20rem",

package/src/tokens/will-change.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated
+ */
 export const willChange = {
   auto: "auto",
   scroll: "scroll-position",

package/src/tokens/z-index.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/z-index
+ */
 export const zIndex = {
   auto: "auto",
   "0": 0,

package/src/types/index.ts

@@ -3,6 +3,9 @@ import { positiveScale } from "../tokens/sizing-scale";
 
 export type ClassName = string | Array<string | ClassName>;
 
+/**
+ * @deprecated
+ */
 export enum THEME {
   PRODUCT = "product",
   BRAND = "brand",

package/public/components/Overlay/Overlay.story.d.ts

@@ -1 +0,0 @@
-export {};

package/public/components/Overlay/Overlay.story.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@storybook/react");
-const Story_1 = __importDefault(require("../../storybook-components/Story"));
-const Overlay_1 = require("./Overlay");
-const stories = react_2.storiesOf("Components/Layout/Overlay", module);
-stories.add("Default", () => (react_1.default.createElement(Story_1.default, { title: "Overlay" },
-    react_1.default.createElement(Overlay_1.Overlay, null))));

package/public/components/Svg/Svg.story.d.ts

@@ -1 +0,0 @@
-export {};

package/public/components/Svg/Svg.story.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@storybook/react");
-const Story_1 = __importDefault(require("../../storybook-components/Story"));
-const tokens_1 = require("../../tokens");
-const Svg_1 = require("./Svg");
-const stories = react_2.storiesOf("Components/Images/Svg", module);
-stories.add("Default", () => (react_1.default.createElement(Story_1.default, { title: "Svg" },
-    react_1.default.createElement(Svg_1.Svg, { viewBox: "0 0 300 100", fill: tokens_1.colors.gray["900"] },
-        react_1.default.createElement("circle", { cx: "50", cy: "50", r: "40" })))));

package/public/components/Text/Text.story.d.ts

@@ -1 +0,0 @@
-export {};

package/public/components/Text/Text.story.js

@@ -1,31 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("@storybook/react");
-const Story_1 = __importDefault(require("../../storybook-components/Story"));
-const Text_1 = require("./Text");
-const stories = react_1.storiesOf("Components/Typography/Text", module);
-stories.add("Default", () => (React.createElement(Story_1.default, { title: "Text" },
-    React.createElement(Text_1.Text, null, "This is the Text component"))));

package/public/components/VisuallyHidden/VisuallyHidden.story.d.ts

@@ -1 +0,0 @@
-export {};

package/public/components/VisuallyHidden/VisuallyHidden.story.js

@@ -1,36 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("@storybook/react");
-const Story_1 = __importDefault(require("../../storybook-components/Story"));
-const Box_1 = require("../Box");
-const Icon_1 = require("../Icon");
-const VisuallyHidden_1 = require("./VisuallyHidden");
-const stories = react_1.storiesOf("Components/Disclosure/Visually Hidden", module);
-stories.add("Default", () => (React.createElement(Story_1.default, { title: "VisuallyHidden" },
-    React.createElement(Box_1.Box, { className: "p-12" },
-        React.createElement("button", { type: "button" },
-            React.createElement(VisuallyHidden_1.VisuallyHidden, { as: "span" }, "Sync"),
-            React.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.SYNC }))))));

package/public/components/useStep/ExampleSetupWizard.d.ts

@@ -1,4 +0,0 @@
-export declare const ExampleSetupWizard: ({ steps, initialStep, }: {
-    steps: number;
-    initialStep?: number | undefined;
-}) => JSX.Element;

package/public/components/useStep/ExampleSetupWizard.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleSetupWizard = void 0;
-const react_1 = __importDefault(require("react"));
-const Box_1 = require("../Box");
-const Panel_1 = require("../Panel");
-const Button_1 = require("../Button");
-const useStep_1 = require("../../hooks/useStep");
-const ExampleSetupWizard = ({ steps, initialStep, }) => {
-    const { step, goToNextStep, goToPreviousStep, goToStep } = useStep_1.useStep({
-        steps,
-        initialStep,
-    });
-    return (react_1.default.createElement(Box_1.Box, null,
-        react_1.default.createElement(Panel_1.Panel, { className: "p-8" },
-            step === 1 && react_1.default.createElement(react_1.default.Fragment, null, "Step 1"),
-            step === 2 && react_1.default.createElement(react_1.default.Fragment, null, "Step 2"),
-            step === 3 && react_1.default.createElement(react_1.default.Fragment, null, "Step 3"),
-            step === 4 && react_1.default.createElement(react_1.default.Fragment, null, "Step 4")),
-        react_1.default.createElement(Button_1.Button.Group, { className: "mt-4 justify-end" },
-            step !== 1 && (react_1.default.createElement(Button_1.Button.Group, { className: "mr-auto" },
-                react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: goToPreviousStep }, "Previous Step"))),
-            react_1.default.createElement(Button_1.Button, { variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: () => {
-                    goToStep(1);
-                } }, "Cancel"),
-            step === 4 ? (react_1.default.createElement(Button_1.Button, { onClick: () => {
-                    console.log("Create button clicked");
-                } }, "Create")) : (react_1.default.createElement(Button_1.Button, { onClick: goToNextStep }, "Next Step")))));
-};
-exports.ExampleSetupWizard = ExampleSetupWizard;

package/src/components/Overlay/Overlay.md

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

package/src/components/Overlay/Overlay.story.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Overlay } from "./Overlay";
-
-const stories = storiesOf("Components/Layout/Overlay", module);
-
-stories.add("Default", () => (
-  <Story title="Overlay">
-    <Overlay />
-  </Story>
-));

package/src/components/Svg/Svg.md

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

package/src/components/Svg/Svg.story.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { colors } from "../../tokens";
-import { Svg } from "./Svg";
-
-const stories = storiesOf("Components/Images/Svg", module);
-
-stories.add("Default", () => (
-  <Story title="Svg">
-    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
-      <circle cx="50" cy="50" r="40" />
-    </Svg>
-  </Story>
-));

package/src/components/Text/Text.md

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

package/src/components/Text/Text.story.tsx

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Text } from "./Text";
-
-const stories = storiesOf("Components/Typography/Text", module);
-
-stories.add("Default", () => (
-  <Story title="Text">
-    <Text>This is the Text component</Text>
-  </Story>
-));