@veeqo/ui 0.0.1 → 0.0.3

package/src/components/SimpleTable/styled.ts

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

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

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

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

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

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

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

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

package/src/components/Slider/styled.ts

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

@@ -0,0 +1,30 @@
+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,4 +1,4 @@
-enum Alignments {
+export enum Alignments {
   start = 'flex-start',
   center = 'center',
   end = 'flex-end',
@@ -6,5 +6,3 @@ enum Alignments {
   between = 'space-between',
   around = 'space-around',
 }
-
-export default Alignments;

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Stack } from './Stack';
+import { StackProps } from './types';
+
+describe('Stack', () => {
+  test.each([
+    {
+      direction: 'vertical',
+      alignX: 'start',
+      alignY: 'start',
+    },
+    {
+      direction: 'vertical',
+      alignX: 'center',
+      alignY: 'center',
+    },
+    {
+      direction: 'vertical',
+      alignX: 'end',
+      alignY: 'end',
+    },
+    {
+      direction: 'horizontal',
+      alignX: 'start',
+      alignY: 'start',
+    },
+    {
+      direction: 'horizontal',
+      alignX: 'center',
+      alignY: 'center',
+    },
+    {
+      direction: 'horizontal',
+      alignX: 'end',
+      alignY: 'end',
+    },
+    {
+      direction: 'vertical',
+      spacing: 'md',
+    },
+  ] as StackProps[])('renders as expected with different props', (props) => {
+    const { container } = render(<Stack {...props}>Hello</Stack>);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { StackProps } from './types';
-import Alignments from './Alignments';
+import { Alignments } from './Alignments';
 
 import { theme } from '../../theme';
 
@@ -12,7 +12,6 @@ export const Stack = styled.div<StackProps>`
   display: flex;
 
   ${(props) => {
-    console.log('props', props.alignX, props.alignY);
     const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
 
     let alignItems;