denali-design/denali

A React-based component library

Denali

An accessible, scalable React component library.

Getting Started

1. Clone the repo
2. Run npm install
3. Run npm run storybook to preview components

Storybook

Components are previewed and documented using Storybook. Running npm run storybook will create a local web server and display the component docs in your browser.

Linting

Run npm run lint to check components during development.

Building for Production

Run npm run build to build a Vite site using these components.

Adobe React Aria

This project uses Adobe React ARIA as a basis for many of its interactive React components. Refer to the Adobe React ARIA docs for additional props or other information that may not be available in Storybook docs.

Versioning

Denali uses Semantic Versioning and Conventional Commits. The current version is v0.1.0-alpha.

denali's Issues

Update default stroke color and check other colors

• Ensures color consistency between Figma designs and TailwindCSS configuration.
• Verifies that all color values in the Figma design files align with those specified in the TailwindCSS configuration.
• This includes checking the stroke colors to ensure any updates are reflected accurately across both platforms.

Develop a GitHub issue templates

Design a template for GitHub issues to standardize and streamline the submission process, ensuring all necessary details are included for efficient resolution.

https://github.com/stevemao/github-issue-templates

Refactors Figma file for standardized prop naming conventions

Updates the naming of properties within the Figma file to adhere to a consistent format: using lowercase letters and the hasValue naming convention. Currently, approximately 80% of this task is complete. However, there remain several components that are not configured correctly and still use the previous naming standards. The objective is to identify and update these components to ensure uniformity across the entire file.

Badge

Current Situation:
In our Figma file, we have a "Badge" component.

Feedback Received:
The "Badge" component closely resembles the "Chip" component.

Proposed Changes:

• Remove Button Icon: Eliminate the button icon from the "Badge" component.
• Remove "New" badge variant
• Create "NotificationCount" Component: Transfer the red badge into a newly created component named "NotificationCount." This component should be able to function independently.

Enhance the Storybook welcome page with visuals

Improve user engagement by adding compelling visuals and graphics to the Storybook welcome page. Also copy could be enhanced.

Update to Storybook 8

Objective:
Update Denali Storybook setup to version 8 to take advantage of the latest enhancements in developer experience, new features, performance improvements, and bug fixes. This upgrade is crucial for maintaining the project's front-end documentation and component exploratory environment up to date, ensuring compatibility with the latest web technologies and tooling.

https://storybook.js.org/docs/migration-guide

Key Reasons for Upgrade:
🩻 A new visual testing workflow via the Visual Tests addon
💨 2-4x faster test builds, 25-50% faster React docgen, and SWC support for Webpack projects
🧩 Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
🎛️ Strengthened control generation in React and Vue projects
⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
🌐 Support for React Server Components (RSC): our experimental solution renders async RSC in the browser and mocks Node code
✨ A refreshed desktop UI & mobile UX
➕ Much, much more

Prepare Figma document to be shared

Summary

• Review all pages within Figma document
• Remove any legacy design
• Make tasks for pages/components/etc that is missing or broken
• This issue should be merged in when document is ready to be published

component/Icon

The color prop in icons is too limited when used in situations where the background color may be too light or two dark. For example, In the Checkbox component, selecting a checkbox renders the background of the checkbox a dark blue color, but the checkmark appears as black:

Possible Solutions

• Add a white and black color option
• Add color props that match all Denali semantic colors
• Add ability to pass a custom color class to the icon

Pulse example app - showcasing Denali

Overview
Pulse serves as a prime example of how the Denali Design System's components can be elegantly woven into the fabric of modern web applications to foster consistency, scalability, and superior user experiences. Through the strategic utilization of elements such as Buttons, Forms, Modals, and Navigation Bars, Pulse showcases the flexibility and visual harmony of the Denali Design System, demonstrating its efficacy in a variety of application contexts.

Tasks
Initialize the Pulse App using the Remix framework, setting the foundation for a modern, efficient development environment.
Develop three illustrative pages, guided by the provided Figma designs, to demonstrate the integration and customization capabilities of new Denali components in real-world scenarios.

Considerations
Given the potential for the Pulse example app's scope to expand, we may contemplate segregating it from the main repository. This approach will ensure modular development and ease of scaling, accommodating the app's growth and evolution seamlessly.

Update icons to latest collection

Refresh and update our project's icons by integrating the latest icon collection. This update aims to enhance the visual appeal, consistency, and usability of our user interface by incorporating modern, high-quality icons.

• Add updated icons to icon directory (some icons need to be replaced others are brand new)
• Add updated icons to storybook icons page

Update all NPM packages to latest versions

Ensure all NPM packages within our project are updated to their latest versions. This task aims to leverage the most recent features, improvements, and security patches provided by our dependencies to enhance the project's functionality, security, and performance.

Storybook Icons page links not working

Upon clicking the icon, users should be redirected to the Icon Component Preview page, where the expected icon is displayed in accordance with the provided query parameter. Currently, the system erroneously defaults to displaying the home icon, despite receiving the correct string within the query parameter.

• Clicking the icon should display the selected icon component preview page