@veeqo/ui 0.0.4 → 0.0.7

package/src/components/ToastsLayout/ToastsLayout.tsx

@@ -1,39 +0,0 @@
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import React, { useEffect, FC } from 'react';
-import { createPortal } from 'react-dom';
-import { ToastsLayoutPropTypes } from './types';
-import { ToastsLayoutContainer } from './components/styled';
-import { Toast } from './components/Toast';
-
-export const ToastsLayout: FC<ToastsLayoutPropTypes> = ({
-  className,
-  e2eClassName,
-  toasts,
-  minWidth = '50vw',
-  max = 3,
-  onClose,
-}) => {
-  useEffect(() => {
-    if (max && toasts.length > max) onClose(toasts[0].key);
-  }, [toasts, max, onClose]);
-
-  return createPortal(
-    <ToastsLayoutContainer direction="vertical" alignX="center" spacing={4}>
-      <TransitionGroup component={null}>
-        {[...toasts].reverse().map((toast, index) => (
-          <CSSTransition key={toast.key} timeout={500} classNames="veeqo-components-toast">
-            <Toast
-              className={className}
-              e2eClassName={e2eClassName}
-              minWidth={minWidth}
-              last={index === toasts.length - 1}
-              onClose={() => onClose(toast.key)}
-              {...toast}
-            />
-          </CSSTransition>
-        ))}
-      </TransitionGroup>
-    </ToastsLayoutContainer>,
-    document.body,
-  );
-};

