@widergy/mobile-ui 1.15.1 → 1.16.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.16.1](https://github.com/widergy/mobile-ui/compare/v1.16.0...v1.16.1) (2024-07-31)
+
+
+### Bug Fixes
+
+* dependencies fixes ([#326](https://github.com/widergy/mobile-ui/issues/326)) ([69444ae](https://github.com/widergy/mobile-ui/commit/69444aeebe68a79d88a9c0d2373d3c0c4c963479))
+
+# [1.16.0](https://github.com/widergy/mobile-ui/compare/v1.15.1...v1.16.0) (2024-07-31)
+
+
+### Features
+
+* internal color and widergy icons added ([#324](https://github.com/widergy/mobile-ui/issues/324)) ([a1974cf](https://github.com/widergy/mobile-ui/commit/a1974cfd023990bb82198b2cb2bc821ecd44f3a3))
+
 ## [1.15.1](https://github.com/widergy/mobile-ui/compare/v1.15.0...v1.15.1) (2024-07-31)
 
 

package/lib/components/UTIcon/README.md

@@ -13,13 +13,14 @@ For a comprehensive list of available icons and their design specifications, ref
 
 ## Props
 
-| Name       | Type   | Default | Description                                         |
-| ---------- | ------ | ------- | --------------------------------------------------- |
-| colorTheme | string | 'dark'  | The icon color, must be from the theme palette.     |
-| name       | string |         | The name of the icon from the Tabler Icons library. |
-| shade      | string |         | The shade of the color theme to use.                |
-| size       | number |         | The size of the icon.                               |
-| style      | object |         | Custom styles to apply to the icon.                 |
+| Name       | Type   | Default | Description                                             |
+| ---------- | ------ | ------- | ------------------------------------------------------- |
+| colorTheme | string | 'dark'  | The icon color, must be from the theme palette.         |
+| fillTheme  | string |         | The internal fill color must be from the theme palette. |
+| name       | string |         | The name of the icon from the Tabler Icons library.     |
+| shade      | string |         | The shade of the color theme to use.                    |
+| size       | number |         | The size of the icon.                                   |
+| style      | object |         | Custom styles to apply to the icon.                     |
 
 ## Icon Names
 
@@ -39,6 +40,11 @@ Example:
 
 Exceptions to these rules may exist.
 
+###### Custom Widergy icons are now available.
+
+The convection to use is: Energy + Icon + Name.
+Example: EnergyIconDelivery
+
 ## Color Themes
 
 The `colorTheme` prop must be one of these values:
@@ -72,6 +78,39 @@ For `gray`: `shade04`
 For `light`: `shade01`
 For all others: `shade05`
 
+## Fill Theme (opcional)
+
+The `fillTheme` prop could be one of these values:
+
+- `accent`
+- `dark`
+- `error`
+- `gray`
+- `information`
+- `light`
+- `negative`
+- `neutral`
+- `success`
+- `warning`
+
+Clarifications:
+
+- Note that not all icons look good with an internal fill color.
+
+## Fill Shade  (opcional)
+
+The `fillShade` prop must be one of these:
+
+- `01`
+- `02`
+- `03`
+- `04`
+- `05`
+
+Clarifications:
+
+- The default shade is '02' (if 'fillTheme' exists).
+
 ## Usage
 
 ```javascript

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconCar.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="icon icon-tabler icons-tabler-outline icon-tabler-car"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
+  <path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconCart.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21C6.53043 21 7.03914 20.7893 7.41421 20.4142C7.78929 20.0391 8 19.5304 8 19C8 18.4696 7.78929 17.9609 7.41421 17.5858C7.03914 17.2107 6.53043 17 6 17C5.46957 17 4.96086 17.2107 4.58579 17.5858C4.21071 17.9609 4 18.4696 4 19Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 19C15 19.5304 15.2107 20.0391 15.5858 20.4142C15.9609 20.7893 16.4696 21 17 21C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19C19 18.4696 18.7893 17.9609 18.4142 17.5858C18.0391 17.2107 17.5304 17 17 17C16.4696 17 15.9609 17.2107 15.5858 17.5858C15.2107 17.9609 15 18.4696 15 19Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 5L20 6L19 13H6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 3H6V17H17" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.02 2.84016L3.63 7.04016C2.73 7.74016 2 9.23016 2 10.3602V17.7702C2 20.0902 3.89 21.9902 6.21 21.9902H17.79C20.11 21.9902 22 20.0902 22 17.7802V10.5002C22 9.29016 21.19 7.74016 20.2 7.05016L14.02 2.72016C12.62 1.74016 10.37 1.79016 9.02 2.84016Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17.9902V14.9902V17.9902Z" />
+<path d="M12 17.9902V14.9902" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconTruck.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 64 64" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 45.3333V13.3333H34.6667V16H48L56 29.3333V45.3333H52C49.8658 49.5691 48.3837 50.634 45.3333 50.6666C41.734 50.2423 40.547 49.0674 40 45.3333H24C23.6323 49.2151 22.3927 50.3076 18.6667 50.6666C14.9687 49.8222 13.6336 48.7628 13.3333 45.3333H8Z" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3333 45.3333C13.3333 46.7478 13.8952 48.1044 14.8954 49.1046C15.8956 50.1048 17.2522 50.6667 18.6667 50.6667C20.0812 50.6667 21.4377 50.1048 22.4379 49.1046C23.4381 48.1044 24 46.7478 24 45.3333C24 43.9188 23.4381 42.5623 22.4379 41.5621C21.4377 40.5619 20.0812 40 18.6667 40C17.2522 40 15.8956 40.5619 14.8954 41.5621C13.8952 42.5623 13.3333 43.9188 13.3333 45.3333Z"   stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40 45.3333C40 46.7478 40.5619 48.1044 41.5621 49.1046C42.5623 50.1048 43.9188 50.6667 45.3333 50.6667C46.7478 50.6667 48.1044 50.1048 49.1046 49.1046C50.1048 48.1044 50.6667 46.7478 50.6667 45.3333C50.6667 43.9188 50.1048 42.5623 49.1046 41.5621C48.1044 40.5619 46.7478 40 45.3333 40C43.9188 40 42.5623 40.5619 41.5621 41.5621C40.5619 42.5623 40 43.9188 40 45.3333Z"   stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3333 45.3333H8V34.6666M5.33334 13.3333H34.6667V45.3333M24 45.3333H40M50.6667 45.3333H56V29.3333M56 29.3333H34.6667M56 29.3333L48 16H34.6667"   stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 24H18.6667"   stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/components/UTIcon/constants.js

@@ -1,3 +1,8 @@
+import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
+import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
+import EnergyIconHome from './components/EnergyIcons/EnergyIconHome.svg';
+import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
+
 export const SHADES = {
   shade01: '01',
   shade02: '02',
@@ -22,3 +27,12 @@ export const COLOR_THEMES = {
 export const DEFAULT_PROPS = {
   color: 'dark'
 };
+
+export const DEFAULT_INTERNAL_SHADE = SHADES.shade02;
+
+export const ENERGY_ICONS = {
+  EnergyIconCar,
+  EnergyIconCart,
+  EnergyIconHome,
+  EnergyIconTruck
+};

package/lib/components/UTIcon/index.js

@@ -5,19 +5,28 @@ import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
 
-import { retrieveColor } from './theme';
+import { ENERGY_ICONS } from './constants';
+import { getIconProps } from './utils';
 
-const UTIcon = ({ color, colorTheme = 'dark', name, shade, size, style }) => {
+const UTIcon = ({ color, colorTheme = 'dark', fillShade, fillTheme, name, shade, size, style }) => {
   const theme = useTheme();
 
-  const IconComponent = TablerIcons[name];
+  const IconComponent = ENERGY_ICONS[name] || TablerIcons[name];
   if (!IconComponent) return null;
 
-  const themeColor = retrieveColor({ colorTheme: color || colorTheme, theme, shade });
-  const filled = name.endsWith('Filled');
-  const iconColor = filled ? 'transparent' : themeColor;
-
-  return <IconComponent color={iconColor} size={size} style={[filled && { color: themeColor }, style]} />;
+  const iconProps = getIconProps({
+    color,
+    colorTheme,
+    fillShade,
+    fillTheme,
+    name,
+    shade,
+    size,
+    style,
+    theme
+  });
+
+  return <IconComponent {...iconProps} />;
 };
 
 UTIcon.propTypes = {
@@ -26,6 +35,8 @@ UTIcon.propTypes = {
    */
   color: string,
   colorTheme: string,
+  fillShade: string,
+  fillTheme: string,
   name: string,
   shade: string,
   size: number,

package/lib/components/UTIcon/utils.js

@@ -1 +1,35 @@
+import { DEFAULT_INTERNAL_SHADE } from './constants';
+import { retrieveColor } from './theme';
+
 export const isUTIcon = icon => typeof icon === 'string';
+
+export const getIconProps = ({
+  name,
+  theme,
+  color,
+  colorTheme,
+  shade,
+  fillTheme,
+  fillShade,
+  size,
+  style
+}) => {
+  const themeColor = retrieveColor({ colorTheme: color || colorTheme, theme, shade });
+  const filled = name.endsWith('Filled');
+  const isEnergyIcon = name.startsWith('Energy');
+  const iconColor = filled ? 'transparent' : themeColor;
+  const internalFill =
+    fillTheme && retrieveColor({ colorTheme: fillTheme, theme, shade: fillShade || DEFAULT_INTERNAL_SHADE });
+
+  const defaultIconProps = { color: iconColor, size };
+  const energyIconProps = {
+    stroke: iconColor,
+    ...(size && { width: size, height: size })
+  };
+
+  return {
+    style: [filled && { color: themeColor }, style],
+    ...(internalFill && { fill: internalFill }),
+    ...(isEnergyIcon ? energyIconProps : defaultIconProps)
+  };
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.15.1",
+  "version": "1.16.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -47,7 +47,7 @@
     "react-native-modal": "^13.0.1",
     "react-native-pager-view": "^6.2.1",
     "react-native-svg": "^13.13.0",
-    "react-native-safe-area-context": "4.10.1"
+    "react-native-safe-area-context": "^4.5.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",