@astacinco/rn-primitives 0.1.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.
Files changed (38) hide show
  1. package/README.md +195 -0
  2. package/__tests__/Button.test.tsx +114 -0
  3. package/__tests__/Card.test.tsx +73 -0
  4. package/__tests__/Container.test.tsx +71 -0
  5. package/__tests__/Divider.test.tsx +41 -0
  6. package/__tests__/Input.test.tsx +69 -0
  7. package/__tests__/Stack.test.tsx +85 -0
  8. package/__tests__/Text.test.tsx +64 -0
  9. package/__tests__/__snapshots__/Button.test.tsx.snap +143 -0
  10. package/__tests__/__snapshots__/Card.test.tsx.snap +47 -0
  11. package/__tests__/__snapshots__/Container.test.tsx.snap +51 -0
  12. package/__tests__/__snapshots__/Divider.test.tsx.snap +37 -0
  13. package/__tests__/__snapshots__/Input.test.tsx.snap +73 -0
  14. package/__tests__/__snapshots__/Stack.test.tsx.snap +101 -0
  15. package/__tests__/__snapshots__/Text.test.tsx.snap +39 -0
  16. package/package.json +47 -0
  17. package/src/Button/Button.tsx +119 -0
  18. package/src/Button/index.ts +2 -0
  19. package/src/Button/types.ts +43 -0
  20. package/src/Card/Card.tsx +62 -0
  21. package/src/Card/index.ts +2 -0
  22. package/src/Card/types.ts +21 -0
  23. package/src/Container/Container.tsx +42 -0
  24. package/src/Container/index.ts +2 -0
  25. package/src/Container/types.ts +23 -0
  26. package/src/Divider/Divider.tsx +40 -0
  27. package/src/Divider/index.ts +2 -0
  28. package/src/Divider/types.ts +21 -0
  29. package/src/Input/Input.tsx +103 -0
  30. package/src/Input/index.ts +2 -0
  31. package/src/Input/types.ts +23 -0
  32. package/src/Stack/Stack.tsx +77 -0
  33. package/src/Stack/index.ts +2 -0
  34. package/src/Stack/types.ts +30 -0
  35. package/src/Text/Text.tsx +50 -0
  36. package/src/Text/index.ts +2 -0
  37. package/src/Text/types.ts +21 -0
  38. package/src/index.ts +51 -0
