diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..50867b7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,27 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '[BUG] ' +labels: bug +assignees: '' +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: + +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..2f44ce3 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,19 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '[FEATURE] ' +labels: enhancement +assignees: '' +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..4df2211 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,52 @@ +# Contributing to ngx-dev-toolbar + +We love your input! We want to make contributing to ngx-dev-toolbar as easy and transparent as possible, whether it's: + +- Reporting a bug +- Discussing the current state of the code +- Submitting a fix +- Proposing new features +- Becoming a maintainer + +## We Develop with Github + +We use GitHub to host code, to track issues and feature requests, as well as accept pull requests. + +## Pull Requests Process + +1. Fork the repo and create your branch from `main` +2. If you've added code that should be tested, add tests +3. Ensure the test suite passes +4. Update the documentation +5. Issue that pull request! + +## Any contributions you make will be under the MIT Software License + +When you submit code changes, your submissions are understood to be under the same [MIT License](LICENSE) that covers the project. + +## Report bugs using Github's [issue tracker](https://github.com/yourusername/ngx-dev-toolbar/issues) + +We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/yourusername/ngx-dev-toolbar/issues/new/choose). + +## Write bug reports with detail, background, and sample code + +**Great Bug Reports** tend to have: + +- A quick summary and/or background +- Steps to reproduce + - Be specific! + - Give sample code if you can +- What you expected would happen +- What actually happens +- Notes (possibly including why you think this might be happening, or stuff you tried that didn't work) + +## Development Process + +1. Clone the repository +2. Install dependencies: `npm install` +3. Run tests: `npm test` +4. Start development server: `npm start` + +## License + +By contributing, you agree that your contributions will be licensed under its MIT License. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0dc9d5a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 ngx-dev-toolbar + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 55f9487..409a53e 100644 --- a/README.md +++ b/README.md @@ -1,81 +1,256 @@ # Angular Dev Toolbar - +
-✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨. +[![npm version](https://badge.fury.io/js/ngx-dev-toolbar.svg)](https://www.npmjs.com/package/ngx-dev-toolbar) +[![Downloads](https://img.shields.io/npm/dm/ngx-dev-toolbar.svg)](https://www.npmjs.com/package/ngx-dev-toolbar) +[![License](https://img.shields.io/npm/l/ngx-dev-toolbar.svg)](https://github.com/yourusername/ngx-dev-toolbar/blob/main/LICENSE) +[![Angular](https://img.shields.io/badge/Angular-17%2B-red)](https://angular.io/) -[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed! +

A powerful development toolbar for Angular applications that helps developers to interact with the application in a more efficient way.

-## Finish your CI setup +

+ Dev Toolbar Demo +

-[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/2Z9QWp0cKK) +
-## Run tasks +## ✨ Why ngx-dev-toolbar? -To run the dev server for your app, use: +
+ + + + + + + + + + + + + + + + + +
🚥Test feature flags without backend changes
🌍Switch languages instantly
🎨Toggle themes on the fly
👤Manage user sessions effortlessly
🔄Mock network requests in real-time
+
-```sh -npx nx serve ngx-dev-toolbar-demo -``` +No more context switching or backend dependencies - everything you need is right in your browser! + +## 🎯 Features + +
+ +### 📦 Available Tools + +- Feature Flags +- Language Switcher +- Themes _(Coming Soon)_ +- User Session _(Coming Soon)_ +- Network Requests Mocker _(Coming Soon)_ + +### 🛠️ Extensible + +- Create custom tools +- Add your own functionality +- Flexible configuration + +### 🔒 Production Ready + +- Hidden by default in production +- Zero production impact +- Secure implementation -To create a production bundle: +### 💾 Persistent State -```sh -npx nx build ngx-dev-toolbar-demo +- Settings persist across reloads +- Import/Export configuration _(Coming Soon)_ + +
+ +## 📱 Quick Start + +
+1. Installation + +```bash +npm install ngx-dev-toolbar --save-dev ``` -To see all available targets to run for a project, run: +
+ +
+2. Import Component -```sh -npx nx show project ngx-dev-toolbar-demo +```typescript +import { DevToolbarComponent } from 'ngx-dev-toolbar'; + +@Component({ + imports: [DevToolbarComponent], + template: ` `, +}) +export class AppComponent {} ``` -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. +
+ +## Available Tools + +The tools come with a default implementation, but you can create your own tools and add them to the toolbar. + +They have a service that you can use to interact with them. -[More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +### Feature Flags -## Add new projects +#### Configuration -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. +In order to use the feature flags tool, you need to import the `DevToolbarFeatureFlagService` and inject it in your component. -Use the plugin's generator to create new projects. +Then you just need to call the `setAvailableOptions` method with the available feature flags that can come from your backend or a third party service. -To generate a new application, use: +```typescript +import { DevToolbarFeatureFlagService } from 'ngx-dev-toolbar'; +import { inject } from '@angular/core'; -```sh -npx nx g @nx/angular:app demo +@Component({ + // ... component decorator +}) +export class AppComponent { + private featureFlagsService = inject(DevToolbarFeatureFlagService); + + constructor() { + // Set available feature flags + this.featureFlagsService.setAvailableOptions([ + { id: 'darkMode', name: 'Dark Mode' }, + { id: 'betaFeatures', name: 'Beta Features' }, + { id: 'experimentalUI', name: 'Experimental UI' }, + ]); + } +} ``` -To generate a new library, use: +Once it is added you should see them in the Feature Flags tool in the Angular Dev Toolbar. + +![Feature Flags Tool](./docs/images/feature-flags-tool.png) + +#### Usage -```sh -npx nx g @nx/angular:lib mylib +```typescript +@Component({ + // ... component decorator +}) +export class FeatureComponent { + private featureFlagsService = inject(DevToolbarFeatureFlagService); + + ngOnInit() { + this.featureFlagsService.getForcedValues().subscribe((forcedFlags) => { + const isDarkMode = forcedFlags.some((flag) => flag.id === 'darkMode'); + // Apply dark mode logic + }); + } +} ``` -You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list ` 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. +#### Dev Toolbar Interface + +[Screenshot placeholder showing the feature flags interface in the dev toolbar] + +### Language Switcher + +#### Configuration + +```typescript +import { DevToolbarLanguageService } from 'ngx-dev-toolbar'; +import { inject } from '@angular/core'; + +@Component({ + // ... component decorator +}) +export class AppComponent { + private languageService = inject(DevToolbarLanguageService); + + constructor() { + // Set available languages + this.languageService.setAvailableOptions([ + { code: 'en', name: 'English' }, + { code: 'es', name: 'Spanish' }, + { code: 'fr', name: 'French' }, + ]); + } +} +``` + +#### Usage + +```typescript +@Component({ + // ... component decorator +}) +export class TranslatedComponent { + private languageService = inject(DevToolbarLanguageService); + + ngOnInit() { + this.languageService.getForcedValues().subscribe(([selectedLang]) => { + // Update component's language + this.currentLanguage = selectedLang.code; + this.loadTranslations(); + }); + } +} +``` + +## Contributing + +We welcome contributions! Please see our [contributing guidelines](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/CONTRIBUTING.md) for details. + +## License + +This project is licensed under the MIT License - see the [LICENSE](https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/LICENSE) file for details. -[Learn more about Nx plugins »](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry »](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +## Support -[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) +
-## Install Nx Console + + + + + + +
+ + Documentation +
+ Documentation + + 		+ + Issues +
+ Issue Tracker + + 		+ + Discussions +
+ Discussions + +
-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. +
-[Install Nx Console »](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +## 🌟 Stay Connected -## Useful links +
-Learn more: +[![Twitter Follow](https://img.shields.io/twitter/follow/yourusername?style=social)](https://twitter.com/yourusername) +[![GitHub Stars](https://img.shields.io/github/stars/yourusername/ngx-dev-toolbar?style=social)](https://github.com/yourusername/ngx-dev-toolbar) -- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&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) +
-And join the Nx community: +

Built with ❤️ using Nx

-- [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) +