rfq-widgets v1.0.23
Index
- Getting Started
- Launch Project
- About Template
- Project Structure
- Atoms
- Components
- Styles Structure
- Themes
- Hooks
- Libraries Added
- References
Getting Started
For install the dependencies, in the project directory, you can run:
npm install or yarn
Launch Project
In the project directory, you can run:
npm start or yarn start
Project Structure
The project structure is based in best practices for architecture, based in this template is for an simple widget o component, in case to need create an website whit pages and routing is recommend added the folders for an full website.
-- public/ -- src/ ---- Atoms/ ---- Components/ ---- Hooks/ ---- Styles/ --------- Atoms/ --------- Components/
Atoms
This are micro-components with the logics is simple and hinherited like a button, a list with a simple logic for reuse this
./src/Atoms/ |----Row/index.tsx |----Button/index.tsx |----Text/index.tsx |----Card/index.tsx
Example
For the example we will create an card using 2 components(you can use more) from style and inherited functions
import React from "react";
import { Text, Button } from "../../styles";
const Card = props => {
return (
<>
<Text>{props.title}</Text>
<Text>{props.subTitle}</Text>
<Button title={props.title} onPress={() => props.action()} />
</>
);
};
export default Card;Components
This is an specific component who use the atoms for develop an specific logic or function like view an list with data and buttons specific but using the atoms for made this. The components can use Hooks or Contexts for specifics calls or actions like transfer data or functionalities by the wrapper component like HOCs
./src/Components/ |---Carouse/index.tsx |---List/index.tsx |---Table/index.tsx
- Components can be reuse in diferents modules on inside other components like a list inde a table component
Example
- In this example card are imported inside a Slider conforming an Component reusable for and module or more modules.
import React from 'react';
import Card from '../../Atoms/Card';
...
const Catalog: React.FC<Props> = (props) => {
return (
<Slider>
{props.cards.map((item) => {
<Card image={item.img}>{props.title}</Card>
})}
</Slider>
);
};
export default Catalog;Styles Structure
- for declare a new style componet this need import into ./src/styles/index.tsx and exported for use in the project
import Text from './Generics/Texts'; export {Text};
./src/styles/ |----index.tsx |----Generics/Texts.tsx |----Generics/Buttons.tsx
Example
create a new style component file with the next base:
./src/styles/Generic/Buttons.tsx
import React, {Button} from 'react';
import {Colors, Fonts} from './constants';
import styled from 'styled-components/native';
...
const TouchableOpacity = styled.TouchableOpacity`
flexDirection: row;
justify-content: center;
padding: 30px 15px;
width: 70%;
`;
interface PropsCircleButton {
primarycolor?: boolean;
secondarycolor?: boolean;
small?: boolean;
medium?: boolean;
nameicon?: string;
coloricon?: string;
sizeicon?: number;
children: string;
onPress?: () => void;
}
const TouchableCircle = styled.TouchableOpacity`
align-items: center;
justify-content: center;
${(props: any) =>
props.small &&
`
border-radius: 50px;
height: 20px;
width: 20px;
`}
${(props: any) =>
props.medium &&
`
border-radius: 50px;
height: 30px;
width: 30px;
`}
${(props: any) =>
props.primarycolor &&
`
background-color: #17a4cc;
`}
${(props: any) =>
props.secondarycolor &&
`
background-color: #fff;
`} `;
const CircleButton = (props: PropsCircleButton) => {
const {onPress, ...rest} = props;
return (
<TouchableCircle {...{onPress}} {...rest}>
<Text>{props.text}</Text>
</TouchableCircle>
);
};
export {CircleButton};After this is needed to import into ./src/styles/Generics/index.tsx
import Text from "./texts";
import Button, { CircleButton } from "./Buttons";
export { Text, Button, CircleButton};Themes
The themes are configurated for consume and object with the specific caracteristics and made more easy edit and add new themes
./src/styles/ |----index.tsx |----Constants/Colors.tsx
In the file Colors in src/styles/Constants/Colors.tsx we can see the structure for blank&white theme in an object like:
var Colors:any = {
dark: {
textColor: "white"
},
white: {
textColor: "gray"
}
};
export default Colors;we can see the parameter textColor inside the object dark and white this paramenter is use in the styles for example in src/Styles/Atoms/Atom1/index.tsx:
import React from "react";
import { FontSize, Colors } from "../../Constants";
import Styled from "styled-components";
const Text = Styled.h4`
@media screen and (max-width:1020px){
${FontSize.small}
}
@media screen and (max-width:820px){
${FontSize.mini}
}
color: ${props => Colors[props.theme].textColor} ; <------- this is the use for the specific parameter from Colors Object
`;
const TextC = (props: any) => {
return <Text theme="white"> props.text</Text>;
};
export default TextC;if we need add a new value is extricted add in the objects for theme or this can take the default style for html
Hooks
Hooks can controlle the state like redux for local components, in this template for widget can control the state, simulating an global state like redux.
Structure
Hooks is similar to redux in the reducer and the actions this data can be change for dispatchs and controlled by actions
The folder Structur for this template for widgets is the next:
---- src/ ------- Hooks/ --------- index.tsx --------- Hooks.Actions.tsx --------- Hooks.Reducer.tsx
In src/Hooks/index.tsx can found the initial state for the widget In the sr/Hooks/Hooks.Actions.tsx can found the actions for dispatch actions to the reducer from any component how called In the src/Hooks/Hooks.Reducer.tsx can found the Reducer how launch the updates to the State
Libraries Added
- Styles