@takaro/lib-components 0.0.1

package/src/components/feedback/snacks/Default/default.stories.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { useSnackbar } from 'notistack';
+import { styled } from '../../../../styled';
+import { Button } from '../../../../components';
+import { DefaultSnackProps } from '.';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+`;
+
+export default {
+  title: 'Feedback/Snacks/Default',
+  parameters: {
+    docs: {
+      inlineStories: false,
+    },
+  },
+  args: {
+    type: 'info',
+    title: 'Update available',
+    message: 'A new software version is available for download.',
+  },
+} as Meta<DefaultSnackProps>;
+
+export const Default: StoryFn<DefaultSnackProps> = (args) => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleOnClick = () => {
+    enqueueSnackbar(args.message, {
+      title: args.title,
+      type: args.type,
+      key: 'software-update',
+    });
+  };
+
+  return (
+    <Wrapper>
+      <Button onClick={handleOnClick} text="show snack" />
+    </Wrapper>
+  );
+};
+
+export const Buttons: StoryFn<DefaultSnackProps> = (args) => {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  const handleOnClick = () => {
+    enqueueSnackbar(args.message, {
+      title: args.title,
+      type: args.type,
+      key: 'software-update',
+      button1: <Button text="Update" />,
+      button2: (
+        <Button
+          onClick={() => {
+            closeSnackbar('software-update');
+          }}
+          text="Not now"
+          variant="outline"
+        />
+      ),
+    });
+  };
+
+  return (
+    <Wrapper>
+      <Button onClick={handleOnClick} text="show snack" />
+    </Wrapper>
+  );
+};

package/src/components/feedback/snacks/Default/index.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, FC, ReactElement, cloneElement, useCallback } from 'react';
+import { CustomContentProps, useSnackbar } from 'notistack';
+import {
+  AiOutlineClose as CloseIcon,
+  AiOutlineWarning as WarningIcon,
+  AiOutlineInfo as InfoIcon,
+  AiOutlineCheck as CheckMarkIcon,
+  AiOutlineMeh as ErrorIcon,
+} from 'react-icons/ai';
+
+import { Wrapper, ContentContainer, TextContainer, IconContainer, ButtonContainer } from './style';
+import { useTheme } from '../../../../hooks';
+import { ButtonProps, IconButton, Tooltip } from '../../../../components';
+import { AlertVariants } from '../../../../styled';
+
+/* IMPORTANT: These props need to be kept in sync with the props defined in helpers/getSnackbarProvider */
+export interface DefaultSnackProps extends CustomContentProps {
+  title?: string;
+  button1?: FC<ButtonProps>;
+  button2?: FC<ButtonProps>;
+  type?: AlertVariants;
+  icon?: ReactElement;
+}
+
+export const DefaultSnack = forwardRef<HTMLDivElement, DefaultSnackProps>(
+  ({ id, message, title, button1, button2, type = 'info', icon }, ref) => {
+    const { closeSnackbar } = useSnackbar();
+    const theme = useTheme();
+
+    const getIcon = () => {
+      switch (type) {
+        case 'info':
+          return <InfoIcon fill={theme.colors.info} size={15} />;
+        case 'success':
+          return <CheckMarkIcon fill={theme.colors.success} size={15} />;
+        case 'warning':
+          return <WarningIcon fill={theme.colors.warning} size={15} />;
+        case 'error':
+          return <ErrorIcon fill={theme.colors.warning} size={15} />;
+      }
+    };
+
+    const handleDismiss = useCallback(() => {
+      closeSnackbar(id);
+    }, [id, closeSnackbar]);
+
+    return (
+      <Wrapper ref={ref}>
+        <ContentContainer>
+          <IconContainer variant={type}>
+            {icon ? cloneElement(icon, { size: 15, fill: theme.colors[type] }) : getIcon()}
+          </IconContainer>
+          <TextContainer>
+            {title && <h3>{title}</h3>}
+            <h5>{message}</h5>
+            {button1 && (
+              <ButtonContainer>
+                <>
+                  {button1}
+                  {button2 && button2}
+                </>
+              </ButtonContainer>
+            )}
+          </TextContainer>
+          <div style={{ width: '25px' }}>
+            <Tooltip>
+              <Tooltip.Trigger asChild>
+                <IconButton icon={<CloseIcon />} ariaLabel="Dismiss snack popup" onClick={handleDismiss} />
+              </Tooltip.Trigger>
+              <Tooltip.Content>Dismiss</Tooltip.Content>
+            </Tooltip>
+          </div>
+        </ContentContainer>
+      </Wrapper>
+    );
+  }
+);

package/src/components/feedback/snacks/Default/style.ts

@@ -0,0 +1,59 @@
+import { styled } from '../../../../styled';
+import { lighten } from 'polished';
+
+export const Wrapper = styled.div`
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  padding: ${({ theme }) =>
+    `${theme.spacing['1']} ${theme.spacing[2]} ${theme.spacing['1_5']} ${theme.spacing['1_5']}`};
+  box-shadow: ${({ theme }) => theme.elevation[4]};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAlt};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 250px;
+  h3 {
+    font-weight: 700;
+    margin-bottom: ${({ theme }) => theme.spacing[1]};
+  }
+  margin-right: ${({ theme }) => theme.spacing[1]};
+`;
+
+export const IconContainer = styled.div<{
+  variant: 'info' | 'warning' | 'success' | 'error';
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing['0_5']};
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  margin-right: ${({ theme }) => theme.spacing[1]};
+  background-color: ${({ variant, theme }): string => lighten(0.3, theme.colors[variant])};
+`;
+
+export const ButtonContainer = styled.div`
+  width: 100%;
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    width: 100%;
+    &:first-child {
+      margin-right: ${({ theme }) => theme.spacing['0_5']};
+    }
+  }
+`;

