@ssa-ui-kit/core 1.0.1 → 1.0.3

package/dist/types/emotion.d.ts

@@ -12,6 +12,7 @@ type Colors = MakeColors<[
     'white30',
     'dark',
     'greyLighter',
+    'greyLighter40',
     'greySelectedMenuItem',
     'greyFocused',
     'greyFocused40',
@@ -20,6 +21,7 @@ type Colors = MakeColors<[
     'grey40',
     'greyShadow24',
     'greyDarker',
+    'greyDarker40',
     'greyDarker60',
     'greyDarker80',
     'greyDarker14',
@@ -105,7 +107,8 @@ type Colors = MakeColors<[
     'blueButtonHoverGradientFrom',
     'blueButtonHoverGradientTo',
     'blueButtonActive',
-    'blueRoyal'
+    'blueRoyal',
+    'blueRoyal12'
 ]>;
 export type ColorsKeys = keyof Colors;
 type MediaQueryString = `@media${string}`;

package/package.json

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

package/src/components/Button/Button.tsx

@@ -47,6 +47,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       text,
       startIcon,
       endIcon,
+      startIconClassName,
+      endIconClassName,
       variant = 'primary',
       type = 'button',
       className,
@@ -89,7 +91,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onClick={onClick}
         {...ariaProps}>
         {startIcon ? (
-          <span style={noMargin} css={[iconWrapperRight]}>
+          <span
+            style={noMargin}
+            css={[iconWrapperRight]}
+            className={startIconClassName}>
             {startIcon}
           </span>
         ) : null}
@@ -107,7 +112,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           )
         ) : null}
         {endIcon ? (
-          <span style={noMargin} css={iconWrapperLeft}>
+          <span
+            style={noMargin}
+            css={[iconWrapperLeft]}
+            className={endIconClassName}>
             {endIcon}
           </span>
         ) : null}

package/src/components/Button/types.ts

@@ -21,6 +21,8 @@ export interface ButtonProps extends ButtonAriaProps {
   text?: string;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
+  startIconClassName?: string;
+  endIconClassName?: string;
   variant?: keyof ButtonVariants | 'custom';
   type?: 'button' | 'reset' | 'submit';
   isDisabled?: boolean;

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.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 { Meta, StoryObj } from '@storybook/react';
+import { Title, Description, Subtitle, Stories } from '@storybook/addon-docs';
 
 import { DecoratorFunction } from '@storybook/types';
 import { CollapsibleNavBar } from '../CollapsibleNavBar';
@@ -35,11 +35,17 @@ export default {
   parameters: {
     layout: 'fullscreen',
     docs: {
+      source: {
+        type: 'code',
+      },
       page: () => (
         <Fragment>
           <Title />
+          <Subtitle />
           <Description />
-          <Source code={`<CollapsibleNavBar />`} />
+          <div css={{ height: 300 }}>
+            <Stories />
+          </div>
         </Fragment>
       ),
     },
@@ -54,26 +60,42 @@ export default {
   },
 } as Meta<typeof CollapsibleNavBar>;
 
-export const Default = {};
+export const Default: StoryObj<typeof CollapsibleNavBar> = () => {
+  return (
+    <CollapsibleNavBar
+      items={ITEMS}
+      renderLogo={<Logo />}
+      onChange={(isChecked) => {
+        console.log('>>>onChange', isChecked);
+      }}
+    />
+  );
+};
 
-export const WithCustomIcon = {
-  title: 'With Custom Icon',
-  component: CollapsibleNavBar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    items: [
-      ...ITEMS,
-      {
-        path: 'custom',
-        CustomIcon,
-        title: 'Item with custom icon',
-      },
-    ],
-    renderLogo: <Logo />,
-    onChange: (isChecked) => {
-      console.log('>>>onChange', isChecked);
-    },
-  },
-} as Meta<typeof CollapsibleNavBar>;
+Default.args = {};
+
+export const WithCustomIcon: Meta<typeof CollapsibleNavBar> = () => {
+  return (
+    <CollapsibleNavBar
+      items={[
+        ...ITEMS,
+        {
+          path: 'custom',
+          CustomIcon,
+          title: 'Item with custom icon',
+          iconSize: 22,
+          iconName: 'archive',
+        },
+      ]}
+      renderLogo={<Logo />}
+      onChange={(isChecked) => {
+        console.log('>>>onChange', isChecked);
+      }}
+    />
+  );
+};
+
+WithCustomIcon.title = 'With Custom Icon';
+WithCustomIcon.parameters = {
+  layout: 'fullscreen',
+};

package/src/components/CollapsibleNavBar/stories/Layout.tsx

@@ -36,7 +36,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       }}>
       {children}
       <Main>
-        {new Array(100).fill(1).map((_, index) => (
+        {new Array(30).fill(1).map((_, index) => (
           <NotificationCard
             key={index}
             title="CyberVeinToken is Now Available"

package/src/components/Filters/Filters.tsx

@@ -74,7 +74,7 @@ export const Filters = ({
         <FilterBlockWrapper>
           <FiltersBlock />
         </FilterBlockWrapper>
-        <Wrapper css={{ width: 110 }}>
+        <Wrapper css={{ width: 110, zIndex: 1 }}>
           <TableFilters
             {...useTableDataResult}
             checkboxData={hiddenCheckboxData}

package/src/components/FormHelperText/FormHelperText.tsx

@@ -6,10 +6,11 @@ const FormHelperText = ({
   status,
   disabled,
   children,
+  ...rest
 }: FormHelperTextProps) => {
   status = disabled ? 'basic' : status;
   return (
-    <FormHelperTextBase role={role} status={status}>
+    <FormHelperTextBase role={role} status={status} {...rest}>
       {children}
     </FormHelperTextBase>
   );

package/src/components/Input/Input.spec.tsx

@@ -15,14 +15,12 @@ describe('Inputs', () => {
     expect(input).toBeInTheDocument();
   });
 
-  it('Trow error when without register', () => {
-    jest.spyOn(console, 'error').mockImplementation();
-
-    expect(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      render(<Input placeholder="Field" name="field" disabled={true} />),
-    ).toThrow('Input component must be used within a Form component');
+  it('Throw warning when without register', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    render(<Input placeholder="Field" name="field" disabled={true} />);
+    expect(warnSpy).toBeCalledWith(
+      'Input component must be used within a Form component',
+    );
   });
 
   it('Render input disabled', () => {

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 import { InputBase } from './InputBase';
 import { InputGroup } from './InputGroup';
@@ -25,21 +25,27 @@ const InputInner = (
     startElement,
     endElement,
     className,
+    wrapperClassName,
     inputProps = {},
     register,
     onKeyUp,
   }: InputProps,
   inputRef?: React.ForwardedRef<HTMLInputElement | null>,
 ) => {
-  if (!register) {
-    throw new Error('Input component must be used within a Form component');
-  }
+  useEffect(() => {
+    if (!register) {
+      console.warn('Input component must be used within a Form component');
+    }
+  }, []);
 
   const showStatusIcon = () => !disabled && !endElement;
 
-  const registerResult = register(name, validationSchema);
+  const registerResult = register?.(name, validationSchema);
   return (
-    <InputGroup css={[mapColors[status]]} disabled={disabled}>
+    <InputGroup
+      css={[mapColors[status]]}
+      className={wrapperClassName}
+      disabled={disabled}>
       {startElement ? <div css={S.startElement}>{startElement}</div> : null}
       <InputBase
         type={type}
@@ -53,8 +59,8 @@ const InputInner = (
         className={className}
         onKeyUp={onKeyUp}
         {...inputProps}
-        {...register(name, validationSchema)}
-        ref={useMergeRefs([registerResult.ref, inputRef])}
+        {...register?.(name, validationSchema)}
+        ref={useMergeRefs([registerResult?.ref, inputRef])}
       />
 
       {status === 'error' && showStatusIcon() ? <InputStatusError /> : null}

package/src/components/Input/types.ts

@@ -16,6 +16,7 @@ export interface InputProps
   validationSchema?: Record<string, unknown>;
   disabled?: boolean;
   className?: string;
+  wrapperClassName?: string;
   as?: React.ElementType;
   startElement?: React.ReactElement;
   endElement?: React.ReactElement;

package/src/components/Label/Label.tsx

@@ -5,11 +5,13 @@ const Label = ({
   children,
   htmlFor,
   className,
+  isDisabled,
   onMouseEnter,
   onMouseLeave,
 }: LabelProps) => (
   <LabelBase
     htmlFor={htmlFor}
+    isDisabled={isDisabled}
     className={className}
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}>

package/src/components/Label/LabelBase.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const LabelBase = styled.label`
+export const LabelBase = styled.label<{ isDisabled?: boolean }>`
   display: inline-block;
 
   flex: 1;
@@ -8,7 +8,8 @@ export const LabelBase = styled.label`
   font-size: 1rem;
   line-height: 22px;
 
-  color: ${({ theme }) => theme.colors.greyDarker};
+  color: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.colors.grey : theme.colors.greyDarker};
 
   margin: 0 0 6px 4px;
 `;

package/src/components/Label/types.ts

@@ -4,6 +4,7 @@ import { CommonProps } from '@global-types/emotion';
 export interface LabelProps extends CommonProps {
   htmlFor?: string;
   children: React.ReactNode;
+  isDisabled?: boolean;
   onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
   onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
 }

package/src/components/MultipleDropdownOptions/MultipleDropdownOptions.tsx

@@ -23,7 +23,7 @@ const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
   overflow-x: hidden;
   overflow-y: auto;
 
-  z-index: 2;
+  z-index: 1;
 
   filter: ${({ theme }) =>
     `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};

package/src/components/ResponsiveImage/ResponsiveImage.stories.tsx

@@ -21,10 +21,12 @@ export const Default: StoryObj<typeof ResponsiveImage> = () => {
         tag
       </Typography>
       <ResponsiveImage
-        srcSet="https://placehold.co/64x64 64w, https://placehold.co/48x48 48w"
-        sizes="(min-width: 1440px) 64px, 48px"
-        src="https://placehold.co/48x48"
-        alt="Steps"
+        srcSet={`
+          https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FUI_KIT_Medium_90_51.png?alt=media&token=6761e4f3-b985-4322-8824-0c9668a2e2d9 90w, 
+          https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FUI_KIT_Small_80_49.png?alt=media&token=910e7a01-8127-4e2e-88e6-1b85805d7beb 80w`}
+        sizes="(max-width: 900px) 80px, (min-width: 900px) 90px"
+        src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FUI_KIT_Small_80_49.png?alt=media&token=910e7a01-8127-4e2e-88e6-1b85805d7beb"
+        alt="SSA UI Kit"
       />
     </div>
   );

package/src/components/TableFilters/styles.ts

@@ -6,6 +6,7 @@ export const tableFilterPopoverContentStyles = (theme: Theme) => css`
   padding: 20px 20px 14px 18px;
   width: 340px;
   background: ${theme.colors.white};
+  z-index: 1;
 `;
 
 export const tableFilterDividerStyles = (theme: Theme) => css`

package/src/components/TextField/TextField.stories.tsx

@@ -148,7 +148,14 @@ export const WithAction: StoryObj<typeof TextField> = () => {
       register={register}
       helperText="some nice text"
       endElement={
-        <button onClick={() => console.log('calling action...')}>Action</button>
+        <button
+          onClick={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            console.log('calling action...');
+          }}>
+          Action
+        </button>
       }
     />
   );

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { UseTypeaheadResult } from './useTypeahead';
+
+export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
+  optionsWithKey: {},
+  isMultiple: false,
+  selectedItems: [],
+  typeaheadId: '',
+  firstSuggestion: '',
+  inputRef: { current: null },
+  triggerRef: { current: null },
+  isOpen: false,
+  className: undefined,
+  startIcon: null,
+  endIcon: null,
+  startIconClassName: undefined,
+  endIconClassName: undefined,
+  name: '',
+  inputName: '',
+  inputValue: '',
+  validationSchema: {},
+  status: 'basic',
+  isDisabled: false,
+  options: [],
+  placeholder: '',
+  setValue: () => {
+    /* no-op */
+  },
+  register: () => {
+    return {} as any;
+  },
+  handleChange: () => {
+    /* no-op */
+  },
+  handleClearAll: () => {
+    /* no-op */
+  },
+  handleInputClick: () => {
+    /* no-op */
+  },
+  handleInputKeyDown: () => {
+    /* no-op */
+  },
+  handleInputChange: () => {
+    /* no-op */
+  },
+  handleOpenChange: () => {
+    /* no-op */
+  },
+  handleRemoveSelectedClick: () => () => {
+    /* no-op */
+  },
+  handleSelectedClick: () => {
+    /* no-op */
+  },
+});
+
+export const useTypeaheadContext = (): UseTypeaheadResult =>
+  React.useContext(TypeaheadContext);