@sparrowengg/twigs-mobile 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparrowengg/twigs-mobile",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
   "types": "dist/types/index.d.ts",

package/src/Box/box.tsx

@@ -1,4 +1,82 @@
-import React from "react";
+import React, { ReactNode } from "react";
+import { ViewStyle, ViewProps } from "react-native";
 import styled from "styled-components/native";
 
-export const Box = styled.View``;
+const DEFAULT_SPACING = 0;
+
+const resolveMargin = ({
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+}: Partial<BoxProps>) => ({
+  top: marginTop ?? marginVertical ?? margin ?? DEFAULT_SPACING,
+  bottom: marginBottom ?? marginVertical ?? margin ?? DEFAULT_SPACING,
+  left: marginLeft ?? marginHorizontal ?? margin ?? DEFAULT_SPACING,
+  right: marginRight ?? marginHorizontal ?? margin ?? DEFAULT_SPACING,
+});
+
+const resolvePadding = ({
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+}: Partial<BoxProps>) => ({
+  top: paddingTop ?? paddingVertical ?? padding ?? DEFAULT_SPACING,
+  bottom: paddingBottom ?? paddingVertical ?? padding ?? DEFAULT_SPACING,
+  left: paddingLeft ?? paddingHorizontal ?? padding ?? DEFAULT_SPACING,
+  right: paddingRight ?? paddingHorizontal ?? padding ?? DEFAULT_SPACING,
+});
+
+type BoxProps = ViewProps & {
+  style?: ViewStyle;
+  children?: ReactNode;
+  padding?: number;
+  margin?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+};
+
+const StyledBox = styled.View<BoxProps>`
+  ${({ margin = 0, ...rest }) => {
+    const resolvedMargin = resolveMargin({ margin, ...rest });
+    return `
+      margin-top: ${resolvedMargin.top}px;
+      margin-bottom: ${resolvedMargin.bottom}px;
+      margin-left: ${resolvedMargin.left}px;
+      margin-right: ${resolvedMargin.right}px;
+    `;
+  }}
+
+  ${({ padding = 0, ...rest }) => {
+    const resolvedPadding = resolvePadding({ padding, ...rest });
+    return `
+      padding-top: ${resolvedPadding.top}px;
+      padding-bottom: ${resolvedPadding.bottom}px;
+      padding-left: ${resolvedPadding.left}px;
+      padding-right: ${resolvedPadding.right}px;
+    `;
+  }}
+`;
+
+export const Box: React.FC<BoxProps> = ({ style, children, ...rest }) => (
+  <StyledBox style={style} {...rest}>
+    {children}
+  </StyledBox>
+);

package/src/ThemeProvider/TwigsThemeProvider.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { ThemeProvider } from "styled-components/native";
+import { defaultTheme } from "../config/theme";
+
+
+type TwigsThemeProviderProps = {
+    children: ReactNode;
+    theme?: object;
+  };
+  
+  export const TwigsThemeProvider: React.FC<TwigsThemeProviderProps> = ({ children, theme = defaultTheme }) => (
+    <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  );

package/src/config/theme.ts

