[FRNT-485]: Generate map of component states

src/lib/map-generation.tsx

@@ -0,0 +1,190 @@
+/* eslint-disable no-loop-func */
+/* eslint-disable react/no-array-index-key */
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Global } from 'lib/global';
+import { Grid, Heading } from 'ui';
+
+export type SizeProps = 'N' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'H';
+
+type ComponentValuesType = string | boolean | SizeProps;
+
+interface ComponentProps {
+  name: string;
+  values: Array<ComponentValuesType>;
+}
+
+interface GenerateMapProps {
+  otherProps: Record<string, Array<unknown>>;
+  sizes: ComponentProps;
+  variants: ComponentProps;
+}
+
+interface SizesProps {
+  size: SizeProps;
+}
+
+const map = ({ size }: SizesProps) => ({
+  'data-size': size,
+});
+
+export const GenerateMap: React.FC<
+  GenerateMapProps & { component: React.ComponentType<unknown> }
+> = ({ sizes, variants, otherProps, component }) => {
+  const Component = component;
+  const variantsMap = generateMap({ y: sizes, x: variants, otherProps });
+
+  if (!variantsMap) return null;
+
+  return (
+    <Main>
+      {variantsMap.map((variant, i) => (
+        <VariantBlock key={i}>
+          <Header>{variant.name}</Header>
+          <GridTemplate columns={variant.columns}>
+            <AreaVariants>
+              <div />
+              {/** TODO: replace */}
+              {variant.values[0].values.map(({ variants, sizes, ...prop }, headKey) => (
+                <div key={`head-${headKey}`}>{headCreate(prop)}</div>
+              ))}
+              {variant.values.map((props, j) => (
+                <>
+                  <b>{props.name}</b>
+                  {props.values.map((prop, propKey) => (
+                    <SizeBlock size={props.name as SizeProps} key={j}>
+                      <Component prop={prop} key={`prop-${propKey}`} />
+                    </SizeBlock>
+                  ))}
+                </>
+              ))}
+            </AreaVariants>
+          </GridTemplate>
+        </VariantBlock>
+      ))}
+    </Main>
+  );
+};
+
+/** TODO */
+export const generateMap = ({ x, y, otherProps }: any) => {
+  const result = [];
+
+  if (x.values.length === 0 || y.values.length === 0) return;
+
+  for (const valueX of x.values) {
+    const yArr = [];
+    let columns = 0;
+    for (const valueY of y.values) {
+      const main = { [x.name]: valueX, [y.name]: valueY };
+
+      const map = generatePropsMap(main, otherProps);
+      yArr.push({ name: valueY, values: map });
+      columns = map.length + 1;
+    }
+    result.push({ name: valueX, values: yArr, columns });
+  }
+  return result;
+};
+
+const generatePropsMap = (
+  main: Record<string, unknown>,
+  otherProps: Record<string, Array<unknown>>,
+) => {
+  let tree = [main];
+
+  Object.keys(otherProps).forEach((key: string) => {
+    const values: Array<unknown> = otherProps[key];
+    const buffer: Array<Record<string, unknown>> = [];
+
+    values.forEach((value: unknown) => {
+      const cloned = deepCopy(tree);
+      cloned.forEach((item: Record<string, unknown>) => (item[key] = value));
+      buffer.push(...cloned);
+    });
+    tree = buffer;
+  });
+
+  return tree;
+};
+
+const deepCopy = (obj: Array<Record<string, unknown>>) => JSON.parse(JSON.stringify(obj));
+
+export const headCreate = (props: Record<string, unknown>) =>
+  Object.keys(props).reduce((acc, key) => acc + (props[key] ? key + '\n' : ''), '');
+
+const VariantBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+`;
+
+const Header = styled(Heading)`
+  padding-bottom: 15px;
+  padding-left: 5px;
+`;
+
+const GridTemplate = styled(Grid)`
+  gap: 10px;
+`;
+
+const AreaVariants = styled(Grid)`
+  gap: 10px;
+
+  color: #c4c4c4;
+  white-space: pre-line;
+`;
+
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > * {
+    margin: 5px;
+  }
+`;
+
+export const Row = styled.div`
+  display: flex;
+  & > * {
+    margin: 5px;
+  }
+`;
+
+export const Main = styled(Global)`
+  display: flex;
+  overflow: scroll;
+
+  white-space: nowrap;
+`;
+
+export const SizeBlock = styled.div.attrs(map)`
+  display: flex;
+  align-items: center;
+  margin: 5px;
+  --woly-font-size: 15px;
+
+  &[data-size='N'] {
+    --woly-component-level: 0;
+  }
+  &[data-size='XS'] {
+    --woly-component-level: 1;
+  }
+  &[data-size='S'] {
+    --woly-component-level: 2;
+  }
+  &[data-size='M'] {
+    --woly-component-level: 3;
+  }
+  &[data-size='L'] {
+    --woly-component-level: 4;
+    --woly-font-size: 18px;
+  }
+  &[data-size='XL'] {
+    --woly-component-level: 5;
+    --woly-font-size: 21px;
+  }
+  &[data-size='H'] {
+    --woly-component-level: 6;
+    --woly-font-size: 21px;
+  }
+` as StyledComponent<'div', Record<string, unknown>, SizesProps>;

