@servesall/atoms 1.1.24 → 1.1.25

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "Atoms for react-native",
-  "main": "dist/bundle.cjs.js",
-  "module": "dist/bundle.esm.js",
+  "main": "dist/bundle.web.esm/src/index.web.js",
+  "react-native": "dist/bundle.cjs.js",
+  "module": "dist/bundle.web.esm/src/index.web.js",
   "files": [
     "dist",
     "src"
   ],
+  "exports": {
+    ".": {
+      "react-native": "./dist/bundle.cjs.js",
+      "default": "./dist/bundle.web.esm/src/index.web.js"
+    },
+    "./*": "./dist/*"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npm i && rollup -c && npm publish"
@@ -17,15 +25,17 @@
     "url": "git+https://github.com/ServesAll/atoms.git"
   },
   "peerDependencies": {
+    "expo-navigation-bar": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
-    "react-native-reanimated": "*"
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "styled-components": "^6.1.13"
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.0.5",
-    "react-native-status-bar-height": "^2.6.0",
-    "styled-components": "^6.1.13"
+    "react-native-status-bar-height": "^2.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -33,12 +43,15 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.17.9",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-url": "^8.0.2",
     "rollup": "^2.79.1",
-    "rollup-plugin-node-polyfills": "^0.2.1"
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "rollup-plugin-preserve-directives": "^0.4.0"
   },
   "author": "",
   "license": "ISC",

package/src/BottomNavBar/index.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { NavContainer } from "./BottomNavBar.style";
 import BottomNavController from "./BottomNavController";
