https://github.com/nasdaq/alfheim
A package to help create, maintain, and grow component libraries using TypeScript
https://github.com/nasdaq/alfheim
cli cli-app component component-library components javascript javascript-library react react-component reactjs typescript
Last synced: 8 months ago
JSON representation
A package to help create, maintain, and grow component libraries using TypeScript
- Host: GitHub
- URL: https://github.com/nasdaq/alfheim
- Owner: Nasdaq
- License: mit
- Created: 2018-12-27T18:07:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:40:13.000Z (over 3 years ago)
- Last Synced: 2025-04-17T18:36:25.345Z (about 1 year ago)
- Topics: cli, cli-app, component, component-library, components, javascript, javascript-library, react, react-component, reactjs, typescript
- Language: JavaScript
- Homepage:
- Size: 2 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
🏞 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:
```bash
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:
```bash
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 ` or `-p `](#--parent)
- [`--class-component` or `-c`](#--class-component)
- [`--enable-jsx` or `-e`](#--enable-jsx)
- [`--no-mount-tests`](#--no-mount-tests)
- [`--no-render-tests`](#--no-render-tests)
- [`--no-shallow-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](https://reactjs.org/docs/hooks-intro.html) 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](https://github.com/Nasdaq/alfheim/issues) section and see if there's anything we're looking for help with OR [open up a PR](https://github.com/Nasdaq/alfheim/pulls) if you have an idea for a way to improve the library.
## License
`Alfheim` is open source software [licensed as MIT](LICENSE).