[Feature Request] @park-ui/cli

[FranciscoKloganB]

User Story

As a @park-ui/cli user I want to be able to declare the import alias for PandaCSS styled-system location independantly of component and lib directories Additionally I want to be able to specify the component and library directories with relative or absolute imports

What is the current behaviour

Currently the CLI expects the components and lib directories to depend on the alias as demonstrated on the code snippets and the image below.

This is what I must do (does not work for my usecase)

{
  "$schema": "https://park-ui.com/registry/latest/schema.json",
  "importAlias": "@styled-system/react-web-ui/*",
  "jsFramework": "react",
  "outputPaths": {
    "componentsDir": "@styled-system/react-web-ui/src/lib/components",
    "libDir": "@styled-system/react-web-ui/lib"
  }
}

What I would like to do

{
  "$schema": "https://park-ui.com/registry/latest/schema.json",
  "importAlias": "@styled-system/react-web-ui/*",
  "jsFramework": "react",
  "outputPaths": {
    "componentsDir": "./src/lib/components",
    "libDir": "./src/lib"
  }
}

Context

I am working in an Nx monorepo with multiple applications and packages.

My package react-web-ui contains components for park-ui, but other applications and libs may also use PandaCSS, each may have their own auto-generated styled-system folder.

Consequently, I have this tsConfig.paths defined. I'd prefer if I did not have to create additional @styled-system/react-web-ui/components/* nor @styled-system/react-web-ui/lib/*

    "paths": {
      "@libs/core/design": ["libs/core/design/src/index.ts"], // 👈 non-buildable lib
      "@libs/testing/react": ["libs/testing/react/src/index.ts"], // 👈 non-buildable lib
      "@styled-system/react-web-ui/*": ["packages/react-web-ui/styled-system/*"], // 👈 a non-standard NX alias I created to use with PandaCSS react-web-ui autogen components
      "@zenif/react-hooks": ["packages/react-hooks/src/index.ts"], // 👈 a buildable lib
      "@zenif/react-web-ui": ["packages/react-web-ui/src/index.ts"], // 👈 a buildable lib that contains park-ui and other panda css components based on park-ui theme
      "@zenif/ts-panda-preset": ["packages/ts-panda-preset/src/index.ts"], // 👈 a buildable lib that contains a preset that extends `park-ui` preset that can be used by many apps and libs.
    }

[cschroeter]

@FranciscoKloganB

Thanks for bringing this up. I'm aware that the current setup doesn't work well with nx monorepos. However, this is a low priority for me compared to other open issues and features I want to build.

As a solid workaround, I recommend fetching the components, placing them somewhere, and then running a post script to move the files to the final destination.

Here's an example:

"scripts": {
    "park-ui": "lefthook install",
    "postpark-ui": "rsync -av --delete ./components/react/src/demos ./website/src/"
}

I know this isn't the solution you're aiming for, but it should work for now. Thanks for your understanding.

Edit:

A list of all components can be fetched from https://park-ui.com/registry/latest/react/components A single component can be fetched from https://park-ui.com/registry/latest/react/components/button.json

In case you want to quickly build sth for your self.

[FranciscoKloganB]

I understand. I was looking at the source code, unfortunatly, I never used effect. I wouldn't know where to start. I guess I will do the old-fashioned copy/pasta for the time being.

[cschroeter]

@FranciscoKloganB

I've updated the CLI so that a tsconfig.json is no longer required to install components. This benefits users with setups like nx workspaces that lack a tsconfig.json file.