Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a new @studiocms/ui package #296

Merged
merged 44 commits into from
Oct 1, 2024
Merged

Conversation

louisescher
Copy link
Member

Description

After discussing a potential dashboard redesign in #294, it was (largely) agreed upon that a new dashboard redesign would be desired. This PR aims to establish a UI library containing not only the components needed to build the new dashboard, but also add layouts to help with fonts, colors, sizes & spacings for a uniform design & better DX across the entire StudioCMS ecosystem.

- 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
@louisescher louisescher requested review from a team as code owners September 21, 2024 23:04
Copy link

changeset-bot bot commented Sep 21, 2024

🦋 Changeset detected

Latest commit: bc1f4bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@studiocms/ui Patch
studiocms Patch
@studiocms/assets Patch
@studiocms/auth Patch
@studiocms/betaresources Patch
@studiocms/core Patch
@studiocms/dashboard Patch
@studiocms/frontend Patch
@studiocms/imagehandler Patch
@studiocms/renderers Patch
@studiocms/robotstxt Patch
@studiocms/blog Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@louisescher louisescher marked this pull request as draft September 22, 2024 08:57
louisescher and others added 20 commits September 22, 2024 11:56
- 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
- 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.
- 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
Windows decided now would be a good idea to change 190 files on it's own so yeah
- 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
- 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.
- Added new sidebar & double sidebar components.
- Added a new RootLayout component.
- Added right click (and both mouse buttons) triggers to dropdowns
- Added option to register buttons for opening and closing single sidebar individually
@louisescher louisescher marked this pull request as ready for review September 25, 2024 17:11
@Adammatthiesen Adammatthiesen added enhancement New feature or request feat labels Sep 25, 2024
- Fixed the modal backdrop animation taking a whole second to complete
Copy link
Member

@Adammatthiesen Adammatthiesen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is going to be insane!

Copy link
Member

@dreyfus92 dreyfus92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So far it looks good to me, we can start iterating from this point, I'm just wondering if we should add as part of the head component the astro-capo integration

packages/studiocms_ui/README.md Outdated Show resolved Hide resolved
@louisescher

This comment was marked as resolved.

Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>
@Adammatthiesen Adammatthiesen added this to the Dashboard Redesign milestone Sep 29, 2024
Seriously this is a UI lib why did I think putting this here would benefit the UI lib.
@Adammatthiesen Adammatthiesen self-requested a review September 29, 2024 20:59
@louisescher louisescher requested review from hkbertoson and removed request for hkbertoson September 30, 2024 20:41
Copy link
Contributor

Thank you for submitting your Pull Request, the following links will become available for preview shortly:

Copy link
Contributor

Thank you for submitting your Pull Request, the following links will become available for preview shortly:

Copy link

@ElianCodes ElianCodes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly, this is looking awesome! Great work team! A lot of improvements over the initial version!

You make me proud 💜 !

Copy link
Member

@jdtjenkins jdtjenkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Adammatthiesen Adammatthiesen merged commit 7092e69 into withstudiocms:main Oct 1, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants