Merge pull request #29 from mj-studio-library/develop

Release

.github/workflows/publish.yml

@@ -4,6 +4,7 @@ on:
  push:
  branches:
  - main
+ - alpha
 
 jobs:
  publish-packages:
@@ -45,4 +46,11 @@ jobs:
  GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
  with:
- branches: 'main'
+ branches: |
+ [
+ 'main',
+ {
+ name: 'alpha',
+ prerelease: true
+ }
+ ]

doc/docs/usage/component.mdx

@@ -42,8 +42,8 @@ import { SxProps, useSx } from 'react-native-themed-styled-system';
 
 type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
 const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
- const { viewStyle, filteredProps } = useSx(props);
- return <View ref={ref} style={viewStyle()} {...filteredProps} />;
+ const { getStyle, filteredProps } = useSx(props);
+ return <View ref={ref} style={getStyle()} {...filteredProps} />;
 });
 
 export { StyledView };
@@ -52,15 +52,15 @@ export type { StyledViewProps };
 
 `useSx` is responsible for receiving `SxProps` and converting it to `ViewStyle`.
 
-You can call the `viewStyle` function returned by `useSx` and pass it to the `style` prop of the desired view.
+You can call the `getStyle` function returned by `useSx` and pass it to the `style` prop of the desired view.
 
 :::warning
 The prop type of a component containing the `SxProps` type includes all the keys included in `SxProps`.
 
 Therefore, if all props from the parent are passed through object destruction like in the existing `{...props}`, the keys do not overlap.
 You need to be careful not to do so.
 
-Also, when using `props` as is, it must always come before `style` so as not to overwrite the `style` of `viewStyle()`.
+Also, when using `props` as is, it must always come before `style` so as not to overwrite the `style` of `getStyle()`.
 
 To prevent this, you can use `filteredProps` in the return value of `useSx`.
 
@@ -102,11 +102,11 @@ const ScreenErrorFallback = (props: Props) => {
 //highlight-next-line
  const { title, body } = props;
 //highlight-next-line
- const { viewStyle } = useSx(props);
+ const { getStyle } = useSx(props);
  return (
  <View
 //highlight-next-line
- style={viewStyle({ center: true })}
+ style={getStyle({ center: true })}
  pointerEvents={'box-none'}
  >
 ```
@@ -117,7 +117,7 @@ There are a few things to keep in mind.
 There is no need to add `style` as a prop to `style` of `View`.
 2. Always pass all `props` objects themselves to `useSx` to avoid missing any properties. `useSx`
 Properties that are not used internally are ignored and not changed.
-3. `viewStyle` can receive `SxProps` as an argument and consider it in the result.
+3. `getStyle` can receive `SxProps` as an argument and consider it in the result.
 4. `center` is a shortcut for `justifyContent: center`, `alignItems: center`.
 
 ## Example without Props destruction
@@ -137,10 +137,10 @@ type StyledScrollViewProps = PropsWithChildren<
  SxProps
 >;
 const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
- const { viewStyle, filteredProps } = useSx(props);
- const { viewStyle: contentContainerStyle } = useSx(props.contentContainerSx);
+ const { getStyle, filteredProps } = useSx(props);
+ const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
  return (
- <ScrollView ref={ref} style={viewStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
+ <ScrollView ref={ref} style={getStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
 });
 

doc/docs/usage/style-parsing.mdx

@@ -20,7 +20,7 @@ const props = {
 1. Props’ `style` prop
 2. Styles of `SxProps`, such as `ml` and `w` of Props
 3. Styles inside the `sx` prop of Props
-4. First argument of `viewStyle(sx?: SxProps)`
+4. First argument of `getStyle(sx?: SxProps)`
 
 **The priority is calculated as 1 > 3 > 2 > 4.**
 
@@ -34,12 +34,12 @@ describe('style parse priority', () => {
  expectResult(emptyTheme, { w: 1, sx: { w: 2 } }, { width: 2 });
  });
 
- it('prop property > viewStyle parameter', () => {
- expectResult(emptyTheme, { w: 1, viewStyleSx: { w: 2 } }, { width: 1 });
+ it('prop property > getStyle parameter', () => {
+ expectResult(emptyTheme, { w: 1, getStyleSx: { w: 2 } }, { width: 1 });
  });
 
- it('style prop property > viewStyle parameter', () => {
- expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 1 });
+ it('style prop property > getStyle parameter', () => {
+ expectResult(emptyTheme, { style: { width: 1 }, getStyleSx: { w: 2 } }, { width: 1 });
  });
 });
 ```

doc/i18n/ko/docusaurus-plugin-content-docs/current/usage/component.mdx

@@ -42,8 +42,8 @@ import { SxProps, useSx } from 'react-native-themed-styled-system';
 
 type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
 const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
- const { viewStyle, filteredProps } = useSx(props);
- return <View ref={ref} style={viewStyle()} {...filteredProps} />;
+ const { getStyle, filteredProps } = useSx(props);
+ return <View ref={ref} style={getStyle()} {...filteredProps} />;
 });
 
 export { StyledView };