-import { Keyboard, SafeAreaView } from "react-native";
+import { Keyboard } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 const BottomNavBar = (props) => {
   const [isFocused, setIsFocused] = useState(false);

package/src/Buttons/FloatingButton/index.js

@@ -1,10 +1,6 @@
 import React, { useEffect } from "react";
-import {
-  Dimensions,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-} from "react-native";
+import { Dimensions, KeyboardAvoidingView, Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { Center } from "../../Layout";
 import Animated, {
   useAnimatedStyle,

package/src/Header/HeaderBar/index.js

@@ -1,20 +1,22 @@
-import React from 'react';
-import { Platform, SafeAreaView } from 'react-native';
-import { getStatusBarHeight } from 'react-native-status-bar-height';
-import { HeaderWrapper, HeaderContainer } from './HeaderBar.style';
-import { StatusBarComponent } from '../StatusBar';
+import React from "react";
+import { Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { getStatusBarHeight } from "react-native-status-bar-height";
+import { HeaderWrapper, HeaderContainer } from "./HeaderBar.style";
+import { StatusBarComponent } from "../StatusBar";
 
 const Header = ({ StatusBarOptions = {}, children, style, height }) => {
-    return (
-        <HeaderWrapper height={height + (Platform.OS === 'ios' ? getStatusBarHeight() : 0)} style={style}>
-            <StatusBarComponent options={StatusBarOptions} />
-            <SafeAreaView style={{ flex: 1 }}>
-                <HeaderContainer>
-                    {children}
-                </HeaderContainer>
-            </SafeAreaView>
-        </HeaderWrapper>
-    );
+  return (
+    <HeaderWrapper
+      height={height + (Platform.OS === "ios" ? getStatusBarHeight() : 0)}
+      style={style}
+    >
+      <StatusBarComponent options={StatusBarOptions} />
+      <SafeAreaView style={{ flex: 1 }}>
+        <HeaderContainer>{children}</HeaderContainer>
+      </SafeAreaView>
+    </HeaderWrapper>
+  );
 };
 
 export default Header;

package/src/Icons/Icons.style.web.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const IconWrapper = styled.div`
+  align-items: center;
+  justify-content: center;
+  height: ${(props) => props.theme[props.size]};
+  width: ${(props) => props.theme[props.size]};
+  ${(props) => props.style};
+`;

package/src/Icons/index.web.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Lottie from "lottie-react";
+import allCategories from "./Assets";
+import { IconWrapper } from "./Icons.style.web";
+
+const Icon = ({
+  icon,
+  size = "small",
+  autoplay,
+  loop,
+  color = "#5E5E5E",
+  style,
+}) => {
+  const hexToRgbArray = (hex) => {
+    const normalized = hex.replace("#", "");
+    const bigint = parseInt(normalized, 16);
+    const r = ((bigint >> 16) & 255) / 255;
+    const g = ((bigint >> 8) & 255) / 255;
+    const b = (bigint & 255) / 255;
+    return [r, g, b];
+  };
+
+  const recolorLottie = (json, hexColor) => {
+    const [r, g, b] = hexToRgbArray(hexColor);
+    console.log([r, g, b]);
+    const cloned = JSON.parse(JSON.stringify(json));
+
+    const recolorShapes = (shapes) => {
+      if (!shapes) return;
+      shapes.forEach((shape) => {
+        if (shape.ty === "fl" && shape.c && shape.c.k) {
+          shape.c.k = [r, g, b, 1];
+        }
+        // recursively handle nested groups
+        if (shape.it) recolorShapes(shape.it);
+      });
+    };
+
+    cloned.layers.forEach((layer) => {
+      if (layer.shapes) recolorShapes(layer.shapes);
+    });
+
+    return cloned;
+  };
+  return (
+    <IconWrapper size={size}>
+      <Lottie
+        style={{
+          width: "100%",
+          height: "100%",
+          ...style,
+        }}
+        autoPlay={autoplay}
+        loop={loop}
+        animationData={
+          color
+            ? recolorLottie(allCategories[icon], color)
+            : allCategories[icon]
+        }
+      />
+    </IconWrapper>
+  );
+};
+
+export default Icon;

package/src/Layout/Background.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { View } from "react-native";
+import { useThemeContext } from "../Theme";
+import { StatusBar } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import * as NavigationBar from "expo-navigation-bar";
+
+const Background = ({ children, style = {} }) => {
+  const theme = useThemeContext();
+  const { background, colorScheme } = theme;
+  const isDarkMode = colorScheme === "dark";
+
+  const statusBarStyle = isDarkMode ? "light-content" : "dark-content";
+
+  NavigationBar.setBackgroundColorAsync(background);
+  NavigationBar.setButtonStyleAsync(isDarkMode ? "light" : "dark");
+
+  return (
+    <View style={{ flex: 1, backgroundColor: background }}>
+      <StatusBar
+        translucent={true}
+        backgroundColor={background}
+        barStyle={statusBarStyle}
+      />
+      <SafeAreaView style={{ flex: 1, backgroundColor: background, ...style }}>
+        {children}
+      </SafeAreaView>
+      <SafeAreaView
+        style={{ flex: 0, backgroundColor: background, ...style }}
+      />
+    </View>
+  );
+};
+
+export default Background;

package/src/Layout/Background.web.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { View } from "react-native";
+import { useThemeContext } from "../Theme";
+
+const Background = ({ children, style = {} }) => {
+  const theme = useThemeContext();
+  const { background } = theme;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: background, ...style }}>
+      {children}
+    </View>
+  );
+};
+
+export default Background;

package/src/Layout/Layout.style.js

@@ -143,19 +143,19 @@ export const BoxElement = styled.View`
 
 export const BorderBottomElement = styled.View`
   border-bottom-width: 2px;
-  border-color: ${(props) => props.theme.color7};
+  border-color: ${(props) => props.theme.border};
   ${(props) => props.style};
 `;
 
 export const BorderTopElement = styled.View`
   border-top-width: 2px;
-  border-color: ${(props) => props.theme.color7};
+  border-color: ${(props) => props.theme.border};
   ${(props) => props.style};
 `;
 
 export const BorderBoxElement = styled.View`
   border-width: 2px;
-  border-color: ${(props) => props.theme.color7};
+  border-color: ${(props) => props.theme.border};
   border-radius: ${(props) => props.theme.borderRadiusSmall};
   ${(props) => props.style};
 `;
@@ -183,3 +183,8 @@ export const ImageWrapperElement = styled.View`
   overflow: hidden;
   ${(props) => props.styles};
 `;
+
+export const RoundedBoxElement = styled.View`
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  ${(props) => props.styles};
+`;

package/src/Layout/Layout.style.web.js

@@ -0,0 +1,197 @@
+import styled from "styled-components";
+import { Platform } from "react-native";
+
+const DEFAULT_FLEX_DIRECTION = Platform.OS === "web" ? "column" : "column";
+
+export const CenterElement = styled.div`
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  display: flex;
+  ${(props) => props.style};
+`;
+
+export const CenterLeftElement = styled.div`
+  align-items: ${(props) =>
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
+      ? "center"
+      : "flex-start"};
+  justify-content: ${(props) =>
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
+      ? "flex-start"
+      : "center"};
+  flex: 1;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const CenterRightElement = styled.div`
+  align-items: ${(props) =>
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
+      ? "center"
+      : "flex-end"};
+  justify-content: ${(props) =>
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
+      ? "flex-end"
+      : "center"};
+  flex: 1;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginElement = styled.div`
+  margin: ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginHorizontalElement = styled.div`
+  margin: 0 ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginVerticalElement = styled.div`
+  margin: ${(props) => props.theme.margin} 0;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginBottomElement = styled.div`
+  margin-bottom: ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginTopElement = styled.div`
+  margin-top: ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginRightElement = styled.div`
+  margin-right: ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const MarginLeftElement = styled.div`
+  margin-left: ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingElement = styled.div`
+  padding: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingHorizontalElement = styled.div`
+  padding: 0 ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingVerticalElement = styled.div`
+  padding: ${(props) => props.theme.padding} 0;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingTopElement = styled.div`
+  padding-top: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingBottomElement = styled.div`
+  padding-bottom: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingLeftElement = styled.div`
+  padding-left: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const PaddingRightElement = styled.div`
+  padding-right: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const RowElement = styled.div`
+  flex-direction: row;
+  display: flex;
+  ${(props) => props.style};
+`;
+
+export const StretchElement = styled.div`
+  align-items: stretch;
+  align-self: stretch;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const BoxElement = styled.div`
+  flex: 1;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const BorderBottomElement = styled.div`
+  border-bottom-width: 2px;
+  border-color: ${(props) => props.theme.border};
+  border-style: solid;
+  ${(props) => props.style};
+`;
+
+export const BorderTopElement = styled.div`
+  border-top-width: 2px;
+  border-color: ${(props) => props.theme.border};
+  border-style: solid;
+  ${(props) => props.style};
+`;
+
+export const BorderBoxElement = styled.div`
+  border-width: 2px;
+  border-color: ${(props) => props.theme.border};
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  overflow: hidden;
+  border-style: solid;
+  ${(props) => props.style};
+`;
+
+export const FullScreenElement = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
+export const WebSmallWrapperElement = styled.div`
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
+  width: 500px;
+  ${(props) => props.style};
+`;
+
+export const ImageWrapperElement = styled.div`
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  background-color: ${(props) => props.theme.color7};
+  overflow: hidden;
+  ${(props) => props.styles};
+`;
+
+export const RoundedBoxElement = styled.div`
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  overflow: hidden;
+  ${(props) => props.styles};
+`;

package/src/Layout/RoundedBox.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { RoundedBoxElement } from "./Layout.style";
+
+const RoundedBox = ({ children, styles }) => {
+  return (
+    <RoundedBoxElement styles={{ ...styles }}>{children}</RoundedBoxElement>
+  );
+};
+
+export default RoundedBox;

package/src/Layout/index.js

@@ -25,6 +25,8 @@ import BorderBottom from "./BorderBottom";
 import BorderTop from "./BorderTop";
 import BorderBox from "./BorderBox";
 import ImageWrapper from "./ImageWrapper";
+import Background from "./Background";
+import RoundedBox from "./RoundedBox";
 
 export {
   Center,
@@ -54,4 +56,6 @@ export {
   BorderTop,
   BorderBox,
   ImageWrapper,
+  Background,
+  RoundedBox,
 };

package/src/Text/Text.style.js

@@ -4,7 +4,10 @@ export const H1 = styled.Text`
   font-size: ${(props) => props.theme.large};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.lhLarge};
   ${(props) => props.style};
 `;
@@ -13,7 +16,10 @@ export const H2 = styled.Text`
   font-size: ${(props) => props.theme.medium};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.lhMedium};
   ${(props) => props.style};
 `;
@@ -22,7 +28,10 @@ export const H3 = styled.Text`
   font-size: ${(props) => props.theme.small};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.lhSmall};
   ${(props) => props.style};
 `;
@@ -31,7 +40,10 @@ export const H4 = styled.Text`
   font-size: ${(props) => props.theme.xsmall};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.small};
   ${(props) => props.style};
 `;
@@ -40,7 +52,10 @@ export const H5 = styled.Text`
   font-size: ${(props) => props.theme.xssmall};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.xssmall};
   ${(props) => props.style};
 `;
@@ -49,7 +64,10 @@ export const Span = styled.Text`
   font-size: ${(props) => props.theme.small};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.lhSmall};
   ${(props) => props.style};
 `;
@@ -58,7 +76,10 @@ export const P = styled.Text`
   font-size: ${(props) => props.theme.small};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
   text-align: ${(props) => props.align};
