@react-native-styled-system/core 0.0.5

package/src/internal/TokenParser/SizesParser.ts

@@ -0,0 +1,44 @@
+import { is } from '@mj-studio/js-util';
+
+import type { ThemedDict } from '../../@types/ThemedDict';
+import type { SizesValue, Token } from '../../@types/Token';
+import { parsePxSuffixNumber } from '../util/parsePxSuffixNumber';
+
+export const createSizesParser = (theme: ThemedDict) => {
+  return (token?: Token<'sizes'>) => parseSizes(theme, token);
+};
+
+const parseSizes = (theme: ThemedDict, token?: Token<'sizes'>): SizesValue | undefined => {
+  if (is.nullOrUndefined(token)) {
+    return;
+  }
+
+  const px = parsePxSuffixNumber(token);
+  if (is.number(px)) {
+    return px;
+  }
+
+  // end with px but not number parsed
+  if (is.string(token) && token.endsWith('px')) {
+    return;
+  }
+
+  const sizes = theme.sizes;
+
+  if ((is.string(token) || is.number(token)) && token in sizes) {
+    return sizes[token];
+  }
+
+  if (is.number(token)) {
+    const stringKey = `${token}`;
+    if (stringKey in sizes) {
+      return sizes[stringKey];
+    }
+  }
+
+  if (is.numberString(token)) {
+    return Number(token);
+  }
+
+  return token;
+};

package/src/internal/TokenParser/SpaceParser.ts

@@ -0,0 +1,95 @@
+import { is } from '@mj-studio/js-util';
+
+import type { ThemedDict } from '../../@types/ThemedDict';
+import type { SpaceValue, Token } from '../../@types/Token';
+import { parsePxSuffixNumber } from '../util/parsePxSuffixNumber';
+
+export const createSpaceParser = (theme: ThemedDict) => {
+  return (token?: Token<'space'>) => parseSpace(theme, token);
+};
+
+export const createSpaceAsNumberOnlyParser = (theme: ThemedDict) => {
+  return (token?: Token<'space'>) => parseSpaceAsNumberOnly(theme, token);
+};
+
+/**
+ * Space should be handle negative string like '-1' as well
+ */
+const parseSpace = (theme: ThemedDict, token?: Token<'space'>): SpaceValue | undefined => {
+  if (is.nullOrUndefined(token)) {
+    return;
+  }
+
+  const px = parsePxSuffixNumber(token);
+  if (is.number(px)) {
+    return px;
+  }
+
+  // end with px but not number parsed
+  if (is.string(token) && token.endsWith('px')) {
+    return;
+  }
+
+  const spaces = theme.space;
+
+  if ((is.string(token) || is.number(token)) && token in spaces) {
+    return spaces[token];
+  }
+
+  // Parse is number
+  if (is.number(token)) {
+    const stringKey = `${token}`;
+    if (stringKey in spaces) {
+      return spaces[stringKey];
+    }
+
+    const negativeNumberKey = -token;
+    if (negativeNumberKey in spaces) {
+      const value = spaces[negativeNumberKey];
+      if (is.number(value)) {
+        return -value;
+      }
+    }
+
+    const negativeStringKey =
+      stringKey.charAt(0) === '-' ? stringKey.substring(1) : `-${stringKey}`;
+
+    if (negativeStringKey in spaces) {
+      const value = spaces[negativeStringKey];
+      if (is.number(value)) {
+        return -value;
+      }
+    }
+  }
+
+  // Parse prefix minus token string
+  if (is.string(token) && token.startsWith('-')) {
+    const originalToken = token.substring(1);
+    if (originalToken in spaces) {
+      const value = spaces[originalToken];
+      if (is.number(value)) {
+        return -value;
+      }
+      // not invert sign percent string yet(will be supported).
+    }
+
+    // don't return malformed string. It is not acceptable as SpaceValue
+    return;
+  }
+
+  if (is.numberString(token)) {
+    return Number(token);
+  }
+
+  return token;
+};
+
+/**
+ * Parse space and filter if it is number for number only prop like gap
+ */
+const parseSpaceAsNumberOnly = (theme: ThemedDict, token?: Token<'space'>): number | undefined => {
+  const ret = parseSpace(theme, token);
+  if (is.number(ret)) {
+    return ret;
+  }
+};