@@ -52,15 +52,15 @@ export type { StyledViewProps };
 
 `useSx`는 `SxProps`를 받아 이를 `ViewStyle`로 변환하는 역할을 합니다.
 
-`useSx`가 반환하는 `viewStyle` 함수를 호출해 원하는 뷰의 `style` prop에 전달할 수 있습니다.
+`useSx`가 반환하는 `getStyle` 함수를 호출해 원하는 뷰의 `style` prop에 전달할 수 있습니다.
 
 :::warning
 `SxProps` 타입을 포함한 컴포넌트의 prop type은 `SxProps`에 포함되는 키들이 모두 포함됩니다.
 
 따라서 기존에 `{...props}` 처럼 object destruction을 통해 부모로부터의 prop이 모두 전달되는 경우 키가 겹치지
 않는지 주의가 필요합니다.
 
-또한 `props`를 그대로 쓸 시, `style`보다 항상 이전에 와서 `viewStyle()`의 `style`을 덮어씌우지 않게 해야합니다.
+또한 `props`를 그대로 쓸 시, `style`보다 항상 이전에 와서 `getStyle()`의 `style`을 덮어씌우지 않게 해야합니다.
 
 이것을 방지하려면 `useSx`의 반환값 중 `filteredProps`를 사용하면 됩니다.
 
@@ -102,11 +102,11 @@ const ScreenErrorFallback = (props: Props) => {
 // highlight-next-line
  const { title, body } = props;
 // highlight-next-line
- const { viewStyle } = useSx(props);
+ const { getStyle } = useSx(props);
  return (
  <View
 // highlight-next-line
- style={viewStyle({ center: true })}
+ style={getStyle({ center: true })}
  pointerEvents={'box-none'}
  >
 ```
@@ -117,7 +117,7 @@ const ScreenErrorFallback = (props: Props) => {
 `View`의 `style`에 prop으로 들어온 `style`도 같이 넣어줄 필요가 없습니다.
 2. 누락되는 속성이 없게 항상 모든 `props` 객체 자체를 `useSx`로 넘기도록 합니다. `useSx`는
 내부적으로 쓰이지 않는 속성들은 무시하고 변경시키지 않습니다.
-3. `viewStyle`은 `SxProps`를 인자로 받아 결과에 고려시킬 수 있습니다.
+3. `getStyle`은 `SxProps`를 인자로 받아 결과에 고려시킬 수 있습니다.
 4. `center`는 `justifyContent: center`, `alignItems: center` 의 단축 속성입니다.
 
 ## Props destruction을 사용하지 않는 예시
@@ -137,10 +137,10 @@ type StyledScrollViewProps = PropsWithChildren<
  SxProps
 >;
 const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
- const { viewStyle, filteredProps } = useSx(props);
- const { viewStyle: contentContainerStyle } = useSx(props.contentContainerSx);
+ const { getStyle, filteredProps } = useSx(props);
+ const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
  return (
- <ScrollView ref={ref} style={viewStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
+ <ScrollView ref={ref} style={getStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
 });
 

doc/i18n/ko/docusaurus-plugin-content-docs/current/usage/style-parsing.mdx

@@ -20,7 +20,7 @@ const props = {
 1. Props의 `style` prop
 2. Props의 `ml`, `w` 같은 `SxProps`의 스타일들
 3. Props의 `sx` prop 내부의 스타일들
-4. `viewStyle(sx?: SxProps)`의 첫 인자
+4. `getStyle(sx?: SxProps)`의 첫 인자
 
 **이에 따른 우선순위는 1 > 3 > 2 > 4 > 로 계산됩니다.**
 
@@ -34,12 +34,12 @@ describe('style parse priority', () => {
  expectResult(emptyTheme, { w: 1, sx: { w: 2 } }, { width: 2 });
  });
 
- it('prop property > viewStyle parameter', () => {
- expectResult(emptyTheme, { w: 1, viewStyleSx: { w: 2 } }, { width: 1 });
+ it('prop property > getStyle parameter', () => {
+ expectResult(emptyTheme, { w: 1, getStyleSx: { w: 2 } }, { width: 1 });
  });
 
- it('style prop property > viewStyle parameter', () => {
- expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 1 });
+ it('style prop property > getStyle parameter', () => {
+ expectResult(emptyTheme, { style: { width: 1 }, getStyleSx: { w: 2 } }, { width: 1 });
  });
 });
 ```

src/@types/SxProps.ts

@@ -1,13 +1,15 @@
-import type { ViewStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
 
 import type { Token } from './Token';
 
-export type SxPropKeys = keyof SxProps;
+export type SxPropsKeys = keyof SxProps;
+export type TextSxPropsKey = keyof TextSxProps;
 /**
  * Always modify if you change API
  */
-export const _allPropList = [
+export const _viewStylePropList = [
  'style',
+ 'sx',
  'backgroundColor',
  'bg',
  'borderColor',
@@ -58,7 +60,6 @@ export const _allPropList = [
  'minHeight',
  'maxH',
  'maxHeight',
- 'sx',
  'flex',
  'alignItems',
  'alignContent',
@@ -89,13 +90,37 @@ export const _allPropList = [
  'borderTopRightRadius',
  'borderBottomLeftRadius',
  'borderBottomRightRadius',
-] satisfies (SxPropKeys | 'style')[];
-
+] satisfies (SxPropsKeys | 'style')[];
+export const _textStylePropList = [
+ 'color',
+ 'textDecorationColor',
+ 'textShadowColor',
+ 'fontFamily',
+ 'fontSize',
+ 'fontStyle',
+ 'fontWeight',
+ 'weight',
+ 'letterSpacing',
+ 'lineHeight',
+ 'textAlign',
+ 'align',
+ 'textDecorationLine',
+ 'textDecorationStyle',
+ 'textShadowOffset',
+ 'textShadowRadius',
+ 'textTransform',
+ 'userSelect',
+] 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'>;
@@ -163,38 +188,60 @@ type ThemedRadiiTokenProps = {
  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'];
+};
+
 type BaseSxProps = Partial<
- {
- 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
- } & ThemedSpaceTokenProps &
+ ThemedViewStyleProps &
+ ThemedSpaceTokenProps &
  ThemedSizeTokenProps &
  ThemedColorTokenProps &
  ThemedRadiiTokenProps
 >;
 
 export type SxProps = BaseSxProps & { sx?: BaseSxProps };
+export type TextSxProps = SxProps & Partial<ThemedColorTokenTextProps & ThemedTextStyleProps>;