@veeqo/ui 0.0.1 → 0.0.3

package/src/components/Search/Search.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Button } from '../Button';
+
+import { theme } from '../../theme';
+
+import { Container, Input, IconContainer, Loader } from './styled';
+import { SearchProps } from './types';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+import { SearchIcon } from '../../tempIcons/SearchIcon';
+import { sizes } from '../../theme/modules/sizes';
+
+export const Search = ({
+  type = 'text',
+  disabled = false,
+  onClearClick,
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyUp,
+  onKeyDown,
+  onKeyPress,
+  value = '',
+  error,
+  placeholder = '',
+  className = '',
+  name,
+  isLoading = false,
+  fill,
+  reversed = false,
+  autoComplete = 'on',
+}: SearchProps) => {
+  const shouldShowClear = value && value.length > 0;
+
+  const renderIcon = () => {
+    if (isLoading) {
+      return <Loader height={24} color={fill || theme.colors.secondary.blue.base} />;
+    }
+    if (shouldShowClear && onClearClick) {
+      return (
+        <Button
+          variant="unstyled"
+          onClick={onClearClick}
+          style={{ display: 'flex' }}
+          aria-label="Clear text"
+        >
+          <CrossIcon color={fill || theme.colors.neutral.ink.dark} />
+        </Button>
+      );
+    }
+    return (
+      <Button
+        variant="unstyled"
+        onClick={() => onChange(value)}
+        style={{ display: 'flex' }}
+        aria-label="Search"
+      >
+        <SearchIcon
+          color={fill || theme.colors.neutral.ink.dark}
+          height={sizes.md}
+          width={sizes.md}
+        />
+      </Button>
+    );
+  };
+
+  return (
+    <Container className={className} iconPosition={reversed ? 'left' : 'right'}>
+      <Input
+        type={type}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onKeyUp={onKeyUp}
+        onKeyDown={onKeyDown}
+        onKeyPress={onKeyPress}
+        placeholder={placeholder}
+        name={name}
+        disabled={disabled}
+        error={error}
+        autoComplete={autoComplete}
+      />
+      <IconContainer>{renderIcon()}</IconContainer>
+    </Container>
+  );
+};

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

