@veeqo/ui 0.0.3 → 0.0.6

package/src/components/Modal/components/Dialog/Dialog.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { StyledDialog } from './styled';
-import { ModalVariants } from '../../types';
-
-type ModifiedDialogProps = {
-  variant: ModalVariants;
-} & React.ComponentProps<typeof StyledDialog>;
-
-export const Dialog = React.forwardRef<HTMLDialogElement, ModifiedDialogProps>(
-  ({ ...rest }, ref) => <StyledDialog ref={ref} {...rest} />,
-);

package/src/components/Modal/components/Dialog/constants.ts

@@ -1,48 +0,0 @@
-import { breakpoints } from '../../../../theme/modules/breakpoints';
-
-export const heightMap = {
-  xs: '84vh',
-  sm: '72vh',
-  base: '84vh',
-  lg: '96vh',
-} as const;
-
-export const widthMap = {
-  [breakpoints.mobile]: {
-    xs: '60vw',
-    sm: '72vw',
-    base: '100vw',
-    lg: '100vw',
-  },
-  [breakpoints.tablet]: {
-    xs: '60vw',
-    sm: '72vw',
-    base: '100vw',
-    lg: '100vw',
-  },
-  [breakpoints.lgTablet]: {
-    xs: '48vw',
-    sm: '56vw',
-    base: '88vw',
-    lg: '100vw',
-  },
-  [breakpoints.desktop]: {
-    xs: '36vw',
-    sm: '44vw',
-    base: '72vw',
-    lg: '88vw',
-  },
-  [breakpoints.lgDesktop]: {
-    xs: '32vw',
-    sm: '40vw',
-    base: '52vw',
-    lg: '80vw',
-  },
-} as const;
-
-export const fullScreenBreakpointMap = {
-  xs: breakpoints.mobile,
-  sm: breakpoints.mobile,
-  base: breakpoints.tablet,
-  lg: breakpoints.lgTablet,
-} as const;

package/src/components/Modal/components/Dialog/styled.ts

@@ -1,104 +0,0 @@
-import styled from 'styled-components';
-import { motion } from 'framer-motion';
-import { getOpaqueHexColor } from '../../../../utils/color';
-import { Card } from '../../../Card';
-import { theme } from '../../../../theme';
-import { ModalVariants } from '../../types';
-import { fullScreenBreakpointMap, heightMap, widthMap } from './constants';
-import { MainSection } from '../styled';
-
-const { breakpoints } = theme;
-
-export const StyledDialog = styled(motion.dialog).attrs({
-  initial: { opacity: 0, y: -50, bounce: 0 },
-  exit: { opacity: 0, y: -50, bounce: 0 },
-  animate: { opacity: 1, y: 0, bounce: 0 },
-  transition: { type: 'tween', duration: 0.25 },
-})<{ variant: ModalVariants }>`
-  padding: 0;
-  border: none;
-  border-radius: ${theme.sizes.sm};
-  box-shadow: ${theme.shadows.lg};
-
-  min-width: 360px;
-
-  &::backdrop {
-    animation: fadeIn 0.25s ease forwards;
-  }
-
-  & > ${Card.Surface} {
-    display: flex;
-    flex-direction: column;
-
-    ${({ variant }) => `max-height: ${heightMap[variant]};`}
-
-    ${MainSection} {
-      padding-bottom: ${theme.sizes.md};
-    }
-
-    ${Card.Footer} {
-      margin-top: 0;
-    }
-  }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  // ** Responsive Design ** //
-
-  // Tablet
-  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {
-    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};
-  }
-
-  // Lg Tablet
-  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {
-    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};
-  }
-
-  // Desktop
-  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {
-    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};
-  }
-
-  // Lg Desktop
-  @media (min-width: ${breakpoints.desktop}) {
-    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};
-  }
-
-  // Full Screen Mode
-  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-
-    &,
-    & > ${Card.Surface} {
-      border-radius: 0;
-      height: 100%;
-      width: 100%;
-      max-height: unset;
-    }
-  }
-
-  &::backdrop {
-    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};
-  }
-
-  &:not([open]) {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transform: translate(-50%, -50%);
-  }
-`;

package/src/components/Modal/components/styled.ts

@@ -1,24 +0,0 @@
-import styled, { createGlobalStyle } from 'styled-components';
-import { Card } from '../../Card';
-import { theme } from '../../../theme';
-
-export const NonScrollableBody = createGlobalStyle`
-  body {
-    overflow: hidden;
-    scrollbar-gutter: stable;
-  }
-`;
-
-export const MainSection = styled.section<{ isScrollable: boolean; fullBleed: boolean }>`
-  flex: 1;
-  overflow-y: auto;
-
-  ${({ fullBleed }) => !fullBleed && `padding: 0 ${theme.sizes.md};`}
-  ${({ isScrollable }) =>
-    isScrollable &&
-    `
-    & + ${Card.Footer} {
-      box-shadow: 0px 10px 15px 0px ${theme.colors.neutral.ink.dark};
-    }
-  `}
-`;

