@utilitywarehouse/hearth-react-native 0.28.4 → 0.28.6

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 (10) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/.turbo/turbo-lint.log +13 -13
  3. package/CHANGELOG.md +12 -0
  4. package/build/components/Banner/Banner.js +3 -1
  5. package/build/components/Banner/BannerIllustration.js +4 -9
  6. package/package.json +5 -5
  7. package/src/components/Banner/Banner.stories.tsx +2 -6
  8. package/src/components/Banner/Banner.tsx +3 -1
  9. package/src/components/Banner/BannerIllustration.tsx +4 -9
  10. package/src/components/Icon/Icon.docs.mdx +13 -10
package/.turbo/turbo-build.log CHANGED
@@ -1,4 +1,4 @@
1
1
 
2
- > @utilitywarehouse/hearth-react-native@0.28.4 build /home/runner/work/hearth/hearth/packages/react-native
2
+ > @utilitywarehouse/hearth-react-native@0.28.6 build /home/runner/work/hearth/hearth/packages/react-native
3
3
  > tsc
4
4
 
package/.turbo/turbo-lint.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @utilitywarehouse/hearth-react-native@0.28.4 lint /home/runner/work/hearth/hearth/packages/react-native
2
+ > @utilitywarehouse/hearth-react-native@0.28.6 lint /home/runner/work/hearth/hearth/packages/react-native
3
3
  > TIMING=1 eslint .
4
4
 
5
5
 
@@ -54,15 +54,15 @@
54
54
 
55
55
  ✖ 23 problems (0 errors, 23 warnings)
56
56
 
57
- Rule | Time (ms) | Relative
58
- :----------------------------------------|----------:|--------:
59
- @typescript-eslint/no-unused-vars | 1479.249 | 61.1%
60
- react-hooks/exhaustive-deps | 101.901 | 4.2%
61
- no-global-assign | 87.369 | 3.6%
62
- react-hooks/rules-of-hooks | 73.797 | 3.0%
63
- no-unexpected-multiline | 55.808 | 2.3%
64
- no-misleading-character-class | 45.927 | 1.9%
65
- @typescript-eslint/ban-ts-comment | 37.234 | 1.5%
66
- @typescript-eslint/no-unused-expressions | 35.516 | 1.5%
67
- no-useless-escape | 29.525 | 1.2%
68
- no-control-regex | 28.394 | 1.2%
57
+ Rule | Time (ms) | Relative
58
+ :---------------------------------|----------:|--------:
59
+ @typescript-eslint/no-unused-vars | 1617.178 | 58.4%
60
+ react-hooks/exhaustive-deps | 164.271 | 5.9%
61
+ react-hooks/rules-of-hooks | 89.591 | 3.2%
62
+ no-global-assign | 84.280 | 3.0%
63
+ no-unexpected-multiline | 56.606 | 2.0%
64
+ no-loss-of-precision | 56.417 | 2.0%
65
+ no-misleading-character-class | 48.013 | 1.7%
66
+ no-useless-escape | 38.194 | 1.4%
67
+ no-regex-spaces | 36.638 | 1.3%
68
+ @typescript-eslint/ban-ts-comment | 35.602 | 1.3%
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utilitywarehouse/hearth-react-native
2
2
 
3
+ ## 0.28.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1050](https://github.com/utilitywarehouse/hearth/pull/1050) [`13d2cca`](https://github.com/utilitywarehouse/hearth/commit/13d2ccab3abda60a35202847e3895017496c4dcf) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Expand react peer dependency to allow any React 19.x version for compatibility with all React 19 releases.
8
+
9
+ ## 0.28.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [#1045](https://github.com/utilitywarehouse/hearth/pull/1045) [`3778061`](https://github.com/utilitywarehouse/hearth/commit/37780613890221368edb74c0ce83b8bf3d03e5b3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `BannerIllustration` now stays centered in vertical banners and no longer inherits image border styling or horizontal stretching.
14
+
3
15
  ## 0.28.4
4
16
 
5
17
  ### Patch Changes
