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