Components
+ We have added some global components that are used commonly inside the + project. + {/* Typography*/} +Typography
+
+
+ {
+ 'import Title from "../components/Typography/Title"\n Your Title here '
+ }
+
+
+ -
+
-
+ Title{" "}
+ - Use this component to show title
+
Title Example +
+ -
+ Subtitle{" "}
+ - Component that shows text smaller than title
+
Subtitle Example +
+ -
+ ErrorText{" "}
+ - Used for showing error messages
+
Error Text Example +
+ -
+ HelperText{" "}
+ - Used for showing secondary message
+
Helper Text Example +
+
Form Input
++ Many times we have to use form input like text, select one or toogle + and in every file we have to handle its state management, here we have + added global form component that can be used in any file and state + variables can be managed by passing props to it. It is present in{" "} + /components/Input + {" "} + folder. +
+ Ex- +
+
+ {
+ 'const INITIAL_LEAD_OBJ = {\n first_name : "", \n last_name : "", \n email : "" \n } \n const [leadObj, setLeadObj] = useState(INITIAL_LEAD_OBJ) \n const updateFormValue = ({updateType, value}) => {\n setErrorMessage("") \n setLeadObj({...leadObj, [updateType] : value})\n }\n\n'
+ }
+
+
+ + This example is from add new lead modal, here we are importing + component for creating text input and passing some props to handle its + content and state variable. Description of props are as follows - +
+-
+
- + type{" "} + - Input type value like number, date, time etc.. + +
- + updateType{" "} + - This is used to update state variable in parent component + +
- + containerStyle{" "} + - Style class for container of input, which include label as well + +
- + labelTitle - Title of the label + +
- + updateFormValue{" "} + - Function of parent component to update state variable + +
Cards
++ + Daisy UI + {" "} + already have many cards layout, on top of that we have added one card + component that accept title props and shows children inside its body. + Also there is a divider between title and body of card. On more + provision has been added to add buttons on top left side of card using + TopSideButtons props (check leads page). +
+ Ex - +
+
+ {
+ ' Card Body
'
+ }
+
+
+