src/ui/atoms/button-icon/state-props.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ButtonIcon } from 'ui';
+import { GenerateMap, SizeProps } from 'lib/map-generation';
+import { IconSearch } from 'static/icons';
+
+interface ComponentProps {
+  name: string;
+  values: Array<string | boolean>;
+}
+
+interface ButtonIconProps {
+  disabled: boolean;
+  filled: boolean;
+  sizes: SizeProps;
+  variants: string;
+}
+
+export const variants: ComponentProps = {
+  name: 'variants',
+  values: ['primary', 'secondary'],
+};
+
+export const sizes: ComponentProps = {
+  name: 'sizes',
+  values: ['N', 'XS', 'S', 'M', 'L', 'XL', 'H'],
+};
+
+export const otherProps = { disabled: [false, true], filled: [false, true] };
+
+export const ComponentButtonIcon = ({ prop }: { prop: ButtonIconProps }) => (
+  <ButtonIcon
+    icon={<IconSearch />}
+    onClick={() => console.info('ButtonIcon clicked')}
+    variant={prop.variants}
+    disabled={prop.disabled}
+    filled={prop.filled}
+  />
+);
+
+export const GenerateButtonIconMap = () => (
+  <GenerateMap
+    component={ComponentButtonIcon}
+    otherProps={otherProps}
+    sizes={sizes}
+    variants={variants}
+  />
+);

src/ui/atoms/button-icon/state.mdx

@@ -0,0 +1,9 @@
+---
+name: button-icon-map
+category: map
+package: woly
+---
+
+import {GenerateButtonIconMap } from './state-props'
+
+<GenerateButtonIconMap />

src/ui/atoms/button-icon/usage.mdx

@@ -140,6 +140,10 @@ Secondary and error variant should be used to focus user attention.
   />
 </Playground>
 
+### Map of ButtonIcon
+
+<a href="/package/woly/component/button-icon-map">See map</a>
+
 ### Props
 
 | Name      | Type                                         | Default       | Description                                        |

src/ui/atoms/button/state-props.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import { GenerateMap } from 'lib/map-generation';
+import { IconSearch } from 'static/icons';
+
+import { Button } from '.';
+
+interface ComponentProps {
+  name: string;
+  values: Array<string | boolean>;
+}
+
+interface ComponentButtonProps {
+  disabled: boolean;
+  icon: boolean;
+  outlined: boolean;
+  sizes: 'N' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'H';
+  variants: string;
+}
+
+export const variants: ComponentProps = {
+  name: 'variants',
+  values: ['primary', 'secondary'],
+};
+
+export const sizes: ComponentProps = {
+  name: 'sizes',
+  values: ['N', 'XS', 'S', 'M', 'L', 'XL', 'H'],
+};
+
+export const otherProps: Record<string, Array<unknown>> = {
+  disabled: [false, true],
+  outlined: [false, true],
+  icon: [false, true],
+};
+
+export const ComponentButton: React.FC<{ prop: ComponentButtonProps }> = ({ prop }) => (
+  <Button
+    disabled={prop.disabled}
+    icon={prop.icon ? <IconSearch /> : null}
+    onClick={() => console.log('Hi!')}
+    outlined={prop.outlined}
+    text="Button"
+    variant={prop.variants}
+  />
+);
+
+export const GenerateButton = () => (
+  <GenerateMap
+    component={ComponentButton}
+    otherProps={otherProps}
+    sizes={sizes}
+    variants={variants}
+  />
+);

src/ui/atoms/button/state.mdx

@@ -0,0 +1,9 @@
+---
+name: button-map
+category: map
+package: woly
+---
+
+import {GenerateButton } from './state-props'
+
+<GenerateButton />

src/ui/atoms/button/usage.mdx

@@ -120,6 +120,10 @@ Buttons can be placed inside the container. Button width is equal to container s
   </block.S>
 </Playground>
 
+### Map of Button
+
+<a href="/package/woly/component/button-map">See full map of button</a>
+
 ### Props
 
 | Name        | Type                | Default       | Description                                                 |