[Infrastructure] File Structure change

[michaelessiet]

This PR contains a huge structure change to the repo. The project now has a packages route which contains the cli and core packages. The core package being the UI components and the CLI package being the CLI that can be used to add components to users projects.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
solid-ui-components	❌ Failed (Inspect)			Sep 28, 2023 0:43am

[sek-consulting]

Thanks for opening this PR. Here are some thoughts that we can discuss on how to move forward with this restructure :)

Icons

I would love to get rid of the icons.tsx file and rather use icons directly in the components. This would remove the necessity to have that file present and you'd only need to add another import in the package.json. I really love the Tabler Icons for this, since I had some issues with Lucide (didn't work with Kobalte the last time I tried).

We could either use solid-icons or @tabler/icons-solidjs directly.

EDIT Looks like @tabler/icons-solidjs causes the same issues as lucide. But solid-icons works fine. So that would be my suggestion for the future.

Structure

I looked at all the other shadcn ui repos (Svelte, SolidJS, React) and I really love the idea of the monorepo using turbo (I'm open for suggestions since I haven't worked with monorepos before). Then we could move all the solid-start stuff for the docs into apps/www and have the packages/cli as it is now. I'd also like to move the components from packages/core to apps/www/registry where we could group them by style (default, new york) if we ever decide to offer those.

But as stated I'm completely open on this one I just thought it would be handy to have a similar structure to all the other projects to make it easier to contribute between each other (bug-fixes etc.)

EDIT The more I think about moving all the components (both UI & Examples) to packages/core the more I like that idea, of seperating the ui elements from the docs page.

CLI

I really love the use of the commander package for the cli commands. It keeps everything clear. I also like that you moved the commands into the index file and just kept the functionality in their own files.

But for the prompts I kinda like the chained version better either with "clack" or "prompts". It also feels similar to the builder style used by "commander".

clack group

import * as p from "@clack/prompts"

const options = await p.group({
  style: () =>
    p.select({
      message: `Which ${highlight("style")} would you like to use?`,
      // @ts-ignore
      options: styles.map((style) => ({
        label: style.label,
        value: style.name,
      })),
    }),
  tailwindBaseColor: () =>
    p.select({
      message: `Which color would you like to use as ${highlight(
        "base color"
      )}?`,
      // @ts-ignore
      options: baseColors.map((color) => ({
        label: color.label,
        value: color.name,
      })),
    }),
});

prompts

import prompts from "prompts"

const options = await prompts([
  {
    type: "select",
    name: "style",
    message: `Which ${highlight("style")} would you like to use?`,
    choices: styles.map((style) => ({
      title: style.label,
      value: style.name,
    })),
  },
  {
    type: "select",
    name: "tailwindBaseColor",
    message: `Which color would you like to use as ${highlight("base color")}?`,
    choices: baseColors.map((color) => ({
      title: color.label,
      value: color.name,
    })),
  },
]);

EDIT I really start to love @clack/prompts with the group method since it gives us the following option:

onCancel: ({ results }) => {
      p.cancel('Operation cancelled.');
      process.exit(0);
    }

Which comes in really handy for the init method. Also @clack has the spinner already included :)

There might be more but this should be more than enough topics to discuss for the beginning :D Thanks again for your effort :)

[sek-consulting]

Validation

I would love to try valibot instead of zod. Mainly because of the smaller bundle size. But either of them is fine.

Package Name

Unfortunately all of those are already in use:

• suc
• solid-ui
• solid-ui-components
• shadcn-solid

But especially since we want to add the cli tool we need something recognizable that isn't already in use.

[michaelessiet]

Structure

I'm also having the same thoughts about turning the project into a monorepo. I have created one or two monorepos myself but I wasn't really sure what the best practices are. So this could be a new opportunity to explore using turbo repo.

Having the same structure as other Shadcn-ui forks is a smart call.

Edit

We can do the turbo repo stuff in this branch or you can create another one I'll clone from.

CLI

I'm thinking of sticking with Clack for the CLI. It's pretty intuitive and is widely used and shipped. I used commander in the index.ts because the documentation on that offered more info on how to use it to read CLI command parameters, flags and other things.

So I think Commander top level to collect and parse parameters and flags, and Clack for the interactive interface is the way to go.

Validation / Naming

The name doesn't really matter right now, we can always add or remove a letter from the names that exist. Concerning Valibot and Zod, I haven't found a need to use them in anything that I've worked on in the past so I'll leave that up to you.

[sek-consulting]

Sounds great. I would say we should do the turborepo stuff in here, since it fits the overall theme auf "structure change".

Once it's set up on this branch I can merge all the new components and docs, so that everything is up to date.

[michaelessiet]

Ok, I'll get the turbo repo setup today. I setup one earlier this week so it shouldn't take long

[sek-consulting]

I started to switch all the icons used in the components to solid-icons/tb. This should make the install process easier, since the components are now standalone and we don't need the icons.tsx anymore.

[michaelessiet]

Ok. I haven't had time recently so I haven't been all that active. Hopefully I'll have some time this weekend.

[sek-consulting]

this is the errormessage from vercel:

[michaelessiet]

Weird. There’s no specific error, I’ll try it locally

On Fri, Sep 22, 2023 at 1:44 PM Stefan E-K @.***> wrote:

this is the errormessage from vercel: [image: grafik] https://user-images.githubusercontent.com/8871906/269940134-4267234f-bf13-4fa5-8fe1-bfed04cbbeff.png

— Reply to this email directly, view it on GitHub https://github.com/sek-consulting/solid-ui-components/pull/10#issuecomment-1731352724, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFRT32EJ226LFTYUUHG5OKTX3WB3VANCNFSM6AAAAAA4B6UNLQ . You are receiving this because you authored the thread.Message ID: @.***>

[michaelessiet]

Oh, I think you'll need to modify the build command now that we're using a monorepo. If you invite me to the vercel project I can set it up

[jguddas]

I would love to get rid of the icons.tsx file and rather use icons directly in the components. This would remove the necessity to have that file present and you'd only need to add another import in the package.json. I really love the Tabler Icons for this, since I had some issues with Lucide (didn't work with Kobalte the last time I tried).

We could either use solid-icons or @tabler/icons-solidjs directly.

EDIT Looks like @tabler/icons-solidjs causes the same issues as lucide. But solid-icons works fine. So that would be my suggestion for the future.

lucide-solid with kobalt works for me https://stackblitz.com/edit/solidjs-templates-zsw3mp?file=src%2FApp.tsx,src%2Findex.css