feat: add priority-weight matrix

src/dev/global.ts

@@ -53,46 +53,55 @@ export const Global = styled(WolyGlobalStyles)`
   --woly-backdrop: hsla(var(--bw-0), 0.3);
   --woly-shadow: 3px 3px 9px hsla(0, 0%, 22%, 12%);
 
-  ${createPriority({
-    priorityName: 'default',
-    paletteName: 'bw',
-    bwPaletteName: 'bw',
-    weight: 'fill',
-  })}
+  [data-priority='white'] {
+    --woly-shape-default: hsla(var(--bw-0), 1);
+    --woly-shape-disabled: hsla(var(--bw-200), 1);
+    --woly-shape-hover: hsla(var(--bw-400), 1);
+    --woly-shape-active: hsla(var(--bw-600), 1);
+
+    --woly-shape-text-default: hsla(var(--bw-1000), 1);
+    --woly-shape-text-disabled: hsla(var(--bw-300), 1);
+    --woly-shape-text-hover: hsla(var(--bw-1000), 1);
+    --woly-shape-text-active: hsla(var(--bw-1000), 1);
+
+    --woly-canvas-default: transparent;
+    --woly-canvas-disabled: hsla(var(--bw-200), 1);
+    --woly-canvas-hover: transparent;
+    --woly-canvas-active: transparent;
+
+    --woly-canvas-text-default: hsla(var(--bw-1000), 1);
+    --woly-canvas-text-disabled: hsla(var(--bw-300), 1);
+    --woly-canvas-text-hover: hsla(var(--bw-600), 1);
+    --woly-canvas-text-active: hsla(var(--bw-700), 1);
+  }
 
   ${createPriority({
-    priorityName: 'white',
+    priorityName: 'default',
     paletteName: 'bw',
     bwPaletteName: 'bw',
-    weight: 'transparent',
   })}
 
   ${createPriority({
     priorityName: 'primary',
     paletteName: 'primary',
     bwPaletteName: 'bw',
-    weight: 'fill',
   })}
 
   ${createPriority({
     priorityName: 'secondary',
     paletteName: 'secondary',
     bwPaletteName: 'bw',
-    weight: 'fill',
   })}
 
-
   ${createPriority({
     priorityName: 'danger',
     paletteName: 'danger',
     bwPaletteName: 'bw',
-    weight: 'fill',
   })}
 
   ${createPriority({
     priorityName: 'success',
     paletteName: 'success',
     bwPaletteName: 'bw',
-    weight: 'fill',
   })}
 `;

src/dev/maps/common/combination.ts

@@ -0,0 +1,35 @@
+type VaritationsMap = Record<string, readonly unknown[]>;
+
+export function createCombinations(obj: VaritationsMap) {
+  const fieldNames = Object.keys(obj);
+
+  if (fieldNames.length === 0) return [{}];
+
+  function _combinations<Combination extends string[]>(
+    [key, ...restKeys]: Combination,
+    combinations: Record<string, unknown[]>,
+  ): Record<string, unknown>[] {
+    const possibleValues = obj[key];
+
+    if (!Array.isArray(possibleValues) || possibleValues.length === 0) {
+      throw new Error(`Please provide a non-empty array of possible values for prop ${key}`);
+    }
+
+    const variation = possibleValues.map((fieldValue) => ({
+      ...combinations,
+      [key]: fieldValue,
+    }));
+
+    if (restKeys.length === 0) {
+      return variation;
+    }
+
+    return flatMap(variation, (newAcc) => _combinations(restKeys, newAcc));
+  }
+
+  return _combinations(fieldNames, {});
+}
+
+function flatMap<T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => Array<T>) {
+  return arr.map(fn).reduce((a, b) => a.concat(b));
+}

src/dev/maps/common/group-by-key.ts

@@ -0,0 +1,16 @@
+export function groupByKey<Variants extends Record<string, unknown>, Key extends keyof Variants>(
+  arr: Variants[],
+  key: Key,
+  keyMapper?: (fn: Variants[Key]) => string,
+) {
+  return arr.reduce<Record<string, Variants[]>>((all, current) => {
+    const valueAsKey = keyMapper ? keyMapper(current[key]) : `${current[key]}`;
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (all[valueAsKey] === undefined) {
+      all[valueAsKey] = [];
+    }
+    all[valueAsKey].push(current);
+    return all;
+  }, {});
+}

