@chainplatform/layout 0.1.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Chain Platform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# ChainSDK
+@chainplatform/sdk is a React Native library implement for react-native and react-native-web. Require crypto-js and react-native-mmkv packages.
+
+<p align="center">
+  <a href="https://github.com/ChainPlatform/ChainSDK/blob/HEAD/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
+  </a>
+  <a href="https://www.npmjs.com/package/@chainplatform/sdk">
+    <img src="https://img.shields.io/npm/v/@chainplatform/sdk?color=brightgreen&label=npm%20package" alt="Current npm package version." />
+  </a>
+  <a href="https://www.npmjs.com/package/@chainplatform/sdk">
+    <img src="https://img.shields.io/npm/dt/@chainplatform/sdk.svg"></img>
+  </a>
+  <a href="https://www.npmjs.com/package/@chainplatform/sdk">
+    <img src="https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20web-blue"></img>
+  </a>
+  <a href="https://github.com/ChainPlatform/ChainSDK/pulls">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=doansan">
+    <img src="https://img.shields.io/twitter/follow/doansan.svg?label=Follow%20@doansan" alt="Follow @doansan" />
+  </a>
+</p>
+
+### Install
+```
+npm install @chainplatform/sdk --save
+```
+or
+```
+yarn add @chainplatform/sdk
+```
+
+
+### Usage
+
+```js
+import React from 'react';
+import * as ChainSDK from '@chainplatform/sdk';
+
+class App extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+          
+        };
+    }
+
+  render() {
+    return (
+      <View style={{flex:1}}></View>
+    );
+  }
+}
+```

package/index.js

@@ -0,0 +1,31 @@
+import { getLayoutAdmin, getScreenSizeAdmin } from "./LayoutAdmin";
+import {
+    getScreenSize,
+    getCartLayout,
+    getTransactionLayout,
+    getCourseLayout,
+    getUserCourseLayout,
+    getUserOrderLayout,
+    getCourseLearingLayout,
+    getScreenWebinarSize
+} from "./src/Layout";
+import sdkStyles, { setSize } from "./src/styles";
+import sdkColors from "./src/colors";
+import mobileCheck from "./src/DeviceDetect";
+
+export default sdkStyles;
+export {
+    setSize,
+    getLayoutAdmin,
+    getScreenSizeAdmin,
+    getScreenSize,
+    getCartLayout,
+    getTransactionLayout,
+    getCourseLayout,
+    getUserCourseLayout,
+    getUserOrderLayout,
+    getCourseLearingLayout,
+    getScreenWebinarSize,
+    sdkColors,
+    mobileCheck
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@chainplatform/layout",
+  "version": "0.1.0",
+  "description": "@chainplatform/layout",
+  "main": "index.js",
+  "devDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-web": "*",
+    "react-device-detect": "*"
+  },
+  "author": "Chain Platform <santran686@gmail.com> (https://chainplatform.net/)",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-native",
+    "react-native-web",
+    "react-device-detect"
+  ],
+  "homepage": "https://github.com/ChainPlatform/react-native-layout",
+  "bugs": "https://github.com/ChainPlatform/react-native-layout/issues",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/ChainPlatform/react-native-layout.git"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-web": "*",
+    "react-device-detect": "*"
+  }
+}

package/src/DeviceDetect/index.js

@@ -0,0 +1,5 @@
+let mobileCheck = {};
+mobileCheck.isMobile = true;
+mobileCheck.os = "native";
+
+export default mobileCheck;

package/src/DeviceDetect/index.web.js

@@ -0,0 +1,9 @@
+import * as mobiInfos from 'react-device-detect';
+
+let mobileCheck = mobiInfos;
+let os = "browser";
+if (typeof window.APP_CONFIG != "undefined" && typeof window.APP_CONFIG.os != "undefined") {
+    os = window.APP_CONFIG.os;
+}
+mobileCheck.os = os;
+export default mobileCheck;

package/src/Layout.js

