@veeqo/ui 0.0.4 → 0.0.6

package/src/components/DimensionsInput/DimensionsInput.test.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DimensionsInput } from './DimensionsInput';
-
-test('Renders correctly', () => {
-  const { container } = render(
-    <DimensionsInput
-      handleChangeHeight={() => {}}
-      height="12"
-      handleChangeWidth={() => {}}
-      width="15"
-      handleChangeLength={() => {}}
-      length="15"
-    />,
-  );
-  expect(container).toMatchSnapshot();
-});
-
-describe('DimensionsInput component', () => {
-  const handleChangeHeight = jest.fn();
-  const handleChangeWidth = jest.fn();
-  const handleChangeLength = jest.fn();
-  it('renders correctly', async () => {
-    render(
-      <DimensionsInput
-        handleChangeHeight={handleChangeHeight}
-        height="12"
-        handleChangeWidth={handleChangeWidth}
-        width="15"
-        handleChangeLength={handleChangeLength}
-        length="15"
-        label="Package dimensions test"
-        hint="Specify package dimensions"
-        unit="cm"
-      />,
-    );
-    // Check if it renders with label
-    expect(screen.getByText('Package dimensions test')).toBeInTheDocument();
-    // Check if it renders with hint
-    expect(screen.getByText('Specify package dimensions')).toBeInTheDocument();
-    // Check if unit button renders
-    expect(screen.getByText('cm')).toBeInTheDocument();
-
-    const lengthInput = screen.getByPlaceholderText('L') as HTMLInputElement;
-    const widthInput = screen.getByPlaceholderText('W') as HTMLInputElement;
-    const heightInput = screen.getByPlaceholderText('H') as HTMLInputElement;
-
-    expect(lengthInput.value).toBe('15');
-    expect(widthInput.value).toBe('15');
-    expect(heightInput.value).toBe('12');
-
-    fireEvent.change(lengthInput, { target: { value: '25' } });
-    expect(handleChangeLength).toHaveBeenCalledWith('25');
-
-    fireEvent.change(widthInput, { target: { value: '20' } });
-    expect(handleChangeWidth).toHaveBeenCalledWith('20');
-
-    fireEvent.change(heightInput, { target: { value: '17' } });
-    expect(handleChangeHeight).toHaveBeenCalledWith('17');
-  });
-
-  it('shows an error', async () => {
-    render(
-      <DimensionsInput
-        label="Dimensions"
-        handleChangeHeight={handleChangeHeight}
-        height="12"
-        handleChangeWidth={handleChangeWidth}
-        width="15"
-        handleChangeLength={handleChangeLength}
-        length="15"
-        error="Package dimensions test error"
-      />,
-    );
-    expect(screen.getByText('Package dimensions test error')).toBeInTheDocument();
-  });
-
-  it('shows placeholder dimension values when no values are entered', async () => {
-    render(
-      <DimensionsInput
-        handleChangeHeight={handleChangeHeight}
-        height=""
-        handleChangeWidth={handleChangeWidth}
-        width=""
-        handleChangeLength={handleChangeLength}
-        length=""
-      />,
-    );
-    const lengthInput = screen.getByPlaceholderText('L') as HTMLInputElement;
-    const widthInput = screen.getByPlaceholderText('W') as HTMLInputElement;
-    const heightInput = screen.getByPlaceholderText('H') as HTMLInputElement;
-
-    expect(lengthInput.value).toBe('');
-    expect(widthInput.value).toBe('');
-    expect(heightInput.value).toBe('');
-  });
-});

package/src/components/DimensionsInput/DimensionsInput.tsx

@@ -1,63 +0,0 @@
-import React, { FC } from 'react';
-
-import { InputGroup } from '../InputGroup';
-import { ComponentSize } from '../types';
-import { withLabels } from '../../hoc';
-
-import { Container, Row, TextField, Button } from './styled';
-
-import { DimensionsProps } from './types';
-import { CrossIcon } from '../../tempIcons/CrossIcon';
-import { theme } from '../../theme';
-
-export const DimensionsInput: FC<DimensionsProps> = withLabels(
-  ({
-    size = ComponentSize.base,
-    handleChangeHeight,
-    handleChangeWidth,
-    handleChangeLength,
-    className,
-    height,
-    width,
-    length,
-    unit,
-    ...rest
-  }: DimensionsProps) => (
-    <Container className={className}>
-      <Row>
-        <TextField
-          onChange={handleChangeLength}
-          size={size}
-          name="length"
-          type="number"
-          placeholder="L"
-          value={length}
-          {...rest}
-        />
-        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />
-        <TextField
-          onChange={handleChangeWidth}
-          size={size}
-          name="width"
-          type="number"
-          placeholder="W"
-          value={width}
-          {...rest}
-        />
-        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />
-        <InputGroup>
-          <TextField
-            onChange={handleChangeHeight}
-            size={size}
-            name="height"
-            type="number"
-            placeholder="H"
-            value={height}
-            {...rest}
-          />
-          <Button size={size}>{unit}</Button>
-        </InputGroup>
-      </Row>
-    </Container>
-  ),
-);

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

