@craftcms/cp package

[brianjhanson]

I had originally thought we would develop this in a separate repo but that ends up being a bit of a pain to deal with from an NPM install perspective, so this moves the package into our packages/ folder for the moment. I'm thinking it will stay there at least while it's in development. That way npm install works as you'd expect and you don't have to mess with npm link or anything.

This establishes an @craftcms/cp package that will hold the majority of the javascript and CSS for the CP. The core of that package is a suite of web components largely based on Lion Why Lion? Lion is a component library focused on accessibilty and intended to be extended and themed. It's pretty much the exact use case we're after. Lion lets us focus on the things we care about and avoid getting lost too far in the weeds.

A few components (tooltip, dialog, and drawer to name a few) lean on Web Awesome's components instead as they're more full featured. The bummer there is that they're a bit harder and more awkward to customize. This PR has some basic styling for them, but we'll be revisiting that as we go along.

There are parts of this that are quite messy, but the core of the idea is in place. The full suite of components can be imported into your javascript.

Development

To work on the components, you'll need to start two dev servers. One for the package and another for the CP itself.

# Run the package
npm run dev:cp

# Run for the CP
npm run dev

The development script for the package just runs a vite build in watch mode (no dev server) so you probably will need to refresh like the olden days, but hopefully that can be improved with time.

If you prefer, you can also develop against the storybook

# Start the dev build
npm run dev:cp

# Start storybook
npm run storybook:cp

Usage

import '@craftcms/cp'

You'll also need to import the styles

/* We use some fancy-ness in package.json so this works just fine */
@import '@craftcms/cp'

/* But you can do this if you feel better about it */*
@import '@craftcms/cp.css'

Once those are in place, you can use the components as you see fit.

<craft-button variant="primary" size="medium">  
  Save</craft-button>  
  
<craft-input  
  label="Email Address"  
  type="email"  
  placeholder="you@example.com"
></craft-input>  
  
<craft-card>  
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</craft-card>  

This PR imports the components into the main cp.ts file, so in most cases you shouldn't have to mess with anything and can just use the components.