@ssa-ui-kit/core 0.0.24-alpha → 0.0.26-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.24-alpha",
+  "version": "0.0.26-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -23,7 +23,6 @@
     "@nivo/line": "0.83.0",
     "@playwright/test": "^1.37.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/dompurify": "^3.0.5",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@types/uuid": "^9.0.3",
     "resolve-tspaths": "^0.8.16",
@@ -37,14 +36,13 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "0.25.4",
-    "dompurify": "^3.1.3",
     "dotenv": "^16.0.3",
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.2-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/AccordionGroup/AccordionContext.tsx

@@ -1,13 +1,13 @@
 import { createContext, useState, useContext } from 'react';
-import { AccordionProps, IAccordionGroupContext } from './types';
+import { AccordionProps, AccordionGroupContextProps } from './types';
 
-export const AccordionGroupContext = createContext<IAccordionGroupContext>(
-  {} as IAccordionGroupContext,
+export const AccordionGroupContext = createContext<AccordionGroupContextProps>(
+  {} as AccordionGroupContextProps,
 );
 
 export const useAccordionGroupContext = () => useContext(AccordionGroupContext);
 
-const useAccordionGroup = (): IAccordionGroupContext => {
+const useAccordionGroup = (): AccordionGroupContextProps => {
   const [openedAccordions, setOpenedAccordions] = useState<AccordionProps[]>(
     [],
   );

package/src/components/AccordionGroup/types.ts

@@ -51,7 +51,7 @@ export interface AccordionViewProps extends AccordionProps {
   contentProps?: Record<string, any>;
 }
 
-export interface IAccordionGroupContext {
+export interface AccordionGroupContextProps {
   openedAccordions: Array<AccordionProps> | [];
   stayOpen: boolean;
   setOpenedAccordions: (accordions: Array<AccordionProps>) => void;

package/src/components/Badge/helpers.ts

@@ -1,4 +1,4 @@
-import { IMapIcons } from '@components/Icon/types';
+import { MapIconsType } from '@components/Icon/types';
 import styled from '@emotion/styled';
 
 export const sizes: Array<keyof MainSizes> = ['small', 'medium', 'large'];
@@ -13,21 +13,23 @@ export const colors: Array<keyof MainColors> = [
   'yellowWarm',
 ];
 
-export const icons: Array<{ color: keyof MainColors; icon: keyof IMapIcons }> =
-  [
-    {
-      color: 'blueLight',
-      icon: 'information',
-    },
-    {
-      color: 'yellowWarm',
-      icon: 'warning',
-    },
-    {
-      color: 'pink',
-      icon: 'attention',
-    },
-  ];
+export const icons: Array<{
+  color: keyof MainColors;
+  icon: keyof MapIconsType;
+}> = [
+  {
+    color: 'blueLight',
+    icon: 'information',
+  },
+  {
+    color: 'yellowWarm',
+    icon: 'warning',
+  },
+  {
+    color: 'pink',
+    icon: 'attention',
+  },
+];
 
 export const HeaderTitle = styled.span`
   text-align: center;

package/src/components/Button/Button.spec.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import Icon from '@components/Icon';
 
 import Button from './index';
-import { IButtonProps } from './types';
+import { ButtonProps } from './types';
 import {
   primaryBtnSpecs,
   secondaryBtnSpecs,
@@ -23,7 +23,7 @@ function setup(component: JSX.Element) {
 const getElTestId = (
   elType: string,
   isDisabled?: boolean,
-  variant?: IButtonProps['variant'],
+  variant?: ButtonProps['variant'],
   isHovered?: boolean,
 ) => {
   const prefix = isDisabled
@@ -60,9 +60,9 @@ const testButton = async (spec: TestPropsType) => {
 
   const { user, getByRole, getByTestId, findByTitle } = setup(
     <Button
-      type={type as IButtonProps['type']}
-      size={size as IButtonProps['size']}
-      variant={variant as IButtonProps['variant']}
+      type={type as ButtonProps['type']}
+      size={size as ButtonProps['size']}
+      variant={variant as ButtonProps['variant']}
       text={text}
       endIcon={appendIcon}
       startIcon={prependIcon}
@@ -116,9 +116,9 @@ const testTertiaryBtnHoverState = async (spec: TestPropsType) => {
 
   const { user, getByRole, getByTestId, findByTitle } = setup(
     <Button
-      type={type as IButtonProps['type']}
-      size={size as IButtonProps['size']}
-      variant={variant as IButtonProps['variant']}
+      type={type as ButtonProps['type']}
+      size={size as ButtonProps['size']}
+      variant={variant as ButtonProps['variant']}
       text={text}
       endIcon={appendIcon}
       startIcon={prependIcon}

package/src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ import {
   GreyLightButtonText,
   DisabledButtonText,
 } from './ButtonText';
-import { IButtonProps, IButtonVariants } from './types';
+import { ButtonProps, ButtonVariants } from './types';
 import {
   large,
   medium,
@@ -31,7 +31,7 @@ const mapSizes: MainSizes = {
   large,
 };
 
-const mapVariants: IButtonVariants = {
+const mapVariants: ButtonVariants = {
   primary,
   secondary,
   tertiary,
@@ -39,7 +39,7 @@ const mapVariants: IButtonVariants = {
   attention,
 };
 
-export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(
     {
       block = false,

package/src/components/Button/ButtonText.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from '@emotion/react';
 
-import { IColoredButtonTextProps, IButtonTextProps } from './types';
+import { ColoredButtonTextProps, ButtonTextProps } from './types';
 
-export const ButtonText = ({ text, className, testId }: IButtonTextProps) => {
+export const ButtonText = ({ text, className, testId }: ButtonTextProps) => {
   return (
     <span className={className} data-testid={testId}>
       {text}
@@ -10,7 +10,7 @@ export const ButtonText = ({ text, className, testId }: IButtonTextProps) => {
   );
 };
 
-export const WhiteButtonText = ({ text }: IColoredButtonTextProps) => {
+export const WhiteButtonText = ({ text }: ColoredButtonTextProps) => {
   const theme = useTheme();
 
   return (
@@ -24,7 +24,7 @@ export const WhiteButtonText = ({ text }: IColoredButtonTextProps) => {
   );
 };
 
-export const GreyButtonText = ({ text }: IColoredButtonTextProps) => {
+export const GreyButtonText = ({ text }: ColoredButtonTextProps) => {
   const theme = useTheme();
 
   return (
@@ -38,7 +38,7 @@ export const GreyButtonText = ({ text }: IColoredButtonTextProps) => {
   );
 };
 
-export const GreyLightButtonText = ({ text }: IColoredButtonTextProps) => {
+export const GreyLightButtonText = ({ text }: ColoredButtonTextProps) => {
   const theme = useTheme();
 
   return (
@@ -52,7 +52,7 @@ export const GreyLightButtonText = ({ text }: IColoredButtonTextProps) => {
   );
 };
 
-export const DisabledButtonText = ({ text }: IColoredButtonTextProps) => {
+export const DisabledButtonText = ({ text }: ColoredButtonTextProps) => {
   const theme = useTheme();
 
   return (

package/src/components/Button/fixtures.ts

@@ -1,8 +1,8 @@
 import Icon from '@components/Icon';
-import { IButtonProps } from './types';
+import { ButtonProps } from './types';
 
 export type TestPropsType = Omit<
-  IButtonProps,
+  ButtonProps,
   'isDisabled' | 'startIcon' | 'endIcon'
 > & {
   disabled?: boolean;
@@ -125,41 +125,41 @@ const baseSpecs: TestPropsType[] = [
 export const primaryBtnSpecs = [
   ...baseSpecs,
   ...baseSpecs.map((s) => ({ ...s, size: undefined })),
-  ...baseSpecs.map((s) => ({ ...s, size: 'medium' as IButtonProps['size'] })),
-  ...baseSpecs.map((s) => ({ ...s, size: 'large' as IButtonProps['size'] })),
+  ...baseSpecs.map((s) => ({ ...s, size: 'medium' as ButtonProps['size'] })),
+  ...baseSpecs.map((s) => ({ ...s, size: 'large' as ButtonProps['size'] })),
   ...baseSpecs.map((s) => ({
     ...s,
-    size: 'small' as IButtonProps['size'],
-    type: 'submit' as IButtonProps['type'],
+    size: 'small' as ButtonProps['size'],
+    type: 'submit' as ButtonProps['type'],
   })),
   ...baseSpecs.map((s) => ({
     ...s,
-    size: 'medium' as IButtonProps['size'],
-    type: 'submit' as IButtonProps['type'],
+    size: 'medium' as ButtonProps['size'],
+    type: 'submit' as ButtonProps['type'],
   })),
   ...baseSpecs.map((s) => ({
     ...s,
-    size: 'large' as IButtonProps['size'],
-    type: 'submit' as IButtonProps['type'],
+    size: 'large' as ButtonProps['size'],
+    type: 'submit' as ButtonProps['type'],
   })),
 ];
 
 export const secondaryBtnSpecs = primaryBtnSpecs.map((s) => ({
   ...s,
-  variant: 'secondary' as IButtonProps['variant'],
+  variant: 'secondary' as ButtonProps['variant'],
 }));
 
 export const tertiaryBtnSpecs = primaryBtnSpecs.map((s) => ({
   ...s,
-  variant: 'tertiary' as IButtonProps['variant'],
+  variant: 'tertiary' as ButtonProps['variant'],
 }));
 
 export const infoBtnSpecs = primaryBtnSpecs.map((s) => ({
   ...s,
-  variant: 'info' as IButtonProps['variant'],
+  variant: 'info' as ButtonProps['variant'],
 }));
 
 export const attentionBtnSpecs = primaryBtnSpecs.map((s) => ({
   ...s,
-  variant: 'attention' as IButtonProps['variant'],
+  variant: 'attention' as ButtonProps['variant'],
 }));

package/src/components/Button/helpers.ts

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { IButtonVariants } from './types';
+import { ButtonVariants } from './types';
 
 export const sizes: Array<keyof MainSizes> = ['small', 'medium', 'large'];
-export const variants: Array<keyof IButtonVariants> = [
+export const variants: Array<keyof ButtonVariants> = [
   'primary',
   'info',
   'secondary',

package/src/components/Button/types.ts

@@ -15,13 +15,13 @@ type ButtonAriaProps = Pick<
   | 'aria-current'
 >;
 
-export interface IButtonProps extends ButtonAriaProps {
+export interface ButtonProps extends ButtonAriaProps {
   block?: boolean;
   size?: keyof MainSizes;
   text?: string;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
-  variant?: keyof IButtonVariants | 'custom';
+  variant?: keyof ButtonVariants | 'custom';
   type?: 'button' | 'reset' | 'submit';
   isDisabled?: boolean;
   className?: string;
@@ -29,7 +29,7 @@ export interface IButtonProps extends ButtonAriaProps {
   children?: React.ReactNode;
 }
 
-export interface IButtonVariants {
+export interface ButtonVariants {
   primary: (theme: Theme) => SerializedStyles;
   info: (theme: Theme) => SerializedStyles;
   secondary: (theme: Theme) => SerializedStyles;
@@ -37,12 +37,12 @@ export interface IButtonVariants {
   attention: (theme: Theme) => SerializedStyles;
 }
 
-export type IButtonTextProps = {
+export type ButtonTextProps = {
   text: string;
   className?: string;
   testId?: string;
 };
 
-export type IColoredButtonTextProps = Required<Pick<IButtonProps, 'size'>> & {
+export type ColoredButtonTextProps = Required<Pick<ButtonProps, 'size'>> & {
   text: string;
 };

package/src/components/Checkbox/Checkbox.spec.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form';
 import Checkbox from '@components/Checkbox';
 import FormCheckbox from '@components/FormCheckbox';
 
-import { ICheckboxProps } from './types';
+import { CheckboxProps } from './types';
 import { getByRole } from '@testing-library/dom';
 
 const checkLabel = () => {
@@ -50,7 +50,7 @@ const checkToggle = async (
   checkIcon(labelEl, newIsChecked);
 };
 
-function setup(props: Omit<ICheckboxProps, 'onChange'> = {}) {
+function setup(props: Omit<CheckboxProps, 'onChange'> = {}) {
   const mockOnChange = jest.fn();
   return {
     user: userEvent.setup(),

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import type { Meta } from '@storybook/react';
 import Typography from '@components/Typography';
-import Checkbox, { ICheckboxProps } from './index';
+import Checkbox, { CheckboxProps } from './index';
 
 export default {
   title: 'Components/Checkbox',
@@ -27,7 +27,7 @@ export default {
 
 export const Default = {};
 
-const checkboxPropsVariants: Array<ICheckboxProps & { caption?: string }> = [
+const checkboxPropsVariants: Array<CheckboxProps & { caption?: string }> = [
   {
     id: 'checked',
     caption: 'Checked by default',

package/src/components/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import { CheckboxBase } from './CheckboxBase';
 import Icon from '@components/Icon';
 
-import { ICheckboxProps } from './types';
+import { CheckboxProps } from './types';
 
 const Checkbox = ({
   text,
@@ -18,7 +18,7 @@ const Checkbox = ({
   ref,
   register,
   ...rest
-}: ICheckboxProps) => {
+}: CheckboxProps) => {
   const [isChecked, setIsChecked] = useState(Boolean(initialState));
   const autoGenId = useId();
   const theme = useTheme();

package/src/components/Checkbox/CheckboxBase.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 import Label from '@components/Label';
 import { checkboxStyles } from './styles';
-import { ICheckboxProps } from './types';
+import { CheckboxProps } from './types';
 
-export const CheckboxBase = styled(Label)<Pick<ICheckboxProps, 'color'>>`
+export const CheckboxBase = styled(Label)<Pick<CheckboxProps, 'color'>>`
   position: relative;
   display: inline-flex;
   flex-grow: 0;

package/src/components/Checkbox/types.ts

@@ -6,7 +6,7 @@ import {
 } from 'react-hook-form';
 import { MutableRefObject } from 'react';
 
-export interface ICheckboxProps
+export interface CheckboxProps
   extends Partial<Pick<UseFormReturn, 'register'>> {
   text?: string;
   id?: string;
@@ -24,7 +24,7 @@ export interface ICheckboxProps
 }
 
 export type IFormCheckboxProps<T extends FieldValues> = Omit<
-  ICheckboxProps,
+  CheckboxProps,
   'onChange' | 'name'
 > & {
   name: FieldPath<T>;

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -5,10 +5,10 @@ import { css } from '@emotion/react';
 import DropdownOption from '@components/DropdownOption';
 
 import Dropdown from './Dropdown';
-import { IDropdownProps } from './types';
-import { IDropdownOption } from '../..';
+import { DropdownProps } from './types';
+import { DropdownOptionProps } from '../..';
 
-type Args = IDropdownProps<IDropdownOption>;
+type Args = DropdownProps<DropdownOptionProps>;
 
 const items = [
   { id: 1, value: 'One lorem ipsum', subText: 'subtext' },

package/src/components/Dropdown/Dropdown.tsx

@@ -7,9 +7,9 @@ import DropdownToggle from '@components/DropdownToggle';
 import DropdownArrow from '@components/DropdownArrow';
 import DropdownOptions from '@components/DropdownOptions';
 import DropdownContext from '@components/Dropdown/Dropdown.context';
-import { IDropdownOption } from '@components/DropdownOptions/types';
+import { DropdownOptionProps } from '@components/DropdownOptions/types';
 
-import { DropdownContextType, IDropdownProps } from './types';
+import { DropdownContextType, DropdownProps } from './types';
 
 /**
  * The structure of the component:
@@ -28,14 +28,14 @@ const DropdownBase = styled.div`
   position: relative;
 `;
 
-const Dropdown = <T extends IDropdownOption>({
+const Dropdown = <T extends DropdownOptionProps>({
   selectedItem,
   isDisabled,
   isOpen: isInitOpen,
   children,
   onChange: handleChange,
   className,
-}: IDropdownProps<T>) => {
+}: DropdownProps<T>) => {
   const theme = useTheme();
   const dropdownRef = useRef<HTMLDivElement>(null);
 

package/src/components/Dropdown/types.ts

@@ -1,7 +1,8 @@
-import { IDropdownOption } from '@components/DropdownOptions';
+import { DropdownOptionProps } from '@components/DropdownOptions';
 import { CommonProps } from '@global-types/emotion';
 
-export interface IDropdownProps<P extends IDropdownOption> extends CommonProps {
+export interface DropdownProps<P extends DropdownOptionProps>
+  extends CommonProps {
   selectedItem?: P;
   onChange?: (item: P) => void;
   isDisabled?: boolean;
@@ -13,5 +14,5 @@ export interface IDropdownProps<P extends IDropdownOption> extends CommonProps {
 
 export interface DropdownContextType {
   onChange: (item?: string) => void;
-  activeItem?: IDropdownOption | null;
+  activeItem?: DropdownOptionProps | null;
 }

package/src/components/DropdownOption/DropdownOption.tsx

@@ -3,7 +3,7 @@ import { Theme, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { CommonProps } from '@global-types/emotion';
 
-interface IDropdownItemProps extends CommonProps {
+interface DropdownItemProps extends CommonProps {
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   isActive?: boolean;
   isMultiple?: boolean;
@@ -31,7 +31,7 @@ const multipleStyles = ({ theme, isDisabled }: MultipleStylesProps) => {
   `;
 };
 
-const DropdownOption = styled.li<IDropdownItemProps>`
+const DropdownOption = styled.li<DropdownItemProps>`
   overflow: hidden;
 
   height: 34px;

package/src/components/DropdownOptions/DropdownOptions.tsx

@@ -5,7 +5,7 @@ import { css } from '@emotion/react';
 import { useDropdownContext } from '@components/Dropdown/Dropdown.context';
 import DropdownOption from '@components/DropdownOption';
 
-import { IDropdownItemsListProps } from './types';
+import { DropdownItemsListProps } from './types';
 
 const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
   position: absolute;
@@ -54,7 +54,7 @@ const DropdownOptions = ({
   ariaLabelledby,
   id,
   children,
-}: IDropdownItemsListProps) => {
+}: DropdownItemsListProps) => {
   const { onChange, activeItem } = useDropdownContext();
 
   const childrenArray = React.Children.toArray(children).filter(Boolean);

package/src/components/DropdownOptions/index.ts

@@ -1,2 +1,2 @@
 export { default } from './DropdownOptions';
-export type { IDropdownOption } from './types';
+export type { DropdownOptionProps } from './types';

package/src/components/DropdownOptions/types.ts

@@ -1,8 +1,8 @@
 import { CommonProps } from '@global-types/emotion';
 
-export type IDropdownOption = Record<string, string | number>;
+export type DropdownOptionProps = Record<string, string | number>;
 
-export interface IDropdownItemsListProps extends CommonProps {
+export interface DropdownItemsListProps extends CommonProps {
   ariaLabelledby?: string;
   id?: string;
   children?: React.ReactNode;

package/src/components/DropdownToggle/DropdownToggle.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { focusOutline } from '@styles/safari-focus-outline';
-import { IDropdownToggleProps, MultipleStylesProps } from './types';
+import { DropdownToggleProps, MultipleStylesProps } from './types';
 
 const multipleStyles = ({ theme, selectedCount = 0 }: MultipleStylesProps) => {
   let borderColor = theme.colors.greyDropdownMain;
@@ -43,7 +43,7 @@ const multipleStyles = ({ theme, selectedCount = 0 }: MultipleStylesProps) => {
 
 export const DropdownToggleBase = styled.button<
   Pick<
-    IDropdownToggleProps,
+    DropdownToggleProps,
     'colors' | 'isOpen' | 'disabled' | 'isMultiple' | 'selectedCount'
   >
 >`
@@ -121,7 +121,7 @@ const DropdownToggle = ({
   ariaControls,
   colors,
   className,
-}: IDropdownToggleProps) => (
+}: DropdownToggleProps) => (
   <DropdownToggleBase
     className={className}
     colors={colors}

package/src/components/DropdownToggle/types.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Theme } from '@emotion/react';
 import { CommonProps } from '@global-types/emotion';
 
-export interface IDropdownToggleProps extends CommonProps {
+export interface DropdownToggleProps extends CommonProps {
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
   onFocus: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
   isOpen: boolean;

package/src/components/FormCheckbox/FormCheckbox.tsx

@@ -3,7 +3,7 @@ import type { FieldValues } from 'react-hook-form';
 
 import Checkbox from '@components/Checkbox';
 
-import { IFormCheckboxProps } from './types';
+import { FormCheckboxProps } from './types';
 import { ChangeEvent } from 'react';
 
 const FormCheckbox = <T extends FieldValues>({
@@ -11,7 +11,7 @@ const FormCheckbox = <T extends FieldValues>({
   name,
   isRequired = false,
   ...props
-}: IFormCheckboxProps<T>) => {
+}: FormCheckboxProps<T>) => {
   const { field } = useController({
     control,
     name,

package/src/components/FormCheckbox/types.ts

@@ -1,8 +1,8 @@
 import { Control, FieldPath, FieldValues } from 'react-hook-form';
-import { ICheckboxProps } from '../..';
+import { CheckboxProps } from '../..';
 
-export type IFormCheckboxProps<T extends FieldValues> = Omit<
-  ICheckboxProps,
+export type FormCheckboxProps<T extends FieldValues> = Omit<
+  CheckboxProps,
   'onChange' | 'name'
 > & {
   name: FieldPath<T>;

package/src/components/FormHelperText/FormHelperText.tsx

@@ -1,4 +1,4 @@
-import { IFormHelperText } from './types';
+import { FormHelperTextProps } from './types';
 import { FormHelperTextBase } from './FormHelperTextBase';
 
 const FormHelperText = ({
@@ -6,7 +6,7 @@ const FormHelperText = ({
   status,
   disabled,
   children,
-}: IFormHelperText) => {
+}: FormHelperTextProps) => {
   status = disabled ? 'basic' : status;
   return (
     <FormHelperTextBase role={role} status={status}>

package/src/components/FormHelperText/types.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from '@global-types/emotion';
 
-export interface IFormHelperText extends CommonProps {
+export interface FormHelperTextProps extends CommonProps {
   children: React.ReactNode;
   role?: string;
   status?: string;