Contributing

What You Should Already Be Familiar With

• Typescript
• React
• SCSS
• Storybook
• react-router
• react-flip-toolkit
• Atomic Design

Commits and Pull Requests

Please use $ npm run commit to commit your changes. This will use commitizen to properly format your commit messaging. Templates are provided for pull requests, as well.

Component Organization

Component organization can be a little nebulous, but here are some guidelines to help you get started.

• Most components should have the following files:

  • index.tsx
  • types.ts
  • styles.scss
  • stories.tsx
  • test.tsx

• Components may have a child /components/ directory. This can be done to bucket other components within a category or namespace (i.e. Input) or simply to house child-components or fragments of the larger component. Components nested this way should be added as members to the more generic parent component if they are likely to be reused.

  └── /Card               # the <Card /> component
    ├── /components
      ├── /CardBody           # the <Card.Body /> component
      ├── /CardHeader         # the <Card.Header /> component
      ├── /CardTitle          # the <Card.Title /> component     
    ├── index.tsx
    ├── stories.tsx
    ├── styles.scss
    └── types.ts
  

  The above example could be used like so:

  import Card from '@brewkit/components/Card';
  
  <Card>Some content.</Card>
  
  // or
  
  <Card>
      <Card.Header>
          <Card.Title>Card Header</Card.Title>
      </Card.Header>
      <Card.Body>Some other content.</Card.Body>
  </Card>