package/build/components/Banner/Banner.js CHANGED
@@ -130,7 +130,9 @@ const styles = StyleSheet.create(theme => ({
130
130
  variants: {
131
131
  direction: {
132
132
  horizontal: {
133
- flex: 1,
133
+ _web: {
134
+ flex: 1,
135
+ },
134
136
  },
135
137
  vertical: {},
136
138
  },
package/build/components/Banner/BannerIllustration.js CHANGED
@@ -12,14 +12,14 @@ const BannerIllustration = (props) => {
12
12
  }
13
13
  return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...props, style: [styles.image, props.style] }) }));
14
14
  };
15
- const styles = StyleSheet.create(theme => ({
15
+ const styles = StyleSheet.create({
16
16
  media: {
17
17
  flexShrink: 0,
18
18
  variants: {
19
19
  direction: {
20
20
  horizontal: {},
21
21
  vertical: {
22
- alignSelf: 'flex-start',
22
+ alignSelf: 'center',
23
23
  },
24
24
  },
25
25
  },
@@ -29,16 +29,11 @@ const styles = StyleSheet.create(theme => ({
29
29
  variants: {
30
30
  direction: {
31
31
  horizontal: {},
32
- vertical: {
33
- width: '100%',
34
- },
32
+ vertical: {},
35
33
  },
36
34
  },
37
35
  },
38
36
  image: {
39
- borderRadius: theme.borderRadius.md,
40
- borderColor: theme.color.border.strong,
41
- borderWidth: theme.borderWidth[1],
42
37
  variants: {
43
38
  direction: {
44
39
  horizontal: { width: 160, height: 95 },
@@ -49,5 +44,5 @@ const styles = StyleSheet.create(theme => ({
49
44
  },
50
45
  },
51
46
  },
52
- }));
47
+ });
53
48
  export default BannerIllustration;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@utilitywarehouse/hearth-react-native",
3
- "version": "0.28.4",
3
+ "version": "0.28.6",
4
4
  "description": "Utility Warehouse React Native UI library",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -63,11 +63,11 @@
63
63
  "@utilitywarehouse/hearth-tokens": "^0.2.4"
64
64
  },
65
65
  "peerDependencies": {
66
- "@gorhom/bottom-sheet": "^5.0.0",
67
- "@utilitywarehouse/hearth-react-native-icons": "0.8.0",
68
- "react": ">=17 || ^18.0.0 || ^19.0.0",
66
+ "@gorhom/bottom-sheet": ">=5.0.0",
67
+ "@utilitywarehouse/hearth-react-native-icons": ">=0.8.0",
68
+ "react": ">=17 || ^18.x || ^19.x",
69
69
  "react-native": ">=0.77",
70
- "react-native-gesture-handler": ">=2.0.0",
70
+ "react-native-gesture-handler": ">=2",
71
71
  "react-native-reanimated": "3.x || ^4.x",
72
72
  "react-native-svg": ">=13.4.0",
73
73
  "react-native-unistyles": ">=3.0.0",
package/src/components/Banner/Banner.stories.tsx CHANGED
@@ -96,11 +96,7 @@ type Story = StoryObj<typeof meta>;
96
96
 
97
97
  export const Playground: Story = {
98
98
  render: (args: any) => {
99
- return (
100
- <View style={{ width: 400 }}>
101
- <Banner {...args} icon={ElectricityMediumIcon} />
102
- </View>
103
- );
99
+ return <Banner {...args} icon={ElectricityMediumIcon} />;
104
100
  },
105
101
  };
106
102
 
@@ -138,7 +134,7 @@ export const WithIcon: Story = {
138
134
  export const WithIllustration: Story = {
139
135
  render: () => {
140
136
  return (
141
- <View style={{ width: 400 }}>
137
+ <View>
142
138
  <Flex spacing="lg" direction="column">
143
139
  <Banner
144
140
  illustration={
package/src/components/Banner/Banner.tsx CHANGED
@@ -238,7 +238,9 @@ const styles = StyleSheet.create(theme => ({
238
238
  variants: {
239
239
  direction: {
240
240
  horizontal: {
241
- flex: 1,
241
+ _web: {
242
+ flex: 1,
243
+ },
242
244
  },
243
245
  vertical: {},
244
246
  },
package/src/components/Banner/BannerIllustration.tsx CHANGED
@@ -21,14 +21,14 @@ const BannerIllustration = (props: ImageProps | ThemedImageProps) => {
21
21
  );
22
22
  };
23
23
 
24
- const styles = StyleSheet.create(theme => ({
24
+ const styles = StyleSheet.create({
25
25
  media: {
26
26
  flexShrink: 0,
27
27
  variants: {
28
28
  direction: {
29
29
  horizontal: {},
30
30
  vertical: {
31
- alignSelf: 'flex-start',
31
+ alignSelf: 'center',
32
32
  },
33
33
  },
34
34
  },
@@ -38,16 +38,11 @@ const styles = StyleSheet.create(theme => ({
38
38
  variants: {
39
39
  direction: {
40
40
  horizontal: {},
41
- vertical: {
42
- width: '100%',
43
- },
41
+ vertical: {},
44
42
  },
45
43
  },
46
44
  },
47
45
  image: {
48
- borderRadius: theme.borderRadius.md,
49
- borderColor: theme.color.border.strong,
50
- borderWidth: theme.borderWidth[1],
51
46
  variants: {
52
47
  direction: {
53
48
  horizontal: { width: 160, height: 95 },
@@ -58,6 +53,6 @@ const styles = StyleSheet.create(theme => ({
58
53
  },
59
54
  },
60
55
  },
61
- }));
56
+ });
62
57
 
63
58
  export default BannerIllustration;
package/src/components/Icon/Icon.docs.mdx CHANGED
@@ -34,7 +34,9 @@ Icons are often used to enhance the usability and accessibility of digital produ
34
34
  You can either use the React Native components directy from our `@utilitywarehouse/hearth-react-native-icons` package or use the `Icon`
35
35
  component from our `@utilitywarehouse/hearth-react-native` package to render the icons with utility props such as `color`.
36
36
 
37
- The following example shows how to use the icons directly from the `@utilitywarehouse/hearth-react-native-icons` package.
37
+ We reccomend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
38
+ The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
39
+ light and dark mode colors from the theme.
38
40
 
39
41
  <UsageWrap>
40
42
  <Center>
@@ -60,16 +62,16 @@ const MyComponent = () => {
60
62
  const { color } = useTheme();
61
63
  return (
62
64
  <Flex spacing="lg" direction="row" alignItems="center">
63
- <ElectricityMediumIcon color={color.energyBlue['700']} />
64
- <MobileMediumIcon color={color.mobileRose['700']} />
65
- <BroadbandMediumIcon color={color.broadbandGreen['700']} />
66
- <InsuranceMediumIcon color={color.insuranceOrange['700']} />
65
+ <Icon as={ElectricityMediumIcon} color={color.energyBlue['700']} />
66
+ <Icon as={MobileMediumIcon} color={color.mobileRose['700']} />
67
+ <Icon as={BroadbandMediumIcon} color={color.broadbandGreen['700']} />
68
+ <Icon as={InsuranceMediumIcon} color={color.insuranceOrange['700']} />
67
69
  </Flex>
68
70
  );
69
71
  };
70
72
  ```
71
73
 
72
- Or you can use the `Icon` component to render the icons.
74
+ Or you can use the icons directly from the `@utilitywarehouse/hearth-react-native-icons` package. Make sure you handle the color prop correctly, including light and dark modes.
73
75
 
74
76
  ```jsx
75
77
  import { Flex, Icon, color } from '@utilitywarehouse/hearth-react-native';
@@ -81,12 +83,13 @@ import {
81
83
  } from '@utilitywarehouse/hearth-react-native-icons';
82
84
 
83
85
  const MyComponent = () => {
86
+ const { color } = useTheme();
84
87
  return (
85
88
  <Flex spacing="lg" direction="row" alignItems="center">
86
- <Icon as={ElectricityMediumIcon} color="energyBlue700" />
87
- <Icon as={MobileMediumIcon} color="mobileRose700" />
88
- <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />
89
- <Icon as={InsuranceMediumIcon} color="insuranceOrange700" />
89
+ <ElectricityMediumIcon color={color.energyBlue['700']} />
90
+ <MobileMediumIcon color={color.mobileRose['700']} />
91
+ <BroadbandMediumIcon color={color.broadbandGreen['700']} />
92
+ <InsuranceMediumIcon color={color.insuranceOrange['700']} />
90
93
  </Flex>
91
94
  );
92
95
  };