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

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,118 +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 { Avatar, AVATAR_TYPE } from "../Avatar";
-import { Box } from "../Box";
-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 Cunningham",
-};
-
-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 AppbarUserMenu = () => {
-  return (
-    <Appbar.UserDropdown
-      avatar={
-        <Avatar
-          name={user.name}
-          email={user.email}
-          type={AVATAR_TYPE.USER}
-          size="medium"
-          enableTooltip={false}
-          square
-        />
-      }
-    >
-      <Appbar.UserDropdownMenu>
-        {["Update Profile", "Preferences"].map((item) => (
-          <Appbar.UserDropdownMenuItem key={item} as="button">
-            {item}
-          </Appbar.UserDropdownMenuItem>
-        ))}
-        <Appbar.UserDropdownMenuItem as="button" onClick={action("Log out")}>
-          Log out
-        </Appbar.UserDropdownMenuItem>
-      </Appbar.UserDropdownMenu>
-    </Appbar.UserDropdown>
-  );
-};
-
-<Preview>
-  <Story name="Appbar">
-    <Appbar />
-  </Story>
-</Preview>
-
-The appbar component provides the top-most level of navigation for a Conveyor
-application. It provides slots for primary navigation and user navigation.
-
-In an application, the appbar should be placed as a child within the frame area
-where `name="appbar"`.
-
-## Props
-
-<Props of={Appbar} />
-
-## Demos
-
-### With navigation
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar with navigation">
-    <Appbar
-      logoProps={{
-        href: "/",
-      }}
-      nav={<AppbarNav />}
-    />
-  </Story>
-</Preview>
-
-### With user menu
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar with user menu">
-    <Box className="h-64">
-      <Appbar nav={<AppbarNav />} user={<AppbarUserMenu />} />
-    </Box>
-  </Story>
-</Preview>
-
-### In a demo environment
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Appbar in a demo environment">
-    <Box className="h-64">
-      <Appbar nav={<AppbarNav />} user={<AppbarUserMenu />} isDemoEnvironment />
-    </Box>
-  </Story>
-</Preview>

package/src/components/Appbar/Appbar.tsx

