@ssa-ui-kit/core 1.1.7 → 1.1.8

package/src/components/Input/Input.tsx

@@ -27,6 +27,8 @@ const InputInner = (
     className,
     wrapperClassName,
     inputProps = {},
+    errorTooltip,
+    successTooltip,
     register,
     onKeyUp,
   }: InputProps,
@@ -63,8 +65,12 @@ const InputInner = (
         ref={useMergeRefs([registerResult?.ref, inputRef])}
       />
 
-      {status === 'error' && showStatusIcon() ? <InputStatusError /> : null}
-      {status === 'success' && showStatusIcon() ? <InputStatusSuccess /> : null}
+      {status === 'error' && showStatusIcon() ? (
+        <InputStatusError errorTooltip={errorTooltip} />
+      ) : null}
+      {status === 'success' && showStatusIcon() ? (
+        <InputStatusSuccess successTooltip={successTooltip} />
+      ) : null}
 
       {endElement ? <div css={S.endElement}>{endElement}</div> : null}
     </InputGroup>

package/src/components/Input/InputStatusError.tsx

@@ -13,8 +13,12 @@ export const InputError = styled.div`
   }
 `;
 
-export const InputStatusError = () => (
+export const InputStatusError = ({
+  errorTooltip,
+}: {
+  errorTooltip?: string;
+}) => (
   <InputError css={inputStatus}>
-    <Icon name="union" size={10} color="#fff" />
+    <Icon name="union" size={10} color="#fff" tooltip={errorTooltip} />
   </InputError>
 );

package/src/components/Input/InputStatusSuccess.tsx

@@ -9,8 +9,12 @@ export const InputSuccess = styled.div`
     `linear-gradient(68.38deg, ${theme.colors.greenLighter}, ${theme.colors.green});`};
 `;
 
-export const InputStatusSuccess = () => (
+export const InputStatusSuccess = ({
+  successTooltip,
+}: {
+  successTooltip?: string;
+}) => (
   <InputSuccess css={inputStatus}>
-    <Icon name="check" size={10} color="#fff" />
+    <Icon name="check" size={10} color="#fff" tooltip={successTooltip} />
   </InputSuccess>
 );

package/src/components/Input/types.ts

@@ -22,6 +22,8 @@ export interface InputProps
   endElement?: React.ReactElement;
   css?: Interpolation<Theme>;
   inputProps?: ExtendedInputProps;
+  errorTooltip?: string;
+  successTooltip?: string;
   onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
   onStartElementClick?: (event: BaseSyntheticEvent) => void;
   onEndElementClick?: (event: BaseSyntheticEvent) => void;

package/src/components/Pagination/Pagination.stories.tsx

@@ -70,5 +70,17 @@ export const WithManualPageSettingAndPerPage: StoryAnnotations = {
   },
 };
 
+export const WithoutPageFromCount: StoryAnnotations = {
+  args: {
+    pagesCount: 10,
+    isPageSettingVisible: true,
+    isRowPerPageVisible: true,
+    isPageFromCountVisible: false,
+  },
+  parameters: {
+    selectedPage: 1,
+  },
+};
+
 WithManualPageSettingAndPerPage.storyName =
   'With records per page and page number setting';

package/src/components/Pagination/Pagination.tsx

@@ -16,7 +16,9 @@ const Pagination = ({
   ariaLabel,
   isDisabled,
   pageNumberPlaceholder = 'Page №',
+  errorTooltip = 'The value is out of range',
   isPageSettingVisible = false,
+  isPageFromCountVisible = true,
   isRowPerPageVisible = false,
   rowPerPageProps,
   manualPageNumberProps,
@@ -44,21 +46,24 @@ const Pagination = ({
       aria-label={ariaLabel || 'Pagination'}>
       {isRowPerPageVisible && <RowsPerPageDropdown {...rowPerPageProps} />}
       {isPageSettingVisible && (
-        <Wrapper css={{ width: 'auto', marginRight: 32 }}>
+        <Wrapper css={{ width: 'auto', marginRight: 5 }}>
           <S.PageNumberInput
             name="page-number"
             placeholder={pageNumberPlaceholder}
             onKeyUp={handlePageNumberChange}
             status={inputStatus}
             type="number"
+            errorTooltip={errorTooltip}
             inputProps={{
               autoComplete: 'off',
             }}
             {...manualPageNumberProps}
           />
-          <span css={{ textWrap: 'nowrap', fontSize: 14 }}>
-            {page || 0} / {pagesCount}
-          </span>
+          {isPageFromCountVisible && (
+            <span css={{ textWrap: 'nowrap', fontSize: 14, marginLeft: 16 }}>
+              {page || 0} / {pagesCount}
+            </span>
+          )}
         </Wrapper>
       )}
       <Wrapper>

package/src/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.tsx

@@ -40,7 +40,7 @@ export const RowsPerPageDropdown = ({
         onChange={onChange}
         css={{
           marginLeft: 10,
-          marginRight: 37,
+          marginRight: 15,
           background: 'none',
           color: '#070821',
           gap: 5,

package/src/components/Pagination/styles.tsx

@@ -104,8 +104,7 @@ export const PaginationNav = styled.nav`
 `;
 
 export const PageNumberInput = styled(Input)`
-  width: 80px;
-  margin-right: 16px;
+  width: 65px;
   -moz-appearance: textfield;
   appearance: textfield;
   &::-webkit-outer-spin-button,

package/src/components/Pagination/types.ts

@@ -9,8 +9,10 @@ export interface PaginationProps extends CommonProps {
   pageNumberPlaceholder?: string;
   isPageSettingVisible?: boolean;
   isRowPerPageVisible?: boolean;
+  isPageFromCountVisible?: boolean;
   rowPerPageProps?: RowsPerPageDropdownProps;
   manualPageNumberProps?: InputProps;
+  errorTooltip?: string;
 }
 
 export interface PaginationButtonsProps {

package/src/components/ProgressInfo/ProgressInfo.tsx

@@ -7,7 +7,7 @@ import Card from '@components/Card';
 import CardHeader from '@components/CardHeader';
 import Typography from '@components/Typography';
 
-import { PieChart, PieChartLegend } from '@components/PieChart';
+import { PieChart, PieChartLegend } from '@components/Charts/PieChart';
 import { ProgressInfoTotals } from './ProgressInfoTotals';
 
 import {

package/src/components/Tooltip/types.ts

@@ -3,6 +3,7 @@ import {
   FloatingArrow,
   Placement,
   UseFloatingReturn,
+  OffsetOptions,
 } from '@floating-ui/react';
 import { PointTooltipProps, Point } from '@nivo/line';
 import { MapIconsType } from '@components/Icon/types';
@@ -17,7 +18,7 @@ export interface TooltipProps extends CommonProps {
   placement?: Placement;
   enableHover?: boolean;
   enableClick?: boolean;
-  offsetPx?: number;
+  offsetOptions?: OffsetOptions;
   // TooltipContent-related props
   size?: TooltipSize;
   hasArrow?: boolean;
@@ -39,14 +40,16 @@ export type UseTooltip = (props: UseTooltipArgs) => Pick<
 > & {
   arrowRef: MutableRefObject<null>;
   isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
 } & UseFloatingReturn &
   UseInteractions;
 
 export type TooltipContextType =
   | (UseFloatingReturn &
       ReturnType<typeof useInteractions> & {
-        isOpen: boolean;
         arrowRef: React.Ref<SVGSVGElement>;
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
       } & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
   | null;
 

package/src/components/Tooltip/useTooltip.tsx

@@ -18,7 +18,7 @@ export const useTooltip: UseTooltip = ({
   placement,
   enableClick = true,
   enableHover = false,
-  offsetPx = 12,
+  offsetOptions = 12,
   size = 'small',
   hasArrow = true,
   arrowProps = {},
@@ -32,7 +32,7 @@ export const useTooltip: UseTooltip = ({
     onOpenChange: setIsOpen,
     placement,
     middleware: [
-      offset(offsetPx),
+      offset(offsetOptions),
       flip(),
       shift(),
       arrow({
@@ -54,6 +54,7 @@ export const useTooltip: UseTooltip = ({
   return useMemo(
     () => ({
       isOpen,
+      setIsOpen,
       arrowRef,
       size,
       hasArrow,
@@ -63,6 +64,7 @@ export const useTooltip: UseTooltip = ({
     }),
     [
       isOpen,
+      setIsOpen,
       arrowRef,
       size,
       hasArrow,

package/src/components/WidgetCard/WidgetCard.tsx

@@ -13,6 +13,8 @@ export const WidgetCard = ({
   headerContent,
   link,
   children,
+  width,
+  height,
   onClick,
 }: WidgetCardProps) => {
   const { isFullscreenMode } = useFullscreenMode();
@@ -21,7 +23,9 @@ export const WidgetCard = ({
       <WidgetCardBase
         className={className}
         onClick={link ? undefined : onClick}
-        isFullscreenMode={isFullscreenMode}>
+        isFullscreenMode={isFullscreenMode}
+        width={width}
+        height={height}>
         <Header title={title} className={headerClassName}>
           {headerContent}
         </Header>

package/src/components/WidgetCard/WidgetCardBase.tsx

@@ -3,11 +3,13 @@ import Card from '@components/Card';
 
 export const WidgetCardBase = styled(Card)<{
   isFullscreenMode?: boolean;
+  width?: string;
+  height?: string;
 }>`
   border-radius: 20px;
   padding: 5px 10px;
-  width: 100%;
-  height: 100%;
+  width: ${({ width }) => width ?? '100%'};
+  height: ${({ height }) => height ?? '100%'};
   position: ${({ isFullscreenMode }) =>
     isFullscreenMode ? 'absolute' : 'static'};
   top: ${({ isFullscreenMode }) => isFullscreenMode && 0};

package/src/components/WidgetCard/WithWidgetCard.tsx

@@ -1,4 +1,4 @@
-import { PieChartProps } from '@components/PieChart';
+import { PieChartProps } from '@components/Charts/PieChart';
 import { WidgetCard } from './WidgetCard';
 
 export const WithWidgetCard = ({

package/src/components/WidgetCard/types.ts

@@ -9,5 +9,7 @@ export type WidgetCardProps = {
   headerContent?: React.ReactNode;
   link?: To;
   children?: React.ReactNode;
+  width?: string;
+  height?: string;
   onClick?: () => void;
 };

package/src/components/index.ts

@@ -82,12 +82,11 @@ export * from './NavBar';
 export * from './NotificationCard';
 export * from './NotificationMenu';
 export * from './Pagination';
-export * from './PieChart';
+export * from './Charts';
 export * from './Popover';
 export * from './ProgressInfo';
 export * from './ResponsiveImage';
 export * from './SearchBox';
-export * from './SegmentedPieChart';
 export * from './Switch';
 export * from './TabBar';
 export * from './TableFilters';

package/src/contexts/Translation/TranslationContext.tsx

@@ -0,0 +1,53 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+import { pathOr } from '@ssa-ui-kit/utils';
+import { JSONObject } from '@global-types/json';
+import { config as translationConfig } from './config';
+import { TranslationContextContent } from './types';
+
+export const TranslationContext = createContext<TranslationContextContent>({
+  language: translationConfig.defaultLanguage,
+  t() {
+    return '';
+  },
+  setLanguage() {
+    /* no-op */
+  },
+  setTranslations() {
+    /* no-op */
+  },
+});
+
+export const TranslationProvider = ({
+  children,
+  defaultTranslations = {},
+}: {
+  children: ReactNode;
+  defaultTranslations?: JSONObject;
+}) => {
+  const [language, setLanguage] = useState<string>(
+    translationConfig.defaultLanguage,
+  );
+  const [translations, setTranslations] =
+    useState<JSONObject>(defaultTranslations);
+  const t = (translationKey: string) => {
+    const translationKeyArray = translationKey.split('.');
+    const translation = pathOr<JSONObject, string>(translationKey, [
+      language,
+      ...translationKeyArray,
+    ])(translations);
+    return translation;
+  };
+  return (
+    <TranslationContext.Provider
+      value={{
+        language,
+        t,
+        setLanguage,
+        setTranslations,
+      }}>
+      {children}
+    </TranslationContext.Provider>
+  );
+};
+
+export const useTranslation = () => useContext(TranslationContext);

package/src/contexts/Translation/config.ts

@@ -0,0 +1,3 @@
+export const config = {
+  defaultLanguage: 'en',
+};

package/src/contexts/Translation/index.ts

@@ -0,0 +1,2 @@
+export * from './TranslationContext';
+export * from './types';

package/src/contexts/Translation/types.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+import { JSONObject } from '@global-types/json';
+
+export type TranslationContextContent = {
+  language: string;
+  t: (translationKey: string) => string;
+  setLanguage: Dispatch<SetStateAction<string>>;
+  setTranslations: Dispatch<SetStateAction<JSONObject>>;
+};

package/src/contexts/index.ts

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

package/src/index.ts

@@ -10,3 +10,4 @@ export { default as mainTheme } from './themes/main';
 export * as globalStyles from './styles/global';
 export * as styleUtils from './styles/safari-focus-outline';
 export * from './components';
+export * from './contexts';

package/src/types/json.ts

@@ -0,0 +1,7 @@
+export type JSONValue = string | number | boolean | JSONObject | JSONArray;
+
+export interface JSONObject {
+  [x: string]: JSONValue;
+}
+
+export type JSONArray = Array<JSONValue>;