# @preamp/rev

> VideoAmp's Component library

Latest version **1.43.0** (published 2023-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @preamp/rev
pnpm add @preamp/rev
yarn add @preamp/rev
bun add @preamp/rev
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.43.0 |
| Published | 2023-09-01 |
| First published | 2021-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=14.16.0 |
| Dependencies | 9 |
| Unpacked size | 339.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | VideoAmp |
| Maintainers | dmogollon, fabian0007, morenoj1998, apatinoc4, lil-mango, phoenix16t, stton, ndelizo, davidung, blueish, videoamp-webmaster, abundalian, bradsamuelson, rbantog, ccrame, jonathanrtuck, beagins, mrodriguez-va |

## Links

- npm: https://www.npmjs.com/package/@preamp/rev
- Repository: https://github.com/videoamp/preamp
- Homepage: https://github.com/videoamp/preamp#readme
- Issues: https://github.com/videoamp/preamp/issues
- npm.io page: https://npm.io/package/@preamp/rev

## Dependencies (9)

- [@mui/lab](https://npm.io/package/@mui/lab.md) ^5.0.0-alpha.59
- [date-fns](https://npm.io/package/date-fns.md) ^2.0.0
- [typescript](https://npm.io/package/typescript.md) ~4.3.5
- [@mui/system](https://npm.io/package/@mui/system.md) ^5.0.1
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.0.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.4.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.3.0
- [date-fns-timezone](https://npm.io/package/date-fns-timezone.md) ^0.1.4
- [@mui/x-data-grid-pro](https://npm.io/package/@mui/x-data-grid-pro.md) ^5.2.0

## Recent versions

- 1.43.0 (latest) — 2023-09-01
- 1.42.1 — 2023-08-28
- 1.42.0 — 2023-08-23
- 1.41.0 — 2023-08-22
- 1.40.0 — 2023-08-11
- 1.39.0 — 2023-08-09
- 1.38.0 — 2023-07-28
- 1.37.0 — 2023-07-21
- 1.36.3 — 2023-07-19
- 1.36.2 — 2023-07-14
- 1.36.1 — 2023-07-13
- 1.36.0 — 2023-06-21
- 1.35.1 — 2023-06-07
- 1.35.0 — 2023-06-06
- 1.7.13 — 2022-06-30
- … 48 more at https://npm.io/package/@preamp/rev/versions

## README

# PreAmp Rev

PreAmp components built on material-ui.

## Using in another project

The exposed `ThemeProvider` component should be used at the top level of your
project in order to ensure that the _Rev_ components used within are styled
correctly.

```js
// App.tsx
import { ThemeProvider } from '@preamp/rev';

export const App = () => (
    <ThemeProvider>
        <Component />
    <ThemeProvider/>
);
```

```js
// Component.tsx
import { Button } from '@preamp/rev';

export const Component = () => <Button>Text</Button>;
```

## Adding a component to this package

All that is needed is a file to export the corresponding material-ui component.

```js
// packages/rev/components/components/Button/Button.tsx
export { default as Button } from '@mui/material/Button';
export * from '@mui/material/Button';
```

Styling to match our design language should be done through the `theme`
(`packages/rev/theme.tsx`).

**See:** https://next.material-ui.com/customization/theme-components/

**Note:** Colors may need to be added to the palette used by the theme
(`packages/rev/colors.ts`).

Examples can also be created in the _Documentation_ package.

```js
// packages/documentation/src/rev/examples/components/Button/Button.tsx
import React, { ReactElement } from 'react';

import { Button, ThemeProvider } from '@preamp/rev';

const ButtonExample = (): ReactElement => (
    <ThemeProvider>
        <Button data-ui="button">Text</Button>
    </ThemeProvider>
);

export default ButtonExample;
```

**Note:** Tailwind classes and CSS variables (other than `font-family`s) should
not be used within the _Rev_ package.

## Adding an icon to this package

The SVG content should be exported within a `SvgIcon`. The default `viewBox` for
a `SvgIcon` is 24x24, so all icons should be scaled to this size and should not
specify their own `viewBox` value.

```js
// packages/rev/components/icons/VideoAmp/VideoAmp.tsx
import React, { ReactElement } from 'react';

import { SvgIcon, SvgIconProps } from '../../components/SvgIcon';

export function VideoAmp(props: SvgIconProps): ReactElement {
    return <SvgIcon {...props}>…</SvgIcon>;
}
```

**Note:** Colors should not be defined within the SVG. The current font color
should be inheritable instead.

Examples should also be created in the _Documentation_ package.

```js
// packages/documentation/src/rev/examples/icons/VideoAmp/VideoAmp.tsx
import React, { ReactElement } from 'react';

import { VideoAmp } from '@preamp/rev';

const VideoAmpExample = (): ReactElement => <VideoAmp />;

export default VideoAmpExample;
```

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