# alfheim > A package to help create, maintain, and grow JS component libraries Latest version **0.0.2** (published 2019-01-09) · MIT license · 0 weekly downloads ## Install ```sh npm install alfheim pnpm add alfheim yarn add alfheim bun add alfheim ``` Provides the command `alfheim`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.2 | | Published | 2019-01-09 | | First published | 2018-12-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 84.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Haldun Anil | | Maintainers | haldunanil | | Keywords | cli, cli-app, react, reactjs, component, component-library, components, react-component, typescript | ## Links - npm: https://www.npmjs.com/package/alfheim - Repository: https://github.com/Nasdaq/alfheim - Issues: https://github.com/Nasdaq/alfheim/issues - npm.io page: https://npm.io/package/alfheim ## Dependencies (6) - [meow](https://npm.io/package/meow.md) ^5.0.0 - [chalk](https://npm.io/package/chalk.md) ^2.4.1 - [faker](https://npm.io/package/faker.md) ^4.1.0 - [read-pkg](https://npm.io/package/read-pkg.md) ^4.0.1 - [cross-spawn](https://npm.io/package/cross-spawn.md) ^6.0.5 - [readline-sync](https://npm.io/package/readline-sync.md) ^1.4.9 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.2 (latest) — 2019-01-09 - 0.0.3-alpha.1 (alpha) — 2019-02-19 - 0.0.1 — 2018-12-27 ## README

🏞 alfheim

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

Travis Lerna GitHub license PRs welcome

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). --- _Source: https://npm.io/package/alfheim · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._