@ssa-ui-kit/core 1.0.5 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts

@@ -75,7 +75,7 @@ const CollapsibleNavBarBase = styled(NavBarBase)`
 
       & ~ div:nth-of-type(2) {
         display: block;
-        border-radius: 12px 12px 0 0;
+        border-radius: 0;
         height: calc(100vh - 60px);
 
         ${({ theme }) => theme.mediaQueries.xlg} {
@@ -101,8 +101,8 @@ const CollapsibleNavBarBase = styled(NavBarBase)`
 
   ${({ theme }) => theme.mediaQueries.lg} {
     &.opened {
-      min-width: unset;
-      width: 240px;
+      min-width: 240px;
+      width: 291px;
 
       & > div:nth-of-type(2) {
         width: 240px;

package/src/components/NavBar/NavBar.stories.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Routes, Route, MemoryRouter } from 'react-router-dom';
 import { Meta } from '@storybook/react';
-import { Title, Description, Source } from '@storybook/addon-docs';
+import { Title, Description, Subtitle, Primary } from '@storybook/addon-docs';
 
 import { NavBar } from './NavBar';
 import { DecoratorFunction } from '@storybook/types';
@@ -42,12 +42,17 @@ export default {
     viewport: {
       defaultViewport: 'mobile2',
     },
+    source: {
+      type: 'code',
+    },
     docs: {
+      inlineStories: false,
       page: () => (
         <Fragment>
           <Title />
+          <Subtitle />
           <Description />
-          <Source code={`<NavBar />`} />
+          <Primary />
         </Fragment>
       ),
     },

package/src/components/NavBar/NavBarWrapper.ts

@@ -15,7 +15,7 @@ const NavBarWrapper = styled.div`
     ${({ theme }) => theme.colors.greyDarker} 100%
   );
 
-  transform: translateY(-200vh);
+  transform: translateY(-300vh);
   transition: height 475ms ease, transform 450ms ease, border-radius 450ms ease;
 
   ${({ theme }) => theme.mediaQueries.md} {

package/src/components/NotificationMenu/NotificationMenu.spec.tsx

@@ -58,7 +58,7 @@ describe('NotificationMenu', () => {
     await user.click(getByTestId('trigger-button'));
 
     getByRole('link', {
-      name: new RegExp('View all notification', 'i'),
+      name: new RegExp('View all notifications', 'i'),
     });
   });
 });

package/src/components/NotificationMenu/stories/StoryComponent.tsx

@@ -71,7 +71,7 @@ export const StoryComponent = () => {
               }
               rightButton={
                 <Link to={'/'} css={{ gridColumn: 2 }}>
-                  <Button variant="info" text="View all notification" />
+                  <Button variant="info" text="View all notifications" />
                 </Link>
               }
               isLoading={isLoading}>

package/src/components/Radio/RadioBase.tsx

@@ -6,6 +6,7 @@ export const RadioBase = styled(Label)`
   flex-grow: 0;
   align-items: center;
   cursor: pointer;
+  gap: 5px;
 
   &:has(input:disabled) {
     cursor: default;
@@ -29,7 +30,6 @@ export const RadioBase = styled(Label)`
   }
 
   span {
-    margin-left: 10px;
     font-size: 14px;
     font-weight: 100;
   }

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -47,7 +47,7 @@ export const HorizontalRadioGroupStories: StoryObj<typeof RadioGroup> = (
 ) => (
   <Fragment>
     <Typography variant="h4">Horizontal Radio Group</Typography>
-    <RadioGroup {...args} css={{ marginTop: '10px' }}>
+    <RadioGroup {...args} css={{ marginTop: '10px', gap: 10, display: 'flex' }}>
       <Radio id="radio1" value="apple" text="Apple" />
       <Radio id="radio2" value="orange" text="Orange" />
       <Radio id="radio3" value="banana" text="Banana" isDisabled={true} />

package/src/components/Typeahead/Typeahead.context.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { UseTypeaheadResult } from './useTypeahead';
 
 export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
@@ -23,6 +24,7 @@ export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
   isDisabled: false,
   options: [],
   placeholder: '',
+  useFormResult: {} as UseFormReturn<FieldValues>,
   setValue: () => {
     /* no-op */
   },

package/src/components/Typeahead/Typeahead.spec.tsx

@@ -60,7 +60,9 @@ describe('Typeahead', () => {
   it('Renders without a selected item', async () => {
     const { user, mockOnChange, getByRole, queryByRole, getByTestId } = setup();
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', undefined);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', undefined, {
+      shouldDirty: false,
+    });
 
     const mainElement = getByTestId('typeahead');
 
@@ -104,7 +106,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
 
@@ -164,7 +168,9 @@ describe('Typeahead', () => {
       />,
     );
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', []);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', [], {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
 
@@ -203,7 +209,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     const mainElement = getByTestId('typeahead');
 
@@ -243,7 +251,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).lastCalledWith('typeahead-dropdown', selectedIDs[0]);
+    expect(mockOnChange).lastCalledWith('typeahead-dropdown', selectedIDs[0], {
+      shouldDirty: true,
+    });
 
     let inputEl = screen.queryByTestId('typeahead-input');
     expect(inputEl).toHaveValue('First');
@@ -345,7 +355,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
 
@@ -448,7 +460,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
     let toggleElement = within(mainElement).getByRole('combobox');
@@ -492,15 +506,18 @@ describe('Typeahead', () => {
 
   it('Error should be displayed', () => {
     const selectedIDs = selectedItems.map((item) => item.id);
-    const { getByTestId } = setup({
+
+    const additionalProps = {
       initialSelectedItems: selectedIDs,
       isMultiple: true,
       label: 'Label',
-      errors: {
+      error: {
+        type: 'required',
         message: 'Error message',
       },
-    });
+    };
 
+    const { getByTestId } = setup(additionalProps);
     expect(getByTestId('helper-text')).toBeInTheDocument();
   });
 });

package/src/components/Typeahead/Typeahead.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   FieldError,
   FieldValues,
@@ -86,8 +86,38 @@ Basic.args = { isDisabled: false };
 
 export const Multiple: StoryObj = (args: TypeaheadProps) => {
   const useFormResult = useForm<FieldValues>();
-  const { handleSubmit, register, setValue } = useFormResult;
+  const {
+    handleSubmit,
+    register,
+    setValue,
+    setError,
+    clearErrors,
+    watch,
+    formState: { errors, isDirty },
+  } = useFormResult;
+  const fieldName = 'typeahead-dropdown';
+  const error = errors[fieldName]
+    ? {
+        type: errors[fieldName].type,
+        message: errors[fieldName].message,
+      }
+    : undefined;
+
   const onSubmit: SubmitHandler<FieldValues> = (data) => console.log(data);
+  const fieldWatch = watch(fieldName);
+  useEffect(() => {
+    if (isDirty) {
+      if (Array.isArray(fieldWatch) && !fieldWatch.length) {
+        setError(fieldName, {
+          message: 'Required field',
+          type: 'required',
+        });
+      } else {
+        clearErrors(fieldName);
+      }
+    }
+  }, [fieldWatch, isDirty]);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Typeahead
@@ -98,7 +128,11 @@ export const Multiple: StoryObj = (args: TypeaheadProps) => {
         helperText="Helper Text"
         register={register}
         setValue={setValue}
-        name={'typeahead-dropdown'}
+        validationSchema={{
+          required: 'Required',
+        }}
+        name={fieldName}
+        error={error as FieldError}
         renderOption={({ label, input }) => highlightInputMatch(label, input)}>
         {items.map(({ label, value, id }) => (
           <TypeaheadOption key={id} value={id} label={label || value}>
@@ -189,7 +223,7 @@ export const WithError: StoryObj = (args: TypeaheadProps) => {
       validationSchema={{
         required: 'Required',
       }}
-      errors={mockError}
+      error={mockError}
       renderOption={({ label, input }) => highlightInputMatch(label, input)}>
       {items.map(({ label, value, id }) => (
         <TypeaheadOption key={id} value={id} label={label || value}>

package/src/components/Typeahead/Typeahead.tsx

@@ -32,7 +32,7 @@ export const Typeahead = ({
   className,
   startIcon,
   endIcon,
-  errors,
+  error,
   success,
   helperText,
   validationSchema,
@@ -40,6 +40,8 @@ export const Typeahead = ({
   startIconClassName,
   endIconClassName,
   optionsClassName,
+  wrapperClassName,
+  width = 300,
   setValue,
   register,
   onChange,
@@ -58,7 +60,7 @@ export const Typeahead = ({
     endIcon,
     startIconClassName,
     endIconClassName,
-    errors,
+    error,
     success,
     validationSchema,
     placeholder,
@@ -74,7 +76,9 @@ export const Typeahead = ({
         css={{
           flexDirection: 'column',
           alignItems: 'flex-start',
+          width,
         }}
+        className={wrapperClassName}
         data-testid="typeahead">
         {label && (
           <Label
@@ -94,6 +98,7 @@ export const Typeahead = ({
             css={{
               width: hookResult.triggerRef.current?.clientWidth,
               boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
+              zIndex: 100,
             }}
             isFocusManagerDisabled>
             <PopoverDescription css={{ width: '100%' }}>
@@ -105,13 +110,13 @@ export const Typeahead = ({
             </PopoverDescription>
           </PopoverContent>
         </Popover>
-        {(errors?.message || helperText) && (
+        {(hookResult.status === 'error' || helperText) && (
           <FormHelperText
             role="status"
             status={hookResult.status}
             disabled={isDisabled}
             data-testid="helper-text">
-            {errors ? errors?.message : helperText}
+            {error ? error?.message : helperText}
           </FormHelperText>
         )}
       </Wrapper>

package/src/components/Typeahead/components/MultipleTrigger.tsx

@@ -69,7 +69,7 @@ export const MultipleTrigger = () => {
               onChange: context.handleInputChange,
               value: context.inputValue,
               autoComplete: 'off',
-              className: ['typeahead-input', S.TypeaheadInput].join(' '),
+              className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),
             }}
             wrapperClassName={S.TypeaheadInputWrapper}
             ref={context.inputRef}
@@ -78,20 +78,20 @@ export const MultipleTrigger = () => {
         <input
           type="text"
           data-testid="typeahead-input"
-          aria-hidden
+          aria-hidden={context.isOpen}
           readOnly
           value={context.firstSuggestion}
+          tabIndex={-1}
           disabled={context.isDisabled}
           className={[
             'typeahead-input',
-            S.TypeaheadInput,
+            S.TypeaheadInput(theme),
             S.TypeaheadInputPlaceholder,
           ].join(' ')}
           {...typeaheadInputAdditionalProps}
         />
         <input
           type="hidden"
-          aria-hidden
           readOnly
           value={context.selectedItems as string[]}
           {...context.register?.(context.name, context.validationSchema)}
@@ -103,7 +103,8 @@ export const MultipleTrigger = () => {
           data-testid="remove-all-button"
           endIcon={<Icon name="cross" size={8} tooltip="Remove all" />}
           css={{
-            padding: '0 14px 0 10px',
+            padding: '0 10px',
+            marginRight: 4,
             position: 'absolute',
             right: 0,
             zIndex: 10,

package/src/components/Typeahead/components/SingleTrigger.tsx

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes } from 'react';
+import { useTheme } from '@emotion/react';
 import Input from '@components/Input';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
@@ -7,6 +8,7 @@ import * as S from '../styles';
 
 export const SingleTrigger = () => {
   const context = useTypeaheadContext();
+  const theme = useTheme();
   const typeaheadInputAdditionalProps: InputHTMLAttributes<HTMLInputElement> =
     {};
   if (!context.selectedItems.length && !!context.placeholder) {
@@ -26,7 +28,7 @@ export const SingleTrigger = () => {
             onChange: context.handleInputChange,
             value: context.inputValue,
             autoComplete: 'off',
-            className: ['typeahead-input', S.TypeaheadInput].join(' '),
+            className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),
           }}
           wrapperClassName={S.TypeaheadInputWrapper}
           ref={context.inputRef}
@@ -35,19 +37,19 @@ export const SingleTrigger = () => {
       <input
         type="text"
         data-testid="typeahead-input"
-        aria-hidden
+        aria-hidden={context.isOpen}
         readOnly
         value={context.firstSuggestion}
+        tabIndex={-1}
         className={[
           'typeahead-input',
-          S.TypeaheadInput,
+          S.TypeaheadInput(theme),
           S.TypeaheadInputPlaceholder,
         ].join(' ')}
         {...typeaheadInputAdditionalProps}
       />
       <input
         type="hidden"
-        aria-hidden
         readOnly
         value={(context.selectedItems[0] || '') as string | undefined}
         {...context.register?.(context.name, context.validationSchema)}
@@ -58,7 +60,8 @@ export const SingleTrigger = () => {
           data-testid="remove-all-button"
           endIcon={<Icon name="cross" size={8} tooltip="Remove" />}
           css={{
-            padding: '0 14px 0 10px',
+            padding: '0 10px',
+            marginRight: 4,
             position: 'absolute',
             right: -28,
             zIndex: 10,

package/src/components/Typeahead/components/TypeaheadItem.ts

@@ -1,5 +1,5 @@
-import Icon from '@components/Icon';
 import styled from '@emotion/styled';
+import Icon from '@components/Icon';
 
 export const TypeaheadItemImage = styled.img`
   width: 24px;

package/src/components/Typeahead/styles.ts

@@ -1,3 +1,4 @@
+import { Theme } from '@emotion/react';
 import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 import Wrapper from '@components/Wrapper';
@@ -35,8 +36,9 @@ export const TypeaheadOption = styled.li<TypeaheadItemProps>`
   }
 `;
 
-export const TypeaheadInput = css`
+export const TypeaheadInput = (theme: Theme) => css`
   &.typeahead-input {
+    color: ${theme.colors.greyDarker};
     border: none;
     border-radius: 0;
     height: 32px;
@@ -148,7 +150,7 @@ export const TypeaheadTrigger = styled(PopoverTrigger)<{
   background: #fff;
   gap: 8px;
   padding: 5px 28px 5px 8px;
-  width: 300px;
+  width: 100%;
   flex-wrap: wrap;
   border-color: ${({ isOpen, theme, status }) =>
     isOpen &&

package/src/components/Typeahead/types.ts

@@ -17,6 +17,8 @@ export interface TypeaheadProps {
   children?: React.ReactNode;
   className?: string;
   optionsClassName?: string;
+  wrapperClassName?: string;
+  width?: string | number;
   isOpen?: boolean;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
@@ -25,7 +27,7 @@ export interface TypeaheadProps {
   name?: string;
   label?: string;
   helperText?: string;
-  errors?: FieldError;
+  error?: FieldError;
   success?: boolean;
   validationSchema?: Record<string, unknown>;
   placeholder?: string | null;
@@ -57,7 +59,7 @@ export type UseTypeaheadProps = Pick<
   | 'register'
   | 'setValue'
   | 'validationSchema'
-  | 'errors'
+  | 'error'
   | 'success'
   | 'placeholder'
 >;

package/src/components/Typeahead/useTypeahead.tsx

@@ -6,6 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { useForm } from 'react-hook-form';
 import { propOr } from '@ssa-ui-kit/utils';
 import { TypeaheadOptionProps, UseTypeaheadProps } from './types';
 
@@ -22,7 +23,7 @@ export const useTypeahead = ({
   startIconClassName,
   endIconClassName,
   validationSchema,
-  errors,
+  error,
   success,
   placeholder,
   register,
@@ -38,15 +39,17 @@ export const useTypeahead = ({
   const [optionsWithKey, setOptionsWithKey] = useState<
     Record<number | string, Record<string, string | number>>
   >({});
+  const [isFirstRender, setFirstRender] = useState<boolean>(true);
   const [items, setItems] = useState<Array<React.ReactElement> | undefined>();
   const [inputValue, setInputValue] = useState<string>('');
   const [status, setStatus] = useState<'basic' | 'success' | 'error'>('basic');
+  const [firstSuggestion, setFirstSuggestion] = useState('');
 
   const inputRef = useRef<HTMLInputElement>(null);
   const typeaheadId = useId();
   const triggerRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement>(null);
-  const [firstSuggestion, setFirstSuggestion] = useState('');
+  const useFormResult = useForm();
 
   useEffect(() => {
     if (!register) {
@@ -56,11 +59,15 @@ export const useTypeahead = ({
 
   useEffect(() => {
     if (isMultiple) {
-      setValue?.(name, selected);
+      setValue?.(name, selected, {
+        shouldDirty: !isFirstRender,
+      });
       setInputValue('');
       setFirstSuggestion('');
     } else {
-      setValue?.(name, selected.length ? selected[0] : undefined);
+      setValue?.(name, selected.length ? selected[0] : undefined, {
+        shouldDirty: !isFirstRender,
+      });
     }
   }, [selected]);
 
@@ -71,9 +78,22 @@ export const useTypeahead = ({
   }, [isDisabled]);
 
   useEffect(() => {
-    const status = success ? 'success' : errors ? 'error' : 'basic';
+    const status = success
+      ? 'success'
+      : useFormResult.formState.errors[name]
+      ? 'error'
+      : 'basic';
     setStatus(status);
-  }, [errors, success]);
+  }, [useFormResult.formState.errors[name], success]);
+
+  useEffect(() => {
+    if (error) {
+      useFormResult.setError(name, error);
+    } else {
+      setStatus('basic');
+      useFormResult.resetField(name);
+    }
+  }, [error]);
 
   useEffect(() => {
     const keyedOptions: Record<
@@ -94,6 +114,7 @@ export const useTypeahead = ({
     });
     setOptionsWithKey(keyedOptions);
     setItems(childItems);
+    setFirstRender(false);
   }, [initialSelectedItems, children]);
 
   useEffect(() => {
@@ -201,6 +222,9 @@ export const useTypeahead = ({
     setIsOpen(false);
     setFirstSuggestion('');
     inputRef.current?.focus();
+    setStatus('basic');
+    useFormResult.clearErrors(name);
+    useFormResult.trigger(name);
     onChange && onChange(changingValue, isNewSelected);
   };
 
@@ -214,6 +238,7 @@ export const useTypeahead = ({
     setInputValue('');
     setIsOpen(false);
     setFirstSuggestion('');
+    useFormResult.trigger(name);
     inputRef.current?.focus();
   };
 
@@ -231,13 +256,12 @@ export const useTypeahead = ({
   const handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (
     event,
   ) => {
-    if (['Tab', 'Space'].includes(event.code) && !firstSuggestion) {
+    if (['Space'].includes(event.code) && !firstSuggestion) {
       setIsOpen(true);
       inputRef.current?.focus();
       event.stopPropagation();
       event.preventDefault();
-    }
-    if (['Tab', 'Enter'].includes(event.code) && firstSuggestion) {
+    } else if (['Tab', 'Enter'].includes(event.code) && firstSuggestion) {
       const foundItem = Object.values(optionsWithKey).find(
         (item) =>
           `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase(),
@@ -248,8 +272,7 @@ export const useTypeahead = ({
       }
       event.preventDefault();
       return false;
-    }
-    if (
+    } else if (
       isMultiple &&
       event.code === 'Backspace' &&
       selected.length > 0 &&
@@ -258,8 +281,7 @@ export const useTypeahead = ({
       handleChange(selected[selected.length - 1]);
       event.preventDefault();
       return false;
-    }
-    if (!isOpen) {
+    } else if (!isOpen) {
       setIsOpen(true);
     }
   };
@@ -305,6 +327,7 @@ export const useTypeahead = ({
     status,
     placeholder,
     options: items,
+    useFormResult,
     register,
     setValue,
     handleChange,

package/src/components/UserProfile/UserProfile.stories.tsx

@@ -1,6 +1,7 @@
+import { useTheme } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
-import Avatar from '@components/Avatar';
 import { UserProfile } from './UserProfile';
+import Icon from '@components/Icon';
 
 export default {
   title: 'Widgets/UserProfile',
@@ -8,11 +9,12 @@ export default {
 } as Meta<typeof UserProfile>;
 
 export const Default: StoryObj<typeof UserProfile> = () => {
+  const theme = useTheme();
   return (
     <UserProfile
       name="Josh Li"
       email="Josh@gmail.com"
-      trigger={<Avatar size={42} image="https://via.placeholder.com/42x42" />}
+      trigger={<Icon size={42} name="user" color={theme.colors.grey} />}
       onClick={() => alert('Clicked!')}
     />
   );