@react-native-styled-system/core 0.0.5

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@react-native-styled-system/core",
+  "version": "0.0.5",
+  "description": "React Native Styled System",
+  "main": "lib/commonjs/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "homepage": "https://github.com/mj-studio-library/react-native-styled-system",
+  "scripts": {
+    "build": "bob build",
+    "gen": "node bin/theme-gen.js bin/theme.ts bin/ret.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mj-studio-library/react-native-styled-system"
+  },
+  "author": "zmin9 <lucy@teamturing.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "^18.2.65",
+    "@types/react-test-renderer": "^18",
+    "prettier": "^3.2.5",
+    "react": "*",
+    "react-native": "^0.73.6",
+    "react-native-builder-bob": "^0.23.2",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!lib/typescript/example"
+  ],
+  "dependencies": {
+    "@mj-studio/js-util": "1.0.31",
+    "invariant": "^2.2.4"
+  },
+  "bin": "./bin/theme-gen.js",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "module": "lib/module/index.js",
+  "react-native-builder-bob": {
+    "declarationMap": false,
+    "source": "src",
+    "typescript": "",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ],
+    "exclude": [
+      "**/{__tests__,__fixtures__,__mocks__}/**",
+      "**/*.test.*"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "gitHead": "7c09f0fe9584d8280bdfd1f39f89525133e9a65e"
+}

package/src/@types/SxProps.ts

