@takaro/lib-components 0.0.9 → 0.0.10

package/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:18.20.4-alpine AS build
+FROM node:20.17.0-alpine AS build
 
 ENV NODE_ENV=development
 WORKDIR /app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@hookform/devtools": "^4.2.2",
     "@mdx-js/react": "^2.1.5",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^29.0.0",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.25",
     "@types/topojson-client": "^3.1.4",
@@ -34,11 +34,10 @@
     "@tanstack/react-table": "^8.7.9",
     "@tanstack/react-router": "1.35.3",
     "@types/luxon": "3.4.2",
-    "framer-motion": "^10.16.12",
+    "framer-motion": "^10.16.12 || ^11.0.0",
     "luxon": "3.5.0",
     "notistack": "^3.0.1",
     "polished": "^4.1.3",
-    "rc-slider": "^9.7.5",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "@sentry/react": "^8.5.0",
@@ -51,7 +50,7 @@
     "react-window": "^1.8.8",
     "simplebar-react": "^3.2.4",
     "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.2",
+    "web-vitals": "^2.1.2 || ^4.0.0",
     "@visx/scale": "^3.5.0",
     "@visx/responsive": "^3.3.0",
     "@visx/group": "^3.3.0",

package/src/components/inputs/index.ts

@@ -26,10 +26,6 @@ export { ControlledTextAreaField as TextAreaField } from './TextAreaField';
 export type { ControlledTextAreaFieldProps as TextAreaFieldProps } from './TextAreaField';
 export { GenericTextAreaField as UnControlledTextAreaField } from './TextAreaField/Generic';
 
-export { ControlledSlider as Slider } from './Slider';
-export type { ControlledSliderProps as SliderProps } from './Slider';
-export { GenericSlider as UnControlledSlider } from './Slider/Generic';
-
 export { CodeField } from './CodeField';
 export type { CodeFieldProps } from './CodeField';
 

package/src/components/inputs/Slider/Controlled.tsx

@@ -1,87 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { useController } from 'react-hook-form';
-import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
-import { SliderProps, GenericSlider } from '.';
-import { Skeleton } from '../../../components';
-import { Container } from './style';
-import { InputWrapper, Description, ErrorMessage, Label } from '../layout';
-
-export type ControlledSliderProps = ControlledInputProps & SliderProps;
-
-const defaultsApplier = defaultInputPropsFactory<PropsWithChildren<ControlledSliderProps>>(defaultInputProps);
-
-export const ControlledSlider: FC<ControlledSliderProps> = (props) => {
-  const {
-    name,
-    color = 'primary',
-    size,
-    min = 0,
-    max = 10,
-    step = 1,
-    required,
-    marks = [],
-    disabled,
-    loading,
-    label,
-    description,
-    hint,
-    control,
-    readOnly,
-    showTooltip = true,
-    showDots = false,
-  } = defaultsApplier(props);
-
-  const {
-    field,
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-  });
-
-  if (loading) {
-    return <Skeleton height="6px" variant="text" width="100%" />;
-  }
-
-  return (
-    <InputWrapper>
-      <Container>
-        {label && (
-          <Label
-            position="top"
-            size={size}
-            text={label}
-            required={required}
-            error={!!error}
-            htmlFor={name}
-            hint={hint}
-            disabled={disabled}
-          />
-        )}
-        <GenericSlider
-          disabled={disabled}
-          name={name}
-          id={name}
-          required={required}
-          min={min}
-          max={max}
-          size={size}
-          value={field.value}
-          marks={marks}
-          showDots={showDots}
-          hasError={!!error}
-          hasDescription={!!description}
-          step={step}
-          readOnly={readOnly}
-          showTooltip={showTooltip}
-          color={color}
-          onBlur={field.onBlur}
-          onChange={field.onChange}
-          ref={field.ref}
-        />
-        {error && error.message && <ErrorMessage message={error.message} />}
-      </Container>
-      {description && <Description description={description} inputName={name} />}
-    </InputWrapper>
-  );
-};

package/src/components/inputs/Slider/Generic.tsx

