@veeqo/ui 0.0.4 → 0.0.7

package/src/components/SimpleTable/styled.ts

@@ -1,68 +0,0 @@
-import styled from 'styled-components';
-import { sizes } from '../../theme/modules/sizes';
-import { text } from '../../theme/modules/text';
-import { colors } from '../../theme/modules/colors';
-
-const { blue } = colors.secondary;
-const { grey } = colors.neutral;
-
-type TableProps = {
-  striped?: boolean;
-};
-
-export const TableHeader = styled.thead`
-  background-color: white;
-`;
-
-export const TableBody = styled.tbody`
-  &&& tr:hover td {
-    background-color: ${blue.lightest};
-  }
-`;
-
-export const TableRow = styled.tr``;
-
-export type TableCellProps = {
-  align?: 'left' | 'right' | 'center';
-};
-
-export const TableCell = styled.td<TableCellProps>`
-  position: relative;
-  padding: 1.25rem 1rem;
-  text-align: ${({ align }) => align || 'left'};
-  background-color: white;
-
-  font-family: ${text.bodySmall.fontFamily};
-  font-size: ${text.bodySmall.fontSize};
-  font-weight: ${text.bodySmall.fontWeight};
-  color: ${text.bodySmall.color};
-  line-height: ${sizes.base};
-
-  & > * {
-    vertical-align: middle;
-  }
-`;
-
-export const TableHeaderCell = styled(TableCell).attrs({
-  as: 'th',
-})`
-  border-bottom: 1px solid ${grey.dark};
-
-  font-family: ${text.bodySmallBold.fontFamily};
-  font-size: ${text.bodySmallBold.fontSize};
-  font-weight: ${text.bodySmallBold.fontWeight};
-  color: ${text.bodySmallBold.color};
-`;
-
-export const Table = styled.table<TableProps>`
-  width: 100%;
-  border-spacing: 0;
-
-  ${({ striped }) =>
-    striped &&
-    `
-   & ${TableBody} tr:nth-child(even) td {
-     background-color: ${grey.lightest};
-   }
- `}
-`;

package/src/components/SimpleTable/types.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-
-export type SimpleTableProps = {
-  striped?: boolean;
-  className?: string;
-  children?: ReactNode;
-};

package/src/components/Slider/Select.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Slider } from '.';
-import { Meta, StoryObj } from '@storybook/react';
-import { Text } from '../Text';
-import { Stack } from '../Stack';
-
-const meta = {
-  title: 'Components/UI/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = React.useState([-0.2, 0.3]);
-    return (
-      <div style={{ width: 225 }}>
-        <Stack>
-          <Text variant="body">Start value: {value[0]}</Text>
-          <Text variant="body">End value: {value[1]}</Text>
-          <Slider
-            value={value}
-            min={-0.5}
-            max={1}
-            step={0.1}
-            onChange={(newValue) => setValue(newValue as any)}
-          />
-        </Stack>
-      </div>
-    );
-  },
-  args: {
-    id: 'slider',
-    max: 1,
-    min: -1,
-    value: 0,
-    step: 0.1,
-  },
-};

