@ssa-ui-kit/widgets 0.0.28-alpha → 0.0.29-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.28-alpha",
+  "version": "0.0.29-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.25-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.26-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.2-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/Activity/Activity.tsx

@@ -7,7 +7,7 @@ import {
   CardHeader,
   Typography,
   Wrapper,
-  IDropdownOption,
+  DropdownOptionProps,
 } from '@ssa-ui-kit/core';
 
 import { ActivityResp } from './types';
@@ -19,7 +19,7 @@ import { Dropdown } from '@ssa-ui-kit/core';
 
 export const Activity = ({ data }: { data: ActivityResp }) => {
   const [selected, setSelected] = useState<string>('');
-  const [options, setOptions] = useState<IDropdownOption[]>([]);
+  const [options, setOptions] = useState<DropdownOptionProps[]>([]);
 
   useEffect(() => {
     if (data == null || typeof data !== 'object') {
@@ -40,7 +40,7 @@ export const Activity = ({ data }: { data: ActivityResp }) => {
     }
   }, [options]);
 
-  const handleChange = (e: IDropdownOption) => {
+  const handleChange = (e: DropdownOptionProps) => {
     const value = e.value.toString().toLowerCase();
 
     setSelected(value);

package/src/components/Calories/Calories.tsx

@@ -9,14 +9,14 @@ import {
   ResponsiveImage,
 } from '@ssa-ui-kit/core';
 
-import { ICaloriesProps } from './types';
+import { CaloriesProps } from './types';
 import { InnerContent } from './innerContent';
 
 /**
  *
  * UI Component that shows how many calories the user has burned
  */
-export const Calories = ({ max, currentValue }: ICaloriesProps) => {
+export const Calories = ({ max, currentValue }: CaloriesProps) => {
   const theme = useTheme();
 
   return (

package/src/components/Calories/innerContent.tsx

@@ -1,9 +1,9 @@
 import { useTheme } from '@emotion/react';
 import { Typography, Wrapper } from '@ssa-ui-kit/core';
 
-import { ICaloriesProps } from './types';
+import { CaloriesProps } from './types';
 
-export const InnerContent = ({ currentValue, max }: ICaloriesProps) => {
+export const InnerContent = ({ currentValue, max }: CaloriesProps) => {
   const theme = useTheme();
   return (
     <div

package/src/components/Calories/types.ts

@@ -1,4 +1,4 @@
-export interface ICaloriesProps {
+export interface CaloriesProps {
   max: number;
   currentValue: number;
 }

package/src/components/CardList/CardList.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 
 import { Typography } from '@ssa-ui-kit/core';
 
-import { ICardListProps, Item } from './types';
+import { CardListProps, Item } from './types';
 
 /**
  *
@@ -13,7 +13,7 @@ export const CardList = <ItemType extends Item>({
   title,
   items,
   renderItem,
-}: ICardListProps<ItemType>) => {
+}: CardListProps<ItemType>) => {
   return (
     <Fragment>
       <Typography variant="h5" weight="bold">

package/src/components/CardList/types.ts

@@ -3,7 +3,7 @@ export type Item = {
   [prop: string | number | symbol]: unknown;
 };
 
-export interface ICardListProps<ItemType extends Item> {
+export interface CardListProps<ItemType extends Item> {
   title: string;
   items: Array<ItemType>;
   renderItem: (item: ItemType) => React.ReactNode;

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -1,5 +1,5 @@
 import { css, useTheme } from '@emotion/react';
-import { Wrapper, Icon, IMapIcons, SVGProps } from '@ssa-ui-kit/core';
+import { Wrapper, Icon, MapIconsType, SVGProps } from '@ssa-ui-kit/core';
 
 export const TriggerIcon = ({
   iconName,
@@ -7,7 +7,7 @@ export const TriggerIcon = ({
   className,
   CustomIcon,
 }: {
-  iconName: keyof IMapIcons;
+  iconName: keyof MapIconsType;
   iconSize?: number;
   className?: string;
   CustomIcon?: (props: Omit<SVGProps, 'fill'>) => JSX.Element;

package/src/components/Filters/FiltersBlock.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { useEffect, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';

package/src/components/HeartRate/BPM.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Theme, useTheme } from '@emotion/react';
 import { css } from '@emotion/react';
-import { IBMPProps } from './types';
+import { BMPProps } from './types';
 
 const BPMBase = styled.div`
   text-align: center;
@@ -32,7 +32,7 @@ const getBPMLabelStyles = (theme: Theme) => css`
   }
 `;
 
-export const BPM = ({ value }: IBMPProps) => {
+export const BPM = ({ value }: BMPProps) => {
   const theme = useTheme();
   return (
     <BPMBase>

package/src/components/HeartRate/HeartRate.tsx

@@ -13,7 +13,7 @@ import {
 
 import { throttle } from '@ssa-ui-kit/utils';
 
-import { IHeartRateProps } from './types';
+import { HeartRateProps } from './types';
 import { HeartRateLineChart } from './HeartRateLineChart';
 import { BPM } from './BPM';
 
@@ -28,7 +28,7 @@ export const HeartRate = ({
   data,
   caption = 'Heart Rate',
   color,
-}: IHeartRateProps) => {
+}: HeartRateProps) => {
   const [bpmValue, setBpmValue] = useState<number>(
     data?.data?.[0]?.y as number,
   );

package/src/components/HeartRate/types.ts

@@ -1,15 +1,15 @@
 import { Serie } from '@nivo/line';
 
-export interface IHeartRateProps {
+export interface HeartRateProps {
   data: Serie;
   caption?: string;
   color?: string;
 }
 
-export interface IBMPProps {
+export interface BMPProps {
   value: number;
 }
 
-export interface IHeartRateCaptionProps {
+export interface HeartRateCaptionProps {
   caption: string;
 }

package/src/components/ListGoals/ListGoals.tsx

@@ -2,13 +2,13 @@ import CardList from '@components/CardList';
 
 import { ListGoalsCard } from './ListGoalsCard';
 
-import { IListGoalsProps } from './types';
+import { ListGoalsProps } from './types';
 
 /**
  *
  * UI Component that uses CardList to render a list of goals
  */
-export const ListGoals = ({ goals }: IListGoalsProps) => {
+export const ListGoals = ({ goals }: ListGoalsProps) => {
   return (
     <CardList
       title="Goals"

package/src/components/ListGoals/ListGoalsCard.tsx

@@ -10,14 +10,14 @@ import {
 } from '@ssa-ui-kit/core';
 
 import { content } from './styles';
-import { IItemCardProps, ProgressProps } from './types';
+import { ItemCardProps, ProgressProps } from './types';
 
 export const ListGoalsCard = ({
   image,
   title,
   details,
   progressProps,
-}: IItemCardProps) => {
+}: ItemCardProps) => {
   const {
     size = 50,
     max = 100,

package/src/components/ListGoals/types.ts

@@ -9,7 +9,7 @@ export type Goal = {
   color: keyof MainColors;
 };
 
-export interface IListGoalsProps {
+export interface ListGoalsProps {
   goals: Array<Goal>;
 }
 
@@ -17,7 +17,7 @@ export type ProgressProps = Partial<
   React.ComponentProps<typeof ProgressCircle>
 >;
 
-export interface IItemCardProps {
+export interface ItemCardProps {
   image: string;
   title: string;
   details: string;

package/src/components/MealNutrients/MealNutrients.stories.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import type { Meta } from '@storybook/react';
 
 import { MealNutrients } from './index';
-import { IMealNutrientsProps } from './types';
+import { MealNutrientsProps } from './types';
 
 import { mockStaticApi } from './mockMealNutrientsRequest';
 const { getData, getOptions } = mockStaticApi;
@@ -13,8 +13,8 @@ export default {
 } as Meta<typeof MealNutrients>;
 
 export const Default = () => {
-  const [options, setOptions] = useState<IMealNutrientsProps['options']>([]);
-  const [data, setData] = useState<IMealNutrientsProps['data']>([]);
+  const [options, setOptions] = useState<MealNutrientsProps['options']>([]);
+  const [data, setData] = useState<MealNutrientsProps['data']>([]);
 
   useEffect(() => {
     getOptions()

package/src/components/MealNutrients/MealNutrients.tsx

@@ -11,7 +11,7 @@ import {
 
 import { MealNutrientsLineChart } from './MealNutrientsLineChart';
 import useChartConfig from './useChartConfig';
-import { IMealNutrientsProps, UseChartConfig, OptionType } from './types';
+import { MealNutrientsProps, UseChartConfig, OptionType } from './types';
 
 /**
  *
@@ -22,7 +22,7 @@ export const MealNutrients = ({
   options,
   data,
   onOptionChange,
-}: IMealNutrientsProps) => {
+}: MealNutrientsProps) => {
   const [selectedOption, setSelectedOption] = useState<OptionType>();
   const containerRef = useRef<HTMLDivElement>(null);
 

package/src/components/MealNutrients/MealNutrientsTooltip.tsx

@@ -1,7 +1,7 @@
 import { ProgressChartTooltip } from '@ssa-ui-kit/core';
-import type { IMapIcons } from '@ssa-ui-kit/core';
+import type { MapIconsType } from '@ssa-ui-kit/core';
 
-import { IMealNutrientsTooltipProps } from './types';
+import { MealNutrientsTooltipProps } from './types';
 
 const capitalize = (str: string) =>
   `${str[0].toUpperCase()}${str.substring(1)}`;
@@ -9,13 +9,13 @@ const capitalize = (str: string) =>
 export const MealNutrientsTooltip = ({
   colorName,
   point,
-}: IMealNutrientsTooltipProps) => {
+}: MealNutrientsTooltipProps) => {
   const caption = capitalize(String(point.serieId));
   const {
     data: { y, comp, unit },
   } = point;
   const iconName =
-    ((comp && `arrow-${comp > 0 ? 'up' : 'down'}`) as keyof IMapIcons) ||
+    ((comp && `arrow-${comp > 0 ? 'up' : 'down'}`) as keyof MapIconsType) ||
     undefined;
 
   return (

package/src/components/MealNutrients/types.ts

@@ -1,21 +1,21 @@
 import { Point, LineSvgProps, CustomLayerProps } from '@nivo/line';
 import { ScaleTimeSpec } from '@nivo/scales';
-import { MainColors, IDropdownOption } from '@ssa-ui-kit/core';
+import { MainColors, DropdownOptionProps } from '@ssa-ui-kit/core';
 
-export interface OptionType extends IDropdownOption {
+export interface OptionType extends DropdownOptionProps {
   value: 'd' | 'w' | 'm';
   label: string;
   precision: string;
 }
 
-export interface IMealNutrientsProps {
+export interface MealNutrientsProps {
   caption?: string;
   options: OptionType[];
   data: LineSvgProps['data'];
   onOptionChange?: (option: OptionType) => void;
 }
 
-export interface IMealNutrientsTooltipProps {
+export interface MealNutrientsTooltipProps {
   colorName: keyof MainColors;
   point: Exclude<Point, 'data'> & {
     data: Point['data'] & { comp?: number; unit?: string };

package/src/components/MealPlanner/MealPlanner.tsx

@@ -8,7 +8,7 @@ import {
   Typography,
   Dropdown,
   DropdownOption,
-  IDropdownOption,
+  DropdownOptionProps,
 } from '@ssa-ui-kit/core';
 
 import { MealPlannerCard } from './MealPlannerCard';
@@ -24,9 +24,9 @@ const CustomOption = styled(DropdownOption)`
 
 export const MealPlanner = ({ data }: MealPlannerProps) => {
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
-  const [options, setOptions] = useState<IDropdownOption[]>([]);
+  const [options, setOptions] = useState<DropdownOptionProps[]>([]);
 
-  const handleChange = (e: IDropdownOption) => {
+  const handleChange = (e: DropdownOptionProps) => {
     const value = e.value.toString().toLowerCase();
 
     setSelectedOption(value);

package/src/components/NavBar/NavBar.tsx

@@ -10,12 +10,12 @@ import NavBarItem from './NavBarItem';
 import NavBarLink from './NavBarLink';
 import NavToggle from './NavToggle';
 
-import { INavBarProps } from './types';
+import { NavBarProps } from './types';
 
 /**
  * UI Component that shows the navigation bar
  */
-export const NavBar = ({ items }: INavBarProps) => {
+export const NavBar = ({ items }: NavBarProps) => {
   const toggleId = useId();
   const theme = useTheme();
 

package/src/components/NavBar/types.ts

@@ -1,25 +1,25 @@
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
-import { IMapIcons } from '@ssa-ui-kit/core';
+import { MapIconsType } from '@ssa-ui-kit/core';
 
-export interface INavBarProps {
-  items: Array<{ path: string; iconName: keyof IMapIcons }>;
+export interface NavBarProps {
+  items: Array<{ path: string; iconName: keyof MapIconsType }>;
 }
 
 export type NavBarExtendedItem = {
   CustomIcon?: () => EmotionJSX.Element;
   path: string;
-  iconName: keyof IMapIcons;
+  iconName: keyof MapIconsType;
   title: string;
 };
 
 export type NavBarExtendedGroup = {
   CustomIcon?: () => EmotionJSX.Element;
   prefix?: string;
-  iconName: keyof IMapIcons;
+  iconName: keyof MapIconsType;
   title: string;
   items: Array<{ path: string; title: string }>;
 };
 
-export interface INavBarExtendedProps {
+export interface NavBarExtendedProps {
   items: Array<NavBarExtendedItem | NavBarExtendedGroup>;
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -4,7 +4,7 @@ import { dateFormatters } from '@ssa-ui-kit/utils';
 import {
   Badge,
   CardBase,
-  IMapIcons,
+  MapIconsType,
   Icon,
   Indicator,
   MainColors,
@@ -62,7 +62,7 @@ export const NotificationCard = forwardRef<
           color={notificationTypes[type].color as keyof MainColors}
           css={notifyBadge}>
           <Icon
-            name={notificationTypes[type].icon as keyof IMapIcons}
+            name={notificationTypes[type].icon as keyof MapIconsType}
             color={theme.colors.white}
             size={14}
           />

package/src/components/Pagination/ArrowButton.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { Button, Icon } from '@ssa-ui-kit/core';
 
-import { IArrowButtonProps } from './types';
+import { ArrowButtonProps } from './types';
 import { arrowBtnStyles } from './styles';
 
 export const ArrowButton = ({
@@ -9,7 +9,7 @@ export const ArrowButton = ({
   onClick,
   isDisabled,
   className,
-}: IArrowButtonProps) => {
+}: ArrowButtonProps) => {
   const theme = useTheme();
   return (
     <Button

package/src/components/Pagination/Pagination.tsx

@@ -4,7 +4,7 @@ import { usePaginationRange } from '@ssa-ui-kit/hooks';
 import { ArrowButton } from './ArrowButton';
 import { PaginationButtons } from './PaginationButtons';
 
-import { IPaginationProps } from './types';
+import { PaginationProps } from './types';
 import { usePaginationContext } from './PaginationContext';
 
 const Nav = styled.nav``;
@@ -15,7 +15,7 @@ const Pagination = ({
   as,
   ariaLabel,
   isDisabled,
-}: IPaginationProps) => {
+}: PaginationProps) => {
   const { page, setPage } = usePaginationContext();
   const range = usePaginationRange({ pagesCount, selectedPage: page });
 

package/src/components/Pagination/PaginationButtons.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import { Button } from '@ssa-ui-kit/core';
 
 import { pageBtnStyles, selectedPageBtnStyles } from './styles';
-import { IPaginationButtonsProps, IPageButtonProps } from './types';
+import { PaginationButtonsProps, PageButtonProps } from './types';
 
 const Break = () => <span css={{ cursor: 'default' }}>...</span>;
 
@@ -12,7 +12,7 @@ const PageButton = ({
   isSelected,
   page,
   isDisabled,
-}: IPageButtonProps) => {
+}: PageButtonProps) => {
   const theme = useTheme();
   const styles = useMemo(() => {
     return isSelected ? selectedPageBtnStyles(theme) : pageBtnStyles(theme);
@@ -43,7 +43,7 @@ export const PaginationButtons = ({
   selectedPage,
   onClick,
   isDisabled,
-}: IPaginationButtonsProps) => {
+}: PaginationButtonsProps) => {
   return (
     Array.isArray(range) &&
     range.map((page, index) => {

package/src/components/Pagination/PaginationContext.tsx

@@ -1,8 +1,11 @@
 import { createContext, useState, useContext } from 'react';
-import { IPaginationContext, IPaginationContextProviderProps } from './types';
+import {
+  PaginationContextProps,
+  PaginationContextProviderProps,
+} from './types';
 
-export const PaginationContext = createContext<IPaginationContext>(
-  {} as IPaginationContext,
+export const PaginationContext = createContext<PaginationContextProps>(
+  {} as PaginationContextProps,
 );
 
 export const usePaginationContext = () => useContext(PaginationContext);
@@ -10,7 +13,7 @@ export const usePaginationContext = () => useContext(PaginationContext);
 export const PaginationContextProvider = ({
   selectedPage,
   children,
-}: IPaginationContextProviderProps) => {
+}: PaginationContextProviderProps) => {
   const [page, setPage] = useState(selectedPage);
   return (
     <PaginationContext.Provider value={{ page, setPage }}>

package/src/components/Pagination/types.ts

@@ -1,38 +1,38 @@
 import { CommonProps } from '@ssa-ui-kit/core';
 
-export interface IPaginationProps extends CommonProps {
+export interface PaginationProps extends CommonProps {
   pagesCount: number;
   ariaLabel?: string;
   isDisabled?: boolean;
 }
 
-export interface IPaginationButtonsProps {
+export interface PaginationButtonsProps {
   range: number[];
   selectedPage?: number;
   onClick: (page: number) => void;
   isDisabled?: boolean;
 }
 
-export interface IArrowButtonProps {
+export interface ArrowButtonProps {
   direction: 'left' | 'right';
   onClick: () => void;
   isDisabled?: boolean;
   className?: string;
 }
 
-export interface IPageButtonProps {
+export interface PageButtonProps {
   onClick: () => void;
   page: number | string;
   isSelected: boolean;
   isDisabled?: boolean;
 }
 
-export interface IPaginationContext {
+export interface PaginationContextProps {
   page?: number;
   setPage: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
-export interface IPaginationContextProviderProps {
+export interface PaginationContextProviderProps {
   selectedPage?: number;
   children: React.ReactNode;
 }

package/src/components/ProgressInfo/ProgressInfo.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { progressInfoData as data } from './mockProgressInfoRequest';
 
-import { default as ProgressInfo, IProgressInfoProps } from './index';
+import { default as ProgressInfo, ProgressInfoProps } from './index';
 
 export default {
   title: 'Widgets/ProgressInfo',
@@ -24,7 +24,7 @@ export default {
 } as Meta<typeof ProgressInfo>;
 
 export const Default: StoryObj<typeof ProgressInfo> = (
-  args: IProgressInfoProps,
+  args: ProgressInfoProps,
 ) => {
   return <ProgressInfo {...args} />;
 };

package/src/components/ProgressInfo/ProgressInfo.tsx

@@ -4,7 +4,7 @@ import {
   Card,
   CardHeader,
   Typography,
-  IDropdownOption,
+  DropdownOptionProps,
   Dropdown,
   DropdownOption,
   MainColors,
@@ -16,13 +16,13 @@ import { ProgressInfoTotals } from './ProgressInfoTotals';
 import {
   ProgressInfoItemProps,
   Period,
-  IProgressInfoProps,
+  ProgressInfoProps,
   PeriodOption,
 } from './types';
 
 import { getPieChartStyles } from './styles';
 
-export const ProgressInfo = ({ data, className }: IProgressInfoProps) => {
+export const ProgressInfo = ({ data, className }: ProgressInfoProps) => {
   const [options, setOptions] = useState<PeriodOption[]>([]);
   const [selected, setSelected] = useState<PeriodOption>();
   const [response, setResponse] = useState<ProgressInfoItemProps[]>([]);
@@ -67,7 +67,7 @@ export const ProgressInfo = ({ data, className }: IProgressInfoProps) => {
     setResponse(response);
   };
 
-  const handleChange = (e: IDropdownOption) => {
+  const handleChange = (e: DropdownOptionProps) => {
     filterData(e.value as Period);
   };
 

package/src/components/ProgressInfo/types.ts

@@ -14,7 +14,7 @@ export type ProgressInfoResp = {
   [key: string]: { [key: string]: ProgressInfoItemProps[] };
 };
 
-export interface IProgressInfoProps {
+export interface ProgressInfoProps {
   data: ProgressInfoResp;
   className?: string;
 }

package/src/components/TableFilters/TableFilterCheckbox.tsx

@@ -1,4 +1,4 @@
-import { ICheckboxProps, Checkbox, checkboxStyles } from '@ssa-ui-kit/core';
+import { CheckboxProps, Checkbox, checkboxStyles } from '@ssa-ui-kit/core';
 import { Theme, css, useTheme } from '@emotion/react';
 
 const getStyles = (theme: Theme) => css`
@@ -17,7 +17,7 @@ const getStyles = (theme: Theme) => css`
   ${checkboxStyles.blueInput(theme)}
 `;
 
-export const TableFilterCheckbox = (props: ICheckboxProps) => {
+export const TableFilterCheckbox = (props: CheckboxProps) => {
   const theme = useTheme();
   const styles = getStyles(theme);
   return <Checkbox {...props} css={styles} />;