package/__tests__/Text.test.tsx ADDED
@@ -0,0 +1,64 @@
1
+ import React from 'react';
2
+ import { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';
3
+ import { Text } from '../src/Text';
4
+
5
+ describe('Text', () => {
6
+ // Snapshot tests for both themes
7
+ createThemeSnapshot(<Text testID="text">Hello World</Text>);
8
+
9
+ describe('variants', () => {
10
+ it('renders_title_variant', () => {
11
+ const { getByTestId } = renderWithTheme(
12
+ <Text variant="title" testID="text">Title</Text>
13
+ );
14
+ expect(getByTestId('text')).toBeTruthy();
15
+ });
16
+
17
+ it('renders_subtitle_variant', () => {
18
+ const { getByTestId } = renderWithTheme(
19
+ <Text variant="subtitle" testID="text">Subtitle</Text>
20
+ );
21
+ expect(getByTestId('text')).toBeTruthy();
22
+ });
23
+
24
+ it('renders_body_variant_byDefault', () => {
25
+ const { getByTestId } = renderWithTheme(
26
+ <Text testID="text">Body</Text>
27
+ );
28
+ expect(getByTestId('text')).toBeTruthy();
29
+ });
30
+
31
+ it('renders_caption_variant', () => {
32
+ const { getByTestId } = renderWithTheme(
33
+ <Text variant="caption" testID="text">Caption</Text>
34
+ );
35
+ expect(getByTestId('text')).toBeTruthy();
36
+ });
37
+
38
+ it('renders_label_variant', () => {
39
+ const { getByTestId } = renderWithTheme(
40
+ <Text variant="label" testID="text">Label</Text>
41
+ );
42
+ expect(getByTestId('text')).toBeTruthy();
43
+ });
44
+ });
45
+
46
+ describe('theming', () => {
47
+ it('uses_different_colors_inDarkMode', () => {
48
+ const lightResult = renderWithTheme(<Text testID="text">Test</Text>, 'light');
49
+ const darkResult = renderWithTheme(<Text testID="text">Test</Text>, 'dark');
50
+
51
+ const lightColor = lightResult.getByTestId('text').props.style[1].color;
52
+ const darkColor = darkResult.getByTestId('text').props.style[1].color;
53
+
54
+ expect(lightColor).not.toBe(darkColor);
55
+ });
56
+ });
57
+
58
+ it('accepts_custom_color', () => {
59
+ const { getByTestId } = renderWithTheme(
60
+ <Text color="#FF0000" testID="text">Red Text</Text>
61
+ );
62
+ expect(getByTestId('text').props.style[1].color).toBe('#FF0000');
63
+ });
64
+ });
package/__tests__/__snapshots__/Button.test.tsx.snap ADDED
@@ -0,0 +1,143 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Button matches dark theme snapshot 1`] = `
4
+ <View
5
+ accessibilityState={
6
+ {
7
+ "busy": undefined,
8
+ "checked": undefined,
9
+ "disabled": false,
10
+ "expanded": undefined,
11
+ "selected": undefined,
12
+ }
13
+ }
14
+ accessibilityValue={
15
+ {
16
+ "max": undefined,
17
+ "min": undefined,
18
+ "now": undefined,
19
+ "text": undefined,
20
+ }
21
+ }
22
+ accessible={true}
23
+ collapsable={false}
24
+ focusable={true}
25
+ onBlur={[Function]}
26
+ onClick={[Function]}
27
+ onFocus={[Function]}
28
+ onResponderGrant={[Function]}
29
+ onResponderMove={[Function]}
30
+ onResponderRelease={[Function]}
31
+ onResponderTerminate={[Function]}
32
+ onResponderTerminationRequest={[Function]}
33
+ onStartShouldSetResponder={[Function]}
34
+ style={
35
+ [
36
+ {
37
+ "alignItems": "center",
38
+ "borderRadius": 8,
39
+ "flexDirection": "row",
40
+ "justifyContent": "center",
41
+ },
42
+ {
43
+ "backgroundColor": "#818CF8",
44
+ "borderColor": undefined,
45
+ "borderWidth": 0,
46
+ "opacity": 1,
47
+ "paddingHorizontal": 20,
48
+ "paddingVertical": 12,
49
+ },
50
+ undefined,
51
+ ]
52
+ }
53
+ testID="button"
54
+ >
55
+ <Text
56
+ style={
57
+ [
58
+ {
59
+ "fontWeight": "600",
60
+ "textAlign": "center",
61
+ },
62
+ {
63
+ "color": "#0A0A0A",
64
+ "fontSize": 16,
65
+ },
66
+ ]
67
+ }
68
+ >
69
+ Click Me
70
+ </Text>
71
+ </View>
72
+ `;
73
+
74
+ exports[`Button matches light theme snapshot 1`] = `
75
+ <View
76
+ accessibilityState={
77
+ {
78
+ "busy": undefined,
79
+ "checked": undefined,
80
+ "disabled": false,
81
+ "expanded": undefined,
82
+ "selected": undefined,
83
+ }
84
+ }
85
+ accessibilityValue={
86
+ {
87
+ "max": undefined,
88
+ "min": undefined,
89
+ "now": undefined,
90
+ "text": undefined,
91
+ }
92
+ }
93
+ accessible={true}
94
+ collapsable={false}
95
+ focusable={true}
96
+ onBlur={[Function]}
97
+ onClick={[Function]}
98
+ onFocus={[Function]}
99
+ onResponderGrant={[Function]}
100
+ onResponderMove={[Function]}
101
+ onResponderRelease={[Function]}
102
+ onResponderTerminate={[Function]}
103
+ onResponderTerminationRequest={[Function]}
104
+ onStartShouldSetResponder={[Function]}
105
+ style={
106
+ [
107
+ {
108
+ "alignItems": "center",
109
+ "borderRadius": 8,
110
+ "flexDirection": "row",
111
+ "justifyContent": "center",
112
+ },
113
+ {
114
+ "backgroundColor": "#6366F1",
115
+ "borderColor": undefined,
116
+ "borderWidth": 0,
117
+ "opacity": 1,
118
+ "paddingHorizontal": 20,
119
+ "paddingVertical": 12,
120
+ },
121
+ undefined,
122
+ ]
123
+ }
124
+ testID="button"
125
+ >
126
+ <Text
127
+ style={
128
+ [
129
+ {
130
+ "fontWeight": "600",
131
+ "textAlign": "center",
132
+ },
133
+ {
134
+ "color": "#FFFFFF",
135
+ "fontSize": 16,
136
+ },
137
+ ]
138
+ }
139
+ >
140
+ Click Me
141
+ </Text>
142
+ </View>
143
+ `;
package/__tests__/__snapshots__/Card.test.tsx.snap ADDED
@@ -0,0 +1,47 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Card matches dark theme snapshot 1`] = `
4
+ <View
5
+ style={
6
+ [
7
+ {
8
+ "borderRadius": 12,
9
+ },
10
+ {
11
+ "backgroundColor": "#1A1A1A",
12
+ "borderWidth": 0,
13
+ "padding": 16,
14
+ },
15
+ undefined,
16
+ ]
17
+ }
18
+ testID="card"
19
+ >
20
+ <Text>
21
+ Card content
22
+ </Text>
23
+ </View>
24
+ `;
25
+
26
+ exports[`Card matches light theme snapshot 1`] = `
27
+ <View
28
+ style={
29
+ [
30
+ {
31
+ "borderRadius": 12,
32
+ },
33
+ {
34
+ "backgroundColor": "#FFFFFF",
35
+ "borderWidth": 0,
36
+ "padding": 16,
37
+ },
38
+ undefined,
39
+ ]
40
+ }
41
+ testID="card"
42
+ >
43
+ <Text>
44
+ Card content
45
+ </Text>
46
+ </View>
47
+ `;
package/__tests__/__snapshots__/Container.test.tsx.snap ADDED
@@ -0,0 +1,51 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Container matches dark theme snapshot 1`] = `
4
+ <View
5
+ style={
6
+ [
7
+ {
8
+ "flex": 1,
9
+ },
10
+ {
11
+ "alignSelf": undefined,
12
+ "backgroundColor": "#0A0A0A",
13
+ "maxWidth": undefined,
14
+ "padding": 16,
15
+ "width": undefined,
16
+ },
17
+ undefined,
18
+ ]
19
+ }
20
+ testID="container"
21
+ >
22
+ <Text>
23
+ Content
24
+ </Text>
25
+ </View>
26
+ `;
27
+
28
+ exports[`Container matches light theme snapshot 1`] = `
29
+ <View
30
+ style={
31
+ [
32
+ {
33
+ "flex": 1,
34
+ },
35
+ {
36
+ "alignSelf": undefined,
37
+ "backgroundColor": "#FFFFFF",
38
+ "maxWidth": undefined,
39
+ "padding": 16,
40
+ "width": undefined,
41
+ },
42
+ undefined,
43
+ ]
44
+ }
45
+ testID="container"
46
+ >
47
+ <Text>
48
+ Content
49
+ </Text>
50
+ </View>
51
+ `;
package/__tests__/__snapshots__/Divider.test.tsx.snap ADDED
@@ -0,0 +1,37 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Divider matches dark theme snapshot 1`] = `
4
+ <View
5
+ style={
6
+ [
7
+ {
8
+ "width": "100%",
9
+ },
10
+ {
11
+ "backgroundColor": "#404040",
12
+ "height": 1,
13
+ },
14
+ undefined,
15
+ ]
16
+ }
17
+ testID="divider"
18
+ />
19
+ `;
20
+
21
+ exports[`Divider matches light theme snapshot 1`] = `
22
+ <View
23
+ style={
24
+ [
25
+ {
26
+ "width": "100%",
27
+ },
28
+ {
29
+ "backgroundColor": "#E5E5E5",
30
+ "height": 1,
31
+ },
32
+ undefined,
33
+ ]
34
+ }
35
+ testID="divider"
36
+ />
37
+ `;
package/__tests__/__snapshots__/Input.test.tsx.snap ADDED
@@ -0,0 +1,73 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Input matches dark theme snapshot 1`] = `
4
+ <View
5
+ style={
6
+ {
7
+ "width": "100%",
8
+ }
9
+ }
10
+ >
11
+ <TextInput
12
+ editable={true}
13
+ onBlur={[Function]}
14
+ onFocus={[Function]}
15
+ placeholder="Enter text"
16
+ placeholderTextColor="#737373"
17
+ style={
18
+ [
19
+ {
20
+ "borderRadius": 8,
21
+ "borderWidth": 1,
22
+ },
23
+ {
24
+ "backgroundColor": "#0A0A0A",
25
+ "borderColor": "#404040",
26
+ "color": "#FAFAFA",
27
+ "fontSize": 16,
28
+ "opacity": 1,
29
+ "padding": 8,
30
+ },
31
+ undefined,
32
+ ]
33
+ }
34
+ testID="input"
35
+ />
36
+ </View>
37
+ `;
38
+
39
+ exports[`Input matches light theme snapshot 1`] = `
40
+ <View
41
+ style={
42
+ {
43
+ "width": "100%",
44
+ }
45
+ }
46
+ >
47
+ <TextInput
48
+ editable={true}
49
+ onBlur={[Function]}
50
+ onFocus={[Function]}
51
+ placeholder="Enter text"
52
+ placeholderTextColor="#999999"
53
+ style={
54
+ [
55
+ {
56
+ "borderRadius": 8,
57
+ "borderWidth": 1,
58
+ },
59
+ {
60
+ "backgroundColor": "#FFFFFF",
61
+ "borderColor": "#E5E5E5",
62
+ "color": "#1A1A1A",
63
+ "fontSize": 16,
64
+ "opacity": 1,
65
+ "padding": 8,
66
+ },
67
+ undefined,
68
+ ]
69
+ }
70
+ testID="input"
71
+ />
72
+ </View>
73
+ `;
package/__tests__/__snapshots__/Stack.test.tsx.snap ADDED
@@ -0,0 +1,101 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`HStack HStack matches dark theme snapshot 1`] = `
4
+ <View
5
+ style={
6
+ [
7
+ {},
8
+ {
9
+ "alignItems": "stretch",
10
+ "flexDirection": "row",
11
+ "gap": 8,
12
+ "justifyContent": "flex-start",
13
+ },
14
+ undefined,
15
+ ]
16
+ }
17
+ testID="hstack"
18
+ >
19
+ <Text>
20
+ Left
21
+ </Text>
22
+ <Text>
23
+ Right
24
+ </Text>
25
+ </View>
26
+ `;
27
+
28
+ exports[`HStack HStack matches light theme snapshot 1`] = `
29
+ <View
30
+ style={
31
+ [
32
+ {},
33
+ {
34
+ "alignItems": "stretch",
35
+ "flexDirection": "row",
36
+ "gap": 8,
37
+ "justifyContent": "flex-start",
38
+ },
39
+ undefined,
40
+ ]
41
+ }
42
+ testID="hstack"
43
+ >
44
+ <Text>
45
+ Left
46
+ </Text>
47
+ <Text>
48
+ Right
49
+ </Text>
50
+ </View>
51
+ `;
52
+
53
+ exports[`VStack VStack matches dark theme snapshot 1`] = `
54
+ <View
55
+ style={
56
+ [
57
+ {},
58
+ {
59
+ "alignItems": "stretch",
60
+ "flexDirection": "column",
61
+ "gap": 16,
62
+ "justifyContent": "flex-start",
63
+ },
64
+ undefined,
65
+ ]
66
+ }
67
+ testID="vstack"
68
+ >
69
+ <Text>
70
+ Item 1
71
+ </Text>
72
+ <Text>
73
+ Item 2
74
+ </Text>
75
+ </View>
76
+ `;
77
+
78
+ exports[`VStack VStack matches light theme snapshot 1`] = `
79
+ <View
80
+ style={
81
+ [
82
+ {},
83
+ {
84
+ "alignItems": "stretch",
85
+ "flexDirection": "column",
86
+ "gap": 16,
87
+ "justifyContent": "flex-start",
88
+ },
89
+ undefined,
90
+ ]
91
+ }
92
+ testID="vstack"
93
+ >
94
+ <Text>
95
+ Item 1
96
+ </Text>
97
+ <Text>
98
+ Item 2
99
+ </Text>
100
+ </View>
101
+ `;
package/__tests__/__snapshots__/Text.test.tsx.snap ADDED
@@ -0,0 +1,39 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Text matches dark theme snapshot 1`] = `
4
+ <Text
5
+ style={
6
+ [
7
+ {},
8
+ {
9
+ "color": "#FAFAFA",
10
+ "fontFamily": "System",
11
+ "fontSize": 16,
12
+ },
13
+ undefined,
14
+ ]
15
+ }
16
+ testID="text"
17
+ >
18
+ Hello World
19
+ </Text>
20
+ `;
21
+
22
+ exports[`Text matches light theme snapshot 1`] = `
23
+ <Text
24
+ style={
25
+ [
26
+ {},
27
+ {
28
+ "color": "#1A1A1A",
29
+ "fontFamily": "System",
30
+ "fontSize": 16,
31
+ },
32
+ undefined,
33
+ ]
34
+ }
35
+ testID="text"
36
+ >
37
+ Hello World
38
+ </Text>
39
+ `;
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@astacinco/rn-primitives",
3
+ "version": "0.1.0",
4
+ "description": "Theme-aware UI primitives for React Native",
5
+ "main": "src/index.ts",
6
+ "types": "src/index.ts",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/jrudydev/rn-toolkit.git",
10
+ "directory": "packages/primitives"
11
+ },
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "author": "Spark Labs <hello@sparklabs.dev>",
16
+ "homepage": "https://github.com/jrudydev/rn-toolkit#readme",
17
+ "scripts": {
18
+ "build": "tsc",
19
+ "test": "jest",
20
+ "lint": "eslint src --ext .ts,.tsx"
21
+ },
22
+ "peerDependencies": {
23
+ "react": ">=18.0.0",
24
+ "react-native": ">=0.72.0"
25
+ },
26
+ "dependencies": {
27
+ "@astacinco/rn-theming": "*"
28
+ },
29
+ "devDependencies": {
30
+ "@astacinco/rn-testing": "*",
31
+ "@testing-library/react-native": "^12.4.3",
32
+ "@types/react": "^18.2.48",
33
+ "react": "18.2.0",
34
+ "react-native": "0.73.4",
35
+ "react-test-renderer": "18.2.0",
36
+ "typescript": "^5.3.3"
37
+ },
38
+ "keywords": [
39
+ "react-native",
40
+ "components",
41
+ "ui",
42
+ "primitives",
43
+ "theme",
44
+ "design-system"
45
+ ],
46
+ "license": "MIT"
47
+ }