package/src/components/Slider/Slider.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Slider } from './index';
-
-jest.mock('../Portal', () => ({
-  Portal: ({ children }: any) => children,
-}));
-
-describe('Slider', () => {
-  test('it renders correctly', () => {
-    const { container } = render(
-      <>
-        <Slider value={50} min={0} max={100} onChange={() => {}} />
-        <Slider value={[0, 50]} min={-100} max={100} onChange={() => {}} />
-      </>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Slider/Slider.tsx

@@ -1,197 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled';
-import { SliderComponentPropTypes, DraggingSliderIndex, ClassNamesReturnPayload } from './types';
-import { buildClassnames } from '../../utils/buildClassnames';
-
-const generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({
-  container: prefix ? `${prefix}-slider-container` : undefined,
-  sliderRange: prefix ? `${prefix}-slider-range` : undefined,
-  slider: prefix ? `${prefix}-slider` : undefined,
-  startSlider: prefix ? `${prefix}-start-slider` : undefined,
-  endSlider: prefix ? `${prefix}-end-slider` : undefined,
-});
-
-export const Slider = ({
-  id,
-  value,
-  min,
-  max,
-  step = 1,
-  onChange,
-  className,
-  e2eClassName,
-  onSlideStart = () => {},
-  onSlideEnd = () => {},
-}: SliderComponentPropTypes) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [draggingSliderIndex, setDraggingSliderIndex] = useState<DraggingSliderIndex>(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const startSliderRef = useRef<HTMLDivElement>(null);
-  const endSliderRef = useRef<HTMLDivElement>(null);
-  const classNames = generateClassNames(className);
-  const e2eClassNames = generateClassNames(e2eClassName);
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDragging || !containerRef.current) return;
-      const sliderValue: number =
-        draggingSliderIndex > -1 ? (value as number[])[draggingSliderIndex] : (value as number);
-      const containerSize = containerRef.current.getBoundingClientRect();
-      // slider position relative to the container in percents
-      const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;
-      // current value by slider position
-      let newValue = (max - min) * (handleValue / 100) + min;
-
-      const diff = sliderValue - newValue;
-
-      // use to apply step to new value
-      if (diff > 0) {
-        newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;
-      }
-      if (diff < 0) {
-        newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;
-      }
-
-      if (sliderValue === newValue) return;
-      if (newValue > max) newValue = max;
-      if (newValue < min) newValue = min;
-
-      if (Array.isArray(value)) {
-        if (draggingSliderIndex === 0 && newValue > value[1]) [, newValue] = value;
-        if (draggingSliderIndex === 1 && newValue < value[0]) [newValue] = value;
-      }
-
-      // used to fix 0.30000000000000004 problem
-      const decimalPlaces = step.toString().includes('.')
-        ? step.toString().split('.').pop()?.length
-        : 0;
-      newValue = Number(newValue.toFixed(decimalPlaces));
-
-      let resultValue;
-      if (Array.isArray(value)) {
-        resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];
-      } else {
-        resultValue = newValue;
-      }
-
-      onChange(resultValue);
-
-      if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {
-        if (draggingSliderIndex === 0) setDraggingSliderIndex(1);
-        if (draggingSliderIndex === 1) setDraggingSliderIndex(0);
-      }
-    },
-    [draggingSliderIndex, isDragging, max, min, onChange, step, value],
-  );
-
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-    onSlideEnd();
-  }, [onSlideEnd]);
-  const handleMouseDown = useCallback(
-    (e: Event, index: DraggingSliderIndex) => {
-      setIsDragging(true);
-      onSlideStart();
-      if (typeof index === 'number') setDraggingSliderIndex(index);
-      e.preventDefault();
-    },
-    [onSlideStart],
-  );
-
-  useEffect(() => {
-    const handleStartSliderMouseDown = (e: Event) =>
-      handleMouseDown(e, Array.isArray(value) ? 0 : 1);
-    const handleEndSliderMouseDown = (e: Event) => handleMouseDown(e, 1);
-
-    const startSliderEl = startSliderRef.current;
-    const endSliderEl = endSliderRef.current;
-
-    startSliderEl?.addEventListener('mousedown', handleStartSliderMouseDown);
-    endSliderEl?.addEventListener('mousedown', handleEndSliderMouseDown);
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      startSliderEl?.removeEventListener('mousedown', handleStartSliderMouseDown);
-      endSliderEl?.removeEventListener('mousedown', handleEndSliderMouseDown);
-
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);
-
-  const renderSlider = (left: number, valueNow: number, index?: 0 | 1) => {
-    let sliderClassName;
-
-    if (typeof index === 'number') {
-      sliderClassName = buildClassnames(
-        index === 0
-          ? [classNames?.startSlider, e2eClassNames?.startSlider]
-          : [classNames?.endSlider, e2eClassNames?.endSlider],
-      );
-    } else {
-      sliderClassName = buildClassnames([classNames?.slider, e2eClassNames?.slider]);
-    }
-
-    return (
-      <SliderDiv
-        role="slider"
-        ref={index === 1 ? endSliderRef : startSliderRef}
-        className={sliderClassName}
-        left={left}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={valueNow}
-      />
-    );
-  };
-
-  const renderRangeSlider = (rangeSliderValue: number[]) => {
-    // handle value used to get slider position relative to container from value
-    const handleValueStart =
-      ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);
-    const handleValueEnd =
-      ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);
-
-    const rangeWidth = handleValueEnd - handleValueStart;
-
-    return (
-      <>
-        <SliderRange
-          className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}
-          left={handleValueStart}
-          width={rangeWidth}
-        />
-        {renderSlider(handleValueStart, rangeSliderValue[0], 0)}
-        {renderSlider(handleValueEnd, rangeSliderValue[1], 1)}
-      </>
-    );
-  };
-
-  const renderSingleSlider = (sliderValue: number) => {
-    if (Array.isArray(value)) return renderRangeSlider(value as number[]);
-
-    let handleValue: number;
-
-    if (value > max) handleValue = 100;
-    else if (value < min) handleValue = 0;
-    else handleValue = ((sliderValue - min) * 100) / (max - min);
-
-    return renderSlider(handleValue, sliderValue);
-  };
-
-  let render;
-  if (Array.isArray(value)) render = renderRangeSlider(value);
-  else render = renderSingleSlider(value);
-
-  return (
-    <SliderContainer
-      className={buildClassnames([classNames?.container, e2eClassNames?.container])}
-      id={id}
-      ref={containerRef}
-    >
-      <SliderTrack />
-      {render}
-    </SliderContainer>
-  );
-};

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

