@preamp/rev v1.43.0

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.

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

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

// 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.

// 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.

// 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-familys) 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.

// 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.

// 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;