{"id":22766844,"url":"https://github.com/ls1intum/artemis-ui","last_synced_at":"2026-01-06T18:36:04.408Z","repository":{"id":207757021,"uuid":"716172093","full_name":"ls1intum/artemis-ui","owner":"ls1intum","description":"Artemis UI is a dynamic collection of UI components tailored for the Education Platform Artemis, offering an engaging user experience with a focus on accessibility and aesthetics. Emphasizing interactive development with Storybook, it's an open-source project inviting community collaboration for continuous enhancement.","archived":false,"fork":false,"pushed_at":"2024-09-18T05:53:14.000Z","size":930,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-18T08:20:09.800Z","etag":null,"topics":["angular","artemis","storybook","ui-components","user-experience","user-interface"],"latest_commit_sha":null,"homepage":"https://ls1intum.github.io/artemis-ui/","language":"MDX","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/ls1intum.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-11-08T15:31:27.000Z","updated_at":"2024-09-18T05:53:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"87f99cc9-6ff6-4947-8fd6-81de09dc345f","html_url":"https://github.com/ls1intum/artemis-ui","commit_stats":null,"previous_names":["bgeisb/artemis-ui","ls1intum/artemis-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ls1intum%2Fartemis-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ls1intum%2Fartemis-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ls1intum%2Fartemis-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ls1intum%2Fartemis-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ls1intum","download_url":"https://codeload.github.com/ls1intum/artemis-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229229775,"owners_count":18040509,"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":["angular","artemis","storybook","ui-components","user-experience","user-interface"],"created_at":"2024-12-11T13:15:18.001Z","updated_at":"2026-01-06T18:36:04.364Z","avatar_url":"https://github.com/ls1intum.png","language":"MDX","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Artemis UI\n\nArtemis UI Component Library is a comprehensive collection of UI components, designed for the Artemis education platform. Leveraging Storybook, it offers an interactive and user-friendly environment for both the development and showcasing of UI components. The library's primary aim is to incorporate all UI components utilized on [Artemis](https://artemis.ase.in.tum.de), ensuring a cohesive and efficient design system.\n\n\n## Getting Started\n\n### Prerequisites\nEnsure you have the latest version of Node.js and npm installed on your system, as they are necessary for building and managing Angular projects. You can download and install Node.js from [nodejs.org](https://nodejs.org/en).\n\n\n### Installation\n1. **Clone the Repository:** Open your terminal and execute the following command to clone the repository:\n```bash\ngit clone https://github.com/bgeisb/artemis-ui.git\n```\n\n2. **Navigate to the Project Directory:**\nAfter cloning, switch to the project directory:\n```bash\ncd artemis-ui\n```\n\n3. **Install Dependencies:**\nRun the following command to install all necessary dependencies:\n```bash\nnpm install\n```\n\n### Starting Storybook\nTo preview the UI components in Storybook, execute the following command: \n```bash\nnpm run storybook\n```\nThis will start the Storybook server, and you can view the components in your browser at the provided URL (usually http://localhost:6006).\n\n### Integrating Artemis UI into Your Project\nTo use the components in your Angular project, import the desired component modules into your app module or the specific module where you want to use them.\n```node\nimport { ExampleComponent } from 'artemis-ui';\n\n@NgModule({\n  declarations: [\n    // ...\n    ExampleComponent\n  ],\n  // ...\n})\nexport class YourModule { }\n```\n\n## Adding New Components\nIf you're looking to expand the Artemis UI Component Library by adding new components, follow these steps to ensure a smooth integration into our existing structure and Storybook.\n\n### Step 1: Generating the Component\n1. **Navigate to the Components Directory:** Make sure you're in the correct directory where existing components are housed:\n```bash\ncd ./projects/design-system/src/lib\n```\n\n2. **Generate the New Component:** \nUse Angular CLI to generate a new component. Replace `\u003ccomponent-name\u003e` with the name of your component:\n```bash\nng generate component \u003ccomponent-name\u003e\n```\nThis command creates a new folder within the lib directory, including all necessary files for defining your component (like TypeScript, HTML, and CSS files).\n\n### Step 2: Setting Up Storybook Integration\nAfter generating the component, you'll need to manually set up its integration with Storybook:\n\n1. **Create a Storybook File:**\nIn the newly created component folder, add a Storybook file named `\u003ccomponent-name\u003e.stories.ts`. This is where you'll define the story for your component, enabling it to be previewed in Storybook.\n\n2. **Define Your Story:**\nInside the `.stories.ts` file, write the necessary code to tell Storybook how to render and interact with your component. This typically involves importing the component and defining a default export and a story that represents your component in different states.\n\nFor further information on Stories go check out Storybook's documentation on [how to write stories](https://storybook.js.org/docs/react/writing-stories/introduction).\n\n\n## Additional Resources\n\n### Artemis\n- [Production System](artemis.ase.in.tum.de)\n- [Documentation](docs.artemis.cit.tum.de)\n- [Repository](https://github.com/ls1intum/Artemis)\n\n### Angular\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page\n\n### Storybook\n- [Write Stories](https://storybook.js.org/docs/react/writing-stories/introduction)\n- [Write Docs](https://storybook.js.org/docs/react/writing-docs/introduction)\n- [Testing](https://storybook.js.org/docs/react/writing-tests/introduction)\n- [Storybook in Figma](https://storybook.js.org/docs/react/sharing/design-integrations)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fls1intum%2Fartemis-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fls1intum%2Fartemis-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fls1intum%2Fartemis-ui/lists"}