Add a new @studiocms/ui package (#296)

* Initial commit for `@studiocms/ui`

* Add new components & UI playground

- Adjust button, divider, input styles
- Added "Center" component, UI playground
- Moved all CSS files into a global CSS file with imports
- Added the font to the playground & UI library

* Add .editorconfig, update biome.json

* Add textboxes & checkboxes, ID gen function & more

- Added the utils folder to the package's exports
- Format the TODO's in the README
- Buttons can now be disabled
- Added a textarea component
- Added a checkbox component
- Added a function to generate random names & IDs if not provided
- Added a default gap size to the row component
- Added an icon component to easily grab icons in a type-safe manner
- Added new components to playground

* Linted files & added completed components to readme

* Add cards, radio inputs, toggles, toasts, warning color

- Added a new Card component.
- Added a radio group component.
- Added a toggle component.
- Added a Toaster component and a toast function to create toasts.
- Added a new "warning" colorway to all components that support colored variants.

* Add modals, new button variant, change CSS vars

- Added a Modal component.
- Added a new, "flat" button variant.
- All color variables now come in hsl format and need to be wrapped in hsl(). This allows for easier opacity management
- Some fixes in regards to textarea sizing on small devices

* Forgot to fucking lint again 💀

Windows decided now would be a good idea to change 190 files on it's own so yeah

* Add a select component, fix various bugs

- Added a new select component.
- Some changes to input & textarea transitions
- Modals now show overflow to allow for selects to be used
- Fixed radio inputs not actually being disabled

* Add dropdown & user components

- Added a dropdown component.
- Added a user component.
- Moved all colorways into a shared type.
- Removed the transparent backgrounds from select elements for better visibility.
- Adjusted the shadows for select dropdowns & toasts.

* Can windows please stop formatting my files in fucked up ways I swear to god

* Add sidebar, double sidebar, root layout component

- Added new sidebar & double sidebar components.
- Added a new RootLayout component.

* Add right click trigger to dropdowns

- Added right click (and both mouse buttons) triggers to dropdowns
- Added option to register buttons for opening and closing single sidebar individually

* Update package.json

* Update DropdownTests.astro

* Lint 💀

* Update & dedupe packages

* Update package.json

* update deployment action

* Update package.json

* Update package.json

* Add changeset

* Update README.md

* Add is:global to styles to eliminate race condition

- Added is:global to all component css style tags because css is being a cascading bitch

* Remove experimental directRenderScript

* Fix dropdown options not filling parent element

* Adjust modal and dropdown paddings

* Changes to folder structure & accessibility fixes

- Moved all components into their own folders and moved all CSS to CSS files. This should help eliminate the race condition pointed out by @hkbertoson in #296 .
- All buttons *should* now follow the web accessibility guidelines for colors and should pass WCAG Level AAA.

* Add pseudo-docs to README, option to disable radios

- Wrote pseudo-docs for the README file of the UI library.
- It's now possible to pass a class to the User component's container.
- Radio options can not be disabled individually.
- Improved the helper for the single sidebar a bit.

* Change icons for dropdowns to slots

* Update README.md

* Update README.md

* Update Modal.css

- Fixed the modal backdrop animation taking a whole second to complete

* Improve double sidebar helper API

* Update packages/studiocms_ui/README.md

Co-authored-by: Adam Matthiesen <[email protected]>

* Fix navbar toggle for single sidebar not showing

* Remove unused BaseHead component

Seriously this is a UI lib why did I think putting this here would benefit the UI lib.

* Revert "Remove unused BaseHead component"

This reverts commit 308d332.

---------

Co-authored-by: Adam Matthiesen <[email protected]>

.changeset/config.json

@@ -13,12 +13,13 @@
       "@studiocms/frontend",
       "@studiocms/imagehandler",
       "@studiocms/renderers",
-      "@studiocms/robotstxt"
+      "@studiocms/robotstxt",
+      "@studiocms/ui"
     ]
   ],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["web", "docs", "node-playground"]
+  "ignore": ["web", "docs", "node-playground", "ui-playground"]
 }

.changeset/pre.json

@@ -13,7 +13,9 @@
     "@studiocms/renderers": "0.1.0-beta.4",
     "@studiocms/robotstxt": "0.1.0-beta.4",
     "@studiocms/blog": "0.1.0-beta.1",
+    "@studiocms/ui": "0.1.0-beta.7",
     "node-playground": "0.0.1",
+    "ui-playground": "0.0.1",
     "docs": "0.0.1",
     "web": "0.0.1"
   },

.changeset/rotten-dancers-trade.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Added a new UI library for the dashboard rework

.moon/workspace.yml

@@ -15,9 +15,11 @@ projects:
   studiocms_imagehandler: 'packages/studiocms_imagehandler'
   studiocms_renderers: 'packages/studiocms_renderers'
   studiocms_robotstxt: 'packages/studiocms_robotstxt'
+  studiocms_ui: 'packages/studiocms_ui'
 
   # Playgrounds
   playground: 'playgrounds/node'
+  ui-playground: 'playgrounds/ui'
   # cloudflare-playground: 'playgrounds/cloudflare' - Removed for now till we start experimenting with Cloudflare again.
 
   # Web Sites & Docs

package.json

@@ -12,6 +12,9 @@
     "playground:login": "pnpm --filter node-playground db:login",
     "playground:link": "pnpm --filter node-playground db:link",
     "playground:push": "pnpm --filter node-playground db:push",
+    "ui:dev": "pnpm --filter ui-playground dev",
+    "ui:build": "pnpm --filter ui-playground build",
+    "ui:preview": "pnpm --filter ui-playground preview",
     "build": "pnpm --filter node-playground build",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",