@@ -0,0 +1,293 @@
+import sdkStyles, { setSize } from "./styles";
+
+export function getScreenSize(layoutWidth, isDesktop, side_bar_width) {
+    const viewPadding = setSize(15);
+    let menuViewWidth = setSize(0);
+    let bannerViewWidth = setSize(0);
+    let splitPadding = setSize(0);
+    let sideBarWidth = setSize(0);
+    let courseViewWidth = setSize(0);
+    let newsViewWidth = setSize(0);
+    let bannerOnScreen = 1;
+    //Menu
+    let imageMenuSize = setSize(45);
+    let fontMenuSize = setSize(9.5);
+    let menuTotalItem = 5;
+    let menuSpace = 4 * setSize(5);
+    // Course
+    let courseTotalItem = 2;
+    let newsTotalItem = 2;
+    let courseSpace = 0;
+    let newsSpace = 0;
+    // News
+    let newsItem = 1;
+    let newsPadding = 0;
+    // New Course
+    let courseItem = 1;
+    let coursePadding = 0;
+    if (isDesktop) {
+        courseSpace = setSize(30) + setSize(15);
+        newsSpace = setSize(30) + setSize(15);
+    } else {
+        courseSpace = setSize(15);
+        newsSpace = setSize(15);
+    }
+    if (isDesktop && layoutWidth > sdkStyles.base_desktop) {
+        sideBarWidth = side_bar_width;
+        // Menu
+        imageMenuSize = setSize(55);
+        fontMenuSize = setSize(12);
+        // Course
+        courseTotalItem = 3;
+        newsTotalItem = 3;
+        courseSpace = setSize(60);
+        newsSpace = setSize(60);
+        // News
+        newsItem = 2;
+        newsPadding = setSize(15);
+        // New Course
+        courseItem = 3;
+        coursePadding = setSize(30);
+    }
+    let viewWidth = setSize(345);
+    let viewHeight = setSize(195);
+    if (isDesktop) {
+        if (layoutWidth >= sdkStyles.split_desktop) {
+            bannerOnScreen = 2;
+            splitPadding = setSize(15);
+            // Menu
+            menuTotalItem = 10;
+            menuSpace = 9 * setSize(5);
+            fontMenuSize = setSize(13);
+            // Course
+            courseTotalItem = 4;
+            newsTotalItem = 4;
+            courseSpace = setSize(75);
+            newsSpace = setSize(75);
+            // News
+            newsItem = 3;
+            newsPadding = setSize(30);
+            // New Course
+            courseItem = 4;
+            coursePadding = setSize(45);
+        }
+        if (layoutWidth >= sdkStyles.wide_split_desktop) {
+            // Course
+            courseTotalItem = 5;
+            courseSpace = setSize(75) + setSize(15);
+            //
+            courseItem = 5;
+            coursePadding = setSize(60);
+        }
+        bannerViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - splitPadding;
+        viewWidth = bannerViewWidth / bannerOnScreen;
+        viewHeight = setSize(195) * (viewWidth / setSize(345));
+    }
+    // Menu
+    menuViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - menuSpace;
+    const menuWidth = menuViewWidth / menuTotalItem;
+    // Course
+    courseViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - courseSpace;
+    const courseWidth = courseViewWidth / courseTotalItem;
+    // News
+    newsViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - newsSpace;
+    const newsWidth = newsViewWidth / newsTotalItem;
+    //
+    let numberChart = 1;
+    let padding = setSize(30);
+    if (layoutWidth > 460 && layoutWidth < sdkStyles.base_desktop) {
+        numberChart = 2;
+        padding = setSize(45);
+    }
+    if (layoutWidth >= sdkStyles.base_desktop && layoutWidth < sdkStyles.split_desktop) {
+        numberChart = 3;
+        padding = setSize(60);
+    }
+    if (layoutWidth >= sdkStyles.split_desktop) {
+        numberChart = 5;
+        padding = setSize(90);
+    }
+    let packageWidth = (layoutWidth - padding - sideBarWidth) / numberChart;
+    if (packageWidth < setSize(232)) {
+        packageWidth = setSize(232);
+    }
+    if (packageWidth > setSize(280)) {
+        packageWidth = setSize(280);
+    }
+
+    let numberwebinarChart = 1;
+    let webinarPadding = setSize(0);
+    if (layoutWidth - sideBarWidth - 2 * viewPadding >= 500) {
+        numberwebinarChart = 2;
+        webinarPadding = setSize(15);
+    }
+    if (layoutWidth >= sdkStyles.split_desktop && side_bar_width == 0) {
+        numberwebinarChart = 3;
+        webinarPadding = setSize(15);
+    }
+
+    let newsItemViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - newsPadding;
+    const newsItemWidth = newsItemViewWidth / newsItem;
+
+    let courseItemViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - coursePadding;
+    const courseItemWidth = courseItemViewWidth / courseItem;
+
+    let webinarViewWidth = layoutWidth - sideBarWidth - 2 * viewPadding - (numberwebinarChart - 1) * webinarPadding;
+    const webinarWidth = webinarViewWidth / numberwebinarChart;
+
+    const layout = layoutWidth - sideBarWidth - (sideBarWidth > 0 ? 2 : 2) * viewPadding;
+
+    let view = {};
+    view.courseItemWidth = courseItemWidth;
+    view.courseItem = courseItem;
+    view.coursePadding = coursePadding;
+    view.newsItemWidth = newsItemWidth;
+    view.newsItem = newsItem;
+    view.newsPadding = newsPadding;
+    view.webinarWidth = webinarWidth;
+    view.webinarPadding = webinarPadding;
+    view.numberWebinar = numberwebinarChart;
+    view.viewPadding = viewPadding;
+    view.sideBarWidth = sideBarWidth;
+    view.layout = layout;
+    view.bannerOnScreen = bannerOnScreen;
+    view.imageMenuSize = imageMenuSize;
+    view.fontMenuSize = fontMenuSize;
+    view.viewWidth = viewWidth;
+    view.viewHeight = viewHeight;
+    view.menuWidth = menuWidth;
+    view.courseWidth = courseWidth;
+    view.newsWidth = newsWidth;
+    view.splitPadding = splitPadding;
+    view.packageWidth = packageWidth;
+    return view;
+}
+
+export function getCartLayout(layoutWidth, isDesktop, side_bar_width) {
+    let viewPadding = 0;
+    let viewSplit = sdkStyles.w100pc;
+    let borderRadius = 0;
+    let marginBottom = setSize(1);
+    let sideBarWidth = 0;
+    if (isDesktop && layoutWidth > sdkStyles.base_desktop) {
+        sideBarWidth = side_bar_width;
+        borderRadius = setSize(4);
+        marginBottom = setSize(10);
+    }
+    if (layoutWidth >= sdkStyles.wide_split_desktop) {
+        viewSplit = sdkStyles.w50pc;
+    }
+    if (layoutWidth >= 767) {
+        viewPadding = setSize(15);
+    }
+    let view = {};
+    view.viewPadding = viewPadding;
+    view.viewSplit = viewSplit;
+    view.sideBarWidth = sideBarWidth;
+    view.itemBorderRadius = borderRadius;
+    view.itemMarginBottom = marginBottom;
+    return view;
+}
+
+export function getTransactionLayout(layoutWidth, isDesktop) {
+    let viewSplit = sdkStyles.w100pc;
+    if (isDesktop && layoutWidth >= 767) {
+        viewSplit = sdkStyles.w50pc;
+    }
+    let view = {};
+    view.viewSplit = viewSplit;
+    return view;
+}
+
+export function getCourseLayout(layoutWidth, isDesktop) {
+    let viewSplit = sdkStyles.w100pc;
+    let viewPadding = 0;
+    let color = 0;
+    let showButton = 1;
+    let childViewPadding = setSize(15);
+    if (isDesktop && layoutWidth >= 767) {
+        viewSplit = sdkStyles.w50pc;
+        viewPadding = setSize(15);
+        childViewPadding = 0;
+        color = 1;
+        showButton = 0;
+    }
+    if (isDesktop && layoutWidth > 767 && layoutWidth < 991) {
+        showButton = 1;
+    }
+    let view = {};
+    view.color = color;
+    view.viewSplit = viewSplit;
+    view.viewPadding = viewPadding;
+    view.childViewPadding = childViewPadding;
+    view.showButton = showButton;
+    return view;
+}
+
+export function getUserCourseLayout(layoutWidth, isDesktop) {
+    let viewPadding = setSize(7.5);
+    let numberCol = 2;
+    if (isDesktop && layoutWidth >= 500) {
+        numberCol = 3;
+    }
+    if (isDesktop && layoutWidth > 767 && layoutWidth < 991) {
+        numberCol = 4;
+    }
+    if (isDesktop && layoutWidth >= 991) {
+        numberCol = 5;
+    }
+    const areaSpace = numberCol * setSize(15);
+    const courseWidth = (layoutWidth - areaSpace - 2 * viewPadding) / numberCol;
+    let view = {};
+    view.viewPadding = viewPadding;
+    view.numberCol = numberCol;
+    view.courseWidth = courseWidth;
+    return view;
+}
+
+export function getUserOrderLayout(layoutWidth, isDesktop) {
+    let viewPadding = setSize(7.5);
+    let numberCol = 1;
+    let space = setSize(15);
+    if (isDesktop && layoutWidth >= 600) {
+        numberCol = 2;
+        space = setSize(30);
+    }
+    if (isDesktop && layoutWidth >= 991) {
+        numberCol = 3;
+        space = setSize(45);
+    }
+    const itemWidth = (layoutWidth - space - 2 * viewPadding) / numberCol;
+    let view = {};
+    view.viewPadding = viewPadding;
+    view.numberCol = numberCol;
+    view.itemWidth = itemWidth;
+    return view;
+}
+
+export function getCourseLearingLayout(layoutWidth, isDesktop) {
+    let sidebarWidth = setSize(0);
+    let viewPadding = setSize(0);
+    if (layoutWidth >= 992) {
+        sidebarWidth = setSize(345);
+    }
+    let view = {};
+    view.sidebarWidth = sidebarWidth;
+    view.viewPadding = viewPadding;
+    return view;
+}
+
+export function getScreenWebinarSize(layoutWidth) {
+    let numberChart = 1;
+    let padding = setSize(30);
+    if (layoutWidth >= 500) {
+        numberChart = 2;
+        padding = setSize(45);
+    }
+    let tmpViewWidth = layoutWidth - padding;
+    let viewWidth = tmpViewWidth / numberChart;
+    let view = {};
+    view.viewWidth = viewWidth;
+    view.viewPadding = setSize(15);
+    return view;
+}

