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 | 31x 31x 11x 11x 11x 43x 43x 43x 67x 23x 67x 12x 43x 8200x 8200x 81927x 40964x 8200x 8194x 8200x 11x 5x 6x 6x 6x 1036x 1036x 10256x 1036x 6x 11x 5x 6x 6x 7x 7x 7x 8x 21x 7x 6x 7x 2x 5x 17x 17x 11x 11x 1041x 8216x 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;
}
|