PreAmp Core

PreAmp Core in VideoAmp's component library.

File structure

core/
  components/
    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 * as 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> => {
    ...
};

Note: React must be imported with * as. Otherwise this file will not be parsed correctly for documentation generation.

How to publish

TODO

Using in another project

import multiple components at once from @preamp/core

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