package/src/components/ToastsLayout/components/Toast.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { colors } from '../../../theme/modules/colors';
-import { IconWrap, Toast as ToastContainer, StyledText as Text, ContentStack } from './styled';
-import { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';
-import { buildClassnames } from '../../../utils/buildClassnames';
-import { Button } from '../../Button';
-import { SuccessIcon } from '../../../tempIcons/SuccessIcon';
-import { InfoIcon } from '../../../tempIcons/InfoIcon';
-import { AttentionIcon } from '../../../tempIcons/AttentionIcon';
-import { MergeIcon } from '../../../tempIcons/MergeIcon';
-import { CrossIcon } from '../../../tempIcons/CrossIcon';
-
-const toastTypes: ToastType = {
-  info: {
-    accentColor: colors.brand.blue.base,
-    icon: <InfoIcon />,
-  },
-  success: {
-    accentColor: colors.secondary.green.base,
-    icon: <SuccessIcon />,
-  },
-  error: {
-    accentColor: colors.secondary.red.base,
-    icon: <AttentionIcon />,
-  },
-  merge: {
-    accentColor: colors.secondary.purple.base,
-    icon: <MergeIcon />,
-  },
-};
-
-const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({
-  container: prefix ? `${prefix}-toast-container` : undefined,
-  icon: prefix ? `${prefix}-toast-icon` : undefined,
-  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
-});
-
-export const Toast = ({
-  className,
-  e2eClassName,
-  type,
-  iconSlot,
-  text,
-  last,
-  minWidth,
-  cta,
-  onClose,
-}: ToastPropTypes) => {
-  const classNames = generateClassNames(className);
-  const e2eClassNames = generateClassNames(e2eClassName);
-
-  return (
-    <ToastContainer
-      className={buildClassnames([classNames?.container, e2eClassNames?.container])}
-      direction="horizontal"
-      alignY="center"
-      minWidth={minWidth}
-      last={last}
-    >
-      <IconWrap
-        color={toastTypes[type].accentColor}
-        className={buildClassnames([classNames.icon, e2eClassNames.icon])}
-      >
-        {iconSlot ?? toastTypes[type].icon}
-      </IconWrap>
-      <ContentStack direction="horizontal" alignY="center" alignX="between">
-        <Text variant="body">{text}</Text>
-        {cta}
-      </ContentStack>
-      <Button
-        variant="flat"
-        icon={<CrossIcon color="white" />}
-        onClick={onClose}
-        aria-label="Close"
-      />
-    </ToastContainer>
-  );
-};

package/src/components/ToastsLayout/components/styled.ts

@@ -1,76 +0,0 @@
-import styled from 'styled-components';
-
-import { Stack } from '../../Stack';
-import { BaseContainer } from '../../BaseContainer';
-import { Text } from '../../Text';
-import { theme } from '../../../theme';
-import { sizes } from '../../../theme/modules/sizes';
-
-export const ToastsLayoutContainer = styled(Stack)`
-  position: fixed;
-  bottom: 24px;
-  width: 100%;
-  pointer-events: none;
-`;
-
-export const Toast = styled(Stack)<{
-  minWidth: number | string;
-  last: boolean;
-}>`
-  background-color: ${theme.colors.neutral.ink.dark};
-  padding: 12px 24px 12px 12px;
-  box-shadow: ${theme.shadows.lg};
-  border-radius: ${theme.radius.md};
-  pointer-events: auto;
-  z-index: 40;
-  min-width: ${({ minWidth }) => minWidth};
-  max-width: 80vw;
-
-  &.veeqo-components-toast-enter {
-    transform: translateY(12px);
-    opacity: 0;
-  }
-
-  &.veeqo-components-toast-enter-active {
-    transform: translateY(0);
-    opacity: 1;
-    transition: 500ms ease;
-  }
-
-  &.veeqo-components-toast-exit {
-    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};
-    opacity: 1;
-  }
-
-  &.veeqo-components-toast-exit-active {
-    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};
-    opacity: 0;
-    transition: 500ms ease;
-  }
-`;
-
-export const IconWrap = styled(BaseContainer)<{ color: string }>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  width: 40px;
-  border-radius: ${theme.radius.md};
-  background-color: ${({ color }) => color};
-  color: #fff;
-
-  svg {
-    width: ${sizes.md};
-    height: ${sizes.md};
-  }
-`;
-
-export const ContentStack = styled(Stack)`
-  flex-grow: 1;
-`;
-
-export const StyledText = styled(Text)`
-  color: white;
-  font-size: 16px;
-`;

package/src/components/ToastsLayout/types.ts

@@ -1,41 +0,0 @@
-import { ReactNode } from 'react';
-
-export enum ToastTypes {
-  info = 'info',
-  error = 'error',
-  success = 'success',
-  merge = 'merge',
-}
-
-export type ToastType = Record<ToastTypes, { accentColor: string; icon: Omit<ReactNode, string> }>;
-
-export type ToastPropTypes = Omit<Notification, 'key'> & {
-  className?: string;
-  e2eClassName?: string;
-  last: boolean;
-  minWidth: number | string;
-  onClose: () => void;
-};
-
-export type ToastsLayoutPropTypes = {
-  className?: string;
-  e2eClassName?: string;
-  toasts: Notification[];
-  minWidth?: number | string;
-  max?: number | null;
-  onClose: (key: string) => void;
-};
-
-export type ClassNamesReturnPayload = {
-  container?: string;
-  icon?: string;
-  closeIcon?: string;
-};
-
-export type Notification = {
-  key: string;
-  type: keyof typeof ToastTypes;
-  iconSlot?: Omit<ReactNode, string>;
-  text: string;
-  cta?: React.ReactNode;
-};

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Toggle } from '.';
-
-const meta = {
-  title: 'Components/Common/Toggle',
-  component: Toggle,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Toggle>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const argTypes = {
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  switched: {
-    control: {
-      type: 'boolean',
-    },
-  },
-};
-
-export const Default: Story = { argTypes };
-
-export const Disabled: Story = {
-  argTypes,
-  args: {
-    disabled: true,
-  },
-};
-
-export const Switched: Story = {
-  argTypes,
-  args: {
-    switched: true,
-  },
-};

package/src/components/Toggle/Toggle.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import { theme } from '../../theme';
-import { Toggle } from './Toggle';
-
-describe('Toggle', () => {
-  it('renders correctly', () => {
-    const { container } = render(<Toggle switched />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('toggles when clicked', () => {
-    const mockOnClick = jest.fn();
-    render(<Toggle onClick={mockOnClick} />);
-
-    userEvent.click(screen.getByRole('switch'));
-
-    expect(mockOnClick).toBeCalled();
-  });
-
-  it('can be focused and toggled with keyboard interactions', () => {
-    const mockOnClick = jest.fn();
-    render(<Toggle onClick={mockOnClick} />);
-
-    const checkbox = screen.getByRole('checkbox');
-    userEvent.tab();
-    expect(checkbox).toHaveFocus();
-    expect(screen.getByRole('checkbox')).toHaveStyle({
-      'box-shadow': `0 0 0 4px ${theme.colors.brand.blue.light}`,
-    });
-
-    userEvent.keyboard('{space}');
-    expect(checkbox).toHaveFocus();
-    expect(screen.getByRole('checkbox')).toHaveStyle({
-      'box-shadow': `0 0 0 4px ${theme.colors.brand.blue.light}`,
-    });
-    expect(mockOnClick).toBeCalled();
-  });
-
-  describe('when disabled', () => {
-    it('renders correctly', () => {
-      const { container } = render(<Toggle switched disabled />);
-      expect(container).toMatchSnapshot();
-    });
-
-    it('does not toggle when clicked', () => {
-      const mockOnClick = jest.fn();
-      render(<Toggle onClick={mockOnClick} disabled />);
-
-      userEvent.click(screen.getByRole('switch'));
-
-      expect(mockOnClick).not.toBeCalled();
-    });
-  });
-});

package/src/components/Toggle/Toggle.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from 'react';
-
-import { ToggleProps } from './types';
-import { Input, Slider, Switch, Wrapper } from './styled';
-
-/**
- * A toggle switch component, use-cases should wrap with a label or
- */
-export const Toggle: FC<ToggleProps> = ({
-  className,
-  name,
-  switched,
-  small,
-  onClick,
-  disabled,
-  ariaLabel,
-}: ToggleProps) => (
-  <Wrapper className={className} disabled={disabled}>
-    <Switch small={small} disabled={disabled} role="switch">
-      <Input
-        type="checkbox"
-        name={name}
-        aria-label={ariaLabel}
-        checked={switched}
-        onClick={disabled ? undefined : onClick}
-        disabled={disabled}
-      />
-      <Slider switched={switched} disabled={disabled} />
-    </Switch>
-  </Wrapper>
-);

package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap

@@ -1,219 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Toggle renders correctly 1`] = `
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c6 {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 18px;
-  background-color: #cdd1d5;
-  -webkit-transition: 0.3s;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.c6:after {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  background-color: white;
-  -webkit-transition: 0.3s;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.c4:focus-visible + .c5 {
-  box-shadow: 0 0 0 4px #93C6E8;
-}
-
-.c4:checked + .c5 {
-  background-color: #0079d1;
-}
-
-.c4:disabled + .c5 {
-  background-color: #DFE3E8;
-}
-
-.c4:checked:disabled + .c5 {
-  background-color: #80BCE8;
-}
-
-.c2 {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  height: 36px;
-  width: 72px;
-}
-
-.c2 input {
-  position: absolute;
-  opacity: 0;
-}
-
-.c2 .c5:after {
-  height: 28px;
-  width: 28px;
-  left: 4px;
-  bottom: 4px;
-}
-
-.c2 .c3:checked + .c5:after,
-.c2 .c3:checked + .c5 svg {
-  -webkit-transform: translateX(36px);
-  -ms-transform: translateX(36px);
-  -webkit-transform: translateX(36px);
-  -ms-transform: translateX(36px);
-  transform: translateX(36px);
-}
-
-.c1 {
-  cursor: pointer;
-  display: inline-block;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    <label
-      class="c2"
-      role="switch"
-    >
-      <input
-        checked=""
-        class="c3 c4"
-        type="checkbox"
-      />
-      <span
-        class="c5 c6"
-      />
-    </label>
-  </div>
-</div>
-`;
-
-exports[`Toggle when disabled renders correctly 1`] = `
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c6 {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 18px;
-  background-color: #cdd1d5;
-  -webkit-transition: 0.3s;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.c6:after {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  background-color: #D9EBF8;
-  -webkit-transition: 0.3s;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.c4:focus-visible + .c5 {
-  box-shadow: 0 0 0 4px #93C6E8;
-}
-
-.c4:checked + .c5 {
-  background-color: #0079d1;
-}
-
-.c4:disabled + .c5 {
-  background-color: #DFE3E8;
-}
-
-.c4:checked:disabled + .c5 {
-  background-color: #80BCE8;
-}
-
-.c2 {
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  height: 36px;
-  width: 72px;
-}
-
-.c2 input {
-  position: absolute;
-  opacity: 0;
-}
-
-.c2 .c5:after {
-  height: 28px;
-  width: 28px;
-  left: 4px;
-  bottom: 4px;
-}
-
-.c2 .c3:checked + .c5:after,
-.c2 .c3:checked + .c5 svg {
-  -webkit-transform: translateX(36px);
-  -ms-transform: translateX(36px);
-  -webkit-transform: translateX(36px);
-  -ms-transform: translateX(36px);
-  transform: translateX(36px);
-}
-
-.c1 {
-  cursor: not-allowed;
-  display: inline-block;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-<div>
-  <div
-    class="c0 c1"
-    disabled=""
-  >
-    <label
-      class="c2"
-      disabled=""
-      role="switch"
-    >
-      <input
-        checked=""
-        class="c3 c4"
-        disabled=""
-        type="checkbox"
-      />
-      <span
-        class="c5 c6"
-        disabled=""
-      />
-    </label>
-  </div>
-</div>
-`;

