@veeqo/ui 0.0.4 → 0.0.7

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

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

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

@@ -1,101 +0,0 @@
-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/styled.ts

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

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

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

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

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

@@ -1,128 +0,0 @@
-// 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/styled.ts

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

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

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

@@ -1,12 +0,0 @@
-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();
-  });
-});