react-native-styled-sheet 0.1.11

package/.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    '@react-native-community',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    'react-native',
+  ],
+  rules: {
+    'react-native/no-unused-styles': 'warn',
+    'react-native/split-platform-components': 'warn',
+    'react-native/no-inline-styles': 'warn',
+    'react-native/no-color-literals': 'warn',
+  },
+}; 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 eggmun98
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-native-styled-sheet",
+  "version": "0.1.11",
+  "description": "Styled-components like API for React Native using StyleSheet",
+  "main": "./src/index.js",
+  "author": "eggmun98",
+  "keywords": [
+    "react-native",
+    "styled-components",
+    "styled-sheet",
+    "styled-sheet-components",
+    "react-native-styled-sheet",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eggmun98/react-native-styled-sheet.git"
+  },
+  "packageManager": "pnpm@8.0.0",
+  "scripts": {
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write src/",
+    "dev": "echo 'Development ready'",
+    "release": "pnpm version patch && pnpm publish && git push && git push --tags"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "^3.2.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-native": "^4.1.0",
+    "prettier": "^3.2.5"
+  },
+  "dependencies": {
+    "css-to-react-native": "^3.2.0"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  ViewProps,
+  TextProps,
+  TouchableOpacityProps,
+  TouchableHighlightProps,
+  TouchableWithoutFeedbackProps,
+  PressableProps,
+  ScrollViewProps,
+  ImageProps,
+  ImageBackgroundProps,
+  TextInputProps,
+  FlatListProps,
+  SectionListProps,
+  VirtualizedListProps,
+  SafeAreaViewProps,
+  KeyboardAvoidingViewProps,
+  RefreshControlProps,
+} from 'react-native';
+
+type TemplateStringsArray = ReadonlyArray<string>;
+
+type StyledComponent<P = {}> = React.ComponentType<P> & {
+  __styledComponentMeta?: {
+    originalComponent: React.ComponentType<any>;
+    styles: any;
+    attrsProps: any;
+  };
+};
+
+interface StyledFunction<P = {}> {
+  (template: TemplateStringsArray, ...args: any[]): StyledComponent<P>;
+  attrs<AttrProps = {}>(
+    attrs: AttrProps
+  ): (template: TemplateStringsArray, ...args: any[]) => StyledComponent<Omit<P, keyof AttrProps> & Partial<AttrProps>>;
+}
+
+interface StyledInterface {
+  <P = {}>(Component: React.ComponentType<P>): StyledFunction<P>;
+  <P = {}>(StyledComp: StyledComponent<P>): StyledFunction<P>;
+
+  View: StyledFunction<ViewProps>;
+  Text: StyledFunction<TextProps>;
+  TouchableOpacity: StyledFunction<TouchableOpacityProps>;
+  TouchableHighlight: StyledFunction<TouchableHighlightProps>;
+  TouchableWithoutFeedback: StyledFunction<TouchableWithoutFeedbackProps>;
+  Pressable: StyledFunction<PressableProps>;
+  ScrollView: StyledFunction<ScrollViewProps>;
+  Image: StyledFunction<ImageProps>;
+  ImageBackground: StyledFunction<ImageBackgroundProps>;
+  TextInput: StyledFunction<TextInputProps>;
+  FlatList: StyledFunction<FlatListProps<any>>;
+  SectionList: StyledFunction<SectionListProps<any, any>>;
+  VirtualizedList: StyledFunction<VirtualizedListProps<any>>;
+  SafeAreaView: StyledFunction<SafeAreaViewProps>;
+  KeyboardAvoidingView: StyledFunction<KeyboardAvoidingViewProps>;
+  RefreshControl: StyledFunction<RefreshControlProps>;
+}
+
+declare const styled: StyledInterface;
+export default styled; 

package/src/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { 
+  View, 
+  Text, 
+  TouchableOpacity,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  Pressable,
+  ScrollView, 
+  Image,
+  ImageBackground,
+  TextInput,
+  FlatList,
+  SectionList,
+  VirtualizedList,
+  SafeAreaView,
+  KeyboardAvoidingView,
+  RefreshControl,
+} from 'react-native';
+import { createStyledComponent } from './utils/createStyledComponent';
+
+function styled(Component) {
+  const createStyled = function (strings) {
+    return createStyledComponent(Component, strings);
+  };
+
+  createStyled.attrs = function(attrsProps) {
+    return function(strings) {
+      return createStyledComponent(Component, strings, attrsProps);
+    };
+  };
+
+  return createStyled;
+}
+
+styled.View = styled(View);
+styled.Text = styled(Text);
+styled.TouchableOpacity = styled(TouchableOpacity);
+styled.TouchableHighlight = styled(TouchableHighlight);
+styled.TouchableWithoutFeedback = styled(TouchableWithoutFeedback);
+styled.Pressable = styled(Pressable);
+styled.ScrollView = styled(ScrollView);
+styled.Image = styled(Image);
+styled.ImageBackground = styled(ImageBackground);
+styled.TextInput = styled(TextInput);
+styled.FlatList = styled(FlatList);
+styled.SectionList = styled(SectionList);
+styled.VirtualizedList = styled(VirtualizedList);
+styled.SafeAreaView = styled(SafeAreaView);
+styled.KeyboardAvoidingView = styled(KeyboardAvoidingView);
+styled.RefreshControl = styled(RefreshControl);
+
+export default styled; 