package/src/LayoutAdmin.js

@@ -0,0 +1,51 @@
+import sdkStyles, { setSize } from "./styles";
+
+export function getLayoutAdmin(layoutWidth, isDesktop, side_bar_width) {
+    let numberChart = 1;
+    let padding = setSize(30);
+    let sideBarWidth = side_bar_width;
+    let sideBarOpen = false;
+    let sideBarMiniWidth = setSize(70);
+    let sideBarSecondWidth = side_bar_width - setSize(70);
+    if (isDesktop && layoutWidth > sdkStyles.base_desktop) {
+        sideBarWidth = side_bar_width;
+    }
+    if (layoutWidth > 600 && layoutWidth < sdkStyles.base_desktop) {
+        numberChart = 2;
+        padding = setSize(45);
+    }
+    if (layoutWidth >= sdkStyles.base_desktop && layoutWidth < sdkStyles.split_desktop) {
+        numberChart = 3;
+        padding = setSize(60);
+    }
+    if (layoutWidth >= sdkStyles.split_desktop) {
+        numberChart = 4;
+        padding = setSize(75);
+    }
+    const chartWidth = (layoutWidth - sideBarMiniWidth - padding) / numberChart;
+    const chartWidthPC = 100 / numberChart;
+    let view = {};
+    view.sideBarWidth = sideBarWidth;
+    view.sideBarMiniWidth = sideBarMiniWidth;
+    view.sideBarSecondWidth = sideBarSecondWidth;
+    view.sideBarOpen = sideBarOpen;
+    view.chartWidth = chartWidth;
+    view.chartWidthPC = chartWidthPC + "%";
+    return view;
+}
+
+export function getScreenSizeAdmin(layoutWidth) {
+    let numberChart = 1;
+    let padding = 0;
+    if (layoutWidth > 767) {
+        numberChart = 2;
+        padding = setSize(2);
+    }
+    const chartWidth = (layoutWidth - padding) / numberChart;
+    const chartWidthPC = 100 / numberChart;
+    let view = {};
+    view.padding = padding;
+    view.width = chartWidth;
+    view.widthPC = chartWidthPC + "%";
+    return view;
+}

