Skip to content

Commit

Permalink
fix: add project info
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bagusajieiswara
Bagusajieiswara committed Nov 27, 2024
1 parent 317e880 commit d9c0618
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 49 deletions.
42 changes: 42 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
## Description

Please include a summary of the changes you have made, including:

- What is the purpose of the PR?
- Why is this change necessary?
- How does this change improve the project?

## Related Issue(s)

- Link to the issue this PR addresses (if applicable), e.g., `Fixes #123` or `Closes #456`.
- If this is a feature request or enhancement, mention the related feature.

## Changes

- List the major changes made in this pull request (e.g., added new feature, fixed bug, updated documentation).
- Include any details on functionality, configuration, or behavior that needs to be highlighted.

## How to Test

Please describe how we can verify that your changes are working as expected. This could include:

- Steps to reproduce the issue and verify the fix
- Instructions on how to test the new feature
- Any environment or configuration requirements

## Screenshots (if applicable)

If your change includes UI modifications, provide screenshots to showcase the change.

## Checklist

- [ ] I have read the [contributing guidelines](CONTRIBUTING.md).
- [ ] I have followed the code style and conventions of the project.
- [ ] My changes have been tested, and unit tests (if applicable) have been added/updated.
- [ ] I have updated the documentation as needed.
- [ ] I have tested my changes on multiple browsers/devices (if applicable).
- [ ] This PR does not include any breaking changes (if it does, please list them).

## Additional Notes

Provide any additional information or context that reviewers should know about the pull request, such as performance considerations, compatibility, or design decisions.
77 changes: 77 additions & 0 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# Contributing to ngx-primer

Thank you for your interest in contributing to `ngx-primer`! Whether you're reporting a bug, suggesting an enhancement, or submitting a pull request, we appreciate your contributions.

## How to Contribute

### Reporting Bugs

