@bojantest/ui

MILRAM design system — per-component CSS, HTML snippets, JS modules, and a machine-readable registry.

Full workflow: see docs/storybook-and-npm-workflow.md in the repo root.

Pair with @bojantest/storybook for visual documentation.

Asset policy

| Shipped in npm | Not shipped (CMS) | |----------------|-------------------| | dist/fonts/ | Product photos, packshots | | dist/img/_icn/ | Hero / slide / recipe images | | dist/assets/*.svg (brushes, edges) | assets/*.png in repo (dev/Storybook only) |

HTML uses raster paths as placeholders — CMS replaces src / srcset at render time.

Install

npm install @bojantest/ui swiper @floating-ui/dom

• @bojantest/ui — CSS, HTML, JS
• swiper — image slider, product slider, recipe teaser
• @floating-ui/dom — popovers on image slider

CSS

Full bundle

<link rel="stylesheet" href="node_modules/swiper/swiper-bundle.css">
<link rel="stylesheet" href="node_modules/@bojantest/ui/dist/index.css">

Per component

<link rel="stylesheet" href="node_modules/swiper/swiper-bundle.css">
<link rel="stylesheet" href="node_modules/@bojantest/ui/dist/css/foundation.css">
<link rel="stylesheet" href="node_modules/@bojantest/ui/dist/css/img-slider.css">

Or via imports:

import 'swiper/swiper-bundle.css';
import '@bojantest/ui/css/foundation.css';
import '@bojantest/ui/css/img-slider.css';

HTML

<!-- node_modules/@bojantest/ui/dist/html/img-slider.html -->

import imgSliderHtml from '@bojantest/ui/html/img-slider.html?raw';

JS

<script type="module">
  import { initImgSlider } from '@bojantest/ui/js/img-slider.js';
  initImgSlider();
</script>

Component registry

import {
  components,
  getComponent,
  getComponentsByCategory,
  getComponentByBlock,
} from '@bojantest/ui/registry';

const slider = getComponent('img-slider');

cat node_modules/@bojantest/ui/dist/registry.json

Source of truth: stories/registry/components.mjs.

Components

| ID | Category | JS | Notes | |----|----------|-----|-------| | button | components | — | CTA primitives | | popover | components | initPopovers | needs @floating-ui/dom | | header | layout | — | Hero section | | img-slider | layout | initImgSlider | swiper + popovers | | product-slider | layout | initProductSlider | swiper | | recipe-teaser | layout | initRecipeTeaser | swiper | | footer | layout | — | Site footer |

Build (maintainers)

npm run build:ui

Publish

cd packages/ui
npm version patch
npm publish