init

Author: filipslezaklab

README.md

@@ -0,0 +1 @@
+# Defguard React UI Components Collection

components/Form/FormCheckBox/FormCheckBox.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
+
+import { CheckBox, CheckBoxProps } from '../../layout/Checkbox/CheckBox';
+
+interface Props<T extends FieldValues> extends Partial<CheckBoxProps> {
+  controller: UseControllerProps<T>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customValue?: (context: any) => boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customOnChange?: (context: any) => unknown;
+}
+
+export const FormCheckBox = <T extends FieldValues>({
+  controller,
+  customValue,
+  customOnChange,
+  ...rest
+}: Props<T>) => {
+  const {
+    field: { value, onChange },
+  } = useController(controller);
+  const checkBoxValue = useMemo(() => {
+    if (customValue) {
+      return customValue(value);
+    }
+    return value;
+  }, [customValue, value]);
+  return (
+    <CheckBox
+      data-testid={`field-${controller.name}`}
+      {...rest}
+      value={checkBoxValue}
+      onChange={(e) => {
+        if (customOnChange) {
+          onChange(customOnChange(value));
+        } else {
+          onChange(e);
+        }
+      }}
+    />
+  );
+};

components/Form/FormDevTools/FormDevTools.tsx

@@ -0,0 +1,21 @@
+import './style.scss';
+
+import { DevTool } from '@hookform/devtools';
+import ReactDOM from 'react-dom';
+import { Control } from 'react-hook-form';
+
+interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  control: Control<any, object>;
+}
+
+export const DevTools: React.FC<Props> = ({ control }) => {
+  const element = document.querySelector('#root');
+  if (!element) return null;
+  return ReactDOM.createPortal(
+    <div className="dev-tools">
+      <DevTool control={control} />
+    </div>,
+    element,
+  );
+};

components/Form/FormDevTools/style.scss

@@ -0,0 +1,23 @@
+@use '../../../scss/base/variables/' as v;
+
+.dev-tools {
+  & > div {
+    z-index: 999999999999999999;
+  }
+
+  p {
+    color: v.$white;
+  }
+
+  td {
+    color: v.$white;
+  }
+
+  code {
+    color: v.$white;
+  }
+}
+
+.ReactQueryDevtools {
+  color: v.$white;
+}

components/Form/FormInput/FormInput.tsx

@@ -0,0 +1,68 @@
+import { isUndefined } from 'lodash-es';
+import { useMemo } from 'react';
+import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
+
+import { Input } from '../../layout/Input/Input';
+import { InputFloatingErrors, InputProps } from '../../layout/Input/types';
+
+interface Props<T extends FieldValues> extends Omit<InputProps, 'floatingErrors'> {
+  controller: UseControllerProps<T>;
+  floatingErrors?: {
+    title?: string;
+    errorMessages?: string[];
+  };
+}
+export const FormInput = <T extends FieldValues>({
+  controller,
+  floatingErrors,
+  ...rest
+}: Props<T>) => {
+  const {
+    field,
+    fieldState: { isDirty, isTouched, error },
+    formState: { isSubmitted },
+  } = useController(controller);
+
+  const isInvalid = useMemo(() => {
+    if (
+      (!isUndefined(error) && (isDirty || isTouched)) ||
+      (!isUndefined(error) && isSubmitted)
+    ) {
+      return true;
+    }
+    return false;
+  }, [error, isDirty, isSubmitted, isTouched]);
+
+  const floatingErrorsData = useMemo((): InputFloatingErrors | undefined => {
+    if (floatingErrors && floatingErrors.title && error && error.types && isInvalid) {
+      let errors: string[] = [];
+      for (const val of Object.values(error.types)) {
+        if (typeof val === 'string') {
+          errors.push(val);
+        }
+        if (Array.isArray(val)) {
+          errors = [...errors, ...val];
+        }
+      }
+      if (floatingErrors.errorMessages && floatingErrors.errorMessages.length) {
+        errors = [...errors, ...floatingErrors.errorMessages];
+      }
+      return {
+        title: floatingErrors.title,
+        errorMessages: errors,
+      };
+    }
+    return undefined;
+  }, [error, floatingErrors, isInvalid]);
+
+  return (
+    <Input
+      data-testid={`field-${controller.name}`}
+      {...rest}
+      {...field}
+      invalid={isInvalid}
+      errorMessage={error?.message}
+      floatingErrors={floatingErrorsData}
+    />
+  );
+};

components/Form/FormSelect/FormSelect.tsx

