@preamp-release-test/rev
v1.0.41
Published
VideoAmp's Component library
Downloads
14
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.
// 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-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.
// 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;