@ssa-ui-kit/core 1.0.4 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "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/ImageItem/ImageItem.tsx

@@ -33,7 +33,7 @@ export const ImageItem = ({
           fontWeight: 500,
           cursor: link ? 'pointer' : 'default',
           '&:hover': {
-            color: theme.colors.blue,
+            color: link ? theme.colors.blue : theme.colors.greyDarker,
           },
         }}>
         {children}

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/TextField/TextField.stories.tsx

@@ -37,11 +37,24 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
-      <Form>
-        <FormGroup>{Story()}</FormGroup>
-      </Form>
-    ),
+    (Story, context) => {
+      const useFormResult = useForm<FieldValues>();
+      return (
+        <Form
+          onSubmit={useFormResult.handleSubmit((data) => {
+            console.log('>>>onSubmit', data);
+          })}>
+          <FormGroup>
+            {Story({
+              args: {
+                ...context.args,
+                register: useFormResult.register,
+              },
+            })}
+          </FormGroup>
+        </Form>
+      );
+    },
   ],
 } as Meta<typeof TextField>;
 
@@ -51,9 +64,7 @@ const mockError: FieldError = {
 };
 
 export const Basic: StoryObj<typeof TextField> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <TextField {...args} register={register} />;
+  return <TextField {...args} register={args.register} />;
 };
 Basic.args = {
   placeholder: 'Field',
@@ -65,15 +76,13 @@ Basic.args = {
   helperText: 'some nice text',
 };
 
-export const WithError: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithError: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field error"
       label="Field"
       name="field2"
-      register={register}
+      register={args.register}
       validationSchema={{
         required: 'Required',
       }}
@@ -83,15 +92,13 @@ export const WithError: StoryObj<typeof TextField> = () => {
 };
 WithError.args = {};
 
-export const WithSuccess: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithSuccess: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field success"
       label="Field"
       name="field3"
-      register={register}
+      register={args.register}
       validationSchema={{
         required: 'Required',
       }}
@@ -102,15 +109,13 @@ export const WithSuccess: StoryObj<typeof TextField> = () => {
 };
 WithSuccess.args = {};
 
-export const Disabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const Disabled: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field disabled"
       label="Field"
       name="field4"
-      register={register}
+      register={args.register}
       helperText="some nice text"
       disabled={true}
       endElement={<Icon name="visible" size={16} />}
@@ -119,15 +124,13 @@ export const Disabled: StoryObj<typeof TextField> = () => {
 };
 Disabled.args = {};
 
-export const WithStatusDisabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithStatusDisabled: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field success disabled"
       label="Field"
       name="field5"
-      register={register}
+      register={args.register}
       helperText="some nice text"
       disabled={true}
       success={true}
@@ -136,23 +139,21 @@ export const WithStatusDisabled: StoryObj<typeof TextField> = () => {
 };
 WithStatusDisabled.args = {};
 
-export const WithAction: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithAction: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       type="password"
       placeholder="Field"
       label="Field"
       name="field6"
-      register={register}
+      register={args.register}
       helperText="some nice text"
       endElement={
         <button
+          type="submit"
           onClick={(event) => {
-            event.stopPropagation();
+            console.log('>>>action...');
             event.preventDefault();
-            console.log('calling action...');
           }}>
           Action
         </button>
@@ -162,24 +163,20 @@ export const WithAction: StoryObj<typeof TextField> = () => {
 };
 WithAction.args = {};
 
-export const MultilineSimple: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const MultilineSimple: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       multirow
       rows={10}
       placeholder="Textarea"
       name="textarea"
-      register={register}
+      register={args.register}
     />
   );
 };
 MultilineSimple.args = {};
 
-export const Multiline: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const Multiline: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       multirow
@@ -188,15 +185,13 @@ export const Multiline: StoryObj<typeof TextField> = () => {
       placeholder="Textarea"
       name="textarea"
       helperText="some nice text"
-      register={register}
+      register={args.register}
     />
   );
 };
 Multiline.args = {};
 
-export const MultilineDisabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const MultilineDisabled: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       multirow
@@ -205,16 +200,14 @@ export const MultilineDisabled: StoryObj<typeof TextField> = () => {
       placeholder="Textarea"
       name="textarea"
       helperText="some nice text"
-      register={register}
+      register={args.register}
     />
   );
 };
 MultilineDisabled.args = {};
 
 export const Focused: StoryObj<typeof TextField> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <TextField {...args} register={register} />;
+  return <TextField {...args} />;
 };
 Focused.args = {
   ...Basic.args,

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

@@ -492,15 +492,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

@@ -189,7 +189,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}
@@ -84,7 +84,7 @@ export const MultipleTrigger = () => {
           disabled={context.isDisabled}
           className={[
             'typeahead-input',
-            S.TypeaheadInput,
+            S.TypeaheadInput(theme),
             S.TypeaheadInputPlaceholder,
           ].join(' ')}
           {...typeaheadInputAdditionalProps}

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}
@@ -40,7 +42,7 @@ export const SingleTrigger = () => {
         value={context.firstSuggestion}
         className={[
           'typeahead-input',
-          S.TypeaheadInput,
+          S.TypeaheadInput(theme),
           S.TypeaheadInputPlaceholder,
         ].join(' ')}
         {...typeaheadInputAdditionalProps}

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,
@@ -41,12 +42,13 @@ export const useTypeahead = ({
   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) {
@@ -71,9 +73,21 @@ 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 {
+      useFormResult.resetField(name);
+    }
+  }, [error]);
 
   useEffect(() => {
     const keyedOptions: Record<
@@ -201,6 +215,8 @@ export const useTypeahead = ({
     setIsOpen(false);
     setFirstSuggestion('');
     inputRef.current?.focus();
+    setStatus('basic');
+    useFormResult.clearErrors();
     onChange && onChange(changingValue, isNewSelected);
   };
 
@@ -305,6 +321,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!')}
     />
   );