@takaro/lib-components 0.0.1

package/src/components/inputs/RadioGroup/RadioItem.tsx

@@ -0,0 +1,129 @@
+import { forwardRef, useRef } from 'react';
+import { useRadioGroupContext } from './context';
+import { styled } from '../../../styled';
+import { motion } from 'framer-motion';
+import { AiOutlineCheck as CheckMarkIcon } from 'react-icons/ai';
+import { shade } from 'polished';
+
+const RadioItemContainer = styled.div<{ readOnly: boolean; isChecked: boolean; disabled: boolean }>`
+  display: grid;
+  place-items: center;
+  min-width: ${({ theme }) => theme.spacing['2_5']};
+  min-height: ${({ theme }) => theme.spacing['2_5']};
+  width: ${({ theme }) => theme.spacing['2_5']};
+  height: ${({ theme }) => theme.spacing['2_5']};
+  max-width: ${({ theme }) => theme.spacing['2_5']};
+  max-height: ${({ theme }) => theme.spacing['2_5']};
+  align-items: center;
+  justify-content: center;
+  border: 0.1rem solid
+    ${({ theme, readOnly, isChecked }): string => {
+      if (readOnly) return theme.colors.backgroundAccent;
+      if (isChecked) return theme.colors.primary;
+      return theme.colors.backgroundAccent;
+    }};
+
+  background-color: ${({ theme, readOnly, disabled }) =>
+    readOnly || disabled ? theme.colors.backgroundAccent : shade(0.5, theme.colors.background)};
+  border-radius: 100%;
+  cursor: ${({ readOnly, disabled }) => {
+    if (disabled) return 'not-allowed';
+    if (readOnly) return 'default';
+    return 'pointer';
+  }};
+
+  overflow: visible;
+
+  &.placeholder {
+    border: none;
+    border-radius: 50%;
+    width: 2.2rem; /* 2.1rem + 1px shadow */
+    height: 2.2rem;
+    cursor: default;
+  }
+`;
+
+const Inner = styled(motion.div)<{ $isChecked: boolean; $readOnly: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing['2_5']};
+  height: ${({ theme }) => theme.spacing['2_5']};
+  border-radius: 100%;
+  background-color: ${({ theme, $readOnly }) => {
+    if ($readOnly) return theme.colors.backgroundAlt;
+    return theme.colors.primaryShade;
+  }};
+  overflow: hidden;
+  opacity: ${({ $isChecked }): number => ($isChecked ? 1 : 0)};
+  transition: 0.1s opacity linear cubic-bezier(0.215, 0.61, 0.355, 1);
+`;
+
+export interface RadioItemProps {
+  value: string;
+  id: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+const variants = {
+  checked: { scale: 1 },
+  unchecked: { scale: 0 },
+};
+
+export const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(
+  ({ readOnly = false, disabled = false, value }, ref) => {
+    const {
+      setSelectedValue,
+      selectedValue,
+      name,
+      disabled: groupDisabled,
+      readOnly: groupReadOnly,
+    } = useRadioGroupContext();
+    const checked = selectedValue === value;
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleOnClick = () => {
+      if (readOnly || disabled || groupDisabled || groupReadOnly) return;
+      inputRef.current?.click();
+    };
+
+    return (
+      <>
+        <input
+          id={value}
+          name={name}
+          type="radio"
+          style={{ position: 'absolute', opacity: 0, margin: 0, padding: 0, pointerEvents: 'none' }}
+          aria-hidden="true"
+          value={value}
+          tabIndex={-1}
+          checked={checked}
+          aria-readonly={readOnly || groupReadOnly}
+          aria-disabled={disabled || groupDisabled}
+          onChange={(e) => setSelectedValue(e)}
+          ref={inputRef}
+        />
+        <RadioItemContainer
+          isChecked={checked}
+          readOnly={readOnly || groupReadOnly}
+          disabled={disabled || groupDisabled}
+          onClick={handleOnClick}
+          tabIndex={disabled ? -1 : 0}
+          role="radio"
+          ref={ref}
+        >
+          <Inner
+            initial={checked ? 'checked' : 'unchecked'}
+            animate={checked ? 'checked' : 'unchecked'}
+            $isChecked={checked}
+            $readOnly={readOnly || groupReadOnly}
+            variants={variants}
+          >
+            {checked && <CheckMarkIcon />}
+          </Inner>
+        </RadioItemContainer>
+      </>
+    );
+  }
+);

package/src/components/inputs/RadioGroup/context.tsx

@@ -0,0 +1,20 @@
+import { ChangeEvent, createContext, useContext } from 'react';
+
+interface ContextValue {
+  selectedValue: string;
+  setSelectedValue: (e: ChangeEvent<HTMLInputElement>) => void;
+  name: string;
+  disabled: boolean;
+  readOnly: boolean;
+}
+
+export const RadioGroupContext = createContext<ContextValue>({} as ContextValue);
+
+export const useRadioGroupContext = () => {
+  const context = useContext(RadioGroupContext);
+
+  if (!context) {
+    throw new Error('Component must be wrapped with RadioGroup');
+  }
+  return context;
+};

package/src/components/inputs/RadioGroup/index.ts

@@ -0,0 +1,5 @@
+export { GenericRadioGroup } from './Generic';
+export type { RadioGroupProps as RadioGroupProps } from './Generic';
+
+export { ControlledRadioGroup } from './Controlled';
+export type { ControlledRadioGroupProps } from './Controlled';

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

@@ -0,0 +1,3 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div``;

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

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

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

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

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

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

@@ -0,0 +1,140 @@
+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]};
+    }
+  }
+`;

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

@@ -0,0 +1,58 @@
+import { ControlledInputProps } from '../InputProps';
+import { useController } from 'react-hook-form';
+import { FC } from 'react';
+import { GenericSwitch } from '.';
+import { defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+import { Label } from '../../../components';
+import { Container } from './style';
+import { InputWrapper, Description } from '../layout';
+
+export type ControlledSwitchProps = ControlledInputProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledSwitchProps>(defaultInputProps);
+
+export const ControlledSwitch: FC<ControlledSwitchProps> = (props) => {
+  const { readOnly, size, name, required, disabled, hint, label, control, description } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            htmlFor={name}
+            text={label}
+            position="top"
+            error={!!error}
+            size={size}
+            required={required}
+            hint={hint}
+            disabled={disabled}
+          />
+        )}
+        <GenericSwitch
+          id={name}
+          hasError={!!error}
+          hasDescription={!!description}
+          readOnly={readOnly}
+          required={required}
+          disabled={disabled}
+          name={name}
+          size={size}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          value={field.value}
+          ref={field.ref}
+        />
+      </Container>
+      {description && <Description description={description} inputName={name} style={{ marginTop: 0 }} />}
+    </InputWrapper>
+  );
+};