Skip to content
This repository was archived by the owner on Jul 28, 2024. It is now read-only.

Commit 0386c41

Browse files
author
Айнур
committed
feat: add priority-weight matrix
1 parent 51b27b4 commit 0386c41

File tree

9 files changed

+341
-148
lines changed

9 files changed

+341
-148
lines changed

‎src/dev/global.ts‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,46 +53,55 @@ export const Global = styled(WolyGlobalStyles)`
5353
--woly-backdrop: hsla(var(--bw-0), 0.3);
5454
--woly-shadow: 3px 3px 9px hsla(0, 0%, 22%, 12%);
5555
56-
${createPriority({
57-
priorityName: 'default',
58-
paletteName: 'bw',
59-
bwPaletteName: 'bw',
60-
weight: 'fill',
61-
})}
56+
[data-priority='white'] {
57+
--woly-shape-default: hsla(var(--bw-0), 1);
58+
--woly-shape-disabled: hsla(var(--bw-200), 1);
59+
--woly-shape-hover: hsla(var(--bw-400), 1);
60+
--woly-shape-active: hsla(var(--bw-600), 1);
61+
62+
--woly-shape-text-default: hsla(var(--bw-1000), 1);
63+
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
64+
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
65+
--woly-shape-text-active: hsla(var(--bw-1000), 1);
66+
67+
--woly-canvas-default: transparent;
68+
--woly-canvas-disabled: hsla(var(--bw-200), 1);
69+
--woly-canvas-hover: transparent;
70+
--woly-canvas-active: transparent;
71+
72+
--woly-canvas-text-default: hsla(var(--bw-1000), 1);
73+
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
74+
--woly-canvas-text-hover: hsla(var(--bw-600), 1);
75+
--woly-canvas-text-active: hsla(var(--bw-700), 1);
76+
}
6277
6378
${createPriority({
64-
priorityName: 'white',
79+
priorityName: 'default',
6580
paletteName: 'bw',
6681
bwPaletteName: 'bw',
67-
weight: 'transparent',
6882
})}
6983
7084
${createPriority({
7185
priorityName: 'primary',
7286
paletteName: 'primary',
7387
bwPaletteName: 'bw',
74-
weight: 'fill',
7588
})}
7689
7790
${createPriority({
7891
priorityName: 'secondary',
7992
paletteName: 'secondary',
8093
bwPaletteName: 'bw',
81-
weight: 'fill',
8294
})}
8395
84-
8596
${createPriority({
8697
priorityName: 'danger',
8798
paletteName: 'danger',
8899
bwPaletteName: 'bw',
89-
weight: 'fill',
90100
})}
91101
92102
${createPriority({
93103
priorityName: 'success',
94104
paletteName: 'success',
95105
bwPaletteName: 'bw',
96-
weight: 'fill',
97106
})}
98107
`;

‎src/dev/maps/common/combination.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
type VaritationsMap = Record<string, readonly unknown[]>;
2+
3+
export function createCombinations(obj: VaritationsMap) {
4+
const fieldNames = Object.keys(obj);
5+
6+
if (fieldNames.length === 0) return [{}];
7+
8+
function _combinations<Combination extends string[]>(
9+
[key, ...restKeys]: Combination,
10+
combinations: Record<string, unknown[]>,
11+
): Record<string, unknown>[] {
12+
const possibleValues = obj[key];
13+
14+
if (!Array.isArray(possibleValues) || possibleValues.length === 0) {
15+
throw new Error(`Please provide a non-empty array of possible values for prop ${key}`);
16+
}
17+
18+
const variation = possibleValues.map((fieldValue) => ({
19+
...combinations,
20+
[key]: fieldValue,
21+
}));
22+
23+
if (restKeys.length === 0) {
24+
return variation;
25+
}
26+
27+
return flatMap(variation, (newAcc) => _combinations(restKeys, newAcc));
28+
}
29+
30+
return _combinations(fieldNames, {});
31+
}
32+
33+
function flatMap<T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => Array<T>) {
34+
return arr.map(fn).reduce((a, b) => a.concat(b));
35+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export function groupByKey<Variants extends Record<string, unknown>, Key extends keyof Variants>(
2+
arr: Variants[],
3+
key: Key,
4+
keyMapper?: (fn: Variants[Key]) => string,
5+
) {
6+
return arr.reduce<Record<string, Variants[]>>((all, current) => {
7+
const valueAsKey = keyMapper ? keyMapper(current[key]) : `${current[key]}`;
8+
9+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
10+
if (all[valueAsKey] === undefined) {
11+
all[valueAsKey] = [];
12+
}
13+
all[valueAsKey].push(current);
14+
return all;
15+
}, {});
16+
}

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Global } from 'dev/global';
4+
import { Grid, Heading } from 'ui';
5+
6+
import { createCombinations } from './common/combination';
7+
import { groupByKey } from './common/group-by-key';
8+
9+
export const priorities = ['default', 'primary', 'secondary', 'white', 'danger', 'success'];
10+
11+
interface ThemeProps {
12+
weight: string;
13+
priority: string;
14+
disabled: boolean;
15+
}
16+
17+
interface PriorityWeightMapProps {
18+
weights: ('fill' | 'outline' | 'goast' | 'transparent')[];
19+
render: (props: ThemeProps) => React.ReactElement;
20+
}
21+
22+
export const PriorityWeightMap = ({ weights, render }: PriorityWeightMapProps) => {
23+
const allCombinations = createCombinations({
24+
weight: weights,
25+
priority: priorities,
26+
disabled: [true, false],
27+
});
28+
29+
if (Object.keys(allCombinations).length === 0) return null;
30+
31+
return (
32+
<Wrapper>
33+
{Object.entries(groupByKey(allCombinations, 'priority')).map(
34+
([priority, combinations], index) => {
35+
return (
36+
// eslint-disable-next-line react/no-array-index-key
37+
<PriorityGroup key={index}>
38+
<Header>{priority}</Header>
39+
<GridTemplate columns={weights.length + 1}>
40+
<div /> {/* plug to make empty space at top left corner */}
41+
{weights.map((weight, index) => (
42+
<Centered key={index}>
43+
<b>{weight}</b>
44+
</Centered>
45+
))}
46+
{Object.entries(
47+
groupByKey(combinations, 'disabled', (key) => (key ? 'normal' : 'disable')),
48+
).map(([state, variations], index) => {
49+
return (
50+
<React.Fragment key={index}>
51+
<Centered>
52+
<b>{state}</b>
53+
</Centered>
54+
{variations.map((variation, index) => {
55+
const { disabled, ...props } = variation as ThemeProps;
56+
57+
return (
58+
<VariantCell key={index}>
59+
{render({ ...props, disabled: state === 'disable' })}
60+
</VariantCell>
61+
);
62+
})}
63+
</React.Fragment>
64+
);
65+
})}
66+
</GridTemplate>
67+
</PriorityGroup>
68+
);
69+
},
70+
)}
71+
</Wrapper>
72+
);
73+
};
74+
75+
const Wrapper = styled(Global)`
76+
display: flex;
77+
flex-direction: row;
78+
overflow-y: auto;
79+
`;
80+
81+
const PriorityGroup = styled.div`
82+
display: flex;
83+
flex-direction: column;
84+
padding: 20px;
85+
`;
86+
87+
const VariantCell = styled.div`
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
min-width: 100px;
92+
padding: 20px;
93+
`;
94+
95+
const Header = styled(Heading)`
96+
padding-bottom: 15px;
97+
padding-left: 5px;
98+
`;
99+
100+
const GridTemplate = styled(Grid)`
101+
gap: 10px;
102+
103+
color: #c4c4c4;
104+
white-space: pre-line;
105+
`;
106+
107+
const Centered = styled.div`
108+
display: flex;
109+
align-items: center;
110+
justify-content: center;
111+
`;