@@ -0,0 +1,195 @@
+export const defaultTheme = {
+    colors: {
+        primary: "#2E666D",
+        secondary: "#363A43",
+        accent50: "#F3F3FF",
+        accent100: "#EAE9FE",
+        accent200: "#D7D6FE",
+        accent300: "#B9B5FD",
+        accent400: "#978CF9",
+        accent500: "#7158F5",
+        accent600: "#623BEC",
+        accent700: "#5329D8",
+        accent800: "#4622B5",
+        accent900: "#3B1E94",
+        primary50: "#F3F9FA",
+        primary100: "#E6F3F4",
+        primary200: "#CEE7EA",
+        primary300: "#9CCFD6",
+        primary400: "#56B0BB",
+        primary500: "#4A9CA6",
+        primary600: "#448E97",
+        primary700: "#3B8088",
+        primary800: "#36737A",
+        primary900: "#2E666D",
+        warning50: "#FFF6EF",
+        warning100: "#FEEAC7",
+        warning200: "#FDD28A",
+        warning300: "#FCBD4F",
+        warning400: "#FBAB24",
+        warning500: "#F59E0B",
+        warning600: "#DB8D06",
+        warning700: "#B47409",
+        warning800: "#92610E",
+        warning900: "#78510F",
+        highlight50: "#FFFCDA",
+        highlight100: "#FFF7AD",
+        highlight200: "#FFF27D",
+        highlight300: "#FFED4B",
+        highlight400: "#FFE81A",
+        highlight500: "#E6CF00",
+        highlight600: "#B3A100",
+        highlight700: "#807300",
+        highlight800: "#786B03",
+        highlight900: "#6A5F00",
+        positive50: "#F4FAF1",
+        positive100: "#E8F4E3",
+        positive200: "#D4E8CA",
+        positive300: "#A8D291",
+        positive400: "#67B034",
+        positive500: "#5EA130",
+        positive600: "#55932A",
+        positive700: "#4C8425",
+        positive800: "#437720",
+        positive900: "#3C691C",
+        secondary50: "#F4F6F7",
+        secondary100: "#E2E6EB",
+        secondary200: "#C9CFD8",
+        secondary300: "#A3AEBD",
+        secondary400: "#76859A",
+        secondary500: "#64748B",
+        secondary600: "#4E596C",
+        secondary700: "#444B5A",
+        secondary800: "#3D424D",
+        secondary900: "#363A43",
+        negative50: "#FFF6F3",
+        negative100: "#FDEDE8",
+        negative200: "#FFDAD0",
+        negative300: "#FFB4A1",
+        negative400: "#FA7659",
+        negative500: "#F65633",
+        negative600: "#E75030",
+        negative700: "#D14729",
+        negative800: "#BC4024",
+        negative900: "#A9371E",
+        neutral50: "#F8F8F8",
+        neutral100: "#F1F1F1",
+        neutral200: "#E2E2E2",
+        neutral300: "#C6C6C6",
+        neutral400: "#9E9E9E",
+        neutral500: "#919191",
+        neutral600: "#848484",
+        neutral700: "#767676",
+        neutral800: "#6A6A6A",
+        neutral900: "#2B2B2B",
+        black50: "#0000000A",
+        black100: "#00000014",
+        black200: "#0000001A",
+        black300: "#00000026",
+        black400: "#00000033",
+        black500: "#0000004D",
+        black600: "#00000080",
+        black700: "#000000B2",
+        black800: "#000000CC",
+        black900: "#000000",
+        white50: "#FFFFFF0D",
+        white100: "#FFFFFF14",
+        white200: "#FFFFFF1A",
+        white300: "#FFFFFF26",
+        white400: "#FFFFFF33",
+        white500: "#FFFFFF4D",
+        white600: "#FFFFFF80",
+        white700: "#FFFFFFB2",
+        white800: "#FFFFFFCC",
+        white900: "#FFFFFF",
+    },
+    space: {
+        $1: 2,
+        $2: 4,
+        $3: 6,
+        $4: 8,
+        $5: 10,
+        $6: 12,
+        $7: 14,
+        $8: 16,
+        $9: 18,
+        $10: 20,
+        $11: 22,
+        $12: 24,
+        $13: 26,
+        $14: 28,
+        $15: 30,
+        $16: 32,
+        $17: 34,
+        $18: 36,
+        $19: 38,
+        $20: 40,
+        $21: 42,
+        $22: 44,
+        $23: 46,
+        $24: 48,
+        $25: 50,
+        $26: 52,
+        $27: 54,
+        $28: 56,
+        $29: 58,
+        $30: 60,
+        $31: 62,
+        $32: 64,
+        $33: 66,
+        $34: 68,
+        $35: 70,
+        $36: 72,
+        $37: 74,
+        $38: 76,
+        $39: 78,
+        $40: 80,
+        $41: 82,
+        $42: 84,
+        $43: 86,
+        $44: 88,
+        $45: 90,
+        $46: 92,
+        $47: 94,
+        $48: 96,
+        $49: 98,
+        $50: 100,
+    },
+    sizes: {
+        $1: 4,
+        $2: 8,
+        $3: 12,
+        $4: 16,
+        $5: 20,
+        $6: 24,
+        $7: 28,
+        $8: 32,
+        $9: 36,
+        $10: 40,
+        $11: 44,
+        $12: 48,
+        $13: 52,
+        $14: 56,
+        $15: 60,
+        $16: 64,
+        $17: 68,
+        $18: 72,
+        $19: 76,
+        $20: 80,
+        $21: 84,
+        $22: 88,
+        $23: 92,
+        $24: 96,
+        $25: 100,
+        $26: 104,
+        $27: 108,
+        $28: 112,
+        $29: 116,
+        $30: 120,
+        $31: 124,
+        $32: 128,
+        $33: 132,
+        $34: 136,
+    },
+};
+