@ssa-ui-kit/core 0.0.1-alpha

package/dist/injectGlobal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/global.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@emotion/react';
+export declare const pink: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const yellow: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const yellowWarm: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const green: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const turquoise: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const purple: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const blue: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const blueLight: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const blueLightDarker: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/styles/safari-focus-outline.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Theme, SerializedStyles } from '@emotion/react';
+type OutlineFn = (theme: Theme, color?: keyof Theme['colors'], borderRadius?: string, borderStyle?: React.CSSProperties['borderStyle']) => SerializedStyles;
+export declare const focusOutline: OutlineFn;
+export declare const outlineStyles: OutlineFn;
+export {};

package/dist/themes/main.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@emotion/react';
+declare const main: Theme;
+export default main;

package/dist/types/emotion.d.ts

@@ -0,0 +1,126 @@
+/// <reference types="react" />
+export type RGBString = `rgb${string}`;
+type MakeColors<T extends Array<string>> = {
+    [K in T[number]]?: RGBString;
+};
+type Colors = MakeColors<[
+    'black25',
+    'black45',
+    'white',
+    'white60',
+    'white80',
+    'white30',
+    'dark',
+    'greyLighter',
+    'greySelectedMenuItem',
+    'greyFocused',
+    'greyFocused40',
+    'grey',
+    'grey20',
+    'grey40',
+    'greyShadow24',
+    'greyDarker',
+    'greyDarker60',
+    'greyDarker80',
+    'greyDarker14',
+    'greyDark',
+    'greyDisabled',
+    'greyDisabledCheckbox',
+    'greyButtonGradient',
+    'greyButtonGradientLight',
+    'greyBackground',
+    'greyBackgroundLight',
+    'greyPopoverLight',
+    'greyGraphite',
+    'greyGraphite70',
+    'greyShadow',
+    'greyOutline',
+    'greyShadowHover',
+    'greyDropdownMain',
+    'greyDropdownFocused',
+    'greyDropdownText',
+    'greyArrowSidebar',
+    'greyFilterIcon',
+    'greyCancelClearButton',
+    'redLighter',
+    'redLighter40',
+    'red',
+    'red40',
+    'greenLighter',
+    'greenLighter20',
+    'greenLighter40',
+    'greenLighter60',
+    'green',
+    'green20',
+    'green40',
+    'green60',
+    'greenMint',
+    'greenDark',
+    'pink',
+    'pink20',
+    'pinkDark',
+    'pinkDarker',
+    'pinkShadow40',
+    'pinkLighter',
+    'pinkLighter20',
+    'pinkLighter40',
+    'yellow',
+    'yellow20',
+    'yellowLighter',
+    'yellowLighter20',
+    'yellowLighter40',
+    'yellowWarm',
+    'yellowWarm20',
+    'yellowWarm40',
+    'turquoise',
+    'turquoise20',
+    'turquoiseShadow40',
+    'turquoiseLighter',
+    'turquoiseLighter20',
+    'turquoiseLighter40',
+    'purple',
+    'purple20',
+    'purpleLighter',
+    'purpleLighter20',
+    'purpleLighter40',
+    'purpleDark',
+    'purpleDark40',
+    'blue',
+    'blue20',
+    'blueDark',
+    'blueLightDarker',
+    'blueDropdownWithSelectedItems',
+    'blueDropdownWithSelectedItemsBorder',
+    'blueLighter',
+    'blueLighter20',
+    'blueLighter40',
+    'blueLight',
+    'blueLight20',
+    'blueLightDarker40',
+    'blueLightLighter',
+    'blueLightLighter20',
+    'blueLightLighter40',
+    'blueNotification',
+    'blueNotification40',
+    'blueButtonHoverGradientFrom',
+    'blueButtonHoverGradientTo',
+    'blueButtonActive',
+    'blueRoyal'
+]>;
+export type ColorsKeys = keyof Colors;
+type MediaQueryString = `@media${string}`;
+export interface Theme {
+    colors: Colors;
+    mediaQueries: {
+        xs: MediaQueryString;
+        sm: MediaQueryString;
+        md: MediaQueryString;
+        lg: MediaQueryString;
+        xlg: MediaQueryString;
+    };
+}
+export interface CommonProps {
+    as?: React.ElementType;
+    className?: string;
+}
+export {};

