MetaMorph UI

MetaMorph UIは、Solid.jsのためのモダンなUIコンポーネントライブラリです。アニメーションとインタラクティブな要素を重視し、美しいユーザーインターフェースを簡単に構築できます。

インストール

npm install @oumugai/metamorph-ui solid-js
# または
yarn add @oumugai/metamorph-ui solid-js
# または
pnpm add @oumugai/metamorph-ui solid-js

セットアップ

使用方法：

import { Button, Card, Input } from '@oumugai/metamorph-ui';

function App() {
  return (
    <div>
      <Card>
        <Input placeholder="入力してください" />
        <Button>送信</Button>
      </Card>
    </div>
  );
}

各コンポーネントは必要なスタイルを自動的に読み込むため、別途スタイルをインポートする必要はありません。コンポーネントをインポートするだけで、すぐに使用できます。

3. テーマのカスタマイズ（オプション）：

import { variables, createCssVariables } from '@oumugai/metamorph-ui';

// テーマ変数のカスタマイズ
const customTheme = {
  ...variables,
  colors: {
    ...variables.colors,
    primary: '#your-primary-color',
  },
};

// カスタムテーマの適用
createCssVariables(customTheme);

コンポーネント

Card

インタラクティブな3D効果を持つカードコンポーネント。

import { Card } from 'metamorph-ui';

// 基本的な使用法
<Card>
  コンテンツをここに配置
</Card>

// インタラクティブな3D効果付き
<Card interactive tilt>
  マウスホバーで3D効果が表示されます
</Card>

// 異なるバリアント
<Card variant="elevated">Elevated Card</Card>
<Card variant="outlined">Outlined Card</Card>
<Card variant="filled">Filled Card</Card>

プロパティ

| プロパティ名 | 型 | デフォルト | 説明 | |------------|-----|---------|------| | variant | 'elevated' | 'outlined' | 'filled' | 'elevated' | カードのスタイルバリアント | | interactive | boolean | false | マウスインタラクションの有効化 | | tilt | boolean | true | 3D傾き効果の有効化 | | class | string | - | 追加のCSSクラス | | style | object | - | インラインスタイル |

Input

高度にカスタマイズ可能なインプットコンポーネント。

import { Input } from 'metamorph-ui';

// 基本的な使用法
<Input 
  label="ユーザー名"
  placeholder="ユーザー名を入力"
/>

// エラー表示
<Input 
  label="メールアドレス"
  error="有効なメールアドレスを入力してください"
/>

// ヘルパーテキスト付き
<Input
  label="パスワード"
  type="password"
  helperText="8文字以上の英数字を入力してください"
/>

// サイズバリエーション
<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />
<Input size="lg" placeholder="Large input" />

プロパティ

| プロパティ名 | 型 | デフォルト | 説明 | |------------|-----|---------|------| | label | string | - | 入力フィールドのラベル | | placeholder | string | - | プレースホルダーテキスト | | type | string | 'text' | 入力タイプ（text, password, etc） | | value | string | - | 入力値 | | error | string | - | エラーメッセージ | | helperText | string | - | ヘルプテキスト | | disabled | boolean | false | 無効状態 | | size | 'sm' | 'md' | 'lg' | 'md' | インプットのサイズ | | icon | JSX.Element | - | 先頭に表示するアイコン |

Chart

データビジュアライゼーションのためのチャートコンポーネント。

import { Chart } from 'metamorph-ui';

<Chart
  data={[
    { label: 'A', value: 10 },
    { label: 'B', value: 20 },
    { label: 'C', value: 15 }
  ]}
/>

CircularProgress

ローディング状態を表示するための円形プログレスインジケータ。

import { CircularProgress } from 'metamorph-ui';

// 不定のプログレス
<CircularProgress />

// 進捗率付き
<CircularProgress value={75} />

LineChart

時系列データなどを表示するための折れ線グラフコンポーネント。

import { LineChart } from 'metamorph-ui';

<LineChart
  data={[
    { x: '2024-01', y: 30 },
    { x: '2024-02', y: 45 },
    { x: '2024-03', y: 55 }
  ]}
/>

アニメーションとインタラクション

MetaMorph UIのコンポーネントは、洗練されたアニメーションとインタラクションを内蔵しています：

• Cardコンポーネントの3D傾き効果
• Inputフィールドのホバーとフォーカス時の浮き上がり効果
• スムーズなトランジションとフィードバック

ライセンス

MIT License