@scality/core-ui 0.115.0

package/src/lib/components/input/Input.component.tsx

@@ -0,0 +1,174 @@
+// @ts-nocheck
+import { ChangeEvent, HTMLAttributes, HTMLProps, useRef } from 'react';
+import { DebounceInput, DebounceInputProps } from 'react-debounce-input';
+import { Checkbox } from '../checkbox/Checkbox.component';
+import { Icon } from '../icon/Icon.component';
+import { Select } from '../select/Select.component';
+import { TextArea } from '../textarea/TextArea.component';
+import {
+  InputContainer,
+  LabelStyle,
+  InputErrorMessage,
+  InputWrapper,
+} from './Input.component.style';
+export type Item = {
+  label: string;
+  value: string | number;
+};
+type Items = Array<Item>;
+export type InputProps = {
+  value: any;
+  type?: string;
+  label?: string;
+  title?: string;
+  error?: string;
+  id?: string;
+  checked?: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  options?: Items;
+  disabled?: boolean;
+  min?: string;
+  max?: string;
+} & HTMLProps<HTMLInputElement> &
+  DebounceInputProps<HTMLInputElement, HTMLAttributes<HTMLInputElement>>;
+
+const InputRenderer = ({
+  type,
+  id,
+  value,
+  checked,
+  onChange,
+  options = [],
+  min,
+  max,
+  ...rest
+}) => {
+  const inputEl = useRef(null);
+
+  const handleNumberClick = (e) => {
+    /*
+     ** Since react is using Synthetic event we have to do the following to be
+     ** able to programmatically dispatch the onChange event from the input
+     */
+    const valuePropDescriptor = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value',
+    );
+
+    if (valuePropDescriptor && inputEl.current) {
+      const nativeInputValueSetter = valuePropDescriptor.set;
+
+      if (nativeInputValueSetter) {
+        if (e.target.dataset.core === 'up')
+          nativeInputValueSetter.call(
+            inputEl.current,
+            max
+              ? max && parseInt(value) + 1 <= parseInt(max)
+                ? parseInt(value) + 1
+                : parseInt(value)
+              : parseInt(value) + 1,
+          );
+        else
+          nativeInputValueSetter.call(
+            inputEl.current,
+            min
+              ? min && parseInt(value) - 1 >= parseInt(min)
+                ? parseInt(value) - 1
+                : parseInt(value)
+              : parseInt(value) - 1,
+          );
+      }
+
+      const event = new Event('input', {
+        bubbles: true,
+      });
+      inputEl.current.dispatchEvent(event);
+    }
+  };
+
+  const input = {
+    select: (
+      <Select
+        id={id}
+        value={value}
+        onChange={onChange}
+        options={options}
+        {...rest}
+      />
+    ),
+    checkbox: (
+      <Checkbox
+        id={id}
+        value={value}
+        checked={!!checked}
+        onChange={onChange}
+        {...rest}
+      />
+    ),
+    textarea: <TextArea id={id} value={value} onChange={onChange} {...rest} />,
+    number: (
+      <div className="sc-number-input-wrapper">
+        <input
+          className="sc-input-type sc-number-input"
+          type="number"
+          id={id}
+          value={value}
+          onChange={onChange}
+          ref={inputEl}
+          min={min}
+          max={max}
+          {...rest}
+        />
+        <div className="carets-wrapper">
+          <Icon name="Dropdown-up" data-core="up" onClick={handleNumberClick} />
+          <Icon
+            name="Dropdown-down"
+            data-core="down"
+            onClick={handleNumberClick}
+          />
+        </div>
+      </div>
+    ),
+    text: (
+      <DebounceInput
+        className="sc-input-type"
+        minLength={1}
+        debounceTimeout={300}
+        id={id}
+        value={value}
+        onChange={onChange}
+        autoComplete="off"
+        {...rest}
+      />
+    ),
+  };
+  if (type) return input[type];
+  else return input.text;
+};
+
+const Input = ({ label, id, error, type, disabled, ...rest }: InputProps) => {
+  return (
+    <InputContainer
+      className="sc-input"
+      disabled={disabled}
+      error={error}
+      type={type}
+    >
+      {label && (
+        <LabelStyle htmlFor={id} className="sc-input-label">
+          {label}
+        </LabelStyle>
+      )}
+      <InputWrapper className="sc-input-wrapper">
+        <InputRenderer id={id} type={type} disabled={disabled} {...rest} />
+        {error && (
+          <InputErrorMessage className="sc-input-error">
+            {error}
+          </InputErrorMessage>
+        )}
+      </InputWrapper>
+    </InputContainer>
+  );
+};
+
+export { Input };

package/src/lib/components/inputlist/InputButtons.tsx

@@ -0,0 +1,111 @@
+import styled, { CSSProperties } from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { useCallback, useMemo } from 'react';
+import { Box } from '../box/Box';
+import { Icon } from '../icon/Icon.component';
+
+const CustomButton = styled(Button)<{ isVisible?: boolean }>`
+  ${(props) =>
+    !props.isVisible
+      ? `
+        display: none;
+    `
+      : ''}
+`;
+const isEmptyItem = (item) => item.key === '' && item.value === '';
+
+type AddButtonProps<T = unknown> = {
+  index: number;
+  items: Array<T>;
+  insertEntry: () => void;
+  disabled?: boolean;
+  iconStyle?: CSSProperties;
+};
+
+export const AddButton = ({
+  index,
+  items,
+  insertEntry,
+  disabled,
+  iconStyle,
+}: AddButtonProps) => {
+  const itemsLength = items.length;
+  const itemsIndex = items[index];
+  const itemsIndexKey = (items[index] as { key: string }).key;
+  const itemsIndexValue = (items[index] as { value: string }).value;
+
+  const isDisabled = useMemo(() => {
+    if (itemsIndex && itemsIndexKey === '' && itemsIndexValue === '') {
+      return true;
+    }
+    return disabled || false;
+  }, [itemsIndex, itemsIndexKey, itemsIndexValue, disabled]);
+
+  const isVisible = useMemo(() => {
+    return !(itemsLength > 0 && index !== itemsLength - 1);
+  }, [itemsLength, index]);
+
+  const onClickFn = useCallback(() => {
+    if (!(itemsLength > 0 && index !== itemsLength - 1)) {
+      insertEntry();
+    }
+  }, [itemsLength, index, insertEntry]);
+
+  return (
+    <>
+      {!isVisible && <Box ml={16} />}
+      <CustomButton
+        isVisible={isVisible}
+        type="button"
+        variant="outline"
+        disabled={isDisabled}
+        name={`addbtn${index}`}
+        id={`addbtn${index}`}
+        onClick={onClickFn}
+        aria-label={`Add${index}`}
+        tooltip={{
+          overlay: 'Add',
+          placement: 'top',
+        }}
+        icon={<Icon name="Add-plus" />}
+      />
+    </>
+  );
+};
+type SubButtonProps<T = unknown> = {
+  index: number;
+  items: Array<T>;
+  deleteEntry: (arg0: number) => void;
+  disabled?: boolean;
+  iconStyle?: CSSProperties;
+};
+export const SubButton = ({
+  index,
+  items,
+  deleteEntry,
+  disabled,
+  iconStyle,
+}: SubButtonProps) => {
+  let isDisabled = disabled || false;
+
+  if (items.length === 1 && isEmptyItem(items[0])) {
+    isDisabled = true;
+  }
+
+  return (
+    <Button
+      variant="danger"
+      type="button"
+      disabled={isDisabled}
+      aria-label={`Remove${index}`}
+      name={`delbtn${index}`}
+      id={`delbtn${index}`}
+      onClick={() => deleteEntry(index)}
+      tooltip={{
+        overlay: 'Remove',
+        placement: 'top',
+      }}
+      icon={<Icon name="Remove-minus" />}
+    />
+  );
+};

package/src/lib/components/inputlist/InputList.component.tsx

