@veeqo/ui 0.0.3 → 0.0.6

package/src/components/Text/textVariants.ts

@@ -1,41 +0,0 @@
-export const headerVariants = [
-  'headingXXL',
-  'headingXL',
-  'headingLarge',
-  'headingMedium',
-  'headingSmall',
-] as const;
-
-export const textVariants = [
-  ...headerVariants,
-  'headingTable',
-  'subheadingLarge',
-  'subheadingMedium',
-  'subheadingSmall',
-  'subheadingSmallBold',
-  'body',
-  'bodySmall',
-  'bodyBold',
-  'bodyBoldDark',
-  'bodySmallBold',
-  'inputLabel',
-  'inputLabelSmall',
-  'hintText',
-  'placeholder',
-  'placeholderSmall',
-  'placeholderCode',
-  'placeholderCodeSmall',
-  'error',
-  'errorSmall',
-  'successSmall',
-] as const;
-
-/** @deprecated do not use me */
-export const deprecatedTextVariants = [
-  'button',
-  'buttonSmall',
-  'linkLarge',
-  'linkMedium',
-  'link',
-  'linkSmall',
-] as const;

package/src/components/Text/types.ts

@@ -1,33 +0,0 @@
-import { textVariants, deprecatedTextVariants, headerVariants } from './textVariants';
-
-export type HeaderVariant = (typeof headerVariants)[number];
-export type TextVariant = (typeof textVariants)[number];
-export type DeprecatedTextVariants = (typeof deprecatedTextVariants)[number];
-
-// Likely not exhaustive, extend if proper.
-export type ValidTextTag =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'p'
-  | 'span'
-  | 'label'
-  | 'li'
-  | 'ol'
-  | 'ul'
-  | 'blockquote'
-  | 'code';
-
-export type TextProps = {
-  as?: ValidTextTag;
-  muted?: boolean;
-} & (
-  | { variant: TextVariant }
-  | {
-      /** @deprecated to be removed, bad for accessibility. Use `Button` or `Anchor` */
-      variant?: DeprecatedTextVariants;
-    }
-);

package/src/components/Text/utils.ts

@@ -1,23 +0,0 @@
-import { TextVariant, DeprecatedTextVariants, ValidTextTag } from './types';
-
-const componentMap: { [key in TextVariant | DeprecatedTextVariants]?: string } = {
-  inputLabel: 'label',
-  inputLabelSmall: 'label',
-  headingSmall: 'h3',
-  headingMedium: 'h3',
-  headingLarge: 'h2',
-  headingXL: 'h1',
-  headingXXL: 'h1',
-  // Deprecated, but quickfix for A11y.
-  button: 'button',
-  buttonSmall: 'button',
-};
-
-export const getComponentOverride = (
-  as: ValidTextTag | undefined,
-  variant: TextVariant | DeprecatedTextVariants | undefined,
-) => {
-  if (as) return as;
-  if (variant) return componentMap[variant];
-  return undefined;
-};

package/src/components/TextField/Docs.mdx

@@ -1,14 +0,0 @@
-import { Meta, Primary, Controls, Story } from '@storybook/blocks';
-import * as TextFieldStories from './TextField.stories';
-
-<Meta of={TextFieldStories} />
-
-# TextField
-
-Our main text input component.
-
-<Primary />
-
-## Props
-
-<Controls />

package/src/components/TextField/TextField.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { TextField } from '.';
-
-export default {
-  title: 'Components/Forms/TextField',
-  component: TextField,
-};
-
-const baseArgs = {
-  disabled: false,
-  hasError: false,
-  placeholder: 'Placeholder',
-  size: 'base',
-  value: '',
-  label: '',
-  hint: '',
-  error: '',
-  tooltip: '',
-};
-
-export const InputOnly = (args: any) => <TextField {...args} />;
-
-InputOnly.args = baseArgs;
-
-export const WithLabels = (args: any) => <TextField {...args} />;
-
-WithLabels.args = {
-  ...baseArgs,
-  label: 'HS Code',
-  hint: (
-    <span>
-      <span>May be populated by the order channel or ship from location. </span>
-      <a href="https://veeqo.com">Learn more</a>
-    </span>
-  ),
-  error: 'Value entered is not a valid HS code',
-  tooltip: 'This is an example tooltip',
-};

