@ankhorage/zora 0.8.0 → 0.8.1
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/CHANGELOG.md +6 -0
- package/README.md +16 -16
- package/dist/components/heading/Heading.d.ts.map +1 -1
- package/dist/components/heading/Heading.js +4 -12
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +4 -12
- package/dist/components/text/Text.js.map +1 -1
- package/package.json +1 -1
- package/src/components/contentFallback.test.ts +23 -0
- package/src/components/heading/Heading.tsx +3 -12
- package/src/components/text/Text.tsx +3 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.8.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f7e5fdc: Stop resolving localization internally in Text and Heading. Localization keys now remain passive fallback content so runtime integrations can resolve localized display props before rendering.
|
|
8
|
+
|
|
3
9
|
## 0.8.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -122,21 +122,21 @@ responsive for mobile and web layouts.
|
|
|
122
122
|
|
|
123
123
|
ZORA props:
|
|
124
124
|
|
|
125
|
-
| Prop | Type
|
|
126
|
-
| --------------- |
|
|
127
|
-
| `children` | `React.ReactNode`
|
|
128
|
-
| `text` | `string`
|
|
129
|
-
| `i18nKey` | `string`
|
|
130
|
-
| `level` | `HeadingLevel`
|
|
131
|
-
| `size` | `Responsive<HeadingSize>`
|
|
132
|
-
| `tone` | `Responsive<HeadingTone>`
|
|
133
|
-
| `align` | `Responsive<HeadingAlign>`
|
|
134
|
-
| `weight` | `Responsive<HeadingWeight>`
|
|
135
|
-
| `italic` | `boolean`
|
|
136
|
-
| `numberOfLines` | `number`
|
|
137
|
-
| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'`
|
|
138
|
-
| `selectable` | `boolean`
|
|
139
|
-
| `testID` | `string`
|
|
125
|
+
| Prop | Type | Default | Notes |
|
|
126
|
+
| --------------- | ---------------------------------------- | ----------- | -------------------------------------------- |
|
|
127
|
+
| `children` | `React.ReactNode` | - | Primary content. |
|
|
128
|
+
| `text` | `string` | - | Manifest-friendly content prop. |
|
|
129
|
+
| `i18nKey` | `string` | - | Runtime-resolved fallback key when no content prop is provided. |
|
|
130
|
+
| `level` | `HeadingLevel` | `2` | Semantic heading level from `1` through `6`. |
|
|
131
|
+
| `size` | `Responsive<HeadingSize>` | level size | Visual scale: `display`, `h1` through `h6`. |
|
|
132
|
+
| `tone` | `Responsive<HeadingTone>` | `'default'` | Semantic text color. |
|
|
133
|
+
| `align` | `Responsive<HeadingAlign>` | - | Text alignment. |
|
|
134
|
+
| `weight` | `Responsive<HeadingWeight>` | recipe | Optional structured weight override. |
|
|
135
|
+
| `italic` | `boolean` | `false` | Italic style. |
|
|
136
|
+
| `numberOfLines` | `number` | - | Native/web truncation line count. |
|
|
137
|
+
| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | - | Truncation behavior. |
|
|
138
|
+
| `selectable` | `boolean` | - | Allows text selection where supported. |
|
|
139
|
+
| `testID` | `string` | - | Test id. |
|
|
140
140
|
|
|
141
141
|
No inherited props. `HeadingProps` is declared directly by ZORA to keep heading
|
|
142
142
|
usage structured and template-safe.
|
|
@@ -167,7 +167,7 @@ ZORA props:
|
|
|
167
167
|
| --------------- | ---------------------------------------- | ----------- | -------------------------------------- |
|
|
168
168
|
| `children` | `React.ReactNode` | - | Primary content. |
|
|
169
169
|
| `text` | `string` | - | Manifest-friendly content prop. |
|
|
170
|
-
| `i18nKey` | `string` | - |
|
|
170
|
+
| `i18nKey` | `string` | - | Runtime-resolved fallback key when no content prop is provided. |
|
|
171
171
|
| `variant` | `Responsive<TextVariant>` | `'body'` | Typography recipe. |
|
|
172
172
|
| `tone` | `Responsive<TextTone>` | `'default'` | Semantic text color. |
|
|
173
173
|
| `align` | `Responsive<TextAlign>` | - | Text alignment. |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA0B5C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAS,EACT,IAAI,EACJ,IAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAA4B,EAC5B,QAAQ,EACR,MAAM,GACP,EAAE,YAAY,4BAmCd"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { resolveResponsive, useResponsiveRuntime
|
|
1
|
+
import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Text as ReactNativeText } from 'react-native';
|
|
4
4
|
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
5
5
|
import { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';
|
|
6
|
-
function resolveHeadingContent({ children, text, i18nKey,
|
|
6
|
+
function resolveHeadingContent({ children, text, i18nKey, }) {
|
|
7
7
|
if (children !== undefined) {
|
|
8
8
|
return children;
|
|
9
9
|
}
|
|
@@ -13,20 +13,12 @@ function resolveHeadingContent({ children, text, i18nKey, translate, }) {
|
|
|
13
13
|
if (!i18nKey) {
|
|
14
14
|
return null;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
|
-
const translated = translate(i18nKey);
|
|
18
|
-
return translated && translated !== i18nKey ? translated : i18nKey;
|
|
19
|
-
}
|
|
20
|
-
catch (error) {
|
|
21
|
-
console.warn('[ZoraHeading] Translation error:', error);
|
|
22
|
-
return i18nKey;
|
|
23
|
-
}
|
|
16
|
+
return i18nKey;
|
|
24
17
|
}
|
|
25
18
|
export function Heading({ children, text, i18nKey, level = 2, size, tone = 'default', align, weight, italic = false, numberOfLines, ellipsizeMode, selectable, accessibilityLabel, accessibilityHint, accessibilityRole = 'header', nativeID, testID, }) {
|
|
26
19
|
const { theme } = useZoraTheme();
|
|
27
20
|
const { breakpoint } = useResponsiveRuntime();
|
|
28
|
-
const {
|
|
29
|
-
const content = resolveHeadingContent({ children, text, i18nKey, translate: t });
|
|
21
|
+
const content = resolveHeadingContent({ children, text, i18nKey });
|
|
30
22
|
const resolvedSize = resolveResponsive(size, breakpoint) ?? resolveHeadingSizeFromLevel(level);
|
|
31
23
|
const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';
|
|
32
24
|
const resolvedAlign = resolveResponsive(align, breakpoint);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,
|
|
1
|
+
{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAG3F,SAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,IAAI,EACJ,OAAO,GAKR;IACC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,CAAC,EACT,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAAG,QAAQ,EAC5B,QAAQ,EACR,MAAM,GACO;IACb,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC/F,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,SAAS,CAAC;IACtE,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAE7D,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,eAAe,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE;YACjC,KAAK,EAAE,aAAa;YACpB,MAAM;YACN,KAAK;YACL,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,YAAY;YAClB,MAAM,EAAE,cAAc;SACvB,CAAC,CAAC,CAEH;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';\nimport React from 'react';\nimport { Text as ReactNativeText } from 'react-native';\n\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';\nimport type { HeadingProps } from './types';\n\nfunction resolveHeadingContent({\n children,\n text,\n i18nKey,\n}: {\n children: HeadingProps['children'];\n text: HeadingProps['text'];\n i18nKey: HeadingProps['i18nKey'];\n}): React.ReactNode {\n if (children !== undefined) {\n return children;\n }\n\n if (text !== undefined) {\n return text;\n }\n\n if (!i18nKey) {\n return null;\n }\n\n return i18nKey;\n}\n\nexport function Heading({\n children,\n text,\n i18nKey,\n level = 2,\n size,\n tone = 'default',\n align,\n weight,\n italic = false,\n numberOfLines,\n ellipsizeMode,\n selectable,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'header',\n nativeID,\n testID,\n}: HeadingProps) {\n const { theme } = useZoraTheme();\n const { breakpoint } = useResponsiveRuntime();\n const content = resolveHeadingContent({ children, text, i18nKey });\n const resolvedSize = resolveResponsive(size, breakpoint) ?? resolveHeadingSizeFromLevel(level);\n const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';\n const resolvedAlign = resolveResponsive(align, breakpoint);\n const resolvedWeight = resolveResponsive(weight, breakpoint);\n\n if (content === null || content === undefined) {\n return null;\n }\n\n return (\n <ReactNativeText\n accessibilityHint={accessibilityHint}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n ellipsizeMode={ellipsizeMode}\n nativeID={nativeID}\n numberOfLines={numberOfLines}\n selectable={selectable}\n testID={testID}\n style={resolveHeadingRecipe(theme, {\n align: resolvedAlign,\n italic,\n level,\n size: resolvedSize,\n tone: resolvedTone,\n weight: resolvedWeight,\n })}\n >\n {content}\n </ReactNativeText>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA0BzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,OAAgB,EAChB,IAAgB,EAChB,KAAK,EACL,MAAM,EACN,MAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,MAAM,GACP,EAAE,SAAS,4BAkCX"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { resolveResponsive, useResponsiveRuntime
|
|
1
|
+
import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Text as ReactNativeText } from 'react-native';
|
|
4
4
|
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
5
5
|
import { resolveTextStyle } from './resolveTextRecipe';
|
|
6
|
-
function resolveTextContent({ children, text, i18nKey,
|
|
6
|
+
function resolveTextContent({ children, text, i18nKey, }) {
|
|
7
7
|
if (children !== undefined) {
|
|
8
8
|
return children;
|
|
9
9
|
}
|
|
@@ -13,20 +13,12 @@ function resolveTextContent({ children, text, i18nKey, translate, }) {
|
|
|
13
13
|
if (!i18nKey) {
|
|
14
14
|
return null;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
|
-
const translated = translate(i18nKey);
|
|
18
|
-
return translated && translated !== i18nKey ? translated : i18nKey;
|
|
19
|
-
}
|
|
20
|
-
catch (error) {
|
|
21
|
-
console.warn('[ZoraText] Translation error:', error);
|
|
22
|
-
return i18nKey;
|
|
23
|
-
}
|
|
16
|
+
return i18nKey;
|
|
24
17
|
}
|
|
25
18
|
export function Text({ children, text, i18nKey, variant = 'body', tone = 'default', align, weight, italic = false, numberOfLines, ellipsizeMode, selectable, accessibilityLabel, accessibilityHint, accessibilityRole, nativeID, testID, }) {
|
|
26
19
|
const { theme } = useZoraTheme();
|
|
27
20
|
const { breakpoint } = useResponsiveRuntime();
|
|
28
|
-
const {
|
|
29
|
-
const content = resolveTextContent({ children, text, i18nKey, translate: t });
|
|
21
|
+
const content = resolveTextContent({ children, text, i18nKey });
|
|
30
22
|
const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
|
|
31
23
|
const resolvedStyle = resolveTextStyle({
|
|
32
24
|
theme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,SAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,OAAO,GAKR;IACC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,MAAM,GACI;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC;IACzE,MAAM,aAAa,GAAG,gBAAgB,CAAC;QACrC,KAAK;QACL,UAAU;QACV,OAAO,EAAE,eAAe;QACxB,IAAI;QACJ,KAAK;QACL,MAAM;QACN,MAAM;KACP,CAAC,CAAC;IAEH,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,eAAe,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,aAAa,CAAC,CAErB;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';\nimport React from 'react';\nimport { Text as ReactNativeText } from 'react-native';\n\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { resolveTextStyle } from './resolveTextRecipe';\nimport type { TextProps } from './types';\n\nfunction resolveTextContent({\n children,\n text,\n i18nKey,\n}: {\n children: TextProps['children'];\n text: TextProps['text'];\n i18nKey: TextProps['i18nKey'];\n}): React.ReactNode {\n if (children !== undefined) {\n return children;\n }\n\n if (text !== undefined) {\n return text;\n }\n\n if (!i18nKey) {\n return null;\n }\n\n return i18nKey;\n}\n\nexport function Text({\n children,\n text,\n i18nKey,\n variant = 'body',\n tone = 'default',\n align,\n weight,\n italic = false,\n numberOfLines,\n ellipsizeMode,\n selectable,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole,\n nativeID,\n testID,\n}: TextProps) {\n const { theme } = useZoraTheme();\n const { breakpoint } = useResponsiveRuntime();\n const content = resolveTextContent({ children, text, i18nKey });\n const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';\n const resolvedStyle = resolveTextStyle({\n theme,\n breakpoint,\n variant: resolvedVariant,\n tone,\n align,\n weight,\n italic,\n });\n\n if (content === null || content === undefined) {\n return null;\n }\n\n return (\n <ReactNativeText\n accessibilityHint={accessibilityHint}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n ellipsizeMode={ellipsizeMode}\n nativeID={nativeID}\n numberOfLines={numberOfLines}\n selectable={selectable}\n testID={testID}\n style={resolvedStyle}\n >\n {content}\n </ReactNativeText>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.1",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { readFileSync } from 'node:fs';
|
|
2
|
+
import { join } from 'node:path';
|
|
3
|
+
|
|
4
|
+
import { describe, expect, it } from 'bun:test';
|
|
5
|
+
|
|
6
|
+
const textSource = readFileSync(join(import.meta.dir, 'text', 'Text.tsx'), 'utf8');
|
|
7
|
+
const headingSource = readFileSync(join(import.meta.dir, 'heading', 'Heading.tsx'), 'utf8');
|
|
8
|
+
|
|
9
|
+
describe('content fallback ownership', () => {
|
|
10
|
+
it('keeps Text free of translation context coupling', () => {
|
|
11
|
+
expect(textSource).not.toMatch(/useTranslationContext/);
|
|
12
|
+
expect(textSource).toMatch(/if \(children !== undefined\) \{/);
|
|
13
|
+
expect(textSource).toMatch(/if \(text !== undefined\) \{/);
|
|
14
|
+
expect(textSource).toMatch(/return i18nKey;/);
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
it('keeps Heading free of translation context coupling', () => {
|
|
18
|
+
expect(headingSource).not.toMatch(/useTranslationContext/);
|
|
19
|
+
expect(headingSource).toMatch(/if \(children !== undefined\) \{/);
|
|
20
|
+
expect(headingSource).toMatch(/if \(text !== undefined\) \{/);
|
|
21
|
+
expect(headingSource).toMatch(/return i18nKey;/);
|
|
22
|
+
});
|
|
23
|
+
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { resolveResponsive, useResponsiveRuntime
|
|
1
|
+
import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Text as ReactNativeText } from 'react-native';
|
|
4
4
|
|
|
@@ -10,12 +10,10 @@ function resolveHeadingContent({
|
|
|
10
10
|
children,
|
|
11
11
|
text,
|
|
12
12
|
i18nKey,
|
|
13
|
-
translate,
|
|
14
13
|
}: {
|
|
15
14
|
children: HeadingProps['children'];
|
|
16
15
|
text: HeadingProps['text'];
|
|
17
16
|
i18nKey: HeadingProps['i18nKey'];
|
|
18
|
-
translate: (key: string) => string;
|
|
19
17
|
}): React.ReactNode {
|
|
20
18
|
if (children !== undefined) {
|
|
21
19
|
return children;
|
|
@@ -29,13 +27,7 @@ function resolveHeadingContent({
|
|
|
29
27
|
return null;
|
|
30
28
|
}
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
const translated = translate(i18nKey);
|
|
34
|
-
return translated && translated !== i18nKey ? translated : i18nKey;
|
|
35
|
-
} catch (error) {
|
|
36
|
-
console.warn('[ZoraHeading] Translation error:', error);
|
|
37
|
-
return i18nKey;
|
|
38
|
-
}
|
|
30
|
+
return i18nKey;
|
|
39
31
|
}
|
|
40
32
|
|
|
41
33
|
export function Heading({
|
|
@@ -59,8 +51,7 @@ export function Heading({
|
|
|
59
51
|
}: HeadingProps) {
|
|
60
52
|
const { theme } = useZoraTheme();
|
|
61
53
|
const { breakpoint } = useResponsiveRuntime();
|
|
62
|
-
const {
|
|
63
|
-
const content = resolveHeadingContent({ children, text, i18nKey, translate: t });
|
|
54
|
+
const content = resolveHeadingContent({ children, text, i18nKey });
|
|
64
55
|
const resolvedSize = resolveResponsive(size, breakpoint) ?? resolveHeadingSizeFromLevel(level);
|
|
65
56
|
const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';
|
|
66
57
|
const resolvedAlign = resolveResponsive(align, breakpoint);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { resolveResponsive, useResponsiveRuntime
|
|
1
|
+
import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Text as ReactNativeText } from 'react-native';
|
|
4
4
|
|
|
@@ -10,12 +10,10 @@ function resolveTextContent({
|
|
|
10
10
|
children,
|
|
11
11
|
text,
|
|
12
12
|
i18nKey,
|
|
13
|
-
translate,
|
|
14
13
|
}: {
|
|
15
14
|
children: TextProps['children'];
|
|
16
15
|
text: TextProps['text'];
|
|
17
16
|
i18nKey: TextProps['i18nKey'];
|
|
18
|
-
translate: (key: string) => string;
|
|
19
17
|
}): React.ReactNode {
|
|
20
18
|
if (children !== undefined) {
|
|
21
19
|
return children;
|
|
@@ -29,13 +27,7 @@ function resolveTextContent({
|
|
|
29
27
|
return null;
|
|
30
28
|
}
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
const translated = translate(i18nKey);
|
|
34
|
-
return translated && translated !== i18nKey ? translated : i18nKey;
|
|
35
|
-
} catch (error) {
|
|
36
|
-
console.warn('[ZoraText] Translation error:', error);
|
|
37
|
-
return i18nKey;
|
|
38
|
-
}
|
|
30
|
+
return i18nKey;
|
|
39
31
|
}
|
|
40
32
|
|
|
41
33
|
export function Text({
|
|
@@ -58,8 +50,7 @@ export function Text({
|
|
|
58
50
|
}: TextProps) {
|
|
59
51
|
const { theme } = useZoraTheme();
|
|
60
52
|
const { breakpoint } = useResponsiveRuntime();
|
|
61
|
-
const {
|
|
62
|
-
const content = resolveTextContent({ children, text, i18nKey, translate: t });
|
|
53
|
+
const content = resolveTextContent({ children, text, i18nKey });
|
|
63
54
|
const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
|
|
64
55
|
const resolvedStyle = resolveTextStyle({
|
|
65
56
|
theme,
|