@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/public/tokens/_tailwind-config.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tailwindConfig = void 0;
-const _1 = require(".");
-const { borderColors, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, fontWeight, height, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minWidth, padding, width, willChange, zIndex, } = _1.tokens;
-exports.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"],
-    },
-};

package/src/components/Absolute/Absolute.story.mdx

@@ -1,26 +0,0 @@
-import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
-import { ComponentHeading } from "../../storybook-components";
-import { Absolute } from "./Absolute";
-
-<Meta title="Components/Positioning/Absolute" component={Absolute} />
-
-<ComponentHeading
-  componentName="Absolute"
-  description="A component for wrapping children in an absolute-positioned container"
-  sourcePath="src/components/Absolute/Absolute.tsx"
-  hideDemosLink
-/>
-
-```jsx
-import { Absolute } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="Absolute">
-    <Absolute>This is the Absolute component</Absolute>
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={Absolute} />

package/src/components/Absolute/Absolute.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-
-export const Absolute = (props: BoxProps) => {
-  const { className, ...rest } = props;
-
-  return <Box className={classNames("absolute", className)} {...rest} />;
-};

package/src/components/Absolute/index.ts

@@ -1 +0,0 @@
-export { Absolute } from "./Absolute";

package/src/components/Appbar/Appbar.story.mdx

@@ -1,201 +0,0 @@
-import {
-  Meta,
-  Preview,
-  Props,
-  Story,
-  SourceState,
-} from "@storybook/addon-docs/blocks";
-import { action } from "@storybook/addon-actions";
-import { ComponentHeading } from "../../storybook-components";
-import { COMPLY_COMPANY_NAME } from "../../types";
-import { AVATAR_TYPE } from "../Avatar";
-import { Appbar } from "./Appbar";
-
-<Meta title="Components/Layout/Appbar" component={Appbar} />
-
-<ComponentHeading
-  componentName="Appbar"
-  description="Top-most level of navigation for Conveyor apps"
-  sourcePath="src/components/Appbar/Appbar.tsx"
-/>
-
-```jsx
-import { Appbar } from "@conveyorhq/arrow-ds";
-```
-
-export const user = {
-  email: "tom@conveyorhq.com",
-  name: "Tom",
-};
-
-export const userMenu = [
-  {
-    name: "Your Profile",
-    url: "/",
-  },
-  {
-    name: "Your Training Assignments",
-    url: "/",
-  },
-  {
-    name: "Your Analytics Preferences",
-    url: "/",
-  },
-  {
-    name: "Team",
-    url: "/",
-  },
-];
-
-export const organizations = [
-  {
-    name: "Conveyor",
-    provider: "conveyorhq.com",
-    status: "claimed",
-  },
-  {
-    name: "Aptible",
-    provider: "aptible.com",
-    status: "claimed",
-  },
-];
-
-export const AppbarNav = () => (
-  <Appbar.Tabs>
-    {["Dashboard", "Assets", "ISMS", "Tickets"].map((item) => (
-      <Appbar.Tab key={item} href={`/${item.toLowerCase()}`} active={false}>
-        {item}
-      </Appbar.Tab>
-    ))}
-  </Appbar.Tabs>
-);
-
-export const AppbarUserWithDropdown = () => {
-  return (
-    <Appbar.UserDropdown
-      name={user.name}
-      avatar={<Appbar.UserAvatar email={user.email} type={AVATAR_TYPE.USER} />}
-    >
-      <Appbar.UserDropdownMenu>
-        {userMenu.map((item) => (
-          <Appbar.UserDropdownMenuItem key={item.name} href={item.url}>
-            {item.name}
-          </Appbar.UserDropdownMenuItem>
-        ))}
-        <Appbar.UserDropdownMenuItem as="button" onClick={action("Log out")}>
-          Log out
-        </Appbar.UserDropdownMenuItem>
-      </Appbar.UserDropdownMenu>
-    </Appbar.UserDropdown>
-  );
-};
-
-export const AppbarUser = () => (
-  <Appbar.User
-    name={user.name}
-    avatar={<Appbar.UserAvatar email={user.email} type={AVATAR_TYPE.USER} />}
-  />
-);
-
-export const AppbarOrganization = ({ status }) => (
-  <Appbar.Organization
-    name={organizations[0].name}
-    status={status}
-    logoSrc={`https://logo.clearbit.com/${organizations[0].provider}`}
-  />
-);
-
-export const AppbarOrganizationSwitcher = ({ status }) => (
-  <Appbar.Organization
-    name={organizations[0].name}
-    status={status}
-    logoSrc={`https://logo.clearbit.com/${organizations[0].provider}`}
-    onClick={() => {
-      console.log("Organization switcher clicked");
-    }}
-  />
-);
-
-<Preview>
-  <Story name="Appbar">
-    <Appbar
-      logoProps={{
-        href: "/",
-      }}
-      nav={<AppbarNav />}
-      user={<Appbar.LogInButton as="button" onClick={action("Log in")} />}
-    />
-  </Story>
-</Preview>
-
-The appbar component provides the top-most level of navigation for an Aptible
-application. It provides slots for primary navigation, organization, and user
-navigation.
-
-In a Comply application, the appbar should be placed as a child within the frame
-area where `name="appbar"`.
-
-## Props
-
-<Props of={Appbar} />
-
-## Demos
-
-### Without Nav or User Menu
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar Without Nav or User Menu">
-    <Appbar />
-  </Story>
-</Preview>
-
-### With User
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar With User">
-    <Appbar nav={<AppbarNav />} user={<AppbarUser />} />
-  </Story>
-</Preview>
-
-### With User Dropdown
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar With User Dropdown">
-    <Appbar nav={<AppbarNav />} user={<AppbarUserWithDropdown />} />
-  </Story>
-</Preview>
-
-### With Organization Switcher
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar With Organization Switcher">
-    <Appbar
-      nav={<AppbarNav />}
-      user={<AppbarUserWithDropdown />}
-      organization={<AppbarOrganizationSwitcher status="unclaimed" />}
-    />
-  </Story>
-</Preview>
-
-### In a Demo Environment
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar in Demo Environment">
-    <Appbar nav={<AppbarNav />} isDemoEnvironment />
-  </Story>
-</Preview>
-
-### With Aptible logo
-
-<Preview>
-  <Story name="Appbar with Aptible logo">
-    <Appbar
-      company={COMPLY_COMPANY_NAME.APTIBLE}
-      logoProps={{
-        href: "/",
-      }}
-      nav={<AppbarNav />}
-      user={<Appbar.LogInButton as="button" onClick={action("Log in")} />}
-    />
-  </Story>
-</Preview>

