Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | 24x 24x 9x 9x 9x 33x 33x 33x 48x 16x 48x 8x 33x 520x 520x 3079x 1540x 520x 514x 520x 9x 3x 6x 6x 6x 76x 76x 400x 76x 6x 9x 5x 4x 4x 5x 5x 5x 6x 19x 5x 4x 5x 5x 17x 17x 9x 9x 79x 534x 9x | /**
* Variant Matrix
*
* Generates the cartesian product of all modifier and variant states.
* Each permutation represents a unique visual configuration of the component.
*/
import type { ComponentMetadata, PropMetadata } from '@fds-uif/generator-base/browser';
import type { PermutationState } from './types.js';
/**
* Generate all permutation states from component metadata.
* Combines every boolean modifier/state combination with every variant option.
*/
export function generatePermutations(metadata: ComponentMetadata): PermutationState[] {
const modifierProps = metadata.props.filter((p) => p.source === 'modifier' || p.source === 'state');
const variantProps = metadata.props.filter((p) => p.source === 'variant');
const modifierCombos = generateBooleanCombinations(modifierProps);
const variantCombos = generateVariantCombinations(variantProps);
return cartesianProduct(modifierCombos, variantCombos);
}
/**
* Build the default permutation state: all modifiers at their default
* (or false), all variants at their default (or empty string).
*/
export function buildDefaultState(metadata: ComponentMetadata): PermutationState {
const modifiers: Record<string, boolean> = {};
const variants: Record<string, string> = {};
for (const prop of metadata.props) {
if (prop.source === 'modifier' || prop.source === 'state') {
modifiers[prop.name] = (prop.default as boolean) ?? false;
}
if (prop.source === 'variant') {
variants[prop.name] = (prop.default as string) ?? '';
}
}
return { modifiers, variants };
}
/**
* Build a human-readable label for a permutation state.
* Active modifiers are listed by name; variants show name=value.
* Returns "default" when nothing is active beyond defaults.
*/
export function buildPermutationLabel(state: PermutationState): string {
const parts: string[] = [];
for (const [name, active] of Object.entries(state.modifiers)) {
if (active) {
parts.push(name);
}
}
for (const [name, value] of Object.entries(state.variants)) {
parts.push(`${name}=${value}`);
}
return parts.length > 0 ? parts.join(', ') : 'default';
}
/**
* Generate all 2^n boolean combinations for modifier/state props.
*/
function generateBooleanCombinations(props: PropMetadata[]): Array<Record<string, boolean>> {
if (props.length === 0) {
return [{}];
}
const results: Array<Record<string, boolean>> = [];
const total = 1 << props.length;
for (let mask = 0; mask < total; mask++) {
const combo: Record<string, boolean> = {};
for (let i = 0; i < props.length; i++) {
combo[props[i].name] = (mask & (1 << i)) !== 0;
}
results.push(combo);
}
return results;
}
/**
* Generate all value combinations for variant props.
* Each variant's options are extracted from its union type string,
* then the cartesian product across all variants is computed.
*/
function generateVariantCombinations(props: PropMetadata[]): Array<Record<string, string>> {
if (props.length === 0) {
return [{}];
}
let results: Array<Record<string, string>> = [{}];
for (const prop of props) {
const options = extractVariantOptions(prop);
const expanded: Array<Record<string, string>> = [];
for (const existing of results) {
for (const option of options) {
expanded.push({ ...existing, [prop.name]: option });
}
}
results = expanded;
}
return results;
}
/**
* Extract variant option values from a prop's union type string.
* Parses "'default' | 'success' | 'warning'" into ['default', 'success', 'warning'].
*/
function extractVariantOptions(prop: PropMetadata): string[] {
Iif (!prop.type) {
return prop.default !== undefined ? [String(prop.default)] : [''];
}
return prop.type
.split('|')
.map((s) => s.trim().replace(/^'/, '').replace(/'$/, ''))
.filter((s) => s && !s.includes(' '));
}
/**
* Cartesian product of modifier and variant combination arrays.
*/
function cartesianProduct(
modifierCombos: Array<Record<string, boolean>>,
variantCombos: Array<Record<string, string>>,
): PermutationState[] {
const results: PermutationState[] = [];
for (const modifiers of modifierCombos) {
for (const variants of variantCombos) {
results.push({ modifiers, variants });
}
}
return results;
}
|