@@ -1,303 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Renders correctly 1`] = `
-.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c5 > * {
-  margin-left: 0;
-  margin-right: 0;
-  box-shadow: none;
-}
-
-.c5 > *:not(:last-child) {
-  border-right-width: 0 !important;
-}
-
-.c5 > *:focus,
-.c5 > *:active {
-  z-index: 5;
-  border-right-width: 1px !important;
-}
-
-.c5 > *:focus + *,
-.c5 > *:active + * {
-  border-left-width: 0 !important;
-}
-
-.c5 > *:not(:first-child):not(:last-child) {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.c5 > *:first-child {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.c5 > *:last-child {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.c3 {
-  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;
-}
-
-.c3 {
-  --outline-size: 4px;
-}
-
-.c3:focus {
-  border-color: #0079d1;
-  box-shadow: 0 0 0 var(--outline-size) #80bce8;
-  outline: 0;
-}
-
-.c3:invalid {
-  border-color: #eb5757;
-  box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
-}
-
-.c3:disabled {
-  box-shadow: none;
-  background-color: #f2f3f5;
-  border-color: #959fa8;
-  color: #637381;
-}
-
-.c3::-webkit-outer-spin-button,
-.c3::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c3[type='number'] {
-  -moz-appearance: textfield;
-  width: 8ch;
-  text-align: right;
-}
-
-.c6 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  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-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c6:hover {
-  cursor: pointer;
-}
-
-.c6:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c6 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c7 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #0079D1;
-}
-
-.c7:hover {
-  background-color: #FAFAFB;
-}
-
-.c7:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c7:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c7:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-}
-
-.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;
-  margin-top: 4px;
-}
-
-.c4 {
-  width: 52px;
-  margin: 0;
-  padding: 0 6px;
-}
-
-.c4.c4.c4 {
-  text-align: left;
-  border-color: #959FA8;
-}
-
-.c8 {
-  padding: 0 6px;
-  border-color: #959FA8;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    <div
-      class="c0 c2"
-    >
-      <input
-        class="c3 c4"
-        id="test-id"
-        name="length"
-        placeholder="L"
-        spellcheck="false"
-        type="number"
-        value="15"
-      />
-      <svg
-        fill="none"
-        height="1rem"
-        role="presentation"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-      <input
-        class="c3 c4"
-        id="test-id"
-        name="width"
-        placeholder="W"
-        spellcheck="false"
-        type="number"
-        value="15"
-      />
-      <svg
-        fill="none"
-        height="1rem"
-        role="presentation"
-        viewBox="0 0 24 24"
-        width="1rem"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-      <div
-        class="c5"
-      >
-        <input
-          class="c3 c4"
-          id="test-id"
-          name="height"
-          placeholder="H"
-          spellcheck="false"
-          type="number"
-          value="12"
-        />
-        <button
-          class="c6 c7 c8"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/DimensionsInput/styled.ts

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-
-import { Text } from '../Text';
-import { TextField } from '../TextField';
-import { Button } from '../Button';
-import { BaseContainer } from '../BaseContainer';
-import { theme } from '../../theme';
-
-const Container = styled(BaseContainer)`
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`;
-
-const Row = styled(BaseContainer)`
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
-`;
-
-const StyledTextField = styled(TextField)`
-  width: 52px;
-  margin: 0;
-  padding: 0 6px;
-
-  &&& {
-    text-align: left;
-    border-color: ${theme.colors.neutral.ink.lightest};
-  }
-`;
-
-const StyledButton = styled(Button)`
-  padding: 0 6px;
-  border-color: ${theme.colors.neutral.ink.lightest};
-`;
-
-const Label = styled(Text)``;
-
-const Error = styled.span`
-  display: block;
-  font-family: ${theme.text.error.fontFamily};
-  font-size: ${theme.text.error.fontSize};
-  font-weight: ${theme.text.error.fontWeight};
-  line-height: ${theme.text.error.lineHeight};
-  color: ${theme.text.error.color};
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: calc(${theme.sizes[2]} * -1);
-    width: 2px;
-    background-color: ${theme.colors.secondary.red.base};
-  }
-`;
-
-const Hint = styled.span`
-  display: block;
-  font-family: ${theme.fontFamily};
-  font-size: ${theme.sizes[3]};
-  line-height: ${theme.sizes[4]};
-  color: ${theme.colors.neutral.ink.light};
-`;
-
-export { Container, Row, Error, Hint, StyledTextField as TextField, StyledButton as Button, Label };

package/src/components/DimensionsInput/types.ts

@@ -1,16 +0,0 @@
-import { ComponentSize } from '../types';
-
-export interface DimensionsProps {
-  size?: ComponentSize;
-  handleChangeHeight: (value: string) => void;
-  handleChangeWidth: (value: string) => void;
-  handleChangeLength: (value: string) => void;
-  label?: string;
-  hint?: string;
-  error?: string;
-  height: string;
-  width: string;
-  length: string;
-  unit?: string;
-  className?: string;
-}

package/src/components/FilterTag/FilterTag.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { FilterTag } from '.';
-
-const meta = {
-  title: 'Components/UI/FilterTag',
-  component: FilterTag,
-  tags: ['autodocs'],
-} satisfies Meta<typeof FilterTag>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: 'warehouse',
-    text: 'All',
-  },
-};
-
-export const WithContent: Story = {
-  args: {
-    label: 'Warehouse',
-    text: 'All',
-    content: (
-      <div>
-        <p>Some content</p>
-      </div>
-    ),
-  },
-};