package/src/components/Appbar/Appbar.tsx

@@ -1,124 +0,0 @@
-import React, { ReactNode } from "react";
-import classNames from "classnames";
-import { COMPLY_COMPANY_NAME, PRODUCT_ID } from "../../types";
-import { Box, BoxProps } from "../Box";
-import { Flex } from "../Flex";
-import { LinkProps } from "../Link";
-import { AppbarLogInButton } from "./AppbarLogInButton";
-import { AppbarLogo } from "./AppbarLogo";
-import { AppbarProductMenu } from "./AppbarProductMenu";
-import { AppbarTabs, AppbarTab } from "./AppbarTabs";
-import {
-  AppbarUser,
-  AppbarUserDropdown,
-  AppbarUserDropdownMenu,
-  AppbarUserDropdownMenuItem,
-  AppbarUserAvatar,
-} from "./AppbarUser";
-import { AppbarOrganizations, AppbarOrganization } from "./AppbarOrganization";
-import { AppbarClaimProfileButton } from "./AppbarClaimProfileButton";
-import { cn } from "./config";
-import { AppbarContext } from "./context";
-
-type NavComponent = ReactNode;
-type UserComponent = ReactNode;
-type OrganizationComponent = ReactNode;
-
-export interface AppbarProps extends BoxProps {
-  /**
-   * Which company is this?
-   */
-  company?: COMPLY_COMPANY_NAME;
-  /**
-   * An enum to define which product the appbar is rendered within. It will show
-   * the product as "active" in the product menu
-   *
-   * DEPRECATED
-   */
-  currentProduct?: PRODUCT_ID;
-  /**
-   * A React element (`Appbar.Tabs`) to render the navigation
-   */
-  nav?: NavComponent;
-  /**
-   * A React element (`Appbar.User`) to render the user menu
-   */
-  user?: UserComponent;
-  /**
-   * A React element (`Appbar.Organizations`) to render the user menu
-   */
-  organization?: OrganizationComponent;
-  /**
-   * The logo is rendered as a link component; the props here are passed onto
-   * the link component
-   */
-  logoProps?: LinkProps;
-  /**
-   * If true, adds "DEMO" text to the `Appbar`
-   */
-  isDemoEnvironment?: boolean;
-  /**
-   * Remove ability to click and open the product switcher
-   *
-   * DEPRECATED
-   */
-  isProductMenuDisabled?: boolean;
-}
-
-export const Appbar = (props: AppbarProps) => {
-  const {
-    company = COMPLY_COMPANY_NAME.CONVEYOR,
-    logoProps,
-    nav,
-    user,
-    organization,
-    currentProduct,
-    className,
-    isDemoEnvironment,
-    isProductMenuDisabled,
-    ...rest
-  } = props;
-  return (
-    <AppbarContext.Provider value={{ company }}>
-      <Box
-        className={classNames(cn(), className, { isDemoEnvironment })}
-        {...rest}
-      >
-        <AppbarLogo {...logoProps} />
-
-        {currentProduct && (
-          <AppbarProductMenu
-            currentProductId={currentProduct}
-            disabled={isProductMenuDisabled}
-          />
-        )}
-
-        {nav}
-
-        {(organization || user) && (
-          <Box className="h-full ml-auto mr-3">
-            <Flex className="items-center h-full">
-              {organization && <Box className="mr-2">{organization}</Box>}
-
-              {user}
-            </Flex>
-          </Box>
-        )}
-      </Box>
-    </AppbarContext.Provider>
-  );
-};
-
-Appbar.Tabs = AppbarTabs;
-Appbar.Tab = AppbarTab;
-Appbar.User = AppbarUser;
-Appbar.UserDropdown = AppbarUserDropdown;
-Appbar.UserDropdownMenu = AppbarUserDropdownMenu;
-Appbar.UserDropdownMenuItem = AppbarUserDropdownMenuItem;
-Appbar.LogInButton = AppbarLogInButton;
-Appbar.ClaimProfileButton = AppbarClaimProfileButton;
-Appbar.Organizations = AppbarOrganizations;
-Appbar.Organization = AppbarOrganization;
-
-// Deprecated: Remove this component in v2
-Appbar.UserAvatar = AppbarUserAvatar;

