search

dan5py / turborepo-shadcn-ui

Turborepo starter with shadcn/ui pre-configured.
MIT License
466 stars 89 forks source link

feat: Update Import Path and Component Patterns in UI Package #35

Closed mrbadri closed 5 days ago

mrbadri commented 1 month ago

Overview

This pull request updates the export paths in the @repo/ui package and refines the import statement of the Button component in a consumer module. These changes aim to streamline component usage and ensure consistency in the way we handle UI components in the turborepo.

Changes

1.Export Path Update in package.json: Modified the component export path to handle UI components more efficiently. The updated path is: package.json:

"./components/*": [
  "./src/components/ui/*.tsx",
  "./src/components/*.ts"
]

2.Import Statement Update: Changed the import statement from:

import { Button } from "@repo/ui/components/button";

to:

import { Button } from "@repo/ui/components/ui/button";

This alteration ensures that the import statement aligns with the updated export path, facilitating easier and more organized component imports.

Motivation

The primary motivation behind these changes is to enhance our development efficiency and component manageability across the turborepo. By organizing our component exports and imports more logically, developers can more intuitively interact with the UI package, making the development process faster and reducing errors.

Impact

These updates require developers to adjust import statements according to the new paths when utilizing the updated @repo/ui package. It is recommended to review the impacted components and conduct testing to ensure that all components function as expected after the path adjustments.

dan5py commented 1 month ago

Hi @mrbadri, thank you for your contribution. The current structure of the ui package has a ui folder where only base components (from shadcn or also custom ones) are stored. The root folder that you changed to be the default one is meant for custom and complex components like Sidebar, Headers, Custom cards, etc.

In this way you have a separation between the two and I find it to be both more maintainable and readable in terms of folder structure.

Btw you also need to add an alias for the shadcn ui folder for the CLI, like this:

tsconfig.json

"aliases": {
"ui": "@repo/ui/components",
"utils": "@repo/ui/lib/utils"
}

Doing so would force the CLI to create the components in that folder instead of creating another ui folder in it to store them.