package/src/internal/TokenParser/TokenParser.ts

@@ -0,0 +1,18 @@
+import type { ThemedDict } from '../../@types/ThemedDict';
+
+import { createColorsParser } from './ColorsParser';
+import { createRadiiParser } from './RadiiParser';
+import { createSizesParser } from './SizesParser';
+import { createSpaceAsNumberOnlyParser, createSpaceParser } from './SpaceParser';
+import { createTypographyParser } from './TypographyParser';
+
+export const createTokenParsers = (theme: ThemedDict) => {
+  return {
+    colors: createColorsParser(theme),
+    space: createSpaceParser(theme),
+    spaceAsNumberOnly: createSpaceAsNumberOnlyParser(theme),
+    sizes: createSizesParser(theme),
+    radii: createRadiiParser(theme),
+    typography: createTypographyParser(theme),
+  };
+};

package/src/internal/TokenParser/TypographyParser.ts

@@ -0,0 +1,24 @@
+import { is } from '@mj-studio/js-util';
+import invariant from 'invariant';
+
+import type { ThemedDict } from '../../@types/ThemedDict';
+import type { Token, TypographyValue } from '../../@types/Token';
+
+export const createTypographyParser = (theme: ThemedDict) => {
+  return (token?: Token<'typography'>) => parseTypography(theme, token);
+};
+
+const parseTypography = (
+  theme: ThemedDict,
+  token?: Token<'typography'>,
+): TypographyValue | undefined => {
+  if (is.nullOrUndefined(token)) {
+    return;
+  }
+
+  invariant(is.string(token), 'typography token should be a string');
+
+  if (is.string(token) && token in theme.typography) {
+    return theme.typography[token];
+  }
+};

package/src/internal/useStableCallback.ts

@@ -0,0 +1,29 @@
+/**
+ * Returns a stabilized callback reference which delegates to the most recent unstable callback
+ *
+ * This is similar to useCallback, but allows unstableCallback to access the most recent values from the closure.
+ * This can be useful if the callback is being stored long term, such as in the Transition Hook registry.
+ *
+ * Example:
+ * ```jsx
+ * const latestValueFromProps = props.value
+ * const transitionHook = useStableCallback(() => console.log(latestValueFromProps));
+ * useEffect(() => {
+ *   const deregister = transitionService.onBefore({ exiting: 'someState' }, transitionHook);
+ *   return () => deregister();
+ * }, []);
+ * ```
+ */
+import { useCallback, useRef } from 'react';
+
+export function useStableCallback<T extends Function>(unstableCallback: T): T {
+  const ref = useRef<T>(unstableCallback);
+  ref.current = unstableCallback;
+
+  const callback = useCallback(function () {
+    // @ts-ignore
+    return ref.current && ref.current.apply(this, arguments);
+  }, []);
+
+  return callback as unknown as T;
+}

package/src/internal/util/fillNullishThemeKey.ts

@@ -0,0 +1,12 @@
+import type { ThemedDict } from '../../@types/ThemedDict';
+
+export const fillNullishThemeKey = (theme: Partial<ThemedDict>): ThemedDict => {
+  return {
+    colors: {},
+    space: {},
+    sizes: {},
+    radii: {},
+    typography: {},
+    ...theme,
+  };
+};

package/src/internal/util/fillStyleIfNotNullish.ts

@@ -0,0 +1,26 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import { is } from '@mj-studio/js-util';
+
+export function fillViewStyleIfNotNullish<K extends keyof ViewStyle>(
+  into: ViewStyle,
+  key: K,
+  value?: ViewStyle[K] | null,
+) {
+  if (is.undefined(value) || is.null(value)) {
+    return;
+  }
+
+  into[key] = value;
+}
+
+export function fillTextStyleIfNotNullish<K extends Exclude<keyof TextStyle, keyof ViewStyle>>(
+  into: TextStyle,
+  key: K,
+  value?: TextStyle[K] | null,
+) {
+  if (is.undefined(value) || is.null(value)) {
+    return;
+  }
+
+  into[key] = value;
+}

package/src/internal/util/parsePxSuffixNumber.ts

@@ -0,0 +1,10 @@
+import { is } from '@mj-studio/js-util';
+
+export function parsePxSuffixNumber(value: any): number | undefined {
+  if (is.string(value) && value.endsWith('px')) {
+    const sub = value.substring(0, value.length - 2);
+    if (is.numberString(sub)) {
+      return Number(sub);
+    }
+  }
+}

package/src/internal/util/printWarning.ts

@@ -0,0 +1,11 @@
+/* eslint-disable no-console */
+
+function isTestEnv() {
+  return process.env.JEST_WORKER_ID !== undefined;
+}
+
+export const printWarning = (msg: string) => {
+  if (!isTestEnv()) {
+    console.warn('[⚠️@react-native-styled-system/core]', msg);
+  }
+};

package/src/provider/StyledSystemProvider.tsx

@@ -0,0 +1,23 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+import type { ThemedDict } from '../@types/ThemedDict';
+import { emptyThemedDict } from '../@types/ThemedDict';
+import { fillNullishThemeKey } from '../internal/util/fillNullishThemeKey';
+
+export type StyledSystemContextValue = {
+  theme: ThemedDict;
+};
+
+export const StyledSystemContext = React.createContext<StyledSystemContextValue>({
+  theme: emptyThemedDict,
+});
+type Props = PropsWithChildren<{ theme: Partial<ThemedDict> }>;
+
+export const StyledSystemProvider = ({ children, theme }: Props) => {
+  return (
+    <StyledSystemContext.Provider value={{ theme: fillNullishThemeKey(theme) }}>
+      {children}
+    </StyledSystemContext.Provider>
+  );
+};

package/src/util/propsToThemedStyle.ts

