s4labourcli
v1.0.9
Published
CLI tool to create component structure
Downloads
24
Maintainers
Readme
A CLI tool to create a component structure with a consistent format.
Installation
npm install -g s4labourcli
Usage
s4component <ComponentName>
Example
s4component SuccessAlert
Will generate the following folder structure:
SuccessAlert/
│
├── index.tsx
├── logic.ts
├── ui.tsx
├── types.ts
index.tsx
import React, {ForwardedRef} from 'react';
import {useSuccessAlertLogic} from './logic';
import SuccessAlertUI from './ui';
import {ISuccessAlertProps} from './types';
const SuccessAlert = (props: ISuccessAlertProps) => {
const logicValues = useSuccessAlertLogic(props);
return <SuccessAlertUI {...logicValues} />
}
export default SuccessAlert;
logic.ts
import {ISuccessAlertProps} from './types';
export const useSuccessAlertLogic = ({}: ISuccessAlertProps) => {
return {};
};
ui.tsx
import React from 'react';
import {ForwardedRef, forwardRef} from 'react';
import {View, Text} from 'react-native';
import {useStyle} from '@hooks/useStyle';
import useTheme from '@hooks/useTheme';
import {ISuccessAlertUIProps} from './types';
import styles from './style';
const SuccessAlert = ({}: ISuccessAlertUIProps) => {
const theme = useTheme();
const computedStyles = useStyle(styles, theme);
return (
<View style={computedStyles.container}>
<Text>SuccessAlert</Text>
</View>
);
}
export default SuccessAlert;
types.ts
export interface I<ComponentName>Props {
// [key]: value;
}
export interface I<ComponentName>UIProps {
// [key]: value;
}
style.ts
import {StyleSheet} from 'react-native';
import {ColorsProps} from '@theme/colors';
export default (theme: ColorsProps) => {
return StyleSheet.create({
container: {
flex: 1,
},
});
};