package/dist/types/global.d.ts

@@ -0,0 +1,16 @@
+import { Theme, SerializedStyles, Interpolation } from '@emotion/react';
+export interface MainSizes {
+    small: SerializedStyles;
+    medium: SerializedStyles;
+    large: SerializedStyles;
+}
+export interface MainColors {
+    pink: Interpolation<Theme>;
+    yellow: Interpolation<Theme>;
+    yellowWarm: Interpolation<Theme>;
+    green: Interpolation<Theme>;
+    turquoise: Interpolation<Theme>;
+    purple: Interpolation<Theme>;
+    blueLight: Interpolation<Theme>;
+    blue: Interpolation<Theme>;
+}

package/jest-setup.ts

@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom/extend-expect';
+import { createSerializer, matchers } from '@emotion/jest';
+
+import { initRender } from './customTest';
+import theme from '@themes/main';
+
+const customRender = initRender(theme);
+
+declare global {
+  // eslint-disable-next-line no-var
+  var render: typeof customRender;
+}
+
+global.render = customRender;
+
+expect.addSnapshotSerializer(createSerializer());
+expect.extend(matchers);

package/lostpixel.config.ts

@@ -0,0 +1,26 @@
+import { baseConfig } from '../../lostpixel.base.config';
+import { SCREEN_SIZES } from './src/consts';
+import { CustomProjectConfig } from 'lost-pixel';
+
+const breakpoints = Object.keys(SCREEN_SIZES).map(Number);
+
+const coreConfig: Partial<CustomProjectConfig> & {
+  storybookShots: {
+    breakpoints: number[];
+  };
+} = {
+  storybookShots: {
+    storybookUrl: './packages/core/storybook-static',
+    breakpoints,
+    // https://docs.lost-pixel.com/user-docs/api-reference/mask
+    mask: [{ selector: '.lostpixel-ignore' }],
+  },
+  // @cspell:disable-next-line
+  lostPixelProjectId: 'clldrwk2t4dkena0e4nu2rikp',
+};
+
+export const config: Partial<CustomProjectConfig> & {
+  storybookShots: {
+    breakpoints: number[];
+  };
+} = Object.assign({}, baseConfig, coreConfig);

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@ssa-ui-kit/core",
+  "version": "0.0.1-alpha",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "private": false,
+  "sideEffects": false,
+  "author": "SSA Group",
+  "license": "MIT",
+  "description": "SSA UI Kit",
+  "keywords": [
+    "react",
+    "SSA UI Kit",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ssagroup/ui-kit.git",
+    "directory": "packages/core"
+  },
+  "devDependencies": {
+    "@emotion/jest": "^11.11.0",
+    "@nivo/line": "0.83.0",
+    "@playwright/test": "^1.37.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "@types/uuid": "^9.0.3",
+    "resolve-tspaths": "^0.8.16",
+    "storybook-addon-pseudo-states": "^2.1.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.85.0"
+  },
+  "dependencies": {
+    "@emotion/core": "^11.0.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "0.25.4",
+    "dotenv": "^16.0.3",
+    "js-tokens": "^4.0.0",
+    "loose-envify": "^1.4.0",
+    "scheduler": "^0.23.0",
+    "uuid": "^9.0.0",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
+  },
+  "browserslist": [
+    ">0.1%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "peerDependencies": {
+    "@emotion/core": "^11.0.0",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-hook-form": "^7.46.1"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "jest -i --no-cache",
+    "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "sb:dev": "storybook dev -p 6006",
+    "sb:build": "storybook build",
+    "test:e2e": "pnpm exec playwright test --project=chromium",
+    "test:e2e:ui": "pnpm exec playwright test --project=chromium --ui",
+    "test:e2e:debug": "pnpm exec playwright test --project=chromium --debug",
+    "ts-show-config-build": "tsc --showConfig -p ./tsconfig.build.json",
+    "ts-show-config": "tsc --showConfig -p ./tsconfig.json",
+    "ts-check": "tsc --noEmit -p ./tsconfig.json",
+    "ts-check-build": "tsc -p ./tsconfig.build.json"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@playwright/test';
+import { createConfig } from '../../playwright.base.config';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig(createConfig());

package/src/components/AccordionGroup/Accordion.tsx

@@ -0,0 +1,30 @@
+import CardBase from '@components/Card/CardBase';
+import { AccordionViewProps } from './types';
+import { wrapperStyles } from './styles';
+
+export const Accordion = ({
+  title,
+  isOpened,
+  ariaControls,
+  id,
+  size = 'empty',
+  renderTitle,
+  renderContent,
+  onClick,
+  ...rest
+}: AccordionViewProps) => (
+  <CardBase
+    role="region"
+    tabIndex={0}
+    title={title}
+    css={wrapperStyles[size]}
+    {...rest}>
+    {renderTitle({ id, isOpened, title, size, ariaControls, onClick })}
+    {renderContent({
+      id: `${ariaControls}`,
+      isOpened,
+      size,
+      ...{ ['aria-labelledby']: `${id}` },
+    })}
+  </CardBase>
+);

package/src/components/AccordionGroup/AccordionContent.tsx

@@ -0,0 +1,21 @@
+import CardContent from '@components/CardContent';
+import { RenderContentProps } from './types';
+import { createContentStyles } from './styles';
+import { useTheme } from '@emotion/react';
+
+export const AccordionContent = ({
+  isOpened,
+  children,
+  size = 'empty',
+  ...rest
+}: RenderContentProps & {
+  children: React.ReactNode;
+}) => {
+  const theme = useTheme();
+  const styles = createContentStyles(theme, isOpened);
+  return (
+    <CardContent css={styles[size]} {...rest}>
+      {children}
+    </CardContent>
+  );
+};

package/src/components/AccordionGroup/AccordionContext.tsx

@@ -0,0 +1,66 @@
+import { createContext, useState, useContext } from 'react';
+import { AccordionProps, IAccordionGroupContext } from './types';
+
+export const AccordionGroupContext = createContext<IAccordionGroupContext>(
+  {} as IAccordionGroupContext,
+);
+
+export const useAccordionGroupContext = () => useContext(AccordionGroupContext);
+
+const useAccordionGroup = (): IAccordionGroupContext => {
+  const [openedAccordions, setOpenedAccordions] = useState<AccordionProps[]>(
+    [],
+  );
+  const [stayOpen, setStayOpen] = useState<boolean>(false);
+
+  const toggleOpenedAccordion = (accordion: AccordionProps) => {
+    const isOpened = !!openedAccordions.find(
+      (activeAccordion) => activeAccordion.id === accordion.id,
+    );
+    if (stayOpen) {
+      const newOpenedAccordions = isOpened
+        ? openedAccordions.filter(
+            (activeAccordion) => activeAccordion.id !== accordion.id,
+          )
+        : openedAccordions.concat([accordion]);
+      setOpenedAccordions(newOpenedAccordions);
+    } else {
+      setOpenedAccordions(isOpened ? [] : [accordion]);
+    }
+  };
+
+  return {
+    openedAccordions,
+    stayOpen,
+    setOpenedAccordions,
+    toggleOpenedAccordion,
+    setStayOpen,
+  };
+};
+
+export const AccordionGroupContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const {
+    openedAccordions,
+    stayOpen,
+    setOpenedAccordions,
+    toggleOpenedAccordion,
+    setStayOpen,
+  } = useAccordionGroup();
+
+  return (
+    <AccordionGroupContext.Provider
+      value={{
+        openedAccordions,
+        stayOpen,
+        setOpenedAccordions,
+        toggleOpenedAccordion,
+        setStayOpen,
+      }}>
+      {children}
+    </AccordionGroupContext.Provider>
+  );
+};

