README.md

🏞 alfheim

A package to help create, maintain, and grow component libraries using TypeScript

Create and maintain React component libraries with minimal fuss!

If something doesn’t work, please file an issue.

Quick Overview

To install the dependencies, simply run:

yarn add @alfheim/cli --dev

Read on to discover the available commands via the library.

yarn alfheim create-component or npm run alfheim create-component

Use this command to create new components from a boilerplate. The generated files will contain a main component file, a stylesheet that uses styled-components, a testing file, a README, and a stories file for Storybook.

Options

Each component should be passed as an argument to alfheim create-component. For example, to create MyComponent and AnotherComponent components and their associated files like so:

yarn alfheim create-component MyComponent AnotherComponent

When a component is created, it will have the following directory structure:

⊢ src/
  ⊢ components/
    ⊢ MyComponent/
      ⊢ index.tsx
      ⊢ MyComponent.styles.tsx
      ⊢ MyComponent.test.tsx
      ⊢ MyComponent.stories.tsx
      ⊢ README.md

In addition, alfheim create-component supports the following options:

• --parent <dir> or -p <dir>
• --class-component or -c
• --enable-jsx or -e
• --no-mount-tests
• --no-render-tests
• --no-shallow-tests

--parent

Use this when you want to nest a component(s) inside another component. The typical use case for this is when you don't intend to use the component(s) outside the scope of the parent. As such, component(s) nested inside parent component(s) should not be exported globally. When using this flag, the directory structure will look as follows:

⊢ src/
  ⊢ components/
    ⊢ Parent/
      ⊢ index.tsx
      ⊢ ...
      ⊢ components/
        ⊢ Child/
          ⊢ index.tsx
          ⊢ Child.styles.tsx
          ⊢ Child.test.tsx
          ⊢ Child.stories.tsx
          ⊢ README.md

--class-component

Pass this flag when you want the outputted component to be a class-based React component. By default, the value of this flag is set to false and it is recommended that you only use this flag when creating a component that has any of the following requirements:

• needs to access lifecycle methods (e.g. componentDidMount, componentDidUpdate, etc.)
• needs to have state
• needs to have custom methods and event handlers

Note that in many cases, you can also accomplish the above by using React hooks and forego the need to use a class component altogether.

--no-mount-tests

Use this flag to prevent the import of enzyme's mount method and all associated setup work. Useful when your component is very low-level and doesn't need integration testing.

--no-render-tests

Use this flag to prevent the import of enzyme's render method and all associated setup work. Useful when your component is very low-level and doesn't need integration testing.

--no-shallow-tests

Use this flag to prevent the import of enzyme's shallow method and all associated setup work. Useful when your component is very high-level and you're primarily looking to do integration testing.

Contributing

We'd love to have your helping hand on alfheim! Go over to our issues section and see if there's anything we're looking for help with OR open up a PR if you have an idea for a way to improve the library.

License

Alfheim is open source software licensed as MIT.