package/src/components/Modal/types.ts

@@ -1,61 +0,0 @@
-import { ButtonProps } from '../Button/types';
-
-export type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';
-
-// Base Modal props shared by all variants.
-type BaseModalProps = {
-  shouldShow: boolean;
-  showHeaderCloseButton?: boolean;
-  fullBleed?: boolean;
-  variant?: ModalVariants;
-  onClose: () => void;
-  children: React.ReactNode;
-};
-
-// Optional slot types.
-
-type WithHeaderSlot = {
-  headerSlot: React.ReactNode;
-};
-
-type WithFooterSlot = {
-  footerSlot: React.ReactNode;
-};
-
-// Default header and footer options.
-
-type DefaultHeaderOptions = {
-  headerTitle: string;
-  headerSubtitle?: string;
-};
-
-type ModalAction = { label: string } & ButtonProps;
-type DefaultFooterOptions = {
-  leftActions?: ModalAction[];
-  rightActions?: ModalAction[];
-};
-
-// Either we have a header slot or default header options, same for footer.
-type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
-type FooterOptions = WithFooterSlot | DefaultFooterOptions;
-
-// Modal props are shared props + the header and footer options (potentially with slots.)
-export type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;
-
-/**
- * Type guard to check if a header slot has been passed to the component.
- */
-export const hasHeaderSlot = (
-  props: ModalProps,
-): props is BaseModalProps & WithHeaderSlot & FooterOptions => {
-  return !!(props as WithHeaderSlot).headerSlot;
-};
-
-/**
- * Type guard to check if a footer slot has been passed to the component.
- */
-export const hasFooterSlot = (
-  props: ModalProps,
-): props is BaseModalProps & HeaderOptions & WithFooterSlot => {
-  return !!(props as WithFooterSlot).footerSlot;
-};