package/src/components/AccordionGroup/AccordionGroup.spec.tsx

@@ -0,0 +1,191 @@
+import { within } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/dom';
+
+import { AccordionGroupContextProvider } from './AccordionContext';
+import { AccordionSize } from './types';
+import { AccordionTemplate } from './stories/helpers';
+
+interface AccordionTest {
+  id: string;
+  ariaControls: string;
+  title: string;
+  text: string;
+  opened: boolean;
+}
+
+interface ComponentAccordionTests {
+  (
+    describeBlockName: string,
+    size: AccordionSize,
+    getAccordionText: (accordion: AccordionTest) => string,
+  ): void;
+}
+
+const ACCORDIONS_COUNT = 3;
+const accordions: Array<AccordionTest> = [
+  {
+    id: 'first',
+    ariaControls: 'first-panel',
+    title: 'Basic',
+    opened: false,
+    text: 'BasicCarrot upLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend, dui in commodo porttitor, neque metus lobortis sem, at suscipit arcu ligula non enim.',
+  },
+  {
+    id: 'second',
+    ariaControls: 'second-panel',
+    title: 'Advanced',
+    opened: true,
+    text: 'AdvancedCarrot downLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend, dui in commodo porttitor, neque metus lobortis sem, at suscipit arcu ligula non enim.',
+  },
+  {
+    id: 'third',
+    ariaControls: 'third-panel',
+    title: 'Indicator',
+    opened: false,
+    text: 'BasicCarrot upLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend, dui in commodo porttitor, neque metus lobortis sem, at suscipit arcu ligula non enim.',
+  },
+];
+
+const componentAccordionTests: ComponentAccordionTests = (
+  describeBlockName,
+  size,
+  getAccordionText,
+) => {
+  const checkAccordionPanel = (
+    accordion: AccordionTest,
+    accordionEl: HTMLElement,
+  ) => {
+    expect(accordionEl).toHaveAttribute('id', accordion.id);
+    expect(accordionEl).toHaveAttribute(
+      'aria-controls',
+      accordion.ariaControls,
+    );
+    expect(accordionEl).toHaveTextContent('BasicCarrot down');
+  };
+
+  describe(describeBlockName, () => {
+    function setup(params: Parameters<typeof AccordionTemplate>[0] = {}) {
+      return {
+        user: userEvent.setup(),
+        ...render(
+          <AccordionGroupContextProvider>
+            <AccordionTemplate size={size} {...params} />
+          </AccordionGroupContextProvider>,
+        ),
+      };
+    }
+
+    it('Renders AccordionGroup', () => {
+      const { getByTestId } = setup();
+      const accordionListElement = getByTestId('accordion-group');
+      const accordionEls = within(accordionListElement).getAllByRole('region');
+
+      expect(accordionEls.length).toBe(ACCORDIONS_COUNT);
+      expect(screen.getAllByRole('region').length).toBe(ACCORDIONS_COUNT);
+
+      for (let i = 0; i < accordions.length - 1; ++i) {
+        const accordion = accordions[i];
+        const accordionGroupEl = accordionEls[i];
+        const accordionTitleEl = within(accordionEls[i]).getByTestId(
+          'accordion-title',
+        );
+
+        expect(accordionTitleEl).toHaveAttribute('id', accordion.id);
+        expect(accordionTitleEl).toHaveAttribute(
+          'aria-expanded',
+          `${accordion.opened}`,
+        );
+        expect(accordionGroupEl).toHaveAttribute('tabindex', '0');
+        expect(accordionTitleEl).toHaveAttribute(
+          'aria-controls',
+          accordion.ariaControls,
+        );
+
+        const textContents = getAccordionText(accordion);
+
+        expect(accordionGroupEl).toHaveTextContent(textContents);
+        expect(accordionGroupEl.getAttribute('title')).toEqual(accordion.title);
+      }
+    });
+
+    it("Marks an accordion #1 as active and accordion #2 as inactive when they're clicked [accordionStayOpen = true]", async () => {
+      const { user } = setup();
+      let accordionListElement = screen.getByTestId('accordion-group');
+      const chapterTitle = accordionListElement.querySelectorAll('button');
+
+      await user.click(chapterTitle[0]);
+      await user.click(chapterTitle[1]);
+
+      accordionListElement = screen.getByTestId('accordion-group');
+      const accordionEls = within(accordionListElement).getAllByRole('region');
+
+      for (let i = 0; i < accordions.length; ++i) {
+        const accordion = accordions[i];
+        const accordionGroupEl = accordionEls[i];
+        const accordionTitleEl = within(accordionEls[i]).getByTestId(
+          'accordion-title',
+        );
+
+        if (i === 0) {
+          expect(accordionTitleEl).toHaveAttribute('aria-expanded', 'true');
+
+          checkAccordionPanel(accordion, accordionTitleEl);
+        } else {
+          expect(accordionTitleEl).toHaveAttribute('aria-expanded', 'false');
+        }
+
+        expect(accordionTitleEl).toHaveAttribute('id', accordion.id);
+        expect(accordionGroupEl).toHaveAttribute('tabindex', '0');
+        expect(accordionTitleEl).toHaveAttribute(
+          'aria-controls',
+          accordions[i].ariaControls,
+        );
+        expect(accordionGroupEl.getAttribute('title')).toEqual(accordion.title);
+      }
+    });
+
+    it('Marks an accordion #1 as active and accordion #2 as inactive when clicked on accordion #1 [accordionStayOpen = false]', async () => {
+      const { user } = setup({ accordionsStayOpen: false });
+      const accordionListElement = screen.getByTestId('accordion-group');
+      const chapterTitle = accordionListElement.querySelectorAll('button');
+
+      await user.click(chapterTitle[0]);
+
+      const accordionEls = within(accordionListElement).getAllByRole('region');
+
+      for (let i = 0; i < accordions.length; ++i) {
+        const accordion = accordions[i];
+        const accordionGroupEl = accordionEls[i];
+        const accordionTitleEl = within(accordionEls[i]).getByTestId(
+          'accordion-title',
+        );
+
+        if (i === 0) {
+          expect(accordionTitleEl).toHaveAttribute('aria-expanded', 'true');
+
+          checkAccordionPanel(accordion, accordionTitleEl);
+        } else {
+          expect(accordionTitleEl).toHaveAttribute('aria-expanded', 'false');
+        }
+
+        expect(accordionTitleEl).toHaveAttribute('id', accordion.id);
+        expect(accordionGroupEl).toHaveAttribute('tabindex', '0');
+        expect(accordionTitleEl).toHaveAttribute(
+          'aria-controls',
+          accordions[i].ariaControls,
+        );
+        expect(accordionTitleEl.textContent).toEqual(
+          `${accordion.title}Carrot ${i === 0 ? 'down' : 'up'}`,
+        );
+      }
+    });
+  });
+};
+
+describe('AccordionGroup', () => {
+  componentAccordionTests('Large', 'large', (accordion) => accordion.text);
+  componentAccordionTests('Medium', 'medium', (accordion) => accordion.text);
+  componentAccordionTests('Small', 'small', (accordion) => accordion.text);
+  componentAccordionTests('Empty', 'empty', (accordion) => accordion.text);
+});

