From 0c06223570ff0e399feef76a73417d1ebe62ee0a Mon Sep 17 00:00:00 2001 From: Louis Escher Date: Wed, 25 Dec 2024 14:42:20 +0100 Subject: [PATCH 1/5] Initial stuff --- .vscode/settings.json | 4 + biome.json | 3 + docs/astro.config.mts | 4 - docs/src/content/docs/docs/changelog.md | 106 ++-- .../docs/docs/components/breadcrumbs.mdx | 79 +++ .../src/content/docs/docs/components/card.mdx | 4 - .../content/docs/docs/components/footer.mdx | 4 - .../content/docs/docs/components/group.mdx | 40 ++ .../src/content/docs/docs/components/tabs.mdx | 4 - .../docs/upgrade-guides/0.1.0-to-0.3.0.mdx | 4 - .../docs/upgrade-guides/0.3.0-to-0.4.0.mdx | 15 + package.json | 5 +- packages/studiocms_ui/src/components.ts | 2 + .../src/components/Badge/Badge.astro | 19 + .../src/components/Badge/badge.css | 0 .../src/components/BaseHead.astro | 22 - .../components/Breadcrumbs/Breadcrumbs.astro | 27 + .../components/Breadcrumbs/breadcrumbs.css | 18 + .../src/components/Button/Button.astro | 64 +++ .../{Button.astro => Button/button.css} | 65 --- .../src/components/{ => Card}/Card.astro | 49 +- .../studiocms_ui/src/components/Card/card.css | 46 ++ .../studiocms_ui/src/components/Center.astro | 16 - .../src/components/Center/Center.astro | 7 + .../src/components/Center/center.css | 10 + .../src/components/Checkbox.astro | 250 --------- .../src/components/Checkbox/Checkbox.astro | 93 ++++ .../src/components/Checkbox/checkbox.css | 124 +++++ .../src/components/Checkbox/checkbox.ts | 30 ++ .../components/{ => Divider}/Divider.astro | 27 +- .../src/components/Divider/divider.css | 23 + .../src/components/Dropdown/Dropdown.astro | 202 +------- .../src/components/Dropdown/dropdown.css | 198 +++++++ .../studiocms_ui/src/components/Footer.astro | 137 ----- .../src/components/Footer/Footer.astro | 58 +++ .../src/components/Footer/footer.css | 78 +++ .../src/components/Group/Group.astro | 7 + .../src/components/Group/group.css | 21 + .../src/components/{ => Input}/Input.astro | 50 +- .../src/components/Input/input.css | 45 ++ .../src/components/Modal/Modal.astro | 122 +---- .../src/components/Modal/modal.css | 117 +++++ .../src/components/RadioGroup.astro | 299 ----------- .../components/RadioGroup/RadioGroup.astro | 122 +++++ .../src/components/RadioGroup/radiogroup.css | 105 ++++ .../src/components/RadioGroup/radiogroup.ts | 70 +++ .../src/components/{ => Row}/Row.astro | 25 +- .../studiocms_ui/src/components/Row/row.css | 22 + .../src/components/SearchSelect.astro | 486 ------------------ .../SearchSelect/SearchSelect.astro | 133 +++++ .../components/SearchSelect/searchselect.css | 108 ++++ .../components/SearchSelect/searchselect.ts | 252 +++++++++ .../studiocms_ui/src/components/Select.astro | 467 ----------------- .../src/components/Select/Select.astro | 145 ++++++ .../src/components/Select/select.css | 123 +++++ .../src/components/Select/select.ts | 194 +++++++ .../src/components/Tabs/Tabs.astro | 250 +-------- .../studiocms_ui/src/components/Tabs/tabs.css | 136 +++++ .../studiocms_ui/src/components/Tabs/tabs.ts | 107 ++++ .../components/{ => Textarea}/Textarea.astro | 63 +-- .../src/components/Textarea/textarea.css | 58 +++ .../src/components/ThemeToggle.astro | 46 -- .../components/ThemeToggle/ThemeToggle.astro | 19 + .../components/ThemeToggle/themetoggle.css | 18 + .../src/components/ThemeToggle/themetoggle.ts | 6 + .../src/components/Toast/Toaster.astro | 409 +-------------- .../src/components/Toast/toaster.css | 187 +++++++ .../src/components/Toast/toaster.ts | 214 ++++++++ .../studiocms_ui/src/components/Toggle.astro | 214 -------- .../src/components/Toggle/Toggle.astro | 82 +++ .../src/components/Toggle/toggle.css | 100 ++++ .../src/components/Toggle/toggle.ts | 30 ++ .../src/components/{ => User}/User.astro | 45 +- .../studiocms_ui/src/components/User/user.css | 40 ++ packages/studiocms_ui/src/components/index.ts | 33 +- packages/studiocms_ui/src/integration.ts | 20 +- .../studiocms_ui/src/layouts/RootLayout.astro | 33 -- packages/studiocms_ui/src/layouts/index.ts | 2 - playground/.gitignore | 26 - playground/.vscode/extensions.json | 4 - playground/.vscode/launch.json | 11 - playground/README.md | 16 - playground/astro.config.mts | 22 - playground/package.json | 24 - playground/public/favicon.svg | 41 -- playground/public/studiocms.svg | 5 - playground/sentry.client.config.js | 12 - playground/src/components/ButtonTests.astro | 225 -------- playground/src/components/CardTests.astro | 29 -- playground/src/components/CheckboxTests.astro | 77 --- playground/src/components/DropdownTests.astro | 116 ----- playground/src/components/ModalTests.astro | 70 --- .../src/components/RadioGroupTests.astro | 77 --- .../src/components/SearchSelectTests.astro | 50 -- playground/src/components/SelectTests.astro | 50 -- playground/src/components/ToastTests.astro | 66 --- playground/src/components/ToggleTests.astro | 77 --- playground/src/icons/ArrowLeft.astro | 13 - playground/src/icons/Hamburger.astro | 13 - playground/src/icons/Moon.astro | 13 - playground/src/icons/Sun.astro | 13 - .../src/ideas/folder-system-client-side.ts | 24 - .../src/layouts/DoubleSidebarLayout.astro | 90 ---- playground/src/layouts/SidebarLayout.astro | 45 -- playground/src/pages/double-sidebar.astro | 39 -- playground/src/pages/index.astro | 183 ------- playground/src/pages/sidebar.astro | 34 -- playground/src/utils/Icon.astro | 29 -- playground/tsconfig.json | 12 - 109 files changed, 3509 insertions(+), 4859 deletions(-) create mode 100644 docs/src/content/docs/docs/components/breadcrumbs.mdx create mode 100644 docs/src/content/docs/docs/components/group.mdx create mode 100644 docs/src/content/docs/docs/upgrade-guides/0.3.0-to-0.4.0.mdx create mode 100644 packages/studiocms_ui/src/components/Badge/Badge.astro create mode 100644 packages/studiocms_ui/src/components/Badge/badge.css delete mode 100644 packages/studiocms_ui/src/components/BaseHead.astro create mode 100644 packages/studiocms_ui/src/components/Breadcrumbs/Breadcrumbs.astro create mode 100644 packages/studiocms_ui/src/components/Breadcrumbs/breadcrumbs.css create mode 100644 packages/studiocms_ui/src/components/Button/Button.astro rename packages/studiocms_ui/src/components/{Button.astro => Button/button.css} (83%) rename packages/studiocms_ui/src/components/{ => Card}/Card.astro (55%) create mode 100644 packages/studiocms_ui/src/components/Card/card.css delete mode 100644 packages/studiocms_ui/src/components/Center.astro create mode 100644 packages/studiocms_ui/src/components/Center/Center.astro create mode 100644 packages/studiocms_ui/src/components/Center/center.css delete mode 100644 packages/studiocms_ui/src/components/Checkbox.astro create mode 100644 packages/studiocms_ui/src/components/Checkbox/Checkbox.astro create mode 100644 packages/studiocms_ui/src/components/Checkbox/checkbox.css create mode 100644 packages/studiocms_ui/src/components/Checkbox/checkbox.ts rename packages/studiocms_ui/src/components/{ => Divider}/Divider.astro (59%) create mode 100644 packages/studiocms_ui/src/components/Divider/divider.css create mode 100644 packages/studiocms_ui/src/components/Dropdown/dropdown.css delete mode 100644 packages/studiocms_ui/src/components/Footer.astro create mode 100644 packages/studiocms_ui/src/components/Footer/Footer.astro create mode 100644 packages/studiocms_ui/src/components/Footer/footer.css create mode 100644 packages/studiocms_ui/src/components/Group/Group.astro create mode 100644 packages/studiocms_ui/src/components/Group/group.css rename packages/studiocms_ui/src/components/{ => Input}/Input.astro (61%) create mode 100644 packages/studiocms_ui/src/components/Input/input.css create mode 100644 packages/studiocms_ui/src/components/Modal/modal.css delete mode 100644 packages/studiocms_ui/src/components/RadioGroup.astro create mode 100644 packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro create mode 100644 packages/studiocms_ui/src/components/RadioGroup/radiogroup.css create mode 100644 packages/studiocms_ui/src/components/RadioGroup/radiogroup.ts rename packages/studiocms_ui/src/components/{ => Row}/Row.astro (67%) create mode 100644 packages/studiocms_ui/src/components/Row/row.css delete mode 100644 packages/studiocms_ui/src/components/SearchSelect.astro create mode 100644 packages/studiocms_ui/src/components/SearchSelect/SearchSelect.astro create mode 100644 packages/studiocms_ui/src/components/SearchSelect/searchselect.css create mode 100644 packages/studiocms_ui/src/components/SearchSelect/searchselect.ts delete mode 100644 packages/studiocms_ui/src/components/Select.astro create mode 100644 packages/studiocms_ui/src/components/Select/Select.astro create mode 100644 packages/studiocms_ui/src/components/Select/select.css create mode 100644 packages/studiocms_ui/src/components/Select/select.ts create mode 100644 packages/studiocms_ui/src/components/Tabs/tabs.css create mode 100644 packages/studiocms_ui/src/components/Tabs/tabs.ts rename packages/studiocms_ui/src/components/{ => Textarea}/Textarea.astro (59%) create mode 100644 packages/studiocms_ui/src/components/Textarea/textarea.css delete mode 100644 packages/studiocms_ui/src/components/ThemeToggle.astro create mode 100644 packages/studiocms_ui/src/components/ThemeToggle/ThemeToggle.astro create mode 100644 packages/studiocms_ui/src/components/ThemeToggle/themetoggle.css create mode 100644 packages/studiocms_ui/src/components/ThemeToggle/themetoggle.ts create mode 100644 packages/studiocms_ui/src/components/Toast/toaster.css create mode 100644 packages/studiocms_ui/src/components/Toast/toaster.ts delete mode 100644 packages/studiocms_ui/src/components/Toggle.astro create mode 100644 packages/studiocms_ui/src/components/Toggle/Toggle.astro create mode 100644 packages/studiocms_ui/src/components/Toggle/toggle.css create mode 100644 packages/studiocms_ui/src/components/Toggle/toggle.ts rename packages/studiocms_ui/src/components/{ => User}/User.astro (59%) create mode 100644 packages/studiocms_ui/src/components/User/user.css delete mode 100644 packages/studiocms_ui/src/layouts/RootLayout.astro delete mode 100644 packages/studiocms_ui/src/layouts/index.ts delete mode 100644 playground/.gitignore delete mode 100644 playground/.vscode/extensions.json delete mode 100644 playground/.vscode/launch.json delete mode 100644 playground/README.md delete mode 100644 playground/astro.config.mts delete mode 100644 playground/package.json delete mode 100644 playground/public/favicon.svg delete mode 100644 playground/public/studiocms.svg delete mode 100644 playground/sentry.client.config.js delete mode 100644 playground/src/components/ButtonTests.astro delete mode 100644 playground/src/components/CardTests.astro delete mode 100644 playground/src/components/CheckboxTests.astro delete mode 100644 playground/src/components/DropdownTests.astro delete mode 100644 playground/src/components/ModalTests.astro delete mode 100644 playground/src/components/RadioGroupTests.astro delete mode 100644 playground/src/components/SearchSelectTests.astro delete mode 100644 playground/src/components/SelectTests.astro delete mode 100644 playground/src/components/ToastTests.astro delete mode 100644 playground/src/components/ToggleTests.astro delete mode 100644 playground/src/icons/ArrowLeft.astro delete mode 100644 playground/src/icons/Hamburger.astro delete mode 100644 playground/src/icons/Moon.astro delete mode 100644 playground/src/icons/Sun.astro delete mode 100644 playground/src/ideas/folder-system-client-side.ts delete mode 100644 playground/src/layouts/DoubleSidebarLayout.astro delete mode 100644 playground/src/layouts/SidebarLayout.astro delete mode 100644 playground/src/pages/double-sidebar.astro delete mode 100644 playground/src/pages/index.astro delete mode 100644 playground/src/pages/sidebar.astro delete mode 100644 playground/src/utils/Icon.astro delete mode 100644 playground/tsconfig.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 4ff71a7..79c9646 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,6 +8,7 @@ "editor.gotoLocation.multipleDefinitions": "goto", "cSpell.words": [ "astrojs", + "checkmark", "createtoast", "dismissable", "Eleventy", @@ -19,8 +20,11 @@ "Matthiesen", "onest", "pathe", + "polyline", + "searchselect", "socialproof", "studiocms", + "themetoggle", "Thum", "tsconfigs", "withstudiocms" diff --git a/biome.json b/biome.json index cd36124..bb9d420 100644 --- a/biome.json +++ b/biome.json @@ -34,6 +34,9 @@ "recommended": true, "suspicious": { "noExplicitAny": "warn" + }, + "style": { + "noNonNullAssertion": "off" } } }, diff --git a/docs/astro.config.mts b/docs/astro.config.mts index 28de2e6..31f28ff 100644 --- a/docs/astro.config.mts +++ b/docs/astro.config.mts @@ -158,10 +158,6 @@ export default defineConfig({ { label: 'Installation', link: 'docs/', - badge: { - text: 'Updated!', - variant: 'success', - }, }, { label: 'Release Notes', diff --git a/docs/src/content/docs/docs/changelog.md b/docs/src/content/docs/docs/changelog.md index b22c2f8..417f465 100644 --- a/docs/src/content/docs/docs/changelog.md +++ b/docs/src/content/docs/docs/changelog.md @@ -1,51 +1,55 @@ ---- -# Warning: This file is generated automatically. Do not edit! -title: Release Notes -description: Release notes for the @studiocms/ui package. -editUrl: false ---- - -This document contains release notes for the `@studiocms/ui` package. -For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md) - -## 0.3.1 - -- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows - -## 0.3.0 - -- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update - - This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to - an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)! - - ### Components - - - Added a new `` component based on the tabs on the homepage. - - Updated the `` component to include a new "filled" style. - - ### Utilities - - - Moved the `ThemeHelper` class to its own category in the docs. - - ### Accessibility - - - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards. - -## 0.1.0 - -- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release - -- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `` component's available types - -- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects - -- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project - -- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component - -- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility - -## 0.0.1 - -- Initial Testing release +--- +# Warning: This file is generated automatically. Do not edit! +title: Release Notes +description: Release notes for the @studiocms/ui package. +editUrl: false +--- + +This document contains release notes for the `@studiocms/ui` package. +For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md) + +## 0.3.2 + +- [#33](https://github.com/withstudiocms/ui/pull/33) [`58e223c`](https://github.com/withstudiocms/ui/commit/58e223c861321e95c8db064be67e28e4563b4ff3) Thanks [@louisescher](https://github.com/louisescher)! - Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots + +## 0.3.1 + +- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows + +## 0.3.0 + +- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update + + This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to + an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)! + + ### Components + + - Added a new `` component based on the tabs on the homepage. + - Updated the `` component to include a new "filled" style. + + ### Utilities + + - Moved the `ThemeHelper` class to its own category in the docs. + + ### Accessibility + + - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards. + +## 0.1.0 + +- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release + +- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `` component's available types + +- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects + +- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project + +- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component + +- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility + +## 0.0.1 + +- Initial Testing release diff --git a/docs/src/content/docs/docs/components/breadcrumbs.mdx b/docs/src/content/docs/docs/components/breadcrumbs.mdx new file mode 100644 index 0000000..00d4383 --- /dev/null +++ b/docs/src/content/docs/docs/components/breadcrumbs.mdx @@ -0,0 +1,79 @@ +--- +title: Breadcrumbs +--- + +import { Breadcrumbs } from '@studiocms/ui/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import PreviewCard from '~/components/PreviewCard.astro'; + +A simple breadcrumb generator component! Used to indicate the current page's location within a navigational hierarchy. + +## Usage + + + + + + + + + ```astro showLinenumbers title="ButtonExample.astro" + --- + import { Breadcrumbs } from '@studiocms/ui/components'; + --- + + + ``` + + + +### Changing the separator + +You can change the separator by passing a `separator` prop. + + + + + + + + + ```astro showLinenumbers title="ButtonExample.astro" + --- + import { Breadcrumbs } from '@studiocms/ui/components'; + --- + + + ``` + + diff --git a/docs/src/content/docs/docs/components/card.mdx b/docs/src/content/docs/docs/components/card.mdx index 9445e7a..f428595 100644 --- a/docs/src/content/docs/docs/components/card.mdx +++ b/docs/src/content/docs/docs/components/card.mdx @@ -1,10 +1,6 @@ --- i18nReady: true title: Card -sidebar: - badge: - text: Updated! - variant: success --- import { Card } from '@studiocms/ui/components'; diff --git a/docs/src/content/docs/docs/components/footer.mdx b/docs/src/content/docs/docs/components/footer.mdx index ac98e90..e3aba3f 100644 --- a/docs/src/content/docs/docs/components/footer.mdx +++ b/docs/src/content/docs/docs/components/footer.mdx @@ -1,9 +1,5 @@ --- title: "Footer" -sidebar: - badge: - text: New! - variant: tip --- import { Tabs, TabItem } from '@astrojs/starlight/components'; diff --git a/docs/src/content/docs/docs/components/group.mdx b/docs/src/content/docs/docs/components/group.mdx new file mode 100644 index 0000000..2c113d2 --- /dev/null +++ b/docs/src/content/docs/docs/components/group.mdx @@ -0,0 +1,40 @@ +--- +title: Group +sidebar: + badge: + text: New! + variant: success +--- + +import { Group, Button } from '@studiocms/ui/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import PreviewCard from '~/components/PreviewCard.astro'; + +Lol, group component + +## Usage + + + + + + + + + + + + + ```astro showLinenumbers title="ButtonExample.astro" + --- + import { Group, Button } from '@studiocms/ui/components'; + --- + + + + + + + ``` + + diff --git a/docs/src/content/docs/docs/components/tabs.mdx b/docs/src/content/docs/docs/components/tabs.mdx index a8e37de..35bf7ef 100644 --- a/docs/src/content/docs/docs/components/tabs.mdx +++ b/docs/src/content/docs/docs/components/tabs.mdx @@ -1,9 +1,5 @@ --- title: "Tabs" -sidebar: - badge: - text: New! - variant: tip --- import { Tabs, TabItem } from '@astrojs/starlight/components'; diff --git a/docs/src/content/docs/docs/upgrade-guides/0.1.0-to-0.3.0.mdx b/docs/src/content/docs/docs/upgrade-guides/0.1.0-to-0.3.0.mdx index feb62b0..5b3ab8a 100644 --- a/docs/src/content/docs/docs/upgrade-guides/0.1.0-to-0.3.0.mdx +++ b/docs/src/content/docs/docs/upgrade-guides/0.1.0-to-0.3.0.mdx @@ -1,9 +1,5 @@ --- title: From v0.1.0 to v0.3.0 -sidebar: - badge: - text: New! - variant: tip --- import { Steps } from '@astrojs/starlight/components'; diff --git a/docs/src/content/docs/docs/upgrade-guides/0.3.0-to-0.4.0.mdx b/docs/src/content/docs/docs/upgrade-guides/0.3.0-to-0.4.0.mdx new file mode 100644 index 0000000..142ee9c --- /dev/null +++ b/docs/src/content/docs/docs/upgrade-guides/0.3.0-to-0.4.0.mdx @@ -0,0 +1,15 @@ +--- +title: From v0.3.0 to v0.4.0 +sidebar: + badge: + text: New! + variant: tip +--- + +In version 0.3.0, we turned StudioCMS UI into an integration. With 0.4.0, we're building on that +foundation to fix some issues with barrel files and improve the overall DX, while also adding a +lot of new components. Unfortunately, this means that there are some breaking changes. Let's go +through them: + +1. All imports have changed +2. ... diff --git a/package.json b/package.json index 5427cda..ee14d43 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,6 @@ "node": "20.14.0" }, "scripts": { - "dev": "pnpm --filter ui-playground dev", - "playground:build": "pnpm --filter ui-playground build", - "playground:preview": "pnpm --filter ui-playground preview", "docs:dev": "pnpm --filter docs dev", "docs:build": "pnpm --filter docs build", "docs:preview": "pnpm --filter docs preview", @@ -30,4 +27,4 @@ "pkg-pr-new": "^0.0.35", "typescript": "catalog:" } - } \ No newline at end of file + } diff --git a/packages/studiocms_ui/src/components.ts b/packages/studiocms_ui/src/components.ts index 8652fe5..5ab938e 100644 --- a/packages/studiocms_ui/src/components.ts +++ b/packages/studiocms_ui/src/components.ts @@ -17,6 +17,8 @@ export { User } from './components/index'; export { ThemeToggle } from './components/index'; export { Footer } from './components/index'; export { Tabs, TabItem } from './components/index'; +export { Breadcrumbs } from './components/index'; +export { Group } from './components/index'; export { Sidebar, diff --git a/packages/studiocms_ui/src/components/Badge/Badge.astro b/packages/studiocms_ui/src/components/Badge/Badge.astro new file mode 100644 index 0000000..0a2797d --- /dev/null +++ b/packages/studiocms_ui/src/components/Badge/Badge.astro @@ -0,0 +1,19 @@ +--- +import type { StudioCMSColorway } from 'src/utils/colors'; +import './badge.css'; +import type { HeroIconName } from 'src/utils/iconType'; +import Icon from '../../utils/Icon.astro'; + +interface Props { + color?: StudioCMSColorway; + icon?: HeroIconName; + label: string; +} + +const { color, icon, label } = Astro.props; +--- + + + {icon && } + {label} + diff --git a/packages/studiocms_ui/src/components/Badge/badge.css b/packages/studiocms_ui/src/components/Badge/badge.css new file mode 100644 index 0000000..e69de29 diff --git a/packages/studiocms_ui/src/components/BaseHead.astro b/packages/studiocms_ui/src/components/BaseHead.astro deleted file mode 100644 index d23e190..0000000 --- a/packages/studiocms_ui/src/components/BaseHead.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -import { type HeadConfig, createHead, headDefaults } from '../utils/headers'; - -export interface Props { - title: string; - description: string; - headers?: HeadConfig | undefined; - image?: string | undefined; -} - -const { title, description, image, headers: userHeaders } = Astro.props; - -const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : undefined; - -// This should probably be removed from the UI lib at some point -const defaultHeaders = headDefaults(title, description, Astro, image, canonicalURL); - -const head = createHead(defaultHeaders, userHeaders || []); ---- -{head.map(({ tag: Tag, attrs, content }) => ( - -))} diff --git a/packages/studiocms_ui/src/components/Breadcrumbs/Breadcrumbs.astro b/packages/studiocms_ui/src/components/Breadcrumbs/Breadcrumbs.astro new file mode 100644 index 0000000..506b161 --- /dev/null +++ b/packages/studiocms_ui/src/components/Breadcrumbs/Breadcrumbs.astro @@ -0,0 +1,27 @@ +--- +import './breadcrumbs.css'; + +type Props = { + segments: { + label: string; + segment: string; + }[]; + separator?: string; +} + +const { segments, separator = '>' } = Astro.props; + +const breadcrumbs = segments.map(({ label }, index) => { + const path = segments.slice(0, index + 1).map(({ segment }) => segment).join('/').replaceAll("//", "/"); + return { + label, + path + }; +}); +--- + +
+ {breadcrumbs.map(({ label, path }) => ( + {label}{separator} + ))} +
diff --git a/packages/studiocms_ui/src/components/Breadcrumbs/breadcrumbs.css b/packages/studiocms_ui/src/components/Breadcrumbs/breadcrumbs.css new file mode 100644 index 0000000..0b46c17 --- /dev/null +++ b/packages/studiocms_ui/src/components/Breadcrumbs/breadcrumbs.css @@ -0,0 +1,18 @@ +.sui-breadcrumbs { + display: flex; + flex-direction: row; + gap: .25rem; +} + +.sui-breadcrumbs > *:last-child { + display: none; +} + +.sui-breadcrumbs a { + color: hsl(var(--primary-base)); + text-decoration: none; +} + +.sui-breadcrumbs a:hover { + text-decoration: underline; +} diff --git a/packages/studiocms_ui/src/components/Button/Button.astro b/packages/studiocms_ui/src/components/Button/Button.astro new file mode 100644 index 0000000..c987ac5 --- /dev/null +++ b/packages/studiocms_ui/src/components/Button/Button.astro @@ -0,0 +1,64 @@ +--- +import type { HTMLTag, Polymorphic } from 'astro/types'; +import type { StudioCMSColorway } from '../../utils/colors'; +import './button.css'; + +/** + * Props for the button component. + */ +type Props = Omit, 'as'> & { + /** + * The polymorphic component to render the button as. Defaults to `button`. + */ + as?: As; + /** + * The size of the button. Defaults to `md`. + */ + size?: 'sm' | 'md' | 'lg'; + /** + * Whether the button should be full width. Defaults to `false`. + */ + fullWidth?: boolean; + /** + * The colorway of the button. Defaults to `default`. + */ + color?: StudioCMSColorway; + /** + * The variant of the button. Defaults to `solid`. + */ + variant?: 'solid' | 'outlined' | 'flat'; + /** + * Whether the button is disabled. Defaults to `false`. + */ + disabled?: boolean; +}; + +export type { Props }; + +const { + size = 'md', + fullWidth = false, + color = 'default', + variant = 'solid', + as: As = 'button', + disabled = false, + ...props +} = Astro.props; +--- + + + + + + diff --git a/packages/studiocms_ui/src/components/Button.astro b/packages/studiocms_ui/src/components/Button/button.css similarity index 83% rename from packages/studiocms_ui/src/components/Button.astro rename to packages/studiocms_ui/src/components/Button/button.css index b7b2838..87fa6d7 100644 --- a/packages/studiocms_ui/src/components/Button.astro +++ b/packages/studiocms_ui/src/components/Button/button.css @@ -1,67 +1,3 @@ ---- -import type { HTMLTag, Polymorphic } from 'astro/types'; -import type { StudioCMSColorway } from '../utils/colors'; - -/** - * Props for the button component. - */ -type Props = Omit, 'as'> & { - /** - * The polymorphic component to render the button as. Defaults to `button`. - */ - as?: As; - /** - * The size of the button. Defaults to `md`. - */ - size?: 'sm' | 'md' | 'lg'; - /** - * Whether the button should be full width. Defaults to `false`. - */ - fullWidth?: boolean; - /** - * The colorway of the button. Defaults to `default`. - */ - color?: StudioCMSColorway; - /** - * The variant of the button. Defaults to `solid`. - */ - variant?: 'solid' | 'outlined' | 'flat'; - /** - * Whether the button is disabled. Defaults to `false`. - */ - disabled?: boolean; -}; - -export type { Props }; - -const { - size = 'md', - fullWidth = false, - color = 'default', - variant = 'solid', - as: As = 'button', - disabled = false, - ...props -} = Astro.props; ---- - - - - - - - diff --git a/packages/studiocms_ui/src/components/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro similarity index 55% rename from packages/studiocms_ui/src/components/Card.astro rename to packages/studiocms_ui/src/components/Card/Card.astro index 52defdd..ba9b7d0 100644 --- a/packages/studiocms_ui/src/components/Card.astro +++ b/packages/studiocms_ui/src/components/Card/Card.astro @@ -1,5 +1,6 @@ --- import type { HTMLTag, Polymorphic } from 'astro/types'; +import './card.css'; /** * Props for the card component. @@ -36,51 +37,3 @@ const { as: As = 'div', fullWidth, fullHeight, variant = 'default', ...props } = - diff --git a/packages/studiocms_ui/src/components/Card/card.css b/packages/studiocms_ui/src/components/Card/card.css new file mode 100644 index 0000000..81400a7 --- /dev/null +++ b/packages/studiocms_ui/src/components/Card/card.css @@ -0,0 +1,46 @@ +.sui-card { + border: 1px solid hsl(var(--border)); + background-color: hsl(var(--background-base)); + border-radius: .5rem; + width: fit-content; + height: fit-content; +} + +.sui-card.filled { + background-color: hsl(var(--background-step-3)); + border: none; +} + +.sui-card.full-w { + width: 100%; +} + +.sui-card.full-h { + height: 100%; +} + +.sui-card-header:has(*) { + padding: 1rem 1rem 0rem 1rem; + * { + margin: 0; + } +} + +.sui-card-body { + padding: 1rem; +} + +.sui-card-footer:has(*) { + border-top: 1px solid hsl(var(--border)); + padding: 1rem; +} + +.filled .sui-card-footer { + border: none; +} + +@media screen and (max-width: 840px) { + .sui-card { + width: 100%; + } +} diff --git a/packages/studiocms_ui/src/components/Center.astro b/packages/studiocms_ui/src/components/Center.astro deleted file mode 100644 index bd87ba2..0000000 --- a/packages/studiocms_ui/src/components/Center.astro +++ /dev/null @@ -1,16 +0,0 @@ - -
- -
- diff --git a/packages/studiocms_ui/src/components/Center/Center.astro b/packages/studiocms_ui/src/components/Center/Center.astro new file mode 100644 index 0000000..f2cfb4e --- /dev/null +++ b/packages/studiocms_ui/src/components/Center/Center.astro @@ -0,0 +1,7 @@ +--- +import './center.css'; +--- + +
+ +
diff --git a/packages/studiocms_ui/src/components/Center/center.css b/packages/studiocms_ui/src/components/Center/center.css new file mode 100644 index 0000000..7d61c5a --- /dev/null +++ b/packages/studiocms_ui/src/components/Center/center.css @@ -0,0 +1,10 @@ +.sui-center { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + text-align: center; +} diff --git a/packages/studiocms_ui/src/components/Checkbox.astro b/packages/studiocms_ui/src/components/Checkbox.astro deleted file mode 100644 index c111e09..0000000 --- a/packages/studiocms_ui/src/components/Checkbox.astro +++ /dev/null @@ -1,250 +0,0 @@ ---- -import Checkmark from '../icons/Checkmark.astro'; -import type { StudioCMSColorway } from '../utils/colors'; -import { generateID } from '../utils/generateID'; - -/** - * The props for the Checkbox component. - */ -interface Props { - /** - * The label of the checkbox. - */ - label: string; - /** - * The size of the checkbox. Defaults to `md`. - */ - size?: 'sm' | 'md' | 'lg'; - /** - * The color of the checkbox. Defaults to `default`. - */ - color?: StudioCMSColorway; - /** - * Whether the checkbox is checked by default. - */ - defaultChecked?: boolean; - /** - * Whether the checkbox is disabled. - */ - disabled?: boolean; - /** - * The name of the checkbox. - */ - name?: string; - /** - * Whether the checkbox is required. - */ - isRequired?: boolean; -} - -const { - size = 'md', - color = 'default', - defaultChecked, - disabled, - name = generateID('checkbox'), - label, - isRequired, -} = Astro.props; - -const iconSizes = { - sm: 14, - md: 16, - lg: 24, -}; ---- - - - - diff --git a/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro b/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro new file mode 100644 index 0000000..28742d9 --- /dev/null +++ b/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro @@ -0,0 +1,93 @@ +--- +import Checkmark from '../../icons/Checkmark.astro'; +import type { StudioCMSColorway } from '../../utils/colors'; +import { generateID } from '../../utils/generateID'; +import './checkbox.css'; + +/** + * The props for the Checkbox component. + */ +interface Props { + /** + * The label of the checkbox. + */ + label: string; + /** + * The size of the checkbox. Defaults to `md`. + */ + size?: 'sm' | 'md' | 'lg'; + /** + * The color of the checkbox. Defaults to `default`. + */ + color?: StudioCMSColorway; + /** + * Whether the checkbox is checked by default. + */ + defaultChecked?: boolean; + /** + * Whether the checkbox is disabled. + */ + disabled?: boolean; + /** + * The name of the checkbox. + */ + name?: string; + /** + * Whether the checkbox is required. + */ + isRequired?: boolean; +} + +const { + size = 'md', + color = 'default', + defaultChecked, + disabled, + name = generateID('checkbox'), + label, + isRequired, +} = Astro.props; + +const iconSizes = { + sm: 14, + md: 16, + lg: 24, +}; +--- + + - diff --git a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro new file mode 100644 index 0000000..577f87c --- /dev/null +++ b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro @@ -0,0 +1,122 @@ +--- +import type { StudioCMSColorway } from '../../utils/colors'; +import { generateID } from '../../utils/generateID'; +import './radiogroup.css'; + +/** + * The props for the RadioGroup component. + */ +interface Option { + /** + * The label of the option. + */ + label: string; + /** + * The value of the option. + */ + value: string; + /** + * Whether the option is disabled. + */ + disabled?: boolean; +} + +/** + * The props for the RadioGroup component. + */ +interface Props { + /** + * The label of the radio group. + */ + label: string; + /** + * The color of the radio group. Defaults to `default`. + */ + color?: StudioCMSColorway; + /** + * The default value of the radio group. Needs to be one of the values in the options. + */ + defaultValue?: string; + /** + * The options to display in the radio group. + */ + options: Option[]; + /** + * Whether the radio group is disabled. Defaults to `false`. + */ + disabled?: boolean; + /** + * The name of the radio group. + */ + name?: string; + /** + * Whether the radio group is required. Defaults to `false`. + */ + isRequired?: boolean; + /** + * Whether the radio group is horizontal. Defaults to `false`. + */ + horizontal?: boolean; + /** + * Additional classes to apply to the radio group. + */ + class?: string; +} + +const { + label, + color = 'default', + defaultValue, + options, + disabled = false, + isRequired = false, + horizontal = false, + name = generateID('radio'), + class: className, +} = Astro.props; +--- + +
+ + {label} {isRequired && "*"} + +
+ {options.map(({ label, value, disabled: individuallyDisabled }, i) => ( +
+ - diff --git a/packages/studiocms_ui/src/components/SearchSelect/SearchSelect.astro b/packages/studiocms_ui/src/components/SearchSelect/SearchSelect.astro new file mode 100644 index 0000000..b3616ea --- /dev/null +++ b/packages/studiocms_ui/src/components/SearchSelect/SearchSelect.astro @@ -0,0 +1,133 @@ +--- +import Icon from '../../utils/Icon.astro'; +import { generateID } from '../../utils/generateID'; +import Input from '../Input/Input.astro'; +import './searchselect.css'; + +/** + * An option in the select dropdown + */ +interface Option { + /** + * The label of the option. + */ + label: string; + /** + * The value of the option. + */ + value: string; + /** + * Whether the option is disabled. + */ + disabled?: boolean; +} + +/** + * The props for the search select component. + */ +interface Props { + /** + * The label of the search select. + */ + label?: string; + /** + * The default value of the search select. Needs to be one of the values in the options. + */ + defaultValue?: string; + /** + * Additional classes to apply to the search select. + */ + class?: string; + /** + * The name of the search select. + */ + name?: string; + /** + * Whether the search select is required. Defaults to `false`. + */ + isRequired?: boolean; + /** + * The options to display in the search select. + */ + options: Option[]; + /** + * Whether the search select is disabled. Defaults to `false`. + */ + disabled?: boolean; + /** + * Whether the search select should take up the full width of its container. + */ + fullWidth?: boolean; + /** + * The placeholder of the search select. + */ + placeholder?: string; +} + +const { + label, + defaultValue, + class: className, + name = generateID('search-select'), + isRequired, + options = [], + disabled, + fullWidth, + placeholder, +} = Astro.props; +--- + +
+
+ x.value === defaultValue)?.label || (placeholder || "Select")} + role='combobox' + aria-controls={`${name}-dropdown`} + aria-expanded="false" + label={label || ''} + isRequired={isRequired || false} + /> + +
+
    + { + options.map((x, i) => ( +
  • + {x.label} +
    • + )) + } +
+ +
+ - diff --git a/packages/studiocms_ui/src/components/Select/Select.astro b/packages/studiocms_ui/src/components/Select/Select.astro new file mode 100644 index 0000000..2ad2429 --- /dev/null +++ b/packages/studiocms_ui/src/components/Select/Select.astro @@ -0,0 +1,145 @@ +--- +import Icon from '../../utils/Icon.astro'; +import { generateID } from '../../utils/generateID'; +import './select.css'; + +/** + * The props for the select component. + */ +interface Option { + /** + * The label of the option. + */ + label: string; + /** + * The value of the option. + */ + value: string; + /** + * Whether the option is disabled. Defaults to `false`. + */ + disabled?: boolean; +} + +/** + * The props for the select component. + */ +interface Props { + /** + * The label of the select. + */ + label?: string; + /** + * The default value of the select. + */ + defaultValue?: string; + /** + * Additional classes to apply to the select. + */ + class?: string; + /** + * The name of the select. Required because of the helper. + */ + name?: string; + /** + * Whether the select is required. Defaults to `false`. + */ + isRequired?: boolean; + /** + * The options to display in the select. + */ + options: Option[]; + /** + * Whether the select is disabled. Defaults to `false`. + */ + disabled?: boolean; + /** + * Whether the select is full width. Defaults to `false`. + */ + fullWidth?: boolean; + /** + * The placeholder of the select. Defaults to `Select`. + */ + placeholder?: string; +} + +const { + label, + defaultValue, + class: className, + name = generateID('select'), + isRequired, + options = [], + disabled, + fullWidth, + placeholder = 'Select', +} = Astro.props; +--- + +
+ {label && ( + + )} + +
    + { + options.map((x, i) => ( +
  • + {x.label} +
    • + )) + } +
+ +
+ - + - - diff --git a/packages/studiocms_ui/src/components/ThemeToggle/ThemeToggle.astro b/packages/studiocms_ui/src/components/ThemeToggle/ThemeToggle.astro new file mode 100644 index 0000000..459e63c --- /dev/null +++ b/packages/studiocms_ui/src/components/ThemeToggle/ThemeToggle.astro @@ -0,0 +1,19 @@ +--- +import Button, { type Props as ButtonProps } from '../Button/Button.astro'; +import './themetoggle.css'; + +interface Props extends ButtonProps {} + +const props = Astro.props; +--- + + + + - - + - diff --git a/packages/studiocms_ui/src/components/Toggle/Toggle.astro b/packages/studiocms_ui/src/components/Toggle/Toggle.astro new file mode 100644 index 0000000..4f52324 --- /dev/null +++ b/packages/studiocms_ui/src/components/Toggle/Toggle.astro @@ -0,0 +1,82 @@ +--- +import type { StudioCMSColorway } from '../../utils/colors'; +import { generateID } from '../../utils/generateID'; +import './toggle.css'; + +/** + * The props for the toggle component + */ +interface Props { + /** + * The label of the toggle. + */ + label: string; + /** + * The size of the toggle. Defaults to `md`. + */ + size?: 'sm' | 'md' | 'lg'; + /** + * The color of the toggle. Defaults to `default`. + */ + color?: StudioCMSColorway; + /** + * Whether the toggle is checked by default. Defaults to `false`. + */ + defaultChecked?: boolean; + /** + * Whether the toggle is disabled. Defaults to `false`. + */ + disabled?: boolean; + /** + * The name of the toggle. + */ + name?: string; + /** + * Whether the toggle is required. Defaults to `false`. + */ + isRequired?: boolean; +} + +const { + size = 'md', + color = 'default', + defaultChecked, + disabled, + name = generateID('checkbox'), + label, + isRequired, +} = Astro.props; +--- +