@@ -0,0 +1,98 @@
+import { HTMLProps, forwardRef } from 'react';
+import { RefCallBack } from 'react-hook-form';
+import { Box } from '../box/Box';
+import { Input } from '../inputv2/inputv2';
+import { AddButton, SubButton } from './InputButtons';
+
+export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
+  ref: RefCallBack;
+  min?: string | number;
+  max?: string | number;
+  maxLength?: number;
+  minLength?: number;
+  pattern?: string;
+  required?: boolean;
+  disabled?: boolean;
+  maxItems?: number;
+  value: T[];
+};
+
+function InternalInputList<
+  T extends string | number | readonly string[] | undefined,
+>(
+  {
+    onChange,
+    onBlur,
+    min,
+    max,
+    maxLength,
+    minLength,
+    pattern,
+    required,
+    disabled,
+    maxItems,
+    value,
+    name,
+    ...rest
+  }: InputListProps<T>,
+  _,
+) {
+  const isMaxItemsReached =
+    maxItems !== undefined && maxItems !== null && value.length === maxItems;
+
+  const insertEntry = () => {
+    if (!isMaxItemsReached) {
+      onChange?.({
+        target: { value: [...(value ?? []), ''] },
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  const deleteEntry = (entryIndex: number) => {
+    const newValues = value.filter((_, index) => index !== entryIndex);
+    const updatedValues = newValues.length === 0 ? ([''] as T[]) : newValues;
+
+    onChange?.({
+      target: { value: updatedValues },
+    } as unknown as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <>
+      {value.map((val, index) => (
+        <Box display="flex" gap="0.25rem" alignItems="center" key={index}>
+          <Input
+            id={`${name}[${index}]`}
+            aria-label={`${name}${index}`}
+            size="1/2"
+            value={val}
+            onChange={(evt) => {
+              const tempValues = [...value];
+              tempValues[index] = evt.target.value as T;
+              onChange?.({
+                target: { value: tempValues },
+              } as unknown as React.ChangeEvent<HTMLInputElement>);
+            }}
+            {...rest}
+          />
+          <SubButton
+            index={index}
+            key={`${name}-delete-${value.join(',') + index}`}
+            deleteEntry={deleteEntry}
+            items={value}
+            disabled={value.length === 1 && value[0] === ''}
+          />
+          <AddButton
+            index={index}
+            key={`${name}-add-${value.join(',') + index}`}
+            insertEntry={insertEntry}
+            items={value}
+            disabled={val === '' || isMaxItemsReached}
+          />
+        </Box>
+      ))}
+    </>
+  );
+}
+
+export const InputList = forwardRef(InternalInputList);

package/src/lib/components/inputlist/InputList.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InputList, InputListProps } from './InputList.component';
+import { FormSection } from '../form/Form.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+describe('InputList', () => {
+  const onChangeMock = jest.fn();
+
+  const renderInputList = (props: InputListProps<string[]>) => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <FormSection>
+          <InputList
+            placeholder="Input list Test"
+            onChange={onChangeMock}
+            value={props.value}
+            name="inputListTest"
+          />
+        </FormSection>
+      </QueryClientProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    onChangeMock.mockClear();
+  });
+
+  it('should render an empty input list', () => {
+    renderInputList({
+      value: [''],
+    });
+
+    expect(screen.getByLabelText('inputListTest0')).toHaveValue('');
+  });
+
+  it('should render an input list with initial values', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const inputElements = screen.getAllByRole('textbox');
+
+    expect(inputElements).toHaveLength(initialValues.length);
+
+    inputElements.forEach((input, index) => {
+      expect(input).toHaveValue(initialValues[index]);
+    });
+  });
+
+  it('should add a new input when clicking the add button', () => {
+    const initialValues = ['Value 1', 'Value 2'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const addButton = screen.getByLabelText('Add1');
+
+    fireEvent.click(addButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: [...initialValues, ''] },
+    });
+  });
+
+  it('should delete an input when clicking the delete button', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const deleteButton = screen.getByLabelText('Remove1');
+
+    fireEvent.click(deleteButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: ['Value 1', 'Value 3'] },
+    });
+  });
+
+  it('should update the value of an input', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const inputElements = screen.getAllByRole('textbox');
+
+    const newValue = 'New Value';
+
+    fireEvent.change(inputElements[1], { target: { value: newValue } });
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: ['Value 1', newValue, 'Value 3'] },
+    });
+  });
+});

package/src/lib/components/inputv2/inputv2.tsx

