diff --git a/README.md b/README.md index 4c67ad7..f74afb9 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,38 @@ -# @chengsokdara/react-native-cosmotize +# react-native-cosmotize React Native direct prop styling, inspired by Tailwindcss. ## Installation ```sh +yarn add @chengsokdara/react-native-cosmotize + npm install @chengsokdara/react-native-cosmotize ``` ## Usage -```js -import ReactNativeCosmotize from "@chengsokdara/react-native-cosmotize"; +```tsx +import { View } from '@chengsokdara/react-native-cosmotize'; +import Box from '@chengsokdara/react-native-cosmotize'; + +export default function App() { + return ( + + + + ); +} +``` + +### API -// ... +Layout and View Style props are implemented. +[React Native Layout Props](https://reactnative.dev/docs/layout-props) +[React Native View Style Props](https://reactnative.dev/docs/view-style-props) -const result = await ReactNativeCosmotize.multiply(3, 7); -``` +Please refer to Tailwindcss documentation for available prop name. +[Tailwindcss Docs](https://tailwindcss.com/docs) ## Contributing diff --git a/src/index.tsx b/src/index.tsx index b235657..57449d7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { View as RNView, ViewStyle } from 'react-native'; import { EColors } from './enums'; +import type { IViewProps } from './types'; import { isNumeric } from './utils'; /** diff --git a/src/types.ts b/src/types.ts index 00f7602..46586d4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,293 +1,293 @@ -// interface ITextColorProps { -// // RED -// 'text-red50'?: boolean; -// 'text-red100'?: boolean; -// 'text-red200'?: boolean; -// 'text-red300'?: boolean; -// 'text-red400'?: boolean; -// 'text-red500'?: boolean; -// 'text-red600'?: boolean; -// 'text-red700'?: boolean; -// 'text-red800'?: boolean; -// 'text-red900'?: boolean; -// 'text-redA100'?: boolean; -// 'text-redA200'?: boolean; -// 'text-redA400'?: boolean; -// 'text-redA700'?: boolean; -// // PINK -// 'text-pink50'?: boolean; -// 'text-pink100'?: boolean; -// 'text-pink200'?: boolean; -// 'text-pink300'?: boolean; -// 'text-pink400'?: boolean; -// 'text-pink500'?: boolean; -// 'text-pink600'?: boolean; -// 'text-pink700'?: boolean; -// 'text-pink800'?: boolean; -// 'text-pink900'?: boolean; -// 'text-pinkA100'?: boolean; -// 'text-pinkA200'?: boolean; -// 'text-pinkA400'?: boolean; -// 'text-pinkA700'?: boolean; -// // PURPLE -// 'text-purple50'?: boolean; -// 'text-purple100'?: boolean; -// 'text-purple200'?: boolean; -// 'text-purple300'?: boolean; -// 'text-purple400'?: boolean; -// 'text-purple500'?: boolean; -// 'text-purple600'?: boolean; -// 'text-purple700'?: boolean; -// 'text-purple800'?: boolean; -// 'text-purple900'?: boolean; -// 'text-purpleA100'?: boolean; -// 'text-purpleA200'?: boolean; -// 'text-purpleA400'?: boolean; -// 'text-purpleA700'?: boolean; -// // DEEP PURPLE -// 'text-deepPurple50'?: boolean; -// 'text-deepPurple100'?: boolean; -// 'text-deepPurple200'?: boolean; -// 'text-deepPurple300'?: boolean; -// 'text-deepPurple400'?: boolean; -// 'text-deepPurple500'?: boolean; -// 'text-deepPurple600'?: boolean; -// 'text-deepPurple700'?: boolean; -// 'text-deepPurple800'?: boolean; -// 'text-deepPurple900'?: boolean; -// 'text-deepPurpleA100'?: boolean; -// 'text-deepPurpleA200'?: boolean; -// 'text-deepPurpleA400'?: boolean; -// 'text-deepPurpleA700'?: boolean; -// // INDIGO -// 'text-indigo50'?: boolean; -// 'text-indigo100'?: boolean; -// 'text-indigo200'?: boolean; -// 'text-indigo300'?: boolean; -// 'text-indigo400'?: boolean; -// 'text-indigo500'?: boolean; -// 'text-indigo600'?: boolean; -// 'text-indigo700'?: boolean; -// 'text-indigo800'?: boolean; -// 'text-indigo900'?: boolean; -// 'text-indigoA100'?: boolean; -// 'text-indigoA200'?: boolean; -// 'text-indigoA400'?: boolean; -// 'text-indigoA700'?: boolean; -// // BLUE -// 'text-blue50'?: boolean; -// 'text-blue100'?: boolean; -// 'text-blue200'?: boolean; -// 'text-blue300'?: boolean; -// 'text-blue400'?: boolean; -// 'text-blue500'?: boolean; -// 'text-blue600'?: boolean; -// 'text-blue700'?: boolean; -// 'text-blue800'?: boolean; -// 'text-blue900'?: boolean; -// 'text-blueA100'?: boolean; -// 'text-blueA200'?: boolean; -// 'text-blueA400'?: boolean; -// 'text-blueA700'?: boolean; -// // LIGHT BLUE -// 'text-lightBlue50'?: boolean; -// 'text-lightBlue100'?: boolean; -// 'text-lightBlue200'?: boolean; -// 'text-lightBlue300'?: boolean; -// 'text-lightBlue400'?: boolean; -// 'text-lightBlue500'?: boolean; -// 'text-lightBlue600'?: boolean; -// 'text-lightBlue700'?: boolean; -// 'text-lightBlue800'?: boolean; -// 'text-lightBlue900'?: boolean; -// 'text-lightBlueA100'?: boolean; -// 'text-lightBlueA200'?: boolean; -// 'text-lightBlueA400'?: boolean; -// 'text-lightBlueA700'?: boolean; -// // CYAN -// 'text-cyan50'?: boolean; -// 'text-cyan100'?: boolean; -// 'text-cyan200'?: boolean; -// 'text-cyan300'?: boolean; -// 'text-cyan400'?: boolean; -// 'text-cyan500'?: boolean; -// 'text-cyan600'?: boolean; -// 'text-cyan700'?: boolean; -// 'text-cyan800'?: boolean; -// 'text-cyan900'?: boolean; -// 'text-cyanA100'?: boolean; -// 'text-cyanA200'?: boolean; -// 'text-cyanA400'?: boolean; -// 'text-cyanA700'?: boolean; -// // TEAL -// 'text-teal50'?: boolean; -// 'text-teal100'?: boolean; -// 'text-teal200'?: boolean; -// 'text-teal300'?: boolean; -// 'text-teal400'?: boolean; -// 'text-teal500'?: boolean; -// 'text-teal600'?: boolean; -// 'text-teal700'?: boolean; -// 'text-teal800'?: boolean; -// 'text-teal900'?: boolean; -// 'text-tealA100'?: boolean; -// 'text-tealA200'?: boolean; -// 'text-tealA400'?: boolean; -// 'text-tealA700'?: boolean; -// // GREEN -// 'text-green50'?: boolean; -// 'text-green100'?: boolean; -// 'text-green200'?: boolean; -// 'text-green300'?: boolean; -// 'text-green400'?: boolean; -// 'text-green500'?: boolean; -// 'text-green600'?: boolean; -// 'text-green700'?: boolean; -// 'text-green800'?: boolean; -// 'text-green900'?: boolean; -// 'text-greenA100'?: boolean; -// 'text-greenA200'?: boolean; -// 'text-greenA400'?: boolean; -// 'text-greenA700'?: boolean; -// // LIGHT GREEN -// 'text-lightGreen50'?: boolean; -// 'text-lightGreen100'?: boolean; -// 'text-lightGreen200'?: boolean; -// 'text-lightGreen300'?: boolean; -// 'text-lightGreen400'?: boolean; -// 'text-lightGreen500'?: boolean; -// 'text-lightGreen600'?: boolean; -// 'text-lightGreen700'?: boolean; -// 'text-lightGreen800'?: boolean; -// 'text-lightGreen900'?: boolean; -// 'text-lightGreenA100'?: boolean; -// 'text-lightGreenA200'?: boolean; -// 'text-lightGreenA400'?: boolean; -// 'text-lightGreenA700'?: boolean; -// // LIME -// 'text-lime50'?: boolean; -// 'text-lime100'?: boolean; -// 'text-lime200'?: boolean; -// 'text-lime300'?: boolean; -// 'text-lime400'?: boolean; -// 'text-lime500'?: boolean; -// 'text-lime600'?: boolean; -// 'text-lime700'?: boolean; -// 'text-lime800'?: boolean; -// 'text-lime900'?: boolean; -// 'text-limeA100'?: boolean; -// 'text-limeA200'?: boolean; -// 'text-limeA400'?: boolean; -// 'text-limeA700'?: boolean; -// // YELLOW -// 'text-yellow50'?: boolean; -// 'text-yellow100'?: boolean; -// 'text-yellow200'?: boolean; -// 'text-yellow300'?: boolean; -// 'text-yellow400'?: boolean; -// 'text-yellow500'?: boolean; -// 'text-yellow600'?: boolean; -// 'text-yellow700'?: boolean; -// 'text-yellow800'?: boolean; -// 'text-yellow900'?: boolean; -// 'text-yellowA100'?: boolean; -// 'text-yellowA200'?: boolean; -// 'text-yellowA400'?: boolean; -// 'text-yellowA700'?: boolean; -// // AMBER -// 'text-amber50'?: boolean; -// 'text-amber100'?: boolean; -// 'text-amber200'?: boolean; -// 'text-amber300'?: boolean; -// 'text-amber400'?: boolean; -// 'text-amber500'?: boolean; -// 'text-amber600'?: boolean; -// 'text-amber700'?: boolean; -// 'text-amber800'?: boolean; -// 'text-amber900'?: boolean; -// 'text-amberA100'?: boolean; -// 'text-amberA200'?: boolean; -// 'text-amberA400'?: boolean; -// 'text-amberA700'?: boolean; -// // ORANGE -// 'text-orange50'?: boolean; -// 'text-orange100'?: boolean; -// 'text-orange200'?: boolean; -// 'text-orange300'?: boolean; -// 'text-orange400'?: boolean; -// 'text-orange500'?: boolean; -// 'text-orange600'?: boolean; -// 'text-orange700'?: boolean; -// 'text-orange800'?: boolean; -// 'text-orange900'?: boolean; -// 'text-orangeA100'?: boolean; -// 'text-orangeA200'?: boolean; -// 'text-orangeA400'?: boolean; -// 'text-orangeA700'?: boolean; -// // DEEP ORANGE -// 'text-deepOrange50'?: boolean; -// 'text-deepOrange100'?: boolean; -// 'text-deepOrange200'?: boolean; -// 'text-deepOrange300'?: boolean; -// 'text-deepOrange400'?: boolean; -// 'text-deepOrange500'?: boolean; -// 'text-deepOrange600'?: boolean; -// 'text-deepOrange700'?: boolean; -// 'text-deepOrange800'?: boolean; -// 'text-deepOrange900'?: boolean; -// 'text-deepOrangeA100'?: boolean; -// 'text-deepOrangeA200'?: boolean; -// 'text-deepOrangeA400'?: boolean; -// 'text-deepOrangeA700'?: boolean; -// // BROWN -// 'text-brown50'?: boolean; -// 'text-brown100'?: boolean; -// 'text-brown200'?: boolean; -// 'text-brown300'?: boolean; -// 'text-brown400'?: boolean; -// 'text-brown500'?: boolean; -// 'text-brown600'?: boolean; -// 'text-brown700'?: boolean; -// 'text-brown800'?: boolean; -// 'text-brown900'?: boolean; -// 'text-brownA100'?: boolean; -// 'text-brownA200'?: boolean; -// 'text-brownA400'?: boolean; -// 'text-brownA700'?: boolean; -// // BLUE GREY -// 'text-blueGrey50'?: boolean; -// 'text-blueGrey100'?: boolean; -// 'text-blueGrey200'?: boolean; -// 'text-blueGrey300'?: boolean; -// 'text-blueGrey400'?: boolean; -// 'text-blueGrey500'?: boolean; -// 'text-blueGrey600'?: boolean; -// 'text-blueGrey700'?: boolean; -// 'text-blueGrey800'?: boolean; -// 'text-blueGrey900'?: boolean; -// 'text-blueGreyA100'?: boolean; -// 'text-blueGreyA200'?: boolean; -// 'text-blueGreyA400'?: boolean; -// 'text-blueGreyA700'?: boolean; -// // GREY -// 'text-grey50'?: boolean; -// 'text-grey100'?: boolean; -// 'text-grey200'?: boolean; -// 'text-grey300'?: boolean; -// 'text-grey400'?: boolean; -// 'text-grey500'?: boolean; -// 'text-grey600'?: boolean; -// 'text-grey700'?: boolean; -// 'text-grey800'?: boolean; -// 'text-grey900'?: boolean; -// 'text-greyA100'?: boolean; -// 'text-greyA200'?: boolean; -// 'text-greyA400'?: boolean; -// 'text-greyA700'?: boolean; -// // BASE -// 'text-black'?: boolean; -// 'text-white'?: boolean; -// } +interface ITextColorProps { + // RED + 'text-red50'?: boolean; + 'text-red100'?: boolean; + 'text-red200'?: boolean; + 'text-red300'?: boolean; + 'text-red400'?: boolean; + 'text-red500'?: boolean; + 'text-red600'?: boolean; + 'text-red700'?: boolean; + 'text-red800'?: boolean; + 'text-red900'?: boolean; + 'text-redA100'?: boolean; + 'text-redA200'?: boolean; + 'text-redA400'?: boolean; + 'text-redA700'?: boolean; + // PINK + 'text-pink50'?: boolean; + 'text-pink100'?: boolean; + 'text-pink200'?: boolean; + 'text-pink300'?: boolean; + 'text-pink400'?: boolean; + 'text-pink500'?: boolean; + 'text-pink600'?: boolean; + 'text-pink700'?: boolean; + 'text-pink800'?: boolean; + 'text-pink900'?: boolean; + 'text-pinkA100'?: boolean; + 'text-pinkA200'?: boolean; + 'text-pinkA400'?: boolean; + 'text-pinkA700'?: boolean; + // PURPLE + 'text-purple50'?: boolean; + 'text-purple100'?: boolean; + 'text-purple200'?: boolean; + 'text-purple300'?: boolean; + 'text-purple400'?: boolean; + 'text-purple500'?: boolean; + 'text-purple600'?: boolean; + 'text-purple700'?: boolean; + 'text-purple800'?: boolean; + 'text-purple900'?: boolean; + 'text-purpleA100'?: boolean; + 'text-purpleA200'?: boolean; + 'text-purpleA400'?: boolean; + 'text-purpleA700'?: boolean; + // DEEP PURPLE + 'text-deepPurple50'?: boolean; + 'text-deepPurple100'?: boolean; + 'text-deepPurple200'?: boolean; + 'text-deepPurple300'?: boolean; + 'text-deepPurple400'?: boolean; + 'text-deepPurple500'?: boolean; + 'text-deepPurple600'?: boolean; + 'text-deepPurple700'?: boolean; + 'text-deepPurple800'?: boolean; + 'text-deepPurple900'?: boolean; + 'text-deepPurpleA100'?: boolean; + 'text-deepPurpleA200'?: boolean; + 'text-deepPurpleA400'?: boolean; + 'text-deepPurpleA700'?: boolean; + // INDIGO + 'text-indigo50'?: boolean; + 'text-indigo100'?: boolean; + 'text-indigo200'?: boolean; + 'text-indigo300'?: boolean; + 'text-indigo400'?: boolean; + 'text-indigo500'?: boolean; + 'text-indigo600'?: boolean; + 'text-indigo700'?: boolean; + 'text-indigo800'?: boolean; + 'text-indigo900'?: boolean; + 'text-indigoA100'?: boolean; + 'text-indigoA200'?: boolean; + 'text-indigoA400'?: boolean; + 'text-indigoA700'?: boolean; + // BLUE + 'text-blue50'?: boolean; + 'text-blue100'?: boolean; + 'text-blue200'?: boolean; + 'text-blue300'?: boolean; + 'text-blue400'?: boolean; + 'text-blue500'?: boolean; + 'text-blue600'?: boolean; + 'text-blue700'?: boolean; + 'text-blue800'?: boolean; + 'text-blue900'?: boolean; + 'text-blueA100'?: boolean; + 'text-blueA200'?: boolean; + 'text-blueA400'?: boolean; + 'text-blueA700'?: boolean; + // LIGHT BLUE + 'text-lightBlue50'?: boolean; + 'text-lightBlue100'?: boolean; + 'text-lightBlue200'?: boolean; + 'text-lightBlue300'?: boolean; + 'text-lightBlue400'?: boolean; + 'text-lightBlue500'?: boolean; + 'text-lightBlue600'?: boolean; + 'text-lightBlue700'?: boolean; + 'text-lightBlue800'?: boolean; + 'text-lightBlue900'?: boolean; + 'text-lightBlueA100'?: boolean; + 'text-lightBlueA200'?: boolean; + 'text-lightBlueA400'?: boolean; + 'text-lightBlueA700'?: boolean; + // CYAN + 'text-cyan50'?: boolean; + 'text-cyan100'?: boolean; + 'text-cyan200'?: boolean; + 'text-cyan300'?: boolean; + 'text-cyan400'?: boolean; + 'text-cyan500'?: boolean; + 'text-cyan600'?: boolean; + 'text-cyan700'?: boolean; + 'text-cyan800'?: boolean; + 'text-cyan900'?: boolean; + 'text-cyanA100'?: boolean; + 'text-cyanA200'?: boolean; + 'text-cyanA400'?: boolean; + 'text-cyanA700'?: boolean; + // TEAL + 'text-teal50'?: boolean; + 'text-teal100'?: boolean; + 'text-teal200'?: boolean; + 'text-teal300'?: boolean; + 'text-teal400'?: boolean; + 'text-teal500'?: boolean; + 'text-teal600'?: boolean; + 'text-teal700'?: boolean; + 'text-teal800'?: boolean; + 'text-teal900'?: boolean; + 'text-tealA100'?: boolean; + 'text-tealA200'?: boolean; + 'text-tealA400'?: boolean; + 'text-tealA700'?: boolean; + // GREEN + 'text-green50'?: boolean; + 'text-green100'?: boolean; + 'text-green200'?: boolean; + 'text-green300'?: boolean; + 'text-green400'?: boolean; + 'text-green500'?: boolean; + 'text-green600'?: boolean; + 'text-green700'?: boolean; + 'text-green800'?: boolean; + 'text-green900'?: boolean; + 'text-greenA100'?: boolean; + 'text-greenA200'?: boolean; + 'text-greenA400'?: boolean; + 'text-greenA700'?: boolean; + // LIGHT GREEN + 'text-lightGreen50'?: boolean; + 'text-lightGreen100'?: boolean; + 'text-lightGreen200'?: boolean; + 'text-lightGreen300'?: boolean; + 'text-lightGreen400'?: boolean; + 'text-lightGreen500'?: boolean; + 'text-lightGreen600'?: boolean; + 'text-lightGreen700'?: boolean; + 'text-lightGreen800'?: boolean; + 'text-lightGreen900'?: boolean; + 'text-lightGreenA100'?: boolean; + 'text-lightGreenA200'?: boolean; + 'text-lightGreenA400'?: boolean; + 'text-lightGreenA700'?: boolean; + // LIME + 'text-lime50'?: boolean; + 'text-lime100'?: boolean; + 'text-lime200'?: boolean; + 'text-lime300'?: boolean; + 'text-lime400'?: boolean; + 'text-lime500'?: boolean; + 'text-lime600'?: boolean; + 'text-lime700'?: boolean; + 'text-lime800'?: boolean; + 'text-lime900'?: boolean; + 'text-limeA100'?: boolean; + 'text-limeA200'?: boolean; + 'text-limeA400'?: boolean; + 'text-limeA700'?: boolean; + // YELLOW + 'text-yellow50'?: boolean; + 'text-yellow100'?: boolean; + 'text-yellow200'?: boolean; + 'text-yellow300'?: boolean; + 'text-yellow400'?: boolean; + 'text-yellow500'?: boolean; + 'text-yellow600'?: boolean; + 'text-yellow700'?: boolean; + 'text-yellow800'?: boolean; + 'text-yellow900'?: boolean; + 'text-yellowA100'?: boolean; + 'text-yellowA200'?: boolean; + 'text-yellowA400'?: boolean; + 'text-yellowA700'?: boolean; + // AMBER + 'text-amber50'?: boolean; + 'text-amber100'?: boolean; + 'text-amber200'?: boolean; + 'text-amber300'?: boolean; + 'text-amber400'?: boolean; + 'text-amber500'?: boolean; + 'text-amber600'?: boolean; + 'text-amber700'?: boolean; + 'text-amber800'?: boolean; + 'text-amber900'?: boolean; + 'text-amberA100'?: boolean; + 'text-amberA200'?: boolean; + 'text-amberA400'?: boolean; + 'text-amberA700'?: boolean; + // ORANGE + 'text-orange50'?: boolean; + 'text-orange100'?: boolean; + 'text-orange200'?: boolean; + 'text-orange300'?: boolean; + 'text-orange400'?: boolean; + 'text-orange500'?: boolean; + 'text-orange600'?: boolean; + 'text-orange700'?: boolean; + 'text-orange800'?: boolean; + 'text-orange900'?: boolean; + 'text-orangeA100'?: boolean; + 'text-orangeA200'?: boolean; + 'text-orangeA400'?: boolean; + 'text-orangeA700'?: boolean; + // DEEP ORANGE + 'text-deepOrange50'?: boolean; + 'text-deepOrange100'?: boolean; + 'text-deepOrange200'?: boolean; + 'text-deepOrange300'?: boolean; + 'text-deepOrange400'?: boolean; + 'text-deepOrange500'?: boolean; + 'text-deepOrange600'?: boolean; + 'text-deepOrange700'?: boolean; + 'text-deepOrange800'?: boolean; + 'text-deepOrange900'?: boolean; + 'text-deepOrangeA100'?: boolean; + 'text-deepOrangeA200'?: boolean; + 'text-deepOrangeA400'?: boolean; + 'text-deepOrangeA700'?: boolean; + // BROWN + 'text-brown50'?: boolean; + 'text-brown100'?: boolean; + 'text-brown200'?: boolean; + 'text-brown300'?: boolean; + 'text-brown400'?: boolean; + 'text-brown500'?: boolean; + 'text-brown600'?: boolean; + 'text-brown700'?: boolean; + 'text-brown800'?: boolean; + 'text-brown900'?: boolean; + 'text-brownA100'?: boolean; + 'text-brownA200'?: boolean; + 'text-brownA400'?: boolean; + 'text-brownA700'?: boolean; + // BLUE GREY + 'text-blueGrey50'?: boolean; + 'text-blueGrey100'?: boolean; + 'text-blueGrey200'?: boolean; + 'text-blueGrey300'?: boolean; + 'text-blueGrey400'?: boolean; + 'text-blueGrey500'?: boolean; + 'text-blueGrey600'?: boolean; + 'text-blueGrey700'?: boolean; + 'text-blueGrey800'?: boolean; + 'text-blueGrey900'?: boolean; + 'text-blueGreyA100'?: boolean; + 'text-blueGreyA200'?: boolean; + 'text-blueGreyA400'?: boolean; + 'text-blueGreyA700'?: boolean; + // GREY + 'text-grey50'?: boolean; + 'text-grey100'?: boolean; + 'text-grey200'?: boolean; + 'text-grey300'?: boolean; + 'text-grey400'?: boolean; + 'text-grey500'?: boolean; + 'text-grey600'?: boolean; + 'text-grey700'?: boolean; + 'text-grey800'?: boolean; + 'text-grey900'?: boolean; + 'text-greyA100'?: boolean; + 'text-greyA200'?: boolean; + 'text-greyA400'?: boolean; + 'text-greyA700'?: boolean; + // BASE + 'text-black'?: boolean; + 'text-white'?: boolean; +} interface IBackgroundColorProps { // RED @@ -2086,7 +2086,8 @@ interface IPaddingProps { } interface ILayoutProps - extends IBackgroundColorProps, + extends ITextColorProps, + IBackgroundColorProps, IBorderColorProps, IBorderRadiusProps, IBorderStyleProps, @@ -2150,7 +2151,7 @@ interface ILayoutProps 'z-'?: boolean; } -interface IViewProps extends ILayoutProps { +export interface IViewProps extends ILayoutProps { style?: object; children?: React.ReactNode; }