@ankhorage/surface 4.4.0 → 4.4.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/dist/examples/DocsExamples.d.ts +0 -6
  4. package/dist/examples/DocsExamples.d.ts.map +0 -1
  5. package/dist/examples/DocsExamples.js +0 -97
  6. package/dist/examples/DocsExamples.js.map +0 -1
  7. package/src/examples/DocsExamples.tsx +0 -122
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @ankhorage/surface
2
2
 
3
+ ## 4.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 6af42ff: Move documentation examples to the repository-root examples structure and add type-aware lint coverage for them.
8
+
3
9
  ## 4.4.0
4
10
 
5
11
  ### Minor Changes
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ankhorage/surface",
3
3
  "type": "module",
4
- "version": "4.4.0",
4
+ "version": "4.4.1",
5
5
  "description": "Stable UI foundation for React Native and React Native Web.",
6
6
  "homepage": "https://github.com/ankhorage/surface#readme",
7
7
  "bugs": {
package/dist/examples/DocsExamples.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- export declare function FormExample(): React.JSX.Element;
3
- export declare function FeedbackExample(): React.JSX.Element;
4
- export declare function OverlayExample(): React.JSX.Element;
5
- export declare function NavigationExample(): React.JSX.Element;
6
- //# sourceMappingURL=DocsExamples.d.ts.map
package/dist/examples/DocsExamples.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"DocsExamples.d.ts","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyB1B,wBAAgB,WAAW,sBAY1B;AAeD,wBAAgB,eAAe,sBAa9B;AAED,wBAAgB,cAAc,sBAoB7B;AAED,wBAAgB,iBAAiB,sBAgChC"}
package/dist/examples/DocsExamples.js DELETED
@@ -1,97 +0,0 @@
1
- import React from 'react';
2
- import { Field } from '../components/field';
3
- import { HelperText } from '../components/helper-text';
4
- import { Menu } from '../components/menu';
5
- import { Modal } from '../components/modal';
6
- import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
7
- import { Tooltip } from '../components/tooltip';
8
- import { Button } from '../features/button/public';
9
- import { Card } from '../features/card/public';
10
- import { Checkbox } from '../features/form/checkbox/public';
11
- import { TextInput } from '../features/form/text-input/public';
12
- import { Box, Stack } from '../features/layout/public';
13
- import { ToastProvider, useToast } from '../features/toast/public';
14
- import { Text } from '../features/typography/public';
15
- import { ThemeProvider } from '../theme';
16
- const docsThemeConfig = {
17
- id: 'docs',
18
- name: 'Docs',
19
- light: { primaryColor: '#2563EB', harmony: 'analogous' },
20
- dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
21
- };
22
- export function FormExample() {
23
- return (<ThemeProvider initialConfig={docsThemeConfig}>
24
- <Stack gap="m" p="l">
25
- <Field helperText="Use your work email." label="Email" required>
26
- <TextInput placeholder="you@example.com"/>
27
- </Field>
28
- <Checkbox checked>Accept terms</Checkbox>
29
- <HelperText emphasis="muted">Looks good.</HelperText>
30
- </Stack>
31
- </ThemeProvider>);
32
- }
33
- function ToastButton() {
34
- const { showToast } = useToast();
35
- return (<Button onPress={() => showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })}>
36
- Show toast
37
- </Button>);
38
- }
39
- export function FeedbackExample() {
40
- return (<ThemeProvider initialConfig={docsThemeConfig}>
41
- <ToastProvider>
42
- <Stack gap="m" p="l">
43
- <Tooltip content="Helpful contextual information">
44
- <Text>Hover for tooltip</Text>
45
- </Tooltip>
46
- <ToastButton />
47
- </Stack>
48
- </ToastProvider>
49
- </ThemeProvider>);
50
- }
51
- export function OverlayExample() {
52
- const [modalVisible, setModalVisible] = React.useState(false);
53
- return (<ThemeProvider initialConfig={docsThemeConfig}>
54
- <Stack gap="m" p="l">
55
- <Button onPress={() => setModalVisible(true)}>Open modal</Button>
56
- <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
57
- <Card>
58
- <Stack gap="s">
59
- <Text variant="label" weight="semiBold">
60
- Modal title
61
- </Text>
62
- <Text>Modal content</Text>
63
- </Stack>
64
- </Card>
65
- </Modal>
66
- </Stack>
67
- </ThemeProvider>);
68
- }
69
- export function NavigationExample() {
70
- return (<ThemeProvider initialConfig={docsThemeConfig}>
71
- <Stack gap="m" p="l">
72
- <Tabs defaultValue="account">
73
- <TabList>
74
- <Tab value="account">Account</Tab>
75
- <Tab disabled value="security">
76
- Security
77
- </Tab>
78
- <Tab value="billing">Billing</Tab>
79
- </TabList>
80
- <TabPanel value="account">
81
- <Text>Account settings</Text>
82
- </TabPanel>
83
- <TabPanel value="billing">
84
- <Text>Billing settings</Text>
85
- </TabPanel>
86
- </Tabs>
87
- <Menu actions={[
88
- { id: 'edit', title: 'Edit' },
89
- { disabled: true, id: 'archive', title: 'Archive' },
90
- ]} trigger={<Text>Open menu</Text>}/>
91
- <Box>
92
- <Text color="success">Theme overrides can stay semantic.</Text>
93
- </Box>
94
- </Stack>
95
- </ThemeProvider>);
96
- }
97
- //# sourceMappingURL=DocsExamples.js.map
package/dist/examples/DocsExamples.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"DocsExamples.js","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Field } from '../components/field';\nimport { HelperText } from '../components/helper-text';\nimport { Menu } from '../components/menu';\nimport { Modal } from '../components/modal';\nimport { Tab, TabList, TabPanel, Tabs } from '../components/tabs';\nimport { Tooltip } from '../components/tooltip';\nimport { Button } from '../features/button/public';\nimport { Card } from '../features/card/public';\nimport { Checkbox } from '../features/form/checkbox/public';\nimport { TextInput } from '../features/form/text-input/public';\nimport { Box, Stack } from '../features/layout/public';\nimport { ToastProvider, useToast } from '../features/toast/public';\nimport { Text } from '../features/typography/public';\nimport { ThemeProvider } from '../theme';\nimport type { ThemeConfig } from '../theme/types';\n\nconst docsThemeConfig: ThemeConfig = {\n id: 'docs',\n name: 'Docs',\n light: { primaryColor: '#2563EB', harmony: 'analogous' },\n dark: { primaryColor: '#60A5FA', harmony: 'analogous' },\n};\n\nexport function FormExample() {\n return (\n <ThemeProvider initialConfig={docsThemeConfig}>\n <Stack gap=\"m\" p=\"l\">\n <Field helperText=\"Use your work email.\" label=\"Email\" required>\n <TextInput placeholder=\"you@example.com\" />\n </Field>\n <Checkbox checked>Accept terms</Checkbox>\n <HelperText emphasis=\"muted\">Looks good.</HelperText>\n </Stack>\n </ThemeProvider>\n );\n}\n\nfunction ToastButton() {\n const { showToast } = useToast();\n return (\n <Button\n onPress={() =>\n showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })\n }\n >\n Show toast\n </Button>\n );\n}\n\nexport function FeedbackExample() {\n return (\n <ThemeProvider initialConfig={docsThemeConfig}>\n <ToastProvider>\n <Stack gap=\"m\" p=\"l\">\n <Tooltip content=\"Helpful contextual information\">\n <Text>Hover for tooltip</Text>\n </Tooltip>\n <ToastButton />\n </Stack>\n </ToastProvider>\n </ThemeProvider>\n );\n}\n\nexport function OverlayExample() {\n const [modalVisible, setModalVisible] = React.useState(false);\n\n return (\n <ThemeProvider initialConfig={docsThemeConfig}>\n <Stack gap=\"m\" p=\"l\">\n <Button onPress={() => setModalVisible(true)}>Open modal</Button>\n <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>\n <Card>\n <Stack gap=\"s\">\n <Text variant=\"label\" weight=\"semiBold\">\n Modal title\n </Text>\n <Text>Modal content</Text>\n </Stack>\n </Card>\n </Modal>\n </Stack>\n </ThemeProvider>\n );\n}\n\nexport function NavigationExample() {\n return (\n <ThemeProvider initialConfig={docsThemeConfig}>\n <Stack gap=\"m\" p=\"l\">\n <Tabs defaultValue=\"account\">\n <TabList>\n <Tab value=\"account\">Account</Tab>\n <Tab disabled value=\"security\">\n Security\n </Tab>\n <Tab value=\"billing\">Billing</Tab>\n </TabList>\n <TabPanel value=\"account\">\n <Text>Account settings</Text>\n </TabPanel>\n <TabPanel value=\"billing\">\n <Text>Billing settings</Text>\n </TabPanel>\n </Tabs>\n <Menu\n actions={[\n { id: 'edit', title: 'Edit' },\n { disabled: true, id: 'archive', title: 'Archive' },\n ]}\n trigger={<Text>Open menu</Text>}\n />\n <Box>\n <Text color=\"success\">Theme overrides can stay semantic.</Text>\n </Box>\n </Stack>\n </ThemeProvider>\n );\n}\n"]}
package/src/examples/DocsExamples.tsx DELETED
@@ -1,122 +0,0 @@
1
- import React from 'react';
2
-
3
- import { Field } from '../components/field';
4
- import { HelperText } from '../components/helper-text';
5
- import { Menu } from '../components/menu';
6
- import { Modal } from '../components/modal';
7
- import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
8
- import { Tooltip } from '../components/tooltip';
9
- import { Button } from '../features/button/public';
10
- import { Card } from '../features/card/public';
11
- import { Checkbox } from '../features/form/checkbox/public';
12
- import { TextInput } from '../features/form/text-input/public';
13
- import { Box, Stack } from '../features/layout/public';
14
- import { ToastProvider, useToast } from '../features/toast/public';
15
- import { Text } from '../features/typography/public';
16
- import { ThemeProvider } from '../theme';
17
- import type { ThemeConfig } from '../theme/types';
18
-
19
- const docsThemeConfig: ThemeConfig = {
20
- id: 'docs',
21
- name: 'Docs',
22
- light: { primaryColor: '#2563EB', harmony: 'analogous' },
23
- dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
24
- };
25
-
26
- export function FormExample() {
27
- return (
28
- <ThemeProvider initialConfig={docsThemeConfig}>
29
- <Stack gap="m" p="l">
30
- <Field helperText="Use your work email." label="Email" required>
31
- <TextInput placeholder="you@example.com" />
32
- </Field>
33
- <Checkbox checked>Accept terms</Checkbox>
34
- <HelperText emphasis="muted">Looks good.</HelperText>
35
- </Stack>
36
- </ThemeProvider>
37
- );
38
- }
39
-
40
- function ToastButton() {
41
- const { showToast } = useToast();
42
- return (
43
- <Button
44
- onPress={() =>
45
- showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })
46
- }
47
- >
48
- Show toast
49
- </Button>
50
- );
51
- }
52
-
53
- export function FeedbackExample() {
54
- return (
55
- <ThemeProvider initialConfig={docsThemeConfig}>
56
- <ToastProvider>
57
- <Stack gap="m" p="l">
58
- <Tooltip content="Helpful contextual information">
59
- <Text>Hover for tooltip</Text>
60
- </Tooltip>
61
- <ToastButton />
62
- </Stack>
63
- </ToastProvider>
64
- </ThemeProvider>
65
- );
66
- }
67
-
68
- export function OverlayExample() {
69
- const [modalVisible, setModalVisible] = React.useState(false);
70
-
71
- return (
72
- <ThemeProvider initialConfig={docsThemeConfig}>
73
- <Stack gap="m" p="l">
74
- <Button onPress={() => setModalVisible(true)}>Open modal</Button>
75
- <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
76
- <Card>
77
- <Stack gap="s">
78
- <Text variant="label" weight="semiBold">
79
- Modal title
80
- </Text>
81
- <Text>Modal content</Text>
82
- </Stack>
83
- </Card>
84
- </Modal>
85
- </Stack>
86
- </ThemeProvider>
87
- );
88
- }
89
-
90
- export function NavigationExample() {
91
- return (
92
- <ThemeProvider initialConfig={docsThemeConfig}>
93
- <Stack gap="m" p="l">
94
- <Tabs defaultValue="account">
95
- <TabList>
96
- <Tab value="account">Account</Tab>
97
- <Tab disabled value="security">
98
- Security
99
- </Tab>
100
- <Tab value="billing">Billing</Tab>
101
- </TabList>
102
- <TabPanel value="account">
103
- <Text>Account settings</Text>
104
- </TabPanel>
105
- <TabPanel value="billing">
106
- <Text>Billing settings</Text>
107
- </TabPanel>
108
- </Tabs>
109
- <Menu
110
- actions={[
111
- { id: 'edit', title: 'Edit' },
112
- { disabled: true, id: 'archive', title: 'Archive' },
113
- ]}
114
- trigger={<Text>Open menu</Text>}
115
- />
116
- <Box>
117
- <Text color="success">Theme overrides can stay semantic.</Text>
118
- </Box>
119
- </Stack>
120
- </ThemeProvider>
121
- );
122
- }