VideoAmp's Component library

Usage no npm install needed!

<script type="module">
  import shervinCore from 'https://cdn.skypack.dev/@shervin/core';


PreAmp Core

PreAmp Core in VideoAmp's component library.

File structure

    componentGroup/              #holds all related components
      singleComponent/           #single component
        examples/                #example use cases
        subComponents/           #child components used only by this component
        component.md             #documentation
        component.tsx            #component definition
        component.spec.tsx       #tests

Adding components

  • Component definition
    • include the description in a comment above the component definition
    • component should be a named export, not default
  • Props
    • named with this format [ComponentName]Props
    • include the descriptions in a comment above each prop
  • Examples
    • include enough examples to show off all use cases for this component
  • Tests
    • TBD
  • SubComponents
    • subComponents used only this component should live in /subComponents. If a child component is used in multiple places, then it should be pulled out as a stand alone component
  • Types
    • include only prop interfaces in component definition file
    • put all other types in core/types/ for reuse

Example Component.tsx file

import React from 'react';

interface ComponentProps {
    /** Description of first prop */
    propOne: string;
    /** Description of the second prop */
    propTwo: boolean

 * This is a description of Component.
export const Component: React.SFC<ComponentProps> = (
    props: ComponentProps
): React.ReactElement<any> => {

How to publish


Using in another project

import multiple components at once from @shervin/core

import { Button, Card, TextField } from '@shervin/core';