Merge pull request #154 from KasperskyLab/feature/publish-hexa-ui-charts-07-15

feat: publish @kaspersky/hexa-ui-charts

Author: vostrik

packages/kaspersky-hexa-ui-charts/.eslintrc.js

@@ -13,3 +13,7 @@ dist/
 .eslintcache
 
 *storybook.log
+
+playwright-report/
+storybook-static/
+test-results/

packages/kaspersky-hexa-ui-charts/.gitignore

@@ -5,4 +5,4 @@ module.exports.ok = noop
 module.exports.strictEqual = noop
 module.exports.deepEqual = noop
 module.exports.fail = noop
-module.exports.equal = noop
+module.exports.equal = noop

packages/kaspersky-hexa-ui-charts/.storybook/assert-stub.js

@@ -0,0 +1,32 @@
+import { Grid, GridItem } from '@kaspersky/hexa-ui'
+import { Space } from '@kaspersky/hexa-ui'
+import { Text } from '@kaspersky/hexa-ui'
+import React, { FC, useMemo } from 'react'
+
+import { productColors } from '@kaspersky/hexa-ui-core/colors/js'
+import { StatusNoThreadOutline, StatusOkOutline } from '@kaspersky/hexa-ui-icons/24'
+
+import { metaDod, MetaDodProps } from './types'
+
+type MetaDodKeys = keyof MetaDodProps['list']
+
+export const MetaDod: FC<MetaDodProps> = ({ list }: MetaDodProps) => {
+  const metaDodKeys = useMemo(() => Object.keys(metaDod) as MetaDodKeys[], [])
+
+  return (
+    <Grid layout={{ cols: ['repeat(2, 240px)'] }}>
+      {metaDodKeys.map(key =>
+        <GridItem key={key}>
+          <Space size={8}>
+            {list[key]
+              ? <StatusOkOutline color={productColors.icon.status.statusgrass.light} />
+              : <StatusNoThreadOutline color={productColors.icon.status.statusneutral.light} />}
+            <Text>
+              {metaDod[key]}
+            </Text>
+          </Space>
+        </GridItem>
+      )}
+    </Grid>
+  )
+}

packages/kaspersky-hexa-ui-charts/.storybook/components/Meta/MetaDod.tsx

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

packages/kaspersky-hexa-ui-charts/.storybook/components/Meta/index.ts

@@ -0,0 +1,20 @@
+export type MetaList = {
+  dod?: MetaDodProps['list'],
+  component?: string,
+  description?: string,
+  usage?: string,
+  designLink?: string,
+  pixsoView?: string
+}
+
+export const metaDod = {
+  designTokens: 'Design tokens',
+  unitTests: 'Unit tests',
+  screenshotTests: 'Screenshot tests',
+  storybook: 'Storybook',
+  pixsoView: 'Pixso'
+}
+
+export type MetaDodProps = {
+  list: Partial<Record<keyof typeof metaDod, boolean>>
+}

packages/kaspersky-hexa-ui-charts/.storybook/components/Meta/types.ts

@@ -0,0 +1,73 @@
+
+import { Link, Markdown } from '@kaspersky/hexa-ui'
+import { Space } from '@kaspersky/hexa-ui'
+import { Heading, Text } from '@kaspersky/hexa-ui'
+import React from 'react'
+import styled from 'styled-components'
+
+import { MetaDod } from './MetaDod'
+import { MetaList } from './types'
+
+const StyledHeading = styled(Heading)`
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+`
+
+const StyledLink = styled(Link)`
+  height: 20px !important;
+  > span {
+    font-family: inherit !important;
+    font-size: inherit !important;
+  }
+`
+
+export function withMeta (
+  list: MetaList,
+  Component?: React.FC
+): React.FC {
+  const setMeta = (props: any) => {
+    return (
+      <Space gap={32} direction="vertical" align="start">
+        <Space gap={16} direction="vertical" align="start">
+          <StyledHeading type="H2">{list?.component}</StyledHeading>
+          {(list?.pixsoView || list?.designLink) && (
+            <Space gap={16}>
+              {list?.pixsoView && (
+                <StyledLink
+                  href={list.pixsoView}
+                  target="_blank"
+                  decoration="icon"
+                  size="medium"
+                >
+                  Документация в Pixso
+                </StyledLink>
+              )}
+              {list?.designLink && (
+                <StyledLink
+                  href={list.designLink}
+                  target="_blank"
+                  decoration="icon"
+                  size="medium"
+                >
+                  Компонент в Pixso
+                </StyledLink>
+              )}
+            </Space>
+          )}
+        </Space>
+        <Space gap={16} direction="vertical" align="start">
+          <Heading type="H4">Назначение</Heading>
+          <Markdown value={list?.usage || '-'} />
+        </Space>
+        {list?.description && <Space gap={16} direction="vertical" align="start">
+          <Heading type="H4">Технические особенности</Heading>
+             <Markdown value={list?.description ?? '-'} />
+        </Space>}
+        {list?.dod && <MetaDod list={list.dod} />}
+        {Component && <Component {...props} />}
+      </Space>
+    )
+  }
+  return setMeta
+}

packages/kaspersky-hexa-ui-charts/.storybook/components/Meta/withMeta.tsx

