@hua-labs/hua

v0.1.0-alpha.12

Framework

SSR

Ship UX faster: UI, Motion, i18n, 한 번에 통합

$npm install @hua-labs/hua

주요 기능

UI 컴포넌트 통합

모션 & 애니메이션

국제화 (i18n)

상태 관리

빠른 시작

1. 설정 파일 생성

typescript

// hua.config.ts
import { defineConfig } from '@hua-labs/hua/framework/config';

export default defineConfig({
  preset: 'product',
  i18n: {
    defaultLanguage: 'ko',
    supportedLanguages: ['ko', 'en'],
    namespaces: ['common'],
    translationLoader: 'static',
  },
  branding: {
    name: 'My App',
    colors: {
      primary: '#6366F1',
      secondary: '#8B5CF6',
    },
  },
});

2. 레이아웃 설정

tsx

// app/layout.tsx
import { HuaProvider } from '@hua-labs/hua/framework';
import { getSSRTranslations } from '@hua-labs/hua/framework/server';
import config from './hua.config';

export default async function RootLayout({ children }) {
  const translations = await getSSRTranslations(config, 'public/translations');

  return (
    <html>
      <body>
        <HuaProvider config={{ ...config, i18n: { ...config.i18n, initialTranslations: translations } }}>
          {children}
        </HuaProvider>
      </body>
    </html>
  );
}

3. 컴포넌트 사용

tsx

// app/page.tsx
'use client';

import { Button, Card, useTranslation } from '@hua-labs/hua';
import { useMotion } from '@hua-labs/hua/framework';

export default function Page() {
  const { t } = useTranslation();
  const motion = useMotion({ type: 'fadeIn', duration: 500 });

  return (
    <div ref={motion.ref} style={motion.style}>
      <Card>
        <h1>{t('welcome')}</h1>
        <Button>Click me</Button>
      </Card>
    </div>
  );
}

Exports

Import Path	설명
@hua-labs/hua	UI 컴포넌트, 훅, 유틸리티
@hua-labs/hua/framework	프레임워크 레이어 (HuaProvider, useMotion 등)
@hua-labs/hua/framework/shared	서버/클라이언트 공용 (타입, GEO, metadata, CSS 변수 생성)
@hua-labs/hua/framework/server	서버 전용 (getSSRTranslations, loadConfig) + shared re-export
@hua-labs/hua/framework/config	설정 유틸리티 (defineConfig, setConfig)
@hua-labs/hua/presets	프리셋 (product, marketing)
@hua-labs/hua/framework/seo/geo	AI 검색엔진 최적화 (GEO)

내부 의존성

@hua-labs/ui

@hua-labs/motion-core

@hua-labs/i18n-core

@hua-labs/i18n-core-zustand

@hua-labs/state

외부 의존성

react

zustand