@veeqo/ui 0.0.3 → 0.0.6

package/src/components/Stack/Stack.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Stack } from './Stack';
-import { StackProps } from './types';
-
-describe('Stack', () => {
-  test.each([
-    {
-      direction: 'vertical',
-      alignX: 'start',
-      alignY: 'start',
-    },
-    {
-      direction: 'vertical',
-      alignX: 'center',
-      alignY: 'center',
-    },
-    {
-      direction: 'vertical',
-      alignX: 'end',
-      alignY: 'end',
-    },
-    {
-      direction: 'horizontal',
-      alignX: 'start',
-      alignY: 'start',
-    },
-    {
-      direction: 'horizontal',
-      alignX: 'center',
-      alignY: 'center',
-    },
-    {
-      direction: 'horizontal',
-      alignX: 'end',
-      alignY: 'end',
-    },
-    {
-      direction: 'vertical',
-      spacing: 'md',
-    },
-  ] as StackProps[])('renders as expected with different props', (props) => {
-    const { container } = render(<Stack {...props}>Hello</Stack>);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Stack/Stack.tsx

@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-
-import { StackProps } from './types';
-import { Alignments } from './Alignments';
-
-import { theme } from '../../theme';
-
-/**
- * Layout component.
- */
-export const Stack = styled.div<StackProps>`
-  display: flex;
-
-  ${(props) => {
-    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
-
-    let alignItems;
-    let justifyContent;
-    let flexDirection;
-    let itemFlex;
-    let marginTop = '';
-    let marginLeft = '';
-
-    if (direction === 'vertical') {
-      alignItems = alignX && Alignments[alignX];
-      justifyContent = alignY && Alignments[alignY];
-      marginTop = theme.sizes[spacing];
-      flexDirection = 'column';
-    } else {
-      alignItems = alignY && Alignments[alignY];
-      justifyContent = alignX && Alignments[alignX];
-      marginLeft = theme.sizes[spacing];
-      flexDirection = 'row';
-    }
-
-    // These options result in 'justify-content: stretch' which doesn't exist,
-    // so instead we set the flex of child elements
-    if (
-      (direction === 'vertical' && alignY === 'stretch') ||
-      (direction === 'horizontal' && alignX === 'stretch')
-    ) {
-      itemFlex = 1;
-    }
-
-    return `
-      align-items: ${alignItems};
-      justify-content: ${justifyContent};
-      flex-direction: ${flexDirection};
-
-      & > * {
-        flex: ${itemFlex};
-      }
-
-      & > * + * {
-        margin-top: ${marginTop};
-        margin-left: ${marginLeft};
-      }
-    `;
-  }}
-`;

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

@@ -1,275 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stack renders as expected with different props 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-top: 1rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="vertical"
-  >
-    Hello
-  </div>
-</div>
-`;
-
-exports[`Stack renders as expected with different props 2`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-top: 1rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="vertical"
-  >
-    Hello
-  </div>
-</div>
-`;
-
-exports[`Stack renders as expected with different props 3`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-top: 1rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="vertical"
-  >
-    Hello
-  </div>
-</div>
-`;
-
-exports[`Stack renders as expected with different props 4`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-left: 1rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="horizontal"
-  >
-    Hello
-  </div>
-</div>
-`;
-
-exports[`Stack renders as expected with different props 5`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-left: 1rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="horizontal"
-  >
-    Hello
-  </div>
-</div>
-`;
-
-exports[`Stack renders as expected with different props 6`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-left: 1rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="horizontal"
-  >
-    Hello
-  </div>
-</div>
-`;
-
-exports[`Stack renders as expected with different props 7`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-top: 1.5rem;
-}
-
-<div>
-  <div
-    class="c0"
-    direction="vertical"
-    spacing="md"
-  >
-    Hello
-  </div>
-</div>
-`;

package/src/components/Stack/types.ts

@@ -1,73 +0,0 @@
-import { ReactNode } from 'react';
-import { Alignments } from './Alignments';
-
-type Alignment = keyof typeof Alignments;
-
-enum SizeAlias {
-  none = 'none',
-  line = 'line',
-  xs = 'xs',
-  sm = 'sm',
-  base = 'base',
-  md = 'md',
-  lg = 'lg',
-  xl = 'xl',
-  xxl = 'xxl',
-}
-
-export type SizeScaleIndex = number | keyof typeof SizeAlias;
-export type SizeScale = {
-  [index: number]: string;
-  [index: string]: string;
-};
-
-type SizeScaleBuilderConfig = {
-  increment: number;
-  unit: string;
-  count: number;
-};
-function buildSizeScale({ increment, unit, count }: SizeScaleBuilderConfig): SizeScale {
-  const sizes: SizeScale = {};
-  /* eslint-disable-next-line no-plusplus */
-  for (let i = 0; i <= count; i++) {
-    const value = i * increment;
-    sizes[i] = `${value}${unit}`;
-  }
-  return sizes;
-}
-
-export const sizeScale = buildSizeScale({ increment: 0.25, unit: 'rem', count: 20 });
-
-export const sizeAliases: SizeScale = {
-  [SizeAlias.none]: '0',
-  [SizeAlias.line]: '1px',
-  [SizeAlias.xs]: sizeScale[1],
-  [SizeAlias.sm]: sizeScale[2],
-  [SizeAlias.base]: sizeScale[4],
-  [SizeAlias.md]: sizeScale[6],
-  [SizeAlias.lg]: sizeScale[8],
-  [SizeAlias.xl]: sizeScale[12],
-  [SizeAlias.xxl]: sizeScale[16],
-};
-
-const sizes: SizeScale = {
-  ...sizeAliases,
-  ...sizeScale,
-};
-
-export type Size = keyof typeof sizes;
-
-export type StackProps = {
-  children: ReactNode;
-  /**
-   * Classname for description
-   */
-  className?: string;
-  /**
-   * Direction of component
-   */
-  direction?: 'vertical' | 'horizontal';
-  alignX?: Alignment;
-  alignY?: Alignment;
-  spacing?: Size;
-};

package/src/components/Stepper/Stepper.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Stepper } from '.';
-
-const meta = {
-  title: 'Components/Forms/Stepper',
-  component: Stepper,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Stepper>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/Stepper/Stepper.test.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Stepper } from '.';
-
-test('Renders correctly', () => {
-  const { container } = render(<Stepper onIncrement={() => {}} onDecrement={() => {}} />);
-  expect(container).toMatchSnapshot();
-});

package/src/components/Stepper/Stepper.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { theme } from '../../theme';
-
-import { Container, StepButton } from './styled';
-import { DownArrowIcon } from '../../tempIcons/DownArrowIcon';
-import { UpArrowIcon } from '../../tempIcons/UpArrowIcon';
-import { ComponentSize } from '../types';
-
-export interface StepperProps {
-  onIncrement: () => void;
-  onDecrement: () => void;
-  disabled?: boolean;
-  size?: ComponentSize;
-}
-
-export const Stepper = ({ onIncrement, onDecrement, disabled = false, size }: StepperProps) => (
-  <Container size={size}>
-    <StepButton type="button" onClick={onIncrement} disabled={disabled}>
-      <UpArrowIcon
-        height={theme.sizes.base}
-        width={theme.sizes.base}
-        color={theme.colors.neutral.ink.base}
-      />
-    </StepButton>
-    <StepButton type="button" onClick={onDecrement} disabled={disabled}>
-      <DownArrowIcon
-        height={theme.sizes.base}
-        width={theme.sizes.base}
-        color={theme.colors.neutral.ink.base}
-      />
-    </StepButton>
-  </Container>
-);

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

@@ -1,142 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Renders correctly 1`] = `
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 40px;
-  border-radius: 4px;
-}
-
-.c0 > *:first-child {
-  border-bottom-width: 0;
-}
-
-.c0 > *:active,
-.c0 > *:focus {
-  border-width: 1px;
-}
-
-.c0 > *:active + *,
-.c0 > *:focus + * {
-  border-top-width: 0;
-}
-
-.c0 > *:focus,
-.c0 > *:active {
-  z-index: 5;
-}
-
-.c0 > *:first-child {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.c0 > *:last-child {
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-}
-
-.c1 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  border: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 0 8px;
-  background-color: white;
-  border: 1px solid #959fa8;
-}
-
-.c1:hover {
-  cursor: pointer;
-  background-color: #fafafb;
-}
-
-.c1:active:not(:disabled) {
-  background-color: #fafafb;
-  border-color: #0079d1;
-  box-shadow: 0 0 0 4px #80bce8;
-}
-
-.c1:focus {
-  box-shadow: 0 0 0 4px #80bce8;
-  outline: 0;
-}
-
-.c1:disabled {
-  background-color: #f2f3f5;
-  border-color: #959fa8;
-  color: #637381;
-  cursor: not-allowed;
-}
-
-<div>
-  <div
-    class="c0"
-  >
-    <button
-      class="c1"
-      type="button"
-    >
-      <svg
-        color="#37424D"
-        fill="none"
-        height="1rem"
-        role="presentation"
-        viewBox="0 0 16 16"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M4.91021 10.47L7.97021 7.4167L11.0302 10.47L11.9702 9.53003L7.97021 5.53003L3.97021 9.53003L4.91021 10.47Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </button>
-    <button
-      class="c1"
-      type="button"
-    >
-      <svg
-        color="#37424D"
-        fill="none"
-        height="1rem"
-        role="presentation"
-        viewBox="0 0 16 16"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M11.0302 5.52997L7.97021 8.5833L4.91021 5.52997L3.97021 6.46997L7.97021 10.47L11.9702 6.46997L11.0302 5.52997Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </button>
-  </div>
-</div>
-`;