@veeqo/ui 0.0.1 → 0.0.3

package/src/components/PriceInput/PriceInput.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { PriceInput } from '.';
+
+export default {
+  title: 'Components/Forms/PriceInput',
+  component: PriceInput,
+  tags: ['autodocs'],
+};
+
+const baseArgs = {
+  currency: '$',
+  disabled: false,
+  error: '',
+  hasError: false,
+  hint: '',
+  label: '',
+  priceValue: '4.99',
+  size: 'base',
+  step: '0.10',
+  tooltip: '',
+};
+
+export const InputOnly = (args: any) => <PriceInput {...args} />;
+
+InputOnly.args = baseArgs;
+
+export const WithLabels = (args: any) => <PriceInput {...args} />;
+
+WithLabels.args = {
+  ...baseArgs,
+  label: 'Declared value',
+  hint: 'Up to $100 insurance coverage included',
+  error:
+    'If the declared value is under $100 leave blank to use the included insurance coverage or you will be charged',
+  tooltip: 'This is an example tooltip',
+};

package/src/components/PriceInput/PriceInput.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PriceInput } from '.';
+
+describe('PriceInput', () => {
+  beforeEach(() => {
+    render(
+      <PriceInput
+        label="Insurance"
+        currency="USD"
+        priceValue=""
+        onPriceChange={() => {}}
+        onChange={() => {}}
+      />,
+    );
+  });
+
+  it('has an accessible name', () => {
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAccessibleName('Insurance');
+  });
+});

package/src/components/PriceInput/PriceInput.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { ComponentSize } from '../types';
+import { Stepper } from '../Stepper';
+import type { TextFieldProps } from '../TextField/types';
+
+import { PriceInputGroup, StyledTextField, PrefixContainer, PrefixText } from './styled';
+
+import { CurrencyProps } from './types';
+import { withLabels } from '../../hoc';
+
+const fractionDigits = 2;
+
+function stringToFixed(price: string) {
+  const floatPrice = parseFloat(price.replace(',', '.'));
+  return floatPrice.toFixed(fractionDigits);
+}
+
+export const PriceInput = withLabels(
+  ({
+    className = '',
+    hasError,
+    currency,
+    disabled = false,
+    onChange,
+    onPriceChange,
+    priceValue,
+    step = '0.1',
+    size = ComponentSize.base,
+    ...otherProps
+  }: CurrencyProps) => {
+    const handleChange = (value: string) =>
+      onChange(value.replace(/[a-zA-Z]/g, '').replace(',', '.'));
+
+    const handleBlur: TextFieldProps['onBlur'] = (e) => {
+      const target = e.target as HTMLInputElement;
+      const { value } = target;
+
+      if (!value) {
+        onPriceChange('');
+
+        return;
+      }
+
+      const roundedValue = stringToFixed(value);
+
+      onPriceChange(roundedValue);
+    };
+
+    const handleIncrement = (callback = onPriceChange) => {
+      const currentPrice = parseFloat(priceValue) || 0;
+      const currentStep = parseFloat(step);
+
+      callback((currentPrice + currentStep).toFixed(fractionDigits));
+    };
+    const handleDecrement = (callback = onPriceChange) => {
+      const currentPrice = parseFloat(priceValue) || 0;
+      const currentStep = parseFloat(step);
+
+      callback((currentPrice - currentStep).toFixed(fractionDigits));
+    };
+
+    const handleKeyDown: TextFieldProps['onKeyDown'] = (e) => {
+      const { key } = e;
+      const target = e.target as HTMLInputElement;
+      const isInForm = target.form;
+
+      if (!isInForm) {
+        if (key === 'Enter') target.blur();
+      }
+      if (key === 'ArrowUp') handleIncrement(onChange);
+      if (key === 'ArrowDown') handleDecrement(onChange);
+    };
+
+    return (
+      <PriceInputGroup className={className} hasError={hasError}>
+        <PrefixContainer disabled={disabled} size={size}>
+          <PrefixText variant="hintText">{currency}</PrefixText>
+        </PrefixContainer>
+        <StyledTextField
+          placeholder="0.00"
+          type="currency"
+          value={priceValue}
+          step={step}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          size={size}
+          {...otherProps}
+        />
+        <Stepper
+          onIncrement={() => handleIncrement()}
+          onDecrement={() => handleDecrement()}
+          disabled={disabled}
+          size={size}
+        />
+      </PriceInputGroup>
+    );
+  },
+);

package/src/components/PriceInput/index.tsx

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

