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

package/public/components/TopBar/TopBar.js

@@ -1,24 +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.TopBar = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Flex_1 = require("../Flex");
-const bem_1 = require("../../utilities/bem");
-const TopBarSubNavItem_1 = require("./TopBarSubNavItem");
-const TopBarSubNav_1 = require("./TopBarSubNav");
-const TopBarBreadcrumbs_1 = require("./TopBarBreadcrumbs");
-const b = bem_1.bemHOF("TopBar");
-const TopBar = ({ leftSlot, middleSlot, rightSlot, className, ...rest }) => {
-    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(b(), className) }, rest),
-        react_1.default.createElement(Flex_1.Flex, { className: b({ e: "left-slot" }) }, leftSlot),
-        middleSlot && (react_1.default.createElement(Flex_1.Flex, { className: b({ e: "middle-slot" }) }, middleSlot)),
-        rightSlot && react_1.default.createElement(Flex_1.Flex, { className: b({ e: "right-slot" }) }, rightSlot)));
-};
-exports.TopBar = TopBar;
-TopBar.SubNav = TopBarSubNav_1.TopBarSubNav;
-TopBar.SubNavItem = TopBarSubNavItem_1.TopBarSubNavItem;
-TopBar.Breadcrumbs = TopBarBreadcrumbs_1.TopBarBreadcrumbs;

package/public/components/TopBar/TopBarBreadcrumbs.d.ts

@@ -1,10 +0,0 @@
-import { BoxProps } from "../Box";
-import { LinkProps } from "../Link";
-export interface BreadcrumbsProps extends BoxProps {
-    currentPageTitle: string;
-    currentPageSubtitle?: string;
-    parentTitle?: string;
-    parentLinkTitle?: string;
-    parentLinkProps?: LinkProps;
-}
-export declare const TopBarBreadcrumbs: (props: BreadcrumbsProps) => JSX.Element;

package/public/components/TopBar/TopBarBreadcrumbs.js

@@ -1,34 +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.TopBarBreadcrumbs = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Box_1 = require("../Box");
-const Link_1 = require("../Link");
-const bem_1 = require("../../utilities/bem");
-const Icon_1 = require("../Icon");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const b = bem_1.bemHOF("TopBar");
-const TopBarBreadcrumbs = (props) => {
-    const { className, currentPageTitle, currentPageSubtitle, parentTitle, parentLinkTitle, parentLinkProps, ...rest } = props;
-    let parentElement = null;
-    if (parentLinkTitle) {
-        const propsClasses = parentLinkProps !== undefined ? parentLinkProps.className : undefined;
-        const linkClasses = classnames_1.default(b({ e: "bc-parent" }), b({ e: "bc-parent", m: "link" }), propsClasses);
-        parentElement = (react_1.default.createElement(Link_1.Link, Object.assign({ noStyles: true }, parentLinkProps, { className: linkClasses }),
-            react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.LEVEL_UP_ALT, flip: "horizontal", className: b({ e: "bc-parent-link-icon" }) }),
-            parentLinkTitle));
-    }
-    if (parentTitle) {
-        parentElement = (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(b({ e: "bc-parent" }), b({ e: "bc-parent", m: "title" })) }, parentTitle));
-    }
-    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(b({ e: "bc" }), className) }, rest),
-        parentElement,
-        react_1.default.createElement(Text_1.Text, { as: "span", className: b({ e: "bc-page-title" }) }, currentPageTitle),
-        currentPageSubtitle && (react_1.default.createElement(Text_1.Text, { as: "span", className: b({ e: "bc-page-subtitle" }) }, currentPageSubtitle))));
-};
-exports.TopBarBreadcrumbs = TopBarBreadcrumbs;

package/public/components/TopBar/TopBarSubNav.d.ts

@@ -1,2 +0,0 @@
-import { BoxProps } from "../Box";
-export declare const TopBarSubNav: (props: BoxProps) => JSX.Element;

package/public/components/TopBar/TopBarSubNav.js