@@ -0,0 +1,255 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import type { Token } from './Token';
+
+export type SxPropsKeys = keyof SxProps;
+export type TextSxPropsKey = keyof TextSxProps;
+/**
+ * Always modify if you change API
+ */
+export const _viewStylePropList = [
+  'style',
+  'sx',
+  'backgroundColor',
+  'bg',
+  'borderColor',
+  'margin',
+  'm',
+  'marginTop',
+  'mt',
+  'marginRight',
+  'mr',
+  'marginBottom',
+  'mb',
+  'marginLeft',
+  'ml',
+  'marginX',
+  'mx',
+  'marginY',
+  'my',
+  'padding',
+  'p',
+  'paddingTop',
+  'pt',
+  'paddingRight',
+  'pr',
+  'paddingBottom',
+  'pb',
+  'paddingLeft',
+  'pl',
+  'paddingX',
+  'px',
+  'paddingY',
+  'py',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'gap',
+  'gapX',
+  'gapY',
+  'width',
+  'w',
+  'minW',
+  'minWidth',
+  'maxW',
+  'maxWidth',
+  'height',
+  'h',
+  'minH',
+  'minHeight',
+  'maxH',
+  'maxHeight',
+  'flex',
+  'alignItems',
+  'alignContent',
+  'justifyContent',
+  'flexWrap',
+  'flexDirection',
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+  'alignSelf',
+  'position',
+  'pos',
+  'borderWidth',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderRadius',
+  'radius',
+  'opacity',
+  'overflow',
+  'transform',
+  'aspectRatio',
+  'display',
+  'elevation',
+  'zIndex',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+] satisfies (SxPropsKeys | 'style')[];
+export const _textStylePropList = [
+  'color',
+  'textDecorationColor',
+  'textShadowColor',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'weight',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'align',
+  'textDecorationLine',
+  'textDecorationStyle',
+  'textShadowOffset',
+  'textShadowRadius',
+  'textTransform',
+  'userSelect',
+  'includeFontPadding',
+  'typography',
+  't',
+] satisfies (Omit<TextSxPropsKey, keyof TextSxPropsKey> | 'style')[];
+type ThemedColorTokenProps = {
+  backgroundColor: Token<'colors'>;
+  bg: Token<'colors'>; // backgroundColor
+  borderColor: Token<'colors'>;
+};
+type ThemedColorTokenTextProps = {
+  color: Token<'colors'>;
+  textDecorationColor: Token<'colors'>;
+  textShadowColor: Token<'colors'>;
+};
+
+type ThemedSpaceTokenProps = {
+  margin: Token<'space'>;
+  m: Token<'space'>; // margin
+  marginTop: Token<'space'>;
+  mt: Token<'space'>; // marginTop
+  marginRight: Token<'space'>;
+  mr: Token<'space'>; // marginRight
+  marginBottom: Token<'space'>;
+  mb: Token<'space'>; // marginBottom
+  marginLeft: Token<'space'>;
+  ml: Token<'space'>; // marginLeft
+  marginX: Token<'space'>;
+  mx: Token<'space'>; // marginX
+  marginY: Token<'space'>;
+  my: Token<'space'>; // marginY
+  padding: Token<'space'>;
+  p: Token<'space'>; // padding
+  paddingTop: Token<'space'>;
+  pt: Token<'space'>; // paddingTop
+  paddingRight: Token<'space'>;
+  pr: Token<'space'>; // paddingRight
+  paddingBottom: Token<'space'>;
+  pb: Token<'space'>; // paddingBottom
+  paddingLeft: Token<'space'>;
+  pl: Token<'space'>; // paddingLeft
+  paddingX: Token<'space'>;
+  px: Token<'space'>; // paddingX
+  paddingY: Token<'space'>;
+  py: Token<'space'>; // paddingY
+  top: Token<'space'>;
+  right: Token<'space'>;
+  bottom: Token<'space'>;
+  left: Token<'space'>;
+  gap: Token<'space'>; // only works if parsed result is number
+  gapX: Token<'space'>; // only works if parsed result is number
+  gapY: Token<'space'>; // only works if parsed result is number
+};
+
+type ThemedSizeTokenProps = {
+  width: Token<'sizes'>;
+  w: Token<'sizes'>; // width
+  minWidth: Token<'sizes'>;
+  minW: Token<'sizes'>; // minWidth
+  maxWidth: Token<'sizes'>;
+  maxW: Token<'sizes'>; // maxWidth
+  height: Token<'sizes'>;
+  h: Token<'sizes'>; // height
+  minHeight: Token<'sizes'>;
+  minH: Token<'sizes'>; // minHeight
+  maxHeight: Token<'sizes'>;
+  maxH: Token<'sizes'>; // maxHeight
+};
+
+type ThemedRadiiTokenProps = {
+  borderRadius: Token<'radii'>;
+  radius: Token<'radii'>; // borderRadius
+  borderTopLeftRadius: Token<'radii'>;
+  topLeftRadius: Token<'radii'>; // borderTopLeftRadius
+  borderTopRightRadius: Token<'radii'>;
+  topRightRadius: Token<'radii'>; // borderTopRightRadius
+  borderBottomLeftRadius: Token<'radii'>;
+  bottomLeftRadius: Token<'radii'>; // borderBottomLeftRadius
+  borderBottomRightRadius: Token<'radii'>;
+  bottomRightRadius: Token<'radii'>; // borderBottomRightRadius
+};
+
+type ThemedViewStyleProps = {
+  flex: ViewStyle['flex'];
+  alignItems: ViewStyle['alignItems'];
+  alignContent: ViewStyle['alignContent'];
+  justifyContent: ViewStyle['justifyContent'];
+  flexWrap: ViewStyle['flexWrap'];
+  flexDirection: ViewStyle['flexDirection'];
+  flexGrow: ViewStyle['flexGrow'];
+  flexShrink: ViewStyle['flexShrink'];
+  flexBasis: ViewStyle['flexBasis'];
+  alignSelf: ViewStyle['alignSelf'];
+  position: ViewStyle['position'];
+  pos: ViewStyle['position']; // position
+  borderWidth: ViewStyle['borderWidth'];
+  borderTopWidth: ViewStyle['borderTopWidth'];
+  borderRightWidth: ViewStyle['borderRightWidth'];
+  borderBottomWidth: ViewStyle['borderBottomWidth'];
+  borderLeftWidth: ViewStyle['borderLeftWidth'];
+  opacity: ViewStyle['opacity'];
+  overflow: ViewStyle['overflow'];
+  transform: ViewStyle['transform'];
+  aspectRatio: ViewStyle['aspectRatio'];
+  display: ViewStyle['display'];
+  elevation: ViewStyle['elevation'];
+  zIndex: ViewStyle['zIndex'];
+  absoluteFill?: boolean; // shortcut - position: absoulte, t,r,b,l: 0
+  center?: boolean; // shortcut - justifyContent, alignItems: center
+};
+
+type ThemedTextStyleProps = {
+  fontFamily: TextStyle['fontFamily'];
+  fontSize: TextStyle['fontSize'];
+  fontStyle: TextStyle['fontStyle'];
+  fontWeight: TextStyle['fontWeight'];
+  weight: TextStyle['fontWeight']; // fontWeight
+  letterSpacing: TextStyle['letterSpacing'];
+  lineHeight: TextStyle['lineHeight'];
+  textAlign: TextStyle['textAlign'];
+  align: TextStyle['textAlign']; // textAlign
+  textDecorationLine: TextStyle['textDecorationLine'];
+  textDecorationStyle: TextStyle['textDecorationStyle'];
+  textShadowOffset: TextStyle['textShadowOffset'];
+  textShadowRadius: TextStyle['textShadowRadius'];
+  textTransform: TextStyle['textTransform'];
+  userSelect: TextStyle['userSelect'];
+  includeFontPadding: TextStyle['includeFontPadding'];
+  typography: Token<'typography'>;
+  t: Token<'typography'>; // typography
+};
+
+type BaseSxProps = Partial<
+  ThemedViewStyleProps &
+    ThemedSpaceTokenProps &
+    ThemedSizeTokenProps &
+    ThemedColorTokenProps &
+    ThemedRadiiTokenProps
+>;
+
+type BaseTextSxProps = BaseSxProps & Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;
+
+export type SxProps = BaseSxProps & { sx?: BaseSxProps };
+export type TextSxProps = BaseTextSxProps & { sx?: BaseTextSxProps };

