[core] Initial commit

.gitignore

@@ -1 +1,3 @@
-.idea
+# OSX
+#
+.DS_Store

core/.gitignore

@@ -0,0 +1,17 @@
+# OSX
+#
+.DS_Store
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# Packages
+lib/

core/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@react-native-material/core",
+  "version": "1.0.0",
+  "description": "Modular and customizable Material Design UI components for React Native",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "repository": "https://github.com/yamankatby/react-native-material",
+  "author": "Yaman KATBY <[email protected]> (https://yamankatby.com/)",
+  "license": "MIT",
+  "private": false,
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-native": "^0.65.1",
+    "react-native-svg": "^12.1.1"
+  },
+  "dependencies": {
+    "chroma-js": "^2.1.2"
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^2.1.3",
+    "@types/react": "^17.0.19",
+    "@types/react-native": "^0.64.13",
+    "react-native-svg": "^12.1.1"
+  },
+  "files": [
+    "lib/**/*"
+  ]
+}

core/src/base/color-scheme/color-scheme.ts

@@ -0,0 +1,15 @@
+export type ColorName =
+  | "primary"
+  | "primaryVariant"
+  | "secondary"
+  | "secondaryVariant"
+  | "background"
+  | "surface"
+  | "error"
+  | "onPrimary"
+  | "onSecondary"
+  | "onBackground"
+  | "onSurface"
+  | "onError";
+
+export type ColorScheme = Record<ColorName, string>;

core/src/base/color-scheme/index.ts

@@ -0,0 +1 @@
+export * from "./color-scheme";

core/src/base/context/ThemeProvider.tsx

