├── lint-staged.config.js ├── .husky ├── commit-msg └── pre-commit ├── CONTRIBUTING.md ├── package ├── config │ ├── contextHandler.ts │ └── constants.ts ├── base │ ├── ThemeManager.ts │ ├── constants.ts │ └── BaseStyle.ts ├── theme │ ├── themeUtil.ts │ ├── themeType.ts │ ├── cgpt.mui-theme.conf.json │ └── theme.ts ├── context │ ├── wrappidAction.ts │ ├── WrappidSyncer.tsx │ ├── WrappidContext.ts │ └── wrappidReducer.ts ├── package.json ├── styledComponents │ ├── LargeSCStyles.ts │ ├── MediumSCStyles.ts │ ├── XLargeSCStyles.ts │ ├── XXLargeSCStyles.ts │ ├── SmallSCStyles.ts │ ├── StyledComponentsClasses.ts │ └── DefaultSCStyles.ts ├── index.ts ├── StyleFlavour.ts ├── StyleReactNativeFlavour.ts ├── StylesProvider.tsx ├── StyleUtil.ts └── utility │ ├── LargeUtilityStyles.ts │ └── SmallUtilityStyles.ts ├── babel.config.json ├── .github ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── scripts │ ├── get_latest_package_details.sh │ ├── version_revert.sh │ └── version_bump.sh ├── workflows │ ├── publish-package.yml │ ├── create-release.yml │ ├── create-tag.yml │ └── pr-guardrails.yml └── pull_request_template.md ├── tsconfig.json ├── LICENSE ├── commitlint.config.js ├── .gitignore ├── package.json ├── README.md ├── scripts └── attributions.gen.js ├── .eslintrc.js └── CHANGELOG.md /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { "**/*.{js,jsx,ts,tsx}": ["npm run code:lint"] }; -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit ${1} 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## CONTRIBUTING 2 | All Wrappid repositories follow the same contributing guidelines available in the following link: 3 | https://github.com/wrappid/.github/blob/main/profile/CONTRIBUTING.md -------------------------------------------------------------------------------- /package/config/contextHandler.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const AppStylesContext = createContext({}); 4 | /** 5 | * CoreThemesContext holds all the themes provided by application 6 | */ 7 | export const ThemeContext = createContext({}); 8 | -------------------------------------------------------------------------------- /package/base/ThemeManager.ts: -------------------------------------------------------------------------------- 1 | import { BaseStyle } from "./BaseStyle"; 2 | import { DEFAULT_THEME_TYPES } from "../theme/themeType"; 3 | 4 | export class ThemeManager extends BaseStyle { 5 | refreshTheme(newTheme: DEFAULT_THEME_TYPES) { 6 | this.theme = newTheme; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package/theme/themeUtil.ts: -------------------------------------------------------------------------------- 1 | import { DEFAULT_THEME } from "./theme"; 2 | import { theme } from "../StylesProvider"; 3 | 4 | export function overrideThemeConfiguration() { 5 | const finalTheme = { ...DEFAULT_THEME, ...(theme || {}) }; 6 | 7 | return finalTheme; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/env", 5 | { 6 | "targets": { 7 | "chrome": "110" 8 | }, 9 | "useBuiltIns": "usage", 10 | "corejs": "3.6.5" 11 | } 12 | ], 13 | "@babel/preset-react" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /package/context/wrappidAction.ts: -------------------------------------------------------------------------------- 1 | import { UPDATE_MODULE_DATA } from "./wrappidReducer"; 2 | 3 | export const updateModuleContextData = 4 | (module: string, data: { [key: string]: any }) => 5 | (dispatch: (arg0: { payload: { data: { [key: string]: any; }; module: string; }; type: string; }) => void) => { 6 | dispatch({ 7 | payload: { 8 | data, 9 | module 10 | }, 11 | type: UPDATE_MODULE_DATA 12 | }); 13 | }; -------------------------------------------------------------------------------- /package/config/constants.ts: -------------------------------------------------------------------------------- 1 | import { theme } from "../StylesProvider"; 2 | 3 | // mui - BREAKPOINTS 4 | export const SMALL_WINDOW_WIDTH = theme?.breakpoints?.values?.sm; 5 | export const MEDIUM_WINDOW_WIDTH = theme?.breakpoints?.values?.md; 6 | export const LARGE_WINDOW_WIDTH = theme?.breakpoints?.values?.lg; 7 | export const X_LARGE_WINDOW_WIDTH = theme?.breakpoints?.values?.xl; 8 | // since XX_LARGE is not present in MUI-Breakpoints 9 | // applying same width as X_LARGE 10 | // so it could be supported later on 11 | export const XX_LARGE_WINDOW_WIDTH = theme?.breakpoints?.values?.xl; 12 | 13 | export interface CONFIG_TYPE{ 14 | wrappid: any 15 | } 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for styles package 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | valid_branch_names_regex="^WRPD-(feature|bugfix|release|ci|enhancement|hotfix|refactor|deps|docs|experimental|security)?-[0-9]+$|^main$|^development$" 5 | branch="$(git rev-parse --abbrev-ref HEAD)" 6 | 7 | if [ "$branch" = "main" ] || [ "$branch" = "development" ]; then 8 | echo "Committing on the $branch branch is not allowed." 9 | exit 1 10 | fi 11 | 12 | if ! [[ $branch =~ $valid_branch_n$branames_regex ]]; then 13 | echo "Invalid branch name: $branch; commit rejected" 14 | echo "Please rename your branch to conform to $valid_branch_names_regex pattern." 15 | exit 1 16 | fi 17 | 18 | npx lint-staged 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "module": "CommonJS", 5 | "declaration": true, 6 | "removeComments": true, 7 | "resolveJsonModule": true, 8 | "target": "ES2021", 9 | "sourceMap": false, 10 | "outDir": "./dist", 11 | "lib": ["dom", "esnext"], 12 | "importHelpers": true, 13 | "noImplicitReturns": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "moduleResolution": "node", 17 | "jsx": "react", 18 | "skipLibCheck": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "isolatedModules": true, 22 | "esModuleInterop": true, 23 | }, 24 | "include": ["package/**/*.ts", "package/**/*.tsx", "package/**/*.json"], 25 | "exclude": ["node_modules", "test", "dist", ".github", ".git", "temp"], 26 | } 27 | -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wrappid/styles", 3 | "version": "0.0.182", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo testing not yet implemented" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/wrappid/styles.git" 12 | }, 13 | "publishConfig": { 14 | "registry": "https://npm.pkg.github.com/" 15 | }, 16 | "keywords": [ 17 | "css-in-js", 18 | "react", 19 | "react-native" 20 | ], 21 | "license": "MIT", 22 | "author": { 23 | "name": "Wrappid", 24 | "email": "wrappid.framework@gmail.com", 25 | "url": "https://www.github.com/wrappid" 26 | }, 27 | "homepage": "https://github.com/wrappid/styles", 28 | "bugs": { 29 | "url": "https://github.com/wrappid/styles/issues" 30 | }, 31 | "peerDependencies": { 32 | "@emotion/react": "11.10.0", 33 | "@emotion/styled": "11.10.0", 34 | "react-redux": "8.0.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Stack Trace** 24 | The stack trace of the bug if any. 25 | 26 | **Screenshots** 27 | If applicable, add screenshots to help explain your problem. 28 | 29 | **Desktop (please complete the following information):** 30 | - OS: [e.g. iOS] 31 | - Browser [e.g. chrome, safari] 32 | - Version [e.g. 22] 33 | 34 | **Smartphone (please complete the following information):** 35 | - Device: [e.g. iPhone6] 36 | - OS: [e.g. iOS8.1] 37 | - Browser [e.g. stock browser, safari] 38 | - Version [e.g. 22] 39 | 40 | **Additional context** 41 | Add any other context about the problem here. 42 | -------------------------------------------------------------------------------- /package/base/constants.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable etc/no-commented-out-code */ 2 | export const PX_TAG = "px"; 3 | export const REM_TAG = "rem"; 4 | export const IMPORTANT = " !important"; 5 | 6 | /** 7 | * Spacing related defaults 8 | */ 9 | export const DEFAULT_MARGIN = 8; 10 | export const DEFAULT_PADDING = 8; 11 | export const DEFAULT_SPACING = 8; 12 | export const DEFAULT_WORD_SPACING = 1 / 16; 13 | 14 | /** 15 | * Border related defaults 16 | */ 17 | export const DEFAULT_BORDER_WIDTH = 1; 18 | export const DEFAULT_BORDER_STYLE = "solid"; 19 | export const DEFAULT_BORDER_COLOR = "black"; 20 | export const DEFAULT_BORDER_RADIUS = 4; 21 | // export const DEFAULT_BORDER = (DEFAULT_BORDER_WIDTH + PX_TAG + DEFAULT_BORDER_STYLE + " " + DEFAULT_BORDER_COLOR); 22 | 23 | export const DEFAULT_BORDER = { 24 | borderColor: DEFAULT_BORDER_COLOR, 25 | borderStyle: DEFAULT_BORDER_STYLE, 26 | borderWidth: DEFAULT_BORDER_WIDTH + PX_TAG, 27 | }; 28 | 29 | /** 30 | * Shadow related defaults 31 | */ 32 | // -- const DEFAULT_SHADOW_COLOR = "black"; 33 | export const DEFAULT_SHADOW_COLOR_RGB = "0,0,0"; 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 wrappid 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * List of commit types allowed in commit messages. 3 | * 4 | * @author Ananta Kumar Ghosh 5 | */ 6 | const types = [ 7 | "build", 8 | "chore", 9 | "ci", 10 | "docs", 11 | "feat", 12 | "fix", 13 | "perf", 14 | "refactor", 15 | "revert", 16 | "style", 17 | "test" 18 | ]; 19 | 20 | /** 21 | * List of commit scopes allowed in commit messages. 22 | */ 23 | const scopes = ["config", "core", "global", "utils"]; 24 | 25 | // eslint-disable-next-line no-undef 26 | module.exports = { 27 | extends: ["@commitlint/config-conventional"], 28 | 29 | parserPreset: { parserOpts: { issuePrefixes: ["#"] } }, 30 | 31 | rules: { 32 | "body-leading-blank" : [2, "always"], 33 | "body-max-line-length": [2, "always", 250], 34 | "footer-empty" : [2, "never"], 35 | "footer-leading-blank": [2, "always"], 36 | "references-empty" : [2, "never"], 37 | "scope-case" : [2, "always", "camel-case"], 38 | "scope-empty" : [0, "always"], 39 | "scope-enum" : [2, "always", scopes], 40 | "type-enum" : [2, "always", types], 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /.github/scripts/get_latest_package_details.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | TOKEN=$1 4 | 5 | # Set variables 6 | ORG="wrappid" 7 | PACKAGE_TYPE="npm" 8 | PACKAGE_NAME="styles" 9 | OUTPUT_FILE="package_details.json" 10 | 11 | # Set API endpoint 12 | API_ENDPOINT="https://api.github.com/orgs/$ORG/packages/$PACKAGE_TYPE/$PACKAGE_NAME/versions" 13 | 14 | # Make API request and save response to file 15 | curl -L -H "Accept: application/vnd.github+json" -H "Authorization: Bearer $TOKEN" -H "X-GitHub-Api-Version: 2022-11-28" $API_ENDPOINT > $OUTPUT_FILE 16 | 17 | # -X DELETE # deletes all versions 18 | 19 | 20 | is_array=$(jq 'if type == "array" then true else false end' package_details.json) 21 | 22 | if [ "$is_array" == "true" ]; then 23 | # If the JSON file contains an array, extract the id and name of the first object 24 | id=$(jq '.[0].id' package_details.json) 25 | name=$(jq -r '.[0].name' package_details.json) 26 | else 27 | # If the JSON file contains a direct object, extract its id and name 28 | id=$(jq '.id' package_details.json) 29 | name=$(jq -r '.name' package_details.json) 30 | fi 31 | 32 | # Print the extracted id and name 33 | echo $id > id.txt 34 | echo "id: $id" 35 | echo $name > name.txt 36 | echo "name: $name" 37 | -------------------------------------------------------------------------------- /.github/workflows/publish-package.yml: -------------------------------------------------------------------------------- 1 | name: Publish - CD 2 | 3 | on: 4 | workflow_dispatch: 5 | workflow_run: 6 | workflows: ["Release - CI"] 7 | types: 8 | - completed 9 | jobs: 10 | call-publish-package: 11 | # runs-on: ubuntu-latest 12 | permissions: write-all 13 | if: github.event.workflow_run.conclusion == 'success' || github.event_name == 'workflow_dispatch' 14 | uses: wrappid/workflows/.github/workflows/util-package-publish.yml@main 15 | with: 16 | EMAIL_NOTIFY: ${{ vars.EMAIL_NOTIFY }} 17 | EMAIL_SENDER_NAME: ${{ vars.EMAIL_SENDER_NAME }} 18 | secrets: 19 | WRAPPID_PUBLISH_TOKEN: ${{ secrets.WRAPPID_PUBLISH_TOKEN }} 20 | PAT: ${{ secrets.PAT }} 21 | EMAIL_SERVER_ADDRESS: ${{ secrets.EMAIL_SERVER_ADDRESS }} 22 | EMAIL_SERVER_PORT: ${{ secrets.EMAIL_SERVER_PORT }} 23 | EMAIL_USER_ID: ${{ secrets.EMAIL_USER_ID }} 24 | EMAIL_USER_PASSWORD: ${{ secrets.EMAIL_USER_PASSWORD }} 25 | EMAIL_TO: ${{ secrets.EMAIL_TO }} 26 | EMAIL_CC: ${{ secrets.EMAIL_CC }} ## Optional 27 | EMAIL_BCC: ${{ secrets.EMAIL_BCC }} ## Optional 28 | 29 | 30 | -------------------------------------------------------------------------------- /.github/workflows/create-release.yml: -------------------------------------------------------------------------------- 1 | name: Release - CI 2 | 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | tag-name: 7 | type: string 8 | description: Enter tag 9 | schedule: 10 | - cron: "30 16 * * *" 11 | branches: 12 | - 'development' 13 | repository_dispatch: 14 | 15 | jobs: 16 | call-create-app-release: 17 | permissions: write-all 18 | uses: wrappid/workflows/.github/workflows/util-create-package-release.yml@main 19 | with: 20 | GIT_USER_NAME: ${{ vars.GIT_USER_NAME }} 21 | EMAIL_NOTIFY: ${{ vars.EMAIL_NOTIFY }} 22 | EMAIL_SENDER_NAME: ${{ vars.EMAIL_SENDER_NAME }} 23 | TOOLKIT_VERSION: ${{ vars.TOOLKIT_VERSION }} 24 | secrets: 25 | PAT: ${{ secrets.PAT }} 26 | GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }} 27 | WRAPPID_REGISTRY_TOKEN: ${{ secrets.WRAPPID_REGISTRY_TOKEN }} 28 | EMAIL_SERVER_ADDRESS: ${{ secrets.EMAIL_SERVER_ADDRESS }} 29 | EMAIL_SERVER_PORT: ${{ secrets.EMAIL_SERVER_PORT }} 30 | EMAIL_USER_ID: ${{ secrets.EMAIL_USER_ID }} 31 | EMAIL_USER_PASSWORD: ${{ secrets.EMAIL_USER_PASSWORD }} 32 | EMAIL_TO: ${{ secrets.EMAIL_TO }} 33 | EMAIL_CC: ${{ secrets.EMAIL_CC }} ## Optional 34 | EMAIL_BCC: ${{ secrets.EMAIL_BCC }} ## Optional 35 | -------------------------------------------------------------------------------- /package/base/BaseStyle.ts: -------------------------------------------------------------------------------- 1 | import { DEFAULT_THEME } from "../theme/theme"; 2 | import { DEFAULT_THEME_TYPES } from "../theme/themeType"; 3 | 4 | let baseTheme: DEFAULT_THEME_TYPES = DEFAULT_THEME; 5 | 6 | export function updateTheme(newTheme: DEFAULT_THEME_TYPES) { 7 | baseTheme = { ...newTheme }; 8 | } 9 | 10 | export abstract class BaseStyle { 11 | _theme: DEFAULT_THEME_TYPES; 12 | /** 13 | * @todo style types required 14 | */ 15 | _style: any; 16 | 17 | constructor() { 18 | this._theme = { ...baseTheme }; 19 | /** 20 | * @todo 21 | * @techoneel please review 22 | */ 23 | // eslint-disable-next-line etc/no-commented-out-code 24 | // if ( 25 | // WrappidContext && 26 | // WrappidContext?.themes && 27 | // WrappidContext?.defaultTheme 28 | // ) { 29 | // this._theme = { 30 | // ...DEFAULT_THEME, 31 | // ...(WrappidContext?.themes[WrappidContext?.defaultTheme]?.theme || {}) 32 | // }; 33 | // } 34 | } 35 | 36 | get style() { 37 | return this._style; 38 | } 39 | 40 | /** 41 | * @todo style types required 42 | */ 43 | set style(styleObj: any) { 44 | this._style = styleObj; 45 | } 46 | 47 | get theme() { 48 | return this._theme; 49 | } 50 | 51 | set theme(themeObj: DEFAULT_THEME_TYPES) { 52 | this._theme = themeObj; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /.github/scripts/version_revert.sh: -------------------------------------------------------------------------------- 1 | # Specify the dependency to revert 2 | DEPENDENCY="version" 3 | VERSION_TYPE=patch 4 | # Specify the paths to the package.json files 5 | PACKAGE_JSON_PATHS=("package.json" "package/package.json") 6 | 7 | for PACKAGE_JSON_PATH in "${PACKAGE_JSON_PATHS[@]}"; do 8 | 9 | # Get the current version of the dependency 10 | CURRENT_VERSION=$(cat "$PACKAGE_JSON_PATH" | grep $DEPENDENCY | awk -F: '{ print $2 }' | sed 's/[",]//g' | tr -d '[[:space:]]') 11 | 12 | # Decrement the specified version type 13 | if [ "$VERSION_TYPE" == "major" ]; then 14 | NEW_VERSION=$(echo $CURRENT_VERSION | awk -F. '{$1 = $1 - 1; $2 = 0; $3 = 0;} 1' | sed 's/ /./g') 15 | elif [ "$VERSION_TYPE" == "minor" ]; then 16 | NEW_VERSION=$(echo $CURRENT_VERSION | awk -F. '{$2 = $2 - 1; $3 = 0;} 1' | sed 's/ /./g') 17 | else 18 | NEW_VERSION=$(echo $CURRENT_VERSION | awk -F. '{$NF = $NF - 1;} 1' | sed 's/ /./g') 19 | fi 20 | 21 | # Check if the new version is valid (not negative) 22 | # if [[ "$NEW_VERSION" == *-* ]]; then 23 | # #echo "Error: Cannot revert version below 0" 24 | # break 25 | # else 26 | # continue 27 | # fi 28 | 29 | # Update the version in package.json 30 | sed -i "s|\"$DEPENDENCY\": \"$CURRENT_VERSION\"|\"$DEPENDENCY\": \"$NEW_VERSION\"|" "$PACKAGE_JSON_PATH" 31 | 32 | done 33 | echo "$VERSION_TYPE version reverted $DEPENDENCY from $CURRENT_VERSION to $NEW_VERSION" -------------------------------------------------------------------------------- /.github/scripts/version_bump.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Get the argument 4 | #echo Enter repo name: 5 | #repo=test1 6 | #echo Specify type- patch, minor. 7 | VERSION_TYPE=patch 8 | 9 | 10 | # Specify the dependency to bump 11 | DEPENDENCY="version" 12 | 13 | # Specify the paths to the package.json files 14 | PACKAGE_JSON_PATHS=("package.json" "package/package.json") 15 | 16 | for PACKAGE_JSON_PATH in "${PACKAGE_JSON_PATHS[@]}"; do 17 | # Get the current version of the dependency 18 | CURRENT_VERSION=$(cat "$PACKAGE_JSON_PATH" | grep $DEPENDENCY | awk -F: '{ print $2 }' | sed 's/[",]//g' | tr -d '[[:space:]]') 19 | 20 | # Increment the specified version type 21 | if [ "$VERSION_TYPE" == "major" ]; then 22 | NEW_VERSION=$(echo $CURRENT_VERSION | awk -F. '{$1 = $1 + 1; $2 = 0; $3 = 0;} 1' | sed 's/ /./g') 23 | elif [ "$VERSION_TYPE" == "minor" ]; then 24 | NEW_VERSION=$(echo $CURRENT_VERSION | awk -F. '{$2 = $2 + 1; $3 = 0;} 1' | sed 's/ /./g') 25 | else 26 | NEW_VERSION=$(echo $CURRENT_VERSION | awk -F. '{$NF = $NF + 1;} 1' | sed 's/ /./g') 27 | fi 28 | 29 | # Update the version in package.json 30 | sed -i "s|\"$DEPENDENCY\": \"$CURRENT_VERSION\"|\"$DEPENDENCY\": \"$NEW_VERSION\"|" "$PACKAGE_JSON_PATH" 31 | 32 | #echo "$VERSION_TYPE bumped $DEPENDENCY from $CURRENT_VERSION to $NEW_VERSION in $PACKAGE_JSON_PATH" 33 | done 34 | echo "$VERSION_TYPE bumped $DEPENDENCY from $CURRENT_VERSION to $NEW_VERSION" 35 | -------------------------------------------------------------------------------- /package/styledComponents/LargeSCStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | 4 | export default class LargeSCStyles extends BaseStyle { 5 | constructor() { 6 | super(); 7 | 8 | this.style = { 9 | /************************************************** 10 | * INPUTS 11 | *************************************************/ 12 | scInputsButton : {}, 13 | scInputsTextField: {}, 14 | /************************************************** 15 | * DATA DISPLAY 16 | *************************************************/ 17 | /************************************************** 18 | * FEEDBACK 19 | *************************************************/ 20 | /************************************************** 21 | * SURFACES 22 | *************************************************/ 23 | /************************************************** 24 | * NAVIGATION 25 | *************************************************/ 26 | scNavigationTab : {}, 27 | scNavigationTabs : {} 28 | /************************************************** 29 | * LAYOUTS 30 | *************************************************/ 31 | /************************************************** 32 | * UTILS 33 | *************************************************/ 34 | }; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package/styledComponents/MediumSCStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | 4 | export default class MediumSCStyles extends BaseStyle { 5 | constructor() { 6 | super(); 7 | 8 | this.style = { 9 | /************************************************** 10 | * INPUTS 11 | *************************************************/ 12 | scInputsButton : {}, 13 | scInputsTextField: {}, 14 | /************************************************** 15 | * DATA DISPLAY 16 | *************************************************/ 17 | /************************************************** 18 | * FEEDBACK 19 | *************************************************/ 20 | /************************************************** 21 | * SURFACES 22 | *************************************************/ 23 | /************************************************** 24 | * NAVIGATION 25 | *************************************************/ 26 | scNavigationTab : {}, 27 | scNavigationTabs : {} 28 | /************************************************** 29 | * LAYOUTS 30 | *************************************************/ 31 | /************************************************** 32 | * UTILS 33 | *************************************************/ 34 | }; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package/styledComponents/XLargeSCStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | 4 | export default class XLargeSCStyles extends BaseStyle { 5 | constructor() { 6 | super(); 7 | 8 | this.style = { 9 | /************************************************** 10 | * INPUTS 11 | *************************************************/ 12 | scInputsButton : {}, 13 | scInputsTextField: {}, 14 | /************************************************** 15 | * DATA DISPLAY 16 | *************************************************/ 17 | /************************************************** 18 | * FEEDBACK 19 | *************************************************/ 20 | /************************************************** 21 | * SURFACES 22 | *************************************************/ 23 | /************************************************** 24 | * NAVIGATION 25 | *************************************************/ 26 | scNavigationTab : {}, 27 | scNavigationTabs : {} 28 | /************************************************** 29 | * LAYOUTS 30 | *************************************************/ 31 | /************************************************** 32 | * UTILS 33 | *************************************************/ 34 | }; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package/styledComponents/XXLargeSCStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | 4 | export default class XXLargeSCStyles extends BaseStyle { 5 | constructor() { 6 | super(); 7 | 8 | this.style = { 9 | /************************************************** 10 | * INPUTS 11 | *************************************************/ 12 | scInputsButton : {}, 13 | scInputsTextField: {}, 14 | /************************************************** 15 | * DATA DISPLAY 16 | *************************************************/ 17 | /************************************************** 18 | * FEEDBACK 19 | *************************************************/ 20 | /************************************************** 21 | * SURFACES 22 | *************************************************/ 23 | /************************************************** 24 | * NAVIGATION 25 | *************************************************/ 26 | scNavigationTab : {}, 27 | scNavigationTabs : {} 28 | /************************************************** 29 | * LAYOUTS 30 | *************************************************/ 31 | /************************************************** 32 | * UTILS 33 | *************************************************/ 34 | }; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Clearly describe the changes you've made in this pull request. Explain the purpose and reasoning behind the changes. Reference any relevant issues or discussions using keywords like "Fixes #" or "Resolves #". 4 | 5 | ## Related Issues 6 | 7 | 8 | 9 | ## Testing 10 | 11 | 12 | ## Checklist 13 | 14 | - [ ] I have performed a thorough self-review of my code. 15 | - [ ] I have added or updated relevant tests for my changes. 16 | - [ ] My code follows the project's style guidelines and best practices. 17 | - [ ] I have updated the documentation if necessary. 18 | - [ ] I have added or updated relevant comments in my code. 19 | - [ ] I have resolved any merge conflicts of my branch. 20 | 21 | 22 | ## Screenshots (if applicable) 23 | 24 | 25 | ## Additional Notes 26 | 27 | 28 | 29 | ## Reviewers 30 | 31 | 34 | 35 | --- 36 | 37 | ## Maintainer Notes 38 | 39 | - [ ] Has this change been tested in a staging environment? 40 | - [ ] Does this change introduce any breaking changes or deprecations? 41 | -------------------------------------------------------------------------------- /package/styledComponents/SmallSCStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | import { IMPORTANT } from "../base/constants"; 4 | 5 | export default class SmallSCStyles extends BaseStyle { 6 | constructor() { 7 | super(); 8 | 9 | this.style = { 10 | /************************************************** 11 | * DATA DISPLAY 12 | *************************************************/ 13 | /************************************************** 14 | * FEEDBACK 15 | *************************************************/ 16 | scFeedbackDialog: { 17 | minHeight: "30%" + IMPORTANT, 18 | minWidth : "25%" + IMPORTANT 19 | }, 20 | 21 | /************************************************** 22 | * INPUTS 23 | *************************************************/ 24 | scInputsButton: {}, 25 | 26 | scInputsTextField: {}, 27 | /************************************************** 28 | * SURFACES 29 | *************************************************/ 30 | /************************************************** 31 | * NAVIGATION 32 | *************************************************/ 33 | scNavigationTab : {}, 34 | scNavigationTabs : {} 35 | /************************************************** 36 | * LAYOUTS 37 | *************************************************/ 38 | /************************************************** 39 | * UTILS 40 | *************************************************/ 41 | }; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /package/context/WrappidSyncer.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // eslint-disable-next-line import/order 4 | import { DEFAULT_THEME } from "../theme/theme"; 5 | import { 6 | WrapidDataType, 7 | WrappidDataContext, 8 | WrappidDispatchContext, 9 | updateWrappidContext, 10 | wrappidInitialData 11 | } from "./WrappidContext"; 12 | import wrappidReducer, { UPDATE_DATA } from "./wrappidReducer"; 13 | 14 | export let WrappidData: WrapidDataType = { ...wrappidInitialData }; 15 | 16 | export default function WrappidSyncer({ 17 | children, 18 | data, 19 | }: { 20 | children: any; 21 | data: WrapidDataType; 22 | }) { 23 | const [wrappidReducerState, dispatch] = React.useReducer( 24 | wrappidReducer, 25 | wrappidInitialData 26 | ); 27 | 28 | React.useEffect(() => { 29 | /** 30 | * @todo 31 | * update (global/store/react)context value 32 | */ 33 | /* add default wrappid theme */ 34 | data.themes = { 35 | ...data?.themes, 36 | wrappidTheme: { name: "Wrappid Theme", theme: DEFAULT_THEME }, 37 | }; 38 | updateWrappidContext(data); 39 | dispatch({ payload: data, type: UPDATE_DATA }); 40 | WrappidData = data; 41 | }, [data]); 42 | 43 | React.useEffect(() => { 44 | /** 45 | * @todo 46 | * update (global/store/react)context value on (store/react)context change 47 | */ 48 | console.log(wrappidReducerState); 49 | 50 | updateWrappidContext(wrappidReducerState); 51 | WrappidData = wrappidReducerState; 52 | }, [wrappidReducerState]); 53 | 54 | return ( 55 | 56 | 57 | {children} 58 | 59 | 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /.github/workflows/create-tag.yml: -------------------------------------------------------------------------------- 1 | name: Create-Tag 2 | 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | version_type: 7 | type: choice 8 | description: Choose version bump type 9 | options: 10 | - -r major 11 | - -r minor 12 | - -r patch 13 | - -p alpha 14 | - -p beta 15 | - -p build 16 | - -p hotfix 17 | - -p dev 18 | required: true 19 | default: "-r patch" 20 | pull_request: 21 | types: 22 | - closed 23 | branches: 24 | - 'development' 25 | 26 | jobs: 27 | call-create-tag: 28 | # runs-on: ubuntu-latest 29 | permissions: write-all 30 | if: github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.merged == true && github.event.pull_request.base.ref == 'development') 31 | uses: wrappid/workflows/.github/workflows/util-create-tag.yml@main 32 | with: 33 | GIT_USER_NAME: ${{ vars.GIT_USER_NAME }} 34 | VERSION_TYPE_REPOSITORY_DEFAULT: ${{ vars.VERSION_TYPE_REPOSITORY_DEFAULT }} 35 | EMAIL_NOTIFY: ${{ vars.EMAIL_NOTIFY }} 36 | EMAIL_SENDER_NAME: ${{ vars.EMAIL_SENDER_NAME }} 37 | secrets: 38 | PAT: ${{ secrets.PAT }} 39 | GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }} 40 | WRAPPID_REGISTRY_TOKEN: ${{ secrets.WRAPPID_REGISTRY_TOKEN }} 41 | EMAIL_SERVER_ADDRESS: ${{ secrets.EMAIL_SERVER_ADDRESS }} 42 | EMAIL_SERVER_PORT: ${{ secrets.EMAIL_SERVER_PORT }} 43 | EMAIL_USER_ID: ${{ secrets.EMAIL_USER_ID }} 44 | EMAIL_USER_PASSWORD: ${{ secrets.EMAIL_USER_PASSWORD }} 45 | EMAIL_TO: ${{ secrets.EMAIL_TO }} 46 | EMAIL_CC: ${{ secrets.EMAIL_CC }} ## Optional 47 | EMAIL_BCC: ${{ secrets.EMAIL_BCC }} ## Optional 48 | -------------------------------------------------------------------------------- /package/context/WrappidContext.ts: -------------------------------------------------------------------------------- 1 | import React, { type Dispatch } from "react"; 2 | 3 | import { DEFAULT_THEME } from "../theme/theme"; 4 | import { DEFAULT_THEME_TYPES } from "../theme/themeType"; 5 | 6 | type WrappidConfigDatatype = { 7 | environment: string; 8 | platform: string; 9 | defaultRoute?: string; 10 | defaultAuthenticatedRoute?: string; 11 | defaultLayout?: string; 12 | defaultAuthenticatedLayout?: string; 13 | defaultTheme?: string; 14 | backendUrl?: string; 15 | webUrl?: string; 16 | drawerWidth?: number; 17 | miniDrawerWidth?: number; 18 | snackMessage?: boolean; 19 | otpLength?: number; 20 | }; 21 | 22 | type DimensionsType = { 23 | screenFontScale?: any; 24 | screenHeight?: any; 25 | screenScale?: any; 26 | screenWidth?: any; 27 | windowFontScale?: any; 28 | windowHeight?: any; 29 | windowScale?: any; 30 | windowWidth?: any; 31 | }; 32 | 33 | export type WrapidDataType = { 34 | dimensions: DimensionsType; 35 | config: WrappidConfigDatatype; 36 | development: {[key: string]: any} 37 | pageThemeID: string | undefined; 38 | themes?: { [key: string]: { name: string; theme: DEFAULT_THEME_TYPES } }; 39 | modules?: {[key: string]: {[key: string]: any}}; 40 | dynamic?: {[key: string]: boolean}; 41 | }; 42 | export const wrappidInitialData: WrapidDataType = { 43 | config : { defaultTheme: "WrappidTheme", environment: "devlopment", platform: "web" }, 44 | development: {}, 45 | dimensions : {}, 46 | modules : {}, 47 | pageThemeID: undefined, 48 | themes : { wrappidTheme: { name: "Wrappid Theme", theme: DEFAULT_THEME } } 49 | }; 50 | 51 | export const WrappidDataContext = 52 | React.createContext(wrappidInitialData); 53 | 54 | export const WrappidDispatchContext = React.createContext< 55 | Dispatch<{ type: string; payload: object | string }> 56 | >(() => null); 57 | 58 | const WrappidContext = { ...wrappidInitialData }; 59 | 60 | export const updateWrappidContext = (value: WrapidDataType) => { 61 | Object.assign(WrappidContext, value); 62 | }; 63 | export const resetWrappidContext = () => { 64 | Object.assign(WrappidContext, wrappidInitialData); 65 | }; 66 | 67 | export default WrappidContext; 68 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | # Dependency Files 107 | package.json 108 | package-lock.json 109 | ./package/package.json 110 | ./package/package-lock.json 111 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wrappid/styles", 3 | "version": "0.0.182", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "prepare": "husky install", 8 | "attributions:gen": "node ./scripts/attributions.gen.js", 9 | "code:lint": "eslint --ignore-path .gitignore ./package", 10 | "code:format": "npm run code:lint -- --fix", 11 | "test": "echo testing not yet implemented", 12 | "build:old": "npx babel package --out-dir dist --copy-files", 13 | "build": "npx tsc", 14 | "release": "standard-version --bumpFiles ./package.json ./package/package.json ./package-lock.json ./package/package-lock.json", 15 | "publish": "npm publish *.tgz --registry=https://npm.pkg.github.com --scope=@wrappid" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/wrappid/styles.git" 20 | }, 21 | "keywords": [ 22 | "css-in-js", 23 | "react", 24 | "react-native" 25 | ], 26 | "license": "MIT", 27 | "author": { 28 | "name": "Wrappid", 29 | "email": "wrappid.framework@gmail.com", 30 | "url": "https://www.github.com/wrappid" 31 | }, 32 | "homepage": "https://github.com/wrappid/styles", 33 | "bugs": { 34 | "url": "https://github.com/wrappid/styles/issues" 35 | }, 36 | "babel": { 37 | "presets": [ 38 | "@babel/preset-react" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "@babel/cli": "7.21.0", 43 | "@babel/core": "7.21.0", 44 | "@babel/polyfill": "7.12.1", 45 | "@babel/preset-env": "7.20.2", 46 | "@babel/preset-react": "7.18.6", 47 | "@babel/preset-typescript": "7.23.3", 48 | "@commitlint/cli": "17.5.0", 49 | "@commitlint/config-conventional": "17.4.4", 50 | "@commitlint/prompt-cli": "17.5.0", 51 | "@types/node": "20.10.4", 52 | "@types/react": "18.2.43", 53 | "@typescript-eslint/eslint-plugin": "6.19.1", 54 | "eslint": "8.7.0", 55 | "eslint-plugin-etc": "2.0.3", 56 | "eslint-plugin-import": "2.29.1", 57 | "eslint-plugin-react": "7.32.2", 58 | "eslint-plugin-sort-keys-fix": "1.1.2", 59 | "eslint-plugin-unused-imports": "3.0.0", 60 | "husky": "8.0.3", 61 | "prettier": "2.5.1", 62 | "source-map-support": "0.5.21", 63 | "tslib": "2.6.2", 64 | "typescript": "5.3.3", 65 | "license-checker": "25.0.1", 66 | "standard-version": "9.5.0", 67 | "@emotion/react": "11.10.0", 68 | "@emotion/styled": "11.10.0", 69 | "react-redux": "8.0.2" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /package/index.ts: -------------------------------------------------------------------------------- 1 | import { BaseStyle } from "./base/BaseStyle"; 2 | import { DEFAULT_PADDING, IMPORTANT, PX_TAG } from "./base/constants"; 3 | import { 4 | LARGE_WINDOW_WIDTH, 5 | MEDIUM_WINDOW_WIDTH, 6 | SMALL_WINDOW_WIDTH, 7 | X_LARGE_WINDOW_WIDTH, 8 | XX_LARGE_WINDOW_WIDTH 9 | } from "./config/constants"; 10 | import { ThemeContext } from "./config/contextHandler"; 11 | import { updateModuleContextData } from "./context/wrappidAction"; 12 | import WrappidContext, { 13 | resetWrappidContext, 14 | updateWrappidContext, 15 | WrappidDataContext, 16 | WrappidDispatchContext 17 | } from "./context/WrappidContext"; 18 | import { UPDATE_DEFAULT_THEME, UPDATE_DEVELOPMENT_DATA, UPDATE_MODULE_DATA, UPDATE_PAGE_THEME } from "./context/wrappidReducer"; 19 | import WrappidSyncer, { WrappidData } from "./context/WrappidSyncer"; 20 | import StyledComponentsClasses from "./styledComponents/StyledComponentsClasses"; 21 | import StylesProvider, { theme } from "./StylesProvider"; 22 | import { getEffectiveStyle } from "./StyleUtil"; 23 | import { DEFAULT_THEME } from "./theme/theme"; 24 | import { overrideThemeConfiguration } from "./theme/themeUtil"; 25 | import DefaultUtilityStyles from "./utility/DefaultUtilityStyles"; 26 | import LargeUtilityStyles from "./utility/LargeUtilityStyles"; 27 | import MediumUtilityStyles from "./utility/MediumUtilityStyles"; 28 | import SmallUtilityStyles from "./utility/SmallUtilityStyles"; 29 | import UtilityClasses from "./utility/UtilityClasses"; 30 | import XLargeUtilityStyles from "./utility/XLargeUtilityStyles"; 31 | import XXLargeUtilityStyles from "./utility/XXLargeUtilityStyles"; 32 | 33 | export { 34 | BaseStyle, DEFAULT_PADDING, DEFAULT_THEME, DefaultUtilityStyles, 35 | /** 36 | * Utility Function(s) 37 | */ 38 | getEffectiveStyle, IMPORTANT, LARGE_WINDOW_WIDTH, LargeUtilityStyles, MEDIUM_WINDOW_WIDTH, MediumUtilityStyles, overrideThemeConfiguration, PX_TAG, resetWrappidContext, 39 | /** 40 | * Window Width Constants 41 | */ 42 | SMALL_WINDOW_WIDTH, SmallUtilityStyles, 43 | /** 44 | * Style Classes Constants 45 | */ 46 | StyledComponentsClasses, StylesProvider, theme, ThemeContext, UPDATE_DEFAULT_THEME, UPDATE_DEVELOPMENT_DATA, UPDATE_MODULE_DATA, UPDATE_PAGE_THEME, updateModuleContextData, updateWrappidContext, 47 | /** 48 | * Utility styles 49 | */ 50 | UtilityClasses, 51 | /** 52 | * Wrappid Context 53 | */ 54 | WrappidContext, WrappidData, WrappidDataContext, 55 | WrappidDispatchContext, WrappidSyncer, X_LARGE_WINDOW_WIDTH, XLargeUtilityStyles, XX_LARGE_WINDOW_WIDTH, XXLargeUtilityStyles 56 | }; 57 | 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Wrappid styles package [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/wrappid/styles/blob/main/LICENSE) ![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fwrappid%2Fstyles%2Freleases%2Flatest&query=tag_name&label=%40wrappid%2Fstyles) [![Release - CI](https://github.com/wrappid/styles/actions/workflows/create-release.yml/badge.svg?branch=development)](https://github.com/wrappid/styles/actions/workflows/create-release.yml) 2 | 3 | This repository deals with the primary styling package, @wrappid/styles, of the wrappid framework. 4 | 5 | The @wrappid/styles package primarily has the following: 6 | 7 | * Utility styles 8 | * StyledComponent styles 9 | * Themes 10 | * Some common features and functionalities 11 | 12 | Before we jump into the details of each of the above, we must get aware of the philosophy behind the @wrappid/styles package. 13 | 14 | ## The Philosophy behind 15 | 16 | The philosophy behind the @wrappid/styles package: 17 | 18 | * Styling in wrappid follows a smallest screen first approach, which in other words is also known as mobile first approach 19 | * Styling in wrappid is segregated over different areas 20 | * @wrappid/styles supports 5 areas, Module, App, Core, StyledComponent (used for Native layer) and Utility (built primarily inspired from Bootstrap); Note: this package only contains the Utility and StyledComponent styles 21 | * Writing styles is distributed over several screen sizes 22 | * @wrappid/styles supports 6 screen sizes, Default (xs), Small (sm), Medium (md), Large (lg), XLarge (xl) and XXLarge (xxl) 23 | * Styling is built in an incremental manner of screen sizes, which means, 24 | * Common styles for any component are written in the smallest screen size file; generally known as xs (extra-small), Default in case of @wrappid/styles 25 | * Screen size specific styles for any component are written in the screen size specific files, namely, SmallUtilityStyles, MediumUtilityStyles, \UtilityStyles… 26 | * All styles are identified by “class” with unique classnames and are maintained in \Classess files as constants 27 | 28 | ## The Files involved 29 | 30 | Every area of styling has 7 files involved. We will take the case of Utility styles as an example to understand the files involved. 31 | 32 | Below are the files involved: 33 | 34 | 1. UtilityClasses \- Contains CONSTANTS for the classname(s) 35 | 2. DefaultUtilityStyles \- Contains styles belonging to smallest (xs) screen size 36 | 3. SmallUtilityStyles \- Contains styles belonging to small (sm) screen size 37 | 4. MediumUtilityStyles \- Contains styles belonging to medium (md) screen size 38 | 5. LargeUtilityStyles \- Contains styles belonging to large (lg) screen size 39 | 6. XLargeUtilityStyles \- Contains styles belonging to xlarge (xl) screen size 40 | 7. XXLargeUtilityStyles \- Contains styles belonging to xxlarge (xxl) screen size 41 | 42 | We will have the same set of 7 files for all other areas. 43 | 44 | ## Understanding the Naming 45 | 46 | A simple pictorial explanation of the naming convention. 47 | ![image](https://github.com/user-attachments/assets/a513a530-de3b-4a2f-b1fb-2b314732f7cb) 48 | -------------------------------------------------------------------------------- /package/context/wrappidReducer.ts: -------------------------------------------------------------------------------- 1 | import { WrapidDataType, wrappidInitialData } from "./WrappidContext"; 2 | 3 | export const UPDATE_DATA = "UPDATE_DATA"; 4 | export const UPDATE_DIMENSIONS = "UPDATE_DIMENSIONS"; 5 | export const UPDATE_DEVELOPMENT_DATA = "UPDATE_DEVELOPMENT_DATA"; 6 | export const RESET_DATA = "RESET_DATA"; 7 | export const UPDATE_DEFAULT_THEME = "UPDATE_DEFAULT_THEME"; 8 | export const UPDATE_PAGE_THEME = "UPDATE_PAGE_THEME"; 9 | export const UPDATE_MODULE_DATA = "UPDATE_MODULE_DATA"; 10 | 11 | export type PayloadType = any; 12 | 13 | const wrappidReducer = ( 14 | state: WrapidDataType = wrappidInitialData, 15 | { type, payload }: { type: string; payload: PayloadType } 16 | ) => { 17 | switch (type) { 18 | case UPDATE_DIMENSIONS: { 19 | return { ...state, dimensions: payload }; 20 | } 21 | 22 | case UPDATE_DATA: { 23 | if (typeof payload === "object") { 24 | return { ...state, ...payload }; 25 | } else { 26 | return state; 27 | } 28 | } 29 | 30 | case UPDATE_DEVELOPMENT_DATA: { 31 | if (typeof payload === "object") { 32 | return { ...state, development: { ...state.development, ...payload } }; 33 | } else { 34 | return state; 35 | } 36 | } 37 | 38 | case UPDATE_DEFAULT_THEME: { 39 | if ( 40 | typeof payload === "string" && 41 | Object.keys(state?.themes || {})?.includes(payload) 42 | ) { 43 | return { ...state, config: { ...state.config, defaultTheme: payload } }; 44 | } else { 45 | return state; 46 | } 47 | } 48 | 49 | case UPDATE_PAGE_THEME: { 50 | if ( 51 | typeof payload === "string" && 52 | Object.keys(state?.themes || {})?.includes(payload) 53 | ) { 54 | return { ...state, pageThemeID: payload }; 55 | } else { 56 | return state; 57 | } 58 | } 59 | 60 | case UPDATE_MODULE_DATA: { 61 | if ( 62 | typeof payload === "object" && 63 | Object.prototype.hasOwnProperty.call(payload, "module") && 64 | Object.prototype.hasOwnProperty.call(payload, "data") 65 | ) { 66 | const { 67 | module, 68 | data, 69 | }: { module: string; data: { [key: string]: any } } = payload; 70 | const modules: { [key: string]: { [key: string]: any } } = < 71 | { [key: string]: { [key: string]: any } } 72 | >state.modules; 73 | 74 | let moduleData = { ...data }; 75 | 76 | if ( 77 | Object.keys(modules).length > 0 && 78 | Object.prototype.hasOwnProperty.call(modules, module) && 79 | Object.keys(modules[module]).length > 0 80 | ) { 81 | moduleData = { ...modules[module], ...moduleData }; 82 | } 83 | 84 | return { 85 | ...state, 86 | modules: { 87 | ...modules, 88 | [module]: moduleData, 89 | }, 90 | }; 91 | } else { 92 | return state; 93 | } 94 | } 95 | 96 | case RESET_DATA: { 97 | return wrappidInitialData; 98 | } 99 | 100 | default: { 101 | return state; 102 | } 103 | } 104 | }; 105 | 106 | export default wrappidReducer; 107 | -------------------------------------------------------------------------------- /scripts/attributions.gen.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | // eslint-disable-next-line @typescript-eslint/no-var-requires 3 | const fs = require("fs"); 4 | // eslint-disable-next-line @typescript-eslint/no-var-requires 5 | const path = require("path"); 6 | 7 | // eslint-disable-next-line @typescript-eslint/no-var-requires 8 | const licenseChecker = require("license-checker"); 9 | 10 | // eslint-disable-next-line @typescript-eslint/no-var-requires 11 | const packageJson = require("../package.json"); 12 | 13 | /** 14 | * Generate ATTRIBUTIONS.md file listing third-party dependencies and their licenses. 15 | */ 16 | 17 | try { 18 | // eslint-disable-next-line no-undef 19 | const packagePath = path.join(__dirname, "./../"); 20 | // eslint-disable-next-line no-undef 21 | const attributionMdPath = path.join(__dirname, "./../ATTRIBUTIONS.md"); 22 | 23 | // Attribution header 24 | const attributionHeader = ` 25 | ## ATTRIBUTIONS 26 | 27 | This file lists the third-party libraries, frameworks, and other components used in the ${packageJson?.name} repository, 28 | along with their respective licenses. 29 | It is important to comply with the licensing terms of these components when using the code 30 | \n`; 31 | 32 | licenseChecker.init({ start: packagePath }, function(err, packages) { 33 | if (err) { 34 | throw err; 35 | } else { 36 | let markdownContent = attributionHeader + generateMarkdown(packages); 37 | 38 | fs.writeFileSync(attributionMdPath, markdownContent); 39 | console.log("ATTRIBUTIONS.md file generated successfully."); 40 | } 41 | }); 42 | } catch (error) { 43 | console.error("An error occurred while generating ATTRIBUTIONS.md file."); 44 | console.error(error); 45 | } 46 | 47 | /** 48 | * Convert JSON data to markdown format. 49 | * @param {object} packages - JSON object containing package information. 50 | * @returns {string} Markdown content. 51 | */ 52 | function generateMarkdown(packages) { 53 | let markdownContent = ""; 54 | 55 | Object.keys(packages).forEach(packageName => { 56 | markdownContent += convertJsonToMDFormat(packageName, packages[packageName]); 57 | }); 58 | 59 | return markdownContent; 60 | } 61 | 62 | /** 63 | * Convert package information to markdown format. 64 | * @param {string} packageName - Name of the package. 65 | * @param {object} packageInfo - Information about the package. 66 | * @returns {string} Markdown content. 67 | */ 68 | function convertJsonToMDFormat(packageName, packageInfo) { 69 | const { 70 | licenses, repository, publisher, url, licenseFile, email 71 | } = packageInfo; 72 | 73 | const packageVersion = packageName.match(/[0-9.]+/g)?.join("") || "NA"; 74 | 75 | const extractPackageName = packageName => packageName.substring(0, packageName.lastIndexOf("@")).replace("@", ""); 76 | 77 | return ` 78 |
79 | ${packageName} 80 | 81 | #### Basic details about the package 82 | >| Key | Value | 83 | >| --- | --- | 84 | >| **Name** | ${extractPackageName(packageName) || "NA"} | 85 | >| **Version** | ${packageVersion} | 86 | >| **Repository** | ${repository || "NA"} | 87 | >| **Licenses** | [${licenses || "NA"}](${licenseFile}) | 88 | >| **Publisher** | ${publisher || "NA"} | 89 | >| **Contact** | ${email || "NA"} | 90 | >| **Homepage** | ${url || "NA"} | 91 | 92 | #### Use this package in your project 93 | \`\`\`bash 94 | npm i ${packageName} 95 | \`\`\` 96 |
97 | `; 98 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | module.exports = { 3 | env: { 4 | browser: true, 5 | es2021 : true, 6 | node : true, 7 | }, 8 | extends : ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:import/recommended", "plugin:react/recommended"], 9 | ignorePatterns: ["**/node_modules/*", "**/template/**", ".eslintrc.js"], 10 | overrides : [], 11 | parser : "@typescript-eslint/parser", 12 | parserOptions : { 13 | ecmaVersion : "latest", 14 | sourceType : "module", 15 | ecmaFeatures: { jsx: true }, 16 | }, 17 | settings: { 18 | "import/resolver": { node: { extensions: [".js", ".jsx", ".ts", ".tsx"] } }, 19 | react : { version: "detect" }, 20 | }, 21 | plugins: [ 22 | "@typescript-eslint", 23 | "etc", 24 | "import", 25 | "sort-keys-fix", 26 | "unused-imports", 27 | "react", 28 | ], 29 | rules: { 30 | "@typescript-eslint/no-unused-vars" : "warn", 31 | "@typescript-eslint/no-explicit-any": "off", 32 | "no-inline-comments" : "off", 33 | "no-commented-out-code" : "off", 34 | "multiline-comment-style" : "off", 35 | "no-useless-catch" : "off", 36 | "array-bracket-newline" : [ 37 | "error", 38 | { 39 | minItems : 5, 40 | multiline: true, 41 | }, 42 | ], 43 | "array-bracket-spacing" : ["error", "never"], 44 | "array-element-newline" : ["error", { minItems: 5, multiline: true }], 45 | "comma-dangle" : ["error", { arrays: "only-multiline", objects: "only-multiline" }], 46 | "comma-spacing" : ["error", { after: true, before: false }], 47 | "etc/no-commented-out-code": "error", 48 | "id-length" : ["error", { exceptions: ["i", "j", "id"], min: 2, properties: "never" }], 49 | "import/order" : [ 50 | "error", 51 | { 52 | alphabetize: { 53 | caseInsensitive: true, 54 | order : "asc", 55 | }, 56 | groups : ["builtin", "external", "internal"], 57 | "newlines-between": "always", 58 | }, 59 | ], 60 | indent : ["error", 2, { MemberExpression: 1, SwitchCase: 1 }], 61 | "key-spacing" : ["error", { align: "colon" }], 62 | "linebreak-style" : ["error", "unix"], 63 | "newline-after-var" : ["error", "always"], 64 | "newline-per-chained-call": ["error", { ignoreChainWithDepth: 3 }], 65 | "no-console" : "off", 66 | "no-multi-spaces" : ["error", { exceptions: { VariableDeclarator: true } }], 67 | "no-multiple-empty-lines" : ["error", { max: 1 }], 68 | "no-var" : "error", 69 | "object-curly-newline" : [ 70 | "error", 71 | { 72 | ExportDeclaration: { minProperties: 6, multiline: true }, 73 | ImportDeclaration: { minProperties: 6, multiline: true }, 74 | ObjectExpression : { minProperties: 6, multiline: true }, 75 | ObjectPattern : { minProperties: 6, multiline: true }, 76 | }, 77 | ], 78 | "object-curly-spacing" : ["error", "always"], 79 | "object-property-newline" : ["error", { allowAllPropertiesOnSameLine: true }], 80 | "padding-line-between-statements": [ 81 | "error", 82 | { 83 | blankLine: "always", 84 | next : "*", 85 | prev : ["const", "let", "var"], 86 | }, 87 | { 88 | blankLine: "any", 89 | next : ["const", "let", "var"], 90 | prev : ["const", "let", "var"], 91 | }, 92 | { 93 | blankLine: "always", 94 | next : "*", 95 | prev : ["case", "default"], 96 | }, 97 | ], 98 | quotes : ["error", "double"], 99 | semi : ["error", "always"], 100 | "sort-keys-fix/sort-keys-fix" : "error", 101 | "space-infix-ops" : ["error", { int32Hint: false }], 102 | "unused-imports/no-unused-imports": "error", 103 | "react/jsx-uses-react" : "error", 104 | "react/jsx-uses-vars" : "error", 105 | }, 106 | }; 107 | -------------------------------------------------------------------------------- /package/theme/themeType.ts: -------------------------------------------------------------------------------- 1 | export interface DEFAULT_THEME_TYPES { 2 | breakpoints: { 3 | keys: string[]; 4 | values: { 5 | xs: number; 6 | sm: number; 7 | md: number; 8 | lg: number; 9 | xl: number; 10 | }; 11 | }; 12 | direction: string; 13 | mixins: { 14 | toolbar: { 15 | minHeight: number; 16 | "@media(min-width:0px)and(orientation:landscape)": { 17 | minHeight: number; 18 | }; 19 | "@media(min-width:600px)": { minHeight: number }; 20 | }; 21 | }; 22 | overrides: object; 23 | palette: { 24 | common: { 25 | black: string; 26 | white: string; 27 | }; 28 | type: string; 29 | primary: { 30 | light: string; 31 | main: string; 32 | dark: string; 33 | contrastText: string; 34 | }; 35 | secondary: { 36 | light: string; 37 | main: string; 38 | dark: string; 39 | contrastText: string; 40 | transparentDark: string; 41 | }; 42 | error: { 43 | light: string; 44 | main: string; 45 | dark: string; 46 | contrastText: string; 47 | }; 48 | warning: { 49 | main: string; 50 | light: string; 51 | dark: string; 52 | contrastText: string; 53 | }; 54 | info: { 55 | main: string; 56 | light: string; 57 | dark: string; 58 | contrastText: string; 59 | }; 60 | success: { 61 | main: string; 62 | light: string; 63 | dark: string; 64 | contrastText: string; 65 | }; 66 | grey: { 67 | 50: string; 68 | 100: string; 69 | 200: string; 70 | 300: string; 71 | 400: string; 72 | 500: string; 73 | 600: string; 74 | 700: string; 75 | 800: string; 76 | 900: string; 77 | A100: string; 78 | A200: string; 79 | A400: string; 80 | A700: string; 81 | }; 82 | contrastThreshold: number; 83 | tonalOffset: number; 84 | text: { 85 | primary: string; 86 | secondary: string; 87 | disabled: string; 88 | hint: string; 89 | }; 90 | divider: string; 91 | background: { 92 | paper: string; 93 | default: string; 94 | }; 95 | action: { 96 | active: string; 97 | hover: string; 98 | hoverOpacity: number; 99 | selected: string; 100 | disabled: string; 101 | disabledBackground: string; 102 | }; 103 | }; 104 | // eslint-disable-next-line @typescript-eslint/ban-types 105 | props: {}; 106 | shadows: string[]; 107 | typography: { 108 | fontFamily: string; 109 | fontSize: number; 110 | fontWeightLight: number; 111 | fontWeightRegular: number; 112 | fontWeightMedium: number; 113 | display4: { 114 | fontSize: string; 115 | fontWeight: number; 116 | fontFamily: string; 117 | letterSpacing: string; 118 | lineHeight: string; 119 | marginLeft: string; 120 | color: string; 121 | }; 122 | display3: { 123 | fontSize: string; 124 | fontWeight: number; 125 | fontFamily: string; 126 | letterSpacing: string; 127 | lineHeight: string; 128 | marginLeft: string; 129 | color: string; 130 | }; 131 | display2: { 132 | fontSize: string; 133 | fontWeight: number; 134 | fontFamily: string; 135 | lineHeight: string; 136 | marginLeft: string; 137 | color: string; 138 | }; 139 | display1: { 140 | fontSize: string; 141 | fontWeight: number; 142 | fontFamily: string; 143 | lineHeight: string; 144 | color: string; 145 | }; 146 | headline: { 147 | fontSize: string; 148 | fontWeight: number; 149 | fontFamily: string; 150 | lineHeight: string; 151 | color: string; 152 | }; 153 | title: { 154 | fontSize: string; 155 | fontWeight: number; 156 | fontFamily: string; 157 | lineHeight: string; 158 | color: string; 159 | }; 160 | subheading: { 161 | fontSize: string; 162 | fontWeight: number; 163 | fontFamily: string; 164 | lineHeight: string; 165 | color: string; 166 | }; 167 | body2: { 168 | fontSize: string; 169 | fontWeight: number; 170 | fontFamily: string; 171 | lineHeight: string; 172 | color: string; 173 | }; 174 | body1: { 175 | fontSize: string; 176 | fontWeight: number; 177 | fontFamily: string; 178 | lineHeight: string; 179 | color: string; 180 | }; 181 | caption: { 182 | fontSize: string; 183 | fontWeight: number; 184 | fontFamily: string; 185 | lineHeight: string; 186 | color: string; 187 | }; 188 | button: { 189 | fontSize: string; 190 | textTransform: string; 191 | fontWeight: number; 192 | fontFamily: string; 193 | color: string; 194 | }; 195 | }; 196 | transitions: { 197 | easing: { 198 | easeInOut: string; 199 | easeOut: string; 200 | easeIn: string; 201 | sharp: string; 202 | }; 203 | duration: { 204 | shortest: number; 205 | shorter: number; 206 | short: number; 207 | standard: number; 208 | complex: number; 209 | enteringScreen: number; 210 | leavingScreen: number; 211 | }; 212 | }; 213 | spacing: number; 214 | zIndex: { 215 | mobileStepper: number; 216 | appBar: number; 217 | drawer: number; 218 | modal: number; 219 | snackbar: number; 220 | tooltip: number; 221 | }; 222 | } 223 | -------------------------------------------------------------------------------- /package/theme/cgpt.mui-theme.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "palette": { 3 | "common": { 4 | "black": "#000", 5 | "white": "#fff" 6 | }, 7 | "type": "light", 8 | "primary": { 9 | "main": "#1976D2", 10 | "light": "#63a4ff", 11 | "dark": "#004ba0", 12 | "contrastText": "#fff" 13 | }, 14 | "secondary": { 15 | "main": "#9C27B0", 16 | "light": "#d05ce3", 17 | "dark": "#6a0080", 18 | "contrastText": "#fff" 19 | }, 20 | "error": { 21 | "main": "#f44336", 22 | "light": "#e57373", 23 | "dark": "#d32f2f", 24 | "contrastText": "#fff" 25 | }, 26 | "warning": { 27 | "main": "#ff9800", 28 | "light": "#ffb74d", 29 | "dark": "#f57c00", 30 | "contrastText": "rgba(0, 0, 0, 0.87)" 31 | }, 32 | "info": { 33 | "main": "#2196f3", 34 | "light": "#64b5f6", 35 | "dark": "#1976d2", 36 | "contrastText": "#fff" 37 | }, 38 | "success": { 39 | "main": "#4caf50", 40 | "light": "#81c784", 41 | "dark": "#388e3c", 42 | "contrastText": "rgba(0, 0, 0, 0.87)" 43 | }, 44 | "text": { 45 | "primary": "rgba(0, 0, 0, 0.87)", 46 | "secondary": "rgba(0, 0, 0, 0.54)", 47 | "disabled": "rgba(0, 0, 0, 0.38)", 48 | "hint": "rgba(0, 0, 0, 0.38)" 49 | }, 50 | "divider": "rgba(0, 0, 0, 0.12)", 51 | "background": { 52 | "paper": "#fff", 53 | "default": "#fafafa" 54 | }, 55 | "action": { 56 | "active": "rgba(0, 0, 0, 0.54)", 57 | "hover": "rgba(0, 0, 0, 0.08)", 58 | "hoverOpacity": 0.08, 59 | "selected": "rgba(0, 0, 0, 0.14)", 60 | "selectedOpacity": 0.14, 61 | "disabled": "rgba(0, 0, 0, 0.26)", 62 | "disabledBackground": "rgba(0, 0, 0, 0.12)", 63 | "disabledOpacity": 0.38, 64 | "focus": "rgba(0, 0, 0, 0.12)", 65 | "focusOpacity": 0.12, 66 | "activatedOpacity": 0.12 67 | } 68 | }, 69 | "typography": { 70 | "htmlFontSize": 16, 71 | "fontFamily": "'Roboto', 'Helvetica', 'Arial', sans-serif", 72 | "fontSize": 14, 73 | "fontWeightLight": 300, 74 | "fontWeightRegular": 400, 75 | "fontWeightMedium": 500, 76 | "fontWeightBold": 700, 77 | "h1": { 78 | "fontSize": "2.5rem", 79 | "fontWeight": 300, 80 | "letterSpacing": "-0.01562em" 81 | }, 82 | "h2": { 83 | "fontSize": "2rem", 84 | "fontWeight": 300, 85 | "letterSpacing": "-0.00833em" 86 | }, 87 | "h3": { 88 | "fontSize": "1.75rem", 89 | "fontWeight": 400, 90 | "letterSpacing": "0em" 91 | }, 92 | "h4": { 93 | "fontSize": "1.5rem", 94 | "fontWeight": 400, 95 | "letterSpacing": "0.00735em" 96 | }, 97 | "h5": { 98 | "fontSize": "1.25rem", 99 | "fontWeight": 400, 100 | "letterSpacing": "0em" 101 | }, 102 | "h6": { 103 | "fontSize": "1.125rem", 104 | "fontWeight": 500, 105 | "letterSpacing": "0.0075em" 106 | }, 107 | "subtitle1": { 108 | "fontSize": "1rem", 109 | "fontWeight": 400, 110 | "letterSpacing": "0.00938em" 111 | }, 112 | "subtitle2": { 113 | "fontSize": "0.875rem", 114 | "fontWeight": 500, 115 | "letterSpacing": "0.00714em" 116 | }, 117 | "body1": { 118 | "fontSize": "1rem", 119 | "fontWeight": 400, 120 | "letterSpacing": "0.03125em" 121 | }, 122 | "body2": { 123 | "fontSize": "0.875rem", 124 | "fontWeight": 400, 125 | "letterSpacing": "0.01786em" 126 | }, 127 | "button": { 128 | "fontSize": "0.875rem", 129 | "fontWeight": 500, 130 | "letterSpacing": "0.02857em", 131 | "textTransform": "uppercase" 132 | }, 133 | "caption": { 134 | "fontSize": "0.75rem", 135 | "fontWeight": 400, 136 | "letterSpacing": "0.03333em" 137 | }, 138 | "overline": { 139 | "fontSize": "0.625rem", 140 | "fontWeight": 400, 141 | "letterSpacing": "0.08333em", 142 | "textTransform": "uppercase" 143 | } 144 | }, 145 | "shape": { 146 | "borderRadius": 4 147 | }, 148 | "transitions": { 149 | "easing": { 150 | "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", 151 | "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", 152 | "easeIn": "cubic-bezier(0.4, 0, 1, 1)", 153 | "sharp": "cubic-bezier(0.4, 0, 0.6, 1)" 154 | }, 155 | "duration": { 156 | "shortest": 150, 157 | "shorter": 200, 158 | "short": 250, 159 | "standard": 300, 160 | "complex": 375, 161 | "enteringScreen": 225, 162 | "leavingScreen": 195 163 | } 164 | }, 165 | "spacing": { 166 | "unit": 8 167 | }, 168 | "zIndex": { 169 | "mobileStepper": 1000, 170 | "appBar": 1100, 171 | "drawer": 1200, 172 | "modal": 1300, 173 | "snackbar": 1400, 174 | "tooltip": 1500 175 | } 176 | } -------------------------------------------------------------------------------- /package/StyleFlavour.ts: -------------------------------------------------------------------------------- 1 | import { WrappidData } from "./context/WrappidSyncer"; 2 | 3 | export abstract class StyleFlavour { 4 | __TYPE_OF_STRING = "string"; 5 | __EMPTY_STRING = ""; 6 | __REM = "rem"; 7 | __EM = "em"; 8 | __VW = "vw"; 9 | __VH = "vh"; 10 | __PX = "px"; 11 | __PERCENTAGE = "%"; 12 | __ROOT_FONT_SIZE = 16; // Default root font size for rem to px conversion 13 | __PARENT_FONT_SIZE = 14; // Example font size for em to px conversion 14 | __BORDER = "border"; 15 | __BORDER_STYLE = "borderStyle"; 16 | __BORDER_RADIUS = "borderRadius"; 17 | __OVERFLOW = "overflow"; 18 | __SOLID = "solid"; 19 | __DASHED = "dashed"; 20 | __DOTTED = "dotted"; 21 | __UNSET = "unset"; 22 | __ZERO = "0"; 23 | __POSITION = "position"; 24 | __FIXED = "fixed"; 25 | __ABSOLUTE = "absolute"; 26 | __RELATIVE = "relative"; 27 | __STICKY = "sticky"; 28 | __FLEX = "flex"; 29 | __DISPLAY = "display"; 30 | __NONE = "none"; 31 | __HIDDEN = "hidden"; 32 | __WIDTH = "width"; 33 | __RADIUS = "Radius"; 34 | __STYLE = "Style"; 35 | __BORDER_WIDTH = "borderWidth"; 36 | UNSUPPORTED_BORDER_STYLES = [ 37 | "none", 38 | "hidden", 39 | "double", 40 | "groove", 41 | "ridge", 42 | "inset", 43 | "outset", 44 | ]; 45 | __UNITS_VALUES_KEYS = [ 46 | "height", 47 | "width", 48 | "maxHeight", 49 | "maxWidth", 50 | "minHeight", 51 | "minWidth", 52 | "margin", 53 | "marginTop", 54 | "marginRight", 55 | "marginBottom", 56 | "marginLeft", 57 | "padding", 58 | "paddingTop", 59 | "paddingRight", 60 | "paddingBottom", 61 | "paddingLeft", 62 | "gap", 63 | "fontSize", 64 | "borderWidth", 65 | "borderRadius", 66 | "borderTopLeftRadius", 67 | "borderTopRightRadius", 68 | "borderBottomLeftRadius", 69 | "borderBottomRightRadius", 70 | "top", 71 | "bottom", 72 | "left", 73 | "right", 74 | ]; 75 | __POSITION_CSS_PROPS = ["top", "bottom", "left", "right"]; 76 | __FLEX_PROPS = [ 77 | "flexDirection", 78 | "flexWrap", 79 | "justifyContent", 80 | "alignItems", 81 | "alignContent", 82 | "flexGrow", 83 | "flexShrink", 84 | "flexBasis", 85 | ]; 86 | 87 | _name: string; 88 | _dimensions: any; 89 | 90 | constructor() { 91 | this._name = ""; 92 | this._dimensions = WrappidData.dimensions; 93 | } 94 | 95 | // eslint-disable-next-line etc/no-commented-out-code 96 | // protected handleBorderProperties( 97 | // key: string, 98 | // value: any 99 | // ) { 100 | // throw new Error("Method 'handleBorderProperties' must be implemented."); 101 | // } 102 | 103 | // eslint-disable-next-line etc/no-commented-out-code 104 | // protected handlePositionProperties( 105 | // key: string, 106 | // value: any, 107 | // newStyleObject: any 108 | // ) { 109 | // throw new Error("Method 'handlePositionProperties' must be implemented."); 110 | // } 111 | 112 | /** 113 | * Adds platform specific flavour to styles by changing and/or updating cssValues of cssProps 114 | * @param styles an object containing cssProps:values 115 | * @returns { any{cssProp1:value,cssProp2:value,...} an object containing cssProps:values in the platform specific flavour 116 | */ 117 | // eslint-disable-next-line etc/no-commented-out-code 118 | // public addFlavour(styles: any): any { 119 | // throw new Error("Method 'addFlavour' must be implemented."); 120 | // } 121 | 122 | // unit to number util 123 | protected unitToNumber = (unitVal: string) => { 124 | unitVal?.trim(); 125 | // Handle `calc` expressions 126 | if (unitVal.includes("calc")) { 127 | return this.evaluateCalcExpression(unitVal); 128 | } 129 | const numericValue = parseFloat(unitVal); 130 | 131 | switch (true) { 132 | case unitVal.endsWith(this.__PX): 133 | return numericValue; 134 | 135 | case unitVal.endsWith(this.__REM): 136 | return numericValue * this.__ROOT_FONT_SIZE; 137 | 138 | case unitVal.endsWith(this.__EM): 139 | return numericValue * this.__PARENT_FONT_SIZE; 140 | 141 | case unitVal.endsWith(this.__VW): 142 | return this.viewportToNumber(unitVal, this.__VW); 143 | 144 | case unitVal.endsWith(this.__VH): 145 | return this.viewportToNumber(unitVal, this.__VH); 146 | 147 | case unitVal.endsWith(this.__PERCENTAGE): 148 | return unitVal; 149 | 150 | default: 151 | return numericValue; // Return the original value(only changed to number format) if no recognized unit is found 152 | } 153 | }; 154 | 155 | // Function to evaluate calc expressions 156 | protected evaluateCalcExpression = (calcValue: string) => { 157 | const calcRegex = /calc\((\d+vh)\s*-\s*(\d+)px\)/; 158 | const match = calcValue.match(calcRegex); 159 | 160 | if (match) { 161 | const vhValue = parseFloat(match[1].replace(this.__VH, "")); 162 | const pxValue = parseFloat(match[2]); 163 | 164 | // Convert `vh` to pixels using viewport height 165 | const vhInPx = this.viewportToNumber(`${vhValue}${this.__VH}`, this.__VH); 166 | 167 | return vhInPx - pxValue; // Subtract the pixel value 168 | } 169 | 170 | console.warn(`Unsupported calc expression: ${calcValue}`); 171 | return calcValue; // Return original value if not a recognized `calc` expression 172 | }; 173 | 174 | // view port to number calculation util 175 | protected viewportToNumber = (value: string, unitType: string) => { 176 | const numericValue = parseFloat(value); 177 | 178 | switch (unitType) { 179 | case this.__VW: 180 | return (numericValue / 100) * this._dimensions.windowWidth; 181 | 182 | case this.__VH: 183 | return (numericValue / 100) * this._dimensions.windowHeight; 184 | 185 | default: 186 | throw new Error( 187 | "Invalid input: Please provide a value with 'vw' or 'vh'." 188 | ); 189 | } 190 | }; 191 | } 192 | -------------------------------------------------------------------------------- /.github/workflows/pr-guardrails.yml: -------------------------------------------------------------------------------- 1 | name : PR Guardrails 2 | run-name: > 3 | Validating PR #${{ github.event.pull_request.number }}, opened by ${{ github.actor }} 4 | 5 | on: pull_request 6 | 7 | jobs: 8 | branchname: 9 | name: Validate branch name 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - name: Validate source branch name 14 | uses: actions-ecosystem/action-regex-match@v2 15 | id: branch_name_validation 16 | with: 17 | text: ${{ github.event.pull_request.head.ref }} 18 | regex: '^WRPD-(feature|bugfix|release|ci|enhancement|hotfix|refactor|deps|docs|experimental|security)?-[0-9]+$|^main$|^development$' 19 | 20 | - name: Print invalid branch name message 21 | if: ${{ steps.branch_name_validation.outputs.match == '' }} 22 | run: | 23 | echo ❌ ${{ github.event.pull_request.head.ref }} is not a valid branch name. 24 | exit 1 25 | 26 | - name: Print valid branch name message 27 | run: | 28 | echo ✅ ${{ github.event.pull_request.head.ref }} is a valid branch name. 29 | 30 | commitlint: 31 | name: Validate commit messages 32 | runs-on: ubuntu-latest 33 | 34 | steps: 35 | - name: Check out branch 36 | uses: actions/checkout@v3 37 | with: 38 | fetch-depth: 0 39 | 40 | - name: Use Node.js 41 | uses: actions/setup-node@v3 42 | with: 43 | cache: 'npm' 44 | 45 | - name: Setup Wrappid npm registry 46 | run: | 47 | npm config set @wrappid:registry https://npm.pkg.github.com/wrappid 48 | npm config set //npm.pkg.github.com/:_authToken ${{ secrets.WRAPPID_REGISTRY_TOKEN }} 49 | 50 | - name: Install commitlint 51 | run: | 52 | npm ci 53 | npm i conventional-changelog-conventionalcommits@7.0.2 54 | 55 | - name: Print versions 56 | run: | 57 | git --version 58 | node --version 59 | npm --version 60 | npx commitlint --version 61 | 62 | - name: Run commitlint 63 | run: > 64 | npx commitlint 65 | --from ${{ github.event.pull_request.head.sha }}~${{ github.event.pull_request.commits }} 66 | --to ${{ github.event.pull_request.head.sha }} 67 | --verbose 68 | 69 | codelint: 70 | name: Validate code style 71 | runs-on: ubuntu-latest 72 | 73 | steps: 74 | - name: Check out branch 75 | uses: actions/checkout@v3 76 | with: 77 | fetch-depth: 0 78 | 79 | - name: Use Node.js 80 | uses: actions/setup-node@v3 81 | with: 82 | cache: 'npm' 83 | registry-url: https://npm.pkg.github.com/wrappid 84 | token: ${{secrets.WRAPPID_REGISTRY_TOKEN}} 85 | 86 | - name: Setup Wrappid npm registry 87 | run: | 88 | npm config set @wrappid:registry https://npm.pkg.github.com/wrappid 89 | npm config set //npm.pkg.github.com/:_authToken ${{ secrets.WRAPPID_REGISTRY_TOKEN }} 90 | 91 | - name: Install ESLint 92 | run: | 93 | npm ci 94 | env: 95 | NODE_AUTH_TOKEN: ${{secrets.WRAPPID_REGISTRY_TOKEN}} 96 | 97 | - name: Print versions 98 | run: | 99 | node --version 100 | npm --version 101 | npx eslint --version 102 | 103 | - name: Find added/changed files 104 | id: git_diff 105 | run: | 106 | echo Searching for files added/changed in ${{ github.event.pull_request.head.ref }}, since the last commit in ${{ github.event.pull_request.base.ref }} 107 | echo "FILES_TO_LINT=$(git diff --name-only --diff-filter=AM --recursive ${{ github.event.pull_request.head.sha }}..${{ github.event.pull_request.base.sha }} \*.{js,jsx,ts,tsx} | xargs)" >> $GITHUB_OUTPUT 108 | 109 | - name: Run ESLint 110 | run: | 111 | npm run code:lint ${{ steps.git_diff.outputs.FILES_TO_LINT }} 112 | 113 | codecompile: 114 | name: Compile code 115 | runs-on: ubuntu-latest 116 | needs: [branchname, commitlint, codelint] 117 | 118 | steps: 119 | - name: Check out branch 120 | uses: actions/checkout@v3 121 | with: 122 | fetch-depth: 0 123 | 124 | - name: Use Node.js 125 | uses: actions/setup-node@v3 126 | with: 127 | cache: 'npm' 128 | registry-url: https://npm.pkg.github.com/wrappid 129 | token: ${{secrets.WRAPPID_REGISTRY_TOKEN}} 130 | 131 | - name: Setup Wrappid npm registry 132 | run: | 133 | npm config set @wrappid:registry https://npm.pkg.github.com/wrappid 134 | npm config set //npm.pkg.github.com/:_authToken ${{ secrets.WRAPPID_REGISTRY_TOKEN }} 135 | 136 | - name: Install node_modules 137 | run: npm ci 138 | 139 | - name: Compile code 140 | run: npm run build 141 | 142 | unit_tests: 143 | name: Run unit test cases 144 | runs-on: ubuntu-latest 145 | needs: [branchname, commitlint, codelint, codecompile] 146 | 147 | steps: 148 | - name: Check out branch 149 | uses: actions/checkout@v3 150 | with: 151 | fetch-depth: 0 152 | 153 | - name: Run unit test cases 154 | run: echo "Ran unit test cases" 155 | 156 | e2e_tests: 157 | name: Run E2E test cases 158 | runs-on: ubuntu-latest 159 | needs: unit_tests 160 | 161 | steps: 162 | - name: Check out branch 163 | uses: actions/checkout@v3 164 | with: 165 | fetch-depth: 0 166 | 167 | - name: Use Node.js 168 | uses: actions/setup-node@v3 169 | with: 170 | cache: 'npm' 171 | 172 | - name: Setup Wrappid npm registry 173 | run: | 174 | npm config set @wrappid:registry https://npm.pkg.github.com/wrappid 175 | npm config set //npm.pkg.github.com/:_authToken ${{ secrets.WRAPPID_REGISTRY_TOKEN }} 176 | 177 | - name: Install node_modules 178 | run: npm ci 179 | 180 | - name: Run test cases 181 | run: | 182 | npm ci 183 | npm test 184 | echo "Ran test cases" -------------------------------------------------------------------------------- /package/styledComponents/StyledComponentsClasses.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | /************************************************** 3 | * styleClass names for Utility Styles 4 | *************************************************/ 5 | const StyledComponentsClasses = { 6 | INPUTS: { 7 | BUTTON : "scInputsButton", 8 | TEXT_FIELD : "scInputsTextField", 9 | DATE_PICKER : "scInputsDatePicker", 10 | AUTO_COMPLETE : "scInputsAutoComplete", 11 | CHECKBOX : "scInputsCheckbox", 12 | DATE_TIME_PICKER : "scInputsDateTimePicker", 13 | FAB : "scInputsFab", 14 | FORM_CONTROL : "scInputsFormControl", 15 | FORM_CONTROL_LABEL: "scInputsFormControlLabel", 16 | FORM_HELPER_TEXT : "scInputsFormHelperText", 17 | ICON_BUTTON : "scInputsIconButton", 18 | INPUT : "scInputsInput", 19 | INPUT_ADORNMENT : "scInputsInputAdornment", 20 | INPUT_LABEL : "scInputsInputLabel", 21 | ITEM_BUTTON : "scInputsItemButton", 22 | MENU_ITEM : "scInputsMenuItem", 23 | SELECT : "scinputsSelect", 24 | SWITCH : "scInputsSwitch", 25 | TIME_PICKER : "scInputsTimePicker", 26 | CUSTOM : { RICH_TEXT_EDITOR: "scInputsCustomRichTextEditor" } 27 | }, 28 | NAVIGATION: { 29 | TAB : "scNavigationTab", 30 | TAB_MOBILE : "scNavigationTabMobile", 31 | TAB_MOBILE_ACTIVE: "scNavigationTabActive", 32 | TABS : "scNavigationTabs", 33 | LINK : "scNavigationLink", 34 | MENU_ITEM : "scNavigationMenuItem", 35 | MENU_LIST : "scNavigationMenuList", 36 | APP_DRAWER_TEXT : "appDrawerText" 37 | }, 38 | DATA_DISPLAY: { 39 | AVATAR : "scDataDisplayAvatar", 40 | AVATAR_GROUP : "scDataDisplayAvatarGroup", 41 | BADGE : "scDataDisplayBadge", 42 | CHIP : "scDataDisplayChip", 43 | DIVIDER : "scDataDisplayDivider", 44 | ICON : "scDataDisplayIcon", 45 | IMAGE : "scDataDisplayImage", 46 | LIST_ITEM_AVATAR : "scDataDisplayListItemAvatar", 47 | LIST_ITEM_ICON : "scDataDisplayListItemIcon", 48 | LIST_ITEM_SUBHEADER : "scDataDisplayListItemSubheader", 49 | LIST_ITEM_TEXT : "scDataDisplayListItemText", 50 | TABLE : "scDataDisplayTable", 51 | TABLE_BODY : "scDataDisplayTableBody", 52 | TABLE_CELL : "scDataDisplayTableCell", 53 | TABLE_CONTAINER : "scDataDisplayTableContainer", 54 | TABLE_FOOTER : "scDataDisplayTableFooter", 55 | TABLE_HEAD : "scDataDisplayTableHead", 56 | TABLE_PAGINATION : "scDataDisplayTablePagination", 57 | TABLE_ROW : "scDataDisplayTableRow", 58 | MOBILE_TABLE_ROW : "scDataDisplayMobileTableRow", 59 | MOBILE_TABLE_TOOLBAR: "scDataDisplayMobileToolbar", 60 | TABLE_SORT_LABEL : "scDataDisplayTableSortLabel", 61 | TOOLTIP : "scDataDisplayTooltip", 62 | TYPOGRAPHY : "scDataDisplayTypography" 63 | }, 64 | FEEDBACK: { 65 | ALERT : "scFeedbackAlert", 66 | BACKDROP : "scFeedbackBackdrop", 67 | CIRCULAR_PROGRESS: "scFeedbackCircularProgress", 68 | LINEAR_PROGRESS : "scFeedbackLinearProgress", 69 | SKELETON : "scFeedbackSkeleton", 70 | SNACKBAR : "scFeedbackSnackbar", 71 | DIALOG : "scFeedbackDialog" 72 | }, 73 | FORM: { 74 | FORM_CONTROL_LABEL: "scFormFormControlLabel", 75 | FORM_GROUP : "scFormFormGroup" 76 | }, 77 | LAYOUTS: { 78 | APP_DIV : "scLayoutsAppDiv", 79 | BOX : "scLayoutsBox", 80 | CONTAINER: "scLayoutsContainer", 81 | GRID : "scLayoutsGrid", 82 | GRID_ITEM: "scLayoutsGridItem", 83 | LIST : "scLayoutsList", 84 | LIST_ITEM: "scLayoutsListItem", 85 | STACK : "scLayoutsStack" 86 | }, 87 | SURFACES: { 88 | ACCORDION : "scSurfacesAccordion", 89 | ACCORDION_DETAILS: "scSurfacesAccordionDetails", 90 | ACCORDION_SUMMERY: "scSurfacesAccordionSummery", 91 | APP_BAR : "scSurfacesAppBar", 92 | CARD : "scSurfacesCard", 93 | CARD_ACTION_AREA : "scSurfacesCardActionArea", 94 | CARD_ACTIONS : "scSurfacesCardActions", 95 | CARD_CONTENT : "scSurfacesCardContent", 96 | CARD_HEADER : "scSurfacesCardHeader", 97 | CARD_MEDIA : "scSurfacesCardMedia", 98 | PAPER : "scSurfacesPaper", 99 | TOOLBAR : "scSurfacesToolbar" 100 | }, 101 | 102 | /** 103 | * Moved from core 104 | */ 105 | UTILS : { FADE: "", MODAL: "", POPOVER: "" }, 106 | APP_BAR: { HEIGHT: "appbarHeight", APP_BAR_LOGO: "appBarLogo" }, 107 | DRAWER : { PAPER_HEIGHT: "appDrawerPaperHeight" }, 108 | MODAL : { 109 | MODAL_CONTAINER : "modalContainer", 110 | MODAL_WEB_CONTAINER: "modalWebContainer", 111 | MODAL_HEADER : "modalHeader", 112 | MODAL_BODY : "modalBody" 113 | }, 114 | 115 | /** 116 | * @todo Have to remove this. This is here as it is used in menuUtil 117 | * when we creae seperae component for menu items this should be replaced 118 | */ 119 | 120 | MENU: { 121 | MINI_DRAWER_LIST_ITEM_BUTTON: "miniDrawerListItemButton", 122 | MINI_DRAWER_LIST_ITEM_ICON : "miniDrawerListItemIcon", 123 | LIST_ITEM : "listItem", 124 | LIST_ITEM_BUTTON : "listItemButton", 125 | LIST_ITEM_ICON : "listItemIcon", 126 | LIST_ITEM_TEXT : "listItemText", 127 | 128 | HEADER_BUTTON_ITEM: "headerButtonItem", 129 | HEADER_ICON_ITEM : "headerIconItem", 130 | HEADER_TEXT_ITEM : "headerTextItem", 131 | HEADER_ITEM : "headerItem", 132 | 133 | PARENT_BUTTON_ITEM: "parentButtonItem", 134 | PARENT_ICON_ITEM : "parentIconItem", 135 | PARENT_TEXT_ITEM : "parentTextItem", 136 | PARENT_ITEM : "parentItem", 137 | 138 | SEPERATOR_BUTTON_ITEM: "seperatorButtonItem", 139 | SEPERATOR_ICON_ITEM : "seperatorIconItem", 140 | SEPERATOR_TEXT_ITEM : "seperatorTextItem", 141 | SEPERATOR_ITEM : "seperatorItem", 142 | 143 | MENU_ITEM_BUTTON_ITEM: "menuItemButtonItem", 144 | MENU_ITEM_ICON_ITEM : "menuItemIconItem", 145 | MENU_ITEM_TEXT_ITEM : "menuItemTextItem", 146 | MENU_ITEM : "menuItem" 147 | }, 148 | WEB: { FILE_PICKER: "webFilePicker", TAB_HEAD: "webTabHead" } 149 | }; 150 | 151 | export default StyledComponentsClasses; -------------------------------------------------------------------------------- /package/styledComponents/DefaultSCStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable sort-keys-fix/sort-keys-fix */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | import { IMPORTANT, PX_TAG } from "../base/constants"; 4 | import DefaultUtilityStyles from "../utility/DefaultUtilityStyles"; 5 | 6 | const HEADING_TOP_MARGIN = "64" + PX_TAG; 7 | 8 | export default class DefaultSCStyles extends BaseStyle { 9 | constructor() { 10 | super(); 11 | 12 | const defaultUtilityStyles = new DefaultUtilityStyles().style; 13 | 14 | this.style = { 15 | /************************************************** 16 | * INPUTS 17 | *************************************************/ 18 | scInputsButton : { ...defaultUtilityStyles?.ml1 }, 19 | scInputsTextField : {}, 20 | scInputsDatePicker : {}, 21 | scInputAutoComplete : {}, 22 | scInputCheckbox : {}, 23 | scInputDateTimePicker : {}, 24 | scInputFab : {}, 25 | scInputFormControl : {}, 26 | scInputFormControlLabel: {}, 27 | scInputFormHelperText : { ...defaultUtilityStyles.ml0 }, 28 | scInputIconButton : {}, 29 | scInputsInput : { ...defaultUtilityStyles.px0_5 }, 30 | scInputsInputAdornment : {}, 31 | scInputsInputLabel : {}, 32 | scInputsItemButton : { 33 | width : "100%" + IMPORTANT, 34 | marginBottom: 16 + IMPORTANT 35 | }, 36 | scInputsMenuItem : {}, 37 | scinputsSelect : {}, 38 | scInputsSwitch : {}, 39 | scInputsTimePicker : {}, 40 | scInputsFormHelperText : { paddingLeft: 0 + IMPORTANT }, 41 | /************************************************** 42 | * DATA DISPLAY 43 | *************************************************/ 44 | scDataDisplayAvatar : {}, 45 | scDataDisplayBadge : {}, 46 | scDataDisplayChip : {}, 47 | scDataDisplayDivider : { ...defaultUtilityStyles.my1 }, 48 | scDataDisplayIcon : {}, 49 | scDataDisplayImage : {}, 50 | scDataDisplayListItemAvatar : {}, 51 | scDataDisplayListItemIcon : {}, 52 | scDataDisplayListItemSubheader: {}, 53 | scDataDisplayListItemText : {}, 54 | scDataDisplayTable : {}, 55 | scDataDisplayTableBody : {}, 56 | scDataDisplayTableCell : {}, 57 | scDataDisplayTableContainer : {}, 58 | scDataDisplayTableFooter : {}, 59 | scDataDisplayTableHead : {}, 60 | scDataDisplayTablePagination : {}, 61 | scDataDisplayTableRow : {}, 62 | scDataDisplayMobileTableRow : { padding: 0 }, 63 | scDataDisplayMobileToolbar : { 64 | borderBottomWidth: 1, 65 | borderBottomColor: defaultUtilityStyles?.borderPrimary?.borderColor, 66 | marginTop : "-" + defaultUtilityStyles?.m1?.margin 67 | }, 68 | scDataDisplayTableSortLabel: {}, 69 | scDataDisplayTooltip : {}, 70 | scDataDisplayTypography : {}, 71 | /************************************************** 72 | * FEEDBACK 73 | *************************************************/ 74 | scFeedbackAlert : {}, 75 | scFeedbackBackdrop : { 76 | zIndex : 1202 + IMPORTANT, 77 | backgroundColor: 78 | this.theme.palette?.secondary?.transparentDark + IMPORTANT 79 | }, 80 | scFeedbackCircularProgress: {}, 81 | scFeedbackLinearProgress : {}, 82 | scFeedbackSkeleton : {}, 83 | scFeedbackSnackbar : {}, 84 | scFeedbackDialog : { minWidth: "60%" + IMPORTANT }, 85 | /************************************************** 86 | * SURFACES 87 | *************************************************/ 88 | scSurfacesAccordion : {}, 89 | scSurfacesAccordionDetails: {}, 90 | scSurfacesAccordionSummery: {}, 91 | scSurfacesAppBar : { ...defaultUtilityStyles.shadowNone, minHeight: HEADING_TOP_MARGIN + IMPORTANT }, 92 | scSurfacesCard : {}, 93 | scSurfacesCardActionArea : {}, 94 | scSurfacesCardActions : {}, 95 | scSurfacesCardContent : {}, 96 | scSurfacesCardHeader : {}, 97 | scSurfacesCardMedia : {}, 98 | scSurfacesPaper : {}, 99 | scSurfacesToolbar : {}, 100 | /************************************************** 101 | * NAVIGATION 102 | *************************************************/ 103 | scNavigationTab : {}, 104 | scNavigationTabMobile : { 105 | minHeight : 48, 106 | minWidth : 100, 107 | alignItems : "center", 108 | justifyContent: "center", 109 | textAlign : "center", 110 | paddingLeft : 16, 111 | paddingRight : 16, 112 | paddingTop : 12, 113 | paddingBottom : 12 114 | }, 115 | scNavigationTabActive: { 116 | minHeight : 48, 117 | minWidth : 100, 118 | alignItems : "center", 119 | justifyContent : "center", 120 | textAlign : "center", 121 | paddingLeft : 16, 122 | paddingRight : 16, 123 | paddingTop : 12, 124 | paddingBottom : 12, 125 | ...defaultUtilityStyles?.textPrimary, 126 | borderBottomColor: defaultUtilityStyles?.borderPrimary?.borderColor, 127 | borderBottomWidth: 2 128 | }, 129 | scNavigationTabs: {}, 130 | scNavigationLink: { 131 | color : this.theme.palette?.primary?.main, 132 | fontWeight: 500 + IMPORTANT 133 | }, 134 | scNavigationMenuItem : {}, 135 | scNavigationMenuList : {}, 136 | /************************************************** 137 | * LAYOUTS 138 | *************************************************/ 139 | scLayoutsAppDiv : {}, 140 | scLayoutsBox : {}, 141 | scLayoutsContainer : {}, 142 | scLayoutsGrid : {}, 143 | scLayoutsList : {}, 144 | scLayoutsListItem : {}, 145 | scLayoutsStack : { alignItems: "center" }, 146 | /************************************************** 147 | * UTILS 148 | *************************************************/ 149 | /************************************************** 150 | * FORM 151 | *************************************************/ 152 | scFormFormControlLabel: {}, 153 | scFormFormGroup : {}, 154 | 155 | /** 156 | * Moved from core 157 | */ 158 | 159 | /** 160 | * Core App Bar Styles 161 | */ 162 | appbarHeight : { top: HEADING_TOP_MARGIN + IMPORTANT }, 163 | appDrawerPaperHeight: { height: `calc(100% - ${HEADING_TOP_MARGIN})` + IMPORTANT }, 164 | appBarLogo : { height: "30" + PX_TAG + IMPORTANT }, 165 | 166 | /** 167 | * @todo Have to remove this. This is here as it is used in menuUtil 168 | * when we creae seperae component for menu items this should be replaced 169 | */ 170 | 171 | miniDrawerListItemButton: {}, 172 | miniDrawerListItemIcon : { minWidth: 0 + IMPORTANT }, 173 | 174 | listItem : {}, 175 | listItemButton: {}, 176 | listItemIcon : {}, 177 | listItemText : {}, 178 | 179 | headerItem : { padding: 0 + IMPORTANT }, 180 | headerButtonItem: {}, 181 | headerIconItem : {}, 182 | headerTextItem : {}, 183 | 184 | parentItem : { padding: 0 + IMPORTANT }, 185 | parentButtonItem: {}, 186 | parentIconItem : {}, 187 | parentTextItem : {}, 188 | 189 | seperatorItem : { padding: 0 + IMPORTANT }, 190 | seperatorButtonItem: { 191 | height : 0 + IMPORTANT, 192 | minHeight: 0 + IMPORTANT 193 | // backgroundColor: "gray" 194 | }, 195 | seperatorIconItem: { 196 | height : 0 + IMPORTANT, 197 | minHeight: 0 + IMPORTANT, 198 | display : "none" + IMPORTANT 199 | }, 200 | seperatorTextItem: { height: 0 + IMPORTANT, minHeight: 0 + IMPORTANT }, 201 | 202 | menuItem : { padding: 0 + IMPORTANT }, 203 | menuItemButtonItem: {}, 204 | menuItemTextItem : {}, 205 | menuItemIconItem : {}, 206 | appDrawerText : { 207 | color : "rgb(88, 88, 88)" + IMPORTANT, 208 | overflow : "hidden" + IMPORTANT, 209 | textOverflow: "ellipsis" + IMPORTANT, 210 | whiteSpace : "nowrap" + IMPORTANT 211 | }, 212 | webFilePicker: { 213 | justifyContent: "flex-end" + IMPORTANT, 214 | display : "flex" + IMPORTANT, 215 | color : "rgb(0,0,0,0.54)" + IMPORTANT, 216 | borderBottom : "1" + PX_TAG + "solid rgba(0, 0, 0, 0.42)" + IMPORTANT 217 | }, 218 | webTabHead: { 219 | ...defaultUtilityStyles.mb1, 220 | ...defaultUtilityStyles.stickyTop, 221 | ...defaultUtilityStyles.bgWhite, 222 | ...defaultUtilityStyles.overflowXScroll, 223 | ...defaultUtilityStyles.w100, 224 | marginLeft: "-8" + PX_TAG + IMPORTANT, 225 | marginTop : "-8" + PX_TAG + IMPORTANT 226 | } 227 | }; 228 | } 229 | } 230 | -------------------------------------------------------------------------------- /package/theme/theme.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_THEME = { 2 | breakpoints: { 3 | keys: [ 4 | "xs", 5 | "sm", 6 | "md", 7 | "lg", 8 | "xl" 9 | ], 10 | values: { 11 | lg: 1280, 12 | md: 960, 13 | sm: 600, 14 | xl: 1920, 15 | xs: 0, 16 | }, 17 | }, 18 | direction: "ltr", 19 | mixins : { 20 | toolbar: { 21 | "@media(min-width:0px)and(orientation:landscape)": { minHeight: 48 }, 22 | "@media(min-width:600px)" : { minHeight: 64 }, 23 | minHeight : 56, 24 | }, 25 | }, 26 | overrides: {}, 27 | palette : { 28 | action: { 29 | active : "rgba(0, 0, 0, 0.54)", 30 | disabled : "rgba(0, 0, 0, 0.26)", 31 | disabledBackground: "rgba(0, 0, 0, 0.12)", 32 | hover : "rgba(0, 0, 0, 0.08)", 33 | hoverOpacity : 0.08, 34 | selected : "rgba(0, 0, 0, 0.14)", 35 | }, 36 | background: { 37 | default: "#fafafa", 38 | paper : "#fff", 39 | }, 40 | common: { 41 | black: "#000", 42 | white: "#fff", 43 | }, 44 | contrastThreshold: 3, 45 | divider : "rgba(0, 0, 0, 0.12)", 46 | error : { 47 | contrastText: "#fff", 48 | dark : "#d32f2f", 49 | light : "#e57373", 50 | main : "#f44336", 51 | }, 52 | grey: { 53 | 100 : "#f5f5f5", 54 | 200 : "#eeeeee", 55 | 300 : "#e0e0e0", 56 | 400 : "#bdbdbd", 57 | 50 : "#fafafa", 58 | 500 : "#9e9e9e", 59 | 600 : "#757575", 60 | 700 : "#616161", 61 | 800 : "#424242", 62 | 900 : "#212121", 63 | A100: "#d5d5d5", 64 | A200: "#aaaaaa", 65 | A400: "#303030", 66 | A700: "#616161", 67 | }, 68 | info: { 69 | contrastText: "#fff", 70 | dark : "#1976d2", 71 | light : "#64b5f6", 72 | main : "#2196f3", 73 | }, 74 | primary: { 75 | contrastText: "#fff", 76 | dark : "#303f9f", 77 | light : "#7986cb", 78 | main : "#3f51b5", 79 | }, 80 | secondary: { 81 | contrastText : "#fff", 82 | dark : "#c51162", 83 | light : "#ff4081", 84 | main : "#f50057", 85 | transparentDark: "", 86 | }, 87 | success: { 88 | contrastText: "rgba(0, 0, 0, 0.87)", 89 | dark : "#388e3c", 90 | light : "#81c784", 91 | main : "#4caf50", 92 | }, 93 | text: { 94 | disabled : "rgba(0, 0, 0, 0.38)", 95 | hint : "rgba(0, 0, 0, 0.38)", 96 | primary : "rgba(0, 0, 0, 0.87)", 97 | secondary: "rgba(0, 0, 0, 0.54)", 98 | }, 99 | tonalOffset: 0.2, 100 | type : "light", 101 | warning : { 102 | contrastText: "rgba(0, 0, 0, 0.87)", 103 | dark : "#f57c00", 104 | light : "#ffb74d", 105 | main : "#ff9800", 106 | }, 107 | }, 108 | props : {}, 109 | shadows: [ 110 | "none", 111 | "0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12)", 112 | "0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12)", 113 | "0px 1px 8px 0px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 3px 3px -2px rgba(0, 0, 0, 0.12)", 114 | "0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)", 115 | "0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12)", 116 | "0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12)", 117 | "0px 4px 5px -2px rgba(0, 0, 0, 0.2),0px 7px 10px 1px rgba(0, 0, 0, 0.14),0px 2px 16px 1px rgba(0, 0, 0, 0.12)", 118 | "0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12)", 119 | "0px 5px 6px -3px rgba(0, 0, 0, 0.2),0px 9px 12px 1px rgba(0, 0, 0, 0.14),0px 3px 16px 2px rgba(0, 0, 0, 0.12)", 120 | "0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12)", 121 | "0px 6px 7px -4px rgba(0, 0, 0, 0.2),0px 11px 15px 1px rgba(0, 0, 0, 0.14),0px 4px 20px 3px rgba(0, 0, 0, 0.12)", 122 | "0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0, 0, 0, 0.12)", 123 | "0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px 4px rgba(0, 0, 0, 0.12)", 124 | "0px 7px 9px -4px rgba(0, 0, 0, 0.2),0px 14px 21px 2px rgba(0, 0, 0, 0.14),0px 5px 26px 4px rgba(0, 0, 0, 0.12)", 125 | "0px 8px 9px -5px rgba(0, 0, 0, 0.2),0px 15px 22px 2px rgba(0, 0, 0, 0.14),0px 6px 28px 5px rgba(0, 0, 0, 0.12)", 126 | "0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12)", 127 | "0px 8px 11px -5px rgba(0, 0, 0, 0.2),0px 17px 26px 2px rgba(0, 0, 0, 0.14),0px 6px 32px 5px rgba(0, 0, 0, 0.12)", 128 | "0px 9px 11px -5px rgba(0, 0, 0, 0.2),0px 18px 28px 2px rgba(0, 0, 0, 0.14),0px 7px 34px 6px rgba(0, 0, 0, 0.12)", 129 | "0px 9px 12px -6px rgba(0, 0, 0, 0.2),0px 19px 29px 2px rgba(0, 0, 0, 0.14),0px 7px 36px 6px rgba(0, 0, 0, 0.12)", 130 | "0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0, 0, 0, 0.12)", 131 | "0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 21px 33px 3px rgba(0, 0, 0, 0.14),0px 8px 40px 7px rgba(0, 0, 0, 0.12)", 132 | "0px 10px 14px -6px rgba(0, 0, 0, 0.2),0px 22px 35px 3px rgba(0, 0, 0, 0.14),0px 8px 42px 7px rgba(0, 0, 0, 0.12)", 133 | "0px 11px 14px -7px rgba(0, 0, 0, 0.2),0px 23px 36px 3px rgba(0, 0, 0, 0.14),0px 9px 44px 8px rgba(0, 0, 0, 0.12)", 134 | "0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12)", 135 | ], 136 | spacing : 8, 137 | transitions: { 138 | duration: { 139 | complex : 375, 140 | enteringScreen: 225, 141 | leavingScreen : 195, 142 | short : 250, 143 | shorter : 200, 144 | shortest : 150, 145 | standard : 300, 146 | }, 147 | easing: { 148 | easeIn : "cubic-bezier(0.4, 0, 1, 1)", 149 | easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)", 150 | easeOut : "cubic-bezier(0.0, 0, 0.2, 1)", 151 | sharp : "cubic-bezier(0.4, 0, 0.6, 1)", 152 | }, 153 | }, 154 | typography: { 155 | body1: { 156 | color : "rgba(0, 0, 0, 0.87)", 157 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 158 | fontSize : "0.875rem", 159 | fontWeight: 400, 160 | lineHeight: "1.46429em", 161 | }, 162 | body2: { 163 | color : "rgba(0, 0, 0, 0.87)", 164 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 165 | fontSize : "0.875rem", 166 | fontWeight: 500, 167 | lineHeight: "1.71429em", 168 | }, 169 | button: { 170 | color : "rgba(0, 0, 0, 0.87)", 171 | fontFamily : "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 172 | fontSize : "0.875rem", 173 | fontWeight : 500, 174 | textTransform: "uppercase", 175 | }, 176 | caption: { 177 | color : "rgba(0, 0, 0, 0.54)", 178 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 179 | fontSize : "0.75rem", 180 | fontWeight: 400, 181 | lineHeight: "1.375em", 182 | }, 183 | display1: { 184 | color : "rgba(0, 0, 0, 0.54)", 185 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 186 | fontSize : "2.125rem", 187 | fontWeight: 400, 188 | lineHeight: "1.20588em", 189 | }, 190 | display2: { 191 | color : "rgba(0, 0, 0, 0.54)", 192 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 193 | fontSize : "2.8125rem", 194 | fontWeight: 400, 195 | lineHeight: "1.06667em", 196 | marginLeft: "-.02em", 197 | }, 198 | display3: { 199 | color : "rgba(0, 0, 0, 0.54)", 200 | fontFamily : "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 201 | fontSize : "3.5rem", 202 | fontWeight : 400, 203 | letterSpacing: "-.02em", 204 | lineHeight : "1.30357em", 205 | marginLeft : "-.02em", 206 | }, 207 | display4: { 208 | color : "rgba(0, 0, 0, 0.54)", 209 | fontFamily : "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 210 | fontSize : "7rem", 211 | fontWeight : 300, 212 | letterSpacing: "-.04em", 213 | lineHeight : "1.14286em", 214 | marginLeft : "-.04em", 215 | }, 216 | fontFamily : "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 217 | fontSize : 14, 218 | fontWeightLight : 300, 219 | fontWeightMedium : 500, 220 | fontWeightRegular: 400, 221 | headline : { 222 | color : "rgba(0, 0, 0, 0.87)", 223 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 224 | fontSize : "1.5rem", 225 | fontWeight: 400, 226 | lineHeight: "1.35417em", 227 | }, 228 | subheading: { 229 | color : "rgba(0, 0, 0, 0.87)", 230 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 231 | fontSize : "1rem", 232 | fontWeight: 400, 233 | lineHeight: "1.5em", 234 | }, 235 | title: { 236 | color : "rgba(0, 0, 0, 0.87)", 237 | fontFamily: "\"Rubik\", \"Helvetica\", \"Arial\", sans-serif", 238 | fontSize : "1.3125rem", 239 | fontWeight: 500, 240 | lineHeight: "1.16667em", 241 | }, 242 | }, 243 | zIndex: { 244 | appBar : 1100, 245 | drawer : 1200, 246 | mobileStepper: 1000, 247 | modal : 1300, 248 | snackbar : 1400, 249 | tooltip : 1500, 250 | }, 251 | }; 252 | -------------------------------------------------------------------------------- /package/StyleReactNativeFlavour.ts: -------------------------------------------------------------------------------- 1 | import { IMPORTANT } from "./base/constants"; 2 | import { WrappidData } from "./context/WrappidSyncer"; 3 | import { StyleFlavour } from "./StyleFlavour"; 4 | 5 | export default class StyleReactNativeFlavour extends StyleFlavour { 6 | constructor() { 7 | super(); 8 | this._name = "ReactNative"; 9 | } 10 | 11 | /** 12 | * Adds platform specific flavour to styles by changing and/or updating cssProps 13 | * @param styles an object containing cssProps:values 14 | * @returns { flavouredStyles{cssProp1:value,cssProp2:value,...} an object containing cssProps:values in the platform specific flavour 15 | */ 16 | addFlavour(styles: any): any { 17 | const { config } = WrappidData; 18 | 19 | if (config?.platform === "mobile") { // no constant for mobile available at config level 20 | // console.log("styles" + JSON.stringify(styles, null, 2)); 21 | 22 | // setting all styles into flavouredStyles, 23 | // to make sure that cssProps not processed are also returned at last 24 | let flavouredStyles = { ...styles }; 25 | 26 | Object.keys(styles)?.forEach((cssProp) => { 27 | 28 | let cssValue = styles[cssProp]; 29 | 30 | // eslint-disable-next-line etc/no-commented-out-code 31 | // console.log("processing #" + index + ": " + cssProp + ": " + cssValue + "| "); 32 | 33 | let processedStyles = { [cssProp]: cssValue }; 34 | 35 | // removing !important, because the CSS !important directive is not supported by React Native 36 | processedStyles = { ...this.removeImportant(cssProp, cssValue) }; 37 | 38 | // Update cssValue to reflect the processed result for the next step 39 | cssValue = processedStyles[cssProp]; 40 | 41 | // converting value for units (px,em,rem,vh/vw) to only number as units are not supported by React Native 42 | processedStyles = { ...this.convertUnitToNumber(cssProp, cssValue) }; 43 | 44 | // Update cssValue to reflect the processed result for the next step 45 | cssValue = processedStyles[cssProp]; 46 | 47 | // handling border related css properties 48 | processedStyles = { ...this.handleBorderProperties(cssProp, cssValue) }; 49 | 50 | // Update cssValue to reflect the processed result for the next step 51 | cssValue = processedStyles[cssProp]; 52 | 53 | processedStyles = { ...this.handlePositionProperties(cssProp, cssValue) }; 54 | 55 | // Update cssValue to reflect the processed result for the next step 56 | cssValue = processedStyles[cssProp]; 57 | 58 | // if (cssProp === this.__POSITION) { 59 | // const positionVal = 60 | // typeof val === this.__TYPE_OF_STRING ? val.trim() : val; 61 | // const positionStyles = this.handlePositionProperty( 62 | // positionVal, 63 | // styles 64 | // ); 65 | 66 | // Handle overflow properties 67 | processedStyles = { ...this.handleOverflowProperties(cssProp, cssValue) }; 68 | 69 | // Update cssValue to reflect the processed result for the next step 70 | cssValue = processedStyles[cssProp]; 71 | 72 | // handle display 73 | processedStyles = { ...this.handleFlexDisplay(cssProp, cssValue) }; 74 | 75 | // Update cssValue to reflect the processed result for the next step 76 | cssValue = processedStyles[cssProp]; 77 | 78 | // // Apply all position-related styles 79 | // flavouredStyles = { ...flavouredStyles, ...positionStyles }; 80 | // } 81 | 82 | // if (cssProp === this.__DISPLAY && val?.includes(this.__FLEX)) { 83 | // const flexStyles = this.handleFlexDisplay(styles); 84 | 85 | // // Apply flex styles to flavouredStyles 86 | // Object.assign(flavouredStyles, flexStyles); 87 | // } 88 | 89 | // Assign the flavoured value back to the flavoured style object 90 | flavouredStyles = { ...flavouredStyles, ...processedStyles }; 91 | }); 92 | 93 | flavouredStyles = { ...this.removeNotSupportedCssProps(flavouredStyles) }; 94 | 95 | // Return flavoured style object 96 | // console.log("flavouredStyles" + JSON.stringify(flavouredStyles, null, 2)); 97 | return flavouredStyles; 98 | } else { 99 | // Return original style object if not a mobile platform 100 | return styles; 101 | } 102 | } 103 | /** 104 | * 105 | * @param cssProp 106 | * @param cssValue 107 | * @returns 108 | */ 109 | removeImportant(cssProp: string, cssValue: string): any { 110 | if (cssValue 111 | && typeof cssValue === this.__TYPE_OF_STRING 112 | && cssValue.includes(IMPORTANT)) { 113 | cssValue = cssValue.replace(IMPORTANT, this.__EMPTY_STRING); 114 | } 115 | return { [cssProp]: cssValue }; 116 | } 117 | 118 | /** 119 | * 120 | * @param cssProp 121 | * @param cssValue 122 | * @returns 123 | */ 124 | convertUnitToNumber(cssProp: string, cssValue: any): any { 125 | if (this.__UNITS_VALUES_KEYS.includes(cssProp)) { 126 | if (typeof cssValue === this.__TYPE_OF_STRING) { 127 | cssValue = this.unitToNumber(cssValue); 128 | } 129 | } 130 | return { [cssProp]: cssValue }; 131 | } 132 | 133 | // handle border properties util 134 | handleBorderProperties(cssProp: string, cssValue: any): any { 135 | let returnStyle = { [cssProp]: cssValue }; 136 | 137 | if (cssProp.startsWith(this.__BORDER)) { 138 | switch(true) { 139 | case cssProp === this.__BORDER: 140 | returnStyle = this.handleBorderBreakDown(cssProp, cssValue); 141 | break; 142 | 143 | case cssProp.endsWith(this.__STYLE): 144 | returnStyle = this.handleBorderStyle(cssProp, cssValue); 145 | break; 146 | 147 | case cssProp.endsWith(this.__RADIUS): 148 | returnStyle = this.handleBorderRadius(cssProp, cssValue); 149 | break; 150 | } 151 | } 152 | return { ...returnStyle }; 153 | } 154 | 155 | //handle border if user give 3 value 156 | handleBorderBreakDown(cssProp: string, cssValue: any): any { 157 | if (cssValue === this.__UNSET || cssValue === this.__NONE) { 158 | return { borderWidth: this.__ZERO }; 159 | } else { 160 | const [borderWidth, borderStyle, borderColor] = cssProp.split(" "); 161 | const borderWidthValue = this.unitToNumber(borderWidth.trim()); 162 | const borderStyleValue = [this.__DOTTED, this.__DASHED, this.__SOLID].includes(borderStyle) ? borderStyle : this.__SOLID; 163 | const borderColorValue = borderColor; 164 | 165 | return { borderColor: borderColorValue, borderStyle: borderStyleValue, borderWidth: borderWidthValue }; 166 | } 167 | } 168 | 169 | // handle border style 170 | handleBorderStyle(cssProp: string, cssValue: any): any { 171 | cssValue = [this.__DOTTED, this.__DASHED, this.__SOLID].includes(cssValue) ? cssValue : this.__SOLID; 172 | return { [cssProp]: cssValue }; 173 | } 174 | 175 | // handle border styles 176 | handleBorderRadius(cssProp: string, cssValue: any): any { 177 | cssValue = parseFloat(cssValue); 178 | if (cssValue === 0) { 179 | return { [cssProp]: cssValue }; // Just apply borderRadius without overflow 180 | } 181 | // Many cases, if overflow has value in same styleclasses where border-radius is used, there can be a issue in react-native so we use overflow: hidden 182 | return { clipChildren: true, [cssProp]: cssValue, overflow: this.__HIDDEN }; 183 | } 184 | 185 | // Function to handle position property and related styles 186 | handlePositionProperties (cssProp: string, cssValue: any): any { 187 | let positionStyles = { [cssProp]: cssValue }; 188 | 189 | if (cssProp === this.__POSITION) { 190 | // Determine position type for React Native 191 | if (cssValue === this.__FIXED || cssValue === this.__STICKY) { 192 | // React Native doesn't support fixed or sticky; default to absolute 193 | positionStyles = { position: this.__ABSOLUTE }; 194 | } else if (cssValue === this.__ABSOLUTE) { 195 | positionStyles = { position: cssValue }; 196 | } else { 197 | // Default to relative if position is unknown 198 | positionStyles = { position: this.__RELATIVE }; 199 | } 200 | 201 | // Copy top, bottom, left, right properties if they exist 202 | // this.__POSITION_CSS_PROPS.forEach((prop) => { 203 | // if (styleObject[prop] !== undefined) { 204 | // positionStyles[prop] = styleObject[prop]; 205 | // } 206 | // }); 207 | } 208 | 209 | return { ...positionStyles }; 210 | } 211 | 212 | /** 213 | * Handle overflow property for React Native 214 | * @param {string} cssProp 215 | * @param {any} cssValue 216 | * @returns {object} - Processed overflow style 217 | */ 218 | handleOverflowProperties(cssProp: string, cssValue: any): any { 219 | let returnStyle = { [cssProp]: cssValue }; 220 | 221 | // For React Native, handle overflow properly by setting valid values 222 | if (cssProp === "overflow") { 223 | switch (cssValue) { 224 | case "clip": 225 | returnStyle = { overflow: "hidden" }; 226 | break; 227 | 228 | case "hidden": 229 | returnStyle = { overflow: cssValue }; 230 | break; 231 | 232 | case "visible": 233 | returnStyle = { overflow: cssValue }; 234 | break; 235 | 236 | case "scroll": 237 | // React Native doesn't support overflow: 'scroll' directly. 238 | // Use ScrollView for scrollable content instead. 239 | console.warn("React Native doesn't support overflow: 'scroll'. Use ScrollView instead."); 240 | returnStyle = { overflow: "visible" }; 241 | break; 242 | 243 | case "auto": 244 | // Handle overflow: 'auto' 245 | // React Native doesn't have an exact equivalent for 'auto', 246 | // so we can wrap the content with ScrollView to make it scrollable when needed. 247 | console.warn("React Native doesn't support overflow: 'auto'. Use ScrollView for auto scrolling."); 248 | returnStyle = { overflow: "visible" }; // Default behavior 249 | break; 250 | 251 | default: 252 | returnStyle = { overflow: "visible" }; // Default behavior in React Native 253 | break; 254 | } 255 | } 256 | 257 | return { ...returnStyle }; 258 | } 259 | 260 | handleFlexDisplay (cssProp: string, cssValue: any): any { 261 | let returnStyle = { [cssProp]: cssValue }; 262 | 263 | if (cssProp === this.__DISPLAY && !( cssValue?.includes(this.__NONE))) { 264 | returnStyle = { flex: 1 }; 265 | } 266 | return { ...returnStyle }; 267 | } 268 | 269 | removeNotSupportedCssProps(flavouredStyles: any): any { 270 | 271 | // Object.keys(flavouredStyles)?.forEach((cssProp, index) => { //command as failed compilation error 272 | Object.keys(flavouredStyles)?.forEach((cssProp) => { 273 | 274 | const cssValue = flavouredStyles[cssProp]; 275 | 276 | if (cssProp === this.__DISPLAY && !( cssValue?.includes(this.__NONE))) { 277 | delete flavouredStyles[cssProp]; 278 | } 279 | }); 280 | return flavouredStyles; 281 | } 282 | } -------------------------------------------------------------------------------- /package/StylesProvider.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | 4 | import { updateTheme } from "./base/BaseStyle"; 5 | import { ThemeManager } from "./base/ThemeManager"; 6 | import { AppStylesContext, ThemeContext } from "./config/contextHandler"; 7 | import { 8 | WrappidDataContext, 9 | WrappidDispatchContext 10 | } from "./context/WrappidContext"; 11 | import { UPDATE_DIMENSIONS } from "./context/wrappidReducer"; 12 | import DefaultSCStyles from "./styledComponents/DefaultSCStyles"; 13 | import LargeSCStyles from "./styledComponents/LargeSCStyles"; 14 | import MediumSCStyles from "./styledComponents/MediumSCStyles"; 15 | import SmallSCStyles from "./styledComponents/SmallSCStyles"; 16 | import XLargeSCStyles from "./styledComponents/XLargeSCStyles"; 17 | import XXLargeSCStyles from "./styledComponents/XXLargeSCStyles"; 18 | import { DEFAULT_THEME } from "./theme/theme"; 19 | import { DEFAULT_THEME_TYPES } from "./theme/themeType"; 20 | import DefaultUtilityStyles from "./utility/DefaultUtilityStyles"; 21 | import LargeUtilityStyles from "./utility/LargeUtilityStyles"; 22 | import MediumUtilityStyles from "./utility/MediumUtilityStyles"; 23 | import SmallUtilityStyles from "./utility/SmallUtilityStyles"; 24 | import XLargeUtilityStyles from "./utility/XLargeUtilityStyles"; 25 | import XXLargeUtilityStyles from "./utility/XXLargeUtilityStyles"; 26 | 27 | export let mergedDefaultStyles = { 28 | ...new DefaultUtilityStyles().style, 29 | ...new DefaultSCStyles().style, 30 | }; 31 | 32 | export let mergedSmallStyles = { 33 | ...new SmallUtilityStyles().style, 34 | ...new SmallSCStyles().style, 35 | }; 36 | export let mergedMediumStyles = { 37 | ...new MediumUtilityStyles().style, 38 | ...new MediumSCStyles().style, 39 | }; 40 | export let mergedLargeStyles = { 41 | ...new LargeUtilityStyles().style, 42 | ...new LargeSCStyles().style, 43 | }; 44 | export let mergedXLargeStyles = { 45 | ...new XLargeUtilityStyles().style, 46 | ...new XLargeSCStyles().style, 47 | }; 48 | export let mergedXXLargeStyles = { 49 | ...new XXLargeUtilityStyles().style, 50 | ...new XXLargeSCStyles().style, 51 | }; 52 | 53 | export let _coreStyles: any; 54 | export let _appStyles: any; 55 | 56 | export let theme = DEFAULT_THEME; 57 | 58 | export const getMergedStyles = () => { 59 | return { 60 | mergedDefaultStyles, 61 | mergedLargeStyles, 62 | mergedMediumStyles, 63 | mergedSmallStyles, 64 | mergedXLargeStyles, 65 | mergedXXLargeStyles, 66 | }; 67 | }; 68 | 69 | export default function StylesProvider(props: { 70 | appStyles: any; 71 | coreStyles: any; 72 | children: any; 73 | themeID?: string; 74 | dimensions: any; 75 | }) { 76 | const { themeID, appStyles, coreStyles, children, dimensions } = props; 77 | const [styleFiles, setStyles] = useState({}); 78 | const [providerId, setProviderId] = useState(null); 79 | 80 | const [currentTheme, setCurrentTheme] = useState(theme); 81 | 82 | const { 83 | themes = {}, 84 | pageThemeID, 85 | // eslint-disable-next-line etc/no-commented-out-code 86 | // const { dimensions: wdDimensions } = WrappidData; 87 | dimensions: wdDimensions, 88 | } = React.useContext(WrappidDataContext); 89 | const { userThemeID } = useSelector((state: any) => state?.app); 90 | const dispatch = React.useContext(WrappidDispatchContext); 91 | 92 | const mergeJson = (oldJson: any = {}, newJson: any = {}) => { 93 | const convertedJSON: any = { ...oldJson }; 94 | 95 | if ( 96 | (Array.isArray(oldJson) && !Array.isArray(newJson)) || 97 | (!Array.isArray(oldJson) && Array.isArray(newJson)) 98 | ) { 99 | throw new Error("JSON value type mismatch"); 100 | } 101 | if (Array.isArray(oldJson) && Array.isArray(newJson)) { 102 | return [...oldJson, ...newJson]; 103 | } 104 | if (Object.keys(oldJson).length <= 0) { 105 | return newJson; 106 | } 107 | for (const key in oldJson) { 108 | if (Object.prototype.hasOwnProperty.call(newJson, key)) { 109 | const keyType = typeof oldJson[key]; 110 | 111 | if (keyType === "object") { 112 | convertedJSON[key] = mergeJson(oldJson[key], newJson[key]); 113 | } else { 114 | convertedJSON[key] = newJson[key]; 115 | } 116 | } 117 | } 118 | 119 | return convertedJSON; 120 | }; 121 | 122 | useEffect(() => { 123 | if (dimensions && dimensions?.windowWidth && dimensions?.windowHeight) { 124 | dispatch({ 125 | payload: dimensions, 126 | type : UPDATE_DIMENSIONS, 127 | }); 128 | } 129 | }, [dimensions]); 130 | 131 | useEffect(() => { 132 | const mergeTheme: DEFAULT_THEME_TYPES = { ...currentTheme }; 133 | let tempTheme: any = {}; 134 | 135 | if (themeID && Object.keys(themes).includes(themeID)) { 136 | tempTheme = themes[themeID]?.theme || {}; 137 | } else if (pageThemeID && Object.keys(themes).includes(pageThemeID)) { 138 | tempTheme = themes[pageThemeID]?.theme || {}; 139 | } else if (userThemeID && Object.keys(themes).includes(userThemeID)) { 140 | tempTheme = themes[userThemeID]?.theme || {}; 141 | } 142 | const mergedTheme: any = mergeJson(mergeTheme, tempTheme); 143 | 144 | setCurrentTheme(mergedTheme); 145 | }, [themes, themeID, userThemeID, pageThemeID]); 146 | 147 | useEffect(() => { 148 | updateTheme(theme); 149 | new ThemeManager().refreshTheme(theme); 150 | 151 | if (coreStyles && appStyles) { 152 | _appStyles = appStyles; 153 | _coreStyles = coreStyles; 154 | } 155 | const defaultStyles = new DefaultUtilityStyles().style; 156 | const defaultSCStyles = new DefaultSCStyles().style; 157 | const defaultCoreStyles = new _coreStyles.styles.default().style; 158 | const largeCoreStyles = new _coreStyles.styles.large().style; 159 | const mediumCoreStyles = new _coreStyles.styles.medium().style; 160 | const smallCoreStyles = new _coreStyles.styles.small().style; 161 | const xLargeCoreStyles = new _coreStyles.styles.xLarge().style; 162 | const xxLargeCoreStyles = new _coreStyles.styles.xxLarge().style; 163 | 164 | console.log(`appStyles=${appStyles}`); 165 | 166 | const defaultAppStyles = _appStyles.styles.default; 167 | 168 | const smStyle = new SmallUtilityStyles().style; 169 | const smScStyle = new SmallSCStyles().style; 170 | 171 | const mdStyle = new MediumUtilityStyles().style; 172 | const mdScStyle = new MediumSCStyles().style; 173 | 174 | const lgStyle = new LargeUtilityStyles().style; 175 | const lgScStyle = new LargeSCStyles().style; 176 | 177 | const xLgStyle = new XLargeUtilityStyles().style; 178 | const xLgScStyle = new XLargeSCStyles().style; 179 | 180 | const xxLgStyle = new XXLargeUtilityStyles().style; 181 | const xxLgScStyle = new XXLargeSCStyles().style; 182 | 183 | mergedDefaultStyles = { 184 | ...defaultStyles, 185 | ...defaultSCStyles, 186 | ...defaultCoreStyles, 187 | ...defaultAppStyles, 188 | }; 189 | 190 | mergedSmallStyles = { 191 | ...smStyle, 192 | ...smScStyle, 193 | ...smallCoreStyles, 194 | ..._appStyles?.styles?.small, 195 | }; 196 | mergedMediumStyles = { 197 | ...mdStyle, 198 | ...mdScStyle, 199 | ...mediumCoreStyles, 200 | ..._appStyles?.styles?.medium, 201 | }; 202 | mergedLargeStyles = { 203 | ...lgStyle, 204 | ...lgScStyle, 205 | ...largeCoreStyles, 206 | ..._appStyles?.styles?.large, 207 | }; 208 | mergedXLargeStyles = { 209 | ...xLgStyle, 210 | ...xLgScStyle, 211 | ...xLargeCoreStyles, 212 | ..._appStyles?.styles?.xLarge, 213 | }; 214 | mergedXXLargeStyles = { 215 | ...xxLgStyle, 216 | ...xxLgScStyle, 217 | ...xxLargeCoreStyles, 218 | ..._appStyles?.styles?.xxLarge, 219 | }; 220 | 221 | setStyles({ 222 | mergedDefaultStyles, 223 | mergedLargeStyles, 224 | mergedMediumStyles, 225 | mergedSmallStyles, 226 | mergedXLargeStyles, 227 | mergedXXLargeStyles, 228 | }); 229 | 230 | setProviderId("style-provider" + new Date()); 231 | }, []); 232 | 233 | useEffect(() => { 234 | theme = { ...theme, ...currentTheme }; 235 | updateTheme(theme); 236 | new ThemeManager().refreshTheme(theme); 237 | 238 | if (coreStyles && appStyles) { 239 | _appStyles = appStyles; 240 | _coreStyles = coreStyles; 241 | } 242 | const defaultStyles = new DefaultUtilityStyles().style; 243 | const defaultSCStyles = new DefaultSCStyles().style; 244 | const defaultCoreStyles = new _coreStyles.styles.default().style; 245 | const largeCoreStyles = new _coreStyles.styles.large().style; 246 | const mediumCoreStyles = new _coreStyles.styles.medium().style; 247 | const smallCoreStyles = new _coreStyles.styles.small().style; 248 | const xLargeCoreStyles = new _coreStyles.styles.xLarge().style; 249 | const xxLargeCoreStyles = new _coreStyles.styles.xxLarge().style; 250 | 251 | console.log(`appStyles=${appStyles}`); 252 | 253 | const defaultAppStyles = _appStyles.styles.default; 254 | 255 | const smStyle = new SmallUtilityStyles().style; 256 | const smScStyle = new SmallSCStyles().style; 257 | 258 | const mdStyle = new MediumUtilityStyles().style; 259 | const mdScStyle = new MediumSCStyles().style; 260 | 261 | const lgStyle = new LargeUtilityStyles().style; 262 | const lgScStyle = new LargeSCStyles().style; 263 | 264 | const xLgStyle = new XLargeUtilityStyles().style; 265 | const xLgScStyle = new XLargeSCStyles().style; 266 | 267 | const xxLgStyle = new XXLargeUtilityStyles().style; 268 | const xxLgScStyle = new XXLargeSCStyles().style; 269 | 270 | mergedDefaultStyles = { 271 | ...defaultStyles, 272 | ...defaultSCStyles, 273 | ...defaultCoreStyles, 274 | ...defaultAppStyles, 275 | }; 276 | 277 | mergedSmallStyles = { 278 | ...smStyle, 279 | ...smScStyle, 280 | ...smallCoreStyles, 281 | ..._appStyles?.styles?.small, 282 | }; 283 | mergedMediumStyles = { 284 | ...mdStyle, 285 | ...mdScStyle, 286 | ...mediumCoreStyles, 287 | ..._appStyles?.styles?.medium, 288 | }; 289 | mergedLargeStyles = { 290 | ...lgStyle, 291 | ...lgScStyle, 292 | ...largeCoreStyles, 293 | ..._appStyles?.styles?.large, 294 | }; 295 | mergedXLargeStyles = { 296 | ...xLgStyle, 297 | ...xLgScStyle, 298 | ...xLargeCoreStyles, 299 | ..._appStyles?.styles?.xLarge, 300 | }; 301 | mergedXXLargeStyles = { 302 | ...xxLgStyle, 303 | ...xxLgScStyle, 304 | ...xxLargeCoreStyles, 305 | ..._appStyles?.styles?.xxLarge, 306 | }; 307 | 308 | setStyles({ 309 | mergedDefaultStyles, 310 | mergedLargeStyles, 311 | mergedMediumStyles, 312 | mergedSmallStyles, 313 | mergedXLargeStyles, 314 | mergedXXLargeStyles, 315 | }); 316 | setProviderId("style-provider" + new Date()); 317 | }, [currentTheme]); 318 | 319 | return ( 320 | wdDimensions && 321 | wdDimensions?.windowWidth && 322 | wdDimensions?.windowHeight && ( 323 | <> 324 | {theme && providerId ? ( 325 | 329 | 330 | {children} 331 | 332 | 333 | ) : null} 334 | 335 | ) 336 | ); 337 | } 338 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [0.0.182](https://github.com/wrappid/styles/compare/v0.0.181...v0.0.182) (2025-03-05) 6 | 7 | 8 | ### Features 9 | 10 | * **config:** :label: added dynamic property ([3bd7803](https://github.com/wrappid/styles/commit/3bd78038e9ebea38b08c5c5619307ef60b21f11e)), closes [#135](https://github.com/wrappid/styles/issues/135) 11 | 12 | ### [0.0.181](https://github.com/wrappid/styles/compare/v0.0.180...v0.0.181) (2025-02-19) 13 | 14 | 15 | ### Features 16 | 17 | * **global:** :sparkles: add constant for the classes which is added previously ([5491ede](https://github.com/wrappid/styles/commit/5491edebe65705ac63b894d2653156390c8db401)), closes [#132](https://github.com/wrappid/styles/issues/132) 18 | 19 | ### [0.0.180](https://github.com/wrappid/styles/compare/v0.0.179...v0.0.180) (2025-02-18) 20 | 21 | 22 | ### Features 23 | 24 | * **global:** :sparkles: add 4px padding and gap for consistent structure ([a69f8d5](https://github.com/wrappid/styles/commit/a69f8d55d94d5db9f3b004cc2de13de17c4c8f98)), closes [#132](https://github.com/wrappid/styles/issues/132) 25 | 26 | ### [0.0.179](https://github.com/wrappid/styles/compare/v0.0.178...v0.0.179) (2025-02-06) 27 | 28 | 29 | ### Bug Fixes 30 | 31 | * **global:** :bug: add some padding in to input box ([b0ea6d8](https://github.com/wrappid/styles/commit/b0ea6d84ff7571b5d6647ef74f0e470ce153fcf4)), closes [#121](https://github.com/wrappid/styles/issues/121) 32 | 33 | ### [0.0.178](https://github.com/wrappid/styles/compare/v0.0.177...v0.0.178) (2024-11-26) 34 | 35 | 36 | ### Bug Fixes 37 | 38 | * **core:** :sparkles: code cleanup and new OVERFLOW UNSET added ([0bb60c9](https://github.com/wrappid/styles/commit/0bb60c99749d402aebf4ebd8e2f20844ea6f7409)) 39 | * **global:** :bug: destructure style package ([1ab120c](https://github.com/wrappid/styles/commit/1ab120c3e129a23b4f4f30eb2c501709237f3e1f)), closes [#129](https://github.com/wrappid/styles/issues/129) 40 | 41 | ### [0.0.177](https://github.com/wrappid/styles/compare/v0.0.176...v0.0.177) (2024-11-20) 42 | 43 | 44 | ### Bug Fixes 45 | 46 | * **core:** :bug: mobile related changes ([2d90194](https://github.com/wrappid/styles/commit/2d90194140313042fe7025b1f9ab098824992b39)), closes [#121](https://github.com/wrappid/styles/issues/121) 47 | * **global:** :bug: fix issue related to linting ([6fb6857](https://github.com/wrappid/styles/commit/6fb68574173ac42fb4f9b55e71cb461ac9399c1b)), closes [#121](https://github.com/wrappid/styles/issues/121) 48 | 49 | ### [0.0.176](https://github.com/wrappid/styles/compare/v0.0.175...v0.0.176) (2024-11-14) 50 | 51 | 52 | ### Bug Fixes 53 | 54 | * **global:** :bug: changes to fix compilation error ([db33017](https://github.com/wrappid/styles/commit/db330176b644233386e8ce5fe86b4deaae6bba06)), closes [#121](https://github.com/wrappid/styles/issues/121) 55 | 56 | ### [0.0.175](https://github.com/wrappid/styles/compare/v0.0.174...v0.0.175) (2024-11-13) 57 | 58 | 59 | ### Bug Fixes 60 | 61 | * **core:** :zap: helper text left margin removal ([c9c5e91](https://github.com/wrappid/styles/commit/c9c5e9121a4d9890b2da581f61fa49c763574c0c)) 62 | * **global:** :bug: destructure add flavour ([12ba719](https://github.com/wrappid/styles/commit/12ba7190aee5590d716c5568f09d688cb7edbfcd)), closes [#121](https://github.com/wrappid/styles/issues/121) 63 | * **global:** :bug: some border is not working so update those ([6dfee3c](https://github.com/wrappid/styles/commit/6dfee3c017eeaa3816a16355f0d4010b7e0f02fe)), closes [#121](https://github.com/wrappid/styles/issues/121) 64 | * **global:** :bug: some border is not working so update those ([4da3a4f](https://github.com/wrappid/styles/commit/4da3a4fee3615a77bf7ddab45ac4b20ae0d79549)), closes [#121](https://github.com/wrappid/styles/issues/121) 65 | 66 | ### [0.0.174](https://github.com/wrappid/styles/compare/v0.0.173...v0.0.174) (2024-11-08) 67 | 68 | 69 | ### Bug Fixes 70 | 71 | * **core:** :fire: build working now ([e083d92](https://github.com/wrappid/styles/commit/e083d92506a6bb4746bca3a922bae5c429f142c2)) 72 | 73 | ### [0.0.173](https://github.com/wrappid/styles/compare/v0.0.172...v0.0.173) (2024-11-08) 74 | 75 | 76 | ### Features 77 | 78 | * **global:** :sparkles: add dimension, fix styles in add flavour ([f036cc1](https://github.com/wrappid/styles/commit/f036cc1b5525756ff6842c0bd348c64bcc0464e2)), closes [#121](https://github.com/wrappid/styles/issues/121) 79 | * **global:** :sparkles: add dimension, fix styles in add flavour ([ee1854b](https://github.com/wrappid/styles/commit/ee1854b75bb26f7fe96ba752fbfe50885b7001f3)), closes [#121](https://github.com/wrappid/styles/issues/121) 80 | 81 | 82 | ### Bug Fixes 83 | 84 | * :bug: resolve merge ([369c74f](https://github.com/wrappid/styles/commit/369c74f96204df14b4514425d52d776ea4fc1707)), closes [#121](https://github.com/wrappid/styles/issues/121) 85 | * **global:** :bug: fix the code give lint error ([52056ef](https://github.com/wrappid/styles/commit/52056ef29da67a30dbff627f53780af8356d3a68)), closes [#121](https://github.com/wrappid/styles/issues/121) 86 | * **global:** :bug: fix width height in add flavour ([c326c1d](https://github.com/wrappid/styles/commit/c326c1d57192fa3997d14869cf270affa6c911f6)), closes [#121](https://github.com/wrappid/styles/issues/121) 87 | * **global:** :bug: resolve merge ([38bb99e](https://github.com/wrappid/styles/commit/38bb99e58cc9f7fac37218a97b34c7d0924866e5)), closes [#121](https://github.com/wrappid/styles/issues/121) 88 | * **global:** :bug: updated ([c519681](https://github.com/wrappid/styles/commit/c51968140c4b6402b85a2a944703acb5ca38af3e)), closes [#121](https://github.com/wrappid/styles/issues/121) 89 | 90 | ### [0.0.172](https://github.com/wrappid/styles/compare/v0.0.171...v0.0.172) (2024-11-06) 91 | 92 | ### [0.0.171](https://github.com/wrappid/styles/compare/v0.0.170...v0.0.171) (2024-11-02) 93 | 94 | 95 | ### Bug Fixes 96 | 97 | * **core:** :zap: app bar style fix ([67456da](https://github.com/wrappid/styles/commit/67456da42e9665386796ab2bd7a227061be44718)) 98 | 99 | ### [0.0.170](https://github.com/wrappid/styles/compare/v0.0.169...v0.0.170) (2024-11-02) 100 | 101 | 102 | ### Bug Fixes 103 | 104 | * **core:** :zap: dialog width fixed ([1381fe6](https://github.com/wrappid/styles/commit/1381fe600f4c4147cd25efc1ce40cc1faa5a9f46)) 105 | 106 | ### [0.0.169](https://github.com/wrappid/styles/compare/v0.0.168...v0.0.169) (2024-11-02) 107 | 108 | 109 | ### Bug Fixes 110 | 111 | * **core:** :bug: build fix ([140ba24](https://github.com/wrappid/styles/commit/140ba24cd86ac6614853707004197937f6d728d7)), closes [#121](https://github.com/wrappid/styles/issues/121) 112 | 113 | ### [0.0.168](https://github.com/wrappid/styles/compare/v0.0.167...v0.0.168) (2024-11-02) 114 | 115 | 116 | ### Bug Fixes 117 | 118 | * **global:** :bug: changes styles related code for mobile application ([d9bed17](https://github.com/wrappid/styles/commit/d9bed17b42f3e8447ff4cc08a94dcea007c69b28)), closes [#121](https://github.com/wrappid/styles/issues/121) 119 | 120 | ### [0.0.167](https://github.com/wrappid/styles/compare/v0.0.166...v0.0.167) (2024-10-17) 121 | 122 | 123 | ### Features 124 | 125 | * **global:** :sparkles: add some style property ([6e23340](https://github.com/wrappid/styles/commit/6e23340ddc8dc42fe0c907753b2a7737e421d488)), closes [#118](https://github.com/wrappid/styles/issues/118) 126 | * **global:** :sparkles: added styles that needed for pagebuilder UI ([bcdd64f](https://github.com/wrappid/styles/commit/bcdd64f1cdbe0342164b81e760b6866f45294112)), closes [#118](https://github.com/wrappid/styles/issues/118) 127 | 128 | ### [0.0.166](https://github.com/wrappid/styles/compare/v0.0.165...v0.0.166) (2024-09-26) 129 | 130 | ### [0.0.165](https://github.com/wrappid/styles/compare/v0.0.164...v0.0.165) (2024-09-25) 131 | 132 | 133 | ### Bug Fixes 134 | 135 | * **core:** :bug: theme reflection from styles and theme both ([66f8ea9](https://github.com/wrappid/styles/commit/66f8ea9364a9b28c25fb53f51d4766357c5d5afe)), closes [#45](https://github.com/wrappid/styles/issues/45) 136 | 137 | ### [0.0.164](https://github.com/wrappid/styles/compare/v0.0.163...v0.0.164) (2024-09-12) 138 | 139 | 140 | ### Bug Fixes 141 | 142 | * **core:** :bug: scNavigationLink remove important ([9d558b5](https://github.com/wrappid/styles/commit/9d558b5ee6916b58c2357ae25efe2a1e22de69fb)), closes [#114](https://github.com/wrappid/styles/issues/114) 143 | 144 | ### [0.0.163](https://github.com/wrappid/styles/compare/v0.0.162...v0.0.163) (2024-09-04) 145 | 146 | 147 | ### Bug Fixes 148 | 149 | * **global:** :bug: add important in position ([33e13e4](https://github.com/wrappid/styles/commit/33e13e4ec095e0e674fc6896101a7fbb6e1d42f3)), closes [#112](https://github.com/wrappid/styles/issues/112) 150 | 151 | ### [0.0.162](https://github.com/wrappid/styles/compare/v0.0.161...v0.0.162) (2024-08-24) 152 | 153 | 154 | ### Bug Fixes 155 | 156 | * **core:** :bug: unnecessary console log remove ([8dfc331](https://github.com/wrappid/styles/commit/8dfc33159eac04ba89d18f04afad76c3b24e3a95)), closes [#87](https://github.com/wrappid/styles/issues/87) 157 | 158 | ### [0.0.161](https://github.com/wrappid/styles/compare/v0.0.160...v0.0.161) (2024-08-23) 159 | 160 | ### [0.0.160](https://github.com/wrappid/styles/compare/v0.0.159...v0.0.160) (2024-08-23) 161 | 162 | ### [0.0.159](https://github.com/wrappid/styles/compare/v0.0.158...v0.0.159) (2024-08-16) 163 | 164 | 165 | ### Bug Fixes 166 | 167 | * **core:** :bug: add important to backgound in DefaultUtilityStyles ([0ba108f](https://github.com/wrappid/styles/commit/0ba108fef77d9e9b052ebcc9595938718943d71b)), closes [#105](https://github.com/wrappid/styles/issues/105) 168 | 169 | ### [0.0.158](https://github.com/wrappid/styles/compare/v0.0.157...v0.0.158) (2024-08-15) 170 | 171 | 172 | ### Bug Fixes 173 | 174 | * **core:** :bug: adding important in padding ([4fca2f0](https://github.com/wrappid/styles/commit/4fca2f034cc9b8ecd578b270a02a667e13856d2c)), closes [#102](https://github.com/wrappid/styles/issues/102) 175 | * **core:** :bug: fix the merge conflict ([e080456](https://github.com/wrappid/styles/commit/e080456ae3c49e655ba86bc67bdd91151560465a)), closes [#102](https://github.com/wrappid/styles/issues/102) 176 | * **core:** :bug: solve the conflicting error ([caf66c1](https://github.com/wrappid/styles/commit/caf66c13d853681375900cd43b8419c66d36ce4a)), closes [#102](https://github.com/wrappid/styles/issues/102) 177 | 178 | ### [0.0.157](https://github.com/wrappid/styles/compare/v0.0.156...v0.0.157) (2024-08-13) 179 | 180 | 181 | ### Features 182 | 183 | * **core:** :sparkles: added the remaining style property in display ([5e93a26](https://github.com/wrappid/styles/commit/5e93a26d38cd96ca7fa065d7499de394247a30f4)), closes [#101](https://github.com/wrappid/styles/issues/101) 184 | * **global:** :sparkles: adding liststyles in style package ([cd2ddef](https://github.com/wrappid/styles/commit/cd2ddefda6f51d2316f47031af4407551571392e)), closes [#101](https://github.com/wrappid/styles/issues/101) 185 | * **utils:** :sparkles: the css in js is added in the file ([d202bd9](https://github.com/wrappid/styles/commit/d202bd9af223401d50dc2d312e8b98487c36d558)), closes [#101](https://github.com/wrappid/styles/issues/101) 186 | 187 | ### [0.0.156](https://github.com/wrappid/styles/compare/v0.0.155...v0.0.156) (2024-08-05) 188 | 189 | ### [0.0.155](https://github.com/wrappid/styles/compare/v0.0.154...v0.0.155) (2024-07-22) 190 | 191 | 192 | ### Bug Fixes 193 | 194 | * **utils:** :lipstick: add important to bgSuccess, bgInfo, bgWarning, bgError ([5196505](https://github.com/wrappid/styles/commit/5196505c86a59b77b91ce67cf6bdb8ac002b5179)), closes [#97](https://github.com/wrappid/styles/issues/97) 195 | 196 | ### [0.0.154](https://github.com/wrappid/styles/compare/v0.0.153...v0.0.154) (2024-07-11) 197 | 198 | ### [0.0.153](https://github.com/wrappid/styles/compare/v0.0.152...v0.0.153) (2024-07-01) 199 | 200 | 201 | ### Bug Fixes 202 | 203 | * **global:** :sparkles: page theme merge with default theme ([636e776](https://github.com/wrappid/styles/commit/636e7764c37db4ec18d4cd3cb4c0ca2fa5971ea9)), closes [#93](https://github.com/wrappid/styles/issues/93) 204 | 205 | ### [0.0.152](https://github.com/wrappid/styles/compare/v0.0.151...v0.0.152) (2024-06-26) 206 | 207 | 208 | ### Features 209 | 210 | * **global:** :sparkles: add important to PADDING ([df652b1](https://github.com/wrappid/styles/commit/df652b134cbc41f9572311d436e764390b8910ec)), closes [#91](https://github.com/wrappid/styles/issues/91) 211 | 212 | ### [0.0.151](https://github.com/wrappid/styles/compare/v0.0.150...v0.0.151) (2024-05-25) 213 | 214 | ### [0.0.150](https://github.com/wrappid/styles/compare/v0.0.149...v0.0.150) (2024-05-24) 215 | 216 | 217 | ### Bug Fixes 218 | 219 | * :bug: use important in display property ([c53da07](https://github.com/wrappid/styles/commit/c53da0734a0fdc1f68d931a79429e8bf102bcbbb)), closes [#89](https://github.com/wrappid/styles/issues/89) 220 | * **global:** :recycle: linting fix ([84a9474](https://github.com/wrappid/styles/commit/84a9474d226e77d129149c1e5ef0bd0143446f8b)), closes [#89](https://github.com/wrappid/styles/issues/89) 221 | 222 | ### [0.0.149](https://github.com/wrappid/styles/compare/v0.0.148...v0.0.149) (2024-05-14) 223 | 224 | 225 | ### Bug Fixes 226 | 227 | * **config:** 📦 version changes in package.json file ([2281b56](https://github.com/wrappid/styles/commit/2281b56ac9323d7033092127ac97ce8520e970de)), closes [#87](https://github.com/wrappid/styles/issues/87) 228 | 229 | ### [0.0.148](https://github.com/wrappid/styles/compare/v0.0.147...v0.0.148) (2024-04-26) 230 | 231 | 232 | ### Bug Fixes 233 | 234 | * **core:** :art: fix HEADING_TOP_MARGIN default value to 64 ([69940c2](https://github.com/wrappid/styles/commit/69940c2161c3bb87ee6af16178c939e29fabf714)), closes [#57](https://github.com/wrappid/styles/issues/57) 235 | * **core:** :zap: code cleanup related to config and theme ([a373082](https://github.com/wrappid/styles/commit/a37308208a9364c1cd70d2cd15562988b9464042)), closes [#57](https://github.com/wrappid/styles/issues/57) 236 | 237 | ### [0.0.147](https://github.com/wrappid/styles/compare/v0.0.146...v0.0.147) (2024-04-17) 238 | 239 | 240 | ### Bug Fixes 241 | 242 | * **global:** :bug: transfor rotate not wroking issue resolved ([9fb59e7](https://github.com/wrappid/styles/commit/9fb59e710f6106ca6e37bf5781cd4ef91cae3732)), closes [#72](https://github.com/wrappid/styles/issues/72) 243 | 244 | ### [0.0.146](https://github.com/wrappid/styles/compare/v0.0.145...v0.0.146) (2024-04-06) 245 | 246 | ### [0.0.145](https://github.com/wrappid/styles/compare/v0.0.144...v0.0.145) (2024-04-02) 247 | 248 | ### [0.0.144](https://github.com/wrappid/styles/compare/v0.0.143...v0.0.144) (2024-04-02) 249 | 250 | ### [0.0.143](https://github.com/wrappid/styles/compare/v0.0.142...v0.0.143) (2024-03-30) 251 | 252 | 253 | ### Bug Fixes 254 | 255 | * **global:** :bug: added Important tag to background Grey ([b623c49](https://github.com/wrappid/styles/commit/b623c492980e4e8a538f60ca20bc996ead9cf895)), closes [#23](https://github.com/wrappid/styles/issues/23) 256 | 257 | ### [0.0.142](https://github.com/wrappid/styles/compare/v0.0.141...v0.0.142) (2024-03-29) 258 | 259 | 260 | ### Features 261 | 262 | * **core:** :memo: add styles of font-weight, line-height and word-spacing ([6d43da5](https://github.com/wrappid/styles/commit/6d43da518c069c22d37a59343a5b0541a0458e26)), closes [#72](https://github.com/wrappid/styles/issues/72) 263 | * **core:** :memo: added styles for roate, font-weight and line-height ([151d325](https://github.com/wrappid/styles/commit/151d325dbe3fcba2106a04cac4fc426fcc1f5703)), closes [#72](https://github.com/wrappid/styles/issues/72) 264 | 265 | ### [0.0.141](https://github.com/wrappid/styles/compare/v0.0.140...v0.0.141) (2024-03-23) 266 | 267 | 268 | ### Features 269 | 270 | * **global:** :sparkles: added different bg-grid styles ([7f3d1d6](https://github.com/wrappid/styles/commit/7f3d1d66fdbc87fa4165c00f480643e586d27d0d)), closes [#57](https://github.com/wrappid/styles/issues/57) 271 | 272 | ### [0.0.140](https://github.com/wrappid/styles/compare/v0.0.139...v0.0.140) (2024-03-22) 273 | 274 | 275 | ### Features 276 | 277 | * **global:** :sparkles: initial changes to StylesProvider.tsx ([4960ca7](https://github.com/wrappid/styles/commit/4960ca74bd02a2ff653927cf3b756fafee532687)), closes [#57](https://github.com/wrappid/styles/issues/57) 278 | 279 | ### [0.0.139](https://github.com/wrappid/styles/compare/v0.0.138...v0.0.139) (2024-03-21) 280 | 281 | 282 | ### Bug Fixes 283 | 284 | * **core:** :bug: bug fixed for bg dotted background styles and a text styles css ([caec533](https://github.com/wrappid/styles/commit/caec53349348798a93ec050b912299398d5a6d9f)), closes [#72](https://github.com/wrappid/styles/issues/72) 285 | 286 | ### [0.0.138](https://github.com/wrappid/styles/compare/v0.0.137...v0.0.138) (2024-03-20) 287 | 288 | 289 | ### Features 290 | 291 | * **core:** :sparkles: created styles for transform rotate and a background ([35125c7](https://github.com/wrappid/styles/commit/35125c71bb873c88314d65222755735339b7a5b0)), closes [#72](https://github.com/wrappid/styles/issues/72) 292 | 293 | ### 0.0.137 (2024-03-20) 294 | 295 | ### 0.0.136 (2024-03-20) 296 | 297 | ### 0.0.135 (2024-03-19) 298 | 299 | ### 0.0.134 (2024-03-18) 300 | 301 | ### 0.0.133 (2024-03-16) 302 | 303 | ### 0.0.132 (2024-03-16) 304 | 305 | ### 0.0.131 (2024-03-16) 306 | 307 | ### 0.0.130 (2024-03-07) 308 | 309 | ### 0.0.129 (2024-03-04) 310 | 311 | ### 0.0.128 (2024-02-28) 312 | 313 | ### 0.0.127 (2024-02-28) 314 | 315 | ### 0.0.126 (2024-02-21) 316 | 317 | ### 0.0.125 (2024-02-19) 318 | 319 | ### 0.0.124 (2024-02-19) 320 | 321 | 322 | ### Features 323 | 324 | * **config:** :wrench: add config for CI/CD ([632d66b](https://github.com/wrappid/styles/commit/632d66b906770a659ffeaf80f31e8e11f5a37110)), closes [#44](https://github.com/wrappid/styles/issues/44) 325 | 326 | ### 0.0.124-dev.0 (2024-02-14) 327 | -------------------------------------------------------------------------------- /package/StyleUtil.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable etc/no-commented-out-code */ 2 | import { 3 | LARGE_WINDOW_WIDTH, 4 | MEDIUM_WINDOW_WIDTH, 5 | SMALL_WINDOW_WIDTH, 6 | XX_LARGE_WINDOW_WIDTH, 7 | X_LARGE_WINDOW_WIDTH 8 | } from "./config/constants"; 9 | import { WrappidData } from "./context/WrappidSyncer"; 10 | import StyleReactNativeFlavour from "./StyleReactNativeFlavour"; 11 | import { getMergedStyles } from "./StylesProvider"; 12 | import UtilityClasses from "./utility/UtilityClasses"; 13 | 14 | // const { innerWidth: windowWidth } = window; 15 | // const { windowWidth = null, windowHeight = null } = 16 | // WrappidData?.dimensions || {}; 17 | // const { windowWidth, windowHeight } = WrappidData?.dimensions ?? {}; 18 | 19 | // Define module-level variables for dimensions 20 | let windowWidth: number = 0; 21 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 22 | // let windowHeight: number = 0; 23 | 24 | // Function to update dimensions from WrappidData 25 | function updateDimensions() { 26 | if (WrappidData?.dimensions) { 27 | windowWidth = WrappidData.dimensions.windowWidth; 28 | // windowHeight = WrappidData.dimensions.windowHeight; 29 | // console.log( 30 | // "windowWidth:", 31 | // windowWidth, 32 | // "windowHeight:", 33 | // windowHeight 34 | // ); 35 | } 36 | } 37 | 38 | // Run updateDimensions immediately to set initial values 39 | // updateDimensions(); 40 | 41 | // const UNITS = ["!important"]; 42 | // const EXCEPTIONS = [ 43 | // "flexGrow", 44 | // "flexShrink", 45 | // "opacity", 46 | // "top", 47 | // "bottom", 48 | // "left", 49 | // "right", 50 | // "zIndex", 51 | // "fontWeight", 52 | // "minWidth", 53 | // ]; 54 | 55 | const sanitizeClassNames = (classNames: string[]): string[] => { 56 | // using set() method to create collections of unique values, 57 | // hence remove duplicates 58 | const sanitizedClassNames = ( 59 | Array.from( 60 | new Set( 61 | classNames && Array.isArray(classNames) ? classNames : [classNames] 62 | ) 63 | ) 64 | ); 65 | 66 | return [...sanitizedClassNames]; 67 | }; 68 | 69 | // export function addFlavor(styleObject: any) { 70 | // const { config } = WrappidData; 71 | 72 | // // const viewportToPixels = (value: string): number => { 73 | // // if (!windowWidth || !windowHeight) { 74 | // // console.warn("windowWidth or windowHeight is not defined."); 75 | // // return 0; 76 | // // } 77 | 78 | // // const isVw = value.endsWith("vw"); 79 | // // const isVh = value.endsWith("vh"); 80 | 81 | // // const numericValue = parseFloat(value.replace(isVw ? "vw" : "vh", "")); 82 | 83 | // // // Calculate pixels based on viewport dimensions 84 | // // if (isVw) { 85 | // // return (numericValue / 100) * windowWidth; 86 | // // } else if (isVh) { 87 | // // return (numericValue / 100) * windowHeight; 88 | // // } 89 | 90 | // // throw new Error("Invalid unit: value must end with 'vw' or 'vh'."); 91 | // // }; 92 | 93 | // /** 94 | // * @todo web cannot be go in else block 95 | // */ 96 | // if (config?.platform === "mobile") { 97 | // const newStyleObject = {}; 98 | // const keys = Object.keys(styleObject); 99 | // // Handle border radius separately 100 | // let hasBorderRadius = false; 101 | 102 | // // Helper function to handle position properties 103 | // const handlePosition = (originalStyles: any) => { 104 | // const positionStyles: any = { position: "absolute" }; 105 | 106 | // // Copy existing positioning properties 107 | // if (originalStyles.top !== undefined) 108 | // positionStyles.top = originalStyles.top; 109 | // if (originalStyles.bottom !== undefined) 110 | // positionStyles.bottom = originalStyles.bottom; 111 | // if (originalStyles.left !== undefined) 112 | // positionStyles.left = originalStyles.left; 113 | // if (originalStyles.right !== undefined) 114 | // positionStyles.right = originalStyles.right; 115 | 116 | // // For fixed/sticky positions, we might want to calculate initial position 117 | // // based on scroll position or viewport, but that would need to be handled 118 | // // at the component level since React Native doesn't support these directly 119 | 120 | // return positionStyles; 121 | // }; 122 | // // const validBorderStyles = ["solid", "dotted", "dashed"]; 123 | 124 | // // Helper function to normalize border style 125 | // const normalizeBorderStyle = (style: string): string => { 126 | // if (!style) return "solid"; // default to solid 127 | 128 | // style = style.toLowerCase().trim(); 129 | 130 | // // Direct mapping of common border styles 131 | // switch (style) { 132 | // case "none": 133 | 134 | // case "hidden": 135 | // return "solid"; // Use solid with 0 width instead 136 | 137 | // case "double": 138 | 139 | // case "groove": 140 | 141 | // case "ridge": 142 | 143 | // case "inset": 144 | 145 | // case "outset": 146 | // return "solid"; // Fall back to solid for unsupported styles 147 | 148 | // case "dotted": 149 | 150 | // case "dashed": 151 | 152 | // case "solid": 153 | // return style; // Keep supported styles as is 154 | 155 | // default: 156 | // return "solid"; // Default fallback 157 | // } 158 | // }; 159 | 160 | // // Helper function to handle flex display conversion 161 | // const handleFlexDisplay = (currentStyles: any) => { 162 | // const flexStyles: any = { flex: 1 }; 163 | 164 | // // Check if flexDirection is already defined in the original styles 165 | // if (currentStyles?.flexDirection) { 166 | // flexStyles.flexDirection = currentStyles.flexDirection; 167 | // } else { 168 | // // Default to 'column' as this is React Native's default 169 | // flexStyles.flexDirection = "row"; 170 | // } 171 | 172 | // // Handle flex-specific properties 173 | // if (currentStyles?.flexDirection) delete currentStyles.flexDirection; 174 | // if (currentStyles?.flexWrap) flexStyles.flexWrap = currentStyles.flexWrap; 175 | // if (currentStyles?.justifyContent) 176 | // flexStyles.justifyContent = currentStyles.justifyContent; 177 | // if (currentStyles?.alignItems) 178 | // flexStyles.alignItems = currentStyles.alignItems; 179 | // if (currentStyles?.alignContent) 180 | // flexStyles.alignContent = currentStyles.alignContent; 181 | // if (currentStyles?.flexGrow) flexStyles.flexGrow = currentStyles.flexGrow; 182 | // if (currentStyles?.flexShrink) 183 | // flexStyles.flexShrink = currentStyles.flexShrink; 184 | // if (currentStyles?.flexBasis) 185 | // flexStyles.flexBasis = currentStyles.flexBasis; 186 | 187 | // return flexStyles; 188 | // }; 189 | 190 | // const viewportToPixels = (value: string) => { 191 | // if (value.endsWith("vw")) { 192 | // const numericValue = parseFloat(value.replace("vw", "").trim()); 193 | 194 | // return (numericValue / 100) * windowWidth; 195 | // } else if (value.endsWith("vh")) { 196 | // const numericValue = parseFloat(value.replace("vh", "").trim()); 197 | 198 | // return (numericValue / 100) * windowHeight; 199 | // } else { 200 | // throw new Error( 201 | // "Invalid input: Please provide a value with 'vw' or 'vh'." 202 | // ); 203 | // } 204 | // }; 205 | 206 | // const removePx = (val: string) => { 207 | // // Check if val is a string, contains "px", and remove "px" if true 208 | // if (typeof val === "string" && val.endsWith("px")) { 209 | // val = val.replace("px", ""); // Remove "px" 210 | // } 211 | // return Number(val); 212 | // }; 213 | 214 | // for (let i = 0; i < keys.length; i++) { 215 | // let key = keys[i]; 216 | // let val = styleObject[key]; 217 | 218 | // for (let j = 0; j < UNITS.length; j++) { 219 | // // eslint-disable-next-line no-console 220 | // //console.log("UNIT", UNITS[j]); 221 | // if (val && typeof val === "string") { 222 | // val = val.replace(UNITS[j], "").trim(); 223 | // } 224 | // } 225 | 226 | // if (key === "width" || key === "maxWidth" || key === "minWidth") { 227 | // console.log("value in vw", val); 228 | // } 229 | // if (key === "height" || key === "maxHeight" || key === "minHeight") { 230 | // console.log("value in vw", val); 231 | // } 232 | // if ( 233 | // typeof val === "string" && 234 | // (val?.endsWith("vw") || val?.endsWith("vh")) 235 | // ) { 236 | // val = viewportToPixels(val); 237 | // } 238 | 239 | // // Handle position properties 240 | // if (key === "position") { 241 | // const positionVal = typeof val === "string" ? val.trim() : val; 242 | 243 | // if (positionVal === "fixed" || positionVal === "sticky") { 244 | // // Get position-related styles 245 | // const positionStyles = handlePosition(positionVal); 246 | 247 | // // Apply all position-related styles 248 | // Object.assign(newStyleObject, positionStyles); 249 | 250 | // // Skip to next iteration since we've handled all position properties 251 | // continue; 252 | // } else if (positionVal === "relative" || positionVal === "absolute") { 253 | // newStyleObject[key] = positionVal; 254 | // continue; 255 | // } else { 256 | // // For any other position values, default to relative 257 | // newStyleObject[key] = "relative"; 258 | // continue; 259 | // } 260 | // } 261 | 262 | // if (!isNaN(val) && !EXCEPTIONS.includes(key)) { 263 | // val = val + "px"; 264 | // } 265 | 266 | // // remove px 267 | // if (typeof val === "string" && val?.endsWith("px")) { 268 | // removePx(val); 269 | // } 270 | 271 | // // Handle border styles 272 | // if (key.includes("borderStyle")) { 273 | // val = normalizeBorderStyle(val); 274 | 275 | // // If borderStyle is 'none' or 'hidden', set borderWidth to 0 276 | // if (val === "solid" && ["none", "hidden"].includes(styleObject[key])) { 277 | // newStyleObject["borderWidth"] = 0; 278 | // } 279 | // } 280 | 281 | // // Enhanced border radius handling 282 | // if (key.includes("border")) { 283 | // if (key.includes("Radius")) { 284 | // hasBorderRadius = true; 285 | // // Convert percentage values to numbers if needed 286 | // if (typeof val === "string" && val.includes("%")) { 287 | // // For percentage values, you might want to calculate based on width/height 288 | // // For now, we'll use a reasonable default 289 | // val = parseFloat(val) * 0.01 * 100; // Convert percentage to points 290 | // } else { 291 | // val = parseFloat(val); 292 | // } 293 | // } else if (key === "border" && (val === "unset" || val === "unset ")) { 294 | // val = "0px"; 295 | // } 296 | // } 297 | 298 | // if (key === "display") { 299 | // if (val?.includes("flex")) { 300 | // // Get all flex-related styles 301 | // const flexStyles = handleFlexDisplay(styleObject); 302 | 303 | // // Apply flex styles to newStyleObject 304 | // Object.assign(newStyleObject, flexStyles); 305 | 306 | // // Skip to next iteration since we've handled all flex properties 307 | // continue; 308 | // } else { 309 | // continue; 310 | // } 311 | // } else if (key === "border" && (val === "unset" || val === "unset ")) { 312 | // key = "border"; 313 | // val = "0px"; 314 | // } else if (key === "overflowY" || key === "overflowX") { 315 | // continue; 316 | // } 317 | 318 | // // Handle flex direction explicitly if it's set 319 | // if (key === "flexDirection") { 320 | // newStyleObject[key] = val; 321 | // continue; 322 | // } 323 | 324 | // // for rem 325 | // // for fontSize 326 | // if (key === "fontSize") { 327 | // if (val.includes("rem")) { 328 | // val = remToPx(val); 329 | // } 330 | // } 331 | 332 | // // for margin and padding 333 | // if (key.includes("margin") || key.includes("padding")) { 334 | // val = val.includes("px") ? parseInt(val.replace("px", "").trim()) : val; 335 | // } 336 | 337 | // // Check for overflow property and replace 'auto' with a supported value 338 | // if (key.includes("overflow")) { 339 | // if (val === "auto") { 340 | // val = "scroll"; // Replace 'auto' with 'scroll' 341 | // } else if (["visible", "hidden", "scroll"].includes(val)) { 342 | // // - val = val; // Use the original value if it's valid 343 | // } else { 344 | // continue; // Skip to the next property 345 | // } 346 | // } 347 | 348 | // // for transform 349 | // // if (isValidTransformType(val)) { 350 | // // val = cssTransformToReactNative(val); 351 | // // console.log(`chnanging the value of the ${key} is ${val}`); 352 | // // } 353 | 354 | // newStyleObject[key] = val; 355 | // } 356 | 357 | // // If borderRadius is present, ensure overflow is handled correctly 358 | // if (hasBorderRadius) { 359 | // // Only set overflow hidden if it hasn't been explicitly set 360 | // // eslint-disable-next-line no-prototype-builtins 361 | // if (!newStyleObject.hasOwnProperty("overflow")) { 362 | // newStyleObject.overflow = "hidden"; 363 | // } 364 | 365 | // // Ensure the component clips its children 366 | // newStyleObject.clipChildren = true; // Android specific 367 | // } 368 | // return newStyleObject; 369 | // } else { 370 | // return styleObject; 371 | // } 372 | // } 373 | 374 | export function getEffectiveStyle(classNames: any[]) { 375 | /** 376 | * Step 1: Get default styles(xs) for className 377 | * Step 2: Get all styles object filter by classNames and window.width 378 | */ 379 | updateDimensions(); 380 | const styles = getMergedStyles(); 381 | const mergedDefaultStyles = styles?.mergedDefaultStyles; 382 | const mergedLargeStyles = styles?.mergedLargeStyles; 383 | const mergedMediumStyles = styles?.mergedMediumStyles; 384 | const mergedSmallStyles = styles?.mergedSmallStyles; 385 | const mergedXLargeStyles = styles?.mergedXLargeStyles; 386 | const mergedXXLargeStyles = styles?.mergedXXLargeStyles; 387 | 388 | const { config } = WrappidData; 389 | 390 | classNames = sanitizeClassNames(classNames); 391 | 392 | if (config?.environment === "development") { 393 | classNames.push(UtilityClasses.DEV_BORDER); 394 | } 395 | 396 | let styleObject = {}; 397 | 398 | classNames.forEach((className) => { 399 | /** 400 | * TODO: Framework related discussion needed 401 | * 402 | * 1. condition must have range 403 | * 2. only one condition will apply based on windowWidth 404 | * a. we can have else if statements 405 | * b. we can return if any one satisfied 406 | */ 407 | 408 | // Get default styles 409 | if (getDefaultStyle(className, mergedDefaultStyles)) { 410 | styleObject = { 411 | ...styleObject, 412 | ...getDefaultStyle(className, mergedDefaultStyles), 413 | }; 414 | // eslint-disable-next-line no-empty 415 | } else { 416 | } 417 | 418 | // Get windowWidth specific styles 419 | if (windowWidth >= SMALL_WINDOW_WIDTH) { 420 | if (getSmallStyle(className, mergedSmallStyles)) { 421 | styleObject = { 422 | ...styleObject, 423 | ...getSmallStyle(className, mergedSmallStyles), 424 | }; 425 | // eslint-disable-next-line no-empty 426 | } else { 427 | } 428 | } 429 | if (windowWidth >= MEDIUM_WINDOW_WIDTH) { 430 | if (getMediumStyle(className, mergedMediumStyles)) { 431 | styleObject = { 432 | ...styleObject, 433 | ...getMediumStyle(className, mergedMediumStyles), 434 | }; 435 | 436 | // eslint-disable-next-line no-empty 437 | } else { 438 | } 439 | } 440 | if (windowWidth >= LARGE_WINDOW_WIDTH) { 441 | if (getLargeStyle(className, mergedLargeStyles)) { 442 | styleObject = { 443 | ...styleObject, 444 | ...getLargeStyle(className, mergedLargeStyles), 445 | }; 446 | // eslint-disable-next-line no-empty 447 | } else { 448 | } 449 | } 450 | if (windowWidth >= X_LARGE_WINDOW_WIDTH) { 451 | if (getXLargeStyle(className, mergedXLargeStyles)) { 452 | styleObject = { 453 | ...styleObject, 454 | ...getXLargeStyle(className, mergedXLargeStyles), 455 | }; 456 | } else { 457 | // eslint-disable-next-line etc/no-commented-out-code 458 | // console.log(`Not found any class in XL for ${className}`); 459 | } 460 | } 461 | if (windowWidth >= XX_LARGE_WINDOW_WIDTH) { 462 | if (getXXLargeStyle(className, mergedXXLargeStyles)) { 463 | styleObject = { 464 | ...styleObject, 465 | ...getXXLargeStyle(className, mergedXXLargeStyles), 466 | }; 467 | } else { 468 | // eslint-disable-next-line etc/no-commented-out-code 469 | // console.log(`Not found any class in XXL for ${className}`); 470 | } 471 | } 472 | }); 473 | 474 | //add platform specific flovour 475 | if (config?.platform === "mobile" && JSON.stringify(styleObject) !== "{}") { 476 | // return addFlavor(styleObject); 477 | return new StyleReactNativeFlavour().addFlavour(styleObject); 478 | } 479 | 480 | // eslint-disable-next-line no-console 481 | // console.log( 482 | // "&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&\nAPP STYLES\n&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&", 483 | // finalStyleObject, 484 | // classNames 485 | // ); 486 | 487 | return styleObject; 488 | } 489 | 490 | const getDefaultStyle = (className: string | any, mergedStyles: any) => { 491 | return mergedStyles[className]; 492 | }; 493 | const getSmallStyle = (className: string | any, mergedStyles: any) => { 494 | return mergedStyles[className]; 495 | }; 496 | const getMediumStyle = (className: string | any, mergedStyles: any) => { 497 | return mergedStyles[className]; 498 | }; 499 | const getLargeStyle = (className: string | any, mergedStyles: any) => { 500 | return mergedStyles[className]; 501 | }; 502 | const getXLargeStyle = (className: string | any, mergedStyles: any) => { 503 | return mergedStyles[className]; 504 | }; 505 | const getXXLargeStyle = (className: string | any, mergedStyles: any) => { 506 | return mergedStyles[className]; 507 | }; 508 | 509 | // rem to px util 510 | // const remToPx = (remVal: any) => { 511 | // const __root_Font_Size = 16; 512 | 513 | // remVal = Number(remVal.substr(0, remVal.indexOf("rem"))); 514 | 515 | // return __root_Font_Size * remVal; 516 | // }; 517 | -------------------------------------------------------------------------------- /package/utility/LargeUtilityStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | import { 4 | DEFAULT_MARGIN, 5 | DEFAULT_PADDING, 6 | DEFAULT_SPACING, 7 | IMPORTANT, 8 | PX_TAG 9 | } from "../base/constants"; 10 | 11 | export const LARGE_MARGIN = DEFAULT_MARGIN; 12 | export const LARGE_PADDING = DEFAULT_PADDING; 13 | export const LARGE_SPACING = DEFAULT_SPACING; 14 | 15 | export default class LargeUtilityStyles extends BaseStyle { 16 | constructor() { 17 | super(); 18 | this.style = { 19 | /************************************************** 20 | * Alignment 21 | *************************************************/ 22 | lgAlignItemsStart: { 23 | // display: "flex", 24 | alignItems: "flex-start" 25 | }, 26 | lgAlignItemsEnd: { 27 | // display: "flex", 28 | alignItems: "flex-end" 29 | }, 30 | lgAlignItemsCenter: { 31 | // display: "flex", 32 | alignItems: "center" 33 | }, 34 | lgAlignItemsBaseline: { 35 | // display: "flex", 36 | alignItems: "baseline" 37 | }, 38 | lgAlignItemsStretch: { 39 | // display: "flex", 40 | alignItems: "stretch" 41 | }, 42 | 43 | lgAlignContentStart: { 44 | // display: "flex", 45 | alignContent: "flex-start" 46 | }, 47 | lgAlignContentEnd: { 48 | // display: "flex", 49 | alignContent: "flex-end" 50 | }, 51 | lgAlignContentCenter: { 52 | // display: "flex", 53 | alignContent: "center" 54 | }, 55 | lgAlignContentBetween: { 56 | // display: "flex", 57 | alignContent: "space-between" 58 | }, 59 | lgAlignContentAround: { 60 | // display: "flex", 61 | alignContent: "space-around" 62 | }, 63 | lgAlignContentStretch: { 64 | // display: "flex", 65 | alignContent: "stretch" 66 | }, 67 | 68 | lgAlignSelfAuto: { 69 | // display: "flex", 70 | alignSelf: "auto" 71 | }, 72 | lgAlignSelfStart: { 73 | // display: "flex", 74 | alignSelf: "flex-start" 75 | }, 76 | lgAlignSelfEnd: { 77 | // display: "flex", 78 | alignSelf: "flex-end" 79 | }, 80 | lgAlignSelfCenter: { 81 | // display: "flex", 82 | alignSelf: "center" 83 | }, 84 | lgAlignSelfBaseline: { 85 | // display: "flex", 86 | alignSelf: "baseline" 87 | }, 88 | lgAlignSelfStretch: { 89 | // display: "flex", 90 | alignSelf: "stretch" 91 | }, 92 | 93 | lgJustifyContentCenter: { 94 | // display: "flex", 95 | justifyContent: "center" 96 | }, 97 | lgJustifyContentFlexStart: { 98 | // display: "flex", 99 | justifyContent: "flex-start", 100 | }, 101 | lgJustifyContentFlexEnd: { 102 | // display: "flex", 103 | justifyContent: "flex-end" 104 | }, 105 | lgJustifyContentSpaceBetween: { 106 | // display: "flex", 107 | justifyContent: "space-between", 108 | }, 109 | lgJustifyContentSpaceAround: { 110 | // display: "flex", 111 | justifyContent: "space-around", 112 | }, 113 | lgJustifyContentSpaceEvenly: { 114 | // display: "flex", 115 | justifyContent: "space-evenly", 116 | }, 117 | 118 | /************************************************** 119 | * Background 120 | *************************************************/ 121 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 122 | 123 | /************************************************** 124 | * Border 125 | *************************************************/ 126 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 127 | 128 | /************************************************** 129 | * Color 130 | *************************************************/ 131 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 132 | 133 | /************************************************** 134 | * Cursor 135 | *************************************************/ 136 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 137 | 138 | /************************************************** 139 | * Display 140 | *************************************************/ 141 | lgDisplayInline: { display: "inline" + IMPORTANT }, 142 | lgDisplayInlineBlock: { display: "inline-block" + IMPORTANT }, 143 | lgDisplayBlock: { display: "block" + IMPORTANT }, 144 | lgDisplayGrid: { display: "grid" + IMPORTANT }, 145 | lgDisplayTable: { display: "table" + IMPORTANT }, 146 | lgDisplayTableRow: { display: "table-row" + IMPORTANT }, 147 | lgDisplayTableCell: { display: "table-cell" + IMPORTANT }, 148 | lgDisplayFlex: { display: "flex" + IMPORTANT }, 149 | lgDisplayInlineFlex: { display: "inline-flex" + IMPORTANT }, 150 | lgDisplayNone: { display: "none" + IMPORTANT }, 151 | 152 | /************************************************** 153 | * Flex 154 | *************************************************/ 155 | lgFlexDirectionRow: { flexDirection: "row" }, 156 | lgFlexDirectionColumn: { flexDirection: "column" }, 157 | lgFlexDirectionRowReverse: { flexDirection: "row-reverse" }, 158 | lgFlexDirectionColumnReverse: { flexDirection: "column-reverse" }, 159 | lgFlexFill: { flex: "1 1 auto" }, 160 | lgFlexGrow0: { flexGrow: "0" }, 161 | lgFlexGrow1: { flexGrow: "1" }, 162 | lgFlexShrink0: { flexShrink: "0" }, 163 | lgFlexShrink1: { flexShrink: "1" }, 164 | lgFlexWrapWrap: { flexWrap: "wrap" }, 165 | lgFlexWrapNoWrap: { flexWrap: "nowrap" }, 166 | lgFlexWrapWrapReverse: { flexWrap: "wrap-reverse" }, 167 | 168 | /************************************************** 169 | * Float 170 | *************************************************/ 171 | lgFloatStart: { float: "left" }, 172 | lgFloatEnd: { float: "right" }, 173 | lgFloatNone: { float: "none" }, 174 | 175 | /************************************************** 176 | * Interactions 177 | *************************************************/ 178 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 179 | 180 | /************************************************** 181 | * Object Fit 182 | *************************************************/ 183 | lgObjectFitContain: { 184 | // -o-object-fit: contain !important; 185 | objectFit: "contain", 186 | }, 187 | 188 | lgObjectFitCover: { 189 | // -o-object-fit: cover !important; 190 | objectFit: "cover", 191 | }, 192 | 193 | lgObjectFitFill: { 194 | // -o-object-fit: fill !important; 195 | objectFit: "fill", 196 | }, 197 | 198 | lgObjectFitScale: { 199 | // -o-object-fit: scale-down !important; 200 | objectFit: "scale-down", 201 | }, 202 | 203 | lgObjectFitNone: { 204 | // -o-object-fit: none !important; 205 | objectFit: "none", 206 | }, 207 | 208 | /************************************************** 209 | * Opacity 210 | *************************************************/ 211 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 212 | 213 | /************************************************** 214 | * Overflow 215 | *************************************************/ 216 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 217 | 218 | /************************************************** 219 | * Position 220 | *************************************************/ 221 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 222 | 223 | /************************************************** 224 | * Shadows 225 | *************************************************/ 226 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 227 | 228 | /************************************************** 229 | * Sizing 230 | *************************************************/ 231 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 232 | 233 | /************************************************** 234 | * Spacing 235 | *************************************************/ 236 | /*------------------------------------------------- 237 | * Padding 238 | *-----------------------------------------------*/ 239 | lgP0: { padding: 0 + IMPORTANT }, 240 | lgP1: { padding: LARGE_PADDING + PX_TAG + IMPORTANT }, 241 | lgP2: { padding: LARGE_PADDING * 2 + PX_TAG + IMPORTANT }, 242 | lgP3: { padding: LARGE_PADDING * 3 + PX_TAG + IMPORTANT }, 243 | lgP4: { padding: LARGE_PADDING * 4 + PX_TAG + IMPORTANT }, 244 | lgP5: { padding: LARGE_PADDING * 5 + PX_TAG + IMPORTANT }, 245 | 246 | lgPt0: { paddingTop: 0 }, 247 | lgPt1: { paddingTop: LARGE_PADDING + PX_TAG + IMPORTANT }, 248 | lgPt2: { paddingTop: LARGE_PADDING * 2 + PX_TAG + IMPORTANT }, 249 | lgPt3: { paddingTop: LARGE_PADDING * 3 + PX_TAG + IMPORTANT }, 250 | lgPt4: { paddingTop: LARGE_PADDING * 4 + PX_TAG + IMPORTANT }, 251 | lgPt5: { paddingTop: LARGE_PADDING * 5 + PX_TAG + IMPORTANT }, 252 | 253 | lgPr0: { paddingRight: 0 }, 254 | lgPr1: { paddingRight: LARGE_PADDING + PX_TAG + IMPORTANT }, 255 | lgPr2: { paddingRight: LARGE_PADDING * 2 + PX_TAG + IMPORTANT }, 256 | lgPr3: { paddingRight: LARGE_PADDING * 3 + PX_TAG + IMPORTANT }, 257 | lgPr4: { paddingRight: LARGE_PADDING * 4 + PX_TAG + IMPORTANT }, 258 | lgPr5: { paddingRight: LARGE_PADDING * 5 + PX_TAG + IMPORTANT }, 259 | 260 | lgPb0: { paddingBottom: 0 }, 261 | lgPb1: { paddingBottom: LARGE_PADDING + PX_TAG + IMPORTANT }, 262 | lgPb2: { paddingBottom: LARGE_PADDING * 2 + PX_TAG + IMPORTANT }, 263 | lgPb3: { paddingBottom: LARGE_PADDING * 3 + PX_TAG + IMPORTANT }, 264 | lgPb4: { paddingBottom: LARGE_PADDING * 4 + PX_TAG + IMPORTANT }, 265 | lgPb5: { paddingBottom: LARGE_PADDING * 5 + PX_TAG + IMPORTANT }, 266 | 267 | lgPl0: { paddingLeft: 0 }, 268 | lgPl1: { paddingLeft: LARGE_PADDING + PX_TAG + IMPORTANT }, 269 | lgPl2: { paddingLeft: LARGE_PADDING * 2 + PX_TAG + IMPORTANT }, 270 | lgPl3: { paddingLeft: LARGE_PADDING * 3 + PX_TAG + IMPORTANT }, 271 | lgPl4: { paddingLeft: LARGE_PADDING * 4 + PX_TAG + IMPORTANT }, 272 | lgPl5: { paddingLeft: LARGE_PADDING * 5 + PX_TAG + IMPORTANT }, 273 | 274 | lgPx0: { paddingLeft: 0 + IMPORTANT, paddingRight: 0 + IMPORTANT }, 275 | lgPx1: { 276 | paddingLeft: LARGE_PADDING * 1 + PX_TAG + IMPORTANT, 277 | paddingRight: LARGE_PADDING * 1 + PX_TAG + IMPORTANT, 278 | }, 279 | lgPx2: { 280 | paddingLeft: LARGE_PADDING * 2 + PX_TAG + IMPORTANT, 281 | paddingRight: LARGE_PADDING * 2 + PX_TAG + IMPORTANT, 282 | }, 283 | lgPx3: { 284 | paddingLeft: LARGE_PADDING * 3 + PX_TAG + IMPORTANT, 285 | paddingRight: LARGE_PADDING * 3 + PX_TAG + IMPORTANT, 286 | }, 287 | lgPx4: { 288 | paddingLeft: LARGE_PADDING * 4 + PX_TAG + IMPORTANT, 289 | paddingRight: LARGE_PADDING * 4 + PX_TAG + IMPORTANT, 290 | }, 291 | lgPx5: { 292 | paddingLeft: LARGE_PADDING * 5 + PX_TAG + IMPORTANT, 293 | paddingRight: LARGE_PADDING * 5 + PX_TAG + IMPORTANT, 294 | }, 295 | 296 | lgPy0: { paddingTop: 0 + IMPORTANT, paddingBottom: 0 + IMPORTANT }, 297 | lgPy1: { 298 | paddingTop: LARGE_PADDING * 1 + PX_TAG + IMPORTANT, 299 | paddingBottom: LARGE_PADDING * 1 + PX_TAG + IMPORTANT, 300 | }, 301 | lgPy2: { 302 | paddingTop: LARGE_PADDING * 2 + PX_TAG + IMPORTANT, 303 | paddingBottom: LARGE_PADDING * 2 + PX_TAG + IMPORTANT, 304 | }, 305 | lgPy3: { 306 | paddingTop: LARGE_PADDING * 3 + PX_TAG + IMPORTANT, 307 | paddingBottom: LARGE_PADDING * 3 + PX_TAG + IMPORTANT, 308 | }, 309 | lgPy4: { 310 | paddingTop: LARGE_PADDING * 4 + PX_TAG + IMPORTANT, 311 | paddingBottom: LARGE_PADDING * 4 + PX_TAG + IMPORTANT, 312 | }, 313 | lgPy5: { 314 | paddingTop: LARGE_PADDING * 5 + PX_TAG + IMPORTANT, 315 | paddingBottom: LARGE_PADDING * 5 + PX_TAG + IMPORTANT, 316 | }, 317 | 318 | /*------------------------------------------------- 319 | * Margin 320 | *-----------------------------------------------*/ 321 | lgM0: { margin: 0 + IMPORTANT }, 322 | lgM1: { margin: LARGE_MARGIN + PX_TAG + IMPORTANT }, 323 | lgM2: { margin: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT }, 324 | lgM3: { margin: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT }, 325 | lgM4: { margin: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT }, 326 | lgM5: { margin: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT }, 327 | lgMAuto: { margin: "auto" + IMPORTANT }, 328 | 329 | lgMt0: { marginTop: 0 + IMPORTANT }, 330 | lgMt1: { marginTop: LARGE_MARGIN + PX_TAG + IMPORTANT }, 331 | lgMt2: { marginTop: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT }, 332 | lgMt3: { marginTop: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT }, 333 | lgMt4: { marginTop: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT }, 334 | lgMt5: { marginTop: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT }, 335 | lgMtAuto: { marginTop: "auto" + IMPORTANT }, 336 | 337 | lgMr0: { marginRight: 0 + IMPORTANT }, 338 | lgMr1: { marginRight: LARGE_MARGIN + PX_TAG + IMPORTANT }, 339 | lgMr2: { marginRight: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT }, 340 | lgMr3: { marginRight: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT }, 341 | lgMr4: { marginRight: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT }, 342 | lgMr5: { marginRight: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT }, 343 | lgMrAuto: { marginRight: "auto" + IMPORTANT }, 344 | 345 | lgMb0: { marginBottom: 0 + IMPORTANT }, 346 | lgMb1: { marginBottom: LARGE_MARGIN + PX_TAG + IMPORTANT }, 347 | lgMb2: { marginBottom: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT }, 348 | lgMb3: { marginBottom: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT }, 349 | lgMb4: { marginBottom: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT }, 350 | lgMb5: { marginBottom: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT }, 351 | lgMbAuto: { marginBottom: "auto" + IMPORTANT }, 352 | 353 | lgMl0: { marginLeft: 0 + IMPORTANT }, 354 | lgMl1: { marginLeft: LARGE_MARGIN + PX_TAG + IMPORTANT }, 355 | lgMl2: { marginLeft: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT }, 356 | lgMl3: { marginLeft: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT }, 357 | lgMl4: { marginLeft: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT }, 358 | lgMl5: { marginLeft: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT }, 359 | lgMlAuto: { marginLeft: "auto" + IMPORTANT }, 360 | 361 | lgMx0: { marginLeft: 0, marginRight: 0 + IMPORTANT }, 362 | lgMx1: { 363 | marginLeft: LARGE_MARGIN * 1 + PX_TAG + IMPORTANT, 364 | marginRight: LARGE_MARGIN * 1 + PX_TAG + IMPORTANT, 365 | }, 366 | lgMx2: { 367 | marginLeft: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT, 368 | marginRight: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT, 369 | }, 370 | lgMx3: { 371 | marginLeft: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT, 372 | marginRight: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT, 373 | }, 374 | lgMx4: { 375 | marginLeft: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT, 376 | marginRight: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT, 377 | }, 378 | lgMx5: { 379 | marginLeft: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT, 380 | marginRight: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT, 381 | }, 382 | lgMxAuto: { 383 | marginLeft: "auto" + IMPORTANT, 384 | marginRight: "auto" + IMPORTANT, 385 | }, 386 | 387 | lgMy0: { marginTop: 0, marginBottom: 0 + IMPORTANT }, 388 | lgMy1: { 389 | marginTop: LARGE_MARGIN * 1 + PX_TAG + IMPORTANT, 390 | marginBottom: LARGE_MARGIN * 1 + PX_TAG + IMPORTANT, 391 | }, 392 | lgMy2: { 393 | marginTop: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT, 394 | marginBottom: LARGE_MARGIN * 2 + PX_TAG + IMPORTANT, 395 | }, 396 | lgMy3: { 397 | marginTop: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT, 398 | marginBottom: LARGE_MARGIN * 3 + PX_TAG + IMPORTANT, 399 | }, 400 | lgMy4: { 401 | marginTop: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT, 402 | marginBottom: LARGE_MARGIN * 4 + PX_TAG + IMPORTANT, 403 | }, 404 | lgMy5: { 405 | marginTop: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT, 406 | marginBottom: LARGE_MARGIN * 5 + PX_TAG + IMPORTANT, 407 | }, 408 | lgMyAuto: { 409 | marginTop: "auto" + IMPORTANT, 410 | marginBottom: "auto" + IMPORTANT, 411 | }, 412 | 413 | lgMN1: { margin: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT }, 414 | lgMN2: { margin: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT }, 415 | lgMN3: { margin: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT }, 416 | lgMN4: { margin: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT }, 417 | lgMN5: { margin: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT }, 418 | 419 | lgMtN1: { marginTop: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT }, 420 | lgMtN2: { marginTop: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT }, 421 | lgMtN3: { marginTop: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT }, 422 | lgMtN4: { marginTop: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT }, 423 | lgMtN5: { marginTop: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT }, 424 | 425 | lgMrN1: { marginRight: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT }, 426 | lgMrN2: { marginRight: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT }, 427 | lgMrN3: { marginRight: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT }, 428 | lgMrN4: { marginRight: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT }, 429 | lgMrN5: { marginRight: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT }, 430 | 431 | lgMbN1: { marginBottom: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT }, 432 | lgMbN2: { marginBottom: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT }, 433 | lgMbN3: { marginBottom: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT }, 434 | lgMbN4: { marginBottom: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT }, 435 | lgMbN5: { marginBottom: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT }, 436 | 437 | lgMlN1: { marginLeft: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT }, 438 | lgMlN2: { marginLeft: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT }, 439 | lgMlN3: { marginLeft: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT }, 440 | lgMlN4: { marginLeft: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT }, 441 | lgMlN5: { marginLeft: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT }, 442 | 443 | lgMxN1: { 444 | marginLeft: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT, 445 | marginRight: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT, 446 | }, 447 | lgMxN2: { 448 | marginLeft: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT, 449 | marginRight: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT, 450 | }, 451 | lgMxN3: { 452 | marginLeft: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT, 453 | marginRight: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT, 454 | }, 455 | lgMxN4: { 456 | marginLeft: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT, 457 | marginRight: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT, 458 | }, 459 | lgMxN5: { 460 | marginLeft: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT, 461 | marginRight: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT, 462 | }, 463 | 464 | lgMyN1: { 465 | marginTop: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT, 466 | marginBottom: LARGE_MARGIN * -1 + PX_TAG + IMPORTANT, 467 | }, 468 | lgMyN2: { 469 | marginTop: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT, 470 | marginBottom: LARGE_MARGIN * -2 + PX_TAG + IMPORTANT, 471 | }, 472 | lgMyN3: { 473 | marginTop: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT, 474 | marginBottom: LARGE_MARGIN * -3 + PX_TAG + IMPORTANT, 475 | }, 476 | lgMyN4: { 477 | marginTop: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT, 478 | marginBottom: LARGE_MARGIN * -4 + PX_TAG + IMPORTANT, 479 | }, 480 | lgMyN5: { 481 | marginTop: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT, 482 | marginBottom: LARGE_MARGIN * -5 + PX_TAG + IMPORTANT, 483 | }, 484 | 485 | /*------------------------------------------------- 486 | * Gap 487 | *-----------------------------------------------*/ 488 | lgGap0: { gap: "0" }, 489 | lgGap1: { gap: LARGE_SPACING * 1 }, 490 | lgGap2: { gap: LARGE_SPACING * 2 }, 491 | lgGap3: { gap: LARGE_SPACING * 3 }, 492 | lgGap4: { gap: LARGE_SPACING * 4 }, 493 | lgGap5: { gap: LARGE_SPACING * 5 }, 494 | 495 | lgRowGap0: { rowGap: "0" }, 496 | lgRowGap1: { rowGap: LARGE_SPACING * 1 }, 497 | lgRowGap2: { rowGap: LARGE_SPACING * 2 }, 498 | lgRowGap3: { rowGap: LARGE_SPACING * 3 }, 499 | lgRowGap4: { rowGap: LARGE_SPACING * 4 }, 500 | lgRowGap5: { rowGap: LARGE_SPACING * 5 }, 501 | 502 | lgColGap0: { columnGap: "0" }, 503 | lgColGap1: { columnGap: LARGE_SPACING * 1 }, 504 | lgColGap2: { columnGap: LARGE_SPACING * 2 }, 505 | lgColGap3: { columnGap: LARGE_SPACING * 3 }, 506 | lgColGap4: { columnGap: LARGE_SPACING * 4 }, 507 | lgColGap5: { columnGap: LARGE_SPACING * 5 }, 508 | 509 | /************************************************** 510 | * Text 511 | *************************************************/ 512 | lgTextStart: { textAlign: "left" + IMPORTANT }, 513 | lgTextEnd: { textAlign: "right" + IMPORTANT }, 514 | lgTextCenter: { textAlign: "center" + IMPORTANT }, 515 | lgTextJustify: { textAlign: "justify" + IMPORTANT }, 516 | 517 | //NO OTHER SCREEN SIZE SPECIFIC STYLE NEEDED 518 | 519 | /************************************************** 520 | * Vertical Align 521 | *************************************************/ 522 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 523 | 524 | /************************************************** 525 | * Visibility 526 | *************************************************/ 527 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 528 | 529 | /************************************************** 530 | * zindex 531 | *************************************************/ 532 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 533 | }; 534 | } 535 | } 536 | -------------------------------------------------------------------------------- /package/utility/SmallUtilityStyles.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { BaseStyle } from "../base/BaseStyle"; 3 | import { 4 | DEFAULT_MARGIN, 5 | DEFAULT_PADDING, 6 | DEFAULT_SPACING, 7 | IMPORTANT, 8 | PX_TAG 9 | } from "../base/constants"; 10 | 11 | export const SMALL_MARGIN = DEFAULT_MARGIN; 12 | export const SMALL_PADDING = DEFAULT_PADDING; 13 | export const SMALL_SPACING = DEFAULT_SPACING; 14 | 15 | export default class SmallUtilityStyles extends BaseStyle { 16 | constructor() { 17 | super(); 18 | 19 | this.style = { 20 | /************************************************** 21 | * Alignment 22 | *************************************************/ 23 | smAlignItemsStart: { 24 | // display: "flex", 25 | alignItems: "flex-start" 26 | }, 27 | smAlignItemsEnd: { 28 | // display: "flex", 29 | alignItems: "flex-end" 30 | }, 31 | smAlignItemsCenter: { 32 | // display: "flex", 33 | alignItems: "center" 34 | }, 35 | smAlignItemsBaseline: { 36 | // display: "flex", 37 | alignItems: "baseline" 38 | }, 39 | smAlignItemsStretch: { 40 | // display: "flex", 41 | alignItems: "stretch" 42 | }, 43 | 44 | smAlignContentStart: { 45 | // display: "flex", 46 | alignContent: "flex-start" 47 | }, 48 | smAlignContentEnd: { 49 | // display: "flex", 50 | alignContent: "flex-end" 51 | }, 52 | smAlignContentCenter: { 53 | // display: "flex", 54 | alignContent: "center" 55 | }, 56 | smAlignContentBetween: { 57 | // display: "flex", 58 | alignContent: "space-between" 59 | }, 60 | smAlignContentAround: { 61 | // display: "flex", 62 | alignContent: "space-around" 63 | }, 64 | smAlignContentStretch: { 65 | // display: "flex", 66 | alignContent: "stretch" 67 | }, 68 | 69 | smAlignSelfAuto: { 70 | // display: "flex", 71 | alignSelf: "auto" 72 | }, 73 | smAlignSelfStart: { 74 | // display: "flex", 75 | alignSelf: "flex-start" 76 | }, 77 | smAlignSelfEnd: { 78 | // display: "flex", 79 | alignSelf: "flex-end" 80 | }, 81 | smAlignSelfCenter: { 82 | // display: "flex", 83 | alignSelf: "center" 84 | }, 85 | smAlignSelfBaseline: { 86 | // display: "flex", 87 | alignSelf: "baseline" 88 | }, 89 | smAlignSelfStretch: { 90 | // display: "flex", 91 | alignSelf: "stretch" 92 | }, 93 | 94 | smJustifyContentCenter: { 95 | // display: "flex", 96 | justifyContent: "center" 97 | }, 98 | smJustifyContentFlexStart: { 99 | // display: "flex", 100 | justifyContent: "flex-start" 101 | }, 102 | smJustifyContentFlexEnd: { 103 | // display: "flex", 104 | justifyContent: "flex-end" 105 | }, 106 | smJustifyContentSpaceBetween: { 107 | // display: "flex", 108 | justifyContent: "space-between" 109 | }, 110 | smJustifyContentSpaceAround: { 111 | // display: "flex", 112 | justifyContent: "space-around" 113 | }, 114 | smJustifyContentSpaceEvenly: { 115 | // display: "flex", 116 | justifyContent: "space-evenly" 117 | }, 118 | 119 | /************************************************** 120 | * Background 121 | *************************************************/ 122 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 123 | 124 | /************************************************** 125 | * Border 126 | *************************************************/ 127 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 128 | 129 | /************************************************** 130 | * Color 131 | *************************************************/ 132 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 133 | 134 | /************************************************** 135 | * Cursor 136 | *************************************************/ 137 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 138 | 139 | /************************************************** 140 | * Display 141 | *************************************************/ 142 | smDisplayInline: { display: "inline" + IMPORTANT}, 143 | smDisplayInlineBlock: { display: "inline-block" + IMPORTANT}, 144 | smDisplayBlock: { display: "block" + IMPORTANT }, 145 | smDisplayGrid: { display: "grid" + IMPORTANT}, 146 | smDisplayTable: { display: "table" + IMPORTANT}, 147 | smDisplayTableRow: { display: "table-row" + IMPORTANT}, 148 | smDisplayTableCell: { display: "table-cell" + IMPORTANT}, 149 | smDisplayFlex: { display: "flex" + IMPORTANT}, 150 | smDisplayInlineFlex: { display: "inline-flex" + IMPORTANT}, 151 | smDisplayNone: { display: "none" + IMPORTANT }, 152 | 153 | /************************************************** 154 | * Flex 155 | *************************************************/ 156 | smFlexDirectionRow: { flexDirection: "row" }, 157 | smFlexDirectionColumn: { flexDirection: "column" }, 158 | smFlexDirectionRowReverse: { flexDirection: "row-reverse" }, 159 | smFlexDirectionColumnReverse: { flexDirection: "column-reverse" }, 160 | smFlexFill: { flex: "1 1 auto" }, 161 | smFlexGrow0: { flexGrow: "0" }, 162 | smFlexGrow1: { flexGrow: "1" }, 163 | smFlexShrink0: { flexShrink: "0" }, 164 | smFlexShrink1: { flexShrink: "1" }, 165 | smFlexWrapWrap: { flexWrap: "wrap" }, 166 | smFlexWrapNoWrap: { flexWrap: "nowrap" }, 167 | smFlexWrapWrapReverse: { flexWrap: "wrap-reverse" }, 168 | 169 | /************************************************** 170 | * Float 171 | *************************************************/ 172 | smFloatStart: { float: "left" }, 173 | smFloatEnd: { float: "right" }, 174 | smFloatNone: { float: "none" }, 175 | 176 | /************************************************** 177 | * Interactions 178 | *************************************************/ 179 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 180 | 181 | /************************************************** 182 | * Object Fit 183 | *************************************************/ 184 | smObjectFitContain: { 185 | // -o-object-fit: contain !important; 186 | objectFit: "contain" 187 | }, 188 | 189 | smObjectFitCover: { 190 | // -o-object-fit: cover !important; 191 | objectFit: "cover" 192 | }, 193 | 194 | smObjectFitFill: { 195 | // -o-object-fit: fill !important; 196 | objectFit: "fill" 197 | }, 198 | 199 | smObjectFitScale: { 200 | // -o-object-fit: scale-down !important; 201 | objectFit: "scale-down" 202 | }, 203 | 204 | smObjectFitNone: { 205 | // -o-object-fit: none !important; 206 | objectFit: "none" 207 | }, 208 | 209 | /************************************************** 210 | * Opacity 211 | *************************************************/ 212 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 213 | 214 | /************************************************** 215 | * Overflow 216 | *************************************************/ 217 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 218 | 219 | /************************************************** 220 | * Position 221 | *************************************************/ 222 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 223 | 224 | /************************************************** 225 | * Shadows 226 | *************************************************/ 227 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 228 | 229 | /************************************************** 230 | * Sizing 231 | *************************************************/ 232 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 233 | 234 | /************************************************** 235 | * Spacing 236 | *************************************************/ 237 | /*------------------------------------------------- 238 | * Padding 239 | *-----------------------------------------------*/ 240 | smP0: { padding: 0 + IMPORTANT }, 241 | smP1: { padding: SMALL_PADDING + PX_TAG + IMPORTANT }, 242 | smP2: { padding: SMALL_PADDING * 2 + PX_TAG + IMPORTANT }, 243 | smP3: { padding: SMALL_PADDING * 3 + PX_TAG + IMPORTANT }, 244 | smP4: { padding: SMALL_PADDING * 4 + PX_TAG + IMPORTANT }, 245 | smP5: { padding: SMALL_PADDING * 5 + PX_TAG + IMPORTANT }, 246 | 247 | smPt0: { paddingTop: 0 }, 248 | smPt1: { paddingTop: SMALL_PADDING + PX_TAG + IMPORTANT }, 249 | smPt2: { paddingTop: SMALL_PADDING * 2 + PX_TAG + IMPORTANT }, 250 | smPt3: { paddingTop: SMALL_PADDING * 3 + PX_TAG + IMPORTANT }, 251 | smPt4: { paddingTop: SMALL_PADDING * 4 + PX_TAG + IMPORTANT }, 252 | smPt5: { paddingTop: SMALL_PADDING * 5 + PX_TAG + IMPORTANT }, 253 | 254 | smPr0: { paddingRight: 0 + IMPORTANT }, 255 | smPr1: { paddingRight: SMALL_PADDING + PX_TAG + IMPORTANT }, 256 | smPr2: { paddingRight: SMALL_PADDING * 2 + PX_TAG + IMPORTANT }, 257 | smPr3: { paddingRight: SMALL_PADDING * 3 + PX_TAG + IMPORTANT }, 258 | smPr4: { paddingRight: SMALL_PADDING * 4 + PX_TAG + IMPORTANT }, 259 | smPr5: { paddingRight: SMALL_PADDING * 5 + PX_TAG + IMPORTANT }, 260 | 261 | smPb0: { paddingBottom: 0 + IMPORTANT }, 262 | smPb1: { paddingBottom: SMALL_PADDING + PX_TAG + IMPORTANT }, 263 | smPb2: { paddingBottom: SMALL_PADDING * 2 + PX_TAG + IMPORTANT }, 264 | smPb3: { paddingBottom: SMALL_PADDING * 3 + PX_TAG + IMPORTANT }, 265 | smPb4: { paddingBottom: SMALL_PADDING * 4 + PX_TAG + IMPORTANT }, 266 | smPb5: { paddingBottom: SMALL_PADDING * 5 + PX_TAG + IMPORTANT }, 267 | 268 | smPl0: { paddingLeft: 0 + IMPORTANT }, 269 | smPl1: { paddingLeft: SMALL_PADDING + PX_TAG + IMPORTANT }, 270 | smPl2: { paddingLeft: SMALL_PADDING * 2 + PX_TAG + IMPORTANT }, 271 | smPl3: { paddingLeft: SMALL_PADDING * 3 + PX_TAG + IMPORTANT }, 272 | smPl4: { paddingLeft: SMALL_PADDING * 4 + PX_TAG + IMPORTANT }, 273 | smPl5: { paddingLeft: SMALL_PADDING * 5 + PX_TAG + IMPORTANT }, 274 | 275 | smPx0: { paddingLeft: 0 + IMPORTANT, paddingRight: 0 + IMPORTANT }, 276 | smPx1: { 277 | paddingLeft: SMALL_PADDING * 1 + PX_TAG + IMPORTANT, 278 | paddingRight: SMALL_PADDING * 1 + PX_TAG + IMPORTANT 279 | }, 280 | smPx2: { 281 | paddingLeft: SMALL_PADDING * 2 + PX_TAG + IMPORTANT, 282 | paddingRight: SMALL_PADDING * 2 + PX_TAG + IMPORTANT 283 | }, 284 | smPx3: { 285 | paddingLeft: SMALL_PADDING * 3 + PX_TAG + IMPORTANT, 286 | paddingRight: SMALL_PADDING * 3 + PX_TAG + IMPORTANT 287 | }, 288 | smPx4: { 289 | paddingLeft: SMALL_PADDING * 4 + PX_TAG + IMPORTANT, 290 | paddingRight: SMALL_PADDING * 4 + PX_TAG + IMPORTANT 291 | }, 292 | smPx5: { 293 | paddingLeft: SMALL_PADDING * 5 + PX_TAG + IMPORTANT, 294 | paddingRight: SMALL_PADDING * 5 + PX_TAG + IMPORTANT 295 | }, 296 | 297 | smPy0: { paddingTop: 0 + IMPORTANT, paddingBottom: 0 + IMPORTANT }, 298 | smPy1: { 299 | paddingTop: SMALL_PADDING * 1 + PX_TAG + IMPORTANT, 300 | paddingBottom: SMALL_PADDING * 1 + PX_TAG + IMPORTANT 301 | }, 302 | smPy2: { 303 | paddingTop: SMALL_PADDING * 2 + PX_TAG + IMPORTANT, 304 | paddingBottom: SMALL_PADDING * 2 + PX_TAG + IMPORTANT 305 | }, 306 | smPy3: { 307 | paddingTop: SMALL_PADDING * 3 + PX_TAG + IMPORTANT, 308 | paddingBottom: SMALL_PADDING * 3 + PX_TAG + IMPORTANT 309 | }, 310 | smPy4: { 311 | paddingTop: SMALL_PADDING * 4 + PX_TAG + IMPORTANT, 312 | paddingBottom: SMALL_PADDING * 4 + PX_TAG + IMPORTANT 313 | }, 314 | smPy5: { 315 | paddingTop: SMALL_PADDING * 5 + PX_TAG + IMPORTANT, 316 | paddingBottom: SMALL_PADDING * 5 + PX_TAG + IMPORTANT 317 | }, 318 | 319 | /*------------------------------------------------- 320 | * Margin 321 | *-----------------------------------------------*/ 322 | smM0: { margin: 0 + IMPORTANT }, 323 | smM1: { margin: SMALL_MARGIN + PX_TAG + IMPORTANT }, 324 | smM2: { margin: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT }, 325 | smM3: { margin: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT }, 326 | smM4: { margin: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT }, 327 | smM5: { margin: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT }, 328 | smMAuto: { margin: "auto" + IMPORTANT }, 329 | 330 | smMt0: { marginTop: 0 + IMPORTANT }, 331 | smMt1: { marginTop: SMALL_MARGIN + PX_TAG + IMPORTANT }, 332 | smMt2: { marginTop: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT }, 333 | smMt3: { marginTop: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT }, 334 | smMt4: { marginTop: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT }, 335 | smMt5: { marginTop: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT }, 336 | smMtAuto: { marginTop: "auto" + IMPORTANT }, 337 | 338 | smMr0: { marginRight: 0 + IMPORTANT }, 339 | smMr1: { marginRight: SMALL_MARGIN + PX_TAG + IMPORTANT }, 340 | smMr2: { marginRight: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT }, 341 | smMr3: { marginRight: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT }, 342 | smMr4: { marginRight: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT }, 343 | smMr5: { marginRight: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT }, 344 | smMrAuto: { marginRight: "auto" + IMPORTANT }, 345 | 346 | smMb0: { marginBottom: 0 + IMPORTANT }, 347 | smMb1: { marginBottom: SMALL_MARGIN + PX_TAG + IMPORTANT }, 348 | smMb2: { marginBottom: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT }, 349 | smMb3: { marginBottom: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT }, 350 | smMb4: { marginBottom: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT }, 351 | smMb5: { marginBottom: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT }, 352 | smMbAuto: { marginBottom: "auto" + IMPORTANT }, 353 | 354 | smMl0: { marginLeft: 0 + IMPORTANT }, 355 | smMl1: { marginLeft: SMALL_MARGIN + PX_TAG + IMPORTANT }, 356 | smMl2: { marginLeft: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT }, 357 | smMl3: { marginLeft: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT }, 358 | smMl4: { marginLeft: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT }, 359 | smMl5: { marginLeft: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT }, 360 | smMlAuto: { marginLeft: "auto" + IMPORTANT }, 361 | 362 | smMx0: { marginLeft: 0 + IMPORTANT, marginRight: 0 + IMPORTANT }, 363 | smMx1: { 364 | marginLeft: SMALL_MARGIN * 1 + PX_TAG + IMPORTANT, 365 | marginRight: SMALL_MARGIN * 1 + PX_TAG + IMPORTANT 366 | }, 367 | smMx2: { 368 | marginLeft: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT, 369 | marginRight: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT 370 | }, 371 | smMx3: { 372 | marginLeft: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT, 373 | marginRight: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT 374 | }, 375 | smMx4: { 376 | marginLeft: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT, 377 | marginRight: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT 378 | }, 379 | smMx5: { 380 | marginLeft: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT, 381 | marginRight: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT 382 | }, 383 | smMxAuto: { 384 | marginLeft: "auto" + IMPORTANT, 385 | marginRight: "auto" + IMPORTANT 386 | }, 387 | 388 | smMy0: { marginTop: 0 + IMPORTANT, marginBottom: 0 + IMPORTANT }, 389 | smMy1: { 390 | marginTop: SMALL_MARGIN * 1 + PX_TAG + IMPORTANT, 391 | marginBottom: SMALL_MARGIN * 1 + PX_TAG + IMPORTANT 392 | }, 393 | smMy2: { 394 | marginTop: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT, 395 | marginBottom: SMALL_MARGIN * 2 + PX_TAG + IMPORTANT 396 | }, 397 | smMy3: { 398 | marginTop: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT, 399 | marginBottom: SMALL_MARGIN * 3 + PX_TAG + IMPORTANT 400 | }, 401 | smMy4: { 402 | marginTop: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT, 403 | marginBottom: SMALL_MARGIN * 4 + PX_TAG + IMPORTANT 404 | }, 405 | smMy5: { 406 | marginTop: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT, 407 | marginBottom: SMALL_MARGIN * 5 + PX_TAG + IMPORTANT 408 | }, 409 | smMyAuto: { 410 | marginTop: "auto" + IMPORTANT, 411 | marginBottom: "auto" + IMPORTANT 412 | }, 413 | 414 | smMN1: { margin: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT }, 415 | smMN2: { margin: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT }, 416 | smMN3: { margin: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT }, 417 | smMN4: { margin: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT }, 418 | smMN5: { margin: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT }, 419 | 420 | smMtN1: { marginTop: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT }, 421 | smMtN2: { marginTop: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT }, 422 | smMtN3: { marginTop: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT }, 423 | smMtN4: { marginTop: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT }, 424 | smMtN5: { marginTop: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT }, 425 | 426 | smMrN1: { marginRight: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT }, 427 | smMrN2: { marginRight: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT }, 428 | smMrN3: { marginRight: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT }, 429 | smMrN4: { marginRight: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT }, 430 | smMrN5: { marginRight: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT }, 431 | 432 | smMbN1: { marginBottom: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT }, 433 | smMbN2: { marginBottom: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT }, 434 | smMbN3: { marginBottom: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT }, 435 | smMbN4: { marginBottom: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT }, 436 | smMbN5: { marginBottom: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT }, 437 | 438 | smMlN1: { marginLeft: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT }, 439 | smMlN2: { marginLeft: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT }, 440 | smMlN3: { marginLeft: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT }, 441 | smMlN4: { marginLeft: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT }, 442 | smMlN5: { marginLeft: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT }, 443 | 444 | smMxN1: { 445 | marginLeft: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT, 446 | marginRight: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT 447 | }, 448 | smMxN2: { 449 | marginLeft: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT, 450 | marginRight: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT 451 | }, 452 | smMxN3: { 453 | marginLeft: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT, 454 | marginRight: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT 455 | }, 456 | smMxN4: { 457 | marginLeft: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT, 458 | marginRight: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT 459 | }, 460 | smMxN5: { 461 | marginLeft: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT, 462 | marginRight: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT 463 | }, 464 | 465 | smMyN1: { 466 | marginTop: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT, 467 | marginBottom: SMALL_MARGIN * -1 + PX_TAG + IMPORTANT 468 | }, 469 | smMyN2: { 470 | marginTop: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT, 471 | marginBottom: SMALL_MARGIN * -2 + PX_TAG + IMPORTANT 472 | }, 473 | smMyN3: { 474 | marginTop: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT, 475 | marginBottom: SMALL_MARGIN * -3 + PX_TAG + IMPORTANT 476 | }, 477 | smMyN4: { 478 | marginTop: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT, 479 | marginBottom: SMALL_MARGIN * -4 + PX_TAG + IMPORTANT 480 | }, 481 | smMyN5: { 482 | marginTop: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT, 483 | marginBottom: SMALL_MARGIN * -5 + PX_TAG + IMPORTANT 484 | }, 485 | 486 | /*------------------------------------------------- 487 | * Gap 488 | *-----------------------------------------------*/ 489 | smGap0: { gap: "0" }, 490 | smGap1: { gap: SMALL_SPACING * 1 }, 491 | smGap2: { gap: SMALL_SPACING * 2 }, 492 | smGap3: { gap: SMALL_SPACING * 3 }, 493 | smGap4: { gap: SMALL_SPACING * 4 }, 494 | smGap5: { gap: SMALL_SPACING * 5 }, 495 | 496 | smRowGap0: { rowGap: "0" }, 497 | smRowGap1: { rowGap: SMALL_SPACING * 1 }, 498 | smRowGap2: { rowGap: SMALL_SPACING * 2 }, 499 | smRowGap3: { rowGap: SMALL_SPACING * 3 }, 500 | smRowGap4: { rowGap: SMALL_SPACING * 4 }, 501 | smRowGap5: { rowGap: SMALL_SPACING * 5 }, 502 | 503 | smColGap0: { columnGap: "0" }, 504 | smColGap1: { columnGap: SMALL_SPACING * 1 }, 505 | smColGap2: { columnGap: SMALL_SPACING * 2 }, 506 | smColGap3: { columnGap: SMALL_SPACING * 3 }, 507 | smColGap4: { columnGap: SMALL_SPACING * 4 }, 508 | smColGap5: { columnGap: SMALL_SPACING * 5 }, 509 | 510 | /************************************************** 511 | * Text 512 | *************************************************/ 513 | smTextStart: { textAlign: "left" + IMPORTANT }, 514 | smTextEnd: { textAlign: "right" + IMPORTANT }, 515 | smTextCenter: { textAlign: "center" + IMPORTANT }, 516 | smTextJustify: { textAlign: "justify" + IMPORTANT } 517 | 518 | //NO OTHER SCREEN SIZE SPECIFIC STYLE NEEDED 519 | 520 | /************************************************** 521 | * Vertical Align 522 | *************************************************/ 523 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 524 | 525 | /************************************************** 526 | * Visibility 527 | *************************************************/ 528 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 529 | 530 | /************************************************** 531 | * zindex 532 | *************************************************/ 533 | //NO SCREEN SIZE SPECIFIC STYLE AVAILABLE 534 | }; 535 | } 536 | } 537 | --------------------------------------------------------------------------------