@@ -1,4 +1,3 @@
-import { random } from "lodash"
 import { add, Duration } from 'date-fns'
 import { IStackedChartData } from "../src/types/chartData"
 
@@ -14,28 +13,60 @@ const numberFormatter = new Intl.NumberFormat('en-US', {
   style: 'percent'
 })
 
-export function generateData (total = 1, totalInStack = 5, maxRandomValue = 1000): IStackedChartData {
-  return Array.from({ length: total }).map((_, idx) => ({
-    name: numberFormatter.format(idx),
-    color: colors[idx % colors.length],
-    data: Array.from({ length: totalInStack }).map((_, idx) => ({ metric: 10 * idx, value: random(0, maxRandomValue), originalPayload: idx.toString() }))
-  }))
+const FIXED_NOW = new Date(Date.UTC(2026, 0, 1, 12, 0, 0));
+
+export const getStableValue = (
+  maxValue: number,
+  pointIndex: number,
+  seriesIndex = 0,
+): number => {
+  if (maxValue <= 0) {
+    return 0;
+  }
+
+  return (
+    ((pointIndex + 1) * 137 +
+      (seriesIndex + 1) * 71 +
+      (pointIndex + 1) * (seriesIndex + 1) * 29) %
+    (maxValue + 1)
+  );
+};
+
+export function generateData(
+  total = 1,
+  totalInStack = 5,
+  maxRandomValue = 1000,
+): IStackedChartData {
+  return Array.from({ length: total }).map((_, seriesIndex) => ({
+    name: numberFormatter.format(seriesIndex),
+    color: colors[seriesIndex % colors.length],
+    data: Array.from({ length: totalInStack }).map((_, pointIndex) => ({
+      metric: 10 * pointIndex,
+      value: getStableValue(maxRandomValue, pointIndex, seriesIndex),
+      originalPayload: pointIndex.toString(),
+    })),
+  }));
 }
 
-const now = new Date()
-
-export function generateTimelineData (total = 1, totalInStack = 20, maxRandomValue = 1000, durationType: keyof Duration = 'days', title?: string): IStackedChartData {
-  return Array.from({ length: total }).map((_, idx) => ({
-    name: numberFormatter.format(idx),
-    color: colors[idx % colors.length],
-    data: Array.from({ length: totalInStack }).map((_, idx) => {
-      const metric = add(now, { [durationType]: idx })
-
-      return ({ metric,
-        value: random(maxRandomValue),
-        originalPayload: add(now, { [durationType]: idx }),
-        title: title && ((metric: string) => `${title}${metric}`) })
-      })
-    })
-  )
+export function generateTimelineData(
+  total = 1,
+  totalInStack = 20,
+  maxRandomValue = 1000,
+  durationType: keyof Duration = 'days',
+  title?: string,
+): IStackedChartData {
+  return Array.from({ length: total }).map((_, seriesIndex) => ({
+    name: numberFormatter.format(seriesIndex),
+    color: colors[seriesIndex % colors.length],
+    data: Array.from({ length: totalInStack }).map((_, pointIndex) => {
+      const metric = add(FIXED_NOW, { [durationType]: pointIndex });
+
+      return {
+        metric,
+        value: getStableValue(maxRandomValue, pointIndex, seriesIndex),
+        originalPayload: metric,
+        title: title && ((metric: string) => `${title}${metric}`),
+      };
+    }),
+  }));
 }

packages/kaspersky-hexa-ui-charts/.storybook/data.ts

@@ -0,0 +1,33 @@
+import { GlobalStyle } from '@kaspersky/hexa-ui/design-system'
+import { ThemeProvider } from '@kaspersky/hexa-ui/design-system'
+import { themeColors } from '@kaspersky/hexa-ui/design-system'
+import { ThemeKey } from '@kaspersky/hexa-ui/design-system'
+import React, { FC, HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+export const withThemeProvider = (Story: FC, context: any) => {
+  const themeKey = context.globals.theme || ThemeKey.Light
+  const direction = context.globals.direction || 'ltr'
+
+  return (
+    <ThemeProvider theme={themeKey}>
+      <GlobalStyle />
+      <StoryLayoutContainer theme={themeKey} dir={direction}>
+        <Story {...context} theme={themeKey} />
+      </StoryLayoutContainer>
+    </ThemeProvider>
+  )
+}
+
+export const StoryLayoutContainer = styled.div<HTMLAttributes<HTMLDivElement>>(
+  (props: { theme: ThemeKey, inverted?: boolean }) => ({
+    display: 'flex',
+    gap: '16px',
+    flexWrap: 'wrap',
+    padding: '1.5rem',
+    margin: '-1rem',
+    alignItems: 'flex-start',
+    minHeight: '100vh',
+    background: props.inverted ? props.theme === ThemeKey.Light ? '#AB94F1' : '#1DA189' : themeColors.bg.base[props.theme]
+  })
+)

packages/kaspersky-hexa-ui-charts/.storybook/decorators/withThemeProvider.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+
+export const withVisualData = (Story: FC, context: any) => {
+  const visual = context.parameters.visual;
+
+  return (
+    <div
+      data-visual-root
+      data-visual-delay-ms={visual?.delayMs ?? 0}
+    >
+      <Story {...context} />
+    </div>
+  );
+};