ui

Shared UI component library (atoms / molecules / cdk / layout). All components, directives and pipes are standalone — import them directly from @mojawork/ui; there are no NgModules anymore (only the Transloco config modules remain).

Styling is Tailwind CSS v4 (CSS-first) + plain CSS. There is no Sass/SCSS and there are no tailwind.config.js files — Tailwind is configured in CSS via @theme/@utility inside libs/ui/src/styles/tailwind.css.

The library is consumed by the monorepo apps (website, change-me), by Storybook, and — as the published npm package @mojawork/ui — by external apps (e.g. the private movies frontend). Every component is documented as a live example in Storybook (npm run storybook, port 4241).

Using the npm package

npm i @mojawork/ui

The package ships the design-token styles (@mojawork/ui/styles/index.css) and static assets (fonts, icons, i18n/ui/*.json under static/assets/ui); wire both into your angular.json styles/assets. Peer dependencies: Angular ^21 (common, core, forms, router, platform-browser, cdk), Transloco 6 (+ locale/messageformat), @ngx-pwa/local-storage, rxjs 7. Publish a new version with npm run ui-publish (bump version here first).

Components

• atoms — background, buzzer, card, chart, code, lang-selector, text-animate, thumb, timer, typewriter.
• molecules — image-grid, image-slider, player.
• layout — main, media-screen, nav, overlay, spinner, splitter, tabs, top-scroll-bottom.
• cdk — drag-and-drop-splitter, table (Angular CDK-based).
• forms — checkbox, input, validators (used with the <ui-input><input ui-tag [(ngModel)]> form pattern).
• _directives — validators and other attribute directives.

Conventions

• No Tailwind utility classes in component templates. Style components exclusively with plain CSS in their *.component.css using var(--ui-*) design tokens, so the library stays independent of any consumer's Tailwind config. Tailwind is for Storybook/app layout only.
• Design tokens are CSS custom properties: var(--ui-spacer), var(--ui-border-radius), colours as var(--ui-c-*), etc.
• Class naming: component-local classes are underscore-prefixed (._ring, ._-active) to avoid collisions; global/state classes (.ui, data-* states) stay unprefixed.
• State uses Angular Signals; components are zoneless-safe.
• When a component changes, its Storybook docs.mdx and *.stories.ts must be updated in the same change.

To use in client (FE - Angular) projects

1. Add UI assets and styles in project.json

"build": {
  "options": {
    "inlineStyleLanguage": "css",
    "assets": [
      "--YOUR/APP/PATH--/src/favicon.ico",
      "--YOUR/APP/PATH--/src/assets",
      {
        "glob": "**/*",
        "input": "./libs/ui/src/static/assets/ui",
        "output": "./assets/ui"
      }
    ],
    "styles": [
      "libs/ui/src/styles/tailwind.css",
      "libs/ui/src/styles/index.css",
      "--YOUR/APP/PATH--/src/styles.css"
    ]
  }
}

2. Tailwind (v4)

No config file is needed. tailwind.css imports Tailwind and declares the theme; utility sources for the app are picked up via @source in that file. The PostCSS plugin (@tailwindcss/postcss) is wired up once in the root postcss.config.json.

Design tokens are exposed as CSS custom properties (var(--ui-spacer), var(--ui-border-radius), …); use those in component .css files instead of hard-coded values.