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 | 26x 26x 11x 11x 11x 40x 40x 40x 54x 17x 54x 9x 40x 520x 520x 3079x 1540x 520x 514x 520x 11x 5x 6x 6x 6x 76x 76x 400x 76x 6x 11x 5x 6x 6x 7x 7x 7x 8x 21x 7x 6x 7x 2x 5x 17x 17x 11x 11x 81x 536x 11x | /**
* 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[] {
if (!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;
}
|