@lism-css/ui 0.10.0 → 0.12.0

package/src/components/Chat/_style.css

@@ -1,9 +1,9 @@
 @layer lism-modules {
   .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/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, unset, ...props }: Record<string, unknown>) {
+  return {
+    lismClass: 'c--details_title',
+    as: 'span',
+    fx: '1',
+    set: mergeSet('plain', set, unset),
+    ...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>
+  );
+}

package/src/components/DummyImage/DummyImage.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DummyImage from './react/DummyImage';
+
+const meta: Meta<typeof DummyImage> = {
+  title: 'UI/DummyImage',
+  component: DummyImage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DummyImage>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSize: Story = {
+  name: 'サイズ指定',
+  args: {
+    w: '300px',
+    h: '200px',
+  },
+};

package/src/components/DummyText/DummyText.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DummyText from './react/DummyText';
+
+const meta: Meta<typeof DummyText> = {
+  title: 'UI/DummyText',
+  component: DummyText,
+  tags: ['autodocs'],
+  argTypes: {
+    lang: { control: 'select', options: ['en', 'ja', 'ar'] },
+    length: { control: 'select', options: ['s', 'm', 'l'] },
+    offset: { control: 'number' },
+    pre: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DummyText>;
+
+export const Default: Story = {
+  args: {
+    lang: 'en',
+    length: 'm',
+  },
+};
+
+export const Japanese: Story = {
+  name: '日本語',
+  args: {
+    lang: 'ja',
+    length: 'm',
+  },
+};
+
+export const Short: Story = {
+  name: '短い（length: s）',
+  args: {
+    lang: 'en',
+    length: 's',
+  },
+};
+
+export const Long: Story = {
+  name: '長い（length: l）',
+  args: {
+    lang: 'en',
+    length: 'l',
+  },
+};

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+import Modal from './react';
+
+const meta: Meta = {
+  title: 'UI/Modal',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Modal.OpenBtn modalId="story-modal-1">モーダルを開く</Modal.OpenBtn>
+      <Modal.Root id="story-modal-1">
+        <Modal.Inner>
+          <Modal.Body>
+            <p>モーダルのコンテンツです。</p>
+          </Modal.Body>
+          <Modal.CloseBtn modalId="story-modal-1">閉じる</Modal.CloseBtn>
+        </Modal.Inner>
+      </Modal.Root>
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dialog = canvas.getByRole('dialog', { hidden: true });
+    const openBtn = canvas.getByRole('button', { name: 'モーダルを開く' });
+
+    // 初期状態: モーダルは閉じている
+    await expect(dialog).not.toHaveAttribute('open');
+
+    // 開くボタンをクリック
+    await userEvent.click(openBtn);
+
+    // モーダルが開いている
+    await waitFor(() => expect(dialog).toHaveAttribute('open'));
+
+    // 閉じるボタンをクリック
+    const closeBtn = within(dialog).getByRole('button', { name: '閉じる' });
+    await userEvent.click(closeBtn);
+
+    // モーダルが閉じている（アニメーション完了待ち）
+    await waitFor(() => expect(dialog).not.toHaveAttribute('open'), { timeout: 2000 });
+  },
+};
+
+export const WithTitle: Story = {
+  name: 'タイトル付き',
+  render: () => (
+    <>
+      <Modal.OpenBtn modalId="story-modal-2">モーダルを開く</Modal.OpenBtn>
+      <Modal.Root id="story-modal-2">
+        <Modal.Inner>
+          <Modal.Body>
+            <h2>モーダルタイトル</h2>
+            <p>モーダルのコンテンツです。</p>
+          </Modal.Body>
+          <Modal.CloseBtn modalId="story-modal-2">閉じる</Modal.CloseBtn>
+        </Modal.Inner>
+      </Modal.Root>
+    </>
+  ),
+};

package/src/components/Modal/astro/CloseBtn.astro

@@ -1,12 +1,12 @@
 ---
 // import type { LismProps } from 'lism-css/types';
 import { Lism, Icon } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
+import { getCloseBtnProps } from '../getProps';
 
 // Propsの定義
 // interface Props extends LismProps {}
 const { modalId = '', icon, srText = 'Close', ...props } = Astro.props || {};
-const btnProps = { ...defaultProps.closeBtn, ...props };
+const btnProps = getCloseBtnProps(props);
 ---
 
 {

package/src/components/Modal/astro/OpenBtn.astro

@@ -1,14 +1,13 @@
 ---
 // import type { LismProps } from 'lism-css/types';
 import { Lism } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
+import { getOpenBtnProps } from '../getProps';
 
 // Propsの定義
 // interface Props extends LismProps {}
 const { modalId = '', ...props } = Astro.props || {};
-const btnProps = { ...defaultProps.openBtn, ...props };
 ---
 
-<Lism data-modal-open={modalId} {...btnProps}>
+<Lism data-modal-open={modalId} {...getOpenBtnProps(props)}>
   <slot />
 </Lism>

package/src/components/Modal/getProps.ts

@@ -0,0 +1,65 @@
+import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+
+export type ModalRootProps = {
+  lismClass?: string;
+  set?: string;
+  unset?: string;
+  duration?: string;
+  style?: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export type ModalInnerProps = {
+  lismClass?: string;
+  offset?: string;
+  style?: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export function getProps({ lismClass = '', set, unset, duration, style = {}, ...props }: ModalRootProps) {
+  const theProps = {
+    lismClass: atts(lismClass, 'c--modal'),
+    set: mergeSet('plain', set, unset),
+  };
+  if (duration) {
+    style['--duration'] = duration;
+  }
+
+  return { as: 'dialog', ...theProps, style, ...props };
+}
+
+export function getInnerProps({ lismClass = '', offset, style = {}, ...props }: ModalInnerProps) {
+  if (offset) {
+    style['--offset'] = offset;
+  }
+  return {
+    lismClass: atts(lismClass, 'c--modal_inner'),
+    style,
+    ...props,
+  };
+}
+
+export function getOpenBtnProps({ set, unset, ...props }: Record<string, unknown>) {
+  return {
+    as: 'button',
+    set: mergeSet('plain', set, unset),
+    hov: 'o',
+    d: 'inline-flex',
+    ...props,
+  };
+}
+
+export function getCloseBtnProps({ set, unset, ...props }: Record<string, unknown>) {
+  return {
+    as: 'button',
+    set: mergeSet('plain', set, unset),
+    hov: 'o',
+    d: 'inline-flex',
+    ...props,
+  };
+}
+
+export const defaultProps = {
+  body: { lismClass: 'c--modal_body' },
+};

package/src/components/Modal/react/Body.tsx

@@ -0,0 +1,10 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+export default function ModalBody({ children, ...props }: LismComponentProps) {
+  return (
+    <Lism {...defaultProps.body} {...props}>
+      {children}
+    </Lism>
+  );
+}

package/src/components/Modal/react/CloseBtn.tsx

@@ -0,0 +1,24 @@
+import type { ElementType } from 'react';
+import { Lism, Icon, type LismComponentProps, type IconProps } from 'lism-css/react';
+import { getCloseBtnProps } from '../getProps';
+
+type CloseBtnProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+  modalId?: string;
+  icon?: IconProps['icon'];
+  srText?: string;
+};
+
+export default function CloseBtn<T extends ElementType = 'button'>({ children, modalId = '', icon, srText = 'Close', ...props }: CloseBtnProps<T>) {
+  return (
+    <Lism data-modal-close={modalId} {...(getCloseBtnProps(props as Record<string, unknown>) as object)}>
+      {children ? (
+        children
+      ) : (
+        <>
+          <Icon icon={icon || 'x'} />
+          <span className="u--srOnly">{srText || 'Close'}</span>
+        </>
+      )}
+    </Lism>
+  );
+}

package/src/components/Modal/react/Inner.tsx

@@ -0,0 +1,6 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getInnerProps, type ModalInnerProps } from '../getProps';
+
+export default function ModalInner({ children, ...props }: ModalInnerProps & LismComponentProps) {
+  return <Lism {...getInnerProps(props)}>{children}</Lism>;
+}

package/src/components/Modal/react/Modal.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { setEvent } from '../setModal';
+import { getProps, type ModalRootProps } from '../getProps';
+
+import '../_style.css';
+
+const Modal = <T extends ElementType = 'dialog'>({ children, ...props }: ModalRootProps & LismComponentProps<T>) => {
+  const ref = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    if (!ref?.current) return;
+    return setEvent(ref?.current);
+  }, [ref]);
+
+  const { as: modalAs, ...modalProps } = getProps(props);
+  return (
+    <Lism as={modalAs as ElementType} forwardedRef={ref} {...modalProps}>
+      {children}
+    </Lism>
+  );
+};
+export default Modal;

package/src/components/Modal/react/OpenBtn.tsx

@@ -0,0 +1,15 @@
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getOpenBtnProps } from '../getProps';
+
+type OpenBtnProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+  modalId?: string;
+};
+
+export default function OpenBtn<T extends ElementType = 'button'>({ children, modalId = '', ...props }: OpenBtnProps<T>) {
+  return (
+    <Lism data-modal-open={modalId} {...(getOpenBtnProps(props as Record<string, unknown>) as object)}>
+      {children}
+    </Lism>
+  );
+}

package/src/components/Modal/{script.js → script.ts}

@@ -1,5 +1,5 @@
 /* Memo: この script は defer をつけて読み込む （DOMパース後に読み込まれます） */
-import setModal from './setModal.ts';
+import setModal from './setModal';
 
 document.addEventListener('DOMContentLoaded', function () {
   setModal();