FEAT: development helper in env hint

HugoPerard commented 1 month ago

Describe your changes

I create this PR as an idea, a proposal, it's a first draft to have some feedbacks.

The idea is to have a quick way to switch between light/dark modes during development, to avoid the pain to navigate to account page and then come back to our current page to try things on different theme mode.

This is the initial need, but maybe others use cases cause the same pain.

So I want to have a quick access to DarkModeSwitcher wherever we are in the app, and one stuff that is always display on development environnement is the EnvHint, that why I decide to improve it and transform it on a "development helper" opening button.

Screenshots

Documentation

Checklist

[ ] I performed a self review of my code
[ ] I ensured that everything is written in English
[ ] I tested the feature or fix on my local environment
[ ] I ran the pnpm storybook command and everything is working
[ ] If applicable, I updated the translations for english and french files
(If you cannot update the french language, just let us know in the PR description)
[ ] If applicable, I updated the README.md
[ ] If applicable, I created a PR or an issue on the documentation repository
[ ] If applicable, I’m sure that my feature or my component is mobile first and available correctly on desktop

Summary by CodeRabbit

New Features
- Introduced the DevToolsDrawer for managing theme and language preferences in a responsive drawer.
- Implemented AppHint to display environmental hints at the top of the application.
- Added conditional rendering for developer tools based on the new environment variable.
Bug Fixes
- Removed the deprecated EnvHint component, streamlining the hint display logic.
Chores
- Added a new environment variable, NEXT_PUBLIC_DEV_TOOLS_ENABLED, for controlling the availability of development tools.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
start-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 3:41pm

coderabbitai[bot] commented 1 month ago

Walkthrough

The changes involve modifications to the Document component in src/app/Document.tsx, where EnvHint is replaced by AppHint, and conditional rendering is added for the ReactQueryDevtools component based on the NEXT_PUBLIC_DEV_TOOLS_ENABLED environment variable. The layout.tsx file updates the import for getEnvHintTitlePrefix to source from AppHint. The new environment variable NEXT_PUBLIC_DEV_TOOLS_ENABLED is introduced in src/env.mjs. Additionally, the AppHint and DevToolsDrawer components are added to manage environmental hints and development settings, while the EnvHint file is removed.

Changes

File	Change Summary
`src/app/Document.tsx`	Replaced `EnvHint` with `AppHint` and added conditional rendering for `ReactQueryDevtools`.
`src/app/layout.tsx`	Updated import for `getEnvHintTitlePrefix` to source from `AppHint`.
`src/env.mjs`	Introduced new environment variable `NEXT_PUBLIC_DEV_TOOLS_ENABLED` for managing development tools visibility.
`src/features/devtools/AppHint.tsx`	Added new components for displaying environmental hints and developer tools functionality.
`src/features/devtools/DevToolsDrawer.tsx`	Introduced `DevToolsDrawer` component for managing development-related settings in a drawer.
`src/features/devtools/EnvHint.tsx`	Removed the entire file, including the `EnvHint` component and its associated function.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Document
    participant AppHint
    participant DevToolsDrawer

    User->>Document: Load Document component
    Document->>AppHint: Render AppHint based on environment variables
    User->>AppHint: Check for development tools
    AppHint->>Document: Conditionally render ReactQueryDevtools
    User->>DevToolsDrawer: Open DevToolsDrawer for settings
    DevToolsDrawer->>User: Display development settings options

Possibly related PRs

#534: The changes in this PR do not relate to the DarkModeSwitch component or its functionality, as it focuses solely on updating TypeScript ESLint configurations without any direct connection to the UI components or their implementations.

Suggested reviewers

ivan-dalmet

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

sonarcloud[bot] commented 1 month ago

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

HugoPerard commented 1 month ago

After some feedbacks, I come with a new version of the development helper :

A specific label in AppHint
A new env variable to manage display of devtools
A drawer with content instead of a popover
Custom components for the development drawer instead of factorisation with app components
Integration of language selection on the drawer

https://github.com/user-attachments/assets/68c0c6bd-f872-40d4-8164-fbbc5725e9d6

BearStudio / start-ui-web