yudu-component-kit

v1.1.10

Published

a month ago

<p align="center"> <img src="./projects/yudu-component-kit/assets/logo.svg" alt="Logo Fine Dev" width="250" /> </p> <h1 align="center"> YuduComponentKit </h1>

Downloads

127

0High
0Medium
0Low

fine567

front-end css scss angular fineYudu yudu ui YuduComponentKit ComponentKit

last update

⚠️ This library is currently under construction.

Some features, components, and styles may change in future versions.

Features

⚡ Built for Angular v20+
🧱 Atomic and modular architecture
🌗 Supports Dark / Light themes
🧩 Reusable UI components (Buttons, Cards, Modals, etc.)
🧪 100% compatible with Angular CLI, Standalone Components, and SSR

Components list

Button ✅
Chip ✅
Icons ✅
Input ✅
Navbar 👷🏾
Footer 👷🏾
Sidebar 👷🏾

Status

npm

Quick start

Install with npm:

npm i yudu-component-kit

Configuration

Before using the UI components, you must initialize the theme service. This library includes a service called LocalStorageStore that:

creates the theme key in localStorage (default: dark)
applies the corresponding CSS classes (theme--dark / theme--light) to the <body>

This initialization does not happen automatically. You need to inject the service at least once, preferably in your root component.

// app.component.ts (standalone)
import { Component, inject } from '@angular/core';
import { LocalStorageStore } from 'yudu-component-kit';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  // injecting the service will run its constructor and apply the theme classes
  private readonly localStorageStore = inject(LocalStorageStore);
}

Important: if you don’t inject the service, the theme classes won’t be applied and the global styles may not look as expected.

YuduComponentKit ships a design-system stylesheet with tokens (CSS variables), base rules, and theme selectors. You must include it in your app. angular.json this line: "node_modules/yudu-component-kit/src/lib/styles/index.design-system.scss"

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/yudu-component-kit/src/lib/styles/index.design-system.scss"
            ]
          }
        }
      }
    }
  }
}

i18n

YuduComponentKit includes an optional i18n entry point that provides a lightweight translation service based on JSON files stored in your app’s assets folder.

Install

If you already installed the library, you’re done:

npm i yudu-component-kit

Setup

Enable HttpClient (required to load JSON files)

// app.config.ts
import { provideHttpClient } from '@angular/common/http';

export const appConfig = {
  providers: [provideHttpClient()],
};

Provide i18n configuration

// app.config.ts
import { provideHttpClient } from '@angular/common/http';
import { provideYuduI18n } from 'yudu-component-kit/i18n';

export const appConfig = {
  providers: [
    provideHttpClient(),
    ...provideYuduI18n({
      assetPath: '/assets/lang',
      storageKey: 'lang',
      defaultLang: 'en',
      supportedLangs: ['en', 'es'], // add as many as you want
    }),
  ],
};

Create translation files inside your app Create these files:

src/assets/lang/en.json
src/assets/lang/es.json

Example:

src/assets/lang/en.json

{
  "home": {
    "title": "Hello"
  },
  "error": {
    "unknown": "Connection error. Please try again later."
  }
}

src/assets/lang/es.json

{
  "home": {
    "title": "Hola"
  },
  "error": {
    "unknown": "Error de conexión. Intenta más tarde."
  }
}

Usage

Inject the service and translate using dot-notation keys:

import { Component, inject } from '@angular/core';
import { I18nService } from 'yudu-component-kit/i18n';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ t.translate('home.title') }}</h1>
    <button (click)="t.changeLang()">Toggle language</button>
  `,
})
export class AppComponent {
  t = inject(I18nService);
}

How it works

The current language is persisted in localStorage using the configured storageKey (default: lang).
Translation files are loaded from: ${assetPath}/${lang}.json (default: /assets/lang/{lang}.json).
Loaded dictionaries are cached in memory to avoid re-downloading.
If a key doesn’t exist, translate() returns the key itself (useful to detect missing translations).

Adding more languages

Add the new language JSON file in your app, for example:

src/assets/lang/fr.json

Add it to supportedLangs:

...provideYuduI18n({
  supportedLangs: ['en', 'es', 'fr']
})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme