@react-native-styled-system/core 0.0.5

package/src/hook/useSx.test.ts

@@ -0,0 +1,348 @@
+import type { StyleProp } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { is } from '@mj-studio/js-util';
+import { renderHook } from '@testing-library/react-hooks';
+
+import type { TextSxProps } from '../@types/SxProps';
+import type { ThemedDict } from '../@types/ThemedDict';
+import { emptyThemedDict } from '../@types/ThemedDict';
+import type { ThemedStyleType } from '../util/propsToThemedStyle';
+
+import type { StyleFallback, StyleTransform } from './useSx';
+import { useSx } from './useSx';
+
+export function expectResult(
+  theme: ThemedDict,
+  props: { style?: StyleProp<any> } & TextSxProps & Record<string, any>,
+  {
+    expectation,
+    filteredPropsExpectation,
+    styleType,
+    transform,
+    fallback,
+  }: {
+    expectation: object;
+    filteredPropsExpectation?: object;
+    styleType?: ThemedStyleType;
+    transform?: StyleTransform;
+    fallback?: StyleFallback;
+  },
+) {
+  const {
+    result: {
+      current: { getStyle, filteredProps },
+    },
+  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback }));
+
+  if (expectation) {
+    expect(StyleSheet.flatten(getStyle())).toEqual(expectation);
+  }
+
+  if (filteredPropsExpectation) {
+    expect(filteredProps).toEqual(filteredPropsExpectation);
+  }
+}
+
+const emptyTheme = emptyThemedDict;
+
+const baseTheme: ThemedDict = {
+  colors: {
+    red: 'red',
+    blue: 'blue',
+    green: 'green',
+  },
+  sizes: {
+    1: 4,
+    2: 8,
+    pagePadding: 20,
+    full: '100%',
+  },
+  space: { 1: 4, 2: 8, pagePadding: 20, full: '100%' },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 20,
+  },
+  typography: {
+    title: {
+      fontFamily: 'Noto Sans',
+      fontSize: 14,
+      fontStyle: 'normal',
+      fontWeight: '400',
+    },
+  },
+};
+
+describe('simple usages', () => {
+  it('handle empty', () => {
+    expectResult(baseTheme, {}, { expectation: {} });
+  });
+
+  it('colors match', () => {
+    expectResult(baseTheme, { bg: 'red' }, { expectation: { backgroundColor: 'red' } });
+    expectResult(baseTheme, { bg: '#ffffff' }, { expectation: { backgroundColor: '#ffffff' } });
+  });
+
+  it('border widths should be match', () => {
+    expectResult(
+      emptyTheme,
+      { borderTopWidth: 1, borderWidth: 1 },
+      { expectation: { borderTopWidth: 1, borderWidth: 1 } },
+    );
+
+    expectResult(baseTheme, { borderLeftWidth: 1 }, { expectation: { borderLeftWidth: 1 } });
+  });
+});
+
+describe('edge case', () => {
+  it('invalid px suffix', () => {
+    expectResult(baseTheme, { w: 'undefinedpx' as any }, { expectation: {} });
+    expectResult(baseTheme, { w: 'nullpx' as any }, { expectation: {} });
+    expectResult(baseTheme, { w: '-px' as any }, { expectation: {} });
+    expectResult(baseTheme, { w: '-1px' as any }, { expectation: { width: -1 } });
+  });
+
+  it('if token is undefined, baseStyle is returned', () => {
+    expectResult(undefined as any, {}, { expectation: {} });
+    expectResult(undefined as any, { style: { width: 1 } }, { expectation: { width: 1 } });
+  });
+
+  it('if prop and getStyle sx parameter are nullish, return undefined', () => {
+    const {
+      result: {
+        current: { getStyle },
+      },
+    } = renderHook(() => useSx(null, { theme: baseTheme }));
+
+    return expect(getStyle()).toEqual(undefined);
+  });
+
+  it('if prop is nullish and fallback parameter is not nullish, return fallback style', () => {
+    const {
+      result: {
+        current: { getStyle },
+      },
+    } = renderHook(() => useSx(null, { theme: baseTheme, fallback: { w: 1 } }));
+
+    return expect(getStyle()).toEqual({ width: 4 });
+  });
+
+  it("gap doesn't accept not number value", () => {
+    expectResult(baseTheme, { gap: 'full' as any }, { expectation: {} });
+  });
+});
+
+describe('space parsing', () => {
+  it('if number token not found, return itself', () => {
+    expectResult(emptyTheme, { m: 1 }, { expectation: { margin: 1 } });
+  });
+
+  it('px suffix string, return parsed pixel number value', () => {
+    expectResult(emptyTheme, { m: '15px' }, { expectation: { margin: 15 } });
+    expectResult(emptyTheme, { m: '-1.5px' }, { expectation: { margin: -1.5 } });
+    expectResult(emptyTheme, { m: '-0px' }, { expectation: { margin: -0 } });
+    expectResult(emptyTheme, { m: '0px' }, { expectation: { margin: 0 } });
+    expectResult(emptyTheme, { m: '-1px' }, { expectation: { margin: -1 } });
+  });
+
+  it('percentage', () => {
+    expectResult(emptyTheme, { m: '100%' }, { expectation: { margin: '100%' } });
+  });
+
+  it('number, string parsing', () => {
+    expectResult(baseTheme, { m: 1 }, { expectation: { margin: 4 } });
+    expectResult(baseTheme, { m: '1' }, { expectation: { margin: 4 } });
+  });
+
+  it('negative works', () => {
+    expectResult(baseTheme, { m: -1 }, { expectation: { margin: -4 } });
+  });
+
+  it('negative number as key', () => {
+    expectResult(baseTheme, { m: -1 }, { expectation: { margin: -4 } });
+  });
+
+  it('minus prefixed string', () => {
+    expectResult(baseTheme, { m: '-pagePadding' as any }, { expectation: { margin: -20 } });
+  });
+
+  it('gap accepts number value', () => {
+    expectResult(baseTheme, { gap: 1 }, { expectation: { gap: 4 } });
+  });
+});
+
+describe('sizes parsing', () => {
+  it("negative doesn't work", () => {
+    expectResult(baseTheme, { w: -1 }, { expectation: { width: -1 } });
+  });
+});
+
+describe('shortcut priority', () => {
+  it('backgroundColor', () => {
+    expectResult(
+      baseTheme,
+      { bg: 'red', backgroundColor: 'blue' },
+      { expectation: { backgroundColor: 'blue' } },
+    );
+
+    expectResult(
+      baseTheme,
+      { bg: 'red', backgroundColor: '#ffffff' },
+      { expectation: { backgroundColor: '#ffffff' } },
+    );
+  });
+
+  it('width', () => {
+    expectResult(emptyTheme, { w: 1, width: 2 }, { expectation: { width: 2 } });
+  });
+
+  it('borderRadius', () => {
+    expectResult(emptyTheme, { radius: 1, borderRadius: 2 }, { expectation: { borderRadius: 2 } });
+  });
+
+  it('align', () => {
+    expectResult(
+      emptyTheme,
+      { textAlign: 'center', align: 'left' },
+      { expectation: { textAlign: 'center' }, styleType: 'TextStyle' },
+    );
+  });
+});
+
+describe('style parse priority', () => {
+  it('prop property > fallback property', () => {
+    expectResult(
+      emptyTheme,
+      { w: 1 },
+      {
+        fallback: {
+          w: 2,
+        },
+        expectation: { width: 1 },
+      },
+    );
+  });
+
+  it('sx prop property > prop property', () => {
+    expectResult(emptyTheme, { w: 1, sx: { w: 2 } }, { expectation: { width: 2 } });
+  });
+
+  it('style prop property > sx prop property', () => {
+    expectResult(emptyTheme, { style: { width: 1 }, sx: { w: 2 } }, { expectation: { width: 1 } });
+  });
+});
+
+describe('radii', () => {
+  it('simple case check', () => {
+    expectResult(baseTheme, { topLeftRadius: '1px' }, { expectation: { borderTopLeftRadius: 1 } });
+    expectResult(baseTheme, { topLeftRadius: '1' }, { expectation: { borderTopLeftRadius: 1 } });
+    expectResult(
+      baseTheme,
+      { topLeftRadius: 'sm' as any },
+      { expectation: { borderTopLeftRadius: 8 } },
+    );
+  });
+});
+
+describe('filteredProps', () => {
+  it("filteredProps shouldn't have not style props - ViewStyle", () => {
+    expectResult(
+      baseTheme,
+      { shouldBePersist: true, backgroundColor: 'red' },
+      {
+        expectation: { backgroundColor: 'red' },
+        filteredPropsExpectation: { shouldBePersist: true },
+      },
+    );
+  });
+
+  it("styleTheme includes only ViewStyle, then props in TextStyle shouldn't be filtered", () => {
+    expectResult(
+      baseTheme,
+      { color: 'red' },
+      {
+        expectation: {},
+        filteredPropsExpectation: { color: 'red' },
+      },
+    );
+  });
+
+  it("filteredProps shouldn't have not style props - TextStyle", () => {
+    expectResult(
+      baseTheme,
+      { color: 'red' },
+      {
+        expectation: { color: 'red' },
+        filteredPropsExpectation: {},
+        styleType: 'TextStyle',
+      },
+    );
+  });
+});
+
+describe('TextStyle', () => {
+  it('TextStyle props are parsed', () => {
+    expectResult(
+      baseTheme,
+      { textShadowColor: 'red' },
+      {
+        expectation: { textShadowColor: 'red' },
+        styleType: 'TextStyle',
+      },
+    );
+  });
+
+  it('Typography', () => {
+    expectResult(
+      baseTheme,
+      { t: 'title' },
+      {
+        expectation: {
+          fontFamily: 'Noto Sans',
+          fontSize: 14,
+          fontStyle: 'normal',
+          fontWeight: '400',
+        },
+        styleType: 'TextStyle',
+      },
+    );
+  });
+
+  it('Typography has lower priority than general props', () => {
+    expectResult(
+      baseTheme,
+      { t: 'title', fontFamily: 'Test' },
+      {
+        expectation: {
+          fontFamily: 'Test',
+          fontSize: 14,
+          fontStyle: 'normal',
+          fontWeight: '400',
+        },
+        styleType: 'TextStyle',
+      },
+    );
+  });
+});
+
+describe('transform', () => {
+  it('property should be transform', () => {
+    expectResult(
+      baseTheme,
+      { mt: 2, mb: 2 },
+      {
+        expectation: { marginTop: 8, marginBottom: 8, marginHorizontal: 16 },
+        transform: ({ marginTop, marginBottom }) => ({
+          mx: (is.number(marginTop) ? marginTop : 0) + (is.number(marginBottom) ? marginBottom : 0),
+        }),
+      },
+    );
+  });
+
+  it('transform output should be honored even all props are null', () => {
+    expectResult(baseTheme, undefined as any, {
+      expectation: { marginHorizontal: 4 },
+      transform: () => ({ mx: 1 }),
+    });
+  });
+});

package/src/hook/useSx.ts

@@ -0,0 +1,94 @@
+import { useContext, useMemo } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { is } from '@mj-studio/js-util';
+
+import type { SxPropsKeys, TextSxProps } from '../@types/SxProps';
+import { _textStylePropList, _viewStylePropList } from '../@types/SxProps';
+import type { ThemedDict } from '../@types/ThemedDict';
+import { useStableCallback } from '../internal/useStableCallback';
+import { printWarning } from '../internal/util/printWarning';
+import { StyledSystemContext } from '../provider/StyledSystemProvider';
+import type { ThemedStyleType } from '../util/propsToThemedStyle';
+import { propsToThemedStyle } from '../util/propsToThemedStyle';
+
+type Props = { style?: StyleProp<any> } & TextSxProps;
+
+export type StyleTransform = (style: TextStyle) => TextSxProps;
+export type StyleFallback = Omit<TextSxProps, 'sx'>;
+export type UseSxOptions = {
+  theme?: ThemedDict;
+  styleType?: ThemedStyleType;
+  transform?: StyleTransform;
+  fallback?: StyleFallback;
+};
+const defaultUseSxOptions: UseSxOptions = { styleType: 'ViewStyle' };
+export const useSx = <S extends ViewStyle = ViewStyle, P extends Props = Props>(
+  props?: P | null,
+  {
+    theme: optionTheme,
+    styleType = defaultUseSxOptions.styleType,
+    transform = defaultUseSxOptions.transform,
+    fallback,
+  }: UseSxOptions = defaultUseSxOptions,
+) => {
+  const styledSystemContext = useContext(StyledSystemContext);
+
+  const getStyle = useStableCallback((): StyleProp<S> | undefined => {
+    const skip = !props && !fallback;
+    const theme = optionTheme ?? styledSystemContext?.theme;
+
+    if (skip) {
+      if (is.function(transform)) {
+        return propsToThemedStyle({ theme, sx: transform({}) }) as S;
+      } else {
+        return;
+      }
+    }
+
+    if (!theme) {
+      printWarning('theme not found from useSx, undefined will be returned.');
+
+      return;
+    }
+
+    // caution: priority should be ordered correctly.
+    const mergedSx: TextSxProps = { ...fallback, ...props, ...props?.sx };
+
+    const mergedSxStyle = propsToThemedStyle({
+      theme,
+      sx: mergedSx,
+      styleType,
+    });
+
+    const composedStyle = !mergedSxStyle
+      ? props?.style
+      : props?.style
+        ? StyleSheet.compose(mergedSxStyle, props.style)
+        : mergedSxStyle;
+
+    if (is.function(transform)) {
+      const transformedSx = transform(StyleSheet.flatten(composedStyle));
+
+      return StyleSheet.compose(
+        composedStyle,
+        propsToThemedStyle({ theme, sx: transformedSx, styleType }) as S,
+      );
+    } else {
+      return composedStyle;
+    }
+  });
+
+  const filteredProps: Omit<P, SxPropsKeys | 'style'> = useMemo(() => {
+    const ret = { ...props } as Omit<P, SxPropsKeys | 'style'>;
+
+    _viewStylePropList.forEach((keyName) => delete ret[keyName]);
+    if (styleType === 'TextStyle') {
+      _textStylePropList.forEach((keyName) => delete ret[keyName]);
+    }
+
+    return ret;
+  }, [props, styleType]);
+
+  return { getStyle, filteredProps };
+};

package/src/hook/useSxStyle.test.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { renderHook } from '@testing-library/react-hooks';
+
+import type { TextSxProps } from '../@types/SxProps';
+import type { ThemedDict } from '../@types/ThemedDict';
+
+import { useSxStyle } from './useSxStyle';
+
+export function expectResult(
+  theme: ThemedDict,
+  sx: TextSxProps,
+  {
+    expectation,
+  }: {
+    expectation: object;
+  },
+) {
+  const {
+    result: { current },
+  } = renderHook(() => useSxStyle({ theme }));
+
+  expect(StyleSheet.flatten(current(sx))).toEqual(expectation);
+}
+
+const baseTheme: ThemedDict = {
+  colors: {
+    red: 'red',
+    blue: 'blue',
+    green: 'green',
+  },
+  sizes: {
+    1: 4,
+    2: 8,
+    pagePadding: 20,
+    full: '100%',
+  },
+  space: { 1: 4, 2: 8, pagePadding: 20, full: '100%' },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 20,
+  },
+  typography: {
+    title: {
+      fontFamily: 'Noto Sans',
+      fontSize: 14,
+      fontStyle: 'normal',
+      fontWeight: '400',
+    },
+  },
+};
+
+describe('general case', () => {
+  it('', () => {
+    expectResult(baseTheme, { mt: 2 }, { expectation: { marginTop: 8 } });
+  });
+});

package/src/hook/useSxStyle.ts

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+
+import type { TextSxProps } from '../@types/SxProps';
+import type { ThemedDict } from '../@types/ThemedDict';
+import { printWarning } from '../internal/util/printWarning';
+import { StyledSystemContext } from '../provider/StyledSystemProvider';
+import { propsToThemedStyle } from '../util/propsToThemedStyle';
+
+export type UseSxStyleOptions = {
+  theme?: ThemedDict;
+};
+const defaultOptions: UseSxStyleOptions = {};
+
+export const useSxStyle = ({ theme: optionTheme }: UseSxStyleOptions = defaultOptions) => {
+  const styledSystemContext = useContext(StyledSystemContext);
+
+  return (sx: TextSxProps): StyleProp<TextStyle> => {
+    const theme = optionTheme ?? styledSystemContext?.theme;
+
+    if (!theme) {
+      printWarning('theme not found from useSxStyle, empty style will be returned.');
+
+      return {};
+    }
+
+    return propsToThemedStyle({
+      theme,
+      sx,
+    });
+  };
+};

package/src/hook/useSxTokens.test.ts

@@ -0,0 +1,59 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import type { ThemedDict } from '../@types/ThemedDict';
+import type { ThemedTypings } from '../@types/ThemedTypings';
+
+import { useSxTokens } from './useSxTokens';
+
+const theme: ThemedDict = {
+  colors: {
+    red: 'red',
+    blue: 'blue',
+    green: 'green',
+  },
+  sizes: {
+    1: 4,
+    2: 8,
+    pagePadding: 20,
+  },
+  space: { 1: 4, 2: 8, pagePadding: 20 },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 20,
+  },
+  typography: {},
+};
+
+export function expectResult<T extends keyof ThemedTypings, V extends ThemedTypings[T]>(
+  theme: ThemedDict,
+  tokenGroup: T,
+  tokenValues: Array<Exclude<V, null | undefined>>,
+  expectation: any[],
+) {
+  const {
+    result: { current },
+  } = renderHook(() => useSxTokens(tokenGroup, tokenValues, { theme }));
+
+  return expect(current).toEqual(expectation);
+}
+
+describe('valid case', () => {
+  it('colors', () => {
+    expectResult(theme, 'colors', ['red'], ['red']);
+  });
+
+  it('radii', () => {
+    expectResult(theme, 'radii', ['sm' as any], [8]);
+  });
+});
+
+describe('edge case', () => {
+  it('cannot find value if tokenValue is not in tokenType', () => {
+    expectResult(theme, 'radii', ['' as any], [undefined]);
+  });
+
+  it('cannot find value if theme is undefined', () => {
+    expectResult(undefined as any, 'radii', ['' as any], [undefined]);
+  });
+});

package/src/hook/useSxTokens.ts

@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import { generateArray } from '@mj-studio/js-util';
+
+import type { ThemedDict } from '../@types/ThemedDict';
+import type { ThemedTypings } from '../@types/ThemedTypings';
+import { printWarning } from '../internal/util/printWarning';
+import { StyledSystemContext } from '../provider/StyledSystemProvider';
+
+export type UseSxTokensOptions = {
+  theme?: ThemedDict;
+};
+export const useSxTokens = <T extends keyof ThemedTypings, V extends ThemedTypings[T]>(
+  tokenType: T,
+  tokenValues: Array<Exclude<V, null | undefined>>,
+  { theme: optionTheme }: UseSxTokensOptions = {},
+): Array<ThemedDict[T][keyof ThemedDict[T]]> => {
+  const styledSystemContext = useContext(StyledSystemContext);
+
+  const theme = optionTheme ?? styledSystemContext?.theme;
+
+  if (!theme) {
+    printWarning('theme not found from useSxTokens, undefineds will be returned.');
+
+    return generateArray(tokenValues.length).map(() => undefined) as any;
+  }
+
+  const ret: Array<ThemedDict[T][keyof ThemedDict[T]]> = [];
+
+  for (let i = 0; i < tokenValues.length; i++) {
+    const tokenValue = tokenValues[i];
+    if (!(tokenValue in theme[tokenType])) {
+      printWarning(
+        `tokenValue ${String(tokenValue)} at index ${i} doesn't exist in tokenType ${tokenType} from useSxTokens, undefined will be returned.`,
+      );
+      ret.push(undefined as any);
+    } else {
+      ret.push(theme[tokenType][tokenValue]);
+    }
+  }
+
+  return ret;
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './provider/StyledSystemProvider';
+export * from './hook/useSx';
+export * from './@types/ThemedDict';
+export * from './@types/SxProps';
+export * from './@types/ThemedTypings';
+export * from './util/propsToThemedStyle';

package/src/internal/TokenParser/ColorsParser.ts

@@ -0,0 +1,18 @@
+import type { ThemedDict } from '../../@types/ThemedDict';
+import type { ColorsValue, Token } from '../../@types/Token';
+
+export const createColorsParser = (theme: ThemedDict) => {
+  return (token?: Token<'colors'>) => parseColors(theme, token);
+};
+
+const parseColors = (theme: ThemedDict, token?: Token<'colors'>): ColorsValue | undefined => {
+  if (!token) {
+    return;
+  }
+
+  if (token in theme.colors) {
+    return theme.colors[token];
+  } else {
+    return token;
+  }
+};

package/src/internal/TokenParser/RadiiParser.ts

@@ -0,0 +1,44 @@
+import { is } from '@mj-studio/js-util';
+
+import type { ThemedDict } from '../../@types/ThemedDict';
+import type { RadiiValue, Token } from '../../@types/Token';
+import { parsePxSuffixNumber } from '../util/parsePxSuffixNumber';
+
+export const createRadiiParser = (theme: ThemedDict) => {
+  return (token?: Token<'radii'>) => parseRadii(theme, token);
+};
+
+const parseRadii = (theme: ThemedDict, token?: Token<'radii'>): RadiiValue | 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 radii = theme.radii;
+
+  if ((is.string(token) || is.number(token)) && token in radii) {
+    return radii[token] as number;
+  }
+
+  if (is.number(token)) {
+    const stringKey = `${token}`;
+    if (stringKey in radii) {
+      return radii[stringKey] as number;
+    }
+  }
+
+  if (is.numberString(token)) {
+    return Number(token);
+  }
+
+  return token;
+};