kyon-toolbox-rn v0.1.4
kyon-toolbox-rn
Future complete CLI for fast and complete creations of applications in react native
the idea is to install this library and be able to configure everything be simple import a component like
useKyonNotification({androidID:'xxxxxxxx', iosID:'xxxxxxxx'});
and BOOM notifications ready to roll!!
or everytime you need to create a new THEME you could just in the command line
kyon-toolbox create theme
and do a complete scaffolding for the new theme. with imports and etc.
Installation
npm install kyon-toolbox-rn
TODO:
CLI: command line utility. \ commands: \ THEME RELATED \ -create-theme || should create the basic scaffolding for the theme \ -create-theme-component || should display a list of the components offer by kyon-toolbox add the imports for the component to work with theme \ UTILITY RELATED \ -configure-notifications || explanatory \ -create-modal-controller ||explanatory \ -create-route ||explanatory \ -create-service ||explanatory \ -create-service-controller ||explanatory \ -create-context ||explanatory \ -create-new-screen ||this should create a new route with its proper context, route, basic UI to work.
a lot more will be added later and just tired right now.
\ COMPONENTS: components to ADD KyonMasterContainer: Should replace the use of View \ KyonMasterInput: Should replace the use of View \ KyonMasterSelect: Should replace the use of Select \ KyonMasterRadio: KyonMasterForms: KyonMasterTable: KyonMasterCalendar: KyonMasterDateSelector:
Usage
import { KyonThemeContextProvider, KyonMasterText } from 'kyon-toolbox-rn';
const App = () => {
return (
<KyonThemeContextProvider
theme={'this is optional, but recommended, here you will put the theme that all the components will follow'}
>
<KyonMasterText
text={'your text here'}
textStyle={'put styles here to modified the this specific text component'}
wrapperStyle={'put styles here to modified the specific wrapper on this text <every Text component has wrapper that is a View component>'}
variant={'put the variant that you have created in theme to apply those styles'}
debug={'this is boolean, will help you to see how your component is interacting with each other'}
/>
</KyonThemeContextProvider>
)
}
Creating a Theme
for Now the Structure for the future scafolding will be\ src/\ theme/\ KyonMasterTheme.tsx\ componentsTheme/\ KyonMasterTextTheme.tsx\ \ \ KyonMasterTheme.tsx Structure \ this is just a object where the imports of the components themes and is the object that we need to past to ther KyonThemeProvider
import {KyonMasterTextTheme} from './componentsTheme/KyonMasterTextTheme';
export const KyonMasterTheme = {
KyonMasterTextTheme,
};
KyonMasterTextTheme.tsx Structure\
export const KyonMasterTextTheme = {
defaultProps: { // this are the global styles that the components will use. and will be overide by variants and specific styles
text: {
//example:
fontSize: 16,
},
wrapper: {
padding: 15,
},
},
variants: { // this variant style will be apply when you use the key of each variant in the props variants of the component
title: {
text: {
color: 'blue',
},
wrapper: {},
},
subtitle: {
text: {
color: 'yellow',
},
wrapper: {
alignSelf: 'center',
width: '40%',
justifyContent: 'flex-start',
},
},
},
};
Contributing
License
MIT