package/src/components/Appbar/AppbarClaimProfileButton.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import { Button, ButtonProps, BUTTON_SIZE, BUTTON_VARIANT } from "../Button";
-
-export const AppbarClaimProfileButton = ({ onClick }: ButtonProps) => (
-  <Button
-    className="text-body"
-    size={BUTTON_SIZE.MEDIUM}
-    variant={BUTTON_VARIANT.PRIMARY}
-    onClick={onClick}
-  >
-    Claim Your Page
-  </Button>
-);

package/src/components/Appbar/AppbarDropdownIcon.tsx

@@ -1,6 +0,0 @@
-import React from "react";
-import { Icon, ICON_TYPE } from "../Icon";
-
-export const AppbarDropdownIcon = () => (
-  <Icon className="text-h6 ml-2 text-gray-500" icon={ICON_TYPE.CHEVRON_DOWN} />
-);

package/src/components/Appbar/AppbarLogInButton.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Link, LinkProps } from "../Link";
-
-export const AppbarLogInButton = (props: LinkProps) => {
-  const { onClick, href, ...rest } = props;
-  return (
-    <Link
-      className={classNames([
-        "py-1",
-        "px-2",
-        "text-gray-500",
-        "text-body",
-        "ease-all-fast",
-        "no-underline",
-        "rounded",
-        "hover:text-white",
-        "focus:text-white",
-        "focus:bg-gray-800",
-        "focus:outline-none",
-      ])}
-      noStyles
-      {...rest}
-    >
-      Log in
-    </Link>
-  );
-};

