1 | # PreAmp Core
|
2 |
|
3 | PreAmp Core in VideoAmp's component library.
|
4 |
|
5 | ## File structure
|
6 |
|
7 | ```bash
|
8 | core/
|
9 | components/
|
10 | componentGroup/ #holds all related components
|
11 | singleComponent/ #single component
|
12 | examples/ #example use cases
|
13 | subComponents/ #child components used only by this component
|
14 | component.md #documentation
|
15 | component.tsx #component definition
|
16 | component.spec.tsx #tests
|
17 | ```
|
18 |
|
19 | ## Adding components
|
20 |
|
21 | - Component definition
|
22 | - include the description in a comment above the component definition
|
23 | - component should be a named export, not default
|
24 | - Props
|
25 | - named with this format `[ComponentName]Props`
|
26 | - include the descriptions in a comment above each prop
|
27 | - Examples
|
28 | - include enough examples to show off all use cases for this component
|
29 | - Tests
|
30 | - TBD
|
31 | - SubComponents
|
32 | - 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
|
33 | - Types
|
34 | - include only prop interfaces in component definition file
|
35 | - put all other types in `core/types/` for reuse
|
36 |
|
37 | ### Example Component.tsx file
|
38 |
|
39 | ```tsx
|
40 | import * as React from 'react';
|
41 |
|
42 | interface ComponentProps {
|
43 | /** Description of first prop */
|
44 | propOne: string;
|
45 | /** Description of the second prop */
|
46 | propTwo: boolean
|
47 | }
|
48 |
|
49 | /**
|
50 | * This is a description of Component.
|
51 | */
|
52 | export const Component: React.SFC<ComponentProps> = (
|
53 | props: ComponentProps
|
54 | ): React.ReactElement<any> => {
|
55 | ...
|
56 | };
|
57 | ```
|
58 |
|
59 | ### Note: React must be imported with `* as`. Otherwise this file will not be parsed correctly for documentation generation.
|
60 |
|
61 | ## How to publish
|
62 |
|
63 | TODO
|
64 |
|
65 | ## Using in another project
|
66 |
|
67 | import multiple components at once from `@preamp/core`
|
68 |
|
69 | ```js
|
70 | import { Button, Card, TextField } from '@preamp/core';
|
71 | ```
|