@@ -1,73 +0,0 @@
-import { forwardRef } from 'react';
-import { handle } from './handle';
-import { Color } from '../../../styled';
-import { StyledSlider } from './style';
-import { defaultInputProps, defaultInputPropsFactory, GenericInputPropsFunctionHandlers } from '../InputProps';
-
-interface Mark {
-  value: number;
-  label: string;
-}
-
-export interface SliderProps {
-  min: number;
-  max: number;
-  color?: Color;
-  showTooltip?: boolean;
-  marks?: Mark[];
-  step?: number;
-  showDots: boolean;
-}
-
-export type GenericSliderProps = SliderProps & GenericInputPropsFunctionHandlers<number, HTMLDivElement>;
-
-const defaultsApplier = defaultInputPropsFactory<GenericSliderProps>(defaultInputProps);
-
-// TODO: should probably switch to the radixUI version
-export const GenericSlider = forwardRef<HTMLDivElement, GenericSliderProps>(function GenericSlider(props, ref) {
-  const {
-    color = 'primary',
-    size,
-    min,
-    max,
-    step = 1,
-    value = max / 2,
-    marks = [],
-    readOnly,
-    showTooltip = true,
-    showDots,
-    onChange,
-    id,
-  } = defaultsApplier(props);
-
-  const handleOnChange = (value: number) => {
-    onChange(value);
-  };
-
-  // todo: memo this
-  const transformedMarks: { [key: number]: string } = {};
-  for (const { value, label } of marks) {
-    transformedMarks[value] = label;
-  }
-
-  return (
-    <StyledSlider
-      id={id}
-      activeDotStyle={{ scale: 1.1 }}
-      color={color}
-      defaultValue={value as number}
-      disabled={readOnly}
-      dots={showDots}
-      handle={handle}
-      marks={transformedMarks}
-      max={max}
-      min={min}
-      onChange={handleOnChange}
-      ref={ref}
-      size={size}
-      step={step}
-      {...(showTooltip && { tipFormatter: undefined })}
-      tipProps={{ visible: showTooltip }}
-    />
-  );
-});

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