package/src/components/Toggle/styled.ts

@@ -1,84 +0,0 @@
-import styled from 'styled-components';
-
-import { ToggleProps } from './types';
-import { BaseContainer } from '../BaseContainer';
-import { theme } from '../../theme';
-
-const Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 18px;
-  background-color: #cdd1d5;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-
-  &:after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    background-color: ${({ disabled, switched }) =>
-      disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-  }
-`;
-
-const Input = styled.input`
-  &:focus-visible + ${Slider} {
-    box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};
-  }
-
-  &:checked + ${Slider} {
-    background-color: #0079d1;
-  }
-
-  &:disabled + ${Slider} {
-    background-color: ${theme.colors.neutral.grey.base};
-  }
-
-  &:checked:disabled + ${Slider} {
-    background-color: ${theme.colors.secondary.blue.light};
-  }
-`;
-
-const Switch = styled.label<ToggleProps>`
-  display: inline-block;
-  position: relative;
-  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  height: ${({ small }) => (small ? '28px' : '36px')};
-  width: ${({ small }) => (small ? '56px' : '72px')};
-
-  input {
-    position: absolute;
-    opacity: 0;
-  }
-
-  // configure size and animation
-  ${Slider}:after {
-    height: ${({ small }) => (small ? '22px' : '28px')};
-    width: ${({ small }) => (small ? '22px' : '28px')};
-    left: ${({ small }) => (small ? '3px' : '4px')};
-    bottom: ${({ small }) => (small ? '3px' : '4px')};
-  }
-
-  ${Input}:checked + ${Slider} {
-    &:after,
-    svg {
-      -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});
-      -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});
-      transform: translateX(${({ small }) => (small ? '28px' : '36px')});
-    }
-  }
-`;
-
-const Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  display: inline-block;
-  user-select: none;
-`;
-
-export { Switch, Slider, Input, Wrapper };

package/src/components/Toggle/types.ts

@@ -1,10 +0,0 @@
-import { EventHandlerProps } from '../types';
-
-export interface ToggleProps extends EventHandlerProps {
-  switched?: boolean;
-  name?: string;
-  small?: boolean;
-  className?: string;
-  disabled?: boolean;
-  ariaLabel?: string;
-}

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToggleButton } from './ToggleButton';
-
-const meta = {
-  title: 'Components/Forms/ToggleButton',
-  component: ToggleButton,
-  tags: ['autodocs'],
-} satisfies Meta<typeof ToggleButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    checked: true,
-    children: 'Toggle button',
-  },
-};