package/src/components/PriceInput/styled.ts

@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+
+import { TextField } from '../TextField';
+import { BaseContainer } from '../BaseContainer';
+import { Text } from '../Text';
+import { InputGroup } from '../InputGroup';
+import { ComponentSize } from '../types';
+import { theme } from '../../theme';
+
+export const StyledTextField = styled(TextField)`
+  color: ${theme.colors.neutral.ink.dark};
+  width: 100%;
+
+  &:focus {
+    box-shadow: none;
+    border-color: none;
+    border-right-width: 0;
+    border-color: ${theme.colors.neutral.ink.lightest};
+  }
+`;
+
+export const PrefixContainer = styled(BaseContainer)<{ disabled: boolean; size?: ComponentSize }>`
+  user-select: none;
+  border: 1px solid ${theme.colors.neutral.ink.lightest};
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ size }) => (size === 'sm' ? '30px' : '36px')};
+  background-color: ${({ disabled }) => (disabled ? theme.colors.neutral.grey.light : 'white')};
+  flex-shrink: 0;
+
+  ${({ size }) => (size === 'sm' ? '> span { font-size: 12px }' : '')};
+
+  &:active {
+    z-index: 0;
+    border-right-width: 0;
+
+    + input {
+      z-index: 0;
+      border-left-width: 1px;
+    }
+  }
+`;
+
+export const PrefixText = styled(Text)`
+  font-size: 14px;
+`;
+
+export const PriceInputGroup = styled(InputGroup)<{ hasError?: boolean }>`
+  display: inline-flex;
+  border-radius: 4px;
+  min-width: 125px;
+  width: 100%;
+
+  ${({ hasError }) =>
+    hasError &&
+    `
+    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};
+
+    > * {
+      border-top-color: ${theme.colors.secondary.red.base};
+      border-bottom-color: ${theme.colors.secondary.red.base};
+    }
+
+    > *:first-child {
+      border-left-color: ${theme.colors.secondary.red.base};
+    }
+
+    > div:last-child {
+      > button:first-child {
+        border-top-color: ${theme.colors.secondary.red.base};
+        border-right-color: ${theme.colors.secondary.red.base};
+      }
+
+      > button:last-child {
+        border-right-color: ${theme.colors.secondary.red.base};
+        border-bottom-color: ${theme.colors.secondary.red.base};
+      }
+    }
+  `}
+
+  &:focus-within {
+    outline: 0;
+    box-shadow: ${({ hasError }) =>
+      hasError ? '' : `0 0 0 4px ${theme.colors.secondary.blue.light}`};
+  }
+
+  &:focus-within > * {
+    border-top-color: ${({ hasError }) =>
+      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+    border-bottom-color: ${({ hasError }) =>
+      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+  }
+
+  &:focus-within > *:first-child {
+    border-left-color: ${({ hasError }) =>
+      hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+  }
+
+  &:focus-within > div:last-child {
+    > button:first-child {
+      border-top-color: ${({ hasError }) =>
+        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+      border-right-color: ${({ hasError }) =>
+        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+    }
+
+    > button:last-child {
+      border-right-color: ${({ hasError }) =>
+        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+      border-bottom-color: ${({ hasError }) =>
+        hasError ? theme.colors.secondary.red.base : theme.colors.secondary.blue.base};
+    }
+  }
+`;

package/src/components/PriceInput/types.ts

