@oumugai/metamorph-ui NPM

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>
  );
}

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

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

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 }
  ]}
/>