lism-css 0.8.2 → 0.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/script-build-css.js +1 -1
- package/config/default-config.ts +9 -0
- package/config/defaults/{props.js → props.ts} +4 -4
- package/config/defaults/{states.js → states.ts} +2 -2
- package/config/defaults/{tokens.js → tokens.ts} +1 -1
- package/config/helper/{getSvgUrl.js → getSvgUrl.ts} +1 -3
- package/config/helper/{minifyHtml.js → minifyHtml.ts} +1 -1
- package/config/helper.test.ts +238 -0
- package/config/helper.ts +79 -0
- package/config/{index.js → index.ts} +17 -4
- package/config/tsconfig.json +18 -0
- package/config.d.ts +2 -0
- package/config.js +1 -1
- package/dist/components/Box/Box.d.ts +4 -1
- package/dist/components/Box/index.d.ts +1 -1
- package/dist/components/Center/Center.d.ts +4 -1
- package/dist/components/Center/index.d.ts +1 -1
- package/dist/components/Cluster/Cluster.d.ts +4 -1
- package/dist/components/Cluster/index.js +2 -2
- package/dist/components/Columns/Columns.d.ts +4 -1
- package/dist/components/Container/Container.d.ts +6 -4
- package/dist/components/Dummy/Dummy.d.ts +10 -8
- package/dist/components/Dummy/getContent.d.ts +13 -7
- package/dist/components/Dummy/getContent.js +7 -6
- package/dist/components/Dummy/index.js +8 -7
- package/dist/components/Flex/Flex.d.ts +4 -1
- package/dist/components/Flow/Flow.d.ts +4 -1
- package/dist/components/Flow/index.d.ts +1 -1
- package/dist/components/FluidCols/FluidCols.d.ts +4 -1
- package/dist/components/Frame/Frame.d.ts +4 -1
- package/dist/components/Grid/Grid.d.ts +4 -1
- package/dist/components/HTML/HTML.d.ts +16 -13
- package/dist/components/HTML/index.d.ts +13 -13
- package/dist/components/HTML/index.js +3 -3
- package/dist/components/HTML/index2.js +30 -29
- package/dist/components/Layer/Layer.d.ts +6 -1
- package/dist/components/Layer/Layer.test.d.ts +1 -0
- package/dist/components/Layer/getProps.d.ts +5 -1
- package/dist/components/LinkBox/LinkBox.d.ts +4 -4
- package/dist/components/Lism/Lism.d.ts +28 -7
- package/dist/components/Lism/Lism.stories.d.ts +667 -0
- package/dist/components/Lism/Lism.test.d.ts +1 -0
- package/dist/components/Lism/index.d.ts +1 -3
- package/dist/components/Lism/index.js +3 -3
- package/dist/components/SideMain/SideMain.d.ts +4 -1
- package/dist/components/Stack/Stack.d.ts +4 -1
- package/dist/components/SwitchCols/SwitchCols.d.ts +4 -1
- package/dist/components/Wrapper/Wrapper.d.ts +6 -4
- package/dist/components/atomic/Decorator/Decorator.d.ts +2 -1
- package/dist/components/atomic/Decorator/getProps.d.ts +10 -12
- package/dist/components/atomic/Decorator/getProps.js +10 -9
- package/dist/components/atomic/Divider/Divider.d.ts +2 -1
- package/dist/components/atomic/Divider/getProps.d.ts +2 -7
- package/dist/components/atomic/Divider/getProps.js +8 -7
- package/dist/components/atomic/Icon/Icon.d.ts +4 -3
- package/dist/components/atomic/Icon/SVG.d.ts +8 -9
- package/dist/components/atomic/Icon/getProps.d.ts +21 -12
- package/dist/components/atomic/Icon/getProps.js +31 -25
- package/dist/components/atomic/Icon/index.js +9 -8
- package/dist/components/atomic/Icon/presets.d.ts +2 -26
- package/dist/components/atomic/Icon/presets.js +10 -14
- package/dist/components/atomic/Media/Media.d.ts +2 -1
- package/dist/components/atomic/Media/getProps.d.ts +9 -1
- package/dist/components/atomic/Media/getProps.js +5 -6
- package/dist/components/atomic/Media/index.js +3 -3
- package/dist/components/atomic/Spacer/Spacer.d.ts +2 -1
- package/dist/components/atomic/Spacer/getProps.d.ts +2 -7
- package/dist/components/atomic/Spacer/getProps.js +8 -2
- package/dist/components/getFilterProps.d.ts +10 -1
- package/dist/components/getFilterProps.js +15 -5
- package/dist/components/getFilterProps.test.d.ts +1 -0
- package/dist/components/index.js +44 -48
- package/dist/components/setMaybeTransformStyles.d.ts +12 -1
- package/dist/components/setMaybeTransformStyles.js +4 -4
- package/dist/components/setMaybeTransformStyles.test.d.ts +1 -0
- package/dist/config/default-config.d.ts +838 -0
- package/dist/config/defaults/props.d.ts +797 -0
- package/dist/config/defaults/states.d.ts +29 -0
- package/dist/config/defaults/tokens.d.ts +28 -0
- package/dist/config/helper/getSvgUrl.d.ts +5 -0
- package/dist/config/helper/minifyHtml.d.ts +5 -0
- package/dist/config/helper.d.ts +21 -0
- package/dist/config/helper.js +14 -18
- package/dist/config/index.d.ts +1675 -0
- package/dist/config/index.js +15 -11
- package/dist/css/base/set.css +1 -1
- package/dist/css/base.css +1 -1
- package/dist/css/main.css +1 -1
- package/dist/css/main_no_layer.css +1 -1
- package/dist/css/modules/state.css +1 -1
- package/dist/css/reset.css +1 -1
- package/dist/lib/LismPropsData.test.d.ts +1 -0
- package/dist/lib/getBpData.d.ts +9 -1
- package/dist/lib/getBpData.js +16 -10
- package/dist/lib/getBpData.test.d.ts +1 -0
- package/dist/lib/getLayoutProps.d.ts +22 -1
- package/dist/lib/getLayoutProps.js +19 -19
- package/dist/lib/getLayoutProps.test.d.ts +1 -0
- package/dist/lib/getLismProps.d.ts +77 -2
- package/dist/lib/getLismProps.js +122 -107
- package/dist/lib/getLismProps.test.d.ts +1 -0
- package/dist/lib/getMaybeCssVar.d.ts +5 -3
- package/dist/lib/getMaybeCssVar.js +15 -15
- package/dist/lib/getMaybeCssVar.test.d.ts +1 -0
- package/dist/lib/getMaybeTokenValue.d.ts +10 -1
- package/dist/lib/getMaybeTokenValue.js +21 -21
- package/dist/lib/getMaybeTokenValue.test.d.ts +1 -0
- package/dist/lib/getUtilKey.d.ts +7 -1
- package/dist/lib/getUtilKey.js +6 -6
- package/dist/lib/getUtilKey.test.d.ts +1 -0
- package/dist/lib/helper/atts.d.ts +6 -3
- package/dist/lib/helper/atts.test.d.ts +1 -0
- package/dist/lib/helper/filterEmptyObj.d.ts +20 -1
- package/dist/lib/helper/filterEmptyObj.js +6 -5
- package/dist/lib/helper/filterEmptyObj.test.d.ts +1 -0
- package/dist/lib/helper/hasSomeKeys.d.ts +1 -1
- package/dist/lib/helper/isNumStr.d.ts +4 -1
- package/dist/lib/helper/isNumStr.test.d.ts +1 -0
- package/dist/lib/helper/objMap.d.ts +8 -1
- package/dist/lib/helper/objMap.test.d.ts +1 -0
- package/dist/lib/helper/splitWithComma.d.ts +1 -1
- package/dist/lib/helper/splitWithComma.test.d.ts +1 -0
- package/dist/lib/isPresetValue.d.ts +3 -1
- package/dist/lib/isPresetValue.js +10 -3
- package/dist/lib/isPresetValue.test.d.ts +1 -0
- package/dist/lib/isTokenValue.d.ts +1 -1
- package/dist/lib/isTokenValue.js +24 -7
- package/dist/lib/isTokenValue.test.d.ts +1 -0
- package/dist/lib/types/LayoutProps.d.ts +50 -0
- package/dist/lib/types/PropValueTypes.d.ts +83 -0
- package/dist/lib/types/PropValueTypes.spec-d.d.ts +1 -0
- package/dist/lib/types/ResponsiveProps.d.ts +50 -0
- package/dist/lib/types/ResponsiveProps.spec-d.d.ts +1 -0
- package/dist/lib/types/StateProps.d.ts +27 -0
- package/dist/lib/types/StateProps.spec-d.d.ts +1 -0
- package/dist/lib/types/utils.d.ts +79 -0
- package/dist/lib/types/utils.spec-d.d.ts +1 -0
- package/dist/lib/types.d.ts +2 -0
- package/package.json +30 -11
- package/src/scss/_auto_output.scss +2 -1
- package/src/scss/_with_layer.scss +1 -0
- package/src/scss/base/_base.scss +2 -13
- package/src/scss/base/_tokens.scss +3 -3
- package/src/scss/base/set/_plain.scss +1 -0
- package/src/scss/modules/state/_linkbox.scss +1 -0
- package/src/scss/reset.scss +1 -1
- package/config/default-config.js +0 -9
- package/config/helper.js +0 -67
- package/dist/components/Lism/Link.d.ts +0 -1
- package/dist/components/Lism/Link.js +0 -8
- package/dist/components/Lism/Text.d.ts +0 -1
- package/dist/components/Lism/Text.js +0 -8
package/dist/lib/isTokenValue.js
CHANGED
|
@@ -1,10 +1,27 @@
|
|
|
1
|
-
import { TOKENS as
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
typeof
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { TOKENS as i } from "../config/index.js";
|
|
2
|
+
function a(t, s) {
|
|
3
|
+
let e;
|
|
4
|
+
if (typeof s == "number")
|
|
5
|
+
e = `${s}`;
|
|
6
|
+
else if (typeof s == "string")
|
|
7
|
+
e = s;
|
|
8
|
+
else
|
|
9
|
+
return !1;
|
|
10
|
+
if (!(t in i)) return !1;
|
|
11
|
+
const r = i[t];
|
|
12
|
+
if (r instanceof Set)
|
|
13
|
+
return r.has(e);
|
|
14
|
+
if (Array.isArray(r))
|
|
15
|
+
return r.includes(e);
|
|
16
|
+
if ("values" in r) {
|
|
17
|
+
const n = r.values;
|
|
18
|
+
if (n instanceof Set)
|
|
19
|
+
return n.has(e);
|
|
20
|
+
if (Array.isArray(n))
|
|
21
|
+
return n.includes(e);
|
|
22
|
+
}
|
|
23
|
+
return !1;
|
|
7
24
|
}
|
|
8
25
|
export {
|
|
9
|
-
|
|
26
|
+
a as default
|
|
10
27
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export type CssValue = string | number;
|
|
2
|
+
export type NoLayoutProps = {
|
|
3
|
+
layout?: undefined;
|
|
4
|
+
};
|
|
5
|
+
export type BoxProps = {
|
|
6
|
+
layout: 'box';
|
|
7
|
+
};
|
|
8
|
+
export type CenterProps = {
|
|
9
|
+
layout: 'center';
|
|
10
|
+
};
|
|
11
|
+
export type ClusterProps = {
|
|
12
|
+
layout: 'cluster';
|
|
13
|
+
};
|
|
14
|
+
export type FlexProps = {
|
|
15
|
+
layout: 'flex';
|
|
16
|
+
};
|
|
17
|
+
export type FrameProps = {
|
|
18
|
+
layout: 'frame';
|
|
19
|
+
};
|
|
20
|
+
export type GridLayoutProps = {
|
|
21
|
+
layout: 'grid';
|
|
22
|
+
};
|
|
23
|
+
export type StackProps = {
|
|
24
|
+
layout: 'stack';
|
|
25
|
+
};
|
|
26
|
+
export type ColumnsProps = {
|
|
27
|
+
layout: 'columns';
|
|
28
|
+
};
|
|
29
|
+
export type FlowLayoutProps = {
|
|
30
|
+
layout: 'flow';
|
|
31
|
+
flow?: CssValue;
|
|
32
|
+
};
|
|
33
|
+
export type FluidColsProps = {
|
|
34
|
+
layout: 'fluidCols';
|
|
35
|
+
autoFill?: boolean;
|
|
36
|
+
};
|
|
37
|
+
export type SideMainProps = {
|
|
38
|
+
layout: 'sideMain';
|
|
39
|
+
sideW?: CssValue;
|
|
40
|
+
mainW?: CssValue;
|
|
41
|
+
};
|
|
42
|
+
export type SwitchColsProps = {
|
|
43
|
+
layout: 'switchCols';
|
|
44
|
+
breakSize?: CssValue;
|
|
45
|
+
};
|
|
46
|
+
export type LayoutSpecificProps = NoLayoutProps | BoxProps | CenterProps | ClusterProps | ColumnsProps | FlexProps | FlowLayoutProps | FluidColsProps | FrameProps | GridLayoutProps | StackProps | SideMainProps | SwitchColsProps;
|
|
47
|
+
export type LayoutType = Exclude<LayoutSpecificProps, NoLayoutProps>['layout'];
|
|
48
|
+
export interface LayoutProps {
|
|
49
|
+
layout?: LayoutType;
|
|
50
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { TOKENS, PROPS } from '../../../config/index';
|
|
2
|
+
import { WithArbitraryString, ArrayElement, ExtractArrayValues, ExtractObjectKeys, ExtractPropertyValue } from './utils';
|
|
3
|
+
import { MakeResponsive } from './ResponsiveProps';
|
|
4
|
+
type PropsConfig = typeof PROPS;
|
|
5
|
+
type TokensConfig = typeof TOKENS;
|
|
6
|
+
/**
|
|
7
|
+
* TOKENS のキーから対応する値の型を取得
|
|
8
|
+
* - 配列形式: TOKENS[K] が配列の場合、その要素の型
|
|
9
|
+
* - オブジェクト形式: TOKENS[K].values が配列の場合、その要素の型
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```ts
|
|
13
|
+
* type FzValues = TokenConfigValues<'fz'>;
|
|
14
|
+
* // 結果: 'root' | 'base' | '5xl' | ...
|
|
15
|
+
*
|
|
16
|
+
* type SpaceValues = TokenConfigValues<'space'>;
|
|
17
|
+
* // 結果: '5' | '10' | '15' | ...
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
type TokenConfigValues<K extends keyof TokensConfig> = TokensConfig[K] extends readonly unknown[] ? ArrayElement<TokensConfig[K]> : ExtractArrayValues<TokensConfig[K], 'values'>;
|
|
21
|
+
/**
|
|
22
|
+
* token プロパティから対応する TOKENS の値を抽出
|
|
23
|
+
*/
|
|
24
|
+
type ExtractTokenValues<T> = ExtractPropertyValue<T, 'token'> extends never ? never : ExtractPropertyValue<T, 'token'> extends keyof TokensConfig ? TokenConfigValues<ExtractPropertyValue<T, 'token'>> : never;
|
|
25
|
+
/**
|
|
26
|
+
* プロパティの設定から利用可能な値の型を抽出
|
|
27
|
+
* presets の値 + utils のキー + token の値
|
|
28
|
+
*/
|
|
29
|
+
type ExtractPropValues<T> = ExtractArrayValues<T, 'presets'> | ExtractObjectKeys<T, 'utils'> | ExtractTokenValues<T>;
|
|
30
|
+
/**
|
|
31
|
+
* プロパティの設定から値の型を決定
|
|
32
|
+
* - presets/utils/token がある場合: 具体的な値 + 任意文字列 + number | boolean | null
|
|
33
|
+
* - ない場合: string | number(フォールバック)
|
|
34
|
+
*/
|
|
35
|
+
type PropValueType<T> = ExtractPropValues<T> extends never ? string | number : WithArbitraryString<ExtractPropValues<T>> | number | boolean | null;
|
|
36
|
+
/**
|
|
37
|
+
* bp プロパティが 1 に設定されているかを判定
|
|
38
|
+
* never チェックを先に行うことで、bp プロパティが存在しない場合を正しく判定
|
|
39
|
+
*/
|
|
40
|
+
type HasBreakpointSupport<T> = [ExtractPropertyValue<T, 'bp'>] extends [never] ? false : ExtractPropertyValue<T, 'bp'> extends 1 ? true : false;
|
|
41
|
+
type AllPropKeys = keyof PropsConfig;
|
|
42
|
+
/**
|
|
43
|
+
* bp: 1 が設定されているプロパティのキーを抽出
|
|
44
|
+
*/
|
|
45
|
+
type PropsWithBreakpoint = {
|
|
46
|
+
[K in AllPropKeys]: HasBreakpointSupport<PropsConfig[K]> extends true ? K : never;
|
|
47
|
+
}[AllPropKeys];
|
|
48
|
+
/**
|
|
49
|
+
* bp: 1 が設定されていないプロパティのキーを抽出
|
|
50
|
+
*/
|
|
51
|
+
type PropsWithoutBreakpoint = Exclude<AllPropKeys, PropsWithBreakpoint>;
|
|
52
|
+
/**
|
|
53
|
+
* bp: 1 が設定されているプロパティの型(レスポンシブ対応あり)
|
|
54
|
+
*/
|
|
55
|
+
export type ResponsivePropValueTypes = {
|
|
56
|
+
[K in PropsWithBreakpoint]?: PropValueType<PropsConfig[K]>;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* bp: 1 が設定されていないプロパティの型(レスポンシブ対応なし)
|
|
60
|
+
*/
|
|
61
|
+
export type NonResponsivePropValueTypes = {
|
|
62
|
+
[K in PropsWithoutBreakpoint]?: PropValueType<PropsConfig[K]>;
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* PROPS 設定から生成される Props 型(レスポンシブ対応含む)
|
|
66
|
+
* - bp: 1 のプロパティ: レスポンシブ対応(配列・オブジェクト形式可)
|
|
67
|
+
* - bp なしのプロパティ: 単一値のみ
|
|
68
|
+
* - presets/utils/token なしのプロパティ: string | number(フォールバック)
|
|
69
|
+
*
|
|
70
|
+
* @example
|
|
71
|
+
* ```ts
|
|
72
|
+
* // bp: 1 のプロパティ(fz など)
|
|
73
|
+
* fz?: 'root' | 'base' | ... | ['root', 'base'] | { base: 'root', md: 'base' }
|
|
74
|
+
*
|
|
75
|
+
* // bp なしのプロパティ(fw など)
|
|
76
|
+
* fw?: 'thin' | 'light' | 'normal' | ...
|
|
77
|
+
*
|
|
78
|
+
* // presets/utils/token なしのプロパティ(bg など)
|
|
79
|
+
* bg?: Responsive<string | number>
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
export type PropValueTypes = MakeResponsive<ResponsivePropValueTypes> & NonResponsivePropValueTypes;
|
|
83
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { BREAK_POINTS_ALL } from '../../../config/index';
|
|
2
|
+
import { LimitedArray } from './utils';
|
|
3
|
+
/** 全ブレイクポイントキー('base' を含む) */
|
|
4
|
+
type BreakpointKey = (typeof BREAK_POINTS_ALL)[number];
|
|
5
|
+
/** ブレイクポイント数(5: base, sm, md, lg, xl) */
|
|
6
|
+
type BreakpointCount = (typeof BREAK_POINTS_ALL)['length'];
|
|
7
|
+
/** ブレイクポイント数を上限とする配列型(1〜5要素) */
|
|
8
|
+
type ResponsiveArray<T> = LimitedArray<T, BreakpointCount>;
|
|
9
|
+
/**
|
|
10
|
+
* プロパティ値をレスポンシブ対応の型に変換するユーティリティ型
|
|
11
|
+
*
|
|
12
|
+
* 単一の値、配列形式(最大5要素)、ブレイクポイントオブジェクト形式のいずれかを受け付ける
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```ts
|
|
16
|
+
* type FzProp = Responsive<'s' | 'm' | 'l'>;
|
|
17
|
+
* // 結果:
|
|
18
|
+
* // | 's' | 'm' | 'l'
|
|
19
|
+
* // | ['s' | 'm' | 'l'] | ['s' | 'm' | 'l', 's' | 'm' | 'l'] | ... (最大5要素)
|
|
20
|
+
* // | { base?: 's' | 'm' | 'l'; sm?: 's' | 'm' | 'l'; md?: ...; lg?: ...; xl?: ... }
|
|
21
|
+
*
|
|
22
|
+
* // 使用例
|
|
23
|
+
* const a: FzProp = 'm'; // 単一値
|
|
24
|
+
* const b: FzProp = ['s', 'm', 'l']; // 配列形式(最大5要素)
|
|
25
|
+
* const c: FzProp = { base: 's', md: 'l' }; // オブジェクト形式
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export type Responsive<T> = T | ResponsiveArray<T> | Partial<Record<BreakpointKey, T>>;
|
|
29
|
+
/**
|
|
30
|
+
* オブジェクト型の各プロパティをレスポンシブ対応に変換するユーティリティ型
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```ts
|
|
34
|
+
* type OriginalProps = {
|
|
35
|
+
* fz: 's' | 'm' | 'l';
|
|
36
|
+
* color: string;
|
|
37
|
+
* };
|
|
38
|
+
*
|
|
39
|
+
* type ResponsiveProps = MakeResponsive<OriginalProps>;
|
|
40
|
+
* // 結果:
|
|
41
|
+
* // {
|
|
42
|
+
* // fz?: Responsive<'s' | 'm' | 'l'>;
|
|
43
|
+
* // color?: Responsive<string>;
|
|
44
|
+
* // }
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export type MakeResponsive<T> = {
|
|
48
|
+
[K in keyof T]?: Responsive<T[K]>;
|
|
49
|
+
};
|
|
50
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { STATES } from '../../../config/index';
|
|
2
|
+
import { WithArbitraryString, ArrayElement } from './utils';
|
|
3
|
+
/**
|
|
4
|
+
* config/index.ts から STATES の型を取得
|
|
5
|
+
* objDeepMerge の DeepMergeResult 型により literal types が保持される
|
|
6
|
+
*/
|
|
7
|
+
type StatesConfig = typeof STATES;
|
|
8
|
+
/** preset を持つ State の値の型を抽出 */
|
|
9
|
+
type PresetElement<T> = T extends {
|
|
10
|
+
preset: readonly unknown[];
|
|
11
|
+
} ? ArrayElement<T['preset']> : never;
|
|
12
|
+
/**
|
|
13
|
+
* State 設定から Props の値の型を抽出するユーティリティ型
|
|
14
|
+
*/
|
|
15
|
+
type ExtractStateValue<T> = T extends string ? boolean : T extends {
|
|
16
|
+
preset: readonly unknown[];
|
|
17
|
+
} ? WithArbitraryString<PresetElement<T>> | boolean : T extends {
|
|
18
|
+
setStyles: unknown;
|
|
19
|
+
} ? string : never;
|
|
20
|
+
/**
|
|
21
|
+
* config/index.ts の STATES から自動生成される State Props の型
|
|
22
|
+
* config/index.ts の STATES に新しいステートを追加すると自動的に反映される
|
|
23
|
+
*/
|
|
24
|
+
export type StateProps = {
|
|
25
|
+
[K in keyof StatesConfig]?: ExtractStateValue<StatesConfig[K]>;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 最大 N 要素の配列型を生成するユーティリティ型
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```ts
|
|
6
|
+
* type Max3 = LimitedArray<string, 3>;
|
|
7
|
+
* // 結果: [string] | [string, string] | [string, string, string]
|
|
8
|
+
* ```
|
|
9
|
+
*/
|
|
10
|
+
export type LimitedArray<T, N extends number, R extends T[] = [T]> = R['length'] extends N ? R : R | LimitedArray<T, N, [...R, T]>;
|
|
11
|
+
/**
|
|
12
|
+
* プリセット値 | 任意文字列
|
|
13
|
+
*
|
|
14
|
+
* `string & {}` はリテラル型が string に吸収されるのを防ぎ、
|
|
15
|
+
* エディタでプリセット値のサジェストを維持しつつ任意の文字列も受け付ける
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```ts
|
|
19
|
+
* type Size = WithArbitraryString<'s' | 'm' | 'l'>;
|
|
20
|
+
* // 結果: 's' | 'm' | 'l' | (string & {})
|
|
21
|
+
* // → 's', 'm', 'l' がサジェストされつつ、'custom' などの任意の文字列も受け付ける
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export type WithArbitraryString<T> = T | (string & {});
|
|
25
|
+
/**
|
|
26
|
+
* 配列から要素の型を抽出
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```ts
|
|
30
|
+
* type Element = ArrayElement<readonly ['a', 'b', 'c']>;
|
|
31
|
+
* // 結果: 'a' | 'b' | 'c'
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export type ArrayElement<T> = T extends readonly (infer E)[] ? E : never;
|
|
35
|
+
/**
|
|
36
|
+
* オブジェクトから指定したキーの配列要素の型を抽出
|
|
37
|
+
* 指定したキーが存在しない場合は never を返す
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* ```ts
|
|
41
|
+
* type Presets = ExtractArrayValues<{ presets: readonly ['a', 'b'] }, 'presets'>;
|
|
42
|
+
* // 結果: 'a' | 'b'
|
|
43
|
+
*
|
|
44
|
+
* type Values = ExtractArrayValues<{ values: readonly [1, 2, 3] }, 'values'>;
|
|
45
|
+
* // 結果: 1 | 2 | 3
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export type ExtractArrayValues<T, K extends string> = T extends {
|
|
49
|
+
[P in K]: readonly (infer E)[];
|
|
50
|
+
} ? E : never;
|
|
51
|
+
/**
|
|
52
|
+
* オブジェクトから指定したキーのオブジェクトのキーを抽出
|
|
53
|
+
* 指定したキーが存在しない場合は never を返す
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```ts
|
|
57
|
+
* type Keys = ExtractObjectKeys<{ utils: { a: 'x', b: 'y' } }, 'utils'>;
|
|
58
|
+
* // 結果: 'a' | 'b'
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export type ExtractObjectKeys<T, K extends string> = T extends {
|
|
62
|
+
[P in K]: infer U;
|
|
63
|
+
} ? (U extends object ? keyof U : never) : never;
|
|
64
|
+
/**
|
|
65
|
+
* オブジェクトから指定したキーのプロパティ値を抽出
|
|
66
|
+
* 指定したキーが存在しない場合は never を返す
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```ts
|
|
70
|
+
* type TokenKey = ExtractPropertyValue<{ token: 'fz' }, 'token'>;
|
|
71
|
+
* // 結果: 'fz'
|
|
72
|
+
*
|
|
73
|
+
* type PropName = ExtractPropertyValue<{ prop: 'fontSize' }, 'prop'>;
|
|
74
|
+
* // 結果: 'fontSize'
|
|
75
|
+
* ```
|
|
76
|
+
*/
|
|
77
|
+
export type ExtractPropertyValue<T, K extends string> = T extends {
|
|
78
|
+
[P in K]: infer V;
|
|
79
|
+
} ? V : never;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lism-css",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.4",
|
|
4
4
|
"description": "A layout-first CSS framework for websites.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "ddryo",
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"dist",
|
|
20
20
|
"config",
|
|
21
21
|
"config.js",
|
|
22
|
+
"config.d.ts",
|
|
22
23
|
"vite-plugin.js",
|
|
23
24
|
"bin",
|
|
24
25
|
"packages",
|
|
@@ -29,10 +30,19 @@
|
|
|
29
30
|
"exports": {
|
|
30
31
|
".": "./dist/index.js",
|
|
31
32
|
"./config.js": "./config.js",
|
|
32
|
-
"./config":
|
|
33
|
-
|
|
33
|
+
"./config": {
|
|
34
|
+
"import": "./config/index.js",
|
|
35
|
+
"types": "./dist/config/index.d.ts"
|
|
36
|
+
},
|
|
37
|
+
"./default-config": {
|
|
38
|
+
"import": "./config/default-config.js",
|
|
39
|
+
"types": "./dist/config/default-config.d.ts"
|
|
40
|
+
},
|
|
34
41
|
"./vite-plugin": "./vite-plugin.mjs",
|
|
35
|
-
"./lib/*":
|
|
42
|
+
"./lib/*": {
|
|
43
|
+
"import": "./dist/lib/*",
|
|
44
|
+
"types": "./dist/lib/*.d.ts"
|
|
45
|
+
},
|
|
36
46
|
"./bin/*": "./bin/*",
|
|
37
47
|
"./react": {
|
|
38
48
|
"import": "./dist/components/index.js",
|
|
@@ -51,7 +61,7 @@
|
|
|
51
61
|
"./scss/*": "./src/scss/*",
|
|
52
62
|
"./*.css": "./dist/css/*.css"
|
|
53
63
|
},
|
|
54
|
-
"homepage": "https://
|
|
64
|
+
"homepage": "https://lism-css.com/",
|
|
55
65
|
"repository": {
|
|
56
66
|
"type": "git",
|
|
57
67
|
"url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
|
|
@@ -65,13 +75,19 @@
|
|
|
65
75
|
"@babel/preset-env": "^7.27.2",
|
|
66
76
|
"@babel/preset-react": "^7.27.1",
|
|
67
77
|
"@rollup/plugin-babel": "^6.0.4",
|
|
78
|
+
"@storybook/react-vite": "^10.2.10",
|
|
79
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
80
|
+
"@testing-library/react": "^16.3.1",
|
|
81
|
+
"@types/node": "^25.0.3",
|
|
68
82
|
"@vitejs/plugin-react-swc": "^3.10.0",
|
|
69
83
|
"glob": "^11.0.2",
|
|
84
|
+
"jsdom": "^27.4.0",
|
|
70
85
|
"rollup": "^4.41.1",
|
|
86
|
+
"tsx": "^4.21.0",
|
|
71
87
|
"typescript": "~5.8.3",
|
|
72
88
|
"unplugin-dts": "1.0.0-beta.6",
|
|
73
89
|
"vite": "^6.3.5",
|
|
74
|
-
"vitest": "^4.0.
|
|
90
|
+
"vitest": "^4.0.18"
|
|
75
91
|
},
|
|
76
92
|
"peerDependencies": {
|
|
77
93
|
"@types/react": "*",
|
|
@@ -82,11 +98,14 @@
|
|
|
82
98
|
"sideEffects": false,
|
|
83
99
|
"scripts": {
|
|
84
100
|
"dev": "vite",
|
|
85
|
-
"test": "vitest
|
|
86
|
-
"
|
|
87
|
-
"
|
|
88
|
-
"build
|
|
89
|
-
"
|
|
101
|
+
"test": "pnpm typecheck && pnpm vitest",
|
|
102
|
+
"vitest": "vitest run",
|
|
103
|
+
"typecheck": "tsc --noEmit",
|
|
104
|
+
"build": "pnpm build:js && pnpm build:css",
|
|
105
|
+
"build:js": "vite build && pnpm exec tsc -p config/tsconfig.json",
|
|
106
|
+
"build:css": "tsx bin/script-build-css.js",
|
|
107
|
+
"lint": "pnpm lint:eslint && pnpm lint:style",
|
|
108
|
+
"lint:eslint": "eslint '**/*.{js,mjs,ts,tsx}'",
|
|
90
109
|
"lint:style": "stylelint '**/*.{css,scss}'",
|
|
91
110
|
"preview": "vite preview"
|
|
92
111
|
}
|
|
@@ -20,7 +20,7 @@ base_type:
|
|
|
20
20
|
// マップから値を取得し、nullの場合はデフォルト値を返す
|
|
21
21
|
@function map_get_with_default($map, $key, $default) {
|
|
22
22
|
$value: map.get($map, $key);
|
|
23
|
-
@if $value
|
|
23
|
+
@if $value {
|
|
24
24
|
@return $value;
|
|
25
25
|
} @else {
|
|
26
26
|
@return $default;
|
|
@@ -59,6 +59,7 @@ base_type:
|
|
|
59
59
|
|
|
60
60
|
// valueが(prop:val)で詳細に明示されている場合
|
|
61
61
|
@if (meta.type-of($value) == map) {
|
|
62
|
+
// マップ形式の場合は何もしない(将来の拡張用)
|
|
62
63
|
} @else if $base_type == 2 {
|
|
63
64
|
// important は [class*=] についてるので不要
|
|
64
65
|
#{$selector} {
|
package/src/scss/base/_base.scss
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/* ----------------------------------------
|
|
2
2
|
body
|
|
3
3
|
---------------------------------------- */
|
|
4
|
-
|
|
5
4
|
body {
|
|
6
5
|
--hl: var(--hl--base);
|
|
7
6
|
font-size: var(--fz--base);
|
|
@@ -9,14 +8,14 @@ body {
|
|
|
9
8
|
letter-spacing: var(--lts--base);
|
|
10
9
|
background-color: var(--base);
|
|
11
10
|
color: var(--text);
|
|
12
|
-
|
|
13
11
|
text-underline-offset: var(--under-offset, 0.125em);
|
|
14
12
|
}
|
|
15
13
|
|
|
16
14
|
/* ----------------------------------------
|
|
17
15
|
line-height
|
|
18
16
|
---------------------------------------- */
|
|
19
|
-
|
|
17
|
+
*,
|
|
18
|
+
.set-plain {
|
|
20
19
|
line-height: calc(1em + var(--hl) * 2);
|
|
21
20
|
}
|
|
22
21
|
|
|
@@ -26,8 +25,6 @@ body {
|
|
|
26
25
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
27
26
|
font-family: var(--heading-ff, inherit);
|
|
28
27
|
font-weight: var(--heading-fw, bolder);
|
|
29
|
-
// font-size: var(--fz, revert);
|
|
30
|
-
// line-height: var(--lh, inherit);
|
|
31
28
|
}
|
|
32
29
|
h1 {
|
|
33
30
|
font-size: var(--fz--3xl);
|
|
@@ -143,7 +140,6 @@ button,
|
|
|
143
140
|
textarea,
|
|
144
141
|
select,
|
|
145
142
|
::file-selector-button {
|
|
146
|
-
--hl: var(--hl--s);
|
|
147
143
|
padding: var(--s5) var(--s10);
|
|
148
144
|
|
|
149
145
|
// 最低限揃えておく
|
|
@@ -160,13 +156,6 @@ button {
|
|
|
160
156
|
opacity: var(--o--n20);
|
|
161
157
|
}
|
|
162
158
|
|
|
163
|
-
/* ----------------------------------------
|
|
164
|
-
dialog
|
|
165
|
-
---------------------------------------- */
|
|
166
|
-
// dialog {
|
|
167
|
-
// border: solid 1px;
|
|
168
|
-
// }
|
|
169
|
-
|
|
170
159
|
/* ----------------------------------------
|
|
171
160
|
フォーカス要素
|
|
172
161
|
---------------------------------------- */
|
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
// --accent-3: #000;
|
|
51
51
|
|
|
52
52
|
// base
|
|
53
|
-
--base: hsl(224
|
|
54
|
-
--base-2: hsl(224
|
|
53
|
+
--base: hsl(224 4% 99%);
|
|
54
|
+
--base-2: hsl(224 8% 95%);
|
|
55
55
|
|
|
56
56
|
// text
|
|
57
57
|
--text: hsl(224 4% 8%);
|
|
58
58
|
--text-2: hsl(224 6% 32%);
|
|
59
59
|
--link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);
|
|
60
60
|
|
|
61
|
-
--divider: hsl(224
|
|
61
|
+
--divider: hsl(224 8% 88%);
|
|
62
62
|
|
|
63
63
|
/* ------------------------------------------------------------
|
|
64
64
|
opacity
|
package/src/scss/reset.scss
CHANGED
package/config/default-config.js
DELETED
package/config/helper.js
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
function isObj(value) {
|
|
2
|
-
return value && typeof value === 'object' && !Array.isArray(value);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* 深いマージを行う関数
|
|
7
|
-
* @param {Object} origin - マージ先となる元オブジェクト
|
|
8
|
-
* @param {Object} source - マージするソース(このデータに更新される)
|
|
9
|
-
* @returns {Object} マージされたオブジェクト
|
|
10
|
-
*/
|
|
11
|
-
export function objDeepMerge(origin, source) {
|
|
12
|
-
// originとsourceがオブジェクトかどうかをチェック
|
|
13
|
-
if (!origin || typeof origin !== 'object' || Array.isArray(origin)) {
|
|
14
|
-
return source;
|
|
15
|
-
}
|
|
16
|
-
if (!source || typeof source !== 'object' || Array.isArray(source)) {
|
|
17
|
-
return origin;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const result = { ...origin };
|
|
21
|
-
|
|
22
|
-
for (const key in source) {
|
|
23
|
-
if (Object.hasOwn(source, key)) {
|
|
24
|
-
const originValue = result[key];
|
|
25
|
-
const sourceValue = source[key];
|
|
26
|
-
|
|
27
|
-
if (!originValue) {
|
|
28
|
-
// origin側に存在しない新たなキーの場合はそのまま追加する
|
|
29
|
-
result[key] = sourceValue;
|
|
30
|
-
} else if (isObj(sourceValue) && isObj(originValue)) {
|
|
31
|
-
// どちらもオブジェクトの場合は再帰的にマージ
|
|
32
|
-
result[key] = objDeepMerge(originValue, sourceValue);
|
|
33
|
-
} else {
|
|
34
|
-
// どちらかのデータがobjectではない場合、そのまま上書き
|
|
35
|
-
result[key] = sourceValue;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
return result;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* オブジェクト内の配列を再帰的にSetに変換する関数
|
|
45
|
-
* @param {any} obj - 変換対象のオブジェクト
|
|
46
|
-
* @returns {any} 変換されたオブジェクト
|
|
47
|
-
*/
|
|
48
|
-
export function arrayConvertToSet(obj) {
|
|
49
|
-
// 配列の場合はSetに変換
|
|
50
|
-
if (Array.isArray(obj)) {
|
|
51
|
-
return new Set(obj);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
// オブジェクトの場合は再帰的に処理
|
|
55
|
-
if (isObj(obj)) {
|
|
56
|
-
const result = {};
|
|
57
|
-
for (const key in obj) {
|
|
58
|
-
if (Object.hasOwn(obj, key)) {
|
|
59
|
-
result[key] = arrayConvertToSet(obj[key]);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
return result;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// その他の値はそのまま返す
|
|
66
|
-
return obj;
|
|
67
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function Link(props: any): import("react").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function Text(props: any): import("react").JSX.Element;
|