lism-css 0.9.2 → 1.0.0-beta.1

package/packages/astro/Decorator/Decorator.astro

@@ -1,10 +1,9 @@
 ---
-import type { LismProps } from '../../types';
+import type { DecoratorProps } from 'lism-css/react/atomic/Decorator/getProps';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/atomic/Decorator/getProps';
+import getProps from 'lism-css/react/atomic/Decorator/getProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = DecoratorProps;
 const props = Astro.props || {};
 ---
 

package/packages/astro/Divider/Divider.astro

@@ -1,10 +1,9 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-import { getDividerProps } from '../../../dist/components/atomic/Divider/getProps';
+import { getDividerProps } from 'lism-css/react/atomic/Divider/getProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = AstroLismProps;
 
 const props = Astro.props || {};
 ---

package/packages/astro/Dummy/Dummy.astro

@@ -1,10 +1,14 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-import getContent from '../../../dist/components/Dummy/getContent';
+import getContent from 'lism-css/react/Dummy/getContent';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = AstroLismProps & {
+	pre?: string;
+	length?: string;
+	lang?: 'ja' | 'en' | 'ar';
+	offset?: number;
+};
 const { as: tagName = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } = Astro.props || {};
 const content = getContent({ tag: tagName, pre, lang, length, offset });
 ---

package/packages/astro/Flex/Flex.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='flex' {...Astro.props}><slot /></Lism>

package/packages/astro/Flow/Flow.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='flow' {...Astro.props}><slot /></Lism>

package/packages/astro/FluidCols/FluidCols.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='fluidCols' {...Astro.props}><slot /></Lism>

package/packages/astro/Frame/Frame.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='frame' {...Astro.props}><slot /></Lism>

package/packages/astro/Grid/Grid.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='grid' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/a.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='a' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='button' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='div' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -1,5 +1,11 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps & {
+	lv?: '1' | '2' | '3' | '4' | '5' | '6';
+};
+
 const { lv = '1', ...props } = Astro.props;
 ---
 

package/packages/astro/HTML/img.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='img' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/li.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='li' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='ol' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='p' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/span.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='span' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ul.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
 ---
 
 <Lism as='ul' {...Astro.props}><slot /></Lism>

package/packages/astro/Icon/Icon.astro

@@ -1,24 +1,19 @@
 ---
-import type { LismProps } from '../../types';
-import getLismProps from '../../../dist/lib/getLismProps';
-import getProps from '../../../dist/components/atomic/Icon/getProps';
+import type { IconProps } from 'lism-css/react/atomic/Icon/getProps';
+import type { AstroLismProps } from '../types';
+import getLismProps from 'lism-css/lib/getLismProps';
+import getProps from 'lism-css/react/atomic/Icon/getProps';
 import SVG from './SVG.astro';
 
-// Propsの定義
-interface Props extends LismProps {
-	Component?: any;
-	lismProps?: LismProps;
-	exProps?: any;
-	content?: string;
-}
+type AstroIconElementProps = astroHTML.JSX.SVGAttributes & astroHTML.JSX.ImgHTMLAttributes;
 
-const props = Astro.props || {};
+type Props = Omit<AstroLismProps, 'as'> & IconProps & AstroIconElementProps;
 
 // const hasChildren = Astro.slots.has('default');
 // let { IconTag, iconProps, otherProps } = getProps(props, hasChildren);
 // if (IconTag === '_SVG_') IconTag = SVG;
 
-let { Component, lismProps, exProps = {}, content }: Props = getProps(props);
+let { Component, lismProps, exProps = {}, content } = getProps(Astro.props as IconProps);
 
 if (Component === '_SVG_') {
 	Component = SVG;

package/packages/astro/Layer/Layer.astro

@@ -1,6 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-import getFilterProps from '../../../dist/components/getFilterProps';
+import getFilterProps, { type FilterProps } from 'lism-css/react/getFilterProps';
+
+type Props = AstroLismProps & FilterProps;
 ---
 
 <Lism isLayer {...getFilterProps(Astro.props, 'backdropFilter')}>

package/packages/astro/LinkBox/LinkBox.astro

@@ -1,9 +1,10 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-// import getProps from '../../../dist/components/LinkBox/getProps';
 
-interface Props extends LismProps {}
+type Props = AstroLismProps & {
+	href?: string;
+};
 const props = Astro.props || {};
 
 const hasHref = !!props.href;

package/packages/astro/Lism/Lism.astro

@@ -1,14 +1,13 @@
 ---
-import type { LismProps } from '../../types';
-import getLismProps from '../../../dist/lib/getLismProps';
+import type { AstroLismProps } from '../types';
+import getLismProps from 'lism-css/lib/getLismProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+interface Props extends AstroLismProps {}
 
-const { as, exProps, ...props } = Astro.props || {};
+const { as, exProps, ...props } = Astro.props;
 const JSX = as || 'div';
 ---
 
-<JSX {...getLismProps(props)} {...exProps}>
+<JSX {...getLismProps(props) as Record<string, unknown>} {...exProps}>
 	<slot />
 </JSX>

package/packages/astro/Media/Media.astro

@@ -1,11 +1,14 @@
 ---
-import getLismProps from '../../../dist/lib/getLismProps';
-import getMediaProps from '../../../dist/components/atomic/Media/getProps';
+import type { MediaProps } from 'lism-css/react/atomic/Media/getProps';
+import getLismProps from 'lism-css/lib/getLismProps';
+import getMediaProps from 'lism-css/react/atomic/Media/getProps';
 import { Image } from 'astro:assets';
 
+type Props = MediaProps;
+
 const { as, exProps, ...props } = Astro.props || {};
 
-let JSX = as || 'img';
+let JSX: any = as || 'img';
 if (JSX === 'AstroImage') {
 	JSX = Image;
 }

package/packages/astro/SideMain/SideMain.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='sideMain' {...Astro.props}><slot /></Lism>

package/packages/astro/Spacer/Spacer.astro

@@ -1,10 +1,9 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/atomic/Spacer/getProps';
+import getProps from 'lism-css/react/atomic/Spacer/getProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = AstroLismProps;
 const props = Astro.props || {};
 ---
 

package/packages/astro/Stack/Stack.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='stack' {...Astro.props}><slot /></Lism>

package/packages/astro/SwitchCols/SwitchCols.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='switchCols' {...Astro.props}><slot /></Lism>

package/packages/astro/Wrapper/Wrapper.astro

@@ -1,6 +1,11 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
 
+type Props = AstroLismProps & {
+	contentSize?: AstroLismProps['isWrapper'];
+};
+
 const { contentSize = true, ...props } = Astro.props || {};
 ---
 

package/packages/astro/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="astro/client" />
+
+declare module '*.astro' {
+	const component: (props: Record<string, unknown>) => unknown;
+	export default component;
+}
+
+declare module 'astro:assets' {
+	export const Image: typeof import('astro/components/Image.astro').default;
+}

package/packages/astro/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "astro/tsconfigs/strict",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": false,
+		"moduleResolution": "bundler",
+		"esModuleInterop": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true
+	},
+	"include": ["./**/*.astro", "./**/*.ts"]
+}