@@ -0,0 +1,168 @@
+/* eslint-disable padding-line-between-statements */
+import type { TextStyle } from 'react-native';
+
+import type { TextSxProps } from '../@types/SxProps';
+import type { ThemedDict } from '../@types/ThemedDict';
+import { createTokenParsers } from '../internal/TokenParser/TokenParser';
+import {
+  fillTextStyleIfNotNullish,
+  fillViewStyleIfNotNullish,
+} from '../internal/util/fillStyleIfNotNullish';
+import { printWarning } from '../internal/util/printWarning';
+
+export type ThemedStyleType = 'ViewStyle' | 'TextStyle';
+export const propsToThemedStyle = ({
+  theme,
+  sx,
+  styleType = 'ViewStyle',
+}: {
+  theme?: ThemedDict;
+  sx?: TextSxProps;
+  styleType?: ThemedStyleType;
+}): TextStyle | undefined => {
+  const ret: TextStyle = {};
+
+  if (!theme) {
+    printWarning('theme not found');
+    return;
+  }
+
+  if (!sx) {
+    return;
+  }
+
+  const { colors, radii, sizes, space, spaceAsNumberOnly, typography } = createTokenParsers(theme);
+
+  // region colors
+  fillViewStyleIfNotNullish(ret, 'backgroundColor', colors(sx.backgroundColor ?? sx.bg));
+  fillViewStyleIfNotNullish(ret, 'borderColor', colors(sx.borderColor));
+  // endregion
+
+  // region space
+  fillViewStyleIfNotNullish(ret, 'margin', space(sx.margin ?? sx.m));
+  fillViewStyleIfNotNullish(ret, 'marginTop', space(sx.marginTop ?? sx.mt));
+  fillViewStyleIfNotNullish(ret, 'marginRight', space(sx.marginRight ?? sx.mr));
+  fillViewStyleIfNotNullish(ret, 'marginBottom', space(sx.marginBottom ?? sx.mb));
+  fillViewStyleIfNotNullish(ret, 'marginLeft', space(sx.marginLeft ?? sx.ml));
+  fillViewStyleIfNotNullish(ret, 'marginVertical', space(sx.marginY ?? sx.my));
+  fillViewStyleIfNotNullish(ret, 'marginHorizontal', space(sx.marginX ?? sx.mx));
+
+  fillViewStyleIfNotNullish(ret, 'padding', space(sx.padding ?? sx.p));
+  fillViewStyleIfNotNullish(ret, 'paddingTop', space(sx.paddingTop ?? sx.pt));
+  fillViewStyleIfNotNullish(ret, 'paddingRight', space(sx.paddingRight ?? sx.pr));
+  fillViewStyleIfNotNullish(ret, 'paddingBottom', space(sx.paddingBottom ?? sx.pb));
+  fillViewStyleIfNotNullish(ret, 'paddingLeft', space(sx.paddingLeft ?? sx.pl));
+  fillViewStyleIfNotNullish(ret, 'paddingVertical', space(sx.paddingY ?? sx.py));
+  fillViewStyleIfNotNullish(ret, 'paddingHorizontal', space(sx.paddingX ?? sx.px));
+
+  fillViewStyleIfNotNullish(ret, 'top', space(sx.top ?? (sx.absoluteFill ? 0 : undefined)));
+  fillViewStyleIfNotNullish(ret, 'right', space(sx.right ?? (sx.absoluteFill ? 0 : undefined)));
+  fillViewStyleIfNotNullish(ret, 'bottom', space(sx.bottom ?? (sx.absoluteFill ? 0 : undefined)));
+  fillViewStyleIfNotNullish(ret, 'left', space(sx.left ?? (sx.absoluteFill ? 0 : undefined)));
+
+  fillViewStyleIfNotNullish(ret, 'gap', spaceAsNumberOnly(sx.gap));
+  fillViewStyleIfNotNullish(ret, 'columnGap', spaceAsNumberOnly(sx.gapX));
+  fillViewStyleIfNotNullish(ret, 'rowGap', spaceAsNumberOnly(sx.gapY));
+  // endregion
+
+  // region sizes
+  fillViewStyleIfNotNullish(ret, 'width', sizes(sx.width ?? sx.w));
+  fillViewStyleIfNotNullish(ret, 'minWidth', sizes(sx.minWidth ?? sx.minW));
+  fillViewStyleIfNotNullish(ret, 'maxWidth', sizes(sx.maxWidth ?? sx.maxW));
+
+  fillViewStyleIfNotNullish(ret, 'height', sizes(sx.height ?? sx.h));
+  fillViewStyleIfNotNullish(ret, 'minHeight', sizes(sx.minHeight ?? sx.minH));
+  fillViewStyleIfNotNullish(ret, 'maxHeight', sizes(sx.maxHeight ?? sx.maxH));
+  // endregion
+
+  // region radii
+  fillViewStyleIfNotNullish(ret, 'borderRadius', radii(sx.borderRadius ?? sx.radius));
+  fillViewStyleIfNotNullish(
+    ret,
+    'borderTopLeftRadius',
+    radii(sx.borderTopLeftRadius ?? sx.topLeftRadius),
+  );
+  fillViewStyleIfNotNullish(
+    ret,
+    'borderTopRightRadius',
+    radii(sx.borderTopRightRadius ?? sx.topRightRadius),
+  );
+  fillViewStyleIfNotNullish(
+    ret,
+    'borderBottomLeftRadius',
+    radii(sx.borderBottomLeftRadius ?? sx.bottomLeftRadius),
+  );
+  fillViewStyleIfNotNullish(
+    ret,
+    'borderBottomRightRadius',
+    radii(sx.borderBottomRightRadius ?? sx.bottomRightRadius),
+  );
+  // endregion
+
+  // region styles
+  fillViewStyleIfNotNullish(ret, 'flex', sx.flex);
+  fillViewStyleIfNotNullish(ret, 'alignItems', sx.alignItems ?? (sx.center ? 'center' : undefined));
+  fillViewStyleIfNotNullish(ret, 'alignContent', sx.alignContent);
+  fillViewStyleIfNotNullish(
+    ret,
+    'justifyContent',
+    sx.justifyContent ?? (sx.center ? 'center' : undefined),
+  );
+  fillViewStyleIfNotNullish(ret, 'flexWrap', sx.flexWrap);
+  fillViewStyleIfNotNullish(ret, 'flexDirection', sx.flexDirection);
+  fillViewStyleIfNotNullish(ret, 'flexGrow', sx.flexGrow);
+  fillViewStyleIfNotNullish(ret, 'flexShrink', sx.flexShrink);
+  fillViewStyleIfNotNullish(ret, 'flexBasis', sx.flexBasis);
+  fillViewStyleIfNotNullish(ret, 'alignSelf', sx.alignSelf);
+  fillViewStyleIfNotNullish(
+    ret,
+    'position',
+    sx.position ?? sx.pos ?? (sx.absoluteFill ? 'absolute' : undefined),
+  );
+  fillViewStyleIfNotNullish(ret, 'borderWidth', sx.borderWidth);
+  fillViewStyleIfNotNullish(ret, 'borderTopWidth', sx.borderTopWidth);
+  fillViewStyleIfNotNullish(ret, 'borderRightWidth', sx.borderRightWidth);
+  fillViewStyleIfNotNullish(ret, 'borderBottomWidth', sx.borderBottomWidth);
+  fillViewStyleIfNotNullish(ret, 'borderLeftWidth', sx.borderLeftWidth);
+
+  fillViewStyleIfNotNullish(ret, 'opacity', sx.opacity);
+  fillViewStyleIfNotNullish(ret, 'overflow', sx.overflow);
+  fillViewStyleIfNotNullish(ret, 'transform', sx.transform);
+  fillViewStyleIfNotNullish(ret, 'aspectRatio', sx.aspectRatio);
+  fillViewStyleIfNotNullish(ret, 'display', sx.display);
+  fillViewStyleIfNotNullish(ret, 'elevation', sx.elevation);
+  fillViewStyleIfNotNullish(ret, 'zIndex', sx.zIndex);
+  // endregion
+
+  if (styleType === 'TextStyle') {
+    // region colors
+    fillTextStyleIfNotNullish(ret, 'color', colors(sx.color));
+    fillTextStyleIfNotNullish(ret, 'textDecorationColor', colors(sx.textDecorationColor));
+    fillTextStyleIfNotNullish(ret, 'textShadowColor', colors(sx.textShadowColor));
+    // endregion
+
+    // region styles
+    const t = typography(sx.typography ?? sx.t);
+    fillTextStyleIfNotNullish(ret, 'fontFamily', sx.fontFamily ?? t?.fontFamily);
+    fillTextStyleIfNotNullish(ret, 'fontSize', sx.fontSize ?? t?.fontSize);
+    fillTextStyleIfNotNullish(ret, 'lineHeight', sx.lineHeight ?? t?.lineHeight);
+    fillTextStyleIfNotNullish(ret, 'fontWeight', sx.fontWeight ?? sx.weight ?? t?.fontWeight);
+    fillTextStyleIfNotNullish(ret, 'letterSpacing', sx.letterSpacing ?? t?.letterSpacing);
+    fillTextStyleIfNotNullish(ret, 'textAlign', sx.textAlign ?? sx.align ?? t?.textAlign);
+    fillTextStyleIfNotNullish(ret, 'fontStyle', sx.fontStyle ?? t?.fontStyle);
+    fillTextStyleIfNotNullish(ret, 'textDecorationLine', sx.textDecorationLine);
+    fillTextStyleIfNotNullish(ret, 'textDecorationStyle', sx.textDecorationStyle);
+    fillTextStyleIfNotNullish(ret, 'textShadowOffset', sx.textShadowOffset);
+    fillTextStyleIfNotNullish(ret, 'textShadowRadius', sx.textShadowRadius);
+    fillTextStyleIfNotNullish(ret, 'textTransform', sx.textTransform);
+    fillTextStyleIfNotNullish(ret, 'userSelect', sx.userSelect);
+    // android
+    fillTextStyleIfNotNullish(ret, 'includeFontPadding', sx.includeFontPadding);
+    /* todo */
+    // ios
+    /* todo */
+    // endregion
+  }
+
+  return ret;
+};