@@ -0,0 +1,13 @@
+import { ComponentSize } from '../types';
+
+export interface CurrencyProps {
+  className?: string;
+  disabled?: boolean;
+  size?: ComponentSize;
+  currency: string;
+  step?: string;
+  hasError?: boolean;
+  priceValue: string;
+  onChange: (value: string) => void;
+  onPriceChange: (value: string) => void;
+}

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio } from '.';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+
+const meta = {
+  title: 'Components/Forms/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const args = {
+  checked: false,
+  disabled: false,
+  value: 'test-value',
+};
+
+export const Unchecked: Story = { args };
+
+export const Checked: Story = {
+  args: {
+    ...args,
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...args,
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const WithLabels: Story = {
+  args: {
+    ...args,
+    checked: true,
+    label: 'Label',
+    hint: 'This is an example hint',
+    tooltip: 'This is an example tooltip',
+    error: 'Something went wrong',
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    ...args,
+    checked: true,
+    label: 'Checkbox with glyph',
+    Badge: <CrossIcon />,
+  },
+};

package/src/components/Radio/Radio.test.tsx

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

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { Choice, ForwardedChoiceProps } from '../Choice';
+import { Input } from './styled';
+import { generateId } from '../../utils/generateId';
+
+type RadioValue = string | number;
+
+export interface RadioProps extends ForwardedChoiceProps {
+  checked: boolean;
+  value?: RadioValue;
+  disabled?: boolean;
+  name?: string;
+  onChange: (checked: boolean, value?: RadioValue) => void;
+}
+
+export const Radio = ({ checked, value, name, disabled, onChange, ...otherProps }: RadioProps) => {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(e.currentTarget.checked, value);
+    },
+    [onChange, value],
+  );
+
+  const id = generateId('radio');
+
+  return (
+    <Choice id={id} disabled={disabled} {...otherProps}>
+      <Input
+        id={id}
+        type="radio"
+        checked={checked}
+        value={value}
+        name={name}
+        disabled={disabled}
+        onChange={handleChange}
+      />
+    </Choice>
+  );
+};

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

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+.c1 {
+  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;
+}
+
+.c1 > * + * {
+  margin-left: 1rem;
+}
+
+.c2 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  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;
+  width: 24px;
+  height: 24px;
+}
+
+.c0 {
+  box-sizing: border-box;
+}
+
+.c0:hover {
+  cursor: pointer;
+}
+
+.c3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin: 3px;
+  background-color: transparent;
+  border: 2px solid #637381;
+  border-radius: 50%;
+  outline: none;
+  cursor: pointer;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: box-shadow 0.1s;
+  transition: box-shadow 0.1s;
+}
+
+.c3:checked {
+  position: relative;
+  border-color: #0079d1;
+}
+
+.c3:checked::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background-color: #0079d1;
+  border-radius: 50%;
+}
+
+.c3:hover {
+  border-color: #0079d1;
+}
+
+.c3:active {
+  border-color: #0079d1;
+}
+
+.c3:focus {
+  box-shadow: 0 0 0 4px #80bce8;
+  outline: 0;
+}
+
+.c3:disabled {
+  box-shadow: none;
+  background-color: #dfe3e8;
+  border-color: #959fa8;
+  cursor: default;
+}
+
+.c3:disabled::before {
+  background-color: #637381;
+}
+
+<div>
+  <label
+    class="c0"
+    for="test-id"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <input
+          checked=""
+          class="c3"
+          id="test-id"
+          type="radio"
+          value=""
+        />
+      </div>
+    </div>
+  </label>
+</div>
+`;

package/src/components/Radio/index.ts

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

package/src/components/Radio/styled.ts

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+export const Input = styled.input`
+  appearance: none;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin: 3px;
+  background-color: transparent;
+  border: 2px solid #637381;
+  border-radius: 50%;
+  outline: none;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  transition: box-shadow 0.1s;
+
+  &:checked {
+    position: relative;
+    border-color: #0079d1;
+  }
+
+  &:checked::before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background-color: #0079d1;
+    border-radius: 50%;
+  }
+
+  &:hover {
+    border-color: #0079d1;
+  }
+
+  &:active {
+    border-color: #0079d1;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 4px #80bce8;
+    outline: 0;
+  }
+
+  &:disabled {
+    box-shadow: none;
+    background-color: #dfe3e8;
+    border-color: #959fa8;
+    cursor: default;
+  }
+
+  &:disabled::before {
+    background-color: #637381;
+  }
+`;

package/src/components/Search/Search.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';
+import Search from './Search';
+
+<Meta title="Components/UI/Search" component={Search} />
+
+# Search
+
+<Canvas>
+  <Search placeholder="Start typing..." />
+</Canvas>
+
+## Usage
+
+```jsx
+import { VeeqoUI } from '@veeqo/components';
+const { Search } = VeeqoUI;
+
+<Search value="" name="search" onChange={handleChange} />
+```
+
+## Props
+
+<Props of={Search} />

package/src/components/Search/Search.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Search } from '.';
+
+const meta = {
+  title: 'Components/Forms/Search',
+  component: Search,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Search>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('');
+    return (
+      <Search
+        value={value}
+        placeholder="Search..."
+        name="search"
+        onChange={setValue}
+        onClearClick={() => setValue('')}
+      />
+    );
+  },
+  args: {
+    value: '',
+  },
+};

package/src/components/Search/Search.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Search } from '.';
+
+describe('Search', () => {
+  test('it renders correctly', () => {
+    const { container } = render(
+      <Search name="test-name" value="test-value" onChange={() => {}} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});