@otosense/components
v0.2.6
Published
## Use yarn link to real-time modification
Downloads
30
Readme
OtoSense Design Library
Use yarn link to real-time modification
- make sure you have yarn installed (npm i -g yarn) yarn install
- yarn pack-copy
- if tsc is not found, run npm install -g typescript and try again
if tsc runs correctly: 3. in the components directory, yarn link 4. in QC at client, yarn link @otosense/components (edited) 5. to update, run yarn pack-copy
Material-UI themes and shared view components.
- Use import
Usage
Buttons
variants: 'contained' (default), 'outlined', 'text' color: 'primary', 'secondary', 'error', 'success', 'info', 'warning', 'cancel', 'critical', 'gray' size: 'small', 'medium', 'large'
- default is color='primary', variant='contained', and size='medium'. You don't need to write these.
- Please see Figma file to refer all the variants and color options
Select
Select field is styled in Form Control. Use default and apply size props in the Form Control (not Select) component. Most of the time, we need Typography component with variant overline which is styled for this.
Example: {header} <Select value={value} onChange={handleChange}
{options.map((name, j) => {
return (
<MenuItem key={`assettype-option-${name}-${j}`} value={name}>
{name}
</MenuItem>);
})}
Dialog
- use with DialogTitle, DialogContent, and DialogActions to have right spacings.
Header component takes props below:
version: string | number; account: string; logout: VoidFunction; currentDateTime: string; isLoginModeOnline: boolean; setCurrentUserSession: VoidFunction; toggleDateTimeFormat: VoidFunction; #change local or UTC languageOptions: string[]; #available locales localeFc: any; #the locale function textVersion: string; locale: string; #current locale textLogout: string; setCurrentTimestamp: () => void; logoFile: string;
OtoModal component takes props below *children is passed automatically
please use Dialog for general use. This may be deleted.
onClose: VoidFunction; label?: string; id?: string; children: JSX.Element;