@veeqo/ui 0.0.1 → 0.0.4

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,24 @@
+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/index.tsx

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/src/components/Modal/types.ts

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,69 @@
+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;
+};
+```