package/src/components/feedback/snacks/Drawer/Drawer.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button } from '../../../';
+import { useSnackbar } from 'notistack';
+import { styled } from '../../../../';
+import { AiFillCheckCircle as CheckMarkIcon } from 'react-icons/ai';
+
+const CustomContent = styled.div`
+  h4 {
+    font-size: 1.2rem;
+  }
+  p {
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 0.5rem;
+    }
+  }
+`;
+
+export default {
+  title: 'Feedback/Snacks/DrawerSnack',
+  component: undefined,
+} as Meta;
+
+export const Downloads: StoryFn = () => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const showSnack = () => {
+    enqueueSnackbar('Report Complete', {
+      autoHideDuration: 20000, // 20s
+      anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+      variant: 'drawer',
+      children: (
+        <CustomContent>
+          <h4>Pdf Ready</h4>
+          <p>
+            <CheckMarkIcon /> Download now
+          </p>
+        </CustomContent>
+      ),
+    });
+  };
+
+  return <Button onClick={() => showSnack()} text="Show snack" />;
+};

package/src/components/feedback/snacks/Drawer/index.tsx

@@ -0,0 +1,70 @@
+import { CustomContentProps, useSnackbar } from 'notistack';
+import { useState, forwardRef, PropsWithChildren } from 'react';
+import { styled } from '../../../../styled';
+import { AiOutlineClose as CloseIcon, AiOutlineDown as ArrowDownIcon } from 'react-icons/ai';
+
+const Wrapper = styled.div`
+  box-shadow: ${({ theme }) => theme.elevation[4]};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  width: 250px;
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+const Container = styled.div<{ expanded: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 0;
+  background-color: ${({ theme }) => theme.colors.background};
+  padding: ${({ theme }) => theme.spacing[1]};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+
+  ${({ expanded }) => {
+    if (expanded) {
+      return `
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      `;
+    }
+  }}
+  svg {
+    cursor: pointer;
+    padding: ${({ theme }) => `0 ${theme.spacing['0_5']}`};
+  }
+`;
+
+const Content = styled.div<{ expanded: boolean }>`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  height: ${({ expanded }): string => (expanded ? 'auto' : '0')};
+  padding: ${({ expanded, theme }): string => (expanded ? theme.spacing[1] : theme.spacing[0])};
+  will-change: height;
+  transition: height 0.2s ease-in-out;
+  overflow: hidden;
+  border-radius: ${({ theme }) => `0 0 ${theme.borderRadius.large} ${theme.borderRadius.large}`};
+  border-radius-top-left: 0;
+  border-radius-top-right: 0;
+`;
+
+export const DrawerSnack = forwardRef<HTMLDivElement, PropsWithChildren<CustomContentProps>>(
+  ({ id, message, children }, ref) => {
+    const { closeSnackbar } = useSnackbar();
+    const [expanded, setExpanded] = useState<boolean>(false);
+
+    const handleClose = () => {
+      closeSnackbar(id);
+    };
+
+    return (
+      <Wrapper ref={ref} data-testid={id}>
+        <Container expanded={expanded}>
+          <h4>{message}</h4>
+          <div>
+            <ArrowDownIcon onClick={() => setExpanded(!expanded)} size={16} />
+            <CloseIcon onClick={handleClose} size={16} />
+          </div>
+        </Container>
+        <Content expanded={expanded}>{children}</Content>
+      </Wrapper>
+    );
+  }
+);