package/src/styled.js

@@ -0,0 +1,26 @@
+import { handleRegular } from './utils/handleRegular';
+import { handleInheritance } from './utils/handleInheritance';
+
+/**
+ * styled 함수 - React Native 컴포넌트를 styled-components 문법으로 스타일링
+ * 
+ * 기본 사용법:
+ * const StyledView = styled.View`background-color: red;`;
+ * 
+ * attrs 사용법:
+ * const StyledButton = styled.TouchableOpacity.attrs({ activeOpacity: 0.8 })`...`;
+ * 
+ * 상속 사용법:
+ * const BaseButton = styled.TouchableOpacity`padding: 10px;`;
+ * const BlueButton = styled(BaseButton)`background-color: blue;`;
+ * 
+ * @param {React.ComponentType} Component - React Native 컴포넌트 또는 styled component
+ * @returns {Function} 템플릿 리터럴을 받는 고차 함수
+ */
+export function styled(Component) {
+  const isInheritable = Component && Component.__styledComponentMeta;
+  
+  return isInheritable 
+    ? handleInheritance(Component)
+    : handleRegular(Component);
+} 

package/src/utils/createStyledComponent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { cssToRN } from './cssToRN';
+
+/**
+ * styled component를 생성하는 핵심 함수
+ * @param {React.ComponentType} Component - 래핑할 React Native 컴포넌트
+ * @param {string[]} strings - 템플릿 리터럴의 문자열 배열
+ * @param {object} attrsProps - attrs()로 전달된 기본 props (선택적)
+ * @returns {React.ComponentType} 스타일이 적용된 React 컴포넌트
+ */
+export const createStyledComponent = (Component, strings, attrsProps) => {
+  return function StyledComponent(props) {
+    const cssString = strings.join('');
+    
+    const style = cssToRN(cssString);
+
+    const finalProps = attrsProps ? { ...attrsProps, ...props } : props;
+
+    return React.createElement(Component, {
+      ...finalProps,
+      style: [style, finalProps.style],
+    });
+  };
+}; 

package/src/utils/cssToRN.js

@@ -0,0 +1,29 @@
+import transformDeclPairs from 'css-to-react-native';
+
+/**
+ * CSS 문자열을 React Native 스타일 객체로 변환하는 함수
+ * @param {string} cssString - 변환할 CSS 문자열 (예: "background-color: red; padding: 20px;")
+ * @returns {object} React Native 스타일 객체 (예: { backgroundColor: 'red', paddingTop: 20, ... })
+ */
+export const cssToRN = (cssString) => {
+  try {
+    if (!cssString || !cssString.trim()) {
+      return {};
+    }
+
+    const declPairs = cssString
+      .split(';')
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .map((line) => {
+        const [prop, ...value] = line.split(':');
+        return [prop.trim(), value.join(':').trim()];
+      })
+      .filter(([prop, value]) => prop && value);
+
+    return transformDeclPairs(declPairs);
+  } catch (error) {
+    console.warn('Error transforming CSS to React Native style:', error);
+    return {};
+  }
+}; 

package/src/utils/handleInheritance.js

@@ -0,0 +1,34 @@
+import { createStyledComponent } from './createStyledComponent';
+
+/**
+ * styled component 상속 처리
+ * @param {React.ComponentType} StyledComponent - 상속할 styled component
+ * @returns {Function} 상속된 styled 함수 (attrs 메서드 포함)
+ */
+export const handleInheritance = (StyledComponent) => {
+  const meta = StyledComponent.__styledComponentMeta;
+  
+  const createInheritedStyled = function (strings) {
+    return createStyledComponent(
+      meta.originalComponent,  // 원본 컴포넌트 사용
+      strings,
+      meta.attrsProps,         // 상속받은 attrs
+      meta.styles              // 상속받은 스타일
+    );
+  };
+  
+  createInheritedStyled.attrs = function(newAttrsProps) {
+    return function(strings) {
+      // attrs 병합: 기존 attrs + 새로운 attrs (새로운 것이 우선)
+      const mergedAttrs = { ...meta.attrsProps, ...newAttrsProps };
+      return createStyledComponent(
+        meta.originalComponent,
+        strings,
+        mergedAttrs,
+        meta.styles
+      );
+    };
+  };
+  
+  return createInheritedStyled;
+}; 

package/src/utils/handleRegular.js

@@ -0,0 +1,20 @@
+import { createStyledComponent } from './createStyledComponent';
+
+/**
+ * 일반 React Native 컴포넌트 스타일링 처리
+ * @param {React.ComponentType} Component - React Native 컴포넌트
+ * @returns {Function} styled 함수 (attrs 메서드 포함)
+ */
+export const handleRegular = (Component) => {
+  const createStyled = function (strings) {
+    return createStyledComponent(Component, strings);
+  };
+  
+  createStyled.attrs = function(attrsProps) {
+    return function(strings) {
+      return createStyledComponent(Component, strings, attrsProps);
+    };
+  };
+  
+  return createStyled;
+};