Have something to say?

Tell NextUI Pro how they could make the product more useful to you.

Heroui Monorepo Boilerplate

This monorepo template for the Heroui project is designed for modular feature development, streamlined testing, and scalability. It includes pre-configured Git hooks (using Husky), workspaces, and a well-organized project structure that separates component overrides, global utilities, and hooks at the root level. Note: This is a general example. You may choose to implement more optimal or customized solutions depending on your project's needs. Recommended Tools and Workspaces Workspaces: Use Yarn Workspaces (or npm Workspaces) to manage dependencies efficiently across packages. Lerna: Integrate Lerna to orchestrate versioning and execute scripts (like build and test) across all subprojects. Project Structure php heroui-monorepo/ β”œβ”€β”€ library/ # Overrides for components when needed β”œβ”€β”€ utils/ # Global utilities shared across packages β”œβ”€β”€ hooks/ # Global programmatic hooks (e.g., custom React hooks or automation scripts) β”œβ”€β”€ packages/ # Project-specific packages β”‚ β”œβ”€β”€ heroui-core/ # Core functionality of Heroui β”‚ └── heroui-feature-new/ # Example of a new feature package β”œβ”€β”€ .husky/ # Pre-configured Git hooks (e.g., pre-commit) β”œβ”€β”€ package.json # Root package configuration (workspaces, scripts, dependencies) └── README.md # Project title and detailed description Detailed Component Description library/: Contains overrides for components. This centralized folder allows you to modify or enhance standard Heroui components across multiple packages. utils/: Stores global utilities and helper functions (like logging, data formatting, and common computations) that can be reused in any package within the monorepo. hooks/: Houses custom hooks and automation scripts that are used throughout the project. This folder can include both React hooks and other specialized scripts. (Note: Git hooks remain configured in the.husky/ folder.) packages/: Contains individual modules or features of the project. Each package, such as heroui-core (the core functionality) and heroui-feature-new (an example feature), has its own package.json for managing package-specific dependencies and scripts. .husky/: Pre-configured with Git hooks to enforce code quality through tasks such as linting, testing, and formatting checks before commits. Root package.json: Defines the workspace settings, global scripts (like build, test, and prepare for Husky), and dependencies (such as Lerna and Husky), ensuring that the entire project benefits from a unified configuration. README.md: Provides the project title and a detailed description, outlining the purpose, structure, and key features of the monorepo. Benefits and Considerations Modularity and Overrides: The library/ folder allows centralized management and overrides of components, ensuring consistency across various modules. Code Reusability: The utils/ folder promotes reuse of common logic and utilities, reducing duplication and maintaining consistency. Custom Automation: The hooks/ folder enables the implementation of custom automation and programmatic hooks, complementing the Git hooks set up in.husky/. Scalability: The monorepo structure supports seamless addition of new features or packages, keeping the project organized as it grows. Automated Quality Assurance: Pre-configured Git hooks and Lerna integration help automate testing and linting, ensuring high code quality and reducing the likelihood of production issues.

Максим Π“ΡƒΠΌΠ΅Π½ΡŽΠΊ 3 months ago

1

πŸ’‘ Feature Request

Update Figma Design File

Have a few issues with the figma design files. Here is a list of things that would make designers life easier so that they can work any project and correctly handoff what is needed to the dev team: Auto layout - currently nothing is created with this so when you change a position of a component everything breaks States- i know that the states are in the react code, but when the design team needs to relay when and where to show this, we don’t have the different states to represent this to the dev team System colors and fonts - There is no way to easliy change the color of any component or Block or element within this figma file so that it can match a brand or design direction. Again, I understand this all can be done at the code level, but it all starts in designs. Overall what you guys have done is great, but I know everyone would appreciate a little bit more focus on the figma design file to make the designers life and subsequently the devs lives easier Best

alisalek 6 months ago

πŸ“₯ Feedback