@lism-css/ui 0.11.0 → 0.13.0

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Avatar from './react/Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    src: { control: 'text' },
+    alt: { control: 'text' },
+    size: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: 'ユーザーアバター',
+    size: '4rem',
+  },
+};
+
+export const Small: Story = {
+  name: '小サイズ',
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: '',
+    size: '2rem',
+  },
+};
+
+export const Large: Story = {
+  name: '大サイズ',
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: '',
+    size: '8rem',
+  },
+};

package/src/components/Avatar/react/Avatar.tsx

@@ -0,0 +1,17 @@
+import type { ElementType } from 'react';
+import { Frame, type LayoutComponentProps } from 'lism-css/react';
+import type { FrameProps } from 'lism-css/lib/types/LayoutProps';
+
+type AvatarProps<T extends ElementType = 'div'> = LayoutComponentProps<T, FrameProps> & {
+  size?: string;
+  src?: string;
+  alt?: string;
+};
+
+export default function Avatar<T extends ElementType = 'div'>({ size = '1.5em', src = '', alt = '', ...props }: AvatarProps<T>) {
+  return (
+    <Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...(props as LayoutComponentProps<T, FrameProps>)}>
+      <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
+    </Frame>
+  );
+}

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Badge from './react/Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: 'text' },
+    c: { control: 'text', description: 'テキストカラー（CSS変数キー）' },
+    bgc: { control: 'text', description: '背景カラー（CSS変数キー）' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const WithColor: Story = {
+  name: 'カラー指定',
+  args: {
+    children: 'New',
+    c: 'white',
+    bgc: 'red',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'セカンダリカラー',
+  args: {
+    children: 'Info',
+    c: 'white',
+    bgc: 'blue',
+  },
+};

package/src/components/Badge/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--badge {
     --c: var(--base);
     --bgc: var(--text);

package/src/components/Badge/astro/Badge.astro

@@ -3,14 +3,8 @@ import { Lism } from 'lism-css/astro';
 import '../_style.css';
 
 const props = Astro.props;
-
-// c--badge では c, bgc は 変数で受け取る
-const _propConfig = {
-  c: { isVar: 1 },
-  bgc: { isVar: 1 },
-};
 ---
 
-<Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props}>
+<Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" {...props}>
   <slot />
 </Lism>

package/src/components/Badge/react/Badge.tsx

@@ -0,0 +1,7 @@
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import '../_style.css';
+
+export default function Badge<T extends ElementType = 'span'>(props: LismComponentProps<T>) {
+  return <Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" {...props} />;
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './react/Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: 'text' },
+    c: { control: 'text', description: 'テキストカラー（CSS変数キー）' },
+    bgc: { control: 'text', description: '背景カラー（CSS変数キー）' },
+    href: { control: 'text' },
+    as: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: 'ボタン',
+    href: '#',
+  },
+};
+
+export const AsButton: Story = {
+  name: 'as="button"',
+  args: {
+    children: 'ボタン要素',
+    as: 'button',
+  },
+};
+
+export const WithColor: Story = {
+  name: 'カラー指定',
+  args: {
+    children: '送信する',
+    as: 'button',
+    c: 'white',
+    bgc: 'blue',
+    bdrs: '99',
+  },
+};

package/src/components/Button/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--button {
     --c: var(--base);
     --bgc: var(--text);

package/src/components/Button/astro/Button.astro

@@ -3,14 +3,8 @@ import { Flex } from 'lism-css/astro';
 import '../_style.css';
 
 const props = Astro.props;
-
-// c--button では c, bgc は 変数で受け取る
-const _propConfig = {
-  c: { isVar: 1 },
-  bgc: { isVar: 1 },
-};
 ---
 
-<Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props}>
+<Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" {...props}>
   <slot />
 </Flex>

package/src/components/Button/react/Button.tsx

@@ -0,0 +1,7 @@
+import type { ElementType } from 'react';
+import { Flex, type LismComponentProps } from 'lism-css/react';
+import '../_style.css';
+
+export default function Button<T extends ElementType = 'a'>(props: LismComponentProps<T>) {
+  return <Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" {...props} />;
+}

package/src/components/Callout/Callout.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Callout from './react/Callout';
+import PRESETS from './presets';
+
+const presetTypes = Object.keys(PRESETS);
+
+const meta: Meta<typeof Callout> = {
+  title: 'UI/Callout',
+  component: Callout,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    type: { control: 'select', options: presetTypes },
+    title: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Callout>;
+
+export const Default: Story = {
+  args: {
+    type: 'note',
+    children: 'コールアウトのメッセージです。',
+  },
+};
+
+export const WithTitle: Story = {
+  name: 'タイトルあり',
+  args: {
+    type: 'note',
+    title: 'メモ',
+    children: 'タイトル付きのコールアウトです。',
+  },
+};
+
+export const Alert: Story = {
+  args: { type: 'alert', title: '警告', children: '警告のメッセージです。' },
+};
+
+export const Point: Story = {
+  args: { type: 'point', title: 'ポイント', children: 'ポイントのメッセージです。' },
+};
+
+export const Warning: Story = {
+  args: { type: 'warning', title: '注意', children: '注意のメッセージです。' },
+};
+
+export const Check: Story = {
+  args: { type: 'check', title: 'OK', children: 'チェックのメッセージです。' },
+};
+
+export const Help: Story = {
+  args: { type: 'help', title: 'ヘルプ', children: 'ヘルプのメッセージです。' },
+};

package/src/components/Callout/getProps.ts

@@ -1,9 +1,10 @@
 import PRESETS from './presets';
+import type { IconProps } from 'lism-css/react';
 
 export type CalloutProps = {
   type?: string;
   keycolor?: string;
-  icon?: string;
+  icon?: IconProps['icon'];
   title?: string;
   flow?: string;
   [key: string]: unknown;
@@ -11,7 +12,7 @@ export type CalloutProps = {
 
 export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
   const presetData = type ? PRESETS[type] : null;
-  const _icon = icon || presetData?.icon || 'note';
+  const _icon = (icon || presetData?.icon || 'note') as IconProps['icon'];
   const _keycolor = keycolor || presetData?.color || null;
 
   return {

package/src/components/Callout/react/Callout.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
-import { Flow, Flex, Stack, Icon, Center } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Flow, Flex, Stack, Icon, Center, type LismComponentProps } from 'lism-css/react';
 import getCalloutProps, { type CalloutProps } from '../getProps';
 
-export default function Callout({ children, ...inputProps }: CalloutProps & { children?: ReactNode }) {
+export default function Callout<T extends ElementType = 'div'>({ children, ...inputProps }: CalloutProps & LismComponentProps<T>) {
   const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
 
   return (

package/src/components/Chat/Chat.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Chat from './react/Chat';
+
+const meta: Meta<typeof Chat> = {
+  title: 'UI/Chat',
+  component: Chat,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    name: { control: 'text' },
+    avatar: { control: 'text' },
+    direction: { control: 'select', options: ['start', 'end'] },
+    variant: { control: 'select', options: ['speak', 'think'] },
+    keycolor: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Chat>;
+
+const AVATAR_SRC = 'https://cdn.lism-css.com/dummy-image.jpg';
+
+export const Default: Story = {
+  args: {
+    name: 'ユーザー',
+    avatar: AVATAR_SRC,
+    children: 'こんにちは！チャットコンポーネントのデモです。',
+  },
+};
+
+export const End: Story = {
+  name: 'direction: end（右寄せ）',
+  args: {
+    name: '自分',
+    avatar: AVATAR_SRC,
+    direction: 'end',
+    keycolor: 'blue',
+    children: '右寄せのチャットメッセージです。',
+  },
+};
+
+export const NoAvatar: Story = {
+  name: 'アバターなし',
+  args: {
+    name: 'ゲスト',
+    children: 'アバターなしのチャットです。',
+  },
+};
+
+export const Think: Story = {
+  name: 'variant: think',
+  args: {
+    name: 'キャラ',
+    avatar: AVATAR_SRC,
+    variant: 'think',
+    children: '考え中のバリアントです。',
+  },
+};

package/src/components/Chat/_style.css

@@ -1,9 +1,9 @@
-@layer lism-modules {
+@layer lism-component {
   .c--chat {
     --cbox-bgPct: 8%;
-    --gta: 'avatar name' 'avatar body';
-    --gtc: auto 1fr;
-    --gtr: minmax(1.5rem, auto) auto;
+    grid-template-areas: 'avatar name' 'avatar body';
+    grid-template-columns: auto 1fr;
+    grid-template-rows: minmax(1.5rem, auto) auto;
     --_avator-size: clamp(48px, 32px + 5cqw, 64px); /* @320px:40px ~ @640:64px */
     --_deco-size: calc(min(var(--_avator-size), 80px) / 4 + 0.25rem);
     --_deco-mask: none;
@@ -46,8 +46,8 @@
   [data-chat-dir='end'] {
     --_deco-scale: -1 1;
     --_deco-inset-x: calc(100% - 1px) auto;
-    --gta: 'name avatar' 'body avatar';
-    --gtc: 1fr auto;
+    grid-template-areas: 'name avatar' 'body avatar';
+    grid-template-columns: 1fr auto;
   }
 }
 

package/src/components/Chat/{getProps.js → getProps.ts}

@@ -2,7 +2,6 @@
  * Chat コンポーネントの共通プロパティ処理
  */
 
-// 各サブ要素のデフォルトプロパティ
 export const defaultProps = {
   avatar: {
     lismClass: 'c--chat_avatar',
@@ -23,11 +22,11 @@ export const defaultProps = {
   },
   body: {
     lismClass: 'c--chat_body',
-    pos: 'rel',
+    pos: 'relative',
   },
   deco: {
     lismClass: 'c--chat_deco',
-    pos: 'abs',
+    pos: 'absolute',
   },
   content: {
     lismClass: 'c--chat_content',
@@ -35,12 +34,19 @@ export const defaultProps = {
     p: '20',
     lh: 's',
   },
+} as const;
+
+export type ChatProps = {
+  variant?: string;
+  direction?: string;
+  keycolor?: string;
+  [key: string]: unknown;
 };
 
 /**
  * Chat コンポーネントのルートプロパティを生成
  */
-export default function getChatProps({ variant = 'speak', direction = 'start', keycolor = 'gray', ...props }) {
+export default function getChatProps({ variant = 'speak', direction = 'start', keycolor = 'gray', ...props }: ChatProps) {
   return {
     lismClass: 'c--chat',
     variant,

package/src/components/Chat/react/{Chat.jsx → Chat.tsx}

@@ -1,14 +1,24 @@
-import { Lism, Flow, Grid, Frame, Decorator } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Lism, Flow, Grid, Frame, Decorator, type LayoutComponentProps } from 'lism-css/react';
+import type { GridLayoutProps } from 'lism-css/lib/types/LayoutProps';
 import getChatProps, { defaultProps } from '../getProps';
+import type { ChatProps } from '../getProps';
 import '../_style.css';
 
-export default function Chat({ name, avatar, flow = 's', children, ...props }) {
+type Props<T extends ElementType = 'div'> = ChatProps &
+  LayoutComponentProps<T, GridLayoutProps> & {
+    name?: string;
+    avatar?: string;
+    flow?: string;
+  };
+
+export default function Chat<T extends ElementType = 'div'>({ name, avatar, flow = 's', children, ...props }: Props<T>) {
   const { 'data-chat-dir': direction, ...chatProps } = getChatProps(props);
 
   return (
     <Grid data-chat-dir={direction} {...chatProps}>
       {avatar && (
-        <Frame {...defaultProps.avatar} src={avatar} alt="">
+        <Frame {...defaultProps.avatar}>
           <img src={avatar} alt="" width="60" height="60" decoding="async" />
         </Frame>
       )}

package/src/components/Details/Details.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+import Details from './react';
+
+const meta: Meta = {
+  title: 'UI/Details',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Details.Root>
+      <Details.Summary>
+        <Details.Icon>▶</Details.Icon>
+        <Details.Title>詳細を見る</Details.Title>
+      </Details.Summary>
+      <Details.Content>
+        <p>詳細コンテンツです。クリックで開閉できます。</p>
+      </Details.Content>
+    </Details.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const details = within(canvasElement).getByRole('group'); // <details>
+    const summary = details.querySelector('summary') as HTMLElement;
+
+    // 初期状態: 閉じている
+    await expect(details).not.toHaveAttribute('open');
+
+    // クリックで開く
+    await userEvent.click(summary);
+    await expect(details).toHaveAttribute('open');
+
+    // 再クリックで閉じる
+    await userEvent.click(summary);
+    await expect(details).not.toHaveAttribute('open');
+  },
+};
+
+export const OpenByDefault: Story = {
+  name: '初期展開状態',
+  render: () => (
+    <Details.Root open>
+      <Details.Summary>
+        <Details.Icon>▼</Details.Icon>
+        <Details.Title>最初から開いている詳細</Details.Title>
+      </Details.Summary>
+      <Details.Content>
+        <p>open 属性を付けると初期状態で展開されます。</p>
+      </Details.Content>
+    </Details.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const details = within(canvasElement).getByRole('group'); // <details>
+
+    // 初期状態: 開いている（open 属性あり）
+    await expect(details).toHaveAttribute('open');
+  },
+};

package/src/components/Details/_style.css

@@ -1,6 +1,6 @@
 /* Details コンポーネント用スタイル */
 /* ::details-content と grid-template-rows: 0fr → 1fr のトランジションでアニメーション */
-@layer lism-modules {
+@layer lism-component {
   .c--details {
     --duration: var(--acc-duration, 0.25s); /* transition時間 */
     --_icon-scale: 1.1;

package/src/components/Details/astro/Title.astro

@@ -1,10 +1,10 @@
 ---
 import { Lism } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
+import { getTitleProps } from '../getProps';
 
 const props = Astro.props || {};
 ---
 
-<Lism {...defaultProps.title} {...props}>
+<Lism {...getTitleProps(props)}>
   <slot />
 </Lism>

package/src/components/Details/{getProps.js → getProps.ts}

@@ -1,23 +1,36 @@
 import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+import type { LismProps } from 'lism-css/lib/getLismProps';
+
+export type DetailsProps = {
+  lismClass?: string;
+  [key: string]: unknown;
+};
 
 /**
  * Detailsコンポーネントのルート要素用プロパティを生成
- * @param {Object} props - コンポーネントのプロパティ
- * @param {string} props.lismClass - 追加のLismクラス
- * @returns {Object} 処理済みプロパティ
  */
-export function getDetailsProps({ lismClass, ...props }) {
+export function getDetailsProps({ lismClass, ...props }: DetailsProps): LismProps {
   props.lismClass = atts(lismClass, 'c--details');
   return props;
 }
 
+export function getTitleProps({ set, ...props }: Record<string, unknown>) {
+  return {
+    lismClass: 'c--details_title',
+    as: 'span',
+    fx: '1',
+    set: mergeSet('plain', set),
+    ...props,
+  };
+}
+
 /**
  * 各サブコンポーネント用のデフォルトプロパティ
  */
 export const defaultProps = {
   summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
-  title: { lismClass: 'c--details_title', as: 'span', fx: '1', setPlain: 1 },
   icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
   body: { lismClass: 'c--details_body' },
   content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
-};
+} as const;

package/src/components/Details/react/Details.tsx

@@ -0,0 +1,69 @@
+/**
+ * React版 Detailsコンポーネント
+ */
+import type { ElementType } from 'react';
+import getLismProps from 'lism-css/lib/getLismProps';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getDetailsProps, getTitleProps, defaultProps } from '../getProps';
+
+// スタイルのインポート
+import '../_style.css';
+
+type DetailsRootProps = LismComponentProps<'details'> & { open?: boolean };
+
+/**
+ * Details - ルートコンポーネント
+ * details要素をレンダリング
+ */
+export function Details({ children, open, ...props }: DetailsRootProps) {
+  const lismProps = getLismProps(getDetailsProps(props));
+
+  return (
+    <details open={open} {...lismProps}>
+      {children}
+    </details>
+  );
+}
+
+/**
+ * Summary - サマリーコンポーネント
+ * details要素のsummary部分
+ */
+export function Summary<T extends ElementType = 'summary'>({ children, ...props }: LismComponentProps<T>) {
+  return (
+    <Lism as="summary" {...(defaultProps.summary as object)} {...(props as object)}>
+      {children}
+    </Lism>
+  );
+}
+
+/**
+ * Title - タイトルコンポーネント
+ */
+export function Title<T extends ElementType = 'span'>({ children, ...props }: LismComponentProps<T>) {
+  return <Lism {...(getTitleProps(props as Record<string, unknown>) as object)}>{children}</Lism>;
+}
+
+/**
+ * Icon - アイコンコンポーネント
+ */
+export function Icon<T extends ElementType = 'span'>({ children, ...props }: LismComponentProps<T>) {
+  return (
+    <Lism {...(defaultProps.icon as object)} {...(props as object)}>
+      {children}
+    </Lism>
+  );
+}
+
+/**
+ * Content - コンテンツコンポーネント
+ */
+export function Content<T extends ElementType = 'div'>({ children, ...props }: LismComponentProps<T>) {
+  return (
+    <Lism {...defaultProps.body}>
+      <Lism {...(defaultProps.content as object)} {...(props as object)}>
+        {children}
+      </Lism>
+    </Lism>
+  );
+}