@ssa-ui-kit/core 0.0.25-alpha → 0.0.27-alpha

package/src/components/FormRadioGroup/FormRadioGroup.tsx

@@ -3,7 +3,7 @@ import type { FieldValues } from 'react-hook-form';
 
 import RadioGroup from '@components/RadioGroup';
 
-import { IFormRadioGroupProps } from './types';
+import { FormRadioGroupProps } from './types';
 import { ChangeEvent } from 'react';
 
 const FormRadioGroup = <T extends FieldValues>({
@@ -12,7 +12,7 @@ const FormRadioGroup = <T extends FieldValues>({
   control,
   children,
   ...props
-}: IFormRadioGroupProps<T>) => {
+}: FormRadioGroupProps<T>) => {
   const { field } = useController<T>({
     control,
     name,

package/src/components/FormRadioGroup/types.ts

@@ -1,10 +1,10 @@
 import { FieldPath, Control, FieldValues } from 'react-hook-form';
 
-import { IRadioGroupProps } from '@components/RadioGroup/types';
+import { RadioGroupProps } from '@components/RadioGroup/types';
 import { CommonProps } from '@global-types/emotion';
 
-export type IFormRadioGroupProps<T extends FieldValues> = Omit<
-  IRadioGroupProps,
+export type FormRadioGroupProps<T extends FieldValues> = Omit<
+  RadioGroupProps,
   'name' | 'onChange'
 > & {
   name: FieldPath<T>;

package/src/components/Icon/Icons.spec.tsx

@@ -1,11 +1,11 @@
 import { css, SerializedStyles } from '@emotion/react';
 import Icon from '@components/Icon';
 import { iconsList } from '@components/Icon';
+import { MapIconsType } from './types';
 import { screen } from '../../../customTest';
-import { IMapIcons } from './types';
 
 const renderIcon = async (
-  icon: keyof IMapIcons,
+  icon: keyof MapIconsType,
   size?: number,
   css?: SerializedStyles,
 ) => {
@@ -42,14 +42,14 @@ const checkFillOrStrokeAttrs = (
 describe('Icons', () => {
   iconsList.forEach((iconName) => {
     it(`Renders "${iconName}" icon with attributes`, async () => {
-      const [, path] = await renderIcon(iconName as keyof IMapIcons);
+      const [, path] = await renderIcon(iconName as keyof MapIconsType);
 
       checkFillOrStrokeAttrs(path, iconName);
     });
 
     it(`Renders "${iconName}" icon with custom styles`, async () => {
       const [icon] = await renderIcon(
-        iconName as keyof IMapIcons,
+        iconName as keyof MapIconsType,
         undefined,
         css`
           background-color: magenta;
@@ -62,7 +62,7 @@ describe('Icons', () => {
     });
 
     it(`Renders "${iconName}" icon with the default size`, async () => {
-      const [icon] = await renderIcon(iconName as keyof IMapIcons);
+      const [icon] = await renderIcon(iconName as keyof MapIconsType);
 
       expect(icon).toBeInTheDocument();
       const width = (icon as unknown as SVGElement).getAttribute('width');
@@ -74,7 +74,7 @@ describe('Icons', () => {
     });
 
     it(`Renders "${iconName}" icon with a custom size`, async () => {
-      const [icon] = await renderIcon(iconName as keyof IMapIcons, 12);
+      const [icon] = await renderIcon(iconName as keyof MapIconsType, 12);
 
       expect(icon).toBeInTheDocument();
 

package/src/components/Icon/icons/index.tsx

@@ -1,4 +1,4 @@
-import { IconProps, IMapIcons } from '../types';
+import { IconProps, MapIconsType } from '../types';
 
 import { Calendar } from './Calendar';
 import { Diet } from './Diet';
@@ -110,10 +110,10 @@ const componentsList = [
   Unlock,
 ];
 
-const iconsMap: IMapIcons = iconsList.reduce((res, name, index) => {
+const iconsMap: MapIconsType = iconsList.reduce((res, name, index) => {
   res[name] = componentsList[index];
   return res;
-}, {} as IMapIcons);
+}, {} as MapIconsType);
 
 const IconMapComponent = ({ name, color, ...props }: IconProps) => {
   const Component = iconsMap[name];

package/src/components/Icon/types.ts

@@ -6,9 +6,9 @@ export interface SVGProps extends React.SVGProps<SVGSVGElement> {
 }
 
 export interface IconProps extends Omit<SVGProps, 'fill'> {
-  name: keyof IMapIcons;
+  name: keyof MapIconsType;
 }
 
-export type IMapIcons = {
+export type MapIconsType = {
   [key in (typeof iconsList)[number]]: React.ElementType;
 };

package/src/components/LargeTab/LargeTab.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 
-import { ILargeTabProps } from '@components/TabBar/types';
+import { LargeTabProps } from '@components/TabBar/types';
 
 import { LargeTabBase } from './LargeTabBase';
 
@@ -13,7 +13,7 @@ const LargeTab = ({
   onClick,
   ariaControls,
   tabId,
-}: ILargeTabProps) => {
+}: LargeTabProps) => {
   const theme = useTheme();
   return (
     <LargeTabBase

package/src/components/LargeTab/LargeTabBase.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { ILargeTabProps } from '@components/TabBar/types';
+import { LargeTabProps } from '@components/TabBar/types';
 
-export const LargeTabBase = styled.button<Pick<ILargeTabProps, 'isActive'>>`
+export const LargeTabBase = styled.button<Pick<LargeTabProps, 'isActive'>>`
   width: 100px;
   max-width: 100px;
   height: 60px;

package/src/components/MultipleDropdown/MultipleDropdown.context.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { DropdownContextType } from './types';
-import { IDropdownOption } from '@components/MultipleDropdownOptions';
+import { DropdownOptionType } from '@components/MultipleDropdownOptions';
 
 const MultipleDropdownContext = React.createContext<
-  DropdownContextType<IDropdownOption>
+  DropdownContextType<DropdownOptionType>
 >({
   allItems: {},
   isMultiple: false,
@@ -13,7 +13,7 @@ const MultipleDropdownContext = React.createContext<
   },
 });
 
-export function useMultipleDropdownContext(): DropdownContextType<IDropdownOption> {
+export function useMultipleDropdownContext(): DropdownContextType<DropdownOptionType> {
   return React.useContext(MultipleDropdownContext);
 }
 

package/src/components/MultipleDropdown/MultipleDropdown.tsx

@@ -10,9 +10,9 @@ import DropdownToggle from '@components/DropdownToggle';
 import DropdownArrow from '@components/DropdownArrow';
 import MultipleDropdownOptions from '@components/MultipleDropdownOptions';
 import MultipleDropdownContext from '@components/MultipleDropdown/MultipleDropdown.context';
-import { IDropdownOption } from '@components/DropdownOptions/types';
+import { DropdownOptionProps } from '@components/DropdownOptions/types';
 
-import { DropdownContextType, IDropdownProps } from './types';
+import { DropdownContextType, DropdownProps } from './types';
 import { getActiveItems } from '@components/MultipleDropdown/utils';
 import MultipleDropdownNotification from '@components/MultipleDropdownNotification';
 
@@ -33,7 +33,7 @@ const DropdownPlaceholderLabel = styled.div`
  * Aria attributes are set according to
  * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
-function MultipleDropdownInner<T extends IDropdownOption>(
+function MultipleDropdownInner<T extends DropdownOptionProps>(
   {
     selectedItems = [],
     isDisabled,
@@ -45,7 +45,7 @@ function MultipleDropdownInner<T extends IDropdownOption>(
     children,
     onChange: handleChange,
     className,
-  }: IDropdownProps<T>,
+  }: DropdownProps<T>,
   ref?: React.ForwardedRef<HTMLDivElement | null>,
 ) {
   const theme = useTheme();
@@ -69,7 +69,7 @@ function MultipleDropdownInner<T extends IDropdownOption>(
     [JSON.stringify(selectedItems)],
   );
 
-  const onChange = (item: IDropdownOption) => {
+  const onChange = (item: DropdownOptionProps) => {
     if (isDisabled || !item) {
       return;
     }
@@ -148,7 +148,7 @@ function MultipleDropdownInner<T extends IDropdownOption>(
     setItems(childItems);
   }, [memoSelectedItems, children]);
 
-  const contextValue: DropdownContextType<IDropdownOption> = React.useMemo(
+  const contextValue: DropdownContextType<DropdownOptionProps> = React.useMemo(
     () => ({ onChange, allItems: optionsWithKey, isMultiple }),
     [onChange, optionsWithKey, isMultiple],
   );
@@ -211,7 +211,7 @@ function MultipleDropdownInner<T extends IDropdownOption>(
 
 const MultipleDropdown = React.forwardRef<
   HTMLDivElement,
-  IDropdownProps<IDropdownOption>
+  DropdownProps<DropdownOptionProps>
 >(MultipleDropdownInner);
 
 export default MultipleDropdown;

package/src/components/MultipleDropdown/types.ts

@@ -1,6 +1,6 @@
-import { IDropdownOption } from '@components/DropdownOptions/types';
+import { DropdownOptionProps } from '@components/DropdownOptions/types';
 
-export type IDropdownProps<P extends IDropdownOption> = {
+export type DropdownProps<P extends DropdownOptionProps> = {
   selectedItems?: P[];
   isMultiple?: boolean;
   isDisabled?: boolean;
@@ -13,7 +13,7 @@ export type IDropdownProps<P extends IDropdownOption> = {
   onChange?: (selectedItem: string | number, isSelected: boolean) => void;
 };
 
-export interface DropdownContextType<T extends IDropdownOption> {
+export interface DropdownContextType<T extends DropdownOptionProps> {
   onChange: (item: T) => void;
   isMultiple?: boolean;
   allItems: Record<string | number, T>;

package/src/components/MultipleDropdown/utils.ts

@@ -1,4 +1,4 @@
-import { IDropdownOption } from '../..';
+import { DropdownOptionProps } from '../..';
 
 const getActiveItem = <T>({
   activeItem,
@@ -20,7 +20,7 @@ interface GetActiveItems<T> {
   placeholder: string;
 }
 export const getActiveItems = <
-  T extends Record<string | number, IDropdownOption>,
+  T extends Record<string | number, DropdownOptionProps>,
 >({
   allItems = {} as T,
   placeholder,

package/src/components/MultipleDropdownOptions/MultipleDropdownOptions.tsx

@@ -5,8 +5,8 @@ import Checkbox from '@components/Checkbox';
 import { useMultipleDropdownContext } from '@components/MultipleDropdown/MultipleDropdown.context';
 import DropdownOption from '@components/DropdownOption';
 
-import { IDropdownItemsListProps } from './types';
 import { checkboxStyles } from '@components/Checkbox/styles';
+import { DropdownItemsListProps } from './types';
 
 const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
   position: absolute;
@@ -83,7 +83,7 @@ const MultipleDropdownOptions = ({
   ariaLabelledby,
   id,
   children,
-}: IDropdownItemsListProps) => {
+}: DropdownItemsListProps) => {
   const { onChange, allItems, isMultiple } = useMultipleDropdownContext();
 
   const toggleItem = (value: string | number, isDisabled: boolean) => {

package/src/components/MultipleDropdownOptions/index.ts

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

package/src/components/MultipleDropdownOptions/types.ts

@@ -1,6 +1,6 @@
-export type IDropdownOption = Record<string, string | number>;
+export type DropdownOptionType = Record<string, string | number>;
 
-export interface IDropdownItemsListProps {
+export interface DropdownItemsListProps {
   ariaLabelledby?: string;
   id?: string;
   children?: React.ReactNode;

package/src/components/Popover/PopoverTrigger.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 import Button from '@components/Button';
-import { PopoverTriggerProps } from './types';
+import { ButtonProps } from '@components/Button/types';
 import { usePopoverContext } from './hooks/usePopoverContext';
-import { IButtonProps } from '@components/Button/types';
+import { PopoverTriggerProps } from './types';
 
 export const PopoverTrigger = React.forwardRef<
   HTMLElement,
-  React.HTMLProps<HTMLElement> & IButtonProps & PopoverTriggerProps
+  React.HTMLProps<HTMLElement> & ButtonProps & PopoverTriggerProps
 >(function PopoverTrigger(
   { children, asChild = false, dataTestId = 'trigger-button', ...props },
   propRef,

package/src/components/Radio/Radio.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@emotion/react';
 import Icon from '@components/Icon';
 
 import { RadioBase } from './RadioBase';
-import { IRadioProps } from './types';
+import { RadioProps } from './types';
 
 const Radio = ({
   id,
@@ -16,7 +16,7 @@ const Radio = ({
   onChange,
   text,
   className,
-}: IRadioProps) => {
+}: RadioProps) => {
   const theme = useTheme();
 
   const autoGenId = useId();

package/src/components/Radio/types.ts

@@ -1,4 +1,4 @@
-export interface IRadioProps {
+export interface RadioProps {
   id?: string;
   value: string;
   name?: string;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -3,7 +3,7 @@ import { Children, isValidElement, cloneElement, useState } from 'react';
 import Radio from '@components/Radio';
 
 import { RadioGroupBase } from './RadioGroupBase';
-import { IRadioGroupProps } from './types';
+import { RadioGroupProps } from './types';
 
 const RadioGroup = ({
   name,
@@ -12,7 +12,7 @@ const RadioGroup = ({
   onChange,
   children,
   className,
-}: IRadioGroupProps) => {
+}: RadioGroupProps) => {
   const [activeValue, setActiveValue] = useState(initialState);
 
   const onRadioValueChange = (value: string) => {

package/src/components/RadioGroup/types.ts

@@ -1,10 +1,10 @@
-import { IRadioProps } from '@components/Radio/types';
+import { RadioProps } from '@components/Radio/types';
 
-export interface IRadioGroupProps {
+export interface RadioGroupProps {
   name: string;
   isRequired?: boolean;
   initialState?: string;
   className?: string;
   onChange: (value: string) => void;
-  children: React.ReactElement<IRadioProps>[];
+  children: React.ReactElement<RadioProps>[];
 }

package/src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -1,4 +1,4 @@
-import { IResponsiveImageProps } from './types';
+import { ResponsiveImageProps } from './types';
 
 /**
  * A simple wrapper over the `<img />` tag.
@@ -7,7 +7,7 @@ import { IResponsiveImageProps } from './types';
  * when testing srcSet, and use Hard Reload to force the
  * browser to load an image of another resolution.
  * */
-const ResponsiveImage = ({ src, alt, ...props }: IResponsiveImageProps) => {
+const ResponsiveImage = ({ src, alt, ...props }: ResponsiveImageProps) => {
   return <img src={src} alt={alt} {...props} />;
 };
 

package/src/components/ResponsiveImage/types.ts

@@ -1,4 +1,4 @@
-export interface IResponsiveImageProps {
+export interface ResponsiveImageProps {
   src: string;
   srcSet: string;
   sizes: string;

package/src/components/Switch/Switch.tsx

@@ -1,9 +1,9 @@
 import SwitchBase from './SwitchBase';
 import { useSwitchContext } from './SwitchContext';
 
-import { ISwitchProps } from './types';
+import { SwitchProps } from './types';
 
-const Switch = ({ label, isDisabled = false }: ISwitchProps) => {
+const Switch = ({ label, isDisabled = false }: SwitchProps) => {
   const { isOn, toggle } = useSwitchContext();
 
   return (

package/src/components/Switch/SwitchContext.tsx

@@ -1,11 +1,11 @@
 import { createContext, useState, useCallback, useContext } from 'react';
 
-export interface ISwitchContext {
+export interface SwitchContext {
   isOn: boolean;
   toggle: () => void;
 }
 
-export const SwitchContext = createContext<ISwitchContext>({
+export const SwitchContext = createContext<SwitchContext>({
   isOn: true,
   toggle: () => {
     /* default no-op */

package/src/components/Switch/types.ts

@@ -1,4 +1,4 @@
-export interface ISwitchProps {
+export interface SwitchProps {
   label: string;
   isDisabled?: boolean;
 }

package/src/components/Tab/Tab.tsx

@@ -1,4 +1,4 @@
-import { ISmallTabProps } from '@components/TabBar/types';
+import { SmallTabProps } from '@components/TabBar/types';
 
 import { TabBase } from './TabBase';
 
@@ -8,7 +8,7 @@ const Tab = ({
   text,
   ariaControls,
   tabId,
-}: ISmallTabProps) => {
+}: SmallTabProps) => {
   return (
     <TabBase
       role="tab"

package/src/components/Tab/TabBase.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
+import { SmallTabProps } from '@components/TabBar/types';
 
-import { ISmallTabProps } from '@components/TabBar/types';
-
-export const TabBase = styled.button<Pick<ISmallTabProps, 'isActive'>>`
+export const TabBase = styled.button<Pick<SmallTabProps, 'isActive'>>`
   height: 34px;
   border: 0;
   outline: 0;

package/src/components/TabBar/TabBar.spec.tsx

@@ -7,10 +7,10 @@ import LargeTab from '@components/LargeTab';
 
 import { TabBarWrapper, TabContents } from './stories/helpers';
 import TabBar, { TabBarContextProvider } from './index';
-import { ISmallTabProps, ITab } from './types';
+import { SmallTabProps, TabProps } from './types';
 import { ReactNode } from 'react';
 
-interface TabTest extends Pick<ISmallTabProps, 'tabId'> {
+interface TabTest extends Pick<SmallTabProps, 'tabId'> {
   controls: string;
   topText?: string;
   bottomText?: string;
@@ -187,7 +187,7 @@ const componentTabBarTests: ComponentTabBarTests = (
 };
 
 describe('TabBar', () => {
-  const renderContent = (tab?: ISmallTabProps): React.ReactNode => {
+  const renderContent = (tab?: SmallTabProps): React.ReactNode => {
     return (
       <TabContents
         id={tab?.ariaControls}
@@ -216,7 +216,7 @@ describe('TabBar', () => {
         tabId={tab.tabId}
         text={tab.text || ''}
         ariaControls={tab.controls}
-        renderContent={tab.renderContent as ITab['renderContent']}
+        renderContent={tab.renderContent as TabProps['renderContent']}
       />
     ),
     (tab) => [tab.text || ''],
@@ -282,7 +282,7 @@ describe('TabBar', () => {
         topText={tab.topText || ''}
         bottomText={tab.bottomText || ''}
         ariaControls={tab.controls}
-        renderContent={tab.renderContent as ITab['renderContent']}
+        renderContent={tab.renderContent as TabProps['renderContent']}
       />
     ),
     (tab) => [tab.topText || '', tab.bottomText || ''],

package/src/components/TabBar/TabBar.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Children, cloneElement, isValidElement } from 'react';
 import { useTabBarContext } from './TabBarContext';
-import { ITabBarProps } from './types';
+import { TabBarProps } from './types';
 
 const TabBarBase = styled.div``;
 
@@ -12,7 +12,7 @@ const TabBarBase = styled.div``;
  * component to decide where to render the contents of the
  * selected tab.
  * */
-const TabBar = ({ children }: ITabBarProps) => {
+const TabBar = ({ children }: TabBarProps) => {
   const { activeTab, setActiveTab } = useTabBarContext();
   const activeTabId = activeTab?.tabId;
 

package/src/components/TabBar/TabBarContext.tsx

@@ -1,14 +1,14 @@
 import { createContext, useState, useContext } from 'react';
-import { ITab, ITabBarContext } from './types';
+import { TabProps, TabBarContextProps } from './types';
 
-const defaultTab: ITab = {
+const defaultTab: TabProps = {
   tabId: Number.NaN,
   renderContent() {
     return null;
   },
 };
 
-export const TabBarContext = createContext<ITabBarContext>({
+export const TabBarContext = createContext<TabBarContextProps>({
   activeTab: defaultTab,
   setActiveTab() {
     /* default no-op */
@@ -17,8 +17,8 @@ export const TabBarContext = createContext<ITabBarContext>({
 
 export const useTabBarContext = () => useContext(TabBarContext);
 
-const useTabBar = (initialTab?: ITab): ITabBarContext => {
-  const [tab, setTab] = useState<ITab | undefined>(initialTab);
+const useTabBar = (initialTab?: TabProps): TabBarContextProps => {
+  const [tab, setTab] = useState<TabProps | undefined>(initialTab);
 
   return {
     activeTab: tab,
@@ -30,7 +30,7 @@ export const TabBarContextProvider = ({
   initialTab = defaultTab,
   children,
 }: {
-  initialTab?: ITab;
+  initialTab?: TabProps;
   children: React.ReactNode;
 }) => {
   const { activeTab, setActiveTab } = useTabBar(initialTab);

package/src/components/TabBar/stories/helpers.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Fragment, useLayoutEffect } from 'react';
+import { DecoratorFunction } from '@storybook/types';
 import { useTabBarContext, TabBarContextProvider } from '@components/TabBar';
-import { ITab } from '../types';
 import TabBar from '../TabBar';
-import { DecoratorFunction } from '@storybook/types';
+import { TabProps } from '../types';
 
 type Args = Parameters<typeof TabBar>[0];
 
@@ -13,8 +13,8 @@ export const TabBarWrapper = ({
   renderContent,
 }: {
   children: React.ReactNode;
-  selectedTabId?: ITab['tabId'];
-  renderContent?: ITab['renderContent'];
+  selectedTabId?: TabProps['tabId'];
+  renderContent?: TabProps['renderContent'];
 }) => {
   const { activeTab, setActiveTab } = useTabBarContext();
   useLayoutEffect(() => {

package/src/components/TabBar/types.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from '@global-types/emotion';
 
-export interface ITab extends CommonProps {
+export interface TabProps extends CommonProps {
   tabId: number | string;
   renderContent: (
     tab?: {
@@ -11,29 +11,26 @@ export interface ITab extends CommonProps {
     },
     arg?: unknown,
   ) => React.ReactNode;
-  [prop: string | number | symbol]: unknown;
-}
-
-export interface ITabProps extends ITab {
   isActive?: boolean;
   onClick?: () => void;
   ariaControls?: string;
+  [prop: string | number | symbol]: unknown;
 }
 
-export interface ISmallTabProps extends ITabProps {
+export interface SmallTabProps extends TabProps {
   text: string;
 }
 
-export interface ILargeTabProps extends ITabProps {
+export interface LargeTabProps extends TabProps {
   topText: string;
   bottomText: string;
 }
 
-export interface ITabBarProps {
-  children: React.ReactElement<React.PropsWithChildren<ITabProps>>[];
+export interface TabBarProps {
+  children: React.ReactElement<React.PropsWithChildren<TabProps>>[];
 }
 
-export interface ITabBarContext {
-  activeTab?: ITab;
-  setActiveTab: (tab?: ITab) => void;
+export interface TabBarContextProps {
+  activeTab?: TabProps;
+  setActiveTab: (tab?: TabProps) => void;
 }

package/src/components/Tooltip/ProgressChartTooltip.tsx

@@ -3,7 +3,7 @@ import Icon from '@components/Icon';
 import Typography from '@components/Typography';
 
 import { TooltipContentBase } from './TooltipContentBase';
-import { IProgressChartTooltipProps } from './types';
+import { ProgressChartTooltipProps } from './types';
 import { mapSizes } from './utils';
 
 export const ProgressChartTooltip = ({
@@ -12,7 +12,7 @@ export const ProgressChartTooltip = ({
   valueFormatted,
   iconName,
   barProps = {},
-}: IProgressChartTooltipProps) => {
+}: ProgressChartTooltipProps) => {
   const { color } = barProps;
 
   return (