ui icon indicating copy to clipboard operation
ui copied to clipboard

Nx plugin

Open brunos3d opened this issue 1 year ago • 3 comments

Description:

Request the development of an Nx plugin specifically designed for this library. The Nx plugin would significantly enhance the development experience by providing seamless integration between the shadcn/ui components and the Nx workspace.

Problem:

Currently, I created a scalable structure for a monorepo with some microfronend apps, and I manage to reuse shadcn/ui components between the apps with a Nx Library, but the problem is that I have to fix paths and organize components after running the npx shadcn-ui add ... command, also was necessary a manually integration.

Expected Solution:

Have some Nx Plugin which could be used by Nx Core CLI to dynamically setup shadcn/ui on existing monorepo, having compatibility with Nx React/Next.js Tailwind projects, also being able to choose between local (specific app) components, or using a specific Nx library to further apps reuse.

brunos3d avatar Jun 04 '23 21:06 brunos3d

Is the project publicly available?

Raduc4 avatar Jun 05 '23 10:06 Raduc4

Nx? Yes https://nx.dev/

It is probably one, if not the best, monorepo tools available. It began with Angular development, so there are aspects of that DNA in there. It also means it didn't gain awareness in the React world until a bit later. It also isn't backed by Vercel and while I am not a huge fan of all Vercel - they are great at marketing lol.

It would be very cool to have a NxPlugin. This is the guide to creating plugins: https://nx.dev/plugins/intro/getting-started

My teams use Nx a lot for our client deliveries. It is just easier to deliver one repo to a client than a handful. Nx seems complicated at first because it offers a packaged based approach (like Lerna, Turbo, etc) or an integrated approach (which is a bit more auto-magic). It isn't mentioned in the docs, but they both work together too, so you can just roll whatever way you want and swap as you need.

Plugins have generators that use a file template method. HOWEVER, my teams often just use string literals and just skip the file templates altogether. Handlbars is fine and all, but sometimes it is just too much. Basically, you just create/edit files in a virtual (in memory) filesystem to handle the dry runs. Then when you apply it executes in your project.

Sharing all this because this project has a CLI. I'd take the approach of making a plugin that just runs the CLI, but instead of having the CLI modify/write to the filesystem, have it write to the Nx virtual tree. It's close to the same thing. Then the plugin will require almost no maintenance other than keeping the options in sync with the current CLI functions.

Brian-McBride avatar Jun 06 '23 20:06 Brian-McBride

@Brian-McBride Here are some configs of the project, and how I'm actually using it with shadcn-ui cli

https://github.com/shadcn/ui/issues/718#issuecomment-1608502087

brunos3d avatar Jun 27 '23 00:06 brunos3d

I created a GitHub repository with shadcn UI configuration from Nx, you can check it on my profile. And I made a YouTube tutorial on how to do it (It's my first video so it's not that good but I decided to give it a try 😅).

YouTube: Setup tutorial GitHub repo: Repository Boilerplate

anteqkois avatar Aug 03 '23 19:08 anteqkois

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

shadcn avatar Jun 29 '24 23:06 shadcn