-  color: ${(props) => props.color || props.theme.color2};
+  color: ${(props) =>
+    props.color || props.secondary
+      ? props.theme.secondaryText
+      : props.theme.primaryText};
   line-height: ${(props) => props.theme.lhSmall};
   ${(props) => props.style};
 `;

package/src/Text/Text.style.web.js

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+export const H1 = styled.h1`
+  font-size: ${(props) => props.theme.large};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.lhLarge};
+  ${(props) => props.style};
+`;
+
+export const H2 = styled.h2`
+  font-size: ${(props) => props.theme.medium};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.lhMedium};
+  ${(props) => props.style};
+`;
+
+export const H3 = styled.h3`
+  font-size: ${(props) => props.theme.small};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.lhSmall};
+  ${(props) => props.style};
+`;
+
+export const H4 = styled.h4`
+  font-size: ${(props) => props.theme.xsmall};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.small};
+  ${(props) => props.style};
+`;
+
+export const H5 = styled.h5`
+  font-size: ${(props) => props.theme.xssmall};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.xssmall};
+  ${(props) => props.style};
+`;
+
+export const Span = styled.span`
+  font-size: ${(props) => props.theme.small};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.lhSmall};
+  ${(props) => props.style};
+`;
+
+export const P = styled.p`
+  font-size: ${(props) => props.theme.small};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) =>
+    props.color ||
+    (props.secondary ? props.theme.secondaryText : props.theme.primaryText)};
+  line-height: ${(props) => props.theme.lhSmall};
+  ${(props) => props.style};
+`;