package/src/components/FilterTag/FilterTag.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FilterTag } from '.';
-
-describe('FilterTag', () => {
-  test('it renders correctly', () => {
-    const { container } = render(<FilterTag label="test-label" text="test-text" />);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/FilterTag/FilterTag.tsx

@@ -1,111 +0,0 @@
-import React, { MouseEventHandler, useCallback } from 'react';
-import { useDropdown } from '../../hooks';
-
-import { colors } from '../../theme/modules/colors';
-
-import { FilterTagProps } from './types';
-
-import {
-  Container,
-  Text,
-  Dropdown,
-  GroupLabel,
-  MainIcon,
-  CrossIcon,
-  Content,
-  Header,
-} from './styled';
-import { buildClassnames } from '../../utils/buildClassnames';
-
-export interface ClassNamesReturnPayload {
-  filterTagDropdown?: string;
-  container?: string;
-  cross?: string;
-}
-
-const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({
-  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,
-  container: prefix ? `${prefix}-container` : undefined,
-  cross: prefix ? `${prefix}-cross` : undefined,
-});
-
-export const FilterTag = ({
-  className,
-  e2eClassName,
-  label,
-  text,
-  iconSlot,
-  fill = colors.secondary.blue.base,
-  content,
-  footer,
-  onClickAway,
-  onClick,
-  shouldCloseOnClickAway = true,
-}: FilterTagProps) => {
-  const classNames = generateClassNames(className);
-  const e2eClassNames = generateClassNames(e2eClassName);
-  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown();
-
-  const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      toggleShouldShowDropdown();
-      if (onClickAway && shouldShowDropdown) onClickAway(event as any);
-    },
-    [toggleShouldShowDropdown, onClickAway, shouldShowDropdown],
-  );
-
-  const handleClickAway = useCallback(
-    (event: any) => {
-      // Escape hatch to apply custom behavior when clicked away
-      if (onClickAway) onClickAway(event, closeDropdown);
-
-      // Default clickAway behavior (closes the dropdown)
-      if (shouldCloseOnClickAway) closeDropdown();
-    },
-    [closeDropdown, onClickAway, shouldCloseOnClickAway],
-  );
-
-  const shouldShowSimple = !content;
-
-  return shouldShowSimple ? (
-    <Container
-      className={buildClassnames([classNames?.container, e2eClassNames?.container])}
-      onClick={onClick}
-    >
-      {label && <GroupLabel variant="subheadingSmallBold">{`${label}:`}</GroupLabel>}
-      <Text>{text}</Text>
-      <CrossIcon
-        className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}
-        name="cross"
-        size="base"
-        color={colors.neutral.ink.base}
-      />
-    </Container>
-  ) : (
-    <Dropdown
-      className={classNames.filterTagDropdown}
-      shouldShowDropdown={shouldShowDropdown}
-      onClickAway={handleClickAway}
-      cta={
-        <Container className={classNames.container} onClick={handleClick}>
-          {label && <GroupLabel variant="subheadingSmallBold">{`${label}:`}</GroupLabel>}
-          <Text>{text}</Text>
-          <MainIcon
-            color={colors.neutral.ink.base}
-            name="downArrow"
-            shouldShow={shouldShowDropdown}
-          />
-        </Container>
-      }
-    >
-      <Content>
-        <Header color={fill}>
-          {iconSlot}
-          <Text variant="headingTable">{label}</Text>
-        </Header>
-        {content}
-        {footer}
-      </Content>
-    </Dropdown>
-  );
-};