@lism-css/ui 0.11.0 → 0.13.0

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+import Tabs from './react';
+
+const meta: Meta = {
+  title: 'UI/Tabs',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs.Root>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 1</Tabs.Tab>
+        <Tabs.Panel>タブ 1 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 2</Tabs.Tab>
+        <Tabs.Panel>タブ 2 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 3</Tabs.Tab>
+        <Tabs.Panel>タブ 3 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+    </Tabs.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole('tab');
+    const [tab1, tab2, tab3] = tabs;
+
+    // 初期状態: タブ 1 が選択されている
+    await expect(tab1).toHaveAttribute('aria-selected', 'true');
+    await expect(tab2).toHaveAttribute('aria-selected', 'false');
+    await expect(tab3).toHaveAttribute('aria-selected', 'false');
+
+    // タブ 2 をクリック
+    await userEvent.click(tab2);
+    await expect(tab1).toHaveAttribute('aria-selected', 'false');
+    await expect(tab2).toHaveAttribute('aria-selected', 'true');
+
+    // タブ 3 をクリック
+    await userEvent.click(tab3);
+    await expect(tab2).toHaveAttribute('aria-selected', 'false');
+    await expect(tab3).toHaveAttribute('aria-selected', 'true');
+  },
+};
+
+export const DefaultIndex2: Story = {
+  name: 'defaultIndex: 2（2番目をデフォルト選択）',
+  render: () => (
+    <Tabs.Root defaultIndex={2}>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 1</Tabs.Tab>
+        <Tabs.Panel>タブ 1 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 2</Tabs.Tab>
+        <Tabs.Panel>タブ 2 がデフォルトで選択されています。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 3</Tabs.Tab>
+        <Tabs.Panel>タブ 3 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+    </Tabs.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole('tab');
+    const [tab1, tab2] = tabs;
+
+    // 初期状態: タブ 2 が選択されている
+    await expect(tab1).toHaveAttribute('aria-selected', 'false');
+    await expect(tab2).toHaveAttribute('aria-selected', 'true');
+  },
+};