@@ -1,109 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Slider it renders correctly 1`] = `
-.c0 {
-  min-width: 128px;
-  display: inline-block;
-  position: relative;
-  padding: 8px 0px;
-}
-
-.c1 {
-  background: #DFE3E8;
-  height: 4px;
-  border-radius: 20px;
-}
-
-.c2 {
-  position: absolute;
-  top: -0px;
-  left: 50%;
-  width: 12px;
-  height: 12px;
-  background: white;
-  border: 4px solid #0079D1;
-  border-radius: 50%;
-  touch-action: none;
-  cursor: pointer;
-  margin-left: -12px;
-}
-
-.c2:active,
-.c2:focus,
-.c2:focus-visible,
-.c2:focus-within {
-  box-shadow: 0 0 0 4px #80BCE8;
-}
-
-.c4 {
-  position: absolute;
-  top: -0px;
-  left: 75%;
-  width: 12px;
-  height: 12px;
-  background: white;
-  border: 4px solid #0079D1;
-  border-radius: 50%;
-  touch-action: none;
-  cursor: pointer;
-  margin-left: -12px;
-}
-
-.c4:active,
-.c4:focus,
-.c4:focus-visible,
-.c4:focus-within {
-  box-shadow: 0 0 0 4px #80BCE8;
-}
-
-.c3 {
-  position: relative;
-  width: 25%;
-  left: 50%;
-  background: #80BCE8;
-  bottom: 4px;
-  border-radius: 0;
-}
-
-<div>
-  <div
-    class="c0"
-  >
-    <div
-      class="c1"
-    />
-    <div
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
-      class="c2"
-      role="slider"
-    />
-  </div>
-  <div
-    class="c0"
-  >
-    <div
-      class="c1"
-    />
-    <div
-      class="c1 c3"
-      width="25"
-    />
-    <div
-      aria-valuemax="100"
-      aria-valuemin="-100"
-      aria-valuenow="0"
-      class="c2"
-      role="slider"
-    />
-    <div
-      aria-valuemax="100"
-      aria-valuemin="-100"
-      aria-valuenow="50"
-      class="c4"
-      role="slider"
-    />
-  </div>
-</div>
-`;

package/src/components/Slider/styled.ts

@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme';
-import { SliderPropTypes, SliderRangePropTypes } from './types';
-
-const TRACK_HEIGHT = 4;
-const BORDER_SIZE = 4;
-const SLIDER_SIZE = 12;
-const ADDITIONAL_PADDING = 2;
-
-const SliderContainer = styled.div`
-  min-width: 128px;
-  display: inline-block;
-  position: relative;
-  padding: ${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;
-`;
-
-const SliderTrack = styled.div`
-  background: ${theme.colors.neutral.grey.base};
-  height: ${TRACK_HEIGHT}px;
-  border-radius: 20px;
-`;
-
-const SliderDiv = styled.div<SliderPropTypes>`
-  position: absolute;
-  top: -${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;
-  left: ${(props) => `${props.left}%`};
-  width: ${SLIDER_SIZE}px;
-  height: ${SLIDER_SIZE}px;
-  background: white;
-  border: ${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};
-  border-radius: 50%;
-  touch-action: none;
-  cursor: pointer;
-  margin-left: -${SLIDER_SIZE}px;
-
-  &:active,
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};
-  }
-`;
-
-const SliderRange = styled(SliderTrack)<SliderRangePropTypes>`
-  position: relative;
-  width: ${(props) => `${props.width}%`};
-  left: ${(props) => `${props.left}%`};
-  background: ${theme.colors.secondary.blue.light};
-  bottom: ${TRACK_HEIGHT}px;
-  border-radius: 0;
-`;
-
-export { SliderContainer, SliderTrack, SliderRange, SliderDiv };

package/src/components/Slider/types.ts

@@ -1,30 +0,0 @@
-export type SliderComponentPropTypes = {
-  id?: string;
-  value: number | number[];
-  min: number;
-  max: number;
-  step?: number;
-  className?: string;
-  e2eClassName?: string;
-  onChange: (value: number | number[]) => void;
-  onSlideStart?: () => void;
-  onSlideEnd?: () => void;
-};
-
-export type ClassNamesReturnPayload = {
-  container?: string;
-  sliderRange?: string;
-  slider?: string;
-  startSlider?: string;
-  endSlider?: string;
-};
-
-export type DraggingSliderIndex = -1 | 0 | 1;
-
-export type SliderPropTypes = {
-  left: number;
-};
-
-export type SliderRangePropTypes = SliderPropTypes & {
-  width: number;
-};

package/src/components/Stack/Alignments.ts

@@ -1,8 +0,0 @@
-export enum Alignments {
-  start = 'flex-start',
-  center = 'center',
-  end = 'flex-end',
-  stretch = 'stretch',
-  between = 'space-between',
-  around = 'space-around',
-}

package/src/components/Stack/Docs.mdx

@@ -1,28 +0,0 @@
-import { Meta, Primary, Controls, Story } from '@storybook/blocks';
-import * as StackStories from './Stack.stories';
-
-<Meta of={StackStories} />
-
-# Loader
-
-The Stack component is the main layout component used in Veeqo currently.
-
-It is an easy to use flexbox for aligning items.
-
-<Primary />
-
-## Props
-
-Type will default to TailSpin.
-
-<Controls />
-
-## Stories
-
-### Horizontal
-
-<Story of={StackStories.Horizontal} />
-
-### Vertical
-
-<Story of={StackStories.Vertical} />

package/src/components/Stack/Stack.stories.tsx

@@ -1,112 +0,0 @@
-import React, { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Stack } from './Stack';
-
-const meta = {
-  title: 'Components/Layout/Stack',
-  component: Stack,
-} satisfies Meta<typeof Stack>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const alignOptions = ['start', 'center', 'end', 'stretch', 'between', 'around'];
-
-export const Horizontal: Story = {
-  argTypes: {
-    alignX: {
-      options: alignOptions,
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'center',
-    },
-    alignY: {
-      options: alignOptions,
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'center',
-    },
-    direction: {
-      options: ['horizontal', 'vertical'],
-      control: {
-        type: 'radio',
-      },
-      defaultValue: 'horizontal',
-    },
-    spacing: {
-      options: ['xs', 'sm', 'base', 'md', 'lg', 'xl'],
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'base',
-    },
-  },
-  args: {
-    className: 'test-classname',
-    alignX: 'center',
-    alignY: 'center',
-    direction: 'horizontal',
-    spacing: 'base',
-    children: (
-      <>
-        <button>Button 1</button>
-        <button>Button 2</button>
-        <button>Button 3</button>
-        <button>Button 4</button>
-        <button>Button 5</button>
-      </>
-    ) as ReactNode,
-  },
-};
-
-export const Vertical: Story = {
-  argTypes: {
-    alignX: {
-      options: alignOptions,
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'center',
-    },
-    alignY: {
-      options: alignOptions,
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'center',
-    },
-    direction: {
-      options: ['horizontal', 'vertical'],
-      control: {
-        type: 'radio',
-      },
-      defaultValue: 'horizontal',
-    },
-    spacing: {
-      options: ['xs', 'sm', 'base', 'md', 'lg', 'xl'],
-      control: {
-        type: 'select',
-      },
-      defaultValue: 'base',
-    },
-  },
-  args: {
-    className: 'test-classname',
-    alignX: 'center',
-    alignY: 'center',
-    direction: 'vertical',
-    spacing: 'base',
-    children: (
-      <>
-        <button>Button 1</button>
-        <button>Button 2</button>
-        <button>Button 3</button>
-        <button>Button 4</button>
-        <button>Button 5</button>
-      </>
-    ) as ReactNode,
-  },
-};