@jobber/components-native 0.116.11 → 0.117.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 +22 -0
- package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md +11 -0
- package/dist/docs/ResponsiveBreakpoint/ResponsiveBreakpoint.md +4 -0
- package/dist/package.json +8 -3
- package/dist/src/unstyledPrimitives/index.js +11 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/src/unstyledPrimitives/index.d.ts +11 -0
- package/package.json +8 -3
- package/src/unstyledPrimitives/index.ts +11 -0
package/README.md
CHANGED
|
@@ -32,6 +32,28 @@ export function MyComponent() {
|
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
+
## Unstyled primitives
|
|
36
|
+
|
|
37
|
+
For advanced/experimental use, Atlantis exposes selected
|
|
38
|
+
[RN Primitives](https://rnprimitives.com/toast/) through
|
|
39
|
+
`@jobber/components-native/unstyledPrimitives`. Prefer styled Atlantis
|
|
40
|
+
components when possible, and reach out to UXF for guidance and support.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Toast } from "@jobber/components-native/unstyledPrimitives";
|
|
44
|
+
|
|
45
|
+
<Toast.Root open={open} onOpenChange={setOpen}>
|
|
46
|
+
<Toast.Title>Saved</Toast.Title>
|
|
47
|
+
<Toast.Description>Your changes were saved.</Toast.Description>
|
|
48
|
+
</Toast.Root>;
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The `Toast` namespace exposes the upstream components and types, including
|
|
52
|
+
`Root`, `Title`, `Description`, `Action`, and `Close`. Atlantis manages the
|
|
53
|
+
dependency version, so product repos do not need to install
|
|
54
|
+
`@rn-primitives/toast` directly. Product teams own styling, positioning, timing,
|
|
55
|
+
and composition; this export does not provide a toast manager or queue.
|
|
56
|
+
|
|
35
57
|
## Setting up with Jest
|
|
36
58
|
|
|
37
59
|
In order to make `@jobber/components-native` work with Jest, you may need to
|
|
@@ -262,6 +262,17 @@ function App() {
|
|
|
262
262
|
}
|
|
263
263
|
```
|
|
264
264
|
|
|
265
|
+
### Active breakpoint (Web Only)
|
|
266
|
+
|
|
267
|
+
On web, `AtlantisThemeContextProvider` also provides the active breakpoint that
|
|
268
|
+
[`useBreakpoints`](/hooks/useBreakpoints) and
|
|
269
|
+
[`useResponsiveValue`](/hooks/useResponsiveValue) read, so apps don't add a
|
|
270
|
+
`BreakpointProvider` themselves. It subscribes to the viewport once, however
|
|
271
|
+
many components use the hooks.
|
|
272
|
+
|
|
273
|
+
Nested providers reuse the breakpoint from the outer provider instead of
|
|
274
|
+
subscribing again.
|
|
275
|
+
|
|
265
276
|
### Creating themed styles with buildThemedStyles (Mobile Only)
|
|
266
277
|
|
|
267
278
|
The `buildThemedStyles` utility is available to help create themed StyleSheets
|
|
@@ -9,6 +9,10 @@ We have 3 different ways to deal with responsive breakpoints in our components.
|
|
|
9
9
|
components responsive depending on the size of its container rather than the
|
|
10
10
|
browser.
|
|
11
11
|
|
|
12
|
+
Use [`useBreakpoints`](/hooks/useBreakpoints) to read the active breakpoint in
|
|
13
|
+
JS, and [`useResponsiveValue`](/hooks/useResponsiveValue) to choose a value per
|
|
14
|
+
breakpoint. Both use the same breakpoint values as the CSS variables.
|
|
15
|
+
|
|
12
16
|
## CSS variables
|
|
13
17
|
|
|
14
18
|
We have 5 CSS breakpoints that you can choose from when styling your components.
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components-native",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.117.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React Native implementation of Atlantis",
|
|
6
6
|
"author": "The Frends",
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
"types": "./dist/types/src/primitives/index.d.ts",
|
|
18
18
|
"default": "./dist/src/primitives/index.js"
|
|
19
19
|
},
|
|
20
|
+
"./unstyledPrimitives": {
|
|
21
|
+
"types": "./dist/types/src/unstyledPrimitives/index.d.ts",
|
|
22
|
+
"default": "./dist/src/unstyledPrimitives/index.js"
|
|
23
|
+
},
|
|
20
24
|
"./meta.json": "./dist/src/utils/meta/meta.json",
|
|
21
25
|
"./dist/src/utils/meta/meta.json": "./dist/src/utils/meta/meta.json",
|
|
22
26
|
"./package.json": "./package.json"
|
|
@@ -53,6 +57,7 @@
|
|
|
53
57
|
"@react-native-picker/picker": "^2.4.10",
|
|
54
58
|
"@rn-primitives/portal": "^1.4.0",
|
|
55
59
|
"@rn-primitives/select": "^1.4.0",
|
|
60
|
+
"@rn-primitives/toast": "^1.5.2",
|
|
56
61
|
"autolinker": "^4.0.0",
|
|
57
62
|
"deepmerge": "^4.2.2",
|
|
58
63
|
"lodash": "^4.18.1",
|
|
@@ -67,7 +72,7 @@
|
|
|
67
72
|
"@babel/runtime": "^7.29.2",
|
|
68
73
|
"@gorhom/bottom-sheet": "^5.2.8",
|
|
69
74
|
"@jobber/design": "0.124.0",
|
|
70
|
-
"@jobber/hooks": "2.
|
|
75
|
+
"@jobber/hooks": "2.22.0",
|
|
71
76
|
"@react-native-community/datetimepicker": "^8.4.5",
|
|
72
77
|
"@react-native/babel-preset": "^0.82.1",
|
|
73
78
|
"@storybook/addon-a11y": "10.3.5",
|
|
@@ -118,5 +123,5 @@
|
|
|
118
123
|
"react-native-screens": ">=4.18.0",
|
|
119
124
|
"react-native-svg": ">=12.0.0"
|
|
120
125
|
},
|
|
121
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "27ecbc65e3a2f1d43207a2e3fc0e754bac273be2"
|
|
122
127
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Unstyled RN Primitives for advanced/experimental use when Atlantis does not
|
|
3
|
+
* provide the component or API a product needs. Prefer styled Atlantis components
|
|
4
|
+
* when possible, and reach out to UXF for guidance and support.
|
|
5
|
+
*
|
|
6
|
+
* Atlantis manages the dependency version; consumers own styling, positioning,
|
|
7
|
+
* timing, and composition. These exports preserve the upstream API.
|
|
8
|
+
*
|
|
9
|
+
* RN Primitives docs: https://rnprimitives.com/toast/
|
|
10
|
+
*/
|
|
11
|
+
export * as Toast from "@rn-primitives/toast";
|