package/src/components/Tabs/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--tabs {
     display: grid;
     grid: 'list' 'panel' / 100%;

package/src/components/Tabs/astro/Tab.astro

@@ -1,6 +1,7 @@
 ---
 // import type { LismProps } from 'lism-css/types';
 import { Lism } from 'lism-css/astro';
+import { getTabProps } from '../getProps';
 
 // export interface Props extends LismProps {
 // 	// controlId: string;
@@ -12,6 +13,6 @@ const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
 const controlId = `${tabId}-${index}`;
 ---
 
-<Lism as="button" lismClass="c--tabs_tab" setPlain role="tab" aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
+<Lism {...getTabProps(props)} role="tab" aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'}>
   <slot />
 </Lism>

package/src/components/Tabs/astro/{transformTabitems.js → transformTabitems.ts}

@@ -1,30 +1,30 @@
+type TransformResult = {
+  btns: string[];
+  panels: string[];
+};
+
 // <lism-placeholder-tabitem> → div.tabitem へ 変換
-export default function transformHTML(htmlString, tabID, defaultIndex) {
+export default function transformHTML(htmlString: string, tabID: string, defaultIndex: number): TransformResult {
   let index = 1; // 1スタート
-  let btns = [];
-  let panels = [];
+  const btns: string[] = [];
+  const panels: string[] = [];
 
-  // <lism-placeholder-tabitem>でコンテンツを囲んでいるので中身を解析する。
   const regex = /<lism-placeholder-tabitem(.*?)>(.*?)<\/lism-placeholder-tabitem>/gs;
   const matches = [...htmlString.matchAll(regex)];
 
-  // console.log(matches);
   matches.forEach((match) => {
-    // const tabItemAttrs = match[1]; // 使わないがdata-astro-source-file属性が自動でついてきたりするので、属性値があっても問題ないようにしている。
     const tabItemContent = match[2];
 
     const controlId = `${tabID}-${index}`;
     const isActive = index === defaultIndex;
     index++;
 
-    // <lism-placeholder-tabtbn>からタブボタンを生成
     const btnMatch = tabItemContent.match(/<button(.*?)>(.*?)<\/button>(.*)/s);
     if (!btnMatch) return;
     let btnAtts = btnMatch[1];
-    let btnContent = btnMatch[2];
+    const btnContent = btnMatch[2];
     let panel = btnMatch[3];
 
-    // btnContent = btnContent.replace(` slot="tab"`, '');
     btnAtts = btnAtts.replace(`aria-controls="tab-0"`, `aria-controls="${controlId}"`);
     panel = panel.replace(`id="tab-0"`, `id="${controlId}"`);
     if (isActive) {

package/src/components/Tabs/getProps.ts

@@ -0,0 +1,23 @@
+import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+
+type TabsProps = {
+  lismClass?: string;
+  [key: string]: unknown;
+};
+
+export default function getTabsProps({ lismClass, ...props }: TabsProps) {
+  return {
+    lismClass: atts(lismClass, 'c--tabs'),
+    ...props,
+  };
+}
+
+export function getTabProps({ set, ...props }: Record<string, unknown>) {
+  return {
+    as: 'button',
+    lismClass: 'c--tabs_tab',
+    set: mergeSet('plain', set),
+    ...props,
+  };
+}

package/src/components/Tabs/react/Tab.tsx

@@ -0,0 +1,21 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getTabProps } from '../getProps';
+
+type TabProps = LismComponentProps & {
+  tabId?: string;
+  index?: number;
+  isActive?: boolean;
+};
+
+export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...props }: TabProps) {
+  const controlId = `${tabId}-${index}`;
+
+  return (
+    <Lism
+      {...(getTabProps(props as Record<string, unknown>) as object)}
+      role="tab"
+      aria-controls={controlId}
+      aria-selected={isActive ? 'true' : 'false'}
+    />
+  );
+}

package/src/components/Tabs/react/TabItem.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+type TabItemProps = {
+  isTabItem?: boolean;
+  children?: ReactNode;
+};
+
+// Note: <Tabs>側でループして色々処理される。
+// 引数でちゃんと処理したいpropを書いておかないとだめ。
+export default function TabItem({ isTabItem = true, children }: TabItemProps) {
+  void isTabItem;
+  return <div>{children}</div>;
+}

package/src/components/Tabs/react/TabList.tsx

@@ -0,0 +1,5 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+
+export default function TabList(props: LismComponentProps) {
+  return <Lism lismClass="c--tabs_list" role="tablist" {...props} />;
+}

package/src/components/Tabs/react/{TabPanel.jsx → TabPanel.tsx}

@@ -1,7 +1,12 @@
-// import React from 'react';
-import { Lism } from 'lism-css/react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
 
-export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }) {
+type TabPanelProps = LismComponentProps & {
+  tabId?: string;
+  isActive?: boolean;
+  index?: number;
+};
+
+export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }: TabPanelProps) {
   const controlId = `${tabId}-${index}`;
 
   return <Lism id={controlId} role="tabpanel" aria-hidden={isActive ? 'false' : 'true'} lismClass="c--tabs_panel" {...props} />;

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

@@ -1,34 +1,41 @@
 'use client';
 import { useState, useId, Children, isValidElement } from 'react';
-import { Lism } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
 import Tab from './Tab';
 import TabItem from './TabItem';
 import TabList from './TabList';
 import TabPanel from './TabPanel';
 import getTabsProps from '../getProps';
-// import { TabContext } from './context';
 
 import '../_style.css';
 
-export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
+type TabsProps<T extends ElementType = 'div'> = LismComponentProps<T> & {
+  tabId?: string;
+  defaultIndex?: number;
+  listProps?: LismComponentProps;
+};
+
+export default function Tabs<T extends ElementType = 'div'>({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }: TabsProps<T>) {
   const [activeIndex, setActiveIndex] = useState(defaultIndex);
-  const theTabId = tabId || useId();
-  const btns = [];
-  const panels = [];
+  const generatedId = useId();
+  const theTabId = tabId || generatedId;
+  const btns: React.ReactElement[] = [];
+  const panels: React.ReactElement[] = [];
 
   // Tabs.Item の処理
   Children.forEach(children, (child, index) => {
     const tabIndex = index + 1; // 1 はじまり
-    // console.log('child.type', isValidElement(child), child.type);
 
     if (isValidElement(child) && child.type === TabItem) {
-      Children.forEach(child.props.children, (nestedChild) => {
+      const childProps = child.props as { children?: React.ReactNode };
+      Children.forEach(childProps.children, (nestedChild) => {
         if (isValidElement(nestedChild)) {
           if (nestedChild.type === Tab) {
-            const tabProps = nestedChild.props;
+            const tabProps = nestedChild.props as Record<string, unknown>;
             btns.push(
               <Tab
-                {...tabProps}
+                {...(tabProps as LismComponentProps)}
                 tabId={theTabId}
                 index={tabIndex}
                 key={tabIndex}
@@ -37,8 +44,16 @@ export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, chi
               />
             );
           } else if (nestedChild.type === TabPanel) {
-            const panelProps = nestedChild.props;
-            panels.push(<TabPanel {...panelProps} tabId={theTabId} index={tabIndex} key={tabIndex} isActive={tabIndex === activeIndex} />);
+            const panelProps = nestedChild.props as Record<string, unknown>;
+            panels.push(
+              <TabPanel
+                {...(panelProps as LismComponentProps)}
+                tabId={theTabId}
+                index={tabIndex}
+                key={tabIndex}
+                isActive={tabIndex === activeIndex}
+              />
+            );
           }
         }
       });

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

@@ -1,7 +1,7 @@
-import setTabs from './setTabs.js';
+import setTabs from './setTabs';
 
 document.addEventListener('DOMContentLoaded', function () {
-  const tabsAll = document.querySelectorAll('.c--tabs');
+  const tabsAll = document.querySelectorAll<HTMLElement>('.c--tabs');
   tabsAll.forEach((tabs) => {
     setTabs(tabs);
   });

package/src/components/Tabs/setTabs.ts

@@ -0,0 +1,65 @@
+/**
+ * タブ
+ */
+function tabControl(e: MouseEvent): void {
+  e.preventDefault();
+  const clickedButton = e.currentTarget as HTMLButtonElement;
+  toggleAriaData(clickedButton);
+}
+
+const toggleAriaData = (clickedButton: HTMLButtonElement): void => {
+  const isOpend = 'true' === clickedButton.getAttribute('aria-selected');
+  if (isOpend) return;
+
+  const targetID = clickedButton.getAttribute('aria-controls');
+  if (!targetID) return;
+  const targetBody = document.getElementById(targetID);
+  if (null === targetBody) return;
+
+  const parentTabList = clickedButton.parentNode?.parentNode as HTMLElement | null;
+  if (!parentTabList) return;
+
+  const selectedButton = parentTabList.querySelector<HTMLButtonElement>('[aria-selected="true"]');
+  if (!selectedButton) return;
+
+  const displayedID = selectedButton.getAttribute('aria-controls');
+  if (!displayedID) return;
+  const displayedBody = document.getElementById(displayedID);
+
+  clickedButton.setAttribute('aria-selected', 'true');
+  selectedButton.setAttribute('aria-selected', 'false');
+  displayedBody?.setAttribute('aria-hidden', 'true');
+  targetBody.setAttribute('aria-hidden', 'false');
+};
+
+function setTabs(tabs: HTMLElement): void {
+  const tabBtns = tabs.querySelectorAll<HTMLButtonElement>('button[role="tab"]');
+  tabBtns.forEach((tabBtn) => {
+    tabBtn.addEventListener('click', function (e) {
+      tabControl(e);
+    });
+  });
+
+  const nowUrl = window?.location?.href;
+  if (!nowUrl) return;
+
+  const hasTabLink = -1 !== nowUrl.indexOf('?lism-tab=');
+  if (!hasTabLink) return;
+
+  const url = new URL(nowUrl);
+  const params = url.searchParams;
+
+  const targetTabId = params.get('lism-tab');
+  if (!targetTabId) return;
+
+  const target = tabs.querySelector<HTMLButtonElement>(`[aria-controls="${targetTabId}"]`);
+  if (target) {
+    tabs.dataset.hasTabLink = '1';
+    toggleAriaData(target);
+    setTimeout(() => {
+      delete tabs.dataset.hasTabLink;
+    }, 10);
+  }
+}
+
+export default setTabs;

package/src/helper/{uuid.js → uuid.ts}

@@ -1,6 +1,6 @@
 // https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
-export default function uuidv4() {
+export default function uuidv4(): string {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
-    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+    (parseInt(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (parseInt(c) / 4)))).toString(16)
   );
 }

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/components/Accordion/astro/__setEvent.d.ts

@@ -1 +0,0 @@
-export default setEvent;

package/dist/components/Accordion/astro/index.d.ts

@@ -1,15 +0,0 @@
-import { default as Root } from './Root.astro';
-import { default as Item } from './Item.astro';
-import { default as Heading } from './Heading.astro';
-import { default as Panel } from './Panel.astro';
-import { default as Icon } from './Icon.astro';
-import { default as Button } from './Button.astro';
-declare namespace _default {
-    export { Root };
-    export { Item };
-    export { Heading };
-    export { Panel };
-    export { Icon };
-    export { Button };
-}
-export default _default;

package/dist/components/Alert/astro/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Alert.astro';

package/dist/components/Callout/astro/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Callout.astro';

package/dist/components/Details/astro/index.d.ts

@@ -1,13 +0,0 @@
-import { default as Root } from './Details.astro';
-import { default as Summary } from './Summary.astro';
-import { default as Title } from './Title.astro';
-import { default as Content } from './Content.astro';
-import { default as Icon } from './Icon.astro';
-declare namespace _default {
-    export { Root };
-    export { Summary };
-    export { Title };
-    export { Content };
-    export { Icon };
-}
-export default _default;

package/dist/components/DummyImage/astro/index.d.ts

@@ -1 +0,0 @@
-export { default } from './DummyImage.astro';

package/dist/components/DummyText/astro/index.d.ts

@@ -1 +0,0 @@
-export { default } from './DummyText.astro';

package/dist/components/Modal/astro/index.d.ts

@@ -1,13 +0,0 @@
-import { default as Root } from './Modal.astro';
-import { default as Inner } from './Inner.astro';
-import { default as Body } from './Body.astro';
-import { default as CloseBtn } from './CloseBtn.astro';
-import { default as OpenBtn } from './OpenBtn.astro';
-declare namespace _default {
-    export { Root };
-    export { Inner };
-    export { Body };
-    export { CloseBtn };
-    export { OpenBtn };
-}
-export default _default;

package/dist/components/NavMenu/astro/index.d.ts

@@ -1,11 +0,0 @@
-import { default as Root } from './Root.astro';
-import { default as Nest } from './Nest.astro';
-import { default as Item } from './Item.astro';
-import { default as Link } from './Link.astro';
-declare namespace _default {
-    export { Root };
-    export { Nest };
-    export { Item };
-    export { Link };
-}
-export default _default;

package/dist/components/Tabs/astro/index.d.ts

@@ -1,13 +0,0 @@
-import { default as Root } from './Tabs.astro';
-import { default as List } from './TabList.astro';
-import { default as Panel } from './TabPanel.astro';
-import { default as Item } from './TabItem.astro';
-import { default as Tab } from './Tab.astro';
-declare namespace _default {
-    export { Root };
-    export { List };
-    export { Panel };
-    export { Item };
-    export { Tab };
-}
-export default _default;

package/dist/components/Tabs/astro/transformTabitems.d.ts

@@ -1,4 +0,0 @@
-export default function transformHTML(htmlString: any, tabID: any, defaultIndex: any): {
-    btns: any[];
-    panels: any[];
-};

package/dist/components/astro.d.ts

@@ -1,14 +0,0 @@
-export { default as Accordion } from './Accordion/astro';
-export { default as Alert } from './Alert/astro';
-export { default as Avatar } from './Avatar/astro';
-export { default as Badge } from './Badge/astro';
-export { default as Button } from './Button/astro';
-export { default as Callout } from './Callout/astro';
-export { default as Chat } from './Chat/astro';
-export { default as Details } from './Details/astro';
-export { default as Modal } from './Modal/astro';
-export { default as NavMenu } from './NavMenu/astro';
-export { default as ShapeDivider } from './ShapeDivider/astro';
-export { default as Tabs } from './Tabs/astro';
-export { default as DummyText } from './DummyText/astro';
-export { default as DummyImage } from './DummyImage/astro';

package/dist/lism-css/dist/config/defaults/states.js

@@ -1,38 +0,0 @@
-import t from "../helper/getSvgUrl.js";
-const a = {
-  isContainer: "is--container",
-  isWrapper: {
-    className: "is--wrapper",
-    preset: ["s", "l"],
-    presetClass: "-contentSize",
-    customVar: "--contentSize",
-    tokenKey: "sz"
-  },
-  isLayer: "is--layer",
-  isLinkBox: "is--linkBox",
-  isSide: "is--side",
-  isSkipFlow: "is--skipFlow",
-  isVertical: "is--vertical",
-  setGutter: "set--gutter",
-  // set class
-  setShadow: "set--shadow",
-  setHov: "set--hov",
-  setTransition: "set--transition",
-  setMask: {
-    // 'set--mask',
-    className: "set--mask",
-    setStyles: (e) => {
-      let s = e;
-      return s.startsWith("<svg") && (s = t(e, "base64")), {
-        "--maskImg": s
-      };
-    }
-  },
-  setPlain: "set--plain",
-  // setRevert: 'set--revert',
-  setInnerRs: "set--innerRs",
-  setBp: "set--bp"
-};
-export {
-  a as default
-};

package/dist/lism-css/dist/config/helper/getSvgUrl.js

@@ -1,4 +0,0 @@
-const g = (a, r = "") => a ? r === "base64" ? (a = Buffer.from(a).toString("base64"), `url(data:image/svg+xml;base64,${a})`) : (a = a.replace(/'/g, '"'), a = a.replace(/="#/g, '="%23'), `url('data:image/svg+xml,${a}')`) : "";
-export {
-  g as default
-};

package/src/components/Accordion/getProps.js

@@ -1,77 +0,0 @@
-import atts from 'lism-css/lib/helper/atts';
-
-export function getRootProps({ lismClass, allowMultiple, ...props }) {
-  props.lismClass = atts(lismClass, 'c--accordion');
-  if (allowMultiple) props['data-allow-multiple'] = '';
-  return props;
-}
-
-// duration: [s]
-export function getItemProps({ lismClass, ...props }) {
-  props.lismClass = atts(lismClass, 'c--accordion_item');
-  return props;
-}
-
-export function getHeadingProps(props) {
-  const defaultProps = {
-    lismClass: 'c--accordion_heading',
-    as: 'div',
-    setPlain: 1,
-  };
-
-  const returnProps = { ...defaultProps, ...props };
-
-  // div の時は role 付与
-  if (returnProps.as === 'div') {
-    returnProps.role = 'heading';
-  }
-  return returnProps;
-}
-
-// id: Context から取得できればそれを優先（React用）
-export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }) {
-  // panel側は必要最低限のプロパティのみ。
-  const panelProps = {
-    lismClass: atts(lismClass, 'c--accordion_panel'),
-    id: _contextID || accID,
-    hidden: isOpen ? undefined : 'until-found',
-    pos: 'relative',
-    ov: 'hidden',
-  };
-
-  // 余白などその他の指定は全て _content 側へ渡す
-  const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
-
-  // content側へ移すprops
-  // ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
-  // 	if (props[prop]) {
-  // 		contentProps[prop] = props[prop];
-  // 		delete props[prop];
-  // 	}
-  // });
-
-  // 2つ返す
-  return { panelProps, contentProps };
-}
-
-export const defaultProps = {
-  // header: { lismClass: 'c--accordion_header' },
-  button: {
-    lismClass: 'c--accordion_button',
-    as: 'button',
-    layout: 'flex',
-    setPlain: 1,
-    g: '10',
-    w: '100%',
-    ai: 'center',
-    jc: 'between',
-  },
-  icon: {
-    lismClass: 'c--accordion_icon a--icon',
-    as: 'span',
-    // d: 'grid',
-    pi: 'center',
-    fxsh: '0',
-    'aria-hidden': 'true',
-  },
-};