Designer Decisions - Models

A library for modeling contextual design decisions and tokens.

How to use

📖 Documentation

This core library models contextual design decisions of different types (colors, spaces, typography, ...), providing an API to produce values (or tokens) based on parametric inputs.

Sample and Demo Data

These exported constants defines where to locate the sample and demo data collections.

DecisionSource(s) are a way to pass decision inputs by reference to decision validators and stores such as Store.

import {
  type BuilderOptions,
  createBuilderContext,
  formatDecisionStatus
  produceDecisions,
  buildStaticStore,
} from '@noodlestan/designer-functions';
import { DEMO_DATA } from '@noodlestan/designer-decisions';

const options: BuilderOptions = {
  decisions: [DEMO_DATA, './data'],
};
const context = createBuilderContext(options);
const build = buildStaticStore(context);
const store = await build();

const records = store.records();
const produced = produceDecisions(context, store);
produced.decisions().forEach(status => console.info(formatDecisionStatus(status)));

console.info('🐘', produced.summary());

See also

• 📖 Guides / Loading and Validating Decisions
• 📖 Models / Decision Types
• 📖 API / @noodlestan/designer-decisions

Development

Make sure you README first.

Dependencies

This library depends only on chroma-js.

Build Targets

[!IMPORTANT] Do not add type: module or exports fields to package.json as this will break Node.js ESM consumers.

This library is packaged for use both in bundlers such as Vite and Astro, as well as Node.js environments (CJS/ESM), and ts-node. For Node.js consumers, even those using import or await import() syntaxes, all imports resolve to the CJS build. This is only possible when the "type": "module" and "exports" fields are both omitted from the library's package.json.

| Consumer | Syntax | Resolves to | | ------------------- | ------------- | ---------------------------------------- | | Bundlers | ESM import | module → TS entry point src/index.ts | | node script.js | CJS require | main → CJS build dist/cjs/index.js | | node script.mjs | ESM import | main (ignores module) | | ts-node script.ts | ESM import | main (ignores module) |

Scripts

• $ npm run dev - uses esbuild to watch and tsc to emit declarations on rebuild.
• $ npm run build - uses tsc to build dist/cjs and dist/esm.
• $ npm run test / npm run test:watch - uses vitest.
• $ npm run lint / npm run lint:fix - uses @noodlestan/eslint-config.

Note: The dist/esm build guarantees that verbatimModuleSyntax is respected everywhere.

MIT License

Copyright (c) 2024 Noodlestan.

Published under a MIT license.