@@ -1,16 +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.TopBarSubNav = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Flex_1 = require("../Flex");
-const bem_1 = require("../../utilities/bem");
-const b = bem_1.bemHOF("TopBar");
-const TopBarSubNav = (props) => {
-    const { className, ...rest } = props;
-    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ as: "nav", className: classnames_1.default(b({ e: "subnav" }), className) }, rest)));
-};
-exports.TopBarSubNav = TopBarSubNav;

package/public/components/TopBar/TopBarSubNavItem.d.ts

@@ -1,5 +0,0 @@
-import { LinkProps } from "../Link";
-export interface SubNavItemProps extends LinkProps {
-    isActive?: boolean;
-}
-export declare const TopBarSubNavItem: (props: SubNavItemProps) => JSX.Element;

package/public/components/TopBar/TopBarSubNavItem.js

@@ -1,17 +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.TopBarSubNavItem = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Link_1 = require("../Link");
-const bem_1 = require("../../utilities/bem");
-const b = bem_1.bemHOF("TopBar");
-const TopBarSubNavItem = (props) => {
-    const { isActive = false, className, ...rest } = props;
-    const classes = classnames_1.default(b({ e: "subnav-item" }), { [b({ e: "subnav-item", m: "isActive" })]: isActive }, className);
-    return react_1.default.createElement(Link_1.Link, Object.assign({ className: classes, noStyles: true }, rest));
-};
-exports.TopBarSubNavItem = TopBarSubNavItem;

package/public/components/TopBar/index.d.ts

@@ -1 +0,0 @@
-export * from "./TopBar";

package/public/components/TopBar/index.js

@@ -1,13 +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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TopBar"), exports);

package/public/components/VendorLogo/VendorLogo.d.ts

@@ -1,20 +0,0 @@
-import { ReactElement } from "react";
-import { BoxProps } from "../Box";
-import { ICON_TYPE } from "../Icon";
-export declare type VendorLogoSize = 4 | 6 | 10 | 14 | 20 | 40;
-interface VendorLogoBadgeProps extends BoxProps {
-    icon: ICON_TYPE;
-    size?: VendorLogoSize;
-}
-interface VendorLogoProps extends BoxProps {
-    vendorName: string;
-    src?: string;
-    alt?: string;
-    size?: VendorLogoSize;
-    children?: ReactElement<VendorLogoBadgeProps>;
-}
-export declare const VendorLogo: {
-    ({ src, vendorName, alt, className, size, children, }: VendorLogoProps): JSX.Element;
-    Badge: ({ icon, size, className, ...rest }: VendorLogoBadgeProps) => JSX.Element;
-};
-export {};

package/public/components/VendorLogo/VendorLogo.js

@@ -1,57 +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 });
-exports.VendorLogo = void 0;
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const bem_1 = require("../../utilities/bem");
-const Box_1 = require("../Box");
-const Icon_1 = require("../Icon");
-const cn = "VendorLogo";
-const VendorLogoBadge = ({ icon, size = 10, className, ...rest }) => {
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "badge" }), className), style: {
-            fontSize: `${size}px`,
-        } }, rest),
-        react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: icon })));
-};
-const VendorLogo = ({ src, vendorName, alt, className, size = 10, children, }) => {
-    const [loadSuccess, setLoadSuccess] = react_1.useState(!!src);
-    const firstLetter = vendorName && vendorName.length > 0 ? vendorName[0] : "";
-    react_1.useEffect(() => {
-        setLoadSuccess(!!src);
-    }, [src]);
-    return (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(`${bem_1.bem(cn)} w-${size} h-${size}`, className) },
-        loadSuccess ? (react_1.default.createElement("img", { className: bem_1.bem(cn, { e: "img" }), src: src, alt: alt || vendorName || "", onError: () => {
-                setLoadSuccess(false);
-            } })) : (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "placeholder" }), style: {
-                fontSize: `${size * 1.6}px`,
-            } }, firstLetter.toUpperCase())),
-        react_1.Children.map(children, (child) => {
-            return react_1.cloneElement(child, {
-                size,
-            });
-        })));
-};
-exports.VendorLogo = VendorLogo;
-exports.VendorLogo.Badge = VendorLogoBadge;