@@ -0,0 +1,155 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+
+import { Box } from '../box/Box';
+import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
+import { Icon, IconName } from '../icon/Icon.component';
+
+export const convertSizeToRem = (size?: '1' | '2/3' | '1/2' | '1/3') => {
+  if (size === '2/3') return '14rem';
+  else if (size === '1/3') return '6rem';
+  else if (size === '1/2') return '10rem';
+  else return '20.5rem';
+};
+
+const StyledInput = styled.input`
+  max-width: 100%;
+  font-family: 'Lato';
+  ${(props) =>
+    props.disabled &&
+    `
+  cursor: not-allowed;
+  `}
+  background: ${(props) => props.theme.backgroundLevel1};
+  font-size: 1rem;
+  color: ${(props) => props.theme.textPrimary};
+  border: 0;
+  flex: 1;
+  border-radius: ${spacing.r4};
+  line-height: ${spacing.r20};
+  &:placeholder-shown {
+    font-style: italic;
+  }
+  &::placeholder {
+    color: ${(props) => props.theme.textSecondary};
+    opacity: 0.5;
+  }
+  &:focus {
+    border: 0;
+    outline: none;
+  }
+`;
+
+const InputContainer = styled.div<{
+  hasError: boolean;
+  disabled: boolean;
+  isContextAvailable: boolean;
+}>`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 ${spacing.r8} 0 ${spacing.r8};
+  background: ${(props) => props.theme.backgroundLevel1};
+  border-radius: ${spacing.r4};
+  ${(props) =>
+    props.isContextAvailable &&
+    props.disabled &&
+    `
+  opacity: 0.5;
+  cursor: not-allowed;
+  `}
+`;
+
+const InputBorder = styled.div<{
+  disabled: boolean;
+  hasError: boolean;
+  width: string;
+}>`
+  box-sizing: border-box;
+  width: ${(props) => props.width};
+  height: ${spacing.r32};
+  border: ${spacing.r1} solid
+    ${(props) =>
+      props.hasError ? props.theme.statusCritical : props.theme.border};
+  border-radius: ${spacing.r4};
+  &:hover {
+    ${(props) =>
+      !props.disabled &&
+      `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
+  }
+  &:focus-within {
+    border: ${spacing.r1} solid ${(props) => props.theme.infoPrimary};
+  }
+`;
+
+const SelfCenterredIcon = styled(Icon)`
+  align-self: center;
+`;
+
+type InputSize = '1' | '2/3' | '1/2' | '1/3';
+
+type Props = {
+  error?: string;
+  id: string;
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  size?: InputSize;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+export const Input = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      error,
+      disabled,
+      id,
+      leftIcon,
+      rightIcon,
+      placeholder,
+      size,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const {
+      isContextAvailable,
+      disabled: disabledFromFieldContext,
+      error: errorFromFieldContext,
+    } = useFieldContext();
+    placeholder = placeholder ? `Example: ${placeholder}` : undefined;
+
+    return (
+      <InputBorder
+        disabled={!!(disabled || disabledFromFieldContext)}
+        hasError={!!(error || errorFromFieldContext)}
+        width={convertSizeToRem(size)}
+      >
+        <InputContainer
+          isContextAvailable={isContextAvailable}
+          disabled={!!(disabled || disabledFromFieldContext)}
+          hasError={!!(error || errorFromFieldContext)}
+        >
+          <Box
+            display={'flex'}
+            flexDirection={'row'}
+            alignItems={'baseline'}
+            width="100%"
+            gap={spacing['f8']}
+          >
+            {leftIcon && <SelfCenterredIcon name={leftIcon} />}
+            <StyledInput
+              ref={ref}
+              disabled={disabled || disabledFromFieldContext}
+              aria-invalid={!!(error || errorFromFieldContext)}
+              aria-describedby={`${DESCRIPTION_PREFIX}${id}`}
+              id={id}
+              {...inputProps}
+              placeholder={placeholder}
+            />
+            {rightIcon && <SelfCenterredIcon name={rightIcon} />}
+          </Box>
+        </InputContainer>
+      </InputBorder>
+    );
+  },
+);

package/src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Props as SidebarProps } from '../sidebar/Sidebar.component';
+import { Sidebar } from '../sidebar/Sidebar.component';
+import { getThemePropSelector } from '../../utils';
+type Props = {
+  sidebar: SidebarProps;
+  children: JSX.Element;
+};
+const LateralNavbarLayoutContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+`;
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+`;
+const MainContent = styled.div`
+  flex-grow: 1;
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+`;
+
+function LateralNavbarLayout({ children, sidebar, ...rest }: Props) {
+  return (
+    <LateralNavbarLayoutContainer className="sc-lateralnavbarlayout" {...rest}>
+      <ContentContainer>
+        {sidebar && <Sidebar {...sidebar} />}
+        <MainContent className="main">{children}</MainContent>
+      </ContentContainer>
+    </LateralNavbarLayoutContainer>
+  );
+}
+
+export { LateralNavbarLayout };