@veeqo/ui 0.0.1 → 0.0.3

package/src/components/Text/index.ts

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

package/src/components/Text/textVariants.ts

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

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

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

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

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

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

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

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

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

package/src/components/TextField/styled.ts

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

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

@@ -0,0 +1,88 @@
+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: [],
+  },
+};