package/src/components/PageHeader/PageHeader.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { PageHeader } from '.';
-
-describe('PageHeader', () => {
-  test('it renders just the title correctly', () => {
-    const { container } = render(<PageHeader title="Page title" />);
-    expect(container).toMatchSnapshot();
-  });
-
-  test('it renders correctly', () => {
-    const { container } = render(
-      <PageHeader
-        title="Page title"
-        subtitle="Page subtitle"
-        imageSrc="https://source.unsplash.com/random"
-        Accessory={<p>Custom accessory goes here</p>}
-        quickActions={[
-          {
-            title: 'Primary action',
-            variant: 'primary',
-            icon: 'add',
-            onClick: () => {},
-          },
-        ]}
-        backAction={{ title: 'Go back', onClick: () => {} }}
-        actions={[
-          { title: 'Section 1', items: [{ title: 'Option 1', onClick: () => {} }] },
-          { title: 'Section 2', items: [{ title: 'Option 2', onClick: () => {} }] },
-          { title: 'Section 3', items: [{ title: 'Option 3', onClick: () => {} }] },
-        ]}
-        onClickPrevious={() => {}}
-        onClickNext={() => {}}
-        onClickToggleSidebar={() => {}}
-        shadow="base"
-      />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/PageHeader/PageHeader.tsx

@@ -1,119 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import { Stack } from '../Stack';
-import { ActionList } from '../ActionList';
-import { ActionListSection } from '../ActionList/types';
-import { Button } from '../Button';
-import { ButtonVariant } from '../Button/types';
-
-import {
-  ShadowPropType,
-  Header,
-  Title,
-  Subtitle,
-  Image,
-  ActionsContainer,
-  SidebarToggleButton,
-  ColumnGrid,
-} from './styled';
-import { RightArrowIcon } from '../../tempIcons/RightArrowIcon';
-import { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';
-import { sizes } from '../../theme/modules/sizes';
-
-type QuickAction = {
-  title: string;
-  icon: Omit<ReactNode, string>;
-  variant: ButtonVariant;
-  onClick: () => void;
-};
-
-type BackAction = {
-  title: string;
-  onClick: () => void;
-};
-
-export type PageHeaderProps = {
-  title: string;
-  subtitle?: string;
-  imageSrc?: string;
-  actions?: ActionListSection[];
-  quickActions?: QuickAction[];
-  backAction?: BackAction;
-  Accessory?: ReactNode;
-  shadow?: ShadowPropType;
-  onClickPrevious?: () => void;
-  onClickNext?: () => void;
-  onClickToggleSidebar?: () => void;
-};
-
-export const PageHeader = ({
-  title,
-  subtitle,
-  imageSrc,
-  actions,
-  quickActions,
-  backAction,
-  Accessory,
-  shadow = 'none',
-  onClickPrevious,
-  onClickNext,
-  onClickToggleSidebar,
-}: PageHeaderProps) => {
-  const actionsMarkup = actions && (
-    <ActionList
-      buttonVariant={!quickActions ? 'primary' : 'default'}
-      title="Actions"
-      sections={actions}
-    />
-  );
-
-  const quickActionsMarkup = quickActions?.map((action) => (
-    <Button key={action.title} variant={action.variant} icon={action.icon} onClick={action.onClick}>
-      {action.title}
-    </Button>
-  ));
-
-  const backActionMarkup = backAction && (
-    <Button onClick={backAction.onClick} icon={<LeftArrowIcon />} variant="link">
-      {backAction.title}
-    </Button>
-  );
-
-  const toggleSidebarMarkup = onClickToggleSidebar && (
-    <Stack direction="horizontal" alignX="end">
-      <SidebarToggleButton onClick={onClickToggleSidebar}>
-        <span>Toggle sidebar</span>
-        <RightArrowIcon width={sizes.md} />
-      </SidebarToggleButton>
-    </Stack>
-  );
-
-  return (
-    <Header shadow={shadow}>
-      <Stack>
-        {backActionMarkup}
-        <ColumnGrid>
-          <Stack direction="horizontal" spacing="md">
-            {imageSrc && <Image src={imageSrc} alt="" width="72" height="72" />}
-            <div style={{ flex: 1 }}>
-              <Stack alignX="stretch">
-                <Title>{title}</Title>
-                {Accessory}
-                {subtitle && <Subtitle>{subtitle}</Subtitle>}
-              </Stack>
-            </div>
-          </Stack>
-          <ActionsContainer>
-            <Stack direction="horizontal" alignX="end" spacing="sm">
-              {quickActionsMarkup}
-              {actionsMarkup}
-              {onClickPrevious && <Button icon={<LeftArrowIcon />} onClick={onClickPrevious} />}
-              {onClickNext && <Button icon={<RightArrowIcon />} onClick={onClickNext} />}
-            </Stack>
-            {toggleSidebarMarkup}
-          </ActionsContainer>
-        </ColumnGrid>
-      </Stack>
-    </Header>
-  );
-};

package/src/components/PageHeader/PageHeaderDocs.mdx

@@ -1,69 +0,0 @@
-import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import { PageHeader } from '.';
-
-<Meta title="Components/Layout/PageHeader" component={PageHeader} />
-
-# PageHeader
-
-<Canvas>
-  <PageHeader
-    title="Page title"
-    imageSrc="https://source.unsplash.com/random"
-    primaryAction={{ title: 'Primary action', icon: 'add', onClick: () => {} }}
-    backAction={{ title: 'Go back', onClick: () => {} }}
-    actions={[
-      {
-        items: [
-          { title: 'Option 1', onClick: () => {} },
-          { title: 'Option 2', onClick: () => {} },
-          { title: 'Option 3', onClick: () => {} },
-        ],
-      },
-    ]}
-    onClickPrevious={() => {}}
-    onClickNext={() => {}}
-  />
-</Canvas>
-
-## Usage
-
-```jsx
-import { VeeqoExperimental } from '@veeqo/components';
-const { PageHeader } = VeeqoExperimental;
-
-<PageHeader
-  title="Page title"
-  imageSrc="https://source.unsplash.com/random"
-  primaryAction={{ title: 'Primary action', icon: 'add', onClick: () => {} }}
-  backAction={{ title: 'Go back', onClick: () => {} }}
-  actions={[
-    {
-      items: [
-        { title: 'Option 1', onClick: () => {} },
-        { title: 'Option 2', onClick: () => {} },
-        { title: 'Option 3', onClick: () => {} },
-      ],
-    },
-  ]}
-  onClickPrevious={() => {}}
-  onClickNext={() => {}}
-/>;
-```
-
-## Props
-
-```tsx
-export type PageHeaderProps = {
-  title: string;
-  subtitle?: string;
-  imageSrc?: string;
-  actions?: ActionListSection[];
-  quickActions?: QuickAction[];
-  backAction?: BackAction;
-  Accessory?: ReactNode;
-  shadow?: ShadowPropType;
-  onClickPrevious?: () => void;
-  onClickNext?: () => void;
-  onClickToggleSidebar?: () => void;
-};
-```