{"id":19472092,"url":"https://github.com/nasdaq/alfheim","last_synced_at":"2025-10-18T20:01:47.956Z","repository":{"id":33886385,"uuid":"163323471","full_name":"Nasdaq/alfheim","owner":"Nasdaq","description":"A package to help create, maintain, and grow component libraries using TypeScript","archived":false,"fork":false,"pushed_at":"2023-01-04T07:40:13.000Z","size":2093,"stargazers_count":5,"open_issues_count":41,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T18:36:25.345Z","etag":null,"topics":["cli","cli-app","component","component-library","components","javascript","javascript-library","react","react-component","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nasdaq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-27T18:07:37.000Z","updated_at":"2020-05-29T19:39:24.000Z","dependencies_parsed_at":"2023-01-15T03:15:53.378Z","dependency_job_id":null,"html_url":"https://github.com/Nasdaq/alfheim","commit_stats":null,"previous_names":[],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nasdaq%2Falfheim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nasdaq%2Falfheim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nasdaq%2Falfheim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nasdaq%2Falfheim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nasdaq","download_url":"https://codeload.github.com/Nasdaq/alfheim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250817621,"owners_count":21492187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","cli-app","component","component-library","components","javascript","javascript-library","react","react-component","reactjs","typescript"],"created_at":"2024-11-10T19:12:27.721Z","updated_at":"2025-10-18T20:01:47.888Z","avatar_url":"https://github.com/Nasdaq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"border-bottom: none;\"\u003e🏞 alfheim\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eA package to help create, maintain, and grow component libraries using TypeScript\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/Nasdaq/alfheim\"\u003e\n    \u003cimg alt=\"Travis\" src=\"https://img.shields.io/travis/Nasdaq/alfheim/master.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://lerna.js.org/\"\u003e\n    \u003cimg alt=\"Lerna\" src=\"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Nasdaq/alfheim/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/badge/license-MIT-blue.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Nasdaq/alfheim/pulls\"\u003e\n    \u003cimg alt=\"PRs welcome\" src=\"https://img.shields.io/badge/PRs-welcome-green.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nCreate and maintain React component libraries with minimal fuss!\n\nIf something doesn’t work, please file an issue.\n\n## Quick Overview\n\nTo install the dependencies, simply run:\n\n```bash\nyarn add @alfheim/cli --dev\n```\n\nRead on to discover the available commands via the library.\n\n## `yarn alfheim create-component` or `npm run alfheim create-component`\n\nUse 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`.\n\n### Options\n\nEach 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:\n\n```bash\nyarn alfheim create-component MyComponent AnotherComponent\n```\n\nWhen a component is created, it will have the following directory structure:\n\n```\n⊢ src/\n  ⊢ components/\n    ⊢ MyComponent/\n      ⊢ index.tsx\n      ⊢ MyComponent.styles.tsx\n      ⊢ MyComponent.test.tsx\n      ⊢ MyComponent.stories.tsx\n      ⊢ README.md\n```\n\nIn addition, `alfheim create-component` supports the following options:\n\n- [`--parent \u003cdir\u003e` or `-p \u003cdir\u003e`](#--parent)\n- [`--class-component` or `-c`](#--class-component)\n- [`--enable-jsx` or `-e`](#--enable-jsx)\n- [`--no-mount-tests`](#--no-mount-tests)\n- [`--no-render-tests`](#--no-render-tests)\n- [`--no-shallow-tests`](#--no-shallow-tests)\n\n#### `--parent`\n\nUse 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:\n\n```\n⊢ src/\n  ⊢ components/\n    ⊢ Parent/\n      ⊢ index.tsx\n      ⊢ ...\n      ⊢ components/\n        ⊢ Child/\n          ⊢ index.tsx\n          ⊢ Child.styles.tsx\n          ⊢ Child.test.tsx\n          ⊢ Child.stories.tsx\n          ⊢ README.md\n```\n\n#### `--class-component`\n\nPass 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:\n- needs to access lifecycle methods (e.g. `componentDidMount`, `componentDidUpdate`, etc.)\n- needs to have state\n- needs to have custom methods and event handlers\n\nNote 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.\n\n#### `--no-mount-tests`\n\nUse 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.\n\n#### `--no-render-tests`\n\nUse 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.\n\n#### `--no-shallow-tests`\n\nUse 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.\n\n## Contributing\n\nWe'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.\n\n## License\n\n`Alfheim` is open source software [licensed as MIT](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnasdaq%2Falfheim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnasdaq%2Falfheim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnasdaq%2Falfheim/lists"}