Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@milord_frontend/features-export-full

eugenekoryabkin12MIT1.0.1TypeScript support: included

React Features library with internationalization support (Paraglide JS) - Full version with all features

react, features, components, ui, typescript, i18n, internationalization, paraglide, multilingual, translation

readme

@milord_frontend/features-export-full

React Features library - полная версия со всеми фичами для публикации в npm.

📦 Установка

npm install @milord_frontend/features-export-full

Peer Dependencies:

npm install react react-dom

🎯 Использование

HelloWorld Feature

import { HelloWorld } from "@milord_frontend/features-export-full";

function App() {
  return (
    <HelloWorld
      name="Евгений"
      showButton={true}
      onGreet={(greeting) => console.log(greeting)}
    />
  );
}

С управлением языком

import { 
  HelloWorld, 
  setLocale, 
  getLocale,
  type Locale 
} from "@milord_frontend/features-export-full";

function App() {
  // Установить язык
  setLocale('en', { reload: false });

  // Получить текущий язык
  const currentLang = getLocale(); // 'ru' | 'en' | 'de' | 'es'

  return <HelloWorld name="User" />;
}

Прямой доступ к переводам

import * as m from "@milord_frontend/features-export-full/paraglide/messages";

console.log(m.hello_world_title());           // "👋 Hello World Feature"
console.log(m.welcome_message({ name: 'John' })); // "Welcome, John!"

🌍 Интернационализация

Поддерживаемые языки

  • 🇷🇺 ru - Русский (по умолчанию)
  • 🇬🇧 en - English
  • 🇩🇪 de - Deutsch
  • 🇪🇸 es - Español

API для работы с языками

// Получить текущий язык
getLocale(): Locale  // 'ru' | 'en' | 'de' | 'es'

// Установить язык
setLocale(locale: Locale, options?: { reload?: boolean }): void

// Пример
setLocale('en', { reload: false });

Доступные переводы

hello_world_title(): string
welcome_message({ name }: { name: string }): string
feature_description(): string
greet_button(): string
greeting_alert({ name }: { name: string }): string

📚 Доступные фичи

HelloWorld

Демонстрационная фича приветствия с использованием UI компонентов и поддержкой интернационализации.

Props:

  • name?: string - Имя для приветствия (по умолчанию "World")
  • showButton?: boolean - Показывать ли кнопку (по умолчанию true)
  • onGreet?: (greeting: string) => void - Callback при клике на кнопку
  • icon?: IconName - Опциональная иконка в заголовке

Пример:

<HelloWorld name="John" showButton={true} onGreet={(msg) => alert(msg)} />

Компонент автоматически использует переводы из Paraglide. При смене языка через setLocale() все тексты обновляются автоматически.

🎨 Стили

Эта библиотека не включает CSS. Используйте UI компоненты из:

  • @milord_frontend/ui-export-full - для стилизации

📊 Размер бандла

Файл Размер
ESM ~3 KB
CJS ~2.5 KB

🔧 TypeScript

Полная поддержка TypeScript из коробки.

import type { HelloWorldProps } from "@milord_frontend/features-export-full";

const props: HelloWorldProps = {
  name: "TypeScript",
  showButton: true,
};

🚀 Разработка

Этот пакет генерируется из @repo/features в монорепе.

Сборка:

npm run build

Генерация типов:

npm run generate:types

Публикация:

npm publish

📖 Документация

Подробная документация доступна в монорепе:

  • packages/features/README.md - основной пакет
  • packages/ARCHITECTURE_SUMMARY.md - архитектура

🤝 Связанные пакеты

  • @repo/features - Основной пакет для разработки
  • @milord_frontend/ui-export-full - UI компоненты

📝 License

MIT