@ssa-ui-kit/core 1.0.2 → 1.0.4

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.2",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/utils": "^1.0.0",
-    "@ssa-ui-kit/hooks": "^1.0.0"
+    "@ssa-ui-kit/hooks": "^1.0.0",
+    "@ssa-ui-kit/utils": "^1.0.0"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",

package/src/components/Badge/Badge.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
 import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
 import { HeaderTitle, GridWrapper, colors, sizes, icons } from './helpers';
 
 import Badge from './index';
-import Icon from '@components/Icon';
 
 export default {
   title: 'Components/Badge',

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/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/ImageItem/ImageItem.spec.tsx

@@ -0,0 +1,54 @@
+import { screen } from '@testing-library/dom';
+import { ImageItem } from '@components/ImageItem';
+
+const image =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASGSURBVHgBfVVbUhtXEO2eGQ0SLz1AIAgYycSO7XKVo898hazA3kGSFeBkATHFAhJYAVlCvIKwgiiqpCLHNhbgBwgkIYHempl2952HBkr2VI10de/M6dOnT7cQPnMVCoWEaU5vEsIGgbNGDuRknwgaRM7fRPQcnP4f+Xz+8FMYOG6zVCpnQac9x6ENchwGJP+IZO3dGOwT7fVosP3NmEDazY2X5aNNzcACx/4WXIAwOvq3YoeoAvLih5g+8Vex+GLzswFeld8+Ixt2HKKEz9wDC5hfA3bXcswbkOTPneI/pWdjJToov3tqE/1Gtg0Og/u3xxw0TSO+URLq9wdhDEI3Hwmmojno/Jx/+GAnCFAqn2QjYBVYc2HOMVQQpfHUVIzS8ymMRaO8Zyu9zEgEWq02nFaq1Gp3gkTkQ7Lj3017SFz7+4eGnOpkb/myOCNZYCmThpmZKTw7q8HR5XuwLNvVlROJz87ArdVlrNcbUDmvkUsWPc6UMCb0PV58hy57uyzMLdtGh9kL8/R8UsChfPiOGBhZHohOmIrhVautiqDrOt5ZXwPJ4uT0nJRarl78nAbWoJ3UDLCfCKAwV6UUWSZjkEjMCriwRtM06e6XWchwRouL8/jg3joYho5So9dvjiEen2EpJ9EvqSsVkBmd3mQX0WPPMfKCeiKdToHIYtuOYjw/l0BhecBgrw+OqNlscYYpdSb1qlSqsLgwBzfqINlsaLx8pLiPbKkyuLpqBzbVdY2L2gl+d3s9MM2IWgvg5VULYtEJycrvGfQCZTVVXE8iiSwOGQyHwPUILCrgUhMGJQkm7FvtbiCFZGozQV3TR/5XZ1rW8OyoMgj3RbiR6hdNikQi+NWd2+r8vFoDcY/0hltY750Rc1VkZLcZDHzEYGs+qDAXJpLucGih17V4dl6FRrMJ7Bzo9fqezkoiMgxDegMtywpIqcZErWEwZpkBbvne54yINcaZ6Slk5jA5GcXMwjzEYjEYDIYqR9G/2+lhtV6Hy8u2PAttlkwIMgHpeL+1ixyA9vneCMmiGmvliwywLJBKxuH47QfxOvnshMxcKgHLS4tc3CYkE3F4f1Lx5pLykgrEjz3HQrmcMDrDi7Du8r2UWVCF/f/VG+h2+948ElkwGA3TzPx2dhXOzut819S5zCuNJdZYSgOtnJbP5Rr8zr47tEZT8gMzOj2rQm5thRnOqpqI0eQxcVIqmaCV5QzUahcg9fF6AKW4IpGm4++5XO7QHXalUnZo6wWZIV4dFGMJyMOOa5BmtpOqBrLHAVCyqjBwp9P15pMA6yDBWZ4GD4p8EECu4r8vnnJVfg3/Y4VlE1eYEUPZUAiw731/oucaBjZI4wAaGj+t55Z31Xt+gEcP7+1ww2x7wH7ga4UdDC2SJrRVz6B/+bZ0nUO47YNfayz/KhT/40zgF0ZOhvf9AgteUOWR54V9AzV96+766m74vbF/+oVCKcsibQHS9z6QG8Cd+SLXCF9Zcp8i+ON91vwm1tgA4UBc7ic89h8z0NeMFfcCHrNmh2zFPwc9YzefZyd+4voIMSvIE1PFRoIAAAAASUVORK5CYII=';
+
+describe('ImageItem', () => {
+  it('Should be rendered without link', () => {
+    render(<ImageItem image={image}>Name Surname</ImageItem>);
+
+    expect(
+      screen.getByText(
+        (content, element) =>
+          element?.tagName.toLowerCase() === 'div' &&
+          element?.getAttribute('data-testid') === 'image-item',
+      ),
+    ).toBeInTheDocument();
+  });
+  it('Should be rendered with the link', () => {
+    render(
+      <ImageItem
+        image={image}
+        link="/?path=/story/components-button--all-states">
+        Name Surname
+      </ImageItem>,
+    );
+
+    expect(
+      screen.getByText(
+        (content, element) =>
+          element?.tagName.toLowerCase() === 'a' &&
+          element.getAttribute('target') !== '_blank',
+      ),
+    ).toBeInTheDocument();
+  });
+  it('Should be rendered with the link, opening in the new window', () => {
+    render(
+      <ImageItem
+        image={image}
+        link="/?path=/story/components-button--all-states"
+        openLinkInNewTab>
+        Name Surname
+      </ImageItem>,
+    );
+
+    expect(
+      screen.getByText(
+        (content, element) =>
+          element?.tagName.toLowerCase() === 'a' &&
+          element.getAttribute('target') === '_blank',
+      ),
+    ).toBeInTheDocument();
+  });
+});

package/src/components/ImageItem/ImageItem.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/react';
+import { ImageItem } from './ImageItem';
+
+export default {
+  title: 'Widgets/ImageItem',
+  component: ImageItem,
+} as Meta<typeof ImageItem>;
+
+export const Default = {
+  args: {
+    children: 'Name Surname',
+    image:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASGSURBVHgBfVVbUhtXEO2eGQ0SLz1AIAgYycSO7XKVo898hazA3kGSFeBkATHFAhJYAVlCvIKwgiiqpCLHNhbgBwgkIYHempl2952HBkr2VI10de/M6dOnT7cQPnMVCoWEaU5vEsIGgbNGDuRknwgaRM7fRPQcnP4f+Xz+8FMYOG6zVCpnQac9x6ENchwGJP+IZO3dGOwT7fVosP3NmEDazY2X5aNNzcACx/4WXIAwOvq3YoeoAvLih5g+8Vex+GLzswFeld8+Ixt2HKKEz9wDC5hfA3bXcswbkOTPneI/pWdjJToov3tqE/1Gtg0Og/u3xxw0TSO+URLq9wdhDEI3Hwmmojno/Jx/+GAnCFAqn2QjYBVYc2HOMVQQpfHUVIzS8ymMRaO8Zyu9zEgEWq02nFaq1Gp3gkTkQ7Lj3017SFz7+4eGnOpkb/myOCNZYCmThpmZKTw7q8HR5XuwLNvVlROJz87ArdVlrNcbUDmvkUsWPc6UMCb0PV58hy57uyzMLdtGh9kL8/R8UsChfPiOGBhZHohOmIrhVautiqDrOt5ZXwPJ4uT0nJRarl78nAbWoJ3UDLCfCKAwV6UUWSZjkEjMCriwRtM06e6XWchwRouL8/jg3joYho5So9dvjiEen2EpJ9EvqSsVkBmd3mQX0WPPMfKCeiKdToHIYtuOYjw/l0BhecBgrw+OqNlscYYpdSb1qlSqsLgwBzfqINlsaLx8pLiPbKkyuLpqBzbVdY2L2gl+d3s9MM2IWgvg5VULYtEJycrvGfQCZTVVXE8iiSwOGQyHwPUILCrgUhMGJQkm7FvtbiCFZGozQV3TR/5XZ1rW8OyoMgj3RbiR6hdNikQi+NWd2+r8vFoDcY/0hltY750Rc1VkZLcZDHzEYGs+qDAXJpLucGih17V4dl6FRrMJ7Bzo9fqezkoiMgxDegMtywpIqcZErWEwZpkBbvne54yINcaZ6Slk5jA5GcXMwjzEYjEYDIYqR9G/2+lhtV6Hy8u2PAttlkwIMgHpeL+1ixyA9vneCMmiGmvliwywLJBKxuH47QfxOvnshMxcKgHLS4tc3CYkE3F4f1Lx5pLykgrEjz3HQrmcMDrDi7Du8r2UWVCF/f/VG+h2+948ElkwGA3TzPx2dhXOzut819S5zCuNJdZYSgOtnJbP5Rr8zr47tEZT8gMzOj2rQm5thRnOqpqI0eQxcVIqmaCV5QzUahcg9fF6AKW4IpGm4++5XO7QHXalUnZo6wWZIV4dFGMJyMOOa5BmtpOqBrLHAVCyqjBwp9P15pMA6yDBWZ4GD4p8EECu4r8vnnJVfg3/Y4VlE1eYEUPZUAiw731/oucaBjZI4wAaGj+t55Z31Xt+gEcP7+1ww2x7wH7ga4UdDC2SJrRVz6B/+bZ0nUO47YNfayz/KhT/40zgF0ZOhvf9AgteUOWR54V9AzV96+766m74vbF/+oVCKcsibQHS9z6QG8Cd+SLXCF9Zcp8i+ON91vwm1tgA4UBc7ic89h8z0NeMFfcCHrNmh2zFPwc9YzefZyd+4voIMSvIE1PFRoIAAAAASUVORK5CYII=',
+    avatarSize: 24,
+    link: '',
+    openLinkInNewTab: false,
+  },
+};
+
+export const WithLink = {
+  args: {
+    ...Default.args,
+    link: 'https://uikit.ssa.group',
+  },
+};
+
+export const WithLinkOpeningInNewTab = {
+  args: {
+    ...Default.args,
+    link: 'https://uikit.ssa.group',
+    openLinkInNewTab: true,
+  },
+};

package/src/components/ImageItem/ImageItem.tsx

@@ -0,0 +1,43 @@
+import { useTheme } from '@emotion/react';
+import Avatar from '@components/Avatar';
+import Wrapper from '@components/Wrapper';
+import { ImageItemProps } from './types';
+
+export const ImageItem = ({
+  children,
+  image,
+  avatarSize = 24,
+  link = '',
+  openLinkInNewTab = false,
+  className,
+}: ImageItemProps) => {
+  const theme = useTheme();
+  const additionalProps = link
+    ? {
+        href: link,
+        target: openLinkInNewTab ? '_blank' : undefined,
+      }
+    : {};
+  return (
+    <Wrapper
+      css={{ gap: 8, textDecoration: 'none' }}
+      as={link ? 'a' : 'div'}
+      className={className}
+      data-testid="image-item"
+      {...additionalProps}>
+      <Avatar size={avatarSize} image={image} />
+      <span
+        css={{
+          color: theme.colors.greyDarker,
+          fontSize: 14,
+          fontWeight: 500,
+          cursor: link ? 'pointer' : 'default',
+          '&:hover': {
+            color: theme.colors.blue,
+          },
+        }}>
+        {children}
+      </span>
+    </Wrapper>
+  );
+};

package/src/components/ImageItem/index.ts

@@ -0,0 +1 @@
+export * from './ImageItem';

package/src/components/ImageItem/types.ts

@@ -0,0 +1,7 @@
+export type ImageItemProps = React.PropsWithChildren<{
+  image: string;
+  avatarSize?: number;
+  link?: string;
+  className?: string;
+  openLinkInNewTab?: boolean;
+}>;

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/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);