feat: support remaxjs

packages/preset-remax/README.md

@@ -0,0 +1 @@
+# @fower/preset-remax

packages/preset-remax/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@fower/preset-remax",
+  "version": "1.3.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "types/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch --verbose",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch",
+    "test:cov": "tsdx test --coverage --passWithNoTests",
+    "lint": "tsdx lint"
+  },
+  "author": "forsigner",
+  "module": "dist/preset-remax.esm.js",
+  "dependencies": {
+    "@fower/colors": "^1.3.0",
+    "@fower/types": "^1.3.0",
+    "fower-plugin-background": "^1.3.0",
+    "fower-plugin-border": "^1.3.0",
+    "fower-plugin-box-alignment": "^1.3.0",
+    "fower-plugin-box-sizing": "^1.3.0",
+    "fower-plugin-color": "^1.3.0",
+    "fower-plugin-cursor": "^1.3.0",
+    "fower-plugin-debug": "^1.3.0",
+    "fower-plugin-display": "^1.3.0",
+    "fower-plugin-ellipsis": "^1.3.0",
+    "fower-plugin-flexbox": "^1.3.0",
+    "fower-plugin-font-weight": "^1.3.0",
+    "fower-plugin-grid": "^1.3.0",
+    "fower-plugin-layout": "^1.3.0",
+    "fower-plugin-line-height": "^1.3.0",
+    "fower-plugin-margin": "^1.3.0",
+    "fower-plugin-opacity": "^1.3.0",
+    "fower-plugin-outline": "^1.3.0",
+    "fower-plugin-overflow": "^1.3.0",
+    "fower-plugin-padding": "^1.3.0",
+    "fower-plugin-position": "^1.3.0",
+    "fower-plugin-rounded": "^1.3.0",
+    "fower-plugin-shadow": "^1.3.0",
+    "fower-plugin-size": "^1.3.0",
+    "fower-plugin-space": "^1.3.0",
+    "fower-plugin-text-align": "^1.3.0",
+    "fower-plugin-text-size": "^1.3.0",
+    "fower-plugin-text-transform": "^1.3.0",
+    "fower-plugin-visibility": "^1.3.0",
+    "fower-plugin-z-index": "^1.3.0"
+  }
+}

packages/preset-remax/src/index.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@fower/types'
+import { Preset } from '@fower/types'
+import { plugins } from './plugins'
+import { theme } from './theme'
+
+export const presetRemax: Preset = {
+  unit: 'rpx',
+  inline: true,
+  theme: theme as Theme,
+  plugins,
+}
+
+export default presetRemax

packages/preset-remax/src/plugins.ts

@@ -0,0 +1,53 @@
+import background from 'fower-plugin-background'
+import border from 'fower-plugin-border'
+import flexItem from 'fower-plugin-box-alignment'
+import color from 'fower-plugin-color'
+import display from 'fower-plugin-display'
+import flexBox from 'fower-plugin-flexbox'
+import layout from 'fower-plugin-layout'
+import lineHeight from 'fower-plugin-line-height'
+import margin from 'fower-plugin-margin'
+import opacity from 'fower-plugin-opacity'
+import overflow from 'fower-plugin-overflow'
+import padding from 'fower-plugin-padding'
+import position from 'fower-plugin-position'
+import rounded from 'fower-plugin-rounded'
+import shadow from 'fower-plugin-shadow'
+import size from 'fower-plugin-size'
+import textAlign from 'fower-plugin-text-align'
+import textSize from 'fower-plugin-text-size'
+import textTransform from 'fower-plugin-text-transform'
+import fontWeight from 'fower-plugin-font-weight'
+import zIndex from 'fower-plugin-z-index'
+import outline from 'fower-plugin-outline'
+import ellipsis from 'fower-plugin-ellipsis'
+import visibility from 'fower-plugin-visibility'
+import boxSizing from 'fower-plugin-box-sizing'
+
+export const plugins = [
+  background(),
+  border(),
+  color(),
+  display(),
+  flexBox(),
+  flexItem(),
+  layout(),
+  lineHeight(),
+  margin(),
+  opacity(),
+  overflow(),
+  padding(),
+  position(),
+  rounded(),
+  shadow(),
+  size(),
+  textAlign(),
+  textSize(),
+  textTransform(),
+  fontWeight(),
+  zIndex(),
+  outline(),
+  ellipsis(),
+  visibility(),
+  boxSizing(),
+]

packages/preset-remax/src/theme.ts

