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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { useTooltip } from './useTooltip';
 import { TooltipContext } from './useTooltipContext';
-import { ITooltipProps } from './types';
+import { TooltipProps } from './types';
 
 /*
  * <Tooltip>
@@ -10,7 +10,7 @@ import { ITooltipProps } from './types';
  *   <TooltipContent>Tooltip</TooltipContent>
  * </Tooltip>
  * */
-const Tooltip = ({ children, ...props }: ITooltipProps) => {
+const Tooltip = ({ children, ...props }: TooltipProps) => {
   const tooltip = useTooltip(props);
 
   return (

package/src/components/Tooltip/types.ts

@@ -5,14 +5,14 @@ import {
   UseFloatingReturn,
 } from '@floating-ui/react';
 import { PointTooltipProps, Point } from '@nivo/line';
-import { IMapIcons } from '@components/Icon/types';
+import { MapIconsType } from '@components/Icon/types';
 import { ProgressBarProps } from '@components/ProgressBar/types';
 import { SerializedStyles } from '@emotion/react';
 import { CommonProps } from '@global-types/emotion';
 
 export type TooltipSize = 'small' | 'medium' | 'large';
 
-export interface ITooltipProps extends CommonProps {
+export interface TooltipProps extends CommonProps {
   children: React.ReactNode;
   placement?: Placement;
   enableHover?: boolean;
@@ -25,7 +25,7 @@ export interface ITooltipProps extends CommonProps {
   isOpen?: boolean;
 }
 
-export type UseTooltipArgs = Omit<ITooltipProps, 'children'>;
+export type UseTooltipArgs = Omit<TooltipProps, 'children'>;
 
 type UseInteractions = ReturnType<typeof useInteractions>;
 
@@ -34,7 +34,7 @@ interface MutableRefObject<T> {
 }
 
 export type UseTooltip = (props: UseTooltipArgs) => Pick<
-  ITooltipProps,
+  TooltipProps,
   'size' | 'hasArrow' | 'arrowProps'
 > & {
   arrowRef: MutableRefObject<null>;
@@ -47,7 +47,7 @@ export type TooltipContextType =
       ReturnType<typeof useInteractions> & {
         isOpen: boolean;
         arrowRef: React.Ref<SVGSVGElement>;
-      } & Pick<ITooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
+      } & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
   | null;
 
 export type TooltipArrowProps = Omit<
@@ -55,33 +55,33 @@ export type TooltipArrowProps = Omit<
   'context'
 >;
 
-export interface ITooltipContentProps {
+export interface TooltipContentProps {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
 }
 
-export interface ITooltipContentSizes {
+export interface TooltipContentSizes {
   small: SerializedStyles;
   medium: SerializedStyles;
   large: SerializedStyles;
 }
 
-export interface ITooltipTriggerProps {
+export interface TooltipTriggerProps {
   children: React.ReactNode;
 }
 
 export type SimpleChartTooltipProps =
   | PointTooltipProps &
-      Pick<ITooltipProps, 'size'> & {
+      Pick<TooltipProps, 'size'> & {
         renderValue?: (data: Point['data']) => React.ReactNode;
       };
 
-export interface IProgressChartTooltipProps {
+export interface ProgressChartTooltipProps {
   caption: string;
   value: number;
   valueFormatted: string;
-  iconName?: keyof IMapIcons;
+  iconName?: keyof MapIconsType;
   barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>;
 }
 

package/src/components/Tooltip/utils.tsx

@@ -1,7 +1,7 @@
-import { ITooltipContentSizes } from './types';
+import { TooltipContentSizes } from './types';
 import { small, medium, large } from './styles';
 
-export const mapSizes: ITooltipContentSizes = {
+export const mapSizes: TooltipContentSizes = {
   small,
   medium,
   large,

package/src/components/TooltipContent/TooltipContent.tsx

@@ -7,11 +7,11 @@ import {
 
 import { TooltipArrow } from '@components/Tooltip/TooltipArrow';
 import { TooltipContentBase } from '@components/Tooltip/TooltipContentBase';
-import { ITooltipContentProps, TooltipSize } from '@components/Tooltip/types';
+import { TooltipContentProps, TooltipSize } from '@components/Tooltip/types';
 import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
 import { mapSizes } from '@components/Tooltip/utils';
 
-const TooltipContent = forwardRef<HTMLDivElement, ITooltipContentProps>(
+const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
   function TooltipContent({ children, className, style }, refProp) {
     const tooltipCtx = useTooltipContext();
     const ref = useMergeRefs([tooltipCtx?.refs.setFloating, refProp]);

package/src/components/TooltipTrigger/TooltipTrigger.tsx

@@ -1,9 +1,9 @@
 import { cloneElement, isValidElement } from 'react';
 
-import { ITooltipTriggerProps } from '@components/Tooltip/types';
+import { TooltipTriggerProps } from '@components/Tooltip/types';
 import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
 
-const TooltipTrigger = ({ children }: ITooltipTriggerProps) => {
+const TooltipTrigger = ({ children }: TooltipTriggerProps) => {
   const tooltipCtx = useTooltipContext();
 
   if (isValidElement(children)) {

package/src/components/WithVisibleLG/WithVisibleLG.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleLG } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleLG(TestComponent);
+
+describe('HOC: withVisibleLG', () => {
+  // TODO: additional test to test display: block
+  it('Should not displayed (less than LG)', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-lg');
+    expect(wrapper).toHaveStyle('display: none');
+  });
+});

package/src/components/WithVisibleLG/WithVisibleLG.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const VisibleLG = styled.div`
+  display: none;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: block;
+  }
+`;
+
+export const WithVisibleLG = <T extends object>(
+  Component: React.ComponentType<T>,
+  rest?: Parameters<typeof VisibleLG>[0],
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleLG data-testid="with-visible-lg" {...rest}>
+      <Component {...props} />
+    </VisibleLG>
+  );
+
+  decoratedComp.displayName = `WithVisibleLG(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleLG/index.ts

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

package/src/components/WithVisibleMD/WithVisibleMD.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleMD } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleMD(TestComponent);
+
+describe('HOC: WithVisibleMD', () => {
+  // TODO: additional test to test display: block
+  it('Should not displayed (less than MD)', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-md');
+    expect(wrapper).toHaveStyle('display: none');
+  });
+});

package/src/components/WithVisibleMD/WithVisibleMD.tsx

@@ -0,0 +1,23 @@
+import { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const VisibleMD = styled.div`
+  display: none;
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: block;
+  }
+`;
+
+export const WithVisibleMD = <T extends object>(
+  Component: React.ComponentType<T>,
+  styles?: SerializedStyles,
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleMD data-testid="with-visible-md" css={styles}>
+      <Component {...props} />
+    </VisibleMD>
+  );
+
+  decoratedComp.displayName = `WithVisibleMD(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleMD/index.ts

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

package/src/components/WithVisibleSM/WithVisibleSM.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleSM } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleSM(TestComponent);
+
+describe('HOC: WithVisibleSM', () => {
+  // TODO: additional test to test display: none
+  it('Should be displayed', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-sm');
+    expect(wrapper).toHaveStyle('display: block');
+  });
+});

package/src/components/WithVisibleSM/WithVisibleSM.tsx

@@ -0,0 +1,22 @@
+import { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const VisibleSM = styled.div`
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const WithVisibleSM = <T extends object>(
+  Component: React.ComponentType<T>,
+  styles?: SerializedStyles,
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleSM data-testid="with-visible-sm" css={styles}>
+      <Component {...props} />
+    </VisibleSM>
+  );
+
+  decoratedComp.displayName = `WithVisibleSM(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleSM/index.ts

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

package/src/components/WithVisibleUpToLG/WithVisibleUpToLG.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleUpToLG } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleUpToLG(TestComponent);
+
+describe('HOC: WithVisibleUpToLG', () => {
+  // TODO: additional test to test display: block
+  it('Should not displayed (less than LG)', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-up-to-lg');
+    expect(wrapper).toHaveStyle('display: none');
+  });
+});

package/src/components/WithVisibleUpToLG/WithVisibleUpToLG.tsx

@@ -0,0 +1,24 @@
+import { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const VisibleUpToLG = styled.div`
+  display: none;
+
+  @media screen and (max-width: 1439px) {
+    display: block;
+  }
+`;
+
+export const WithVisibleUpToLG = <T extends object>(
+  Component: React.ComponentType<T>,
+  styles?: SerializedStyles,
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleUpToLG data-testid="with-visible-up-to-lg" css={styles}>
+      <Component {...props} />
+    </VisibleUpToLG>
+  );
+
+  decoratedComp.displayName = `WithVisibleUpToLG(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleUpToLG/index.ts

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

package/src/components/index.ts

@@ -17,7 +17,7 @@ export { default as DropdownBase } from './DropdownBase';
 export { default as DropdownOption } from './DropdownOption';
 export { default as DropdownOptions } from './DropdownOptions';
 export { default as DropdownToggle } from './DropdownToggle';
-export type { IDropdownOption } from './DropdownOptions';
+export type { DropdownOptionProps } from './DropdownOptions';
 export { default as Icon } from './Icon';
 export * from './Icon';
 export * from './Icon/types';
@@ -80,3 +80,7 @@ export { default as FormHelperText } from './FormHelperText';
 export { default as Indicator } from './Indicator';
 export * from './ButtonGroup';
 export { default as Link } from './Link';
+export * from './WithVisibleLG';
+export * from './WithVisibleMD';
+export * from './WithVisibleSM';
+export * from './WithVisibleUpToLG';