@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search it renders correctly 1`] = `
+.c7 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  font: inherit;
+}
+
+.c7:hover {
+  cursor: pointer;
+}
+
+.c2 {
+  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;
+}
+
+.c2 {
+  --outline-size: 4px;
+}
+
+.c2:focus {
+  border-color: #0079d1;
+  box-shadow: 0 0 0 var(--outline-size) #80bce8;
+  outline: 0;
+}
+
+.c2:invalid {
+  border-color: #eb5757;
+  box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
+}
+
+.c2:disabled {
+  box-shadow: none;
+  background-color: #f2f3f5;
+  border-color: #959fa8;
+  color: #637381;
+}
+
+.c2::-webkit-outer-spin-button,
+.c2::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.c2[type='number'] {
+  -moz-appearance: textfield;
+  width: 8ch;
+  text-align: right;
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c4 {
+  -webkit-box-flex: 2;
+  -webkit-flex-grow: 2;
+  -ms-flex-positive: 2;
+  flex-grow: 2;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c6 {
+  position: absolute;
+  top: 8px;
+}
+
+.c1 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 0.25rem;
+}
+
+.c1 .c3 {
+  padding-right: 2.5rem;
+}
+
+.c1 .c5 {
+  right: 0.5rem;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <input
+      autocomplete="on"
+      class="c2 c3 c4"
+      id="test-id"
+      name="test-name"
+      placeholder=""
+      spellcheck="false"
+      type="text"
+      value="test-value"
+    />
+    <div
+      class="c5 c6"
+    >
+      <button
+        aria-label="Search"
+        class="c7"
+        style="display: flex;"
+      >
+        <svg
+          color="#1B2126"
+          fill="none"
+          height="1.5rem"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M14.3819 13.6918H15.1498L20 18.5517L18.5517 20L13.6918 15.1498V14.3819L13.4294 14.1098C12.3213 15.0623 10.8828 15.6358 9.3179 15.6358C5.82847 15.6358 3 12.8073 3 9.3179C3 5.82847 5.82847 3 9.3179 3C12.8073 3 15.6358 5.82847 15.6358 9.3179C15.6358 10.8828 15.0623 12.3213 14.1098 13.4294L14.3819 13.6918ZM4.94397 9.3179C4.94397 11.7381 6.89766 13.6918 9.3179 13.6918C11.7381 13.6918 13.6918 11.7381 13.6918 9.3179C13.6918 6.89766 11.7381 4.94397 9.3179 4.94397C6.89766 4.94397 4.94397 6.89766 4.94397 9.3179Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Search/index.ts

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

package/src/components/Search/styled.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+import { TextField } from '../TextField';
+import { BaseContainer } from '../BaseContainer';
+import { Loader } from '../Loader';
+
+const Input = styled(TextField)`
+  flex-grow: 2;
+  margin-top: 0;
+  margin-bottom: 0;
+`;
+
+const IconContainer = styled.div`
+  position: absolute;
+  top: 8px;
+`;
+
+const Container = styled(BaseContainer)<{ iconPosition: 'left' | 'right' }>`
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 0.25rem;
+
+  ${({ iconPosition }) => {
+    let padding = 'padding-right: 2.5rem;';
+    let position = 'right: 0.5rem;';
+
+    if (iconPosition === 'left') {
+      padding = 'padding-left: 2.5rem';
+      position = 'left: 0.5rem;';
+    }
+
+    return `
+      & ${Input} {
+        ${padding}
+      }
+
+      & ${IconContainer} {
+        ${position}
+      }
+    `;
+  }}
+`;
+
+export { Container, Input, IconContainer, Loader };

package/src/components/Search/types.ts

@@ -0,0 +1,10 @@
+import { SyntheticEvent } from 'react';
+import { TextFieldProps } from '../TextField/types';
+
+export type SearchProps = TextFieldProps & {
+  isLoading?: boolean;
+  fill?: string;
+  onClearClick?: (event: SyntheticEvent) => void;
+  reversed?: boolean;
+  error?: string;
+};

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SegmentedControl } from './SegmentedControl';
+
+const meta = {
+  title: 'Components/Common/SegmentedControl',
+  component: SegmentedControl,
+  tags: ['autodocs'],
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { key: '1', value: 'first', label: 'First button' },
+  { key: '2', value: 'second', label: 'Second button' },
+];
+const trioOptions = [...options, { key: '3', value: 'third', label: 'Third button' }];
+const trioWithDisabled = [
+  ...options,
+  { key: '3', value: 'third', label: 'Third button', disabled: true },
+];
+
+export const Default: Story = {
+  args: {
+    options,
+    selected: 'first',
+  },
+};
+
+export const MultipleButtons: Story = {
+  args: {
+    options: trioOptions,
+    selected: 'first',
+  },
+};
+
+export const WithDisabledButton: Story = {
+  args: {
+    options: trioWithDisabled,
+    selected: 'first',
+  },
+};

package/src/components/SegmentedControl/SegmentedControl.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SegmentedControl } from '.';
+
+describe('SegmentedControl', () => {
+  test('it renders correctly with 2 options', () => {
+    const options = [
+      { key: '1', value: 'first', label: 'First button' },
+      { key: '2', value: 'second', label: 'Second button' },
+    ];
+    const { container } = render(
+      <SegmentedControl options={options} selected="second" onChange={() => {}} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders correctly with 3 options', () => {
+    const options = [
+      { key: '1', value: 'first', label: 'First button' },
+      { key: '2', value: 'second', label: 'Second button' },
+      { key: '3', value: 'third', label: 'Third button' },
+    ];
+    const { container } = render(
+      <SegmentedControl options={options} selected="second" onChange={() => {}} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders correctly with disabled button', () => {
+    const options = [
+      { key: '1', value: 'first', label: 'First button' },
+      { key: '2', value: 'second', label: 'Second button' },
+      {
+        key: '3',
+        value: 'third',
+        label: 'Third button',
+        disabled: true,
+      },
+    ];
+    const { container } = render(
+      <SegmentedControl options={options} selected="second" onChange={() => {}} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders correctly with multiple disabled buttons', () => {
+    const options = [
+      { key: '1', value: 'first', label: 'First button' },
+      {
+        key: '2',
+        value: 'second',
+        label: 'Second button',
+        disabled: true,
+      },
+      {
+        key: '3',
+        value: 'third',
+        label: 'Third button',
+        disabled: true,
+      },
+    ];
+    const { container } = render(
+      <SegmentedControl options={options} selected="second" onChange={() => {}} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Button } from '../Button';
+import { SegmentedControlContainer } from './styled';
+
+import { SegmentedControlProps } from './types';
+
+export const SegmentedControl = ({
+  options,
+  selected,
+  className,
+  onChange,
+}: SegmentedControlProps) => (
+  <SegmentedControlContainer className={className ? `${className}-container` : undefined}>
+    {options.map((option) => (
+      <Button
+        variant={option.value === selected ? 'primary' : 'default'}
+        key={option.key}
+        onClick={() => onChange(option.value)}
+        disabled={option.disabled}
+        className={option.value === selected ? 'veeqo-components-active-button' : ''}
+      >
+        {option.label}
+      </Button>
+    ))}
+  </SegmentedControlContainer>
+);