package/src/components/feedback/snacks/NetworkDetector/index.tsx

@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+import { styled } from '../../../../styled';
+import { useTheme } from '../../../../hooks';
+import { FiWifi as WifiIcon, FiWifiOff as WifiOffIcon } from 'react-icons/fi';
+import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+import { CustomContentProps, useSnackbar } from 'notistack';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.2rem;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  width: 300px;
+  background-color: white;
+  box-shadow: ${({ theme }): string => theme.elevation[4]};
+  p {
+    font-size: 1.325rem;
+  }
+`;
+const CloseIconContainer = styled.div`
+  border-radius: 50%;
+  padding: 0.3rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }): string => theme.colors.background};
+    svg {
+      fill: white;
+      stroke: white;
+    }
+  }
+`;
+
+export const NetworkDetectorOfflineSnack = forwardRef<HTMLDivElement, CustomContentProps>(({ id, message }, ref) => {
+  const { closeSnackbar } = useSnackbar();
+
+  const handleClose = () => {
+    closeSnackbar(id);
+  };
+
+  return (
+    <Container ref={ref}>
+      <WifiOffIcon size={18} style={{ stroke: 'black' }} />
+      <p>{message}</p>
+      <CloseIconContainer>
+        <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
+      </CloseIconContainer>
+    </Container>
+  );
+});
+
+export const NetworkDetectorOnlineSnack = forwardRef<HTMLDivElement, CustomContentProps>(({ id, message }, ref) => {
+  const theme = useTheme();
+  const { closeSnackbar } = useSnackbar();
+
+  const handleClose = () => {
+    closeSnackbar(id);
+  };
+
+  return (
+    <Container ref={ref}>
+      <WifiIcon size={20} style={{ stroke: theme.colors.success }} />
+      <p>{message}</p>
+      <CloseIconContainer>
+        <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
+      </CloseIconContainer>
+    </Container>
+  );
+});

package/src/components/feedback/snacks/index.d.ts

@@ -0,0 +1,15 @@
+import { DefaultSnackProps } from './Default';
+import { DrawerSnackProps } from './Drawer';
+
+declare module 'notistack' {
+  interface VariantOverrides {
+    // disable default variants
+    success: false;
+    error: false;
+    info: false;
+    warning: false;
+
+    default: DefaultSnackProps;
+    draw: DrawerSnackProps;
+  }
+}

package/src/components/feedback/snacks/index.ts

@@ -0,0 +1,8 @@
+export { DefaultSnack } from './Default';
+export type { DefaultSnackProps } from './Default';
+
+export { DrawerSnack } from './Drawer';
+
+export { NetworkDetectorOfflineSnack, NetworkDetectorOnlineSnack } from './NetworkDetector';
+
+export { CookieConsentSnack } from './CookieConsent';

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './actions';
+export * from './feedback';
+export * from './inputs';
+export * from './data';
+export * from './charts';
+export * from './visual';
+export * from './navigation';
+export * from './other';
+export * from './dialogs/Dialog';

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { CheckBox, CheckBoxProps, Button } from '../../../components';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
+
+const Wrapper = styled.div`
+  padding: 5rem;
+`;
+
+export default {
+  title: 'Inputs/Checkbox',
+  component: CheckBox,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    name: 'checkbox',
+    loading: false,
+    defaultValue: false,
+    readOnly: false,
+    label: 'this is the label',
+    labelPosition: 'left',
+    disabled: false,
+    required: true,
+    size: 'medium',
+  },
+} as Meta<CheckBoxProps>;
+
+export const OnSubmit: StoryFn<CheckBoxProps & { defaultValue: boolean }> = (args) => {
+  type FormFields = { checkbox: boolean };
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    defaultValues: {
+      checkbox: args.defaultValue,
+    },
+  });
+  const [result, setResult] = React.useState<boolean>(false);
+
+  const onSubmit: SubmitHandler<FormFields> = (values) => {
+    setResult(values[args.name]);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CheckBox {...args} control={control} />
+        <Button type="submit" text="submit" />
+      </form>
+      <pre>value: {result ? 'true' : 'false'}</pre>
+      <p>NOTE: defaultValue will only be set on initial load. Limitation of react-hook-form.</p>
+    </>
+  );
+};
+
+export const OnChange: StoryFn<CheckBoxProps> = (args) => {
+  const { control } = useForm();
+  const CheckBoxValue = useWatch({ control, name: args.name });
+
+  return (
+    <>
+      <CheckBox {...args} control={control} />
+      <pre>value: {CheckBoxValue ? 'true' : 'false'}</pre>
+    </>
+  );
+};

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

@@ -0,0 +1,124 @@
+import { FC } from 'react';
+import { useController } from 'react-hook-form';
+import { GenericCheckBox } from '.';
+import { Container, CheckboxContainer } from './style';
+
+import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../InputProps';
+import { Label, ErrorMessage, InputWrapper, Description } from '../layout';
+
+export interface CheckBoxProps {
+  labelPosition?: 'left' | 'right';
+}
+
+export type ControlledCheckBoxProps = ControlledInputProps & CheckBoxProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledCheckBoxProps>(defaultInputProps);
+
+export const ControlledCheckBox: FC<ControlledCheckBoxProps> = (props) => {
+  const {
+    name,
+    size,
+    label,
+    loading,
+    required,
+    readOnly,
+    disabled,
+    description,
+    labelPosition = 'left',
+    hint,
+    control,
+  } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  if (loading) {
+    return (
+      <InputWrapper>
+        <Container>
+          {/* CASE: Show label before <CheckBox /> */}
+          {labelPosition === 'left' && label && (
+            <Label
+              error={!!error}
+              position={labelPosition}
+              size={size}
+              text={label}
+              disabled={disabled}
+              required={required}
+              hint={hint}
+              htmlFor={name}
+            />
+          )}
+          <CheckboxContainer className="placeholder" readOnly={readOnly} hasError={!!error} disabled={disabled} />
+          {/* CASE: show label after <CheckBox /> */}
+          {labelPosition === 'right' && label && (
+            <Label
+              error={!!error}
+              position={labelPosition}
+              size={size}
+              text={label}
+              disabled={disabled}
+              required={required}
+              hint={hint}
+              htmlFor={name}
+            />
+          )}
+        </Container>
+        {description && <Description description={description} inputName={name} />}
+      </InputWrapper>
+    );
+  }
+
+  return (
+    <InputWrapper>
+      <Container>
+        {/* CASE: Show label before <CheckBox /> */}
+        {labelPosition === 'left' && label && (
+          <Label
+            error={!!error}
+            position={labelPosition}
+            size={size}
+            text={label}
+            disabled={disabled}
+            required={required}
+            htmlFor={name}
+          />
+        )}
+        <GenericCheckBox
+          id={name}
+          hasError={!!error}
+          hasDescription={!!description}
+          name={name}
+          disabled={disabled}
+          size={size}
+          readOnly={readOnly}
+          required={required}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          value={field.value}
+          ref={field.ref}
+        />
+
+        {/* CASE: show label after <CheckBox /> */}
+        {labelPosition === 'right' && label && (
+          <Label
+            error={!!error}
+            position={labelPosition}
+            text={label}
+            disabled={disabled}
+            required={required}
+            htmlFor={name}
+            size={size}
+          />
+        )}
+        {error && error.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};