If you encounter a bug, please search the [issue tracker](https://github.com/your-repo/ngx-primer/issues) to see if it's already been reported. If not, open a new issue with the following information:

- A clear description of the bug
- Steps to reproduce the issue
- Expected and actual behavior
- The version of `ngx-primer` you are using
- Any relevant error messages or stack traces

### Suggesting Enhancements

We are open to suggestions for new features or improvements! If you have an idea, please check the issue tracker first to see if it’s already been discussed. If not, feel free to create a new issue with:

- A clear description of the enhancement
- The use case for the enhancement
- Any potential challenges or implementation ideas you have in mind

### Submitting a Pull Request (PR)

We welcome pull requests for new features, bug fixes, and documentation improvements. To submit a PR, please follow these steps:

1. **Fork the repository**: Click the "Fork" button at the top of the repository to create a copy of the project under your own GitHub account.
2. **Clone your fork**: Clone your fork to your local machine.
```bash
git clone https://github.com/your-username/ngx-primer.git
```
3. **Create a new branch**: Create a new branch for your changes.
```bash
git checkout -b feature/your-feature-name
```
4. **Make your changes**: Implement your feature or bug fix. Ensure that your code follows the project's coding style and conventions.
5. **Run tests**: Run the tests to make sure everything works as expected.
```bash
nx test ngx-primer
```
6. **Commit your changes**: Commit your changes with a clear message describing what you've done.
```bash
git commit -m "Add new feature or fix bug"
```
7. **Push your changes**: Push your changes to your forked repository.
```bash
git push origin feature/your-feature-name
```
8. **Create a pull request**: Open a pull request against the main repository's `main` branch. Provide a clear description of your changes, including any relevant context or linked issues.
### Code Style and Guidelines
- Follow the existing code style of the project.
- Use descriptive commit messages.
- Add unit tests for new features or bug fixes whenever possible.
- If your changes are related to a specific component, make sure to update the documentation accordingly.
### Code of Conduct
By participating in this project, you agree to follow our [Code of Conduct](CODE_OF_CONDUCT.md). We want to maintain a friendly and inclusive environment for all contributors, so please be respectful and considerate.
### Communication
If you have any questions or need clarification on something, feel free to ask for help. You can reach us through the following channels:
- GitHub Issues: [Submit an issue](https://github.com/your-repo/ngx-primer/issues)
- Discussions: [Join the discussion](https://github.com/your-repo/ngx-primer/discussions)
## Licensing
By contributing to this project, you agree that your contributions will be licensed under the [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0).
---
Thank you for contributing to `ngx-primer`! We look forward to your contributions and working together to improve the project.
116 changes: 67 additions & 49 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,105 @@
# NgxPrimer
# ngx-primer

<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
`ngx-primer` is an Angular-based implementation of the [Primer Design System](https://primer.style/), which is the design system used by GitHub. The project aims to bring the clean, accessible, and customizable components from Primer to the Angular ecosystem, providing developers with a powerful set of tools for building modern and user-friendly interfaces.

✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨.
This library builds on existing implementations of Primer, such as the React and other versions, but focuses on leveraging the latest updates in Angular to create a robust and scalable solution.

[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
## Inspiration

## Finish your remote caching setup
This project is inspired by the [Primer Design System](https://primer.style/) and aims to bring its flexible, accessible, and reusable components to Angular applications. Primer was originally developed by GitHub to standardize the design language and improve user experience across their products. It is now an open-source project, and its components have been implemented in various frameworks, including React, Vue, and now Angular.

[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/qdN5d8UjD0)
While the design system is available for multiple frameworks, this Angular implementation takes advantage of the latest features in Angular, ensuring high performance and reactivity, especially with Angular's new signal-based API and other modern updates. With Angular being increasingly powerful, it was the ideal choice for this implementation.

## Features

## Run tasks
- **Accessible Components**: All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience.
- **Customizable**: Tailor the components' appearance and behavior using Angular's flexible input properties and directives.
- **Responsive**: The library is designed to be responsive and work seamlessly across all device types and screen sizes.
- **Built-in ID Generator**: Automatically generates unique IDs for components, ensuring they work well in dynamic contexts.
- **Themes Support**: Easily switch between light and dark modes, as well as apply custom themes to your components.
- **Angular Signal API**: Leverage the latest Angular features, such as signals, for highly reactive, optimized performance.

To run the dev server for your app, use:
## Installation

```sh
npx nx serve documentations
To install `ngx-primer` into your Angular project, run the following command:

```bash
npm install ngx-primer
```

To create a production bundle:
## Usage

```sh
npx nx build documentations
```
To use the components in your Angular application, import the necessary modules and include the components in your templates.

1. Import `NgxPrimerAccordionModule` (or any other component module) into your Angular module:

To see all available targets to run for a project, run:
```typescript
import { NgxPrimerAccordionModule } from 'ngx-primer';

```sh
npx nx show project documentations
@NgModule({
imports: [NgxPrimerAccordionModule],
...
})
export class AppModule {}
```

These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
2. Use the component in your templates:

[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
```html
<ngx-primer-accordion-root [type]="'Single'" [collapsible]="true">
<ngx-primer-accordion-item [value]="'item1'">Item 1 Content</ngx-primer-accordion-item>
<ngx-primer-accordion-item [value]="'item2'">Item 2 Content</ngx-primer-accordion-item>
</ngx-primer-accordion-root>
```

## Add new projects
## Available Components

While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
The `ngx-primer` library includes a variety of components inspired by the Primer Design System, including:

Use the plugin's generator to create new projects.
- Accordion
- Buttons
- Cards
- Forms
- Icons
- Layouts
- Navigation
- Modals
- And more...

To generate a new application, use:
Each component is designed to be flexible and easily customizable to fit your application's needs.

```sh
npx nx g @nx/angular:app demo
```
## Running Unit Tests

To generate a new library, use:
To run the unit tests for the project, use the following command:

```sh
npx nx g @nx/angular:lib mylib
```bash
nx test ngx-primer
```

You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
This will run the tests using the Jest framework.

[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
## Contributing

We welcome contributions to `ngx-primer`! If you want to add a new component, improve an existing one, or fix a bug, feel free to submit a pull request. Please follow the [contribution guidelines](CONTRIBUTING.md) for more details.

[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
## Credits

## Install Nx Console
This project is inspired by the [Primer Design System](https://primer.style/), created and maintained by GitHub. We would like to credit the GitHub team and all the contributors to the Primer Design System for their work on this incredible resource.

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
- [Primer Design System](https://primer.style/)
- [Primer GitHub Repository](https://github.com/primer)

[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

## Useful links

Special Thanks To (credit for inspirations) :
And never forgetting special Thanks To (credit for project inspirations) :
- [Angular Primitives](https://angularprimitives.com/getting-started/introduction)
- [Angular CDK](https://material.angular.io/cdk)
- [Radix UI](https://radix-ui.com/)

Learn more:
## License

`ngx-primer` is licensed under the [Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0).

See the [LICENSE](LICENSE) file for more information.

- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects)
- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
## Changelog

And join the Nx community:
- [Discord](https://go.nx.dev/community)
- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
For details on what's changed in each release, check out the [Changelog](CHANGELOG.md).

0 comments on commit d9c0618

Please sign in to comment.