package/public/components/VendorLogo/index.d.ts

@@ -1 +0,0 @@
-export * from "./VendorLogo";

package/public/components/VendorLogo/index.js

@@ -1,13 +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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./VendorLogo"), exports);

package/public/storybook-components/TailwindPropertyClasses.d.ts

@@ -1,9 +0,0 @@
-export declare const getTailwindPluginList: () => string[];
-export interface TailwindPropertyClassesProps {
-    pluginName: string;
-}
-export declare const TailwindPropertyClasses: ({ pluginName, }: TailwindPropertyClassesProps) => JSX.Element | null;
-export declare const TailwindPluginList: ({ columnCount, }: {
-    columnCount: number;
-}) => JSX.Element;
-export declare const TailwindPropertiesFullList: () => JSX.Element;

package/public/storybook-components/TailwindPropertyClasses.js

@@ -1,194 +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 });
-exports.TailwindPropertiesFullList = exports.TailwindPluginList = exports.TailwindPropertyClasses = exports.getTailwindPluginList = void 0;
-const react_1 = __importStar(require("react"));
-const twPlugins = __importStar(require("tailwindcss/lib/plugins"));
-const corePlugins = __importStar(require("tailwindcss/lib/corePlugins"));
-const twPluginList = __importStar(require("tailwindcss/lib/corePluginList"));
-const resolveConfig_1 = __importDefault(require("tailwindcss/resolveConfig"));
-const Box_1 = require("../components/Box");
-const Heading_1 = require("../components/Heading");
-const SimpleTable_1 = require("../components/SimpleTable");
-const Code_1 = require("./Code");
-const Link_1 = require("../components/Link");
-const _tailwind_config_1 = require("../tokens/_tailwind-config");
-const utilities_1 = require("../utilities");
-const Flex_1 = require("../components/Flex");
-const Icon_1 = require("../components/Icon");
-const Reference_1 = require("../components/Reference");
-const config = resolveConfig_1.default(_tailwind_config_1.tailwindConfig);
-const getTailwindPluginList = () => twPluginList.corePluginList.filter((p) => p !== "preflight").sort();
-exports.getTailwindPluginList = getTailwindPluginList;
-const useTailwindPluginList = () => {
-    const [pluginList, setPluginList] = react_1.useState([]);
-    const corePluginList = twPluginList
-        ? twPluginList.corePluginList
-        : [];
-    if (corePluginList.length - 1 !== pluginList.length) {
-        setPluginList(exports.getTailwindPluginList());
-    }
-    return pluginList;
-};
-const PropertyRow = ({ propertyKey, value, }) => {
-    return (react_1.default.createElement(SimpleTable_1.SimpleTable.Row, { className: "border-b border-gray-200" },
-        react_1.default.createElement(SimpleTable_1.SimpleTable.Cell, { className: "break-words whitespace-pre-wrap" }, propertyKey),
-        react_1.default.createElement(SimpleTable_1.SimpleTable.Cell, { className: "break-words whitespace-pre-wrap" },
-            react_1.default.createElement(Flex_1.Flex, { className: "flex-col items-start" }, Object.keys(value).map((prop, i) => {
-                const isLast = i === Object.keys(value).length - 1;
-                return (react_1.default.createElement(Code_1.Code, { key: prop, className: isLast ? "" : "mb-1" },
-                    prop,
-                    ": ",
-                    value[prop]));
-            })))));
-};
-const getPropertiesStateArray = (state) => {
-    return Array.isArray(state) ? state : [state];
-};
-const TailwindPropertyClasses = ({ pluginName, }) => {
-    const [propertiesState, setPropertiesState,] = react_1.useState(null);
-    const propertiesStateArray = react_1.useMemo(() => {
-        return propertiesState ? getPropertiesStateArray(propertiesState) : [];
-    }, [propertiesState]);
-    const wrapperFunc = twPlugins[pluginName];
-    if (!wrapperFunc)
-        return null;
-    const addUtilities = (properties) => {
-        if (!propertiesState) {
-            setPropertiesState(properties);
-        }
-    };
-    const themeFunc = (key) => {
-        const parts = key.split(".");
-        return parts.reduce((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 = utilities_1.camelToTitleCase(pluginName);
-    const variants = config.variants[pluginName] || [];
-    return (react_1.default.createElement(Box_1.Box, { className: "mb-10" },
-        react_1.default.createElement(Flex_1.Flex, { className: "items-center mb-2 justify-between" },
-            react_1.default.createElement(Heading_1.Heading.H2, { className: "inline-flex items-start", id: headingText }, headingText),
-            react_1.default.createElement(Link_1.Link, { href: "#tailwind-classes", target: "_self", noStyles: true },
-                react_1.default.createElement(Flex_1.Flex, { className: "items-center text-gray-600 hover:text-gray-700 text-bodySm" },
-                    "Back to top ",
-                    react_1.default.createElement(Icon_1.Icon, { className: "ml-1", icon: Icon_1.ICON_TYPE.CHEVRON_UP })))),
-        react_1.default.createElement(Flex_1.Flex, { className: "items-center mb-4" },
-            "Variants:",
-            react_1.default.createElement(Reference_1.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 (react_1.default.createElement(Reference_1.Reference, { href: href, target: "_blank", key: v }, v));
-            }))),
-        react_1.default.createElement(SimpleTable_1.SimpleTable, { className: "w-full" },
-            react_1.default.createElement(SimpleTable_1.SimpleTable.Head, null,
-                react_1.default.createElement(SimpleTable_1.SimpleTable.Row, null,
-                    react_1.default.createElement(SimpleTable_1.SimpleTable.HeaderCell, { className: "w-64" }, "Classname"),
-                    react_1.default.createElement(SimpleTable_1.SimpleTable.HeaderCell, null, "Value"))),
-            react_1.default.createElement(SimpleTable_1.SimpleTable.Body, null, propertiesState
-                ? propertiesStateArray.map((propState) => {
-                    return Object.keys(propState).map((key) => {
-                        const value = propState[key];
-                        return (react_1.default.createElement(PropertyRow, { key: key, propertyKey: key, value: value }));
-                    });
-                })
-                : null))));
-};
-exports.TailwindPropertyClasses = TailwindPropertyClasses;
-const TailwindPluginList = ({ columnCount, }) => {
-    const tailwindPluginList = useTailwindPluginList();
-    const itemsPerColumn = react_1.useMemo(() => Math.ceil(tailwindPluginList.length / columnCount), [tailwindPluginList.length, columnCount]);
-    const dividedPluginList = react_1.useMemo(() => tailwindPluginList.reduce((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 (react_1.default.createElement(Flex_1.Flex, { className: "mb-10" }, dividedPluginList.map((pl, i) => {
-        return (react_1.default.createElement(Flex_1.Flex, { className: "flex-col items-start flex-grow", key: pl[i] }, pl.map((p) => {
-            const formattedName = utilities_1.camelToTitleCase(p);
-            return (react_1.default.createElement(Link_1.Link, { key: p, href: `#${formattedName}`, className: "block mb-2", target: "_self" }, formattedName));
-        })));
-    })));
-};
-exports.TailwindPluginList = TailwindPluginList;
-const TailwindPropertiesFullList = () => {
-    const tailwindPluginList = useTailwindPluginList();
-    return (react_1.default.createElement(Box_1.Box, null, tailwindPluginList.map((p) => {
-        return react_1.default.createElement(exports.TailwindPropertyClasses, { key: p, pluginName: p });
-    })));
-};
-exports.TailwindPropertiesFullList = TailwindPropertiesFullList;

package/public/tailwind.config.d.ts

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

package/public/tailwind.config.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _tailwind_config_1 = require("./tokens/_tailwind-config");
-module.exports = _tailwind_config_1.tailwindConfig;