@takaro/lib-components 0.0.9 → 0.0.11

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.11",
   "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/data/Table/index.tsx

@@ -93,7 +93,19 @@ export function Table<DataType extends object>({
         if (column.id === undefined) {
           throw new Error('ColumnDef must have an id');
         }
-        acc[column.id] = column?.meta?.hiddenColumn ? !column.meta.hiddenColumn : true;
+
+        if (column?.meta?.includeColumn == false) {
+          acc[column.id] = false;
+          return acc;
+        } else {
+          acc[column.id] = true;
+        }
+
+        if (column?.meta?.hideColumn) {
+          acc[column.id] = !column.meta.hideColumn;
+        } else {
+          acc[column.id] = true;
+        }
         return acc;
       },
       {} as Record<string, boolean>,

package/src/components/data/Table/react-table.d.ts

@@ -5,7 +5,10 @@ type DataTypes = 'datetime' | 'number' | 'string' | 'boolean' | 'uuid';
 
 declare module '@tanstack/table-core' {
   interface ColumnMeta<TData extends RowData, TValue> {
-    hiddenColumn?: boolean;
+    /// Column is not visible in table by default, but can be enabled with view options
+    hideColumn?: boolean;
+    canShowColumn?: boolean;
+    includeColumn?: boolean;
     dataType?: DataTypes;
   }
 }

package/src/components/data/Table/subcomponents/ColumnVisibility/index.tsx

@@ -18,7 +18,16 @@ export function ColumnVisibility<DataType extends object>({
   openColumnVisibilityTooltip,
   setHasShownColumnVisibilityTooltip,
 }: ColumnVisibilityProps<DataType>) {
-  const viableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide() === true);
+  const viableColumns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide() === true)
+    .filter((column) => {
+      if (column.columnDef.meta?.includeColumn === false) {
+        return false;
+      }
+      return true;
+    });
+
   const hiddenColumns = viableColumns.filter((column) => column.getIsVisible() === false);
 
   return (

package/src/components/feedback/Alert/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, MouseEvent, useState } from 'react';
+import { forwardRef, isValidElement, MouseEvent, ReactElement, useState } from 'react';
 import { Container, Grid, IconContainer, ButtonContainer } from './style';
 import {
   AiFillCheckCircle as Success,
@@ -20,14 +20,15 @@ type Action = {
 export interface AlertProps {
   variant: AlertVariants;
   title?: string;
-  text?: string | string[];
+  text?: string | string[] | ReactElement;
   elevation?: Elevation;
   dismiss?: boolean;
   action?: Action;
+  showIcon?: boolean;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 4, action },
+  { variant, title, text, dismiss = false, elevation = 4, action, showIcon = true },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
@@ -39,7 +40,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
     e.stopPropagation();
     action?.execute();
   };
-
   const handleDismiss = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -58,6 +58,19 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
         return <Info size={24} />;
     }
   }
+
+  function renderText() {
+    if (isValidElement(text)) {
+      return text;
+    }
+
+    if (typeof text === 'string') {
+      return <p>{text}</p>;
+    } else if (Array.isArray(text)) {
+      return <ul>{text?.map((message) => <li key={'message-' + message}>{message}</li>)}</ul>;
+    }
+  }
+
   return (
     <AnimatePresence>
       {visible && (
@@ -72,8 +85,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           ref={ref}
           role="status"
         >
-          <Grid hasTitle={hasTitle}>
-            <IconContainer variant={variant}>{getIcon()}</IconContainer>
+          <Grid hasTitle={hasTitle} showIcon={showIcon}>
+            {showIcon && <IconContainer variant={variant}>{getIcon()}</IconContainer>}
 
             {/* If title is declared set title, otherwise put everything on single line */}
             {title && (
@@ -82,25 +95,13 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
                 <div />
               </>
             )}
-            {typeof text === 'string' ? (
-              <p>{text}</p>
-            ) : (
-              text && (
-                <ul>
-                  {text.map((message) => (
-                    <li key={'message-' + message}>{message}</li>
-                  ))}
-                </ul>
-              )
-            )}
+            {renderText()}
             {hasTitle ? <div /> : null}
             <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
               {action && (
-                <Button size="small" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
-              )}
-              {dismiss && (
-                <Button size="small" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />
+                <Button size="tiny" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
               )}
+              {dismiss && <Button size="tiny" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />}
             </ButtonContainer>
           </Grid>
         </Container>

package/src/components/feedback/Alert/style.ts

@@ -58,10 +58,15 @@ export const Container = styled(motion.div)<{
   }}
 `;
 
-export const Grid = styled.div<{ hasTitle: boolean }>`
+export const Grid = styled.div<{ hasTitle: boolean; showIcon: boolean }>`
   display: grid;
-  grid-template-columns: ${({ theme, hasTitle }) =>
-    !hasTitle ? `${theme.spacing[5]} 1fr fit-content(100px)` : `${theme.spacing[5]} 1fr`};} 
+  grid-template-columns: ${({ theme, hasTitle, showIcon }) => {
+    const result = '';
+    if (showIcon) result.concat(`${theme.spacing[5]}`);
+    result.concat(' 1fr');
+    if (hasTitle) result.concat(' fit-content(100px)');
+    return result;
+  }}
   align-items: center;
   gap: ${({ theme, hasTitle }) => (hasTitle ? 0 : theme.spacing['0_5'])};
 `;
@@ -83,5 +88,6 @@ export const ButtonContainer = styled.div<{
 }>`
   display: ${({ show }): string => (show ? 'flex' : 'none')};
   align-items: center;
+  white-space: nowrap;
   margin-top: ${({ theme, hasTitle }): string => (hasTitle ? theme.spacing['1'] : theme.spacing[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/other/Collapsible/CollapsibleContent.tsx

@@ -6,6 +6,13 @@ const Container = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing['1']};
   hyphens: auto;
 
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: 10px 5px 0px 5px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+
   p {
     hypens: auto;
   }

package/src/components/other/Collapsible/CollapsibleTrigger.tsx

@@ -22,6 +22,18 @@ const Container = styled.button<{ open: boolean }>`
   margin-bottom: ${({ theme, open }) => (!open ? theme.spacing['1'] : theme.spacing['0_5'])};
   border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
   color: ${({ theme }) => theme.colors.textAlt};
+  font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+
+  ${({ open }) => {
+    if (open) {
+      return `
+        border-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-bottom: 0;
+      `;
+    }
+  }}
 
   svg {
     fill: ${({ theme }) => theme.colors.textAlt};

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]};
-    }
-  }
-`;