package/src/components/TextField/TextField.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { TextField } from '.';
-
-describe('TextField', () => {
-  test('Renders correctly', () => {
-    const { asFragment } = render(
-      <TextField
-        label="Test label"
-        hint="Test hint"
-        error="Test error"
-        name="test-input"
-        value="one"
-        onChange={() => {}}
-      />,
-    );
-    const tree = asFragment();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('has an accessible name', () => {
-    render(<TextField label="My Test Input" value="" onChange={() => {}} />);
-    const input = screen.getByRole('textbox', { name: 'My Test Input' });
-    expect(input).toBeVisible();
-  });
-});

package/src/components/TextField/TextField.tsx

@@ -1,92 +0,0 @@
-import React, { useCallback, ChangeEvent } from 'react';
-import { TextFieldProps } from './types';
-import { generateId } from '../../utils/generateId';
-
-import { Input, Textarea } from './styled';
-import { ComponentSize } from '../types';
-
-const NUMBER_REGEX = /^-?[0-9]*\.?[0-9]+$/;
-
-export const TextField = ({
-  className,
-  disabled = false,
-  hasError,
-  max,
-  min,
-  multiline = false,
-  name,
-  onChange,
-  pattern,
-  placeholder,
-  rows = '3',
-  size = ComponentSize.base,
-  step,
-  type = 'text',
-  value,
-  spellCheck = false,
-  ...otherProps
-}: TextFieldProps) => {
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const newValue = event.currentTarget.value;
-
-      if (newValue === '') {
-        onChange(newValue);
-        return;
-      }
-
-      if (type !== 'number') {
-        onChange(newValue);
-        return;
-      }
-
-      const reg = new RegExp(NUMBER_REGEX);
-      if (!reg.test(newValue)) {
-        return;
-      }
-
-      onChange(newValue);
-    },
-    [onChange, type],
-  );
-
-  const id = generateId('textfield');
-
-  if (type === 'text' && multiline) {
-    return (
-      <Textarea
-        className={className}
-        disabled={disabled}
-        hasError={hasError}
-        id={id}
-        name={name}
-        onChange={handleChange}
-        placeholder={placeholder}
-        rows={rows}
-        value={value}
-        spellCheck={spellCheck}
-        {...otherProps}
-      />
-    );
-  }
-
-  return (
-    <Input
-      className={className}
-      disabled={disabled}
-      hasError={hasError}
-      id={id}
-      inputSize={size}
-      max={max}
-      min={min}
-      name={name}
-      onChange={handleChange}
-      placeholder={placeholder}
-      step={step}
-      type={type}
-      value={value}
-      spellCheck={spellCheck}
-      {...otherProps}
-    />
-  );
-};

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