@@ -0,0 +1,18 @@
+import React, { createContext } from "react";
+import { defaultTheme, Theme } from "../theme-scheme";
+
+export const ThemeContext = createContext<Theme>(defaultTheme);
+
+export interface ThemeProviderProps {
+  theme?: Theme;
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
+  return (
+    <ThemeContext.Provider value={theme ?? defaultTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

core/src/base/context/index.ts

@@ -0,0 +1,6 @@
+import ThemeProvider from "./ThemeProvider";
+import useStyles from "./use-styles";
+import useTheme from "./use-theme";
+
+export * from "./ThemeProvider";
+export { ThemeProvider, useTheme, useStyles };

core/src/base/context/use-styles.ts

@@ -0,0 +1,18 @@
+import { DependencyList, useMemo } from "react";
+import { ImageStyle, TextStyle, ViewStyle } from "react-native";
+import { Theme } from "../theme-scheme";
+import useTheme from "./use-theme";
+
+export type NamedStyles<T> = {
+  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+};
+
+const useStyles = <T extends NamedStyles<T> | NamedStyles<any>>(
+  factory: (theme: Theme) => T,
+  deps?: DependencyList | undefined
+): T => {
+  const theme = useTheme();
+  return useMemo(() => factory(theme), [theme, deps]);
+};
+
+export default useStyles;

core/src/base/context/use-theme.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeProvider";
+
+const useTheme = () => useContext(ThemeContext);
+
+export default useTheme;

core/src/base/index.ts

@@ -0,0 +1,5 @@
+export * from "./color-scheme";
+export * from "./context";
+export * from "./shape-scheme";
+export * from "./theme-scheme";
+export * from "./typography-scheme";

core/src/base/shape-scheme/index.ts

@@ -0,0 +1 @@
+export * from "./shape-scheme";

core/src/base/shape-scheme/shape-scheme.ts

@@ -0,0 +1,17 @@
+export type ShapeCategory = "small" | "medium" | "large";
+
+export type ShapeFamily = "rounded" | "cut";
+
+export interface ShapeBorderRadius {
+  topStart: number;
+  topEnd: number;
+  bottomStart: number;
+  bottomEnd: number;
+}
+
+export interface ShapeValues {
+  family: ShapeFamily;
+  borderRadius: ShapeBorderRadius;
+}
+
+export type ShapeScheme = Record<ShapeCategory, ShapeValues>;

core/src/base/theme-scheme/index.ts

@@ -0,0 +1 @@
+export * from "./theme-scheme";

core/src/base/theme-scheme/theme-scheme.ts

@@ -0,0 +1,137 @@
+import { ColorScheme } from "../color-scheme";
+import { ShapeScheme } from "../shape-scheme";
+import { TypographyScheme } from "../typography-scheme";
+
+export type Mode = "light" | "dark";
+
+export interface Theme {
+  mode: Mode;
+  colorScheme: ColorScheme;
+  shapeScheme: ShapeScheme;
+  typographyScheme: TypographyScheme;
+}
+
+export const defaultTheme: Theme = {
+  mode: "light",
+  colorScheme: {
+    primary: "#6200EE",
+    primaryVariant: "#3700B3",
+    secondary: "#03DAC6",
+    secondaryVariant: "#018786",
+    background: "#FFFFFF",
+    surface: "#FFFFFF",
+    error: "#B00020",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#000000",
+    onBackground: "#000000",
+    onSurface: "#000000",
+    onError: "#FFFFFF",
+  },
+  shapeScheme: {
+    small: {
+      family: "rounded",
+      borderRadius: {
+        topStart: 4,
+        topEnd: 4,
+        bottomStart: 4,
+        bottomEnd: 4,
+      },
+    },
+    medium: {
+      family: "rounded",
+      borderRadius: {
+        topStart: 4,
+        topEnd: 4,
+        bottomStart: 4,
+        bottomEnd: 4,
+      },
+    },
+    large: {
+      family: "rounded",
+      borderRadius: {
+        topStart: 0,
+        topEnd: 0,
+        bottomStart: 0,
+        bottomEnd: 0,
+      },
+    },
+  },
+  typographyScheme: {
+    h1: {
+      fontWeight: "300",
+      fontSize: 96,
+      letterSpacing: -1.5,
+    },
+    h2: {
+      fontWeight: "300",
+      fontSize: 60,
+      letterSpacing: -0.5,
+    },
+    h3: {
+      fontSize: 48,
+    },
+    h4: {
+      fontSize: 34,
+      letterSpacing: 0.25,
+    },
+    h5: {
+      fontSize: 24,
+    },
+    h6: {
+      fontWeight: "500",
+      fontSize: 20,
+      letterSpacing: 0.15,
+    },
+    subtitle1: {
+      fontSize: 16,
+      letterSpacing: 0.15,
+    },
+    subtitle2: {
+      fontWeight: "500",
+      fontSize: 14,
+      letterSpacing: 0.1,
+    },
+    body1: {
+      fontSize: 16,
+      letterSpacing: 0.5,
+    },
+    body2: {
+      fontSize: 14,
+      letterSpacing: 0.25,
+    },
+    button: {
+      fontWeight: "500",
+      fontSize: 14,
+      letterSpacing: 1.25,
+      textTransform: "uppercase",
+    },
+    caption: {
+      fontSize: 10,
+      letterSpacing: 0.4,
+    },
+    overline: {
+      fontSize: 12,
+      letterSpacing: 1.5,
+      textTransform: "uppercase",
+    },
+  },
+};
+
+export const darkTheme: Theme = {
+  ...defaultTheme,
+  mode: "dark",
+  colorScheme: {
+    primary: "#BB86FC",
+    primaryVariant: "#3700B3",
+    secondary: "#03DAC6",
+    secondaryVariant: "#03DAC6",
+    background: "#121212",
+    surface: "#121212",
+    error: "#CF6679",
+    onPrimary: "#000000",
+    onSecondary: "#000000",
+    onBackground: "#FFFFFF",
+    onSurface: "#FFFFFF",
+    onError: "#000000",
+  },
+};

core/src/base/typography-scheme/index.ts

@@ -0,0 +1 @@
+export * from "./typography-scheme";

core/src/base/typography-scheme/typography-scheme.ts

@@ -0,0 +1,18 @@
+import { TextStyle } from "react-native";
+
+export type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "subtitle1"
+  | "subtitle2"
+  | "body1"
+  | "body2"
+  | "button"
+  | "caption"
+  | "overline";
+
+export type TypographyScheme = Record<TypographyVariant, TextStyle>;

core/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./base";
+export * from "./surface";