@@ -0,0 +1,53 @@
+import { isUndefined } from 'lodash-es';
+import { useMemo } from 'react';
+import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
+
+import {
+  Select,
+  SelectOption,
+  SelectProps,
+  SelectValue,
+} from '../../layout/Select/Select';
+
+interface Props<T extends FieldValues, Y extends SelectValue>
+  extends Omit<SelectProps<Y>, 'onChange'> {
+  controller: UseControllerProps<T>;
+}
+
+export const FormSelect = <T extends FieldValues, Y extends SelectValue>({
+  controller,
+  ...rest
+}: Props<T, Y>) => {
+  const {
+    field,
+    fieldState: { isDirty, isTouched, error },
+    formState: { isSubmitted },
+  } = useController(controller);
+
+  const isInvalid = useMemo(() => {
+    if (
+      (!isUndefined(error) && (isDirty || isTouched)) ||
+      (!isUndefined(error) && isSubmitted)
+    ) {
+      return true;
+    }
+    return false;
+  }, [error, isDirty, isSubmitted, isTouched]);
+
+  const isValid = useMemo(
+    () => !isInvalid && (isTouched || isDirty || isSubmitted),
+    [isDirty, isInvalid, isSubmitted, isTouched],
+  );
+
+  return (
+    <Select
+      {...rest}
+      selected={field.value as SelectOption<Y> | SelectOption<Y>[]}
+      valid={isValid}
+      invalid={isInvalid}
+      errorMessage={error?.message}
+      onChange={(res) => field.onChange(res)}
+      inForm={true}
+    />
+  );
+};

components/Form/FormToggle/FormToggle.tsx

@@ -0,0 +1,19 @@
+import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
+
+import { Toggle } from '../../layout/Toggle/Toggle';
+import { ToggleProps } from '../../layout/Toggle/types';
+
+interface Props<T extends FieldValues, D>
+  extends Omit<ToggleProps<D>, 'onChange' | 'selected'> {
+  controller: UseControllerProps<T>;
+}
+
+export const FormToggle = <T extends FieldValues, D>({
+  controller,
+  ...rest
+}: Props<T, D>) => {
+  const {
+    field: { onChange, value },
+  } = useController(controller);
+  return <Toggle {...rest} selected={value} onChange={(v) => onChange(v)} />;
+};

components/Layout/ActionButton/ActionButton.tsx

@@ -0,0 +1,100 @@
+import './style.scss';
+
+import classNames from 'classnames';
+import { HTMLMotionProps, motion, TargetAndTransition } from 'framer-motion';
+import { useMemo, useState } from 'react';
+
+import SvgIconCopy from '../../svg/IconCopy';
+import SvgIconDownload from '../../svg/IconDownload';
+import SvgIconQr from '../../svg/IconQr';
+import { useTheme } from '../hooks/theme/useTheme';
+import { ActionButtonVariant } from './types';
+
+type Props = HTMLMotionProps<'button'> & {
+  variant: ActionButtonVariant;
+  disabled?: boolean;
+  className?: string;
+  active?: boolean;
+  onClick?: () => void;
+};
+
+/**
+ * Styled button holding icon, created for usage with ExpandableCard and RowBox
+ * **/
+export const ActionButton = ({
+  variant,
+  className,
+  onClick,
+  disabled = false,
+  active = false,
+  ...rest
+}: Props) => {
+  const { colors } = useTheme();
+
+  const getIcon = useMemo(() => {
+    switch (variant) {
+      case ActionButtonVariant.COPY:
+        return <SvgIconCopy />;
+      case ActionButtonVariant.QRCODE:
+        return <SvgIconQr />;
+      case ActionButtonVariant.DOWNLOAD:
+        return <SvgIconDownload />;
+    }
+  }, [variant]);
+
+  const cn = useMemo(
+    () =>
+      classNames(
+        'action-button',
+        className,
+        {
+          disabled,
+          active,
+        },
+        `variant-${variant.valueOf()}`,
+      ),
+    [className, disabled, variant, active],
+  );
+
+  const [hovered, setHovered] = useState(false);
+
+  const getAnimate = useMemo((): TargetAndTransition => {
+    const res: TargetAndTransition = {
+      backgroundColor: colors.surfaceButton,
+      opacity: 1,
+      transition: {
+        duration: 0.25,
+      },
+    };
+
+    if (disabled) {
+      res.opacity = 0.5;
+      return res;
+    }
+
+    if (hovered || active) {
+      res.backgroundColor = colors.surfaceMainPrimary;
+    }
+
+    return res;
+  }, [colors.surfaceButton, colors.surfaceMainPrimary, disabled, hovered, active]);
+
+  return (
+    <motion.button
+      {...rest}
+      onHoverStart={() => setHovered(true)}
+      onHoverEnd={() => setHovered(false)}
+      className={cn}
+      disabled={disabled}
+      initial={false}
+      animate={getAnimate}
+      onClick={() => {
+        if (!disabled && onClick) {
+          onClick();
+        }
+      }}
+    >
+      {getIcon}
+    </motion.button>
+  );
+};