‎src/dev/playground.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import { block } from './block';
1010
export { block };
1111

1212
interface Props {
13-
size: keyof typeof block;
14-
direction: 'vertical' | 'horizontal';
15-
configurators: ConfiguratorName[];
13+
size?: keyof typeof block;
14+
direction?: 'vertical' | 'horizontal';
15+
configurators?: ConfiguratorName[];
1616
}
1717

1818
export const Playground: React.FC<Props> = ({

‎src/lib/priority.tsx‎

Lines changed: 13 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,31 @@ interface PriorityType {
44
bwPaletteName: string;
55
paletteName: string;
66
priorityName: string;
7-
weight: 'fill' | 'transparent';
87
}
98

10-
export const createPriority = ({
11-
bwPaletteName,
12-
paletteName,
13-
priorityName,
14-
weight,
15-
}: PriorityType) => {
9+
export const createPriority = ({ bwPaletteName, paletteName, priorityName }: PriorityType) => {
1610
const colors: Record<string, string> = {
17-
'shape-default': `hsla(var(--${bwPaletteName}-0), 1)`,
11+
'shape-default': `hsla(var(--${paletteName}-500), 1)`,
1812
'shape-disabled': `hsla(var(--${paletteName}-200), 1)`,
19-
'shape-hover': `hsla(var(--${bwPaletteName}-400), 1)`,
20-
'shape-active': `hsla(var(--${bwPaletteName}-600), 1)`,
13+
'shape-hover': `hsla(var(--${paletteName}-600), 1)`,
14+
'shape-active': `hsla(var(--${paletteName}-700), 1)`,
2115

22-
'shape-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`,
16+
'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`,
2317
'shape-text-disabled': `hsla(var(--${paletteName}-300), 1)`,
24-
'shape-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`,
25-
'shape-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`,
18+
'shape-text-hover': `hsla(var(--${bwPaletteName}-0), 1)`,
19+
'shape-text-active': `hsla(var(--${bwPaletteName}-0), 1)`,
2620

2721
'canvas-default': `transparent`,
2822
'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`,
29-
'canvas-hover': `transparent`,
30-
'canvas-active': `transparent`,
23+
'canvas-hover': `hsla(var(--${paletteName}-600), 1)`,
24+
'canvas-active': `hsla(var(--${paletteName}-700), 1)`,
3125

32-
'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1);`,
33-
'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`,
34-
'canvas-text-hover': `hsla(var(--${paletteName}-600), 1);`,
35-
'canvas-text-active': `hsla(var(--${paletteName}-700), 1);`,
26+
'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`,
27+
'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1)`,
28+
'canvas-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`,
29+
'canvas-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`,
3630
};
3731

38-
if (weight === 'fill') {
39-
colors['shape-default'] = `hsla(var(--${paletteName}-500), 1)`;
40-
colors['shape-disabled'] = `hsla(var(--${paletteName}-200), 1)`;
41-
colors['shape-hover'] = `hsla(var(--${paletteName}-600), 1)`;
42-
colors['shape-active'] = `hsla(var(--${paletteName}-700), 1)`;
43-
44-
colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-0), 1)`;
45-
colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`;
46-
colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`;
47-
48-
colors['canvas-hover'] = `hsla(var(--${paletteName}-600), 1)`;
49-
colors['canvas-active'] = `hsla(var(--${paletteName}-700), 1)`;
50-
51-
colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`;
52-
colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`;
53-
}
54-
5532
const priorityPalette = Object.keys(colors).map((key) => `--woly-${key}: ${colors[key]};`);
5633

5734
return css`

0 commit comments

Comments
 (0)