# @otosense/components

> ## Use yarn link to real-time modification

Latest version **0.2.6** (published 2022-08-24) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @otosense/components
pnpm add @otosense/components
yarn add @otosense/components
bun add @otosense/components
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.6 |
| Published | 2022-08-24 |
| First published | 2021-09-29 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | asphan, sakihayashi, srherzog |

## Links

- npm: https://www.npmjs.com/package/@otosense/components
- npm.io page: https://npm.io/package/@otosense/components

## Dependencies (3)

- [@mui/lab](https://npm.io/package/@mui/lab.md) ^5.0.0-alpha.64
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [@types/webpack](https://npm.io/package/@types/webpack.md) ^5.28.0

## Recent versions

- 0.2.6 (latest) — 2022-08-24
- 0.2.5 — 2022-08-19
- 0.2.4 — 2022-08-17
- 0.2.3 — 2022-08-11
- 0.2.2 — 2022-08-02
- 0.2.1 — 2022-07-21
- 0.2.0 — 2022-04-20
- 0.1.9 — 2022-04-15
- 0.1.8 — 2022-04-13
- 0.1.7 — 2022-04-12
- 0.1.6 — 2022-04-07
- 0.1.5 — 2022-04-06
- 0.1.4 — 2022-04-05
- 0.1.3 — 2022-04-05
- 0.1.2 — 2022-03-14
- … 11 more at https://npm.io/package/@otosense/components/versions

## README

# OtoSense Design Library

## Use yarn link to real-time modification

1. make sure you have yarn installed (npm i -g yarn)
yarn install
2. 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:
<FormControl size="medium">
  <Typography variant="overline">
    {header}
  </Typography>
  <Select
    value={value}
    onChange={handleChange}
  >
    {options.map((name, j) => {
      return (
        <MenuItem key={`assettype-option-${name}-${j}`} value={name}>
          {name}
        </MenuItem>);
    })}
  </Select>
</FormControl>

#### Dialog
- use with DialogTitle, DialogContent, and DialogActions to have right spacings.

<Dialog>
  <DialogTitle>title/header here</DialogTitle>
  <DialogContent>contents here</DialogContent>
  <DialogActions>Close/save button here</DialogActions>
</Dialog>

#### Header component takes props below:

<Header
  version={version}
  account={account}
  logout={logout}
  currentDateTime={currentDateTime}
  isLoginModeOnline={isLoginModeOnline}
  setCurrentUserSession={setCurrentUserSession}
  toggleDateTimeFormat={toggleDateTimeFormat}
  languageOptions={availableLocales}
  localeFc={locale}
  textVersion={locale.getString('general.version')}
  locale={locale.locale}
  textLogout={locale.getString('global.logout')}
  setCurrentTimestamp={setCurrentTimestamp}
  logoFile={ADI_logo}
/>

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;

<OtoModal onClose={closeFunction} id="id of model" label="my label">
  // all children go here
</OtoModal>

---
_Source: https://npm.io/package/@otosense/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._