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

package/src/components/TableFilters/utils/handlers.ts

@@ -0,0 +1,73 @@
+import { assocPath, pathOr } from '@ssa-ui-kit/utils';
+import { TableFilterConfig } from '../types';
+
+export const getSubmitData = (checkboxData: TableFilterConfig) => {
+  let submitCheckboxData: TableFilterConfig = JSON.parse(
+    JSON.stringify(checkboxData),
+  );
+  const dataForSubmit: Record<string, string[]> = {};
+  Object.keys(submitCheckboxData).forEach((groupName) => {
+    submitCheckboxData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItems'],
+      submitCheckboxData[groupName]['selectedItemsDraft'],
+    )(submitCheckboxData);
+    dataForSubmit[groupName] = submitCheckboxData[groupName][
+      'selectedItemsDraft'
+    ] as string[];
+  });
+  return {
+    submitCheckboxData,
+    dataForSubmit,
+  };
+};
+
+export const getResetData = (checkboxData: TableFilterConfig) => {
+  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
+  Object.keys(newData).forEach((groupName) => {
+    newData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItemsDraft'],
+      newData[groupName]['selectedItems'],
+    )(newData);
+  });
+  return newData;
+};
+
+export const getClearData = (checkboxData: TableFilterConfig) => {
+  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
+  Object.keys(checkboxData).forEach((groupName) => {
+    const notChangedData: string[] = [];
+    const selectedItems = checkboxData[groupName].selectedItems;
+    const currentItems = checkboxData[groupName].items;
+    Object.keys(checkboxData[groupName].items).forEach((itemKey) => {
+      const itemInfo = currentItems[itemKey];
+      if (itemInfo.isDisabled && selectedItems.includes(itemInfo.name)) {
+        notChangedData.push(itemInfo.name);
+      }
+    });
+    newData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItemsDraft'],
+      notChangedData,
+    )(newData);
+  });
+  return newData;
+};
+
+export const getCheckboxChangedItems = (
+  checkboxData: TableFilterConfig,
+  groupName: string,
+  name: string | number,
+) => {
+  const draftPath = [groupName, 'selectedItemsDraft'];
+  const selectedItemsDraft = pathOr<TableFilterConfig, string[]>(
+    [],
+    draftPath,
+  )(checkboxData);
+  const newSelectedItems = selectedItemsDraft.includes(`${name}`)
+    ? selectedItemsDraft.filter((currentItemName) => currentItemName !== name)
+    : [...selectedItemsDraft, name];
+
+  return {
+    items: newSelectedItems,
+    path: draftPath,
+  };
+};

package/src/components/UserProfile/UserProfile.e2e.ts

