melta-app 0.9.0 → 0.10.0
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/README.md +21 -0
- package/lib/module/components/Header.js +35 -12
- package/lib/module/components/Header.js.map +1 -1
- package/lib/module/components/header.styles.js +41 -2
- package/lib/module/components/header.styles.js.map +1 -1
- package/lib/module/contracts/contract-types.js +2 -2
- package/lib/module/contracts/contract-types.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/components/Header.d.ts +10 -6
- package/lib/typescript/src/components/Header.d.ts.map +1 -1
- package/lib/typescript/src/components/header.styles.d.ts +12 -20
- package/lib/typescript/src/components/header.styles.d.ts.map +1 -1
- package/lib/typescript/src/contracts/contract-types.d.ts +2 -2
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/llms.txt +1 -1
- package/package.json +2 -2
- package/src/components/Header.tsx +25 -12
- package/src/components/header.styles.ts +32 -11
- package/src/contracts/contract-types.ts +2 -2
- package/src/index.ts +2 -0
package/README.md
CHANGED
|
@@ -683,3 +683,24 @@ variant省略時は従来どおり可視タイトルを表示します。
|
|
|
683
683
|
320/393px幅・大きな子要素の余白と44pt標的を測定できます。Playwrightは検証環境に用意し、
|
|
684
684
|
別のインストールを使う場合は `--playwright-module <playwrightのディレクトリ>` を渡します。
|
|
685
685
|
この実描画検査は手動レーンで、OSの文字拡大・読み上げ確認は別途必要です。
|
|
686
|
+
|
|
687
|
+
### 中央タイトルのHeader
|
|
688
|
+
|
|
689
|
+
`variant="centered"` は親のページ余白内に置く中央タイトル（内側横余白と下線なし）、
|
|
690
|
+
`variant="navigation"` は左右のページ余白と端末hairlineを持つ詳細画面用です。
|
|
691
|
+
いずれも最小高44で、左右に同じ幅を予約し、長いタイトルは1行で省略します。
|
|
692
|
+
左右slotには44ptの単独アイコン操作を渡してください。幅の広い文字操作はdefault/actionsを使います。
|
|
693
|
+
見出しと左右操作は独立した読み上げ対象です。
|
|
694
|
+
|
|
695
|
+
```tsx
|
|
696
|
+
<Header variant="centered" title="ホーム" />
|
|
697
|
+
<Header variant="navigation" title="詳細" leading={backButton} />
|
|
698
|
+
```
|
|
699
|
+
|
|
700
|
+
中央タイトルの組版はlg/boldです。長い動的タイトルは`titleVariant="base"`で1段下げられます。
|
|
701
|
+
`wrapTitle={heading => <Animated.View ...>{heading}</Animated.View>}`で見出しを保持したまま
|
|
702
|
+
外部のアニメーションを適用できます。非表示中はwrapperに`aria-hidden`等を設定し、
|
|
703
|
+
戻る操作まで隠さないでください。MeltaはReanimatedへ依存しません。
|
|
704
|
+
|
|
705
|
+
`HEADER_CENTERED_MIN_HEIGHT`は初期見積もり用です。スクロール退避は可能な限りonLayoutの実測値を使い、
|
|
706
|
+
文字拡大時の高くなったHeaderを固定高で切らないでください。
|
|
@@ -2,19 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Header — 画面名と左右の操作を持つ共通ヘッダー。
|
|
5
|
-
*
|
|
6
|
-
* 余白・下線・見出しの配置はheader recipeとpure resolverが所有する。
|
|
5
|
+
* 配置・余白・見出しの組版を所有し、navigationやタイトルのアニメーションは利用側が渡す。
|
|
7
6
|
*/
|
|
8
7
|
import { useMemo } from "react";
|
|
9
|
-
import { View } from "react-native";
|
|
8
|
+
import { StyleSheet, View } from "react-native";
|
|
10
9
|
import { useTheme } from "../theme/index.js";
|
|
11
10
|
import { CONTRACTS } from "../contracts/contract-types.js";
|
|
12
11
|
import { Text } from "../primitives/Text.js";
|
|
13
|
-
import { HEADER_SPEC, resolveHeaderStyle } from "./header.styles.js";
|
|
12
|
+
import { HEADER_SPEC, isCenteredHeader, resolveHeaderStyle } from "./header.styles.js";
|
|
13
|
+
|
|
14
|
+
/** 中央タイトルの最小高。スクロール量には可能な限りonLayoutの実測を使う。 */
|
|
14
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
export const HEADER_CENTERED_MIN_HEIGHT = HEADER_SPEC.centeredMinHeight;
|
|
15
17
|
export function Header({
|
|
16
18
|
title,
|
|
17
19
|
variant = "default",
|
|
20
|
+
titleVariant = HEADER_SPEC.centeredTitleFont,
|
|
21
|
+
wrapTitle,
|
|
18
22
|
leading,
|
|
19
23
|
trailing,
|
|
20
24
|
style,
|
|
@@ -27,19 +31,35 @@ export function Header({
|
|
|
27
31
|
const {
|
|
28
32
|
containerStyle,
|
|
29
33
|
titleWrapStyle,
|
|
30
|
-
hiddenTitleStyle
|
|
34
|
+
hiddenTitleStyle,
|
|
35
|
+
leadingStyle,
|
|
36
|
+
trailingStyle
|
|
31
37
|
} = useMemo(() => resolveHeaderStyle(theme, mode, {
|
|
32
38
|
variant
|
|
33
|
-
}), [theme, mode, variant]);
|
|
39
|
+
}, StyleSheet.hairlineWidth), [theme, mode, variant]);
|
|
40
|
+
const centered = isCenteredHeader(variant);
|
|
41
|
+
// 中央タイトルは既存の本文字間を維持し、独立した見出しの意味をwrapperで与える。
|
|
42
|
+
const centeredTitle = centered ? /*#__PURE__*/_jsx(View, {
|
|
43
|
+
accessible: true,
|
|
44
|
+
accessibilityRole: "header",
|
|
45
|
+
accessibilityLabel: title,
|
|
46
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
47
|
+
variant: titleVariant,
|
|
48
|
+
weight: HEADER_SPEC.titleWeight,
|
|
49
|
+
color: HEADER_SPEC.titleColor,
|
|
50
|
+
numberOfLines: 1,
|
|
51
|
+
children: title
|
|
52
|
+
})
|
|
53
|
+
}) : null;
|
|
34
54
|
return /*#__PURE__*/_jsxs(View, {
|
|
35
55
|
style: [containerStyle, style],
|
|
36
56
|
testID: testID,
|
|
37
|
-
children: [
|
|
57
|
+
children: [centered ? /*#__PURE__*/_jsx(View, {
|
|
58
|
+
style: leadingStyle,
|
|
59
|
+
children: leading
|
|
60
|
+
}) : leading, /*#__PURE__*/_jsx(View, {
|
|
38
61
|
style: titleWrapStyle,
|
|
39
|
-
children: variant === "actions" ?
|
|
40
|
-
/*#__PURE__*/
|
|
41
|
-
// 見出しTextの契約を再利用し、左右の操作を親の読み上げへ畳まない。
|
|
42
|
-
_jsx(View, {
|
|
62
|
+
children: centered ? wrapTitle ? wrapTitle(centeredTitle) : centeredTitle : variant === "actions" ? /*#__PURE__*/_jsx(View, {
|
|
43
63
|
pointerEvents: "none",
|
|
44
64
|
style: hiddenTitleStyle,
|
|
45
65
|
children: /*#__PURE__*/_jsx(Text, {
|
|
@@ -58,7 +78,10 @@ export function Header({
|
|
|
58
78
|
numberOfLines: 1,
|
|
59
79
|
children: title
|
|
60
80
|
})
|
|
61
|
-
}),
|
|
81
|
+
}), centered ? /*#__PURE__*/_jsx(View, {
|
|
82
|
+
style: trailingStyle,
|
|
83
|
+
children: trailing
|
|
84
|
+
}) : trailing]
|
|
62
85
|
});
|
|
63
86
|
}
|
|
64
87
|
Header.__contract = CONTRACTS.header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","View","useTheme","CONTRACTS","Text","HEADER_SPEC","resolveHeaderStyle","jsx","_jsx","jsxs","_jsxs","Header","title","variant","leading","trailing","style","testID","theme","mode","containerStyle","titleWrapStyle","hiddenTitleStyle","
|
|
1
|
+
{"version":3,"names":["useMemo","StyleSheet","View","useTheme","CONTRACTS","Text","HEADER_SPEC","isCenteredHeader","resolveHeaderStyle","jsx","_jsx","jsxs","_jsxs","HEADER_CENTERED_MIN_HEIGHT","centeredMinHeight","Header","title","variant","titleVariant","centeredTitleFont","wrapTitle","leading","trailing","style","testID","theme","mode","containerStyle","titleWrapStyle","hiddenTitleStyle","leadingStyle","trailingStyle","hairlineWidth","centered","centeredTitle","accessible","accessibilityRole","accessibilityLabel","children","weight","titleWeight","color","titleColor","numberOfLines","pointerEvents","titleFont","role","__contract","header"],"sourceRoot":"../../../src","sources":["components/Header.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,12 +8,51 @@ export const HEADER_SPEC = {
|
|
|
8
8
|
paddingX: "4",
|
|
9
9
|
paddingY: "3",
|
|
10
10
|
titleFont: "xl",
|
|
11
|
+
centeredTitleFont: "lg",
|
|
11
12
|
titleWeight: "bold",
|
|
12
13
|
titleColor: "text-heading",
|
|
13
14
|
borderWidth: 1,
|
|
14
|
-
hiddenTitleSize: 1
|
|
15
|
+
hiddenTitleSize: 1,
|
|
16
|
+
centeredMinHeight: 44,
|
|
17
|
+
sideMinWidth: 44
|
|
15
18
|
};
|
|
16
|
-
|
|
19
|
+
/** 中央タイトルの2形だけが同じ配置と組版を共有する。 */
|
|
20
|
+
export function isCenteredHeader(variant) {
|
|
21
|
+
return variant === "centered" || variant === "navigation";
|
|
22
|
+
}
|
|
23
|
+
export function resolveHeaderStyle(theme, mode, props = {},
|
|
24
|
+
// recipeは密度1で照合し、実機のhairline値だけを外から注入する。
|
|
25
|
+
hairlineWidth = HEADER_SPEC.borderWidth) {
|
|
26
|
+
if (isCenteredHeader(props.variant)) {
|
|
27
|
+
return {
|
|
28
|
+
containerStyle: {
|
|
29
|
+
flexDirection: "row",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
minHeight: HEADER_SPEC.centeredMinHeight,
|
|
32
|
+
...(props.variant === "navigation" ? {
|
|
33
|
+
paddingHorizontal: theme.spacing[HEADER_SPEC.paddingX],
|
|
34
|
+
borderBottomWidth: hairlineWidth,
|
|
35
|
+
borderBottomColor: theme.color.semantic[mode]["border-default"]
|
|
36
|
+
} : {})
|
|
37
|
+
},
|
|
38
|
+
titleWrapStyle: {
|
|
39
|
+
flexShrink: 1,
|
|
40
|
+
minWidth: 0
|
|
41
|
+
},
|
|
42
|
+
leadingStyle: {
|
|
43
|
+
flex: 1,
|
|
44
|
+
minWidth: HEADER_SPEC.sideMinWidth,
|
|
45
|
+
flexDirection: "row",
|
|
46
|
+
justifyContent: "flex-start"
|
|
47
|
+
},
|
|
48
|
+
trailingStyle: {
|
|
49
|
+
flex: 1,
|
|
50
|
+
minWidth: HEADER_SPEC.sideMinWidth,
|
|
51
|
+
flexDirection: "row",
|
|
52
|
+
justifyContent: "flex-end"
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
}
|
|
17
56
|
return {
|
|
18
57
|
containerStyle: {
|
|
19
58
|
flexDirection: "row",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["HEADER_SPEC","gap","actionsGap","paddingX","paddingY","titleFont","titleWeight","titleColor","borderWidth","hiddenTitleSize","resolveHeaderStyle","theme","mode","props","containerStyle","flexDirection","alignItems","
|
|
1
|
+
{"version":3,"names":["HEADER_SPEC","gap","actionsGap","paddingX","paddingY","titleFont","centeredTitleFont","titleWeight","titleColor","borderWidth","hiddenTitleSize","centeredMinHeight","sideMinWidth","isCenteredHeader","variant","resolveHeaderStyle","theme","mode","props","hairlineWidth","containerStyle","flexDirection","alignItems","minHeight","paddingHorizontal","spacing","borderBottomWidth","borderBottomColor","color","semantic","titleWrapStyle","flexShrink","minWidth","leadingStyle","flex","justifyContent","trailingStyle","paddingVertical","backgroundColor","hiddenTitleStyle","position","width","height","overflow"],"sourceRoot":"../../../src","sources":["components/header.styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CONTRACTS","text","id","version","variants","sizes","states","button","tag","card","image","surface","skeleton","emptyState","metric","stack","row","screen","header","icon","avatar","textfield","toggle","checkbox","radio","alert","toast","progress","modal","actionSheet","bottomSheet"],"sourceRoot":"../../../src","sources":["contracts/contract-types.ts"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["CONTRACTS","text","id","version","variants","sizes","states","button","tag","card","image","surface","skeleton","emptyState","metric","stack","row","screen","header","icon","avatar","textfield","toggle","checkbox","radio","alert","toast","progress","modal","actionSheet","bottomSheet"],"sourceRoot":"../../../src","sources":["contracts/contract-types.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -17,4 +17,5 @@ export * from "./components/index.js";
|
|
|
17
17
|
|
|
18
18
|
// 契約メタ（variant/size/state の実行時参照 + 型。__contract 照合にも使う）
|
|
19
19
|
export { CONTRACTS } from "./contracts/contract-types.js";
|
|
20
|
+
export { HEADER_CENTERED_MIN_HEIGHT } from "./components/Header.js";
|
|
20
21
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CONTRACTS"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,cAAc,kBAAkB;;AAEhC;AACA,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;;AAErC;AACA,SACEA,SAAS,QAMJ,+BAA+B","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["CONTRACTS","HEADER_CENTERED_MIN_HEIGHT"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,cAAc,kBAAkB;;AAEhC;AACA,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;;AAErC;AACA,SACEA,SAAS,QAMJ,+BAA+B;AAEtC,SAASC,0BAA0B,QAAQ,wBAAwB","ignoreList":[]}
|
|
@@ -1,27 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Header — 画面名と左右の操作を持つ共通ヘッダー。
|
|
3
|
-
*
|
|
4
|
-
* 余白・下線・見出しの配置はheader recipeとpure resolverが所有する。
|
|
3
|
+
* 配置・余白・見出しの組版を所有し、navigationやタイトルのアニメーションは利用側が渡す。
|
|
5
4
|
*/
|
|
6
5
|
import { type ReactNode } from "react";
|
|
7
6
|
import { type StyleProp, type ViewStyle } from "react-native";
|
|
8
7
|
import { type VariantOf } from "../contracts/contract-types.js";
|
|
8
|
+
/** 中央タイトルの最小高。スクロール量には可能な限りonLayoutの実測を使う。 */
|
|
9
|
+
export declare const HEADER_CENTERED_MIN_HEIGHT: 44;
|
|
9
10
|
interface HeaderProps {
|
|
10
11
|
/** 空でない画面名。actionsでも読み上げるため必須。 */
|
|
11
12
|
title: string;
|
|
12
|
-
/** defaultは可視見出し、actionsは可視タイトルのない操作バー。 */
|
|
13
13
|
variant?: VariantOf<"header">;
|
|
14
|
+
/** 中央タイトルの長い画面名を1段下げる。default/actionsの組版は変更しない。 */
|
|
15
|
+
titleVariant?: "base" | "lg";
|
|
16
|
+
/** 中央タイトルのfade用。渡された見出しを保ち、アニメーションと読み上げ非表示だけを包む。 */
|
|
17
|
+
wrapTitle?: (heading: ReactNode) => ReactNode;
|
|
14
18
|
leading?: ReactNode;
|
|
15
19
|
trailing?: ReactNode;
|
|
16
20
|
style?: StyleProp<ViewStyle>;
|
|
17
21
|
testID?: string;
|
|
18
22
|
}
|
|
19
|
-
export declare function Header({ title, variant, leading, trailing, style, testID }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare function Header({ title, variant, titleVariant, wrapTitle, leading, trailing, style, testID }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
20
24
|
export declare namespace Header {
|
|
21
25
|
var __contract: {
|
|
22
26
|
readonly id: "header";
|
|
23
|
-
readonly version: "0.
|
|
24
|
-
readonly variants: readonly ["default", "actions"];
|
|
27
|
+
readonly version: "0.3.0";
|
|
28
|
+
readonly variants: readonly ["default", "actions", "centered", "navigation"];
|
|
25
29
|
readonly sizes: readonly [];
|
|
26
30
|
readonly states: readonly ["default"];
|
|
27
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAI3E,8CAA8C;AAC9C,eAAO,MAAM,0BAA0B,IAAgC,CAAC;AAExE,UAAU,WAAW;IACnB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,OAAmB,EAAE,YAA4C,EAC/F,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,2CAkC3D;yBAnCe,MAAM"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/** Headerの見た目をrecipeと照合できるpure resolverへ集約する。 */
|
|
2
|
+
import type { ViewStyle } from "react-native";
|
|
2
3
|
import type { NativeTheme, ThemeMode } from "../theme/index.js";
|
|
3
4
|
import type { VariantOf } from "../contracts/contract-types.js";
|
|
4
5
|
export declare const HEADER_SPEC: {
|
|
@@ -7,33 +8,24 @@ export declare const HEADER_SPEC: {
|
|
|
7
8
|
readonly paddingX: "4";
|
|
8
9
|
readonly paddingY: "3";
|
|
9
10
|
readonly titleFont: "xl";
|
|
11
|
+
readonly centeredTitleFont: "lg";
|
|
10
12
|
readonly titleWeight: "bold";
|
|
11
13
|
readonly titleColor: "text-heading";
|
|
12
14
|
readonly borderWidth: 1;
|
|
13
15
|
readonly hiddenTitleSize: 1;
|
|
16
|
+
readonly centeredMinHeight: 44;
|
|
17
|
+
readonly sideMinWidth: 44;
|
|
14
18
|
};
|
|
15
19
|
export interface HeaderStyle {
|
|
16
|
-
containerStyle:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
paddingVertical: number;
|
|
22
|
-
backgroundColor: string;
|
|
23
|
-
borderBottomWidth: 1;
|
|
24
|
-
borderBottomColor: string;
|
|
25
|
-
};
|
|
26
|
-
titleWrapStyle: {
|
|
27
|
-
flex: 1;
|
|
28
|
-
};
|
|
29
|
-
hiddenTitleStyle?: {
|
|
30
|
-
position: "absolute";
|
|
31
|
-
width: 1;
|
|
32
|
-
height: 1;
|
|
33
|
-
overflow: "hidden";
|
|
34
|
-
};
|
|
20
|
+
containerStyle: ViewStyle;
|
|
21
|
+
titleWrapStyle: ViewStyle;
|
|
22
|
+
hiddenTitleStyle?: ViewStyle;
|
|
23
|
+
leadingStyle?: ViewStyle;
|
|
24
|
+
trailingStyle?: ViewStyle;
|
|
35
25
|
}
|
|
26
|
+
/** 中央タイトルの2形だけが同じ配置と組版を共有する。 */
|
|
27
|
+
export declare function isCenteredHeader(variant?: VariantOf<"header">): boolean;
|
|
36
28
|
export declare function resolveHeaderStyle(theme: NativeTheme, mode: ThemeMode, props?: {
|
|
37
29
|
variant?: VariantOf<"header">;
|
|
38
|
-
}): HeaderStyle;
|
|
30
|
+
}, hairlineWidth?: number): HeaderStyle;
|
|
39
31
|
//# sourceMappingURL=header.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/header.styles.ts"],"names":[],"mappings":"AAAA,iDAAiD;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAA0D,MAAM,mBAAmB,CAAC;AACxH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhE,eAAO,MAAM,WAAW
|
|
1
|
+
{"version":3,"file":"header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/header.styles.ts"],"names":[],"mappings":"AAAA,iDAAiD;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAA0D,MAAM,mBAAmB,CAAC;AACxH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhE,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAQvB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE,SAAS,CAAC;IAC1B,cAAc,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,gCAAgC;AAChC,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,OAAO,CAEvE;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAE;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;CAAO,EAElF,aAAa,GAA8B,MAAM,GAChD,WAAW,CAiCb"}
|
|
@@ -93,8 +93,8 @@ export declare const CONTRACTS: {
|
|
|
93
93
|
};
|
|
94
94
|
readonly header: {
|
|
95
95
|
readonly id: "header";
|
|
96
|
-
readonly version: "0.
|
|
97
|
-
readonly variants: readonly ["default", "actions"];
|
|
96
|
+
readonly version: "0.3.0";
|
|
97
|
+
readonly variants: readonly ["default", "actions", "centered", "navigation"];
|
|
98
98
|
readonly sizes: readonly [];
|
|
99
99
|
readonly states: readonly ["default"];
|
|
100
100
|
};
|
|
@@ -9,4 +9,5 @@ export * from "./theme/index.js";
|
|
|
9
9
|
export * from "./primitives/index.js";
|
|
10
10
|
export * from "./components/index.js";
|
|
11
11
|
export { CONTRACTS, type ContractId, type ContractShape, type VariantOf, type SizeOf, type StateOf, } from "./contracts/contract-types.js";
|
|
12
|
+
export { HEADER_CENTERED_MIN_HEIGHT } from "./components/Header.js";
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,kBAAkB,CAAC;AAGjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EACL,SAAS,EACT,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,OAAO,GACb,MAAM,+BAA+B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,kBAAkB,CAAC;AAGjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EACL,SAAS,EACT,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,OAAO,GACb,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC"}
|
package/llms.txt
CHANGED
|
@@ -23,7 +23,7 @@ UI を組む前に docs/patterns.md（組み方の規範）を読むこと。exa
|
|
|
23
23
|
- [card](https://melta.tsubotax.com/design/contracts/components/card.contract.json): ✅ `Card` — コンテンツコンテナ。Basic / Metrics / Media / Action / Link の5バリエーション。
|
|
24
24
|
- [checkbox](https://melta.tsubotax.com/design/contracts/components/checkbox.contract.json): ✅ `Checkbox` — 複数選択フォームコントロール。CSS 18px サイズ。
|
|
25
25
|
- [empty-state](https://melta.tsubotax.com/design/contracts/components/empty-state.contract.json): ✅ `EmptyState` — データ無し時のプレースホルダー（アイコン + タイトル + 説明 + 任意のアクション）。Text + Button の compose。
|
|
26
|
-
- [header](https://melta.tsubotax.com/design/contracts/components/header.contract.json): ✅ `Header` — 画面ヘッダー。default
|
|
26
|
+
- [header](https://melta.tsubotax.com/design/contracts/components/header.contract.json): ✅ `Header` — 画面ヘッダー。defaultは左寄せ見出し、actionsは可視タイトルなしの操作バー、centered/navigationは中央タイトル。配置・寸法・文字組みはHeaderが所有し、画面の操作内容とnavigationは利用側が渡す。
|
|
27
27
|
- [icon](https://melta.tsubotax.com/design/contracts/components/icon.contract.json): ✅ `Icon` — 統一アイコン primitive。name prop でグリフを選択し（グリフ集合は実装側の公開面 = assets/icons の Charcoal セット由来）、色は semantic token キー限定の prop（default
|
|
28
28
|
- [image](https://melta.tsubotax.com/design/contracts/components/image.contract.json): ✅ `Image` — 画像表示 primitive。aspectRatio / radius / contentFit / onError fallback を持つ。Phase1 は RN コア Image、expo-image は Phase2。
|
|
29
29
|
- [metric](https://melta.tsubotax.com/design/contracts/components/metric.contract.json): ✅ `Metric` — 数値 + 単位 + ラベルの指標表示 primitive（距離 / 時間 / 獲得標高 等の走行サマリー表示）。tabular-nums で桁揃え。sizes の height は数値テキストの想定行高(px)で、実 fontSize は実
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "melta-app",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://app.melta.tsubotax.com",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"@types/react": "~19.2.2",
|
|
87
87
|
"eslint": "^10.4.1",
|
|
88
88
|
"jest": "^29.7.0",
|
|
89
|
-
"melta-contracts": "
|
|
89
|
+
"melta-contracts": "0.9.0",
|
|
90
90
|
"react": "19.2.3",
|
|
91
91
|
"react-native": "0.85.3",
|
|
92
92
|
"react-native-builder-bob": "^0.40.13",
|
|
@@ -1,37 +1,50 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Header — 画面名と左右の操作を持つ共通ヘッダー。
|
|
3
|
-
*
|
|
4
|
-
* 余白・下線・見出しの配置はheader recipeとpure resolverが所有する。
|
|
3
|
+
* 配置・余白・見出しの組版を所有し、navigationやタイトルのアニメーションは利用側が渡す。
|
|
5
4
|
*/
|
|
6
5
|
import { useMemo, type ReactNode } from "react";
|
|
7
|
-
import { View, type StyleProp, type ViewStyle } from "react-native";
|
|
6
|
+
import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
|
|
8
7
|
import { useTheme } from "../theme/index.js";
|
|
9
8
|
import { CONTRACTS, type VariantOf } from "../contracts/contract-types.js";
|
|
10
9
|
import { Text } from "../primitives/Text.js";
|
|
11
|
-
import { HEADER_SPEC, resolveHeaderStyle } from "./header.styles.js";
|
|
10
|
+
import { HEADER_SPEC, isCenteredHeader, resolveHeaderStyle } from "./header.styles.js";
|
|
11
|
+
|
|
12
|
+
/** 中央タイトルの最小高。スクロール量には可能な限りonLayoutの実測を使う。 */
|
|
13
|
+
export const HEADER_CENTERED_MIN_HEIGHT = HEADER_SPEC.centeredMinHeight;
|
|
12
14
|
|
|
13
15
|
interface HeaderProps {
|
|
14
16
|
/** 空でない画面名。actionsでも読み上げるため必須。 */
|
|
15
17
|
title: string;
|
|
16
|
-
/** defaultは可視見出し、actionsは可視タイトルのない操作バー。 */
|
|
17
18
|
variant?: VariantOf<"header">;
|
|
19
|
+
/** 中央タイトルの長い画面名を1段下げる。default/actionsの組版は変更しない。 */
|
|
20
|
+
titleVariant?: "base" | "lg";
|
|
21
|
+
/** 中央タイトルのfade用。渡された見出しを保ち、アニメーションと読み上げ非表示だけを包む。 */
|
|
22
|
+
wrapTitle?: (heading: ReactNode) => ReactNode;
|
|
18
23
|
leading?: ReactNode;
|
|
19
24
|
trailing?: ReactNode;
|
|
20
25
|
style?: StyleProp<ViewStyle>;
|
|
21
26
|
testID?: string;
|
|
22
27
|
}
|
|
23
28
|
|
|
24
|
-
export function Header({ title, variant = "default",
|
|
29
|
+
export function Header({ title, variant = "default", titleVariant = HEADER_SPEC.centeredTitleFont,
|
|
30
|
+
wrapTitle, leading, trailing, style, testID }: HeaderProps) {
|
|
25
31
|
const { theme, mode } = useTheme();
|
|
26
|
-
const { containerStyle, titleWrapStyle, hiddenTitleStyle } = useMemo(
|
|
27
|
-
() => resolveHeaderStyle(theme, mode, { variant }), [theme, mode, variant],
|
|
32
|
+
const { containerStyle, titleWrapStyle, hiddenTitleStyle, leadingStyle, trailingStyle } = useMemo(
|
|
33
|
+
() => resolveHeaderStyle(theme, mode, { variant }, StyleSheet.hairlineWidth), [theme, mode, variant],
|
|
28
34
|
);
|
|
35
|
+
const centered = isCenteredHeader(variant);
|
|
36
|
+
// 中央タイトルは既存の本文字間を維持し、独立した見出しの意味をwrapperで与える。
|
|
37
|
+
const centeredTitle = centered ? (
|
|
38
|
+
<View accessible accessibilityRole="header" accessibilityLabel={title}>
|
|
39
|
+
<Text variant={titleVariant} weight={HEADER_SPEC.titleWeight}
|
|
40
|
+
color={HEADER_SPEC.titleColor} numberOfLines={1}>{title}</Text>
|
|
41
|
+
</View>
|
|
42
|
+
) : null;
|
|
29
43
|
return (
|
|
30
44
|
<View style={[containerStyle, style]} testID={testID}>
|
|
31
|
-
{leading}
|
|
45
|
+
{centered ? <View style={leadingStyle}>{leading}</View> : leading}
|
|
32
46
|
<View style={titleWrapStyle}>
|
|
33
|
-
{variant === "actions" ? (
|
|
34
|
-
// 見出しTextの契約を再利用し、左右の操作を親の読み上げへ畳まない。
|
|
47
|
+
{centered ? (wrapTitle ? wrapTitle(centeredTitle) : centeredTitle) : variant === "actions" ? (
|
|
35
48
|
<View pointerEvents="none" style={hiddenTitleStyle}>
|
|
36
49
|
<Text variant={HEADER_SPEC.titleFont} weight={HEADER_SPEC.titleWeight}
|
|
37
50
|
color={HEADER_SPEC.titleColor} role="heading" numberOfLines={1}>
|
|
@@ -45,7 +58,7 @@ export function Header({ title, variant = "default", leading, trailing, style, t
|
|
|
45
58
|
</Text>
|
|
46
59
|
)}
|
|
47
60
|
</View>
|
|
48
|
-
{trailing}
|
|
61
|
+
{centered ? <View style={trailingStyle}>{trailing}</View> : trailing}
|
|
49
62
|
</View>
|
|
50
63
|
);
|
|
51
64
|
}
|
|
@@ -1,30 +1,51 @@
|
|
|
1
1
|
/** Headerの見た目をrecipeと照合できるpure resolverへ集約する。 */
|
|
2
|
+
import type { ViewStyle } from "react-native";
|
|
2
3
|
import type { NativeTheme, ThemeMode, SpacingKey, FontSizeKey, FontWeightKey, SemanticColors } from "../theme/index.js";
|
|
3
4
|
import type { VariantOf } from "../contracts/contract-types.js";
|
|
4
5
|
|
|
5
6
|
export const HEADER_SPEC = {
|
|
6
7
|
gap: "3", actionsGap: "1", paddingX: "4", paddingY: "3",
|
|
7
|
-
titleFont: "xl", titleWeight: "bold", titleColor: "text-heading",
|
|
8
|
-
borderWidth: 1, hiddenTitleSize: 1,
|
|
8
|
+
titleFont: "xl", centeredTitleFont: "lg", titleWeight: "bold", titleColor: "text-heading",
|
|
9
|
+
borderWidth: 1, hiddenTitleSize: 1, centeredMinHeight: 44, sideMinWidth: 44,
|
|
9
10
|
} as const satisfies {
|
|
10
11
|
gap: SpacingKey; actionsGap: SpacingKey; paddingX: SpacingKey; paddingY: SpacingKey;
|
|
11
|
-
titleFont: FontSizeKey; titleWeight: FontWeightKey; titleColor: keyof SemanticColors;
|
|
12
|
-
borderWidth: 1; hiddenTitleSize: 1;
|
|
12
|
+
titleFont: FontSizeKey; centeredTitleFont: FontSizeKey; titleWeight: FontWeightKey; titleColor: keyof SemanticColors;
|
|
13
|
+
borderWidth: 1; hiddenTitleSize: 1; centeredMinHeight: 44; sideMinWidth: 44;
|
|
13
14
|
};
|
|
14
15
|
|
|
15
16
|
export interface HeaderStyle {
|
|
16
|
-
containerStyle:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
containerStyle: ViewStyle;
|
|
18
|
+
titleWrapStyle: ViewStyle;
|
|
19
|
+
hiddenTitleStyle?: ViewStyle;
|
|
20
|
+
leadingStyle?: ViewStyle;
|
|
21
|
+
trailingStyle?: ViewStyle;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/** 中央タイトルの2形だけが同じ配置と組版を共有する。 */
|
|
25
|
+
export function isCenteredHeader(variant?: VariantOf<"header">): boolean {
|
|
26
|
+
return variant === "centered" || variant === "navigation";
|
|
23
27
|
}
|
|
24
28
|
|
|
25
29
|
export function resolveHeaderStyle(
|
|
26
30
|
theme: NativeTheme, mode: ThemeMode, props: { variant?: VariantOf<"header"> } = {},
|
|
31
|
+
// recipeは密度1で照合し、実機のhairline値だけを外から注入する。
|
|
32
|
+
hairlineWidth = HEADER_SPEC.borderWidth as number,
|
|
27
33
|
): HeaderStyle {
|
|
34
|
+
if (isCenteredHeader(props.variant)) {
|
|
35
|
+
return {
|
|
36
|
+
containerStyle: {
|
|
37
|
+
flexDirection: "row", alignItems: "center", minHeight: HEADER_SPEC.centeredMinHeight,
|
|
38
|
+
...(props.variant === "navigation" ? {
|
|
39
|
+
paddingHorizontal: theme.spacing[HEADER_SPEC.paddingX],
|
|
40
|
+
borderBottomWidth: hairlineWidth,
|
|
41
|
+
borderBottomColor: theme.color.semantic[mode]["border-default"],
|
|
42
|
+
} : {}),
|
|
43
|
+
},
|
|
44
|
+
titleWrapStyle: { flexShrink: 1, minWidth: 0 },
|
|
45
|
+
leadingStyle: { flex: 1, minWidth: HEADER_SPEC.sideMinWidth, flexDirection: "row", justifyContent: "flex-start" },
|
|
46
|
+
trailingStyle: { flex: 1, minWidth: HEADER_SPEC.sideMinWidth, flexDirection: "row", justifyContent: "flex-end" },
|
|
47
|
+
};
|
|
48
|
+
}
|
|
28
49
|
return {
|
|
29
50
|
containerStyle: {
|
|
30
51
|
flexDirection: "row", alignItems: "center", gap: theme.spacing[props.variant === "actions" ? HEADER_SPEC.actionsGap : HEADER_SPEC.gap],
|
|
@@ -98,8 +98,8 @@ export const CONTRACTS = {
|
|
|
98
98
|
},
|
|
99
99
|
header: {
|
|
100
100
|
id: "header",
|
|
101
|
-
version: "0.
|
|
102
|
-
variants: ["default", "actions"],
|
|
101
|
+
version: "0.3.0",
|
|
102
|
+
variants: ["default", "actions", "centered", "navigation"],
|
|
103
103
|
sizes: [],
|
|
104
104
|
states: ["default"],
|
|
105
105
|
},
|