@@ -1,205 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextField Renders correctly 1`] = `
-<DocumentFragment>
-  .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -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: 0.5rem;
-}
-
-.c2 {
-  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: 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;
-}
-
-.c2 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c2 > * + * {
-  margin-left: 0.5rem;
-}
-
-.c3 {
-  display: block;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  color: #37424D;
-}
-
-.c4 {
-  display: block;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  color: #637381;
-}
-
-.c6 {
-  display: block;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  color: #EB5757;
-}
-
-.c6::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc(0.5rem * -1);
-  width: 2px;
-  background-color: #EB5757;
-}
-
-.c1 {
-  position: relative;
-}
-
-.c5 {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  box-sizing: border-box;
-  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;
-  padding: 0 12px;
-  border-radius: 4px;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  height: 40px;
-  font-size: 14px;
-}
-
-.c5 {
-  --outline-size: 4px;
-}
-
-.c5:focus {
-  border-color: #0079d1;
-  box-shadow: 0 0 0 var(--outline-size) #80bce8;
-  outline: 0;
-}
-
-.c5:invalid {
-  border-color: #eb5757;
-  box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
-}
-
-.c5:disabled {
-  box-shadow: none;
-  background-color: #f2f3f5;
-  border-color: #959fa8;
-  color: #637381;
-}
-
-.c5,
-.c5:focus {
-  border-color: #EB5757;
-}
-
-.c5:focus {
-  box-shadow: 0 0 0 var(--outline-size) #F7BCBC;
-}
-
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c5[type='number'] {
-  -moz-appearance: textfield;
-  width: 8ch;
-  text-align: right;
-}
-
-<div
-    class="c0 c1"
-    spacing="sm"
-  >
-    <div>
-      <div
-        class="c2"
-        direction="horizontal"
-        spacing="sm"
-      >
-        <label
-          class="c3"
-          for="test-id"
-        >
-          Test label
-        </label>
-      </div>
-      <span
-        class="c4"
-      >
-        Test hint
-      </span>
-    </div>
-    <input
-      class="c5"
-      id="test-id"
-      name="test-input"
-      spellcheck="false"
-      type="text"
-      value="one"
-    />
-    <span
-      class="c6"
-    >
-      Test error
-    </span>
-  </div>
-</DocumentFragment>
-`;

package/src/components/TextField/index.ts

@@ -1,4 +0,0 @@
-import { withLabels } from '../../hoc';
-import { TextField as StandardTextField } from './TextField';
-
-export const TextField = withLabels(StandardTextField);

package/src/components/TextField/styled.ts

@@ -1,95 +0,0 @@
-import styled, { css } from 'styled-components';
-import { theme } from '../../theme';
-
-interface InputProps {
-  hasError: boolean;
-  inputSize: 'sm' | 'base';
-}
-
-const pseudoStates = ({ hasError, inputSize }: InputProps) => css`
-  & {
-    --outline-size: ${inputSize === 'sm' ? '2px' : '4px'};
-  }
-
-  &:focus {
-    border-color: #0079d1;
-    box-shadow: 0 0 0 var(--outline-size) #80bce8;
-    outline: 0;
-  }
-
-  &:invalid {
-    border-color: #eb5757;
-    box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: #f2f3f5;
-    border-color: #959fa8;
-    color: #637381;
-  }
-
-  ${hasError &&
-  `
-    &,
-    &:focus {
-      border-color: #EB5757;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 var(--outline-size) #F7BCBC;
-    }
-  `}
-`;
-
-export const Input = styled.input<any>`
-  font-family: ${theme.fontFamily};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 12px;
-  border-radius: 4px;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-
-  ${({ inputSize }) => {
-    let height = '40px';
-    let fontSize = '14px';
-
-    if (inputSize === 'sm') {
-      height = '32px';
-      fontSize = '12px';
-    }
-
-    return `
-      height: ${height};
-      font-size: ${fontSize};
-    `;
-  }}
-
-  ${pseudoStates}
-
-  /* Hide number arrows/spinners */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &[type='number'] {
-    -moz-appearance: textfield;
-    width: 8ch;
-    text-align: right;
-  }
-`;
-
-export const Textarea = styled.textarea<any>`
-  box-sizing: border-box;
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-
-  ${pseudoStates}
-`;

package/src/components/TextField/types.ts

@@ -1,41 +0,0 @@
-import { ComponentSize, EventHandlerProps } from '../types';
-
-export type TextFieldType =
-  | 'text'
-  | 'email'
-  | 'number'
-  | 'password'
-  | 'search'
-  | 'tel'
-  | 'url'
-  | 'date'
-  | 'datetime-local'
-  | 'month'
-  | 'time'
-  | 'week'
-  | 'currency';
-
-/**
- * TextField properties.
- */
-export type TextFieldProps = Omit<EventHandlerProps, 'onChange' | 'onKeyDown'> &
-  Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoComplete' | 'onKeyDown'> & {
-    className?: string;
-    /** Input element type */
-    type?: TextFieldType;
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    step?: string;
-    name?: string;
-    min?: string;
-    max?: string;
-    pattern?: string;
-    hasError?: boolean;
-    size?: ComponentSize;
-    multiline?: boolean;
-    rows?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    spellCheck?: boolean;
-  };

package/src/components/ToastsLayout/ToastsLayout.stories.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { ToastsLayout } from '.';
-import { Meta, StoryObj } from '@storybook/react';
-import { Button } from '../Button';
-import { Stack } from '../Stack';
-import { Notification } from './types';
-
-const meta = {
-  title: 'Components/UI/ToastsLayout',
-  component: ToastsLayout,
-  tags: ['autodocs'],
-} satisfies Meta<typeof ToastsLayout>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [toasts, setToasts] = React.useState<Notification[]>([]);
-    const [key, setKey] = React.useState(1);
-    const onClick = () => {
-      setKey(key + 1);
-      setToasts([
-        ...toasts,
-        {
-          key: key.toString(),
-          type: 'success',
-          text: `Some success message №${key}`,
-        } as Notification,
-      ]);
-    };
-    const onClose = (key: any) => {
-      setToasts(toasts.filter((item) => item.key !== key));
-    };
-    return (
-      <div style={{ margin: 24 }}>
-        <Button onClick={onClick}>Show toast</Button>
-        <ToastsLayout toasts={toasts} onClose={onClose} />
-      </div>
-    );
-  },
-  args: {
-    toasts: [],
-  },
-};
-
-export const WithCTA: Story = {
-  render: () => {
-    const [toasts, setToasts] = React.useState<Notification[]>([]);
-    const [key, setKey] = React.useState(1);
-    const cta = (
-      <Stack direction="horizontal">
-        <Button size="sm" variant="primary" onClick={() => alert('success')}>
-          Action
-        </Button>
-        <Button size="sm" variant="primaryDestructive" onClick={() => alert('error')}>
-          Action
-        </Button>
-      </Stack>
-    );
-    const onClick = () => {
-      setKey(key + 1);
-      setToasts([
-        ...toasts,
-        {
-          key: key.toString(),
-          type: 'info',
-          text: `Some success message №${key}`,
-          cta,
-        } as Notification,
-      ]);
-    };
-    const onClose = (key: string) => {
-      setToasts(toasts.filter((item) => item.key !== key));
-    };
-    console.log(toasts);
-    return (
-      <div style={{ margin: 24 }}>
-        <Button onClick={onClick}>Show toast</Button>
-        <ToastsLayout toasts={toasts} onClose={onClose} />
-      </div>
-    );
-  },
-  args: {
-    toasts: [],
-  },
-};