@@ -0,0 +1,94 @@
+import { Theme } from '@fower/types'
+import { colors } from '@fower/colors'
+
+export const theme: Partial<Theme> = {
+  colors,
+  spacings: {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    28: 112,
+    32: 128,
+    36: 144,
+    40: 160,
+    44: 176,
+    48: 192,
+    52: 208,
+    56: 224,
+    60: 240,
+    64: 256,
+    72: 288,
+    80: 320,
+    96: 384,
+  },
+  fontSizes: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+    '5xl': 48,
+    '6xl': 60,
+    '7xl': 72,
+    '8xl': 96,
+    '9xl': 128,
+  },
+  lineHeights: {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+  },
+  radii: {
+    none: 0,
+    sm: 2,
+    base: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    '2xl': 16,
+    '3xl': 24,
+    full: 9999,
+  },
+  shadows: {
+    sm: '0 1rpx 3rpx rgba(0, 0, 0, 0.12), 0 0 1rpx rgba(0,0,0,0.01)',
+    base: '0 2rpx 4rpx rgba(0, 0, 0, 0.12), 0 0 2rpx rgba(0,0,0,0.02)',
+    md: '0 4rpx 8rpx rgba(0, 0, 0, 0.12), 0 0 2rpx rgba(0,0,0,0.02)',
+    lg: '0 8rpx 16rpx rgba(0, 0, 0, 0.12), 0 0 2rpx rgba(0,0,0,0.02)',
+    xl: '0 14rpx 24rpx rgba(0, 0, 0, 0.16), 0 0 2rpx rgba(0,0,0,0.02)',
+    '2xl': '0 24rpx 48rpx rgba(0, 0, 0, 0.2), 0 0 2rpx rgba(0,0,0,0.02)',
+    inner: 'inset 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.06)',
+    outline: '0 0 0 3rpx rgba(66, 153, 225, 0.5)',
+    none: 'none',
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+}

packages/preset-remax/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}

packages/preset-remax/types/index.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="fower-plugin-background" />
+/// <reference types="fower-plugin-border" />
+/// <reference types="fower-plugin-box-alignment" />
+/// <reference types="fower-plugin-color" />
+/// <reference types="fower-plugin-display" />
+/// <reference types="fower-plugin-flexbox" />
+/// <reference types="fower-plugin-layout" />
+/// <reference types="fower-plugin-line-height" />
+/// <reference types="fower-plugin-margin" />
+/// <reference types="fower-plugin-opacity" />
+/// <reference types="fower-plugin-overflow" />
+/// <reference types="fower-plugin-position" />
+/// <reference types="fower-plugin-padding" />
+/// <reference types="fower-plugin-rounded" />
+/// <reference types="fower-plugin-shadow" />
+/// <reference types="fower-plugin-size" />
+/// <reference types="fower-plugin-text-align" />
+/// <reference types="fower-plugin-text-size" />
+/// <reference types="fower-plugin-text-transform" />
+/// <reference types="fower-plugin-font-weight" />
+/// <reference types="fower-plugin-z-index" />
+/// <reference types="fower-plugin-outline" />
+/// <reference types="fower-plugin-ellipsis" />
+/// <reference types="@fower/types" />
+/// <reference types="react" />
+
+import { Preset } from '@fower/types'
+export declare const presetRemax: Preset
+export default presetRemax
+
+export declare const plugins: import('@fower/types').FowerPlugin[]
+
+import { Theme } from '@fower/types'
+export declare const theme: Partial<Theme>

packages/remax/README.md

@@ -0,0 +1 @@
+# @fower/remax

packages/remax/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@fower/remax",
+  "version": "1.3.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch --verbose",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests"
+  },
+  "author": "forsigner",
+  "module": "dist/remax.esm.js",
+  "dependencies": {
+    "@fower/core": "^1.3.0",
+    "@fower/preset-remax": "^1.3.0",
+    "@fower/styled": "^1.3.0"
+  },
+  "devDependencies": {
+    "remax": "^2.13.1"
+  }
+}

packages/remax/src/index.ts

@@ -0,0 +1,30 @@
+import { setConfig } from '@fower/core'
+import { styled } from '@fower/styled'
+import {
+  View as OneView,
+  Text as OneText,
+  Button as OneButton,
+  Form as OneForm,
+  Image as OneImage,
+  Input as OneInput,
+  Label as OneLabel,
+  Modal as OneModal,
+  Navigator as OneNavigator,
+  Textarea as OneTextarea,
+  WebView as OneWebView,
+} from 'remax/one'
+import { presetRemax } from '@fower/preset-remax'
+
+setConfig(presetRemax)
+
+export const View = styled(OneView)
+export const Text = styled(OneText)
+export const Button = styled(OneButton)
+export const Form = styled(OneForm)
+export const Image = styled(OneImage)
+export const Input = styled(OneInput)
+export const Label = styled(OneLabel)
+export const Modal = styled(OneModal)
+export const Navigator = styled(OneNavigator)
+export const Textarea = styled(OneTextarea)
+export const WebView = styled(OneWebView)

packages/remax/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}