@@ -1,64 +0,0 @@
-import React, { ReactNode } from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-import { Flex } from "../Flex";
-import { LinkProps } from "../Link";
-import { AppbarLogo } from "./AppbarLogo";
-import { AppbarTabs, AppbarTab } from "./AppbarTabs";
-import {
-  AppbarUser,
-  AppbarUserDropdown,
-  AppbarUserDropdownMenu,
-  AppbarUserDropdownMenuItem,
-} from "./AppbarUser";
-import { cn } from "./config";
-
-type NavComponent = ReactNode;
-type UserComponent = ReactNode;
-
-export interface AppbarProps extends BoxProps {
-  /**
-   * A React element (`Appbar.Tabs`) to render the navigation
-   */
-  nav?: NavComponent;
-  /**
-   * A React element (`Appbar.User`) to render the user menu
-   */
-  user?: UserComponent;
-  /**
-   * 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;
-}
-
-export const Appbar = (props: AppbarProps) => {
-  const { logoProps, nav, user, className, isDemoEnvironment, ...rest } = props;
-  return (
-    <Box
-      className={classNames(cn(), className, { isDemoEnvironment })}
-      {...rest}
-    >
-      <AppbarLogo {...logoProps} />
-
-      {nav}
-
-      {user && (
-        <Box className="h-full ml-auto mr-3">
-          <Flex className="items-center h-full">{user}</Flex>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-Appbar.Tabs = AppbarTabs;
-Appbar.Tab = AppbarTab;
-Appbar.User = AppbarUser;
-Appbar.UserDropdown = AppbarUserDropdown;
-Appbar.UserDropdownMenu = AppbarUserDropdownMenu;
-Appbar.UserDropdownMenuItem = AppbarUserDropdownMenuItem;

package/src/components/Appbar/AppbarLogo.tsx

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

package/src/components/Appbar/AppbarTabs.tsx

@@ -1,47 +0,0 @@
-import React, { Children, ReactNode, forwardRef } from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-import { cn } from "./config";
-
-type AppbarTabProps = {
-  children: ReactNode;
-  as?: any;
-  active?: boolean;
-};
-
-const AppbarTabMarker = () => <Box className={cn({ e: "tabMarker" })} />;
-
-export const AppbarTabs = (props: BoxProps) => {
-  return (
-    <Box as="nav" className={cn({ e: "tabs" })} role="navigation" {...props} />
-  );
-};
-
-export const AppbarTab = forwardRef<AppbarTabProps, any>(
-  ({ children, renderAs: Component = "a", active, ...rest }, ref) => {
-    if (Children.count(children) > 1) {
-      throw new Error(
-        `Only one child node may be passed to Appbar.Tab, but ${Children.count(
-          children,
-        )} were passed.`,
-      );
-    }
-
-    return (
-      <Component
-        {...rest}
-        ref={ref}
-        tabIndex={0}
-        className={classNames(
-          cn({ e: "tab" }),
-          "hasTabMarker",
-          active && cn({ e: "tab", m: "active" }),
-        )}
-      >
-        {children}
-
-        <AppbarTabMarker />
-      </Component>
-    );
-  },
-);

package/src/components/Appbar/AppbarUser.tsx

@@ -1,144 +0,0 @@
-import React, { ReactElement, ReactNode } from "react";
-import classNames from "classnames";
-import { THEME } from "../../types";
-import { AvatarProps } from "../Avatar";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { Link } from "../Link";
-import { MenuRenderer, useMenuContext } from "../MenuRenderer";
-import { PopoverMenu } from "../PopoverMenu";
-import { Text } from "../Text";
-import { Icon, ICON_TYPE } from "../Icon";
-import { cn, popperModifiers } from "./config";
-
-type AppbarUserNameProps = {
-  avatar: ReactElement<AvatarProps>;
-  name?: string;
-};
-
-type AppbarUserDropdownProps = {
-  avatar: ReactElement<AvatarProps>;
-  children: ReactNode;
-  name?: string;
-  onClose?: () => void;
-};
-
-type AppbarUserDropdownMenuProps = {
-  children: ReactNode;
-};
-
-type AppbarUserProps = {
-  avatar: ReactElement<AvatarProps>;
-  name?: string;
-};
-
-type AppbarUserDropdownMenuItemProps = {
-  as?: any;
-  onClick?: () => void;
-  selected?: boolean;
-  [key: string]: any;
-};
-
-const AppbarUserName = ({ name, avatar }: AppbarUserNameProps) => (
-  <Flex className={cn({ e: "userName" })}>
-    {avatar}
-    {name && <Text as="div">{name}</Text>}
-  </Flex>
-);
-
-export const AppbarUserDropdown = ({
-  name,
-  avatar,
-  children,
-  onClose,
-}: AppbarUserDropdownProps) => {
-  return (
-    <Box className="h-full -mr-3">
-      <MenuRenderer
-        className={classNames([cn({ e: "menu" }), cn({ e: "userMenu" })])}
-        popperModifiers={popperModifiers}
-        onClose={onClose}
-        trigger={({ onClick, ...triggerProps }, { isOpen }) => (
-          <button
-            type="button"
-            className={classNames([
-              cn({ e: "menuButton" }),
-              cn({ e: "userMenuButton" }),
-              isOpen && "isOpen",
-            ])}
-            {...triggerProps}
-            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-              onClick(event);
-              if (onClose && isOpen) {
-                onClose();
-              }
-            }}
-          >
-            <Flex className="items-center">
-              <AppbarUserName name={name} avatar={avatar} />
-              <Icon
-                className="text-h6 ml-2 text-gray-500"
-                icon={ICON_TYPE.CHEVRON_DOWN}
-              />
-            </Flex>
-          </button>
-        )}
-      >
-        {({ listProps }) => (
-          <PopoverMenu
-            className={cn({ e: "menuList" })}
-            theme={THEME.BRAND}
-            {...listProps}
-          >
-            {children}
-          </PopoverMenu>
-        )}
-      </MenuRenderer>
-    </Box>
-  );
-};
-
-export const AppbarUserDropdownMenu = ({
-  children,
-}: AppbarUserDropdownMenuProps) => <>{children}</>;
-
-export const AppbarUserDropdownMenuItem = ({
-  children,
-  onClick,
-  as,
-  className,
-  ...rest
-}: AppbarUserDropdownMenuItemProps) => {
-  const { itemProps, onClose } = useMenuContext();
-  return (
-    <Link
-      as={as}
-      noStyles
-      className={classNames([
-        cn({ e: "menuItem" }),
-        cn({ e: "userMenuItem" }),
-        className,
-      ])}
-      onClick={() => {
-        if (typeof onClick === "function") {
-          onClick();
-        }
-        if (typeof onClose === "function") {
-          onClose();
-        }
-      }}
-      {...rest}
-      {...itemProps}
-    >
-      {children}
-    </Link>
-  );
-};
-
-export const AppbarUser = ({ name, avatar }: AppbarUserProps) => {
-  return (
-    <Box className={cn({ e: "user" })}>
-      <AppbarUserName name={name} avatar={avatar} />
-    </Box>
-  );
-};

package/src/components/Appbar/config.ts

@@ -1,12 +0,0 @@
-import { bemHOF } from "../../utilities/bem";
-
-export const cn = bemHOF("Appbar");
-
-export const popperModifiers = [
-  {
-    name: "offset",
-    options: {
-      offset: [0, 4],
-    },
-  },
-];

package/src/components/Appbar/index.css

@@ -1,203 +0,0 @@
-.ads-Appbar {
-  @apply bg-gray-900
-    text-white
-    relative
-    h-appbar
-    flex
-    items-center;
-}
-
-.ads-Appbar.isDemoEnvironment::after {
-  @apply absolute
-    bg-gold-400
-    left-0
-    origin-top-left
-    p-1
-    text-center
-    text-gray-900
-    text-h6
-    transform
-    -rotate-90;
-
-  content: "DEMO";
-  top: 100%;
-  width: theme("height.appbar");
-}
-
-/* Logo */
-
-.ads-Appbar-logo {
-  @apply relative
-    items-center
-    justify-center
-    h-full
-    px-8;
-}
-
-.ads-Appbar-logoLink {
-  @apply flex
-    items-center
-    justify-center
-    h-full
-    w-full;
-}
-
-.ads-Appbar-logo svg {
-  @apply block
-    relative;
-
-  top: 1px;
-}
-
-/* Menu */
-
-.ads-Appbar-menu,
-.ads-Appbar-menu > div {
-  @apply h-full;
-}
-
-.ads-Appbar-menuButton {
-  @apply h-full
-    transition-colors
-    ease-in-out
-    duration-200;
-}
-
-.ads-Appbar-menuButton.isOpen,
-.ads-Appbar-menuButton:hover,
-.ads-Appbar-menuButton:active,
-.ads-Appbar-menuButton:focus {
-  @apply bg-lighten-300;
-}
-
-.ads-Appbar-menuButton[disabled] {
-  @apply bg-transparent
-    cursor-default;
-}
-
-.ads-Appbar-menuButton:focus {
-  @apply outline-none;
-}
-
-.ads-Appbar-menuList {
-  @apply w-64
-    pb-2;
-}
-
-.ads-Appbar-menuItem {
-  @apply flex
-    items-center
-    w-full
-    font-medium
-    cursor-pointer
-    no-underline
-    transition-colors
-    ease-in-out
-    duration-200
-    text-left
-    px-2;
-}
-
-.ads-Appbar-menuItem:hover,
-.ads-Appbar-menuItem:active,
-.ads-Appbar-menuItem:focus {
-  @apply text-white
-    bg-lighten-300;
-}
-
-.ads-Appbar-menuItem:focus {
-  @apply outline-none;
-}
-
-/* Tab Marker */
-
-.hasTabMarker {
-  @apply overflow-hidden
-    relative;
-}
-
-.ads-Appbar-tabMarker {
-  @apply absolute
-    w-full
-    bottom-0
-    left-0
-    bg-brandGreen-400;
-
-  height: 2px;
-  transform: translateY(100%);
-  transition: transform 0.2s ease;
-}
-
-.ads-Appbar-menuButton.isOpen .ads-Appbar-tabMarker,
-.ads-Appbar-tab--active .ads-Appbar-tabMarker,
-.hasTabMarker:hover .ads-Appbar-tabMarker,
-.hasTabMarker:active .ads-Appbar-tabMarker,
-.hasTabMarker:focus .ads-Appbar-tabMarker {
-  transform: translateY(0);
-}
-
-/* Tabs */
-
-.ads-Appbar-tabs {
-  @apply flex
-    h-full;
-}
-
-.ads-Appbar-tab {
-  @apply flex
-    items-center
-    h-full
-    px-2
-    text-gray-500
-    text-body
-    ease-all-fast
-    no-underline
-    cursor-pointer;
-}
-
-.ads-Appbar-tab:visited {
-  @apply text-gray-500;
-}
-
-.ads-Appbar-tab--active,
-.ads-Appbar-tab--active:visited,
-.ads-Appbar-tab:hover,
-.ads-Appbar-tab:active,
-.ads-Appbar-tab:focus {
-  @apply text-white
-    bg-lighten-300;
-}
-
-.ads-Appbar-tab:focus {
-  @apply outline-none;
-}
-
-/* User */
-
-.ads-Appbar-userName {
-  @apply items-center
-    bg-transparent
-    text-white
-    text-body
-    font-medium
-    h-full;
-}
-
-.ads-Appbar-user,
-.ads-Appbar-userMenuButton {
-  @apply px-3
-    border-l
-    border-gray-800;
-}
-
-.ads-Appbar-user {
-  @apply h-full
-    -mr-3;
-}
-
-.ads-Appbar-userMenuItem {
-  @apply text-h5
-    text-gray-500
-    py-2
-    px-3;
-}

package/src/components/Appbar/index.ts

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