{"id":19852519,"url":"https://github.com/thesoftwarehouse/tsh-frontend-components-catalog","last_synced_at":"2025-06-15T07:36:47.853Z","repository":{"id":204681639,"uuid":"711985911","full_name":"TheSoftwareHouse/tsh-frontend-components-catalog","owner":"TheSoftwareHouse","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-27T08:51:41.000Z","size":1388,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-02-12T07:16:59.566Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheSoftwareHouse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-30T15:10:31.000Z","updated_at":"2023-11-03T09:59:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f4cef48-9b16-40fb-990f-4d93ba56a6c9","html_url":"https://github.com/TheSoftwareHouse/tsh-frontend-components-catalog","commit_stats":{"total_commits":42,"total_committers":2,"mean_commits":21.0,"dds":0.04761904761904767,"last_synced_commit":"9ba2df1b272310e90f0502ccb86c0c9d7e7843b7"},"previous_names":["thesoftwarehouse/tsh-frontend-components-catalog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSoftwareHouse%2Ftsh-frontend-components-catalog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSoftwareHouse%2Ftsh-frontend-components-catalog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSoftwareHouse%2Ftsh-frontend-components-catalog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheSoftwareHouse%2Ftsh-frontend-components-catalog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheSoftwareHouse","download_url":"https://codeload.github.com/TheSoftwareHouse/tsh-frontend-components-catalog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241241387,"owners_count":19932738,"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":[],"created_at":"2024-11-12T14:03:14.904Z","updated_at":"2025-02-28T21:17:41.015Z","avatar_url":"https://github.com/TheSoftwareHouse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTSH Frontend components + CLI\u003c/h1\u003e\n\n\n- [📘 Project context](#-project-context)\n- [🔨 Setup \\\u0026 Usage](#-setup--usage)\n  - [Husky](#husky)\n  - [Packages](#packages)\n  - [Components](#components)\n    - [Local development](#local-development)\n  - [CLI](#cli)\n    - [Destination project initialization](#destination-project-initialization)\n    - [Component copy](#component-copy)\n- [🛃 Development \\\u0026 Conventions](#-development--conventions)\n  - [File system](#file-system)\n  - [schema.json](#schemajson)\n- [🔥 Deployment](#-deployment)\n  - [Building the package](#building-the-package)\n  - [Storybook hosting](#storybook-hosting)\n\n\n## 📘 Project context\n\nKnowledge sharing and development process acceleration are the backbone of this project. In this repository you can find components that can be treated as an inspiration or starter point for production graded code.\n\nMain assumption is that custom MUI based components in this repository should be versatile and easy to configure in your current project.\n\nThis project has also a CLI that can be used to copy components directly to your project.\n\n___\n\n## 🔨 Setup \u0026 Usage\n\n### Husky\n\nIn order to keep codebase frequently tested, linted and formatted, set up husky:\n\n```\nnpm run prepare\n```\n\n### Packages\n\nInstall packages for both projects - components and CLI:\n\n```\nnpm i\n```\n\n```\ncd packages/cli\n```\n\n```\nnpm i\n```\n\nAnd return to the main directory:\n\n```\n../..\n```\n\n### Components\n\n#### Local development\n\n\nTo work on components, you can run Storybook on your localhost to set up hermetic, hot-reloading environment. In order to do that, run:\n\n```\nnpm run storybook\n```\n\nTo set up a new component in Storybook, you have to create a story (`ComponentName.stories.tsx`), check out official documentation for in-depth guidelines - [link to Storybook docs](https://storybook.js.org/docs/react/writing-stories/introduction). Or simply follow convention from components that already exists in this repository.\n\n### CLI\n\n#### Destination project initialization\n\n\nIn order to add your destination project, you have to run command:\n\n```\nnpm run init\n```\n\nAnd follow steps that are visible in your console.\n\nYou can set up multiple destination projects to have multiple choice for where to copy components to. All you need to do is to run this command again.\n\nYour configuration will be saved in `cli.settings.json` file, you can manipulate project metadata directly from there.\n\n#### Component copy\n\nTo copy components to project that you set up earlier, go ahead and run command:\n\n```\nnpm run copy\n```\n\nAnd follow steps that are visible in your console.\n\nAs a default, Storybook file (`*.stories.tsx`) is selected to be copied, if your project doesn't have Storybook set up, hit `N` button in CLI wizard at 3rd step.\n\n___\n\n## 🛃 Development \u0026 Conventions\n\n### File system\n\nIn order to keep CLI running, new components should be kept in separate directories in `packages/components`. Example:\n\nIf you would like to add `Input` component, create directory and name it as the component (lowercased):\n\n```\npackages/components/input\n```\n\nAnd add files in that directory. \n\n### schema.json\n\nIn order to manage components dependencies (both libraries and other components), we created a `packages/schema.json` file to keep it in one place.\nIf you are adding new component, you have to declare it in that file.\n\nExample:\nI've created a `\u003cList/\u003e` component that have `\u003cListItem/\u003e` as a dependency, and it is based on MUI library. Schema for that component may look like that:\n\n`packages/schema.json`\n```\n...\ncomponents: [\n  ...,\n  {\n    \"name\": \"List\",\n    \"componentsDependencies\": [\"ListItem\"],\n    \"packagesDependencies\": [\"@mui/material\"]\n  }\n]\n...\n```\n\n**Important! Component which isn't declared in `schema.json` won't show up in CLI copy list.**\n___\n\n## 🔥 Deployment\n\n### Building the package\n\nIn current version, CLI is bundled with components in one package. In order to build the end-product, you have to run command:\n\n```\nnpn run build-cli\n```\n\nIt will transform Typescript source code of CLI to Javascript and copy components directory to `dist`.\n\n### Storybook hosting\n\nStorybook is currently hosted at https://dz6s1m3491km4.cloudfront.net/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesoftwarehouse%2Ftsh-frontend-components-catalog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthesoftwarehouse%2Ftsh-frontend-components-catalog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesoftwarehouse%2Ftsh-frontend-components-catalog/lists"}