package/src/components/Appbar/AppbarLogo.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { AptibleLogo } from "../AptibleLogo";
-import { Flex } from "../Flex";
-import { Link, LinkProps } from "../Link";
-import { ConveyorLogo } from "../ConveyorLogo";
-import { cn } from "./config";
-import { useAppbarContext } from "./context";
-import { COMPLY_COMPANY_NAME, THEME } from "../../types";
-
-export const AppbarLogo = (props: LinkProps) => {
-  const { company } = useAppbarContext();
-  const { href, onClick, className, noStyles, ...rest } = props;
-
-  const logo = () => {
-    switch (company) {
-      case COMPLY_COMPANY_NAME.APTIBLE:
-        return <AptibleLogo height={20} />;
-      case COMPLY_COMPANY_NAME.CONVEYOR:
-        return <ConveyorLogo theme={THEME.BRAND} height={20} />;
-      default:
-        return <ConveyorLogo theme={THEME.BRAND} height={20} />;
-    }
-  };
-
-  return (
-    <Flex className={cn({ e: "logo" })}>
-      {href || onClick ? (
-        <Link
-          className={classNames(cn({ e: "logoLink" }), className)}
-          href={href}
-          onClick={onClick}
-          noStyles
-          {...rest}
-        >
-          {logo()}
-        </Link>
-      ) : (
-        <>{logo()}</>
-      )}
-    </Flex>
-  );
-};

package/src/components/Appbar/AppbarOrganization.tsx

@@ -1,96 +0,0 @@
-import React, { ReactNode } from "react";
-import classNames from "classnames";
-import { Flex } from "../Flex";
-import { Icon, ICON_TYPE } from "../Icon";
-import { Text } from "../Text";
-import { VendorLogo } from "../VendorLogo";
-import { cn } from "./config";
-
-type OrganizationStatus = "claimed" | "unclaimed" | "pending";
-
-type AppbarOrganizationLogoProps = {
-  name: string;
-  src?: string;
-  status?: OrganizationStatus;
-  className?: string;
-};
-
-type AppbarOrganizationProps = {
-  name: string;
-  status?: OrganizationStatus;
-  logoSrc?: string;
-  hideLogo?: boolean;
-  onClick?: () => void;
-  className?: string;
-};
-
-type AppbarOrganizationsProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-const AppbarOrganizationLogo = ({
-  src,
-  name,
-  status,
-  className,
-}: AppbarOrganizationLogoProps) => {
-  if (status === "pending") {
-    return (
-      <Flex className={classNames(cn({ e: "organizationLogo" }), className)}>
-        <Icon icon={ICON_TYPE.ELLIPSIS_H} />
-      </Flex>
-    );
-  }
-
-  if (!src || status === "unclaimed") {
-    return null;
-  }
-
-  return (
-    <VendorLogo className="ml-2" vendorName={name} src={src} size={6}>
-      <VendorLogo.Badge icon={ICON_TYPE.CHECK} />
-    </VendorLogo>
-  );
-};
-
-export const AppbarOrganizations = ({
-  children,
-  className,
-}: AppbarOrganizationsProps) => {
-  return (
-    <Flex className={classNames(cn({ e: "organizations" }), className)}>
-      {children}
-    </Flex>
-  );
-};
-
-export const AppbarOrganization = ({
-  name,
-  status = "claimed",
-  logoSrc,
-  hideLogo,
-  onClick,
-  className,
-}: AppbarOrganizationProps) => {
-  const Component = onClick ? "button" : "div";
-  return (
-    <Component
-      className={classNames(
-        cn({ e: "organization" }),
-        onClick && cn({ e: "organization", m: "switcher" }),
-        className,
-      )}
-      type={onClick ? "button" : undefined}
-      onClick={onClick}
-    >
-      <Text as="span" className="text-body">
-        {name}
-      </Text>
-
-      {!hideLogo && (
-        <AppbarOrganizationLogo name={name} src={logoSrc} status={status} />
-      )}
-    </Component>
-  );
-};