@@ -0,0 +1,21 @@
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-userprofile--default&viewMode=story',
+  );
+};
+
+test('Widgets: UserProfile is opened', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.getByTestId('trigger-button').click();
+
+  const SCREENSHOT_PREFIX = `${CUSTOM_SHOTS_PATH}widgets-user-profile--is-opened__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});

package/src/components/UserProfile/UserProfile.spec.tsx

@@ -0,0 +1,107 @@
+import userEvent from '@testing-library/user-event';
+import { UserProfile } from './UserProfile';
+
+describe('UserProfile', () => {
+  it('Renders with a user name and email values via mouse click', async () => {
+    const user = userEvent.setup();
+    const { getByText, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+      />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    getByText(/Josh Li/i);
+    getByText(/Josh@gmail.com/i);
+  });
+
+  it('Renders with a user name and email values via mouse hover', async () => {
+    const user = userEvent.setup();
+    const { getByText, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+      />,
+    );
+    await user.hover(getByTestId('trigger-button'));
+
+    getByText(/Josh Li/i);
+    getByText(/Josh@gmail.com/i);
+  });
+
+  it('Renders with a Log out button', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+      />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    getByRole('button', { name: new RegExp('Log Out', 'i') });
+  });
+
+  it('Renders with click prop', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={mockOnClick}
+      />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    const buttonEl = getByRole('button', { name: new RegExp('Log Out', 'i') });
+
+    await user.click(buttonEl);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('renders with custom text', async () => {
+    const user = userEvent.setup();
+    const { getByRole, queryByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        logOutText="Leave"
+        onClick={jest.fn()}
+      />,
+    );
+
+    await user.click(getByTestId('trigger-button'));
+
+    getByRole('button', { name: 'Log out Leave' });
+    expect(queryByRole('button', { name: 'Log Out' })).not.toBeInTheDocument();
+  });
+
+  it('renders with custom styles', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+        css={{ backgroundColor: 'pink' }}
+      />,
+    );
+
+    await user.click(getByTestId('trigger-button'));
+
+    const dialogEl = getByRole('dialog');
+    expect(dialogEl).toHaveStyle(`background-color: pink`);
+  });
+});

package/src/components/UserProfile/UserProfile.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from '@components/Avatar';
+import { UserProfile } from './UserProfile';
+
+export default {
+  title: 'Widgets/UserProfile',
+  component: UserProfile,
+} as Meta<typeof UserProfile>;
+
+export const Default: StoryObj<typeof UserProfile> = () => {
+  return (
+    <UserProfile
+      name="Josh Li"
+      email="Josh@gmail.com"
+      trigger={<Avatar size={42} image="https://via.placeholder.com/42x42" />}
+      onClick={() => alert('Clicked!')}
+    />
+  );
+};
+
+Default.args = {};

package/src/components/UserProfile/UserProfile.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from '@emotion/react';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeading,
+  PopoverTrigger,
+} from '@components/Popover';
+import { UserProfileProps } from './types';
+import {
+  UserInfo,
+  ContentWrapper,
+  LogoutWrapper,
+  ResetBtnStyles,
+  CustomButton,
+} from './styles';
+
+export const UserProfile = ({
+  name,
+  email,
+  trigger,
+  onClick,
+  logOutText = 'Log Out',
+  className,
+}: UserProfileProps) => {
+  const theme = useTheme();
+  return (
+    <Popover placement="bottom-end" interactionsEnabled="both">
+      <PopoverTrigger css={ResetBtnStyles}>{trigger}</PopoverTrigger>
+      <PopoverContent css={ContentWrapper} className={className}>
+        <div css={UserInfo}>
+          <PopoverHeading variant="h5" weight="bold">
+            {name}
+          </PopoverHeading>
+          <PopoverDescription
+            css={{ fontSize: 14, marginTop: 6 }}
+            weight="regular"
+            color={theme.colors.greyDropdownFocused}>
+            {email}
+          </PopoverDescription>
+        </div>
+        <div css={LogoutWrapper}>
+          <Button variant="info" css={CustomButton} onClick={onClick}>
+            <Icon name="log-out" size={15} color={theme.colors.white} />
+            {logOutText}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/UserProfile/index.ts

@@ -0,0 +1,2 @@
+export { UserProfile } from './UserProfile';
+export * from './types';

package/src/components/UserProfile/styles.ts

@@ -0,0 +1,47 @@
+import { Theme, css } from '@emotion/react';
+
+export const ResetBtnStyles = css`
+  padding: 0;
+  height: auto;
+  background: none;
+
+  &:focus,
+  &:hover {
+    border: none;
+    background: none;
+    box-shadow: none;
+
+    &::before {
+      border: none;
+    }
+  }
+`;
+
+export const ContentWrapper = (theme: Theme) => css`
+  width: 224px;
+  background: ${theme.colors.greyPopoverLight};
+  border-radius: 20px;
+  box-shadow: 0px 4px 15px 0px ${theme.colors.black25};
+`;
+
+export const UserInfo = css`
+  gap: 2px;
+  width: 100%;
+  padding: 10px;
+`;
+
+export const LogoutWrapper = (theme: Theme) => css`
+  width: 100%;
+  padding: 10px 10px 18px 10px;
+  border-top: 0.4px solid ${theme.colors.greyGraphite70};
+`;
+
+export const CustomButton = css`
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+`;

package/src/components/UserProfile/types.ts

@@ -0,0 +1,8 @@
+export interface UserProfileProps {
+  name: string;
+  email: string;
+  trigger: string | JSX.Element;
+  onClick: () => void;
+  logOutText?: string;
+  className?: string;
+}

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

@@ -80,3 +80,23 @@ 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';
+export { default as NavBar } from './NavBar';
+export * from './NavBar';
+export { default as ProgressInfo } from './ProgressInfo';
+export * from './ProgressInfo';
+export * from './CardList';
+export * from './Pagination';
+export * from './NotificationCard';
+export * from './LinksTabBar';
+export * from './NotificationMenu';
+export * from './SearchBox';
+export * from './UserProfile';
+export * from './AddNewAccountCard';
+export * from './PieChart';
+export * from './CollapsibleNavBar';
+export * from './Filters';
+export * from './TableFilters';

package/storybook-static/1052.f41dae10.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunk_ssa_ui_kit_core=self.webpackChunk_ssa_ui_kit_core||[]).push([[1052],{"./src/components/NotificationCard/NotificationCard.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{s:function(){return NotificationCard}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),_emotion_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/.pnpm/@emotion+react@11.11.1_@types+react@18.2.8_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js"),_ssa_ui_kit_utils__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../utils/dist/index.js"),_components_Badge__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/components/Badge/Badge.tsx"),_components_Card_CardBase__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/Card/CardBase.tsx"),_components_Icon__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Icon/Icon.tsx"),_components_Indicator__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/Indicator/Indicator.tsx"),_components_Typography__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/components/Typography/Typography.tsx"),_styles__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/NotificationCard/styles.tsx"),_emotion_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/.pnpm/@emotion+react@11.11.1_@types+react@18.2.8_react@18.2.0/node_modules/@emotion/react/dist/emotion-react.browser.esm.js");const notificationTypes={Informational:{icon:"information",color:"blueLight"},Warning:{icon:"warning",color:"yellowWarm"},Error:{icon:"attention",color:"pink"}},NotificationCard=(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function NotificationCard({title:title,children:children,text:text,isRead:isRead,type:type,time:time,onClick:onClick,className:className},ref){const theme=(0,_emotion_react__WEBPACK_IMPORTED_MODULE_1__.u)(),{getTimeAgo:getTimeAgo}=_ssa_ui_kit_utils__WEBPACK_IMPORTED_MODULE_2__.dateFormatters;return(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Card_CardBase__WEBPACK_IMPORTED_MODULE_4__.Z,{ref:ref,"data-testid":"notification",css:_styles__WEBPACK_IMPORTED_MODULE_5__.oz,className:className,noShadow:!0,onClick:()=>{"function"==typeof onClick&&onClick()}},(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Indicator__WEBPACK_IMPORTED_MODULE_6__.Z,{isVisible:!isRead},(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Badge__WEBPACK_IMPORTED_MODULE_7__.Z,{"data-testid":"badge",color:notificationTypes[type].color,css:_styles__WEBPACK_IMPORTED_MODULE_5__.L$},(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Icon__WEBPACK_IMPORTED_MODULE_8__.Z,{name:notificationTypes[type].icon,color:theme.colors.white,size:14}))),(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Typography__WEBPACK_IMPORTED_MODULE_9__.Z,{variant:"subtitle",weight:"medium",css:_styles__WEBPACK_IMPORTED_MODULE_5__.PN,color:theme.colors.greyDarker},title),(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Typography__WEBPACK_IMPORTED_MODULE_9__.Z,{variant:"body1",weight:"regular",css:_styles__WEBPACK_IMPORTED_MODULE_5__.vy,color:theme.colors.greyDarker60},text),children,(0,_emotion_react__WEBPACK_IMPORTED_MODULE_3__.tZ)(_components_Typography__WEBPACK_IMPORTED_MODULE_9__.Z,{variant:"body1",weight:"regular",css:_styles__WEBPACK_IMPORTED_MODULE_5__.Yy,color:theme.colors.greyDarker},getTimeAgo(time)))}));try{NotificationCard.displayName="NotificationCard",NotificationCard.__docgenInfo={description:"",displayName:"NotificationCard",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"string"}},isRead:{defaultValue:null,description:"",name:"isRead",required:!0,type:{name:"boolean"}},type:{defaultValue:null,description:"",name:"type",required:!0,type:{name:"NotificationType"}},time:{defaultValue:null,description:"",name:"time",required:!0,type:{name:"string | number"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"() => void"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"Key"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"Interpolation<Theme>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/NotificationCard.tsx#NotificationCard"]={docgenInfo:NotificationCard.__docgenInfo,name:"NotificationCard",path:"src/components/NotificationCard/NotificationCard.tsx#NotificationCard"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/NotificationCard/styles.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{L$:function(){return notifyBadge},PN:function(){return notifyTitle},Yy:function(){return notifyTime},c3:function(){return childrenWrapper},oz:function(){return notifyCard},vy:function(){return notifyText}});var _emotion_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/@emotion+react@11.11.1_@types+react@18.2.8_react@18.2.0/node_modules/@emotion/react/dist/emotion-react.browser.esm.js");const childrenWrapper=theme=>`\n  grid-column: 2 / span 2;\n  margin-top: 10px;\n\n  button {\n    height: 31px;\n    border-radius: 6px;\n    font-weight: 700;\n\n    &:focus::before {\n      content: none;\n    }\n\n    &:not(:last-child) {\n      margin-right: 20px;\n    }\n  }\n\n  ${theme.mediaQueries.md} {\n    margin-top: 13px;\n  }\n\n  ${theme.mediaQueries.xs} {\n    button {\n      height: 28px;\n      padding: 10px;\n\n      &:not(:last-child) {\n        margin-right: 5px;\n      }\n    }\n  }\n`,notifyCard=theme=>(0,_emotion_react__WEBPACK_IMPORTED_MODULE_0__.iv)("position:relative;display:grid;column-gap:9px;grid-template-columns:auto 1fr auto;padding:14px 12px;align-items:flex-start;&:not(:last-child){margin-bottom:5px;}",theme.mediaQueries.md,"{column-gap:12px;padding:14px 18px 14px 12px;&:not(:last-child){margin-bottom:10px;}}",theme.mediaQueries.xs,"{padding:10px 8px;}","","","","","",""),notifyBadge=theme=>(0,_emotion_react__WEBPACK_IMPORTED_MODULE_0__.iv)("display:grid;grid-row:1/span 2;height:auto;width:fit-content;padding:8px;border-radius:6px;box-shadow:-4px 12px 14px 0 #dae1e1;",theme.mediaQueries.md,"{padding:11px;border-radius:12px;svg{width:20px;height:20px;}}","","","","","",""),notifyTitle=theme=>(0,_emotion_react__WEBPACK_IMPORTED_MODULE_0__.iv)("grid-row:1;grid-column:2;margin-bottom:2px;",theme.mediaQueries.md,"{margin-top:-3px;font-size:16px;line-height:20px;}",theme.mediaQueries.xs,"{grid-row:2;}","","","","","",""),notifyText=theme=>(0,_emotion_react__WEBPACK_IMPORTED_MODULE_0__.iv)("grid-row:2;grid-column:2/span 3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:hover{overflow:visible;text-overflow:inherit;white-space:normal;}",theme.mediaQueries.md,"{font-size:13.3px;line-height:20px;overflow:visible;text-overflow:inherit;white-space:normal;}",theme.mediaQueries.xs,"{grid-row:3;}","","","","","",""),notifyTime=theme=>(0,_emotion_react__WEBPACK_IMPORTED_MODULE_0__.iv)("grid-row:1;grid-column:3;text-align:right;",theme.mediaQueries.xs,"{grid-column:2;text-align:left;}","","","","","","");try{childrenWrapper.displayName="childrenWrapper",childrenWrapper.__docgenInfo={description:"",displayName:"childrenWrapper",props:{colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"Colors"}},mediaQueries:{defaultValue:null,description:"",name:"mediaQueries",required:!0,type:{name:"{ xs: `@media${string}`; sm: `@media${string}`; md: `@media${string}`; lg: `@media${string}`; xlg: `@media${string}`; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/styles.tsx#childrenWrapper"]={docgenInfo:childrenWrapper.__docgenInfo,name:"childrenWrapper",path:"src/components/NotificationCard/styles.tsx#childrenWrapper"})}catch(__react_docgen_typescript_loader_error){}try{notifyCard.displayName="notifyCard",notifyCard.__docgenInfo={description:"",displayName:"notifyCard",props:{colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"Colors"}},mediaQueries:{defaultValue:null,description:"",name:"mediaQueries",required:!0,type:{name:"{ xs: `@media${string}`; sm: `@media${string}`; md: `@media${string}`; lg: `@media${string}`; xlg: `@media${string}`; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/styles.tsx#notifyCard"]={docgenInfo:notifyCard.__docgenInfo,name:"notifyCard",path:"src/components/NotificationCard/styles.tsx#notifyCard"})}catch(__react_docgen_typescript_loader_error){}try{notifyBadge.displayName="notifyBadge",notifyBadge.__docgenInfo={description:"",displayName:"notifyBadge",props:{colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"Colors"}},mediaQueries:{defaultValue:null,description:"",name:"mediaQueries",required:!0,type:{name:"{ xs: `@media${string}`; sm: `@media${string}`; md: `@media${string}`; lg: `@media${string}`; xlg: `@media${string}`; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/styles.tsx#notifyBadge"]={docgenInfo:notifyBadge.__docgenInfo,name:"notifyBadge",path:"src/components/NotificationCard/styles.tsx#notifyBadge"})}catch(__react_docgen_typescript_loader_error){}try{notifyTitle.displayName="notifyTitle",notifyTitle.__docgenInfo={description:"",displayName:"notifyTitle",props:{colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"Colors"}},mediaQueries:{defaultValue:null,description:"",name:"mediaQueries",required:!0,type:{name:"{ xs: `@media${string}`; sm: `@media${string}`; md: `@media${string}`; lg: `@media${string}`; xlg: `@media${string}`; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/styles.tsx#notifyTitle"]={docgenInfo:notifyTitle.__docgenInfo,name:"notifyTitle",path:"src/components/NotificationCard/styles.tsx#notifyTitle"})}catch(__react_docgen_typescript_loader_error){}try{notifyText.displayName="notifyText",notifyText.__docgenInfo={description:"",displayName:"notifyText",props:{colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"Colors"}},mediaQueries:{defaultValue:null,description:"",name:"mediaQueries",required:!0,type:{name:"{ xs: `@media${string}`; sm: `@media${string}`; md: `@media${string}`; lg: `@media${string}`; xlg: `@media${string}`; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/styles.tsx#notifyText"]={docgenInfo:notifyText.__docgenInfo,name:"notifyText",path:"src/components/NotificationCard/styles.tsx#notifyText"})}catch(__react_docgen_typescript_loader_error){}try{notifyTime.displayName="notifyTime",notifyTime.__docgenInfo={description:"",displayName:"notifyTime",props:{colors:{defaultValue:null,description:"",name:"colors",required:!0,type:{name:"Colors"}},mediaQueries:{defaultValue:null,description:"",name:"mediaQueries",required:!0,type:{name:"{ xs: `@media${string}`; sm: `@media${string}`; md: `@media${string}`; lg: `@media${string}`; xlg: `@media${string}`; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/NotificationCard/styles.tsx#notifyTime"]={docgenInfo:notifyTime.__docgenInfo,name:"notifyTime",path:"src/components/NotificationCard/styles.tsx#notifyTime"})}catch(__react_docgen_typescript_loader_error){}},"../utils/dist/index.js":function(module){self,module.exports=function(){"use strict";var e={d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{assocPath:function(){return m},callAll:function(){return r},dateFormatters:function(){return n},debounce:function(){return u},dissocPath:function(){return S},generateRange:function(){return g},mapObjIndexed:function(){return h},path:function(){return y},pathOr:function(){return b},prop:function(){return w},propOr:function(){return T},throttle:function(){return o}});var n={};e.r(n),e.d(n,{formatDate:function(){return l},formatDayOfWeek:function(){return f},formatTime:function(){return a},getTimeAgo:function(){return d},printDayOfTheWeek:function(){return s}});const r=(...e)=>(...t)=>e.forEach((e=>e?.(...t))),o=(e,t)=>{let n=!1,r=null,o=null;return[function u(...i){n?r=i:(n=!0,e(...i),o=setTimeout((()=>{n=!1,r&&(u(...r),r=null)}),t))},function(){o&&clearTimeout(o)}]},u=(e,t=200)=>{let n=null;return[(...r)=>{n&&clearTimeout(n),n=setTimeout((()=>{n&&clearTimeout(n),e(...r)}),t)},function(){n&&clearTimeout(n)}]},i=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],c={year:31536e3,month:2592e3,week:604800,day:86400,hour:3600,min:60},a=e=>new Date(e).toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit"}),f=e=>i[new Date(e).getDay()],l=e=>new Date(e).toLocaleDateString("en-US",{day:"2-digit",month:"short"}),s=e=>{switch(e){case 0:return"Sun";case 1:return"Mon";case 2:return"Tue";case 3:return"Wed";case 4:return"Thu";case 5:return"Fri";case 6:return"Sat"}},d=e=>{const t=new Date(e).getTime();if(Number.isNaN(t))throw new Error("Invalid date");const n=Math.floor((Date.now()-t)/1e3);let r;for(const e in c)if(r=Math.floor(n/c[e]),r>=1)return`${r} ${e}${r>1?"s":""} ago`;return"Just Now"},h=(e,t)=>Object.keys(t).reduce(((n,r)=>(n[r]=e(t[r],r,t),n)),{}),p=(e,t,n)=>{for(let r=t;r<n;++r)e.push(r)};var g=(e,t)=>{if(null==e||!Number.isInteger(e))throw new Error("Pages count should be an integer");if(e<=0)return[];let n=[1];if(1===e)return n;if(null!=t&&!Number.isInteger(t))throw new Error("Selected page should be an integer");if(null!=t&&(t<1||t>e))throw new Error(`Selected page ${t} is out of range`);if(t&&t>2){const r=((e,t)=>{const n=[];return t!==e&&n.push(t),t>1&&n.unshift(t-1),t+1<e&&n.push(t+1),n})(e,t),[o,,u]=r;o-2>1?n.push(-1):p(n,2,o),n=n.concat(r),e-u>2?n.push(-1):p(n,u+1,e)}else e<=5?p(n,2,e):n.push(2,3,-1);return n.push(e),n};const m=([e,...t],n)=>r=>JSON.parse(JSON.stringify({...r,[e]:t.length?m(t,n)(r[e]):n})),S=e=>t=>{const n=JSON.parse(JSON.stringify(t));return e.reduce(((t,n,r)=>(r===e.length-1&&delete t[n],t[n])),n),n},y=e=>t=>e.reduce(((e,t)=>e?.[t]),t),b=(e,t)=>n=>{const r=y(t)(n);return null==r?e:r},w=e=>t=>t?.[e],T=(e,t)=>n=>{const r=w(t)(n);return null==r?e:r};return t}()}}]);