package/src/@types/ThemedDict.ts

@@ -0,0 +1,16 @@
+import type { ColorsValue, RadiiValue, SizesValue, SpaceValue, TypographyValue } from './Token';
+
+export interface ThemedDict {
+  space: Record<string | number, SpaceValue>;
+  sizes: Record<string | number, SizesValue>;
+  colors: Record<string | number, ColorsValue>;
+  radii: Record<string | number, RadiiValue>;
+  typography: Record<string | number, TypographyValue>;
+}
+export const emptyThemedDict = {
+  space: {},
+  colors: {},
+  sizes: {},
+  radii: {},
+  typography: {},
+} satisfies ThemedDict;

package/src/@types/ThemedTypings.ts

@@ -0,0 +1,9 @@
+import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';
+
+export interface ThemedTypings {
+  space: SpaceValue | `${number}` | `${number}px` | `${any}px`;
+  sizes: SizesValue | `${number}` | `${number}px` | `${any}px`;
+  colors: ColorsValue;
+  radii: RadiiValue | `${number}` | `${number}px` | `${any}px`;
+  typography: string;
+}

package/src/@types/Token.ts

@@ -0,0 +1,21 @@
+import type { TextStyle } from 'react-native';
+
+import type { ThemedTypings } from './ThemedTypings';
+
+export type Token<ThemeKey extends keyof ThemedTypings> = ThemeKey extends keyof ThemedTypings
+  ? ThemedTypings[ThemeKey]
+  : never;
+
+export type SpaceValue = number | 'auto' | `${number}%` | null;
+export type SizesValue = number | 'auto' | `${number}%` | null;
+export type ColorsValue = string;
+export type RadiiValue = number;
+export type TypographyValue = {
+  fontFamily?: TextStyle['fontFamily'];
+  fontSize?: TextStyle['fontSize'];
+  fontWeight?: TextStyle['fontWeight'];
+  lineHeight?: TextStyle['lineHeight'];
+  letterSpacing?: TextStyle['letterSpacing'];
+  textAlign?: TextStyle['textAlign'];
+  fontStyle?: TextStyle['fontStyle'];
+};