package/src/components/AccordionGroup/AccordionGroup.tsx

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
+import { useAccordionGroupContext } from './AccordionContext';
+import { AccordionGroupProps, AccordionProps } from './types';
+
+const AccordionBase = styled.div``;
+
+export const AccordionGroup = ({
+  children,
+  size = 'empty',
+  accordionsStayOpen = true,
+  ...rest
+}: AccordionGroupProps) => {
+  const {
+    openedAccordions,
+    setOpenedAccordions,
+    toggleOpenedAccordion,
+    setStayOpen,
+  } = useAccordionGroupContext();
+
+  useEffect(() => {
+    setStayOpen(accordionsStayOpen);
+  }, []);
+
+  useLayoutEffect(() => {
+    const initialAccordions: AccordionProps[] = [];
+    Children.map(children, (child) => {
+      if (isValidElement(child) && child.props.isOpened) {
+        const { renderContent, renderTitle, ...rest } = child.props;
+        initialAccordions.push({
+          id: rest.id,
+          renderContent: renderContent.bind(null, rest),
+          renderTitle: renderTitle.bind(null, rest),
+        });
+      }
+    });
+    setOpenedAccordions(initialAccordions);
+  }, []);
+
+  return (
+    <AccordionBase data-testid="accordion-group" tabIndex={0} {...rest}>
+      {Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          const { renderContent, renderTitle, ...rest } = child.props;
+          const id = rest.id;
+          const isOpened = !!openedAccordions?.find(
+            (activeAccordion) => activeAccordion.id === id,
+          );
+
+          return cloneElement(child, {
+            key: id,
+            isOpened,
+            size,
+            onClick: () =>
+              toggleOpenedAccordion({
+                id,
+                renderContent: renderContent.bind(null, rest),
+                renderTitle: renderTitle.bind(null, rest),
+              }),
+          });
+        }
+      })}
+    </AccordionBase>
+  );
+};