packages/studiocms/tsconfig.json

@@ -8,13 +8,79 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/auth": ["../studiocms_auth/src/index.ts"],
+      "@studiocms/auth/*": ["../studiocms_auth/src/*"],
+      "@studiocms/betaresources": ["../studiocms_betaresources/src/index.ts"],
+      "@studiocms/betaresources/*": ["../studiocms_betaresources/src/*"],
+      "@studiocms/blog": ["../studiocms_blog/index.ts"],
+      "@studiocms/blog/*": ["../studiocms_blog/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/dashboard": ["../studiocms_dashboard/src/index.ts"],
+      "@studiocms/dashboard/*": ["../studiocms_dashboard/src/*"],
+      "@studiocms/frontend": ["../studiocms_frontend/src/index.ts"],
+      "@studiocms/frontend/*": ["../studiocms_frontend/src/*"],
+      "@studiocms/imagehandler": ["../studiocms_imagehandler/src/index.ts"],
+      "@studiocms/imagehandler/*": ["../studiocms_imagehandler/src/*"],
+      "@studiocms/renderers": ["../studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["../studiocms_renderers/src/*"],
+      "@studiocms/robotstxt": ["../studiocms_robotstxt/src/index.ts"],
+      "@studiocms/robotstxt/*": ["../studiocms_robotstxt/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_auth"
+    },
+    {
+      "path": "../studiocms_betaresources"
+    },
+    {
+      "path": "../studiocms_blog"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_dashboard"
+    },
+    {
+      "path": "../studiocms_frontend"
+    },
+    {
+      "path": "../studiocms_imagehandler"
+    },
+    {
+      "path": "../studiocms_renderers"
+    },
+    {
+      "path": "../studiocms_robotstxt"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_auth/**/*",
+    "../studiocms_betaresources/**/*",
+    "../studiocms_blog/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_dashboard/**/*",
+    "../studiocms_frontend/**/*",
+    "../studiocms_imagehandler/**/*",
+    "../studiocms_renderers/**/*",
+    "../studiocms_robotstxt/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_assets/tsconfig.json

@@ -16,5 +16,11 @@
       "path": "../../playgrounds/node"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_auth/tsconfig.json

@@ -2,19 +2,43 @@
   "extends": "astro/tsconfigs/strictest",
   "files": [],
   "compilerOptions": {
-    "outDir": "../../.moon/cache/types/packages/studiocms_renderers",
+    "outDir": "../../.moon/cache/types/packages/studiocms_auth",
     "composite": true,
     "noEmit": false,
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/dashboard": ["../studiocms_dashboard/src/index.ts"],
+      "@studiocms/dashboard/*": ["../studiocms_dashboard/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_dashboard"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_dashboard/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_betaresources/tsconfig.json

@@ -8,13 +8,31 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_core"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_core/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_blog/tsconfig.json

@@ -6,7 +6,27 @@
     "composite": true,
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "allowImportingTsExtensions": false
+    "allowImportingTsExtensions": false,
+    "paths": {
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/frontend": ["../studiocms_frontend/src/index.ts"],
+      "@studiocms/frontend/*": ["../studiocms_frontend/src/*"]
+    }
   },
-  "include": ["../../playgrounds/node/.astro/**/*", "./**/*", "./**/*.json"]
+  "include": [
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_frontend/**/*",
+    "./**/*",
+    "./**/*.json"
+  ],
+  "references": [
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_frontend"
+    }
+  ]
 }

packages/studiocms_core/tsconfig.json

@@ -8,13 +8,25 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/robotstxt": ["../studiocms_robotstxt/src/index.ts"],
+      "@studiocms/robotstxt/*": ["../studiocms_robotstxt/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_robotstxt"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_robotstxt/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_dashboard/tsconfig.json

@@ -8,13 +8,43 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/assets": ["../studiocms_assets/src/index.ts"],
+      "@studiocms/assets/*": ["../studiocms_assets/src/*"],
+      "@studiocms/betaresources": ["../studiocms_betaresources/src/index.ts"],
+      "@studiocms/betaresources/*": ["../studiocms_betaresources/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/renderers": ["../studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["../studiocms_renderers/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_assets"
+    },
+    {
+      "path": "../studiocms_betaresources"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_renderers"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_assets/**/*",
+    "../studiocms_betaresources/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_renderers/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_frontend/tsconfig.json

@@ -8,13 +8,31 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"],
+      "@studiocms/renderers": ["../studiocms_renderers/src/index.ts"],
+      "@studiocms/renderers/*": ["../studiocms_renderers/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_core"
+    },
+    {
+      "path": "../studiocms_renderers"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "../studiocms_renderers/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }

packages/studiocms_imagehandler/tsconfig.json

@@ -8,13 +8,25 @@
     "allowImportingTsExtensions": false,
     "emitDeclarationOnly": false,
     "paths": {
-      "node-playground/*": ["../../playgrounds/node/src/*"]
+      "node-playground/*": ["../../playgrounds/node/src/*"],
+      "@studiocms/core": ["../studiocms_core/src/index.ts"],
+      "@studiocms/core/*": ["../studiocms_core/src/*"]
     }
   },
   "references": [
     {
       "path": "../../playgrounds/node"
+    },
+    {
+      "path": "../studiocms_core"
     }
   ],
-  "include": ["./package.json", "../../playgrounds/node/.astro/**/*", "./**/*", "./src/**/*.json"]
+  "include": [
+    "./package.json",
+    "../../playgrounds/node/**/*",
+    "../../playgrounds/node/.astro/**/*",
+    "../studiocms_core/**/*",
+    "./**/*",
+    "./src/**/*.json"
+  ]
 }