src/dev/maps/priority-weight-map.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Global } from 'dev/global';
+import { Grid, Heading } from 'ui';
+
+import { createCombinations } from './common/combination';
+import { groupByKey } from './common/group-by-key';
+
+export const priorities = ['default', 'primary', 'secondary', 'white', 'danger', 'success'];
+
+interface ThemeProps {
+  weight: string;
+  priority: string;
+  disabled: boolean;
+}
+
+interface PriorityWeightMapProps {
+  weights: ('fill' | 'outline' | 'goast' | 'transparent')[];
+  render: (props: ThemeProps) => React.ReactElement;
+}
+
+export const PriorityWeightMap = ({ weights, render }: PriorityWeightMapProps) => {
+  const allCombinations = createCombinations({
+    weight: weights,
+    priority: priorities,
+    disabled: [true, false],
+  });
+
+  if (Object.keys(allCombinations).length === 0) return null;
+
+  return (
+    <Wrapper>
+      {Object.entries(groupByKey(allCombinations, 'priority')).map(
+        ([priority, combinations], index) => {
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <PriorityGroup key={index}>
+              <Header>{priority}</Header>
+              <GridTemplate columns={weights.length + 1}>
+                <div /> {/* plug to make empty space at top left corner */}
+                {weights.map((weight, index) => (
+                  <Centered key={index}>
+                    <b>{weight}</b>
+                  </Centered>
+                ))}
+                {Object.entries(
+                  groupByKey(combinations, 'disabled', (key) => (key ? 'normal' : 'disable')),
+                ).map(([state, variations], index) => {
+                  return (
+                    <React.Fragment key={index}>
+                      <Centered>
+                        <b>{state}</b>
+                      </Centered>
+                      {variations.map((variation, index) => {
+                        const { disabled, ...props } = variation as ThemeProps;
+
+                        return (
+                          <VariantCell key={index}>
+                            {render({ ...props, disabled: state === 'disable' })}
+                          </VariantCell>
+                        );
+                      })}
+                    </React.Fragment>
+                  );
+                })}
+              </GridTemplate>
+            </PriorityGroup>
+          );
+        },
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Global)`
+  display: flex;
+  flex-direction: row;
+  overflow-y: auto;
+`;
+
+const PriorityGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+`;
+
+const VariantCell = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+  padding: 20px;
+`;
+
+const Header = styled(Heading)`
+  padding-bottom: 15px;
+  padding-left: 5px;
+`;
+
+const GridTemplate = styled(Grid)`
+  gap: 10px;
+
+  color: #c4c4c4;
+  white-space: pre-line;
+`;
+
+const Centered = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

src/dev/playground.tsx

@@ -10,9 +10,9 @@ import { block } from './block';
 export { block };
 
 interface Props {
-  size: keyof typeof block;
-  direction: 'vertical' | 'horizontal';
-  configurators: ConfiguratorName[];
+  size?: keyof typeof block;
+  direction?: 'vertical' | 'horizontal';
+  configurators?: ConfiguratorName[];
 }
 
 export const Playground: React.FC<Props> = ({

src/lib/priority.tsx

@@ -4,54 +4,31 @@ interface PriorityType {
   bwPaletteName: string;
   paletteName: string;
   priorityName: string;
-  weight: 'fill' | 'transparent';
 }
 
-export const createPriority = ({
-  bwPaletteName,
-  paletteName,
-  priorityName,
-  weight,
-}: PriorityType) => {
+export const createPriority = ({ bwPaletteName, paletteName, priorityName }: PriorityType) => {
   const colors: Record<string, string> = {
-    'shape-default': `hsla(var(--${bwPaletteName}-0), 1)`,
+    'shape-default': `hsla(var(--${paletteName}-500), 1)`,
     'shape-disabled': `hsla(var(--${paletteName}-200), 1)`,
-    'shape-hover': `hsla(var(--${bwPaletteName}-400), 1)`,
-    'shape-active': `hsla(var(--${bwPaletteName}-600), 1)`,
+    'shape-hover': `hsla(var(--${paletteName}-600), 1)`,
+    'shape-active': `hsla(var(--${paletteName}-700), 1)`,
 
-    'shape-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`,
+    'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`,
     'shape-text-disabled': `hsla(var(--${paletteName}-300), 1)`,
-    'shape-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`,
-    'shape-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`,
+    'shape-text-hover': `hsla(var(--${bwPaletteName}-0), 1)`,
+    'shape-text-active': `hsla(var(--${bwPaletteName}-0), 1)`,
 
     'canvas-default': `transparent`,
     'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`,
-    'canvas-hover': `transparent`,
-    'canvas-active': `transparent`,
+    'canvas-hover': `hsla(var(--${paletteName}-600), 1)`,
+    'canvas-active': `hsla(var(--${paletteName}-700), 1)`,
 
-    'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1);`,
-    'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`,
-    'canvas-text-hover': `hsla(var(--${paletteName}-600), 1);`,
-    'canvas-text-active': `hsla(var(--${paletteName}-700), 1);`,
+    'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`,
+    'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1)`,
+    'canvas-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`,
+    'canvas-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`,
   };
 
-  if (weight === 'fill') {
-    colors['shape-default'] = `hsla(var(--${paletteName}-500), 1)`;
-    colors['shape-disabled'] = `hsla(var(--${paletteName}-200), 1)`;
-    colors['shape-hover'] = `hsla(var(--${paletteName}-600), 1)`;
-    colors['shape-active'] = `hsla(var(--${paletteName}-700), 1)`;
-
-    colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-0), 1)`;
-    colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`;
-    colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`;
-
-    colors['canvas-hover'] = `hsla(var(--${paletteName}-600), 1)`;
-    colors['canvas-active'] = `hsla(var(--${paletteName}-700), 1)`;
-
-    colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`;
-    colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`;
-  }
-
   const priorityPalette = Object.keys(colors).map((key) => `--woly-${key}: ${colors[key]};`);
 
   return css`