package/src/colors.js

@@ -0,0 +1,28 @@
+const sdkColors = {
+    transparent: '#33333300',
+    cl333: "#333333",
+    cl33333390: "#33333390",
+    grey: '#C8C8D5',
+    red_product: '#FF424E',
+    primary: '#4056A1',
+    border_color: '#DADADA80',
+    background: '#FFFFFF',
+    green2: "#11b719",
+    white: '#ffffff',
+    border: '#DDDDDD',
+    black: '#24272B',
+    green: '#09C04C',
+    tabDefault: '#95989A',
+    backgroundColor: "#6bb1f1",
+    cardColor: "#2f73d7",
+    headColor: "#163b8e",
+    yellowColor: "#f2d021",
+    greyColor: "#dddddd",
+    greenColor: "#5FB35E",
+    blueColor: "#19B3EF",
+    redColor: "#f05151",
+    redRGBAColor: "rgba(240, 81, 81, 0.65)",
+    headRGBAColor: "rgba(22, 58, 142, 0.5)"
+};
+
+export default sdkColors;

package/src/styles.js

@@ -0,0 +1,140 @@
+import { Dimensions } from 'react-native';
+import mobileCheck from './src/DeviceDetect';
+
+const DESKTOP = mobileCheck.isMobile ? false : true;
+const entireScreenWidth = Dimensions.get('window').width;
+const SCREEN_WIDTH = DESKTOP && entireScreenWidth >= 1440 ? 1440 : entireScreenWidth;
+const screenWidth = DESKTOP ? Dimensions.get('window').width : 375;
+const REM = entireScreenWidth / screenWidth;
+const barHeight = DESKTOP ? (57 * REM) : (50 * REM);
+
+const sdkStyles = {
+    HEIGHT: Dimensions.get('window').height,
+    WIDTH: Dimensions.get('window').width,
+    SCREEN_WIDTH: SCREEN_WIDTH,
+    DESKTOP: DESKTOP,
+    REM: REM,
+    barHeight: barHeight,
+    headerHeight: mobileCheck.os == "mini_app" ? { height: 39 * REM } : { height: barHeight },
+    headerRightContainerStyle: mobileCheck.os == "mini_app" ? { paddingRight: 80 * REM } : {},
+    image_course_width: 356,
+    image_course_height: 267,
+    aspectRatio: 16 / 9,
+    small_logo: 1 / 1,
+    four_three: 4 / 3,
+    six_five: 6 / 5,
+    logo: 96 / 40,
+    banner: 1200 / 600,
+    image_course_rate: 9 / 16,
+    base_banner_width: 345,
+    base_banner_height: 195,
+    image_banner_rate: 195 / 345,
+    activeOpacity: 0.8,
+    fw800: "800",
+    fw400: "400",
+    fw500: "500",
+    fw600: "600",
+    fw700: "700",
+    flexstart: 'flex-start',
+    flexend: 'flex-end',
+    lineThrough: 'line-through',
+    flexWrap: 'wrap',
+    center: "center",
+    left: "left",
+    right: "right",
+    hidden: "hidden",
+    fwNormal: 'normal',
+    fwMedium: 'medium',
+    fwBold: 'bold',
+    w20pc: "20%",
+    w30pc: "30%",
+    w40pc: "40%",
+    w45pc: "45%",
+    w50pc: "50%",
+    w80pc: "80%",
+    w85pc: "85%",
+    w90pc: "90%",
+    w92pc: "92%",
+    w100pc: "100%",
+    w130pc: "130%",
+    w150pc: "150%",
+    absolute: "absolute",
+    uppercase: "uppercase",
+    spaceBetween: "space-between",
+    mw500: 500 * REM,
+    flexRow: 'row',
+    flexCol: 'column',
+    textUnderline: 'underline',
+    textItalic: "italic",
+    justify: 'justify',
+    button: {
+        marginLeft: 20 * REM,
+        marginRight: 20 * REM,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 5 * REM,
+    },
+    buttonTitle: {
+        fontSize: 15 * REM,
+        padding: 11 * REM,
+        fontWeight: 'bold'
+    },
+    label: {
+        marginTop: 10 * REM,
+        fontWeight: '500',
+        fontSize: 14 * REM,
+        marginBottom: 3 * REM,
+        marginLeft: 20 * REM
+    },
+    textInput: {
+        padding: 10.5 * REM,
+        marginRight: 20 * REM,
+        marginLeft: 20 * REM,
+        borderRadius: 5 * REM,
+        color: "#333333",
+        fontSize: 14 * REM,
+        borderWidth: 1.5 * REM,
+        borderColor: '#DADADA80'
+    },
+    auto: 'auto',
+    base_desktop: 767,
+    split_desktop: 991,
+    wide_split_desktop: 1439,
+    base: (100 * (335 * REM) / (375 * REM)) + "%",
+    main_container: {
+        width: "100%",
+        maxWidth: 500 * REM,
+        flex: 1,
+        margin: 0,
+        marginLeft: "auto",
+        marginRight: "auto",
+        textAlign: 'flex-start'
+    },
+    container_text: {
+        width: 375 * REM,
+        alignItems: 'flex-start',
+        marginTop: 20 * REM,
+    },
+    shadow: {
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 5 * REM,
+        },
+        shadowOpacity: 0.5,
+        shadowRadius: 8,
+        elevation: 11,
+    },
+    textShadow: {
+        textShadowColor: 'rgba(255, 255, 255, 0.75)',
+        textShadowOffset: { width: -1 * REM, height: 2 * REM },
+        textShadowRadius: 10
+    }
+}
+
+function setSize(size) {
+    return size * REM;
+}
+
+export default sdkStyles;
+export { setSize };