@@ -1,101 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { styled } from '../../../styled';
-import { useForm, useWatch } from 'react-hook-form';
-import { SliderProps, Slider } from '../../../components';
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 50vh;
-  padding: 2rem;
-  background: ${({ theme }) => theme.colors.background};
-  border-radius: ${({ theme }) => theme.borderRadius.large};
-`;
-
-export default {
-  title: 'Inputs/Slider',
-  component: Slider,
-  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
-  args: {
-    readOnly: false,
-    description: 'Slider description',
-    min: 0,
-    max: 100,
-    hint: 'This is the hint',
-    name: 'Slider',
-    step: 1,
-    showTooltip: true,
-    label: 'Slider label',
-    disabled: false,
-    loading: false,
-    required: false,
-  },
-} as Meta<SliderProps>;
-
-const Template: StoryFn<SliderProps> = (args) => {
-  const { control } = useForm();
-  return <Slider {...args} control={control} />;
-};
-
-// Default Checkbox
-export const Default = Template.bind({});
-Default.args = {
-  name: 'default-slider',
-  min: 0,
-  max: 100,
-  step: 1,
-  loading: false,
-  label: 'slider label',
-  color: 'primary',
-};
-
-export const Steps = Template.bind({});
-Steps.args = {
-  name: 'slider-with-steps',
-  min: 0,
-  max: 100,
-  step: 10,
-  showDots: false,
-  loading: false,
-  color: 'primary',
-};
-
-export const StepsWithDots = Template.bind({});
-StepsWithDots.args = {
-  name: 'slider-with-dots',
-  min: 0,
-  max: 100,
-  step: 10,
-  showDots: true,
-  loading: false,
-  color: 'primary',
-};
-
-export const OnChange: StoryFn<SliderProps> = (args) => {
-  const { control } = useForm({ mode: 'onChange' });
-  const sliderValue = useWatch({ control, name: 'Slider' });
-
-  return (
-    <>
-      <Slider
-        control={control}
-        description="slider description"
-        readOnly={args.readOnly}
-        label={args.label}
-        loading={args.loading}
-        showTooltip={args.showTooltip}
-        showDots={args.showDots}
-        max={args.max}
-        min={args.min}
-        name={args.name}
-        step={args.step}
-        required={args.required}
-        disabled={args.disabled}
-      />
-      <pre>value: {sliderValue}</pre>
-    </>
-  );
-};

package/src/components/inputs/Slider/handle.tsx

@@ -1,32 +0,0 @@
-import Slider, { SliderTooltip } from 'rc-slider';
-import { FC } from 'react';
-
-const { Handle } = Slider;
-
-interface handleParams {
-  className: string;
-  prefixCls?: string;
-  vertical?: boolean;
-  offset: number;
-  value: number;
-  dragging?: boolean;
-  disabled?: boolean;
-  min?: number;
-  max?: number;
-  reverse?: boolean;
-  index: number;
-  tabIndex?: number;
-  ariaLabel: string;
-  ariaLabelledBy: string;
-  ariaValueTextFormatter?: (value: number) => string;
-  style?: React.CSSProperties;
-  ref?: React.Ref<any>;
-}
-
-export const handle: FC<handleParams> = ({ value, dragging, index, ...restProps }) => {
-  return (
-    <SliderTooltip key={index} overlay={`${value}`} placement="top" prefixCls="rc-slider-tooltip" visible={dragging}>
-      <Handle value={value} {...restProps} />
-    </SliderTooltip>
-  );
-};

package/src/components/inputs/Slider/index.tsx

@@ -1,5 +0,0 @@
-export { GenericSlider } from './Generic';
-export type { SliderProps, GenericSliderProps } from './Generic';
-
-export { ControlledSlider } from './Controlled';
-export type { ControlledSliderProps } from './Controlled';

package/src/components/inputs/Slider/style.ts

@@ -1,140 +0,0 @@
-import { Color, Size, styled } from '../../../styled';
-import Slider from 'rc-slider';
-
-const createSliderWithTooltip = Slider.createSliderWithTooltip;
-const SliderComp = createSliderWithTooltip(Slider);
-
-export const Container = styled.div`
-  width: 100%;
-`;
-
-export const StyledSlider = styled<any | { color: Color; size: Size }>(SliderComp)`
-
-  .rc-slider-track {
-    background-color: ${({ theme, color }): string => theme.colors[color]};
-    ${({ size }) => {
-      switch (size) {
-        case 'tiny':
-          return 'height: .3rem;';
-        case 'small':
-          return 'height: .4rem;';
-        case 'medium':
-          return 'height: .5rem;';
-        case 'large':
-          return 'height: .6rem;';
-        case 'huge':
-          return 'height: .9rem;';
-      }
-    }}
-  }
-
-  .rc-slider-handle {
-    border: none;
-    position: relative;
-    background-color: ${({ theme, color }) => theme.colors[color]};
-    &::after {
-      content: '';
-      position: absolute;
-      left: 37.5%;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 25%;
-      width: 25%;
-      border-radius: 100%;
-      background-color: ${({ theme }) => theme.colors.white} ;
-    }
-
-    ${({ size, theme }) => {
-      switch (size) {
-        case 'tiny':
-          return `
-            width: 1.2rem;
-            height : 1.2rem;
-            margin-top: -${theme.spacing['0_5']};
-          `;
-        case 'small':
-          return `
-            width: 1.4rem;
-            height : 1.4rem;
-            margin-top: -${theme.spacing['0_5']};
-          `;
-        case 'medium':
-          return `
-            width: 2rem;
-            height: 2rem;
-            margin-top: -${theme.spacing['0_75']};
-          `;
-        case 'large':
-          return `
-            width: 2.8rem;
-            height: 2.8rem;
-            margin-top: -${theme.spacing[1]};
-          `;
-        case 'huge':
-          return `
-            width: 2.8rem;
-            height: 2.8rem;
-            margin-left: -${theme.spacing['0_1']};
-            margin-top: -${theme.spacing[1]};
-          `;
-      }
-    }}
-  }
-  }
-
-  .rc-slider-tooltip-inner {
-    background-color: ${({ theme, color }) => theme.colors[color]}!important;
-    box-shadow: ${({ theme }) => theme.elevation[2]};
-    font-weight: 600;
-  }
-
-  .rc-slider-tooltip-arrow {
-    border-top-color: ${({ theme, color }) => theme.colors[color]}!important;
-  }
-
-
-  .rc-slider-dot {
-    background-color: ${({ theme }): string => theme.colors.primary};
-    border-color: ${({ theme }): string => theme.colors.primary};
-
-    ${({ size }) => {
-      switch (size) {
-        case 'tiny':
-          return `
-            width: 0.6rem;
-            height : 0.6rem;
-            top: -0.1rem;
-          `;
-        case 'small':
-          return `
-            width: 0.8rem;
-            height : 0.8rem;
-            top: -.2rem;
-          `;
-        case 'medium':
-          return `
-            width: 1.1rem;
-            height: 1.1rem;
-            top: -0.3rem;
-          `;
-        case 'large':
-          return `
-            width: 1.5rem;
-            height: 1.5rem;
-            top: -0.4rem;
-          `;
-        case 'huge':
-          return `
-            width: 1.8rem;
-            height: 1.8rem;
-            top: -0.5rem;
-          `;
-      }
-    }}
-
-    &.rc-slider-dot-active {
-      border: none;
-      background-color: ${({ theme, color }): string => theme.colors[color]};
-    }
-  }
-`;