package/packages/astro/types.ts

@@ -0,0 +1,53 @@
+/**
+ * Astro 用の Lism Props 型
+ *
+ * Astro テンプレートではコンポーネント呼び出し時にジェネリクスを渡せないため、
+ * React の ElementType に依存せず、as を任意の文字列で受け取る。
+ * astroHTML.JSX の HTML 属性型を union し、as で要素を切り替えた際の
+ * 要素固有属性（href, src 等）も受け入れられるようにする。
+ *
+ * @see https://github.com/withastro/roadmap/discussions/601
+ * @see https://github.com/withastro/roadmap/discussions/398
+ */
+import type { HTMLTag } from 'astro/types';
+import type { LismProps } from 'lism-css/lib/getLismProps';
+import type { LayoutType, CssValue } from 'lism-css/lib/types/LayoutProps';
+
+type AstroHTMLAttributesRaw = astroHTML.JSX.HTMLAttributes &
+	astroHTML.JSX.AnchorHTMLAttributes &
+	astroHTML.JSX.ImgHTMLAttributes &
+	astroHTML.JSX.ButtonHTMLAttributes &
+	astroHTML.JSX.FormHTMLAttributes &
+	astroHTML.JSX.InputHTMLAttributes &
+	astroHTML.JSX.SelectHTMLAttributes &
+	astroHTML.JSX.TextareaHTMLAttributes;
+
+/** LismProps と同名のキーを除外し、Lism 側の型を優先させる */
+type AstroHTMLAttributes = Omit<AstroHTMLAttributesRaw, keyof LismProps | keyof AstroLayoutProps>;
+
+/**
+ * React では LayoutSpecificProps（判別可能ユニオン・12メンバー）を使用しているが、
+ * Astro ではいまとのところジェネリクスを用いていないので AstroHTMLAttributes（8つの HTML 属性型の intersection）が
+ * 常に全体に交差されるため、12パターン × 巨大な型で TS2590 が発生する。
+ * React では ComponentPropsWithoutRef<T> の T が具体的な1要素に確定するため問題にならない。
+ * Astro 用にはフラットな型を使用して回避する。
+ *
+ * NOTE: 将来的に Astro の Polymorphic 型を導入すれば、as の値から具体的な1要素に
+ * 確定できるため、AstroHTMLAttributesRaw の巨大な intersection が不要になり、
+ * LayoutSpecificProps も直接使用できる可能性がある。
+ */
+type AstroLayoutProps = {
+	layout?: LayoutType;
+	flow?: CssValue;
+	autoFill?: boolean;
+	sideW?: CssValue;
+	mainW?: CssValue;
+	breakSize?: CssValue;
+};
+
+export type AstroLismProps = LismProps &
+	AstroLayoutProps &
+	AstroHTMLAttributes & {
+		as?: HTMLTag;
+		exProps?: Record<string, unknown>;
+	};

package/src/scss/base/tokens/_shadow.scss

@@ -11,6 +11,7 @@
 	--sh--40: var(--sh-inset) var(--shsz--40) var(--shc);
 	--sh--50: var(--sh-inset) var(--shsz--50) var(--shc);
 
+	--bxsh--5: var(--sh--5);
 	--bxsh--10: var(--sh--5), var(--sh--10);
 	--bxsh--20: var(--sh--10), var(--sh--20);
 	--bxsh--30: var(--sh--20), var(--sh--30);

package/packages/astro/OverlayLink/OverlayLink.astro

@@ -1,10 +0,0 @@
----
-import type { LismProps } from '../../types';
-import { Lism } from '../Lism';
-import getOverlayLinkProps from '../../../dist/components/OverlayLink/getProps';
-
-interface Props extends LismProps {}
-const props = Astro.props || {};
----
-
-<Lism {...getOverlayLinkProps(props)}><slot /></Lism>

package/packages/astro/OverlayLink/index.js

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

package/packages/astro/helper.js

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