@ankhorage/zora 2.3.0 → 2.4.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/CHANGELOG.md +6 -0
- package/README.md +0 -2
- package/dist/layout/app-shell/AppShell.d.ts.map +1 -1
- package/dist/layout/app-shell/AppShell.js +3 -3
- package/dist/layout/app-shell/AppShell.js.map +1 -1
- package/dist/layout/app-shell/types.d.ts +0 -3
- package/dist/layout/app-shell/types.d.ts.map +1 -1
- package/dist/layout/app-shell/types.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/app-shell/AppShell.test.ts +24 -0
- package/src/layout/app-shell/AppShell.tsx +2 -4
- package/src/layout/app-shell/types.ts +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 3c5b384: Remove raw `style` and `bodyStyle` escape hatches from `AppShell`. AppShell remains a structural app frame; layout customization should happen through composed ZORA primitives instead of arbitrary root/body style overrides.
|
|
8
|
+
|
|
3
9
|
## 2.3.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1390,8 +1390,6 @@ ZORA props:
|
|
|
1390
1390
|
| `header` | `React.ReactNode` | - | Optional top section (e.g. toolbar or navigation). |
|
|
1391
1391
|
| `footer` | `React.ReactNode` | - | Optional bottom section (e.g. tab bar or actions). |
|
|
1392
1392
|
| `overlay` | `React.ReactNode` | - | Optional overlay layer rendered above content (e.g. drawer, modal, floating panels). |
|
|
1393
|
-
| `style` | `StyleProp<ViewStyle>` | - | Style applied to the root container. |
|
|
1394
|
-
| `bodyStyle` | `StyleProp<ViewStyle>` | - | Style applied to the main content container. |
|
|
1395
1393
|
| `testID` | `string` | - | Forwarded to the root Surface container. |
|
|
1396
1394
|
|
|
1397
1395
|
Inherited props:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA8B7C,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
|
|
@@ -2,12 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import { StyleSheet, View } from 'react-native';
|
|
3
3
|
import { Box } from '../../foundation';
|
|
4
4
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
|
-
function AppShellInner({ themeId: _themeId, mode: _mode, children, header, footer, overlay,
|
|
6
|
-
return (<Box bg="background" flex={1}
|
|
5
|
+
function AppShellInner({ themeId: _themeId, mode: _mode, children, header, footer, overlay, testID, }) {
|
|
6
|
+
return (<Box bg="background" flex={1} testID={testID}>
|
|
7
7
|
<View style={styles.root}>
|
|
8
8
|
{header ? <View style={styles.slot}>{header}</View> : null}
|
|
9
9
|
|
|
10
|
-
<View style={
|
|
10
|
+
<View style={styles.body}>{children}</View>
|
|
11
11
|
|
|
12
12
|
{footer ? <View style={styles.slot}>{footer}</View> : null}
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,GACQ;IACd,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC3C;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAE1D;;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAE1C;;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAE1D;;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACnD;YAAA,CAAC,OAAO,CACV;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAE1D,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,UAAU;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,CAAC;KACZ;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;KACd;IACD,OAAO,EAAE;QACP,GAAG,UAAU,CAAC,kBAAkB;QAChC,MAAM,EAAE,EAAE;KACX;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { Box } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { AppShellProps } from './types';\n\nfunction AppShellInner({\n themeId: _themeId,\n mode: _mode,\n children,\n header,\n footer,\n overlay,\n testID,\n}: AppShellProps) {\n return (\n <Box bg=\"background\" flex={1} testID={testID}>\n <View style={styles.root}>\n {header ? <View style={styles.slot}>{header}</View> : null}\n\n <View style={styles.body}>{children}</View>\n\n {footer ? <View style={styles.slot}>{footer}</View> : null}\n\n {overlay ? (\n <View pointerEvents=\"box-none\" style={styles.overlay}>\n {overlay}\n </View>\n ) : null}\n </View>\n </Box>\n );\n}\n\nexport const AppShell = withZoraThemeScope(AppShellInner);\n\nconst styles = StyleSheet.create({\n root: {\n flex: 1,\n minHeight: 0,\n position: 'relative',\n },\n body: {\n flex: 1,\n minHeight: 0,\n minWidth: 0,\n },\n slot: {\n flexShrink: 0,\n },\n overlay: {\n ...StyleSheet.absoluteFillObject,\n zIndex: 10,\n },\n});\n"]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
2
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
3
|
export interface AppShellProps extends ZoraBaseProps {
|
|
5
4
|
children?: React.ReactNode;
|
|
6
5
|
header?: React.ReactNode;
|
|
7
6
|
footer?: React.ReactNode;
|
|
8
7
|
overlay?: React.ReactNode;
|
|
9
|
-
style?: StyleProp<ViewStyle>;
|
|
10
|
-
bodyStyle?: StyleProp<ViewStyle>;
|
|
11
8
|
}
|
|
12
9
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface AppShellProps extends ZoraBaseProps {\n children?: React.ReactNode;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n overlay?: React.ReactNode;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.4.0",
|
|
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,24 @@
|
|
|
1
|
+
import { readFileSync } from 'node:fs';
|
|
2
|
+
import { join } from 'node:path';
|
|
3
|
+
|
|
4
|
+
import { describe, expect, test } from 'bun:test';
|
|
5
|
+
|
|
6
|
+
const APP_SHELL_DIR = import.meta.dir;
|
|
7
|
+
|
|
8
|
+
function readAppShellFile(fileName: string): string {
|
|
9
|
+
return readFileSync(join(APP_SHELL_DIR, fileName), 'utf8');
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
describe('AppShell public API', () => {
|
|
13
|
+
test('does not expose raw style escape hatches', () => {
|
|
14
|
+
const typesSource = readAppShellFile('types.ts');
|
|
15
|
+
const implementationSource = readAppShellFile('AppShell.tsx');
|
|
16
|
+
|
|
17
|
+
expect(typesSource).not.toContain('StyleProp');
|
|
18
|
+
expect(typesSource).not.toContain('ViewStyle');
|
|
19
|
+
expect(typesSource).not.toMatch(/\bstyle\??:/);
|
|
20
|
+
expect(typesSource).not.toMatch(/\bbodyStyle\??:/);
|
|
21
|
+
expect(implementationSource).not.toMatch(/\bbodyStyle\b/);
|
|
22
|
+
expect(implementationSource).not.toMatch(/\bstyle,\s*$/m);
|
|
23
|
+
});
|
|
24
|
+
});
|
|
@@ -12,16 +12,14 @@ function AppShellInner({
|
|
|
12
12
|
header,
|
|
13
13
|
footer,
|
|
14
14
|
overlay,
|
|
15
|
-
style,
|
|
16
|
-
bodyStyle,
|
|
17
15
|
testID,
|
|
18
16
|
}: AppShellProps) {
|
|
19
17
|
return (
|
|
20
|
-
<Box bg="background" flex={1}
|
|
18
|
+
<Box bg="background" flex={1} testID={testID}>
|
|
21
19
|
<View style={styles.root}>
|
|
22
20
|
{header ? <View style={styles.slot}>{header}</View> : null}
|
|
23
21
|
|
|
24
|
-
<View style={
|
|
22
|
+
<View style={styles.body}>{children}</View>
|
|
25
23
|
|
|
26
24
|
{footer ? <View style={styles.slot}>{footer}</View> : null}
|
|
27
25
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
2
|
|
|
4
3
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
4
|
|
|
@@ -8,6 +7,4 @@ export interface AppShellProps extends ZoraBaseProps {
|
|
|
8
7
|
header?: React.ReactNode;
|
|
9
8
|
footer?: React.ReactNode;
|
|
10
9
|
overlay?: React.ReactNode;
|
|
11
|
-
style?: StyleProp<ViewStyle>;
|
|
12
|
-
bodyStyle?: StyleProp<ViewStyle>;
|
|
13
10
|
}
|