From d222c0dfee0855d7589dc6b6b08146038b0693c2 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Mon, 31 Aug 2026 09:34:48 +0200 Subject: [PATCH 1/5] docs: drop the numeric section prefixes from the content paths MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `/02-foundations/01-design/02-colors` is now `/foundations/design/colors`. The numbers stopped carrying the top-level order when the header moved to an explicit `SECTION_ORDER`; what was left was the intra-section order and the URLs themselves. The authored order moves to `apps/docs/src/lib/content/contentOrder.ts`, a flat list of pathnames that the navigation, the header, `llms.txt`, `llms.json` and the sitemap sort by. Unlisted entries sort alphabetically by label — the components, deliberately. `contentOrder.test.ts` rejects a stale entry and a group that lists only some of its children, which is the silent half-ordered case an in-code order list otherwise invites. Old links keep working through one `rewrite` in `apps/docs/nginx.conf`: strip a `NN-` prefix from any segment, 301, `/raw/**` included. A path with several prefixes converges over as many hops; new paths never match, so it terminates. `/_next/` is excluded — build chunks are named `-.js` and a two-digit id would be rewritten into a 404. Simulated against the build output: 2373 old paths resolve to exactly their new path, 2787 new paths and all `_next` assets stay untouched. Two places relied on alphabetical happening to be the authored order, which only held while the directories were numbered: - the header linked a section at `mdxFiles[0]`, which would now land Foundations on Fehlermeldungen instead of Design Tokens - the components section was matched with `includes("04-components")`; a bare `includes("components")` also matches `/foundations/structure/components` Both compare path segments explicitly now. Drive-by: the component overview linked its tiles at `.../overview`, a legacy tab redirect. Co-Authored-By: Claude Opus 5 --- .../scripts/release-relevance-lib.test.mjs | 10 +- AGENTS.md | 2 +- CONTRIBUTE.md | 4 +- README.md | 2 +- apps/docs/AGENTS.md | 17 +- apps/docs/README.md | 18 +- apps/docs/nginx.conf | 8 + .../_components/wireframe/registry.ts | 185 ------------------ .../layout/DocsSearch/SearchDialog.tsx | 8 +- .../app/_components/layout/Groups/Groups.tsx | 35 ++-- .../layout/MainNavigation/MainNavigation.tsx | 67 +++++-- apps/docs/src/app/_lib/compareEntries.ts | 25 +-- apps/docs/src/app/_lib/extractTextFromPath.ts | 8 +- apps/docs/src/app/_lib/integrationGroups.ts | 4 +- .../[group]/[component]/develop}/page.tsx | 4 +- .../[group]/[component]/guidelines}/page.tsx | 4 +- .../[group]/[component]/overview}/page.tsx | 4 +- .../[group]/[component]/page.tsx | 2 +- .../_components/ComponentCard.module.scss | 0 .../_components/ComponentCard.tsx | 4 +- .../_components/ComponentsList.tsx | 2 +- .../ComponentsOverview.module.scss | 0 .../_components/ComponentsOverview.tsx | 10 +- .../wireframe/PlaceholderWireframe.tsx | 2 +- .../wireframe/primitives.module.scss | 0 .../_components/wireframe/primitives.tsx | 0 .../_components/wireframe/registry.ts | 185 ++++++++++++++++++ .../wireframe/wireframes/AccentBox.tsx | 2 +- .../wireframe/wireframes/Accordion.tsx | 2 +- .../wireframe/wireframes/Action.tsx | 2 +- .../wireframe/wireframes/ActionGroup.tsx | 2 +- .../wireframe/wireframes/Alert.tsx | 2 +- .../wireframe/wireframes/AlertBadge.tsx | 2 +- .../wireframe/wireframes/AlertText.tsx | 2 +- .../wireframe/wireframes/Autocomplete.tsx | 2 +- .../wireframe/wireframes/Avatar.tsx | 2 +- .../wireframe/wireframes/AvatarStack.tsx | 2 +- .../wireframe/wireframes/Badge.tsx | 2 +- .../wireframe/wireframes/BigNumber.tsx | 2 +- .../wireframe/wireframes/Breadcrumb.tsx | 2 +- .../wireframe/wireframes/Button.tsx | 2 +- .../wireframe/wireframes/CartesianChart.tsx | 2 +- .../_components/wireframe/wireframes/Chat.tsx | 2 +- .../wireframe/wireframes/Checkbox.tsx | 2 +- .../wireframe/wireframes/CheckboxButton.tsx | 2 +- .../wireframe/wireframes/CheckboxGroup.tsx | 2 +- .../wireframe/wireframes/CodeBlock.tsx | 2 +- .../wireframe/wireframes/CodeEditor.tsx | 2 +- .../wireframe/wireframes/Color.tsx | 2 +- .../wireframe/wireframes/ColumnLayout.tsx | 2 +- .../wireframe/wireframes/Combine.tsx | 2 +- .../wireframe/wireframes/ComboBox.tsx | 2 +- .../wireframe/wireframes/ContextMenu.tsx | 2 +- .../wireframe/wireframes/ContextualHelp.tsx | 2 +- .../wireframe/wireframes/CopyButton.tsx | 2 +- .../wireframe/wireframes/CounterBadge.tsx | 2 +- .../wireframe/wireframes/DatePicker.tsx | 2 +- .../wireframe/wireframes/DateRangePicker.tsx | 2 +- .../wireframe/wireframes/DonutChart.tsx | 2 +- .../wireframe/wireframes/Field.tsx | 2 +- .../wireframe/wireframes/FileCard.tsx | 2 +- .../wireframe/wireframes/FileCardList.tsx | 2 +- .../wireframe/wireframes/FileDropZone.tsx | 2 +- .../wireframe/wireframes/FileField.tsx | 2 +- .../_components/wireframe/wireframes/Flex.tsx | 2 +- .../_components/wireframe/wireframes/Form.tsx | 2 +- .../wireframe/wireframes/FormRootError.tsx | 2 +- .../wireframe/wireframes/HeaderNavigation.tsx | 2 +- .../wireframe/wireframes/Heading.tsx | 2 +- .../_components/wireframe/wireframes/Icon.tsx | 2 +- .../wireframes/IllustratedMessage.tsx | 2 +- .../wireframe/wireframes/Image.tsx | 2 +- .../wireframe/wireframes/ImageCropper.tsx | 2 +- .../wireframe/wireframes/InlineCode.tsx | 2 +- .../_components/wireframe/wireframes/Kbd.tsx | 2 +- .../wireframe/wireframes/Label.tsx | 2 +- .../wireframe/wireframes/LabeledValue.tsx | 2 +- .../wireframe/wireframes/LayoutCard.tsx | 2 +- .../wireframe/wireframes/LightBox.tsx | 2 +- .../_components/wireframe/wireframes/Link.tsx | 2 +- .../_components/wireframe/wireframes/List.tsx | 2 +- .../wireframe/wireframes/LoadingSpinner.tsx | 2 +- .../wireframe/wireframes/Markdown.tsx | 2 +- .../wireframe/wireframes/MarkdownEditor.tsx | 2 +- .../wireframe/wireframes/Message.tsx | 2 +- .../wireframe/wireframes/MessageThread.tsx | 2 +- .../wireframe/wireframes/Modal.tsx | 2 +- .../wireframe/wireframes/Navigation.tsx | 2 +- .../wireframe/wireframes/Notification.tsx | 2 +- .../wireframes/NotificationProvider.tsx | 2 +- .../wireframe/wireframes/NumberField.tsx | 2 +- .../wireframes/PasswordCreationField.tsx | 2 +- .../wireframe/wireframes/ProgressBar.tsx | 2 +- .../wireframe/wireframes/RadioGroup.tsx | 2 +- .../wireframe/wireframes/Rating.tsx | 2 +- .../wireframe/wireframes/SearchField.tsx | 2 +- .../wireframe/wireframes/Section.tsx | 2 +- .../wireframe/wireframes/SegmentedControl.tsx | 2 +- .../wireframe/wireframes/Select.tsx | 2 +- .../wireframe/wireframes/Separator.tsx | 2 +- .../wireframe/wireframes/Skeleton.tsx | 2 +- .../wireframe/wireframes/SkeletonText.tsx | 2 +- .../wireframe/wireframes/Slider.tsx | 2 +- .../wireframe/wireframes/SubmitButton.tsx | 2 +- .../wireframe/wireframes/Switch.tsx | 2 +- .../wireframe/wireframes/TabNavigation.tsx | 4 +- .../wireframe/wireframes/Table.tsx | 2 +- .../_components/wireframe/wireframes/Tabs.tsx | 4 +- .../_components/wireframe/wireframes/Text.tsx | 2 +- .../wireframe/wireframes/TextArea.tsx | 2 +- .../wireframe/wireframes/TextField.tsx | 2 +- .../wireframe/wireframes/TimeField.tsx | 2 +- .../wireframe/wireframes/Tooltip.tsx | 2 +- .../wireframe/wireframes/Truncate.tsx | 2 +- .../wireframes/wireframes.module.scss | 0 .../{04-components => components}/page.tsx | 6 +- .../[...slug]/page.tsx | 2 +- .../[...slug]/page.tsx | 2 +- apps/docs/src/app/page.tsx | 12 +- .../[...slug]/page.tsx | 2 +- .../content/truncate/examples/offset.tsx | 5 - .../actions/action-group/examples/default.tsx | 0 .../actions/action-group/examples/link.tsx | 0 .../action-group/examples/preserveOrder.tsx | 0 .../actions/action-group/examples/size.tsx | 0 .../actions/action-group/examples/slots.tsx | 0 .../actions/action-group/index.mdx | 12 +- .../actions/action/examples/abort.tsx | 2 +- .../actions/action/examples/confirmation.tsx | 2 +- .../actions/action/examples/default.tsx | 2 +- .../actions/action/examples/feedback.tsx | 0 .../actions/action/examples/lib.ts | 0 .../actions/action/examples/longAction.tsx | 2 +- .../actions/action/examples/menuItem.tsx | 2 +- .../actions/action/examples/nested.tsx | 0 .../actions/action/index.mdx | 4 +- .../actions/button/examples/action-group.tsx | 0 .../actions/button/examples/action.tsx | 0 .../actions/button/examples/colors.tsx | 0 .../actions/button/examples/combine.tsx | 0 .../actions/button/examples/dark.tsx | 0 .../actions/button/examples/default.tsx | 0 .../actions/button/examples/icon-text.tsx | 0 .../actions/button/examples/icon.tsx | 0 .../actions/button/examples/light.tsx | 0 .../actions/button/examples/sizes.tsx | 0 .../actions/button/examples/states.tsx | 0 .../actions/button/examples/variants.tsx | 0 .../actions/button/index.mdx | 35 ++-- .../actions/context-menu/examples/avatar.tsx | 0 .../actions/context-menu/examples/default.tsx | 0 .../actions/context-menu/examples/icon.tsx | 0 .../actions/context-menu/examples/modal.tsx | 0 .../context-menu/examples/multi-select.tsx | 0 .../actions/context-menu/examples/section.tsx | 0 .../examples/sectionSelectionMode.tsx | 0 .../context-menu/examples/separator.tsx | 0 .../context-menu/examples/single-select.tsx | 0 .../actions/context-menu/examples/states.tsx | 0 .../actions/context-menu/examples/switch.tsx | 0 .../actions/context-menu/examples/width.tsx | 0 .../actions/context-menu/index.mdx | 31 ++- .../actions/copy-button/examples/combine.tsx | 0 .../actions/copy-button/examples/default.tsx | 0 .../actions/copy-button/index.mdx | 4 +- .../chat/chat/examples/default.tsx | 0 .../chat/chat/examples/form.tsx | 0 .../chat/chat/examples/markdown-editor.tsx | 0 .../chat/chat/examples/upload.tsx | 0 .../chat/chat/index.mdx | 12 +- .../chat/message-thread/examples/default.tsx | 0 .../chat/message-thread/index.mdx | 2 +- .../chat/message/examples/action.tsx | 0 .../chat/message/examples/color.tsx | 0 .../chat/message/examples/default.tsx | 0 .../chat/message/examples/markdown.tsx | 0 .../chat/message/examples/sender.tsx | 0 .../chat/message/index.mdx | 14 +- .../avatar-stack/examples/clickable.tsx | 0 .../content/avatar-stack/examples/default.tsx | 0 .../content/avatar-stack/examples/sizes.tsx | 0 .../avatar-stack/examples/total-count.tsx | 0 .../content/avatar-stack/index.mdx | 18 +- .../content/avatar/examples/colors.tsx | 0 .../content/avatar/examples/combine.tsx | 0 .../content/avatar/examples/default.tsx | 0 .../content/avatar/examples/icon.tsx | 0 .../content/avatar/examples/image.tsx | 0 .../content/avatar/examples/initials.tsx | 0 .../content/avatar/examples/sizes.tsx | 0 .../avatar/examples/status-example.tsx | 0 .../content/avatar/examples/status.tsx | 0 .../content/avatar/index.mdx | 20 +- .../content/code-block/examples/children.tsx | 0 .../content/code-block/examples/copyable.tsx | 0 .../content/code-block/examples/default.tsx | 0 .../code-block/examples/lineNumbers.tsx | 0 .../code-block/examples/truncateLines.tsx | 0 .../content/code-block/index.mdx | 0 .../content/color/examples/accent-box.tsx | 0 .../content/color/examples/color.tsx | 0 .../content/color/examples/custom.tsx | 0 .../content/color/examples/default.tsx | 0 .../content/color/examples/heading.tsx | 0 .../content/color/examples/status.tsx | 0 .../content/color/index.mdx | 20 +- .../content/heading/examples/badge.tsx | 0 .../heading/examples/contextualHelp.tsx | 0 .../content/heading/examples/dark.tsx | 0 .../content/heading/examples/default.tsx | 0 .../content/heading/examples/levels.tsx | 0 .../content/heading/examples/light.tsx | 0 .../content/heading/examples/size.tsx | 0 .../content/heading/index.mdx | 12 +- .../content/icon/examples/colors.tsx | 0 .../content/icon/examples/combine.tsx | 0 .../content/icon/examples/custom-color.tsx | 0 .../content/icon/examples/default.tsx | 0 .../content/icon/examples/sizes.tsx | 0 .../content/icon/examples/svg.tsx | 0 .../content/icon/examples/tabler.tsx | 0 .../content/icon/index.mdx | 4 +- .../examples/actionGroup.tsx | 0 .../illustrated-message/examples/danger.tsx | 0 .../illustrated-message/examples/dark.tsx | 0 .../illustrated-message/examples/default.tsx | 0 .../illustrated-message/examples/light.tsx | 0 .../examples/unavailable.tsx | 0 .../content/illustrated-message/index.mdx | 16 +- .../content/image/examples/aspectRatio.tsx | 0 .../content/image/examples/border.tsx | 0 .../content/image/examples/default.tsx | 0 .../content/image/index.mdx | 0 .../content/inline-code/examples/dark.tsx | 0 .../content/inline-code/examples/default.tsx | 0 .../content/inline-code/examples/light.tsx | 0 .../content/inline-code/index.mdx | 4 +- .../content/kbd/examples/children.tsx | 0 .../content/kbd/examples/context-menu.tsx | 0 .../content/kbd/examples/default.tsx | 0 .../content/kbd/examples/search-field.tsx | 0 .../content/kbd/examples/text.tsx | 0 .../content/kbd/examples/variants.tsx | 0 .../content/kbd/index.mdx | 6 +- .../content/label/examples/default.tsx | 0 .../content/label/examples/states.tsx | 0 .../content/label/index.mdx | 6 +- .../labeled-value/examples/column-layout.tsx | 0 .../labeled-value/examples/copy-button.tsx | 0 .../labeled-value/examples/default.tsx | 0 .../labeled-value/examples/inline-code.tsx | 0 .../content/labeled-value/examples/link.tsx | 0 .../content/labeled-value/index.mdx | 17 +- .../content/markdown/examples/codeBlock.tsx | 0 .../content/markdown/examples/dark.tsx | 0 .../content/markdown/examples/default.tsx | 0 .../content/markdown/examples/heading.tsx | 0 .../markdown/examples/headingOffset.tsx | 0 .../content/markdown/examples/inlineCode.tsx | 0 .../content/markdown/examples/light.tsx | 0 .../content/markdown/examples/link.tsx | 0 .../content/markdown/examples/orderedList.tsx | 0 .../content/markdown/examples/quote.tsx | 0 .../content/markdown/examples/table.tsx | 0 .../markdown/examples/unorderedList.tsx | 0 .../content/markdown/index.mdx | 4 +- .../skeleton-text/examples/default.tsx | 0 .../skeleton-text/examples/heading.tsx | 0 .../content/skeleton-text/examples/width.tsx | 0 .../content/skeleton-text/index.mdx | 15 +- .../content/skeleton/examples/custom-size.tsx | 0 .../content/skeleton/examples/default.tsx | 0 .../content/skeleton/index.mdx | 10 +- .../content/text/examples/combine.tsx | 0 .../content/text/examples/dark.tsx | 0 .../content/text/examples/default.tsx | 0 .../content/text/examples/elementType.tsx | 0 .../content/text/examples/html.tsx | 0 .../content/text/examples/light.tsx | 0 .../content/text/examples/noLigatures.tsx | 0 .../content/text/examples/size.tsx | 0 .../content/text/index.mdx | 12 +- .../content/truncate/examples/default.tsx | 0 .../content/truncate/examples/heading.tsx | 0 .../content/truncate/examples/offset.tsx | 5 + .../content/truncate/examples/text.tsx | 0 .../content/truncate/index.mdx | 4 +- .../big-number/examples/accent-box.tsx | 0 .../big-number/examples/default.tsx | 0 .../big-number/examples/rating.tsx | 0 .../data-visualisation/big-number/index.mdx | 4 +- .../cartesian-chart/examples/area.tsx | 0 .../cartesian-chart/examples/colors.tsx | 0 .../cartesian-chart/examples/default.tsx | 0 .../cartesian-chart/examples/emptyView.tsx | 0 .../cartesian-chart/examples/line.tsx | 0 .../cartesian-chart/examples/synced.tsx | 0 .../cartesian-chart/index.mdx | 9 +- .../donut-chart/examples/children.tsx | 0 .../donut-chart/examples/decimal.tsx | 0 .../donut-chart/examples/default.tsx | 0 .../donut-chart/examples/segments.tsx | 0 .../donut-chart/examples/size.tsx | 0 .../donut-chart/examples/status.tsx | 0 .../donut-chart/examples/unit.tsx | 0 .../data-visualisation/donut-chart/index.mdx | 10 +- .../autocomplete/examples/default.tsx | 0 .../autocomplete/examples/filter.tsx | 0 .../autocomplete/examples/form.tsx | 2 +- .../autocomplete/examples/search.tsx | 0 .../form-controls/autocomplete/index.mdx | 8 +- .../checkbox-button/examples/default.tsx | 0 .../checkbox-button/examples/form.tsx | 2 +- .../form-controls/checkbox-button/index.mdx | 11 +- .../checkbox-group/examples/buttons.tsx | 0 .../examples/contextualHelp.tsx | 0 .../checkbox-group/examples/customColumns.tsx | 0 .../checkbox-group/examples/default.tsx | 0 .../examples/fieldDescription.tsx | 0 .../checkbox-group/examples/form.tsx | 2 +- .../form-controls/checkbox-group/index.mdx | 22 +-- .../checkbox/examples/default.tsx | 0 .../checkbox/examples/disabled.tsx | 0 .../form-controls/checkbox/examples/form.tsx | 2 +- .../checkbox/examples/indeterminated.tsx | 0 .../form-controls/checkbox/index.mdx | 8 +- .../code-editor/examples/default.tsx | 0 .../code-editor/examples/form.tsx | 0 .../form-controls/code-editor/index.mdx | 2 +- .../combo-box/examples/allowsCustomValue.tsx | 0 .../combo-box/examples/combine.tsx | 0 .../combo-box/examples/contextualHelp.tsx | 0 .../combo-box/examples/countryOptions.tsx | 0 .../combo-box/examples/default.tsx | 0 .../combo-box/examples/fieldDescription.tsx | 0 .../form-controls/combo-box/examples/form.tsx | 2 +- .../form-controls/combo-box/index.mdx | 12 +- .../date-picker/examples/contextualHelp.tsx | 0 .../date-picker/examples/default.tsx | 0 .../date-picker/examples/disabled.tsx | 0 .../date-picker/examples/fieldDescription.tsx | 0 .../date-picker/examples/form.tsx | 2 +- .../date-picker/examples/future.tsx | 0 .../date-picker/examples/unavailable.tsx | 0 .../form-controls/date-picker/index.mdx | 6 +- .../examples/contextualHelp.tsx | 0 .../date-range-picker/examples/default.tsx | 0 .../date-range-picker/examples/disabled.tsx | 0 .../examples/fieldDescription.tsx | 0 .../date-range-picker/examples/form.tsx | 2 +- .../date-range-picker/examples/future.tsx | 0 .../examples/withCustomPresets.tsx | 0 .../examples/withPresets.tsx | 0 .../form-controls/date-range-picker/index.mdx | 7 +- .../file-field/examples/contextualHelp.tsx | 0 .../file-field/examples/default.tsx | 0 .../file-field/examples/disabled.tsx | 0 .../file-field/examples/fieldDescription.tsx | 0 .../file-field/examples/form.tsx | 2 +- .../file-field/examples/invalid.tsx | 0 .../file-field/examples/multiple.tsx | 0 .../form-controls/file-field/index.mdx | 21 +- .../markdown-editor/examples/allowResize.tsx | 0 .../examples/autoResizeMaxRows.tsx | 0 .../examples/characterCount.tsx | 0 .../markdown-editor/examples/chat.tsx | 0 .../examples/combinedResize.tsx | 0 .../markdown-editor/examples/customTools.tsx | 0 .../markdown-editor/examples/default.tsx | 0 .../markdown-editor/examples/disabled.tsx | 0 .../markdown-editor/examples/form.tsx | 0 .../form-controls/markdown-editor/index.mdx | 17 +- .../number-field/examples/combine.tsx | 0 .../number-field/examples/contextualHelp.tsx | 0 .../number-field/examples/default.tsx | 0 .../number-field/examples/disabled.tsx | 0 .../examples/fieldDescription.tsx | 0 .../number-field/examples/form.tsx | 2 +- .../number-field/examples/invalid.tsx | 0 .../number-field/examples/required.tsx | 0 .../number-field/examples/unit.tsx | 0 .../form-controls/number-field/index.mdx | 24 ++- .../examples/buttons.tsx | 0 .../examples/copyButton.tsx | 0 .../examples/default.tsx | 0 .../examples/disabled.tsx | 0 .../password-creation-field/examples/form.tsx | 2 +- .../examples/rules.tsx | 0 .../password-creation-field/index.mdx | 10 +- .../radio-group/examples/buttons.tsx | 0 .../radio-group/examples/content.tsx | 0 .../radio-group/examples/contextualHelp.tsx | 0 .../radio-group/examples/customColumns.tsx | 0 .../radio-group/examples/default.tsx | 0 .../radio-group/examples/error.tsx | 0 .../radio-group/examples/fieldDescription.tsx | 0 .../radio-group/examples/form.tsx | 2 +- .../radio-group/examples/states.tsx | 0 .../form-controls/radio-group/index.mdx | 25 ++- .../rating/examples/accent-box.tsx | 0 .../rating/examples/big-number.tsx | 0 .../form-controls/rating/examples/default.tsx | 0 .../form-controls/rating/examples/icon.tsx | 0 .../rating/examples/read-only.tsx | 0 .../form-controls/rating/examples/size.tsx | 0 .../form-controls/rating/index.mdx | 11 +- .../search-field/examples/combine.tsx | 0 .../search-field/examples/default.tsx | 0 .../search-field/examples/form.tsx | 2 +- .../form-controls/search-field/index.mdx | 6 +- .../segmented-control/examples/default.tsx | 0 .../segmented-control/examples/radioGroup.tsx | 0 .../segmented-control/examples/tabs.tsx | 0 .../form-controls/segmented-control/index.mdx | 24 +-- .../form-controls/select/examples/combine.tsx | 0 .../select/examples/contextualHelp.tsx | 0 .../form-controls/select/examples/default.tsx | 0 .../select/examples/defaultValue.tsx | 0 .../select/examples/fieldDescription.tsx | 0 .../form-controls/select/examples/form.tsx | 2 +- .../select/examples/multiple.tsx | 0 .../form-controls/select/index.mdx | 14 +- .../form-controls/slider/examples/default.tsx | 0 .../form-controls/slider/examples/form.tsx | 2 +- .../form-controls/slider/index.mdx | 2 +- .../form-controls/switch/examples/default.tsx | 0 .../switch/examples/disabled.tsx | 0 .../switch/examples/leading-label.tsx | 0 .../form-controls/switch/index.mdx | 0 .../text-area/examples/allowResize.tsx | 0 .../text-area/examples/autoResizeMaxRows.tsx | 0 .../text-area/examples/characterCount.tsx | 0 .../text-area/examples/combine.tsx | 0 .../text-area/examples/combinedResize.tsx | 0 .../text-area/examples/contextualHelp.tsx | 0 .../text-area/examples/default.tsx | 0 .../text-area/examples/disabled.tsx | 0 .../form-controls/text-area/examples/form.tsx | 2 +- .../text-area/examples/invalid.tsx | 0 .../text-area/examples/required.tsx | 0 .../form-controls/text-area/index.mdx | 24 ++- .../text-field/examples/button.tsx | 0 .../text-field/examples/characterCount.tsx | 0 .../text-field/examples/combine.tsx | 0 .../text-field/examples/contextualHelp.tsx | 0 .../text-field/examples/default.tsx | 0 .../text-field/examples/defaultValue.tsx | 0 .../text-field/examples/disabled.tsx | 0 .../text-field/examples/form.tsx | 2 +- .../text-field/examples/inputProps.tsx | 0 .../text-field/examples/invalid.tsx | 0 .../text-field/examples/password.tsx | 0 .../form-controls/text-field/index.mdx | 19 +- .../time-field/examples/contextualHelp.tsx | 0 .../time-field/examples/default.tsx | 0 .../time-field/examples/disabled.tsx | 0 .../time-field/examples/form.tsx | 2 +- .../time-field/examples/granularity.tsx | 0 .../time-field/examples/minMax.tsx | 0 .../form-controls/time-field/index.mdx | 7 +- .../navigation/breadcrumb/examples/dark.tsx | 0 .../breadcrumb/examples/default.tsx | 0 .../navigation/breadcrumb/examples/light.tsx | 0 .../navigation/breadcrumb/index.mdx | 2 +- .../examples/contextMenu.tsx | 0 .../header-navigation/examples/dark.tsx | 0 .../header-navigation/examples/default.tsx | 0 .../header-navigation/examples/light.tsx | 0 .../navigation/header-navigation/index.mdx | 12 +- .../navigation/link/examples/button.tsx | 0 .../navigation/link/examples/dark.tsx | 0 .../navigation/link/examples/default.tsx | 0 .../navigation/link/examples/disabled.tsx | 0 .../navigation/link/examples/download.tsx | 0 .../navigation/link/examples/external.tsx | 0 .../navigation/link/examples/inlineText.tsx | 0 .../navigation/link/examples/light.tsx | 0 .../navigation/link/examples/position1.tsx | 0 .../navigation/link/index.mdx | 17 +- .../navigation/navigation/examples/badge.tsx | 0 .../navigation/examples/collapsable.tsx | 0 .../navigation/examples/collapsed.tsx | 0 .../navigation/examples/default.tsx | 0 .../navigation/navigation/examples/groups.tsx | 0 .../navigation/navigation/examples/icons.tsx | 0 .../navigation/examples/separator.tsx | 0 .../navigation/navigation/index.mdx | 16 +- .../tab-navigation/examples/default.tsx | 0 .../tab-navigation/examples/layout-card.tsx | 0 .../tab-navigation/examples/overflow.tsx | 0 .../tab-navigation/examples/status.tsx | 0 .../navigation/tab-navigation/index.mdx | 10 +- .../contextual-help/examples/combine.tsx | 0 .../contextual-help/examples/default.tsx | 0 .../overlays/contextual-help/index.mdx | 10 +- .../overlays/light-box/examples/actions.tsx | 0 .../overlays/light-box/examples/default.tsx | 0 .../light-box/examples/fitScreenFalse.tsx | 0 .../overlays/light-box/examples/gallery.tsx | 0 .../light-box/examples/imageTrigger.tsx | 0 .../overlays/light-box/index.mdx | 13 +- .../modal/examples/confirmOnClose.tsx | 0 .../overlays/modal/examples/controller.tsx | 2 +- .../overlays/modal/examples/default.tsx | 2 +- .../overlays/modal/examples/form.tsx | 0 .../overlays/modal/examples/offCanvas.tsx | 2 +- .../modal/examples/showCloseButton.tsx | 0 .../overlays/modal/examples/size.tsx | 2 +- .../overlays/modal/index.mdx | 4 +- .../overlays/tooltip/examples/default.tsx | 0 .../overlays/tooltip/examples/delay.tsx | 0 .../overlays/tooltip/index.mdx | 4 +- .../field/examples/default.tsx | 0 .../field/examples/typed-field.tsx | 0 .../react-hook-form/field/index.mdx | 2 +- .../form-root-error/examples/default.tsx | 0 .../react-hook-form/form-root-error/index.mdx | 0 .../react-hook-form/form/examples/default.tsx | 0 .../form/examples/resetOnSubmit.tsx | 2 +- .../react-hook-form/form/index.mdx | 0 .../submit-button/examples/default.tsx | 0 .../react-hook-form/submit-button/index.mdx | 0 .../status/alert-badge/examples/default.tsx | 0 .../status/alert-badge/examples/status.tsx | 0 .../status/alert-badge/index.mdx | 8 +- .../status/alert-text/examples/default.tsx | 0 .../status/alert-text/examples/status.tsx | 0 .../status/alert-text/index.mdx | 4 +- .../status/alert/examples/default.tsx | 0 .../status/alert/examples/page.tsx | 0 .../status/alert/examples/section.tsx | 0 .../status/alert/examples/status.tsx | 0 .../status/alert/examples/with-content.tsx | 0 .../status/alert/index.mdx | 20 +- .../status/badge/examples/colors.tsx | 0 .../status/badge/examples/dark.tsx | 0 .../status/badge/examples/default.tsx | 0 .../status/badge/examples/disabled.tsx | 0 .../status/badge/examples/light.tsx | 0 .../status/badge/examples/onClose.tsx | 0 .../status/badge/examples/onPress.tsx | 0 .../status/badge/examples/scope.tsx | 0 .../status/badge/index.mdx | 19 +- .../status/counter-badge/examples/default.tsx | 0 .../counter-badge/examples/high-number.tsx | 0 .../counter-badge/examples/with-button.tsx | 0 .../examples/without-content.tsx | 0 .../status/counter-badge/index.mdx | 2 +- .../status/loading-spinner/examples/dark.tsx | 0 .../loading-spinner/examples/default.tsx | 0 .../status/loading-spinner/examples/light.tsx | 0 .../status/loading-spinner/index.mdx | 10 +- .../examples/auto-close.tsx | 0 .../examples/closeById.tsx | 0 .../examples/default.tsx | 0 .../examples/provider.tsx | 0 .../status/notification-provider/index.mdx | 2 +- .../status/notification/examples/default.tsx | 0 .../status/notification/examples/status.tsx | 0 .../status/notification/index.mdx | 0 .../status/progress-bar/examples/decimal.tsx | 0 .../status/progress-bar/examples/default.tsx | 0 .../status/progress-bar/examples/maxValue.tsx | 0 .../status/progress-bar/examples/segments.tsx | 0 .../status/progress-bar/examples/size.tsx | 0 .../status/progress-bar/examples/status.tsx | 0 .../status/progress-bar/examples/unit.tsx | 0 .../status/progress-bar/index.mdx | 2 +- .../accent-box/examples/backgroundImage.tsx | 0 .../accent-box/examples/baseColor.tsx | 0 .../accent-box/examples/brandColor.tsx | 0 .../accent-box/examples/customColor.tsx | 0 .../structure/accent-box/examples/default.tsx | 0 .../accent-box/examples/gradient.tsx | 0 .../accent-box/examples/layoutCard.tsx | 0 .../structure/accent-box/examples/link.tsx | 0 .../structure/accent-box/index.mdx | 26 +-- .../accordion/examples/default-expanded.tsx | 0 .../structure/accordion/examples/default.tsx | 0 .../structure/accordion/examples/label.tsx | 0 .../structure/accordion/examples/outline.tsx | 0 .../structure/accordion/index.mdx | 8 +- .../structure/align/examples/default.tsx | 0 .../structure/align/index.mdx | 11 +- .../column-layout/examples/columns.tsx | 0 .../column-layout/examples/default.tsx | 0 .../structure/column-layout/examples/gaps.tsx | 0 .../column-layout/examples/hidden-columns.tsx | 0 .../structure/column-layout/index.mdx | 3 +- .../structure/combine/examples/default.tsx | 0 .../structure/combine/examples/icon-text.tsx | 0 .../combine/examples/input-button.tsx | 0 .../combine/examples/text-contextual-help.tsx | 0 .../combine/examples/text-copy-button.tsx | 0 .../structure/combine/index.mdx | 17 +- .../structure/flex/examples/default.tsx | 0 .../structure/flex/examples/layoutCard.tsx | 0 .../structure/flex/examples/listItem.tsx | 0 .../structure/flex/index.mdx | 22 +-- .../layout-card/examples/default.tsx | 0 .../layout-card/examples/tab-navigation.tsx | 0 .../structure/layout-card/index.mdx | 10 +- .../structure/list/examples/actionGroup.tsx | 2 +- .../list/examples/customEmptyView.tsx | 2 +- .../structure/list/examples/default.tsx | 2 +- .../structure/list/examples/domainApi.ts | 0 .../structure/list/examples/filter.tsx | 2 +- .../list/examples/filterDateRange.tsx | 0 .../list/examples/item-accordion.tsx | 2 +- .../list/examples/item-action-group.tsx | 2 +- .../structure/list/examples/item-checkbox.tsx | 2 +- .../examples/item-column-layout-hidden.tsx | 0 .../list/examples/item-column-layout.tsx | 0 .../structure/list/examples/item-content.tsx | 2 +- .../structure/list/examples/item-link.tsx | 2 +- .../structure/list/examples/loadingView.tsx | 2 +- .../structure/list/examples/mobile.tsx | 2 +- .../structure/list/examples/mode-list.tsx | 2 +- .../structure/list/examples/mode-table.tsx | 2 +- .../structure/list/examples/mode-tile.tsx | 2 +- .../structure/list/examples/namingDo.tsx | 2 +- .../structure/list/examples/namingDont.tsx | 2 +- .../structure/list/examples/sortingDo.tsx | 2 +- .../structure/list/examples/sortingDont.tsx | 2 +- .../structure/list/examples/summary.tsx | 0 .../structure/list/index.mdx | 57 +++--- .../section/examples/alert-badge.tsx | 0 .../section/examples/context-menu.tsx | 0 .../structure/section/examples/default.tsx | 0 .../structure/section/examples/link.tsx | 0 .../structure/section/examples/multiple.tsx | 0 .../section/examples/sub-heading.tsx | 0 .../structure/section/examples/switch.tsx | 0 .../structure/section/index.mdx | 32 +-- .../structure/separator/examples/default.tsx | 0 .../structure/separator/examples/vertical.tsx | 0 .../structure/separator/index.mdx | 4 +- .../structure/table/examples/default.tsx | 0 .../table/examples/fixed-column-widths.tsx | 0 .../table/examples/horizontally-centered.tsx | 0 .../table/examples/vertically-centered.tsx | 0 .../structure/table/examples/withFooter.tsx | 0 .../structure/table/index.mdx | 0 .../structure/tabs/examples/collapsed.tsx | 0 .../tabs/examples/default-selected.tsx | 0 .../structure/tabs/examples/default.tsx | 0 .../structure/tabs/examples/status.tsx | 0 .../structure/tabs/index.mdx | 8 +- .../file-card-list/examples/default.tsx | 0 .../file-card-list/examples/fileDropZone.tsx | 0 .../upload/file-card-list/index.mdx | 2 +- .../upload/file-card/examples/buttons.tsx | 0 .../upload/file-card/examples/contextMenu.tsx | 0 .../upload/file-card/examples/default.tsx | 0 .../upload/file-card/examples/delete.tsx | 0 .../upload/file-card/examples/failed.tsx | 0 .../upload/file-card/examples/image.tsx | 0 .../upload/file-card/examples/link.tsx | 0 .../upload/file-card/examples/progressBar.tsx | 0 .../upload/file-card/index.mdx | 19 +- .../file-drop-zone/examples/default.tsx | 0 .../file-drop-zone/examples/fileCardList.tsx | 0 .../file-drop-zone/examples/multiple.tsx | 0 .../upload/file-drop-zone/examples/type.tsx | 0 .../upload/file-drop-zone/index.mdx | 11 +- .../upload/image-cropper/examples/aspect.tsx | 0 .../image-cropper/examples/crop-shape.tsx | 0 .../upload/image-cropper/examples/default.tsx | 0 .../image-cropper/examples/file-drop-zone.tsx | 2 +- .../upload/image-cropper/examples/size.tsx | 0 .../upload/image-cropper/index.mdx | 2 +- .../fehlermeldungen}/index.mdx | 0 .../informationskonzept}/examples/alert.tsx | 0 .../examples/alertBadge.tsx | 0 .../examples/notification.tsx | 0 .../informationskonzept}/examples/tabs.tsx | 0 .../informationskonzept}/index.mdx | 53 +++-- .../sprach-guide}/index.mdx | 0 .../design/accessibility}/index.mdx | 4 +- .../design/colors}/index.mdx | 6 +- .../design/design-tokens}/examples/schema.tsx | 0 .../design/design-tokens}/index.mdx | 9 +- .../design/themes}/examples/alpha-dark.tsx | 0 .../design/themes}/examples/alpha-light.tsx | 0 .../design/themes}/index.mdx | 2 +- .../design/typography}/index.mdx | 8 +- .../boundaries}/examples/avatar-error.tsx | 0 .../boundaries}/examples/avatar-loading.tsx | 0 .../boundaries}/examples/chart-error.tsx | 0 .../boundaries}/examples/chart-loading.tsx | 0 .../examples/content-fragment-error.tsx | 0 .../examples/content-fragment-loading.tsx | 0 .../examples/context-menu-error.tsx | 0 .../examples/context-menu-loading.tsx | 0 .../examples/field-fragment-loading.tsx | 0 .../examples/illustrated-message-error.tsx | 0 .../examples/illustrated-message-loading.tsx | 0 .../examples/layout-card-error.tsx | 0 .../examples/layout-card-loading.tsx | 0 .../boundaries}/examples/modal-error.tsx | 0 .../boundaries}/examples/modal-loading.tsx | 0 .../boundaries}/examples/section-error.tsx | 0 .../boundaries}/examples/section-loading.tsx | 0 .../boundaries}/examples/text-error.tsx | 0 .../boundaries}/examples/text-loading.tsx | 0 .../internal/boundaries}/index.mdx | 48 ++--- .../structure/components}/index.mdx | 6 +- .../layout}/examples/general-layout.tsx | 0 .../layout}/examples/mStudio-layout.tsx | 0 .../structure/layout}/index.mdx | 44 ++--- .../spacing}/examples/falseSpacing.tsx | 0 .../spacing}/examples/rightSpacing.tsx | 0 .../structure/spacing}/index.mdx | 10 +- .../installation/index.mdx | 8 +- .../examples/components/ExampleSvg.tsx | 0 .../stylesheet/examples/composition.tsx | 2 +- .../stylesheet/examples/multiple-variants.tsx | 0 .../stylesheet/examples/variants.tsx | 0 .../stylesheet/index.mdx | 6 +- .../versioning/index.mdx | 0 .../multi-upload/examples/default.tsx | 0 .../codesnippets}/multi-upload/index.mdx | 6 +- .../zeitintervalle/examples/default.tsx | 0 .../codesnippets}/zeitintervalle/index.mdx | 10 +- .../anlegeprozess/examples/app-details.tsx | 0 .../examples/app-illustrated-message.tsx | 0 .../examples/create-container.tsx | 0 .../anlegeprozess/examples/domain-list.tsx | 0 .../anlegeprozess/examples/install-app.tsx | 0 .../examples/install-extension.tsx | 0 .../examples/project-illustrated-message.tsx | 0 .../anlegeprozess/examples/project-list.tsx | 0 .../patterns}/anlegeprozess/index.mdx | 65 +++--- .../dashboard/examples/customer-dashboard.tsx | 0 .../dashboard/examples/dashboard.tsx | 0 .../dashboard/examples/project-dashboard.tsx | 0 .../patterns}/dashboard/index.mdx | 20 +- .../detail-page/examples/detail-page.tsx | 0 .../patterns}/detail-page/index.mdx | 38 ++-- .../errorhandling/examples/alert-text.tsx | 0 .../examples/illustrated-message.tsx | 0 .../errorhandling/examples/modal.tsx | 0 .../patterns}/errorhandling/index.mdx | 38 ++-- .../patterns}/forms/examples/form.tsx | 0 .../patterns}/forms/examples/validation.tsx | 0 .../patterns}/forms/index.mdx | 48 ++--- .../list-tile-table/examples/domain-list.tsx | 0 .../examples/project-list-empty.tsx | 0 .../list-tile-table/examples/project-list.tsx | 0 .../list-tile-table/examples/server-list.tsx | 0 .../list-tile-table/examples/ticket-list.tsx | 0 .../patterns}/list-tile-table/index.mdx | 82 ++++---- .../navigation/examples/navigation.tsx | 0 .../navigation/examples/tab-navigation.tsx | 0 .../patterns}/navigation/index.mdx | 32 +-- .../docs/src/lib/content/contentOrder.test.ts | 69 +++++++ apps/docs/src/lib/content/contentOrder.ts | 76 +++++++ apps/docs/src/lib/links/checkLinks.test.ts | 39 ++-- apps/docs/src/lib/links/extractLinks.test.ts | 11 +- apps/docs/src/lib/links/scanDocs.ts | 2 +- apps/docs/src/lib/llms/docPages.ts | 11 +- apps/docs/src/lib/llms/generateLlmsTxt.ts | 15 +- apps/docs/src/lib/mdx/MdxFileFactory.ts | 2 +- .../components/MdxFileView/MdxFileView.tsx | 2 +- apps/docs/src/lib/search/buildSearchIndex.ts | 2 +- packages/components/AGENTS.md | 2 +- packages/components/MIGRATION.md | 2 +- 767 files changed, 1405 insertions(+), 1261 deletions(-) delete mode 100644 apps/docs/src/app/04-components/_components/wireframe/registry.ts rename apps/docs/src/app/{04-components/[group]/[component]/guidelines => components/[group]/[component]/develop}/page.tsx (85%) rename apps/docs/src/app/{04-components/[group]/[component]/overview => components/[group]/[component]/guidelines}/page.tsx (85%) rename apps/docs/src/app/{04-components/[group]/[component]/develop => components/[group]/[component]/overview}/page.tsx (85%) rename apps/docs/src/app/{04-components => components}/[group]/[component]/page.tsx (97%) rename apps/docs/src/app/{04-components => components}/_components/ComponentCard.module.scss (100%) rename apps/docs/src/app/{04-components => components}/_components/ComponentCard.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/ComponentsList.tsx (93%) rename apps/docs/src/app/{04-components => components}/_components/ComponentsOverview.module.scss (100%) rename apps/docs/src/app/{04-components => components}/_components/ComponentsOverview.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/PlaceholderWireframe.tsx (65%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/primitives.module.scss (100%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/primitives.tsx (100%) create mode 100644 apps/docs/src/app/components/_components/wireframe/registry.ts rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/AccentBox.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Accordion.tsx (92%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Action.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ActionGroup.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Alert.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/AlertBadge.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/AlertText.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Autocomplete.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Avatar.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/AvatarStack.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Badge.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/BigNumber.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Breadcrumb.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Button.tsx (78%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CartesianChart.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Chat.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Checkbox.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CheckboxButton.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CheckboxGroup.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CodeBlock.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CodeEditor.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Color.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ColumnLayout.tsx (83%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Combine.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ComboBox.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ContextMenu.tsx (89%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ContextualHelp.tsx (89%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CopyButton.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/CounterBadge.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/DatePicker.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/DateRangePicker.tsx (91%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/DonutChart.tsx (77%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Field.tsx (80%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/FileCard.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/FileCardList.tsx (91%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/FileDropZone.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/FileField.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Flex.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Form.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/FormRootError.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/HeaderNavigation.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Heading.tsx (77%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Icon.tsx (83%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/IllustratedMessage.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Image.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ImageCropper.tsx (94%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/InlineCode.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Kbd.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Label.tsx (79%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/LabeledValue.tsx (83%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/LayoutCard.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/LightBox.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Link.tsx (83%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/List.tsx (94%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/LoadingSpinner.tsx (86%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Markdown.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/MarkdownEditor.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Message.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/MessageThread.tsx (89%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Modal.tsx (91%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Navigation.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Notification.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/NotificationProvider.tsx (91%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/NumberField.tsx (89%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/PasswordCreationField.tsx (91%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/ProgressBar.tsx (80%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/RadioGroup.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Rating.tsx (89%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/SearchField.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Section.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/SegmentedControl.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Select.tsx (88%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Separator.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Skeleton.tsx (82%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/SkeletonText.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Slider.tsx (78%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/SubmitButton.tsx (82%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Switch.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/TabNavigation.tsx (85%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Table.tsx (90%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Tabs.tsx (80%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Text.tsx (79%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/TextArea.tsx (81%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/TextField.tsx (81%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/TimeField.tsx (87%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Tooltip.tsx (89%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/Truncate.tsx (84%) rename apps/docs/src/app/{04-components => components}/_components/wireframe/wireframes/wireframes.module.scss (100%) rename apps/docs/src/app/{04-components => components}/page.tsx (83%) rename apps/docs/src/app/{03-patterns => foundations}/[...slug]/page.tsx (96%) rename apps/docs/src/app/{01-get-started => get-started}/[...slug]/page.tsx (96%) rename apps/docs/src/app/{02-foundations => patterns}/[...slug]/page.tsx (96%) delete mode 100644 apps/docs/src/content/04-components/content/truncate/examples/offset.tsx rename apps/docs/src/content/{04-components => components}/actions/action-group/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action-group/examples/link.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action-group/examples/preserveOrder.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action-group/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action-group/examples/slots.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action-group/index.mdx (76%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/abort.tsx (81%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/confirmation.tsx (88%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/default.tsx (66%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/feedback.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/lib.ts (100%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/longAction.tsx (66%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/menuItem.tsx (79%) rename apps/docs/src/content/{04-components => components}/actions/action/examples/nested.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/action/index.mdx (94%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/action-group.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/action.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/colors.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/icon-text.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/icon.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/sizes.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/states.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/examples/variants.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/button/index.mdx (80%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/avatar.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/icon.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/modal.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/multi-select.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/section.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/sectionSelectionMode.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/separator.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/single-select.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/states.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/switch.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/examples/width.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/context-menu/index.mdx (71%) rename apps/docs/src/content/{04-components => components}/actions/copy-button/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/copy-button/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/actions/copy-button/index.mdx (78%) rename apps/docs/src/content/{04-components => components}/chat/chat/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/chat/examples/form.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/chat/examples/markdown-editor.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/chat/examples/upload.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/chat/index.mdx (65%) rename apps/docs/src/content/{04-components => components}/chat/message-thread/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/message-thread/index.mdx (85%) rename apps/docs/src/content/{04-components => components}/chat/message/examples/action.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/message/examples/color.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/message/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/message/examples/markdown.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/message/examples/sender.tsx (100%) rename apps/docs/src/content/{04-components => components}/chat/message/index.mdx (67%) rename apps/docs/src/content/{04-components => components}/content/avatar-stack/examples/clickable.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar-stack/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar-stack/examples/sizes.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar-stack/examples/total-count.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar-stack/index.mdx (61%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/colors.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/icon.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/image.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/initials.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/sizes.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/status-example.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/avatar/index.mdx (73%) rename apps/docs/src/content/{04-components => components}/content/code-block/examples/children.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/code-block/examples/copyable.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/code-block/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/code-block/examples/lineNumbers.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/code-block/examples/truncateLines.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/code-block/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/content/color/examples/accent-box.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/color/examples/color.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/color/examples/custom.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/color/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/color/examples/heading.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/color/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/color/index.mdx (75%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/badge.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/levels.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/heading/index.mdx (78%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/colors.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/custom-color.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/sizes.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/svg.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/examples/tabler.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/icon/index.mdx (94%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/examples/actionGroup.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/examples/danger.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/examples/unavailable.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/illustrated-message/index.mdx (71%) rename apps/docs/src/content/{04-components => components}/content/image/examples/aspectRatio.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/image/examples/border.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/image/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/image/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/content/inline-code/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/inline-code/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/inline-code/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/inline-code/index.mdx (85%) rename apps/docs/src/content/{04-components => components}/content/kbd/examples/children.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/kbd/examples/context-menu.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/kbd/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/kbd/examples/search-field.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/kbd/examples/text.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/kbd/examples/variants.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/kbd/index.mdx (88%) rename apps/docs/src/content/{04-components => components}/content/label/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/label/examples/states.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/label/index.mdx (80%) rename apps/docs/src/content/{04-components => components}/content/labeled-value/examples/column-layout.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/labeled-value/examples/copy-button.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/labeled-value/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/labeled-value/examples/inline-code.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/labeled-value/examples/link.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/labeled-value/index.mdx (66%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/codeBlock.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/heading.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/headingOffset.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/inlineCode.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/link.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/orderedList.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/quote.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/table.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/examples/unorderedList.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/markdown/index.mdx (91%) rename apps/docs/src/content/{04-components => components}/content/skeleton-text/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/skeleton-text/examples/heading.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/skeleton-text/examples/width.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/skeleton-text/index.mdx (76%) rename apps/docs/src/content/{04-components => components}/content/skeleton/examples/custom-size.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/skeleton/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/skeleton/index.mdx (81%) rename apps/docs/src/content/{04-components => components}/content/text/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/elementType.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/html.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/noLigatures.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/text/index.mdx (85%) rename apps/docs/src/content/{04-components => components}/content/truncate/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/truncate/examples/heading.tsx (100%) create mode 100644 apps/docs/src/content/components/content/truncate/examples/offset.tsx rename apps/docs/src/content/{04-components => components}/content/truncate/examples/text.tsx (100%) rename apps/docs/src/content/{04-components => components}/content/truncate/index.mdx (90%) rename apps/docs/src/content/{04-components => components}/data-visualisation/big-number/examples/accent-box.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/big-number/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/big-number/examples/rating.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/big-number/index.mdx (81%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/examples/area.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/examples/colors.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/examples/emptyView.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/examples/line.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/examples/synced.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/cartesian-chart/index.mdx (84%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/children.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/decimal.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/segments.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/examples/unit.tsx (100%) rename apps/docs/src/content/{04-components => components}/data-visualisation/donut-chart/index.mdx (86%) rename apps/docs/src/content/{04-components => components}/form-controls/autocomplete/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/autocomplete/examples/filter.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/autocomplete/examples/form.tsx (94%) rename apps/docs/src/content/{04-components => components}/form-controls/autocomplete/examples/search.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/autocomplete/index.mdx (85%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-button/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-button/examples/form.tsx (91%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-button/index.mdx (77%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/examples/buttons.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/examples/customColumns.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/examples/form.tsx (92%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox-group/index.mdx (68%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox/examples/form.tsx (90%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox/examples/indeterminated.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/checkbox/index.mdx (87%) rename apps/docs/src/content/{04-components => components}/form-controls/code-editor/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/code-editor/examples/form.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/code-editor/index.mdx (89%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/allowsCustomValue.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/countryOptions.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/examples/form.tsx (91%) rename apps/docs/src/content/{04-components => components}/form-controls/combo-box/index.mdx (83%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/form.tsx (91%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/future.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/examples/unavailable.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-picker/index.mdx (88%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/form.tsx (91%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/future.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/withCustomPresets.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/examples/withPresets.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/date-range-picker/index.mdx (89%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/form.tsx (95%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/invalid.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/examples/multiple.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/file-field/index.mdx (73%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/allowResize.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/autoResizeMaxRows.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/characterCount.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/chat.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/combinedResize.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/customTools.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/examples/form.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/markdown-editor/index.mdx (82%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/form.tsx (90%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/invalid.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/required.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/examples/unit.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/number-field/index.mdx (72%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/examples/buttons.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/examples/copyButton.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/examples/form.tsx (94%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/examples/rules.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/password-creation-field/index.mdx (82%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/buttons.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/content.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/customColumns.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/error.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/form.tsx (93%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/examples/states.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/radio-group/index.mdx (73%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/examples/accent-box.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/examples/big-number.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/examples/icon.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/examples/read-only.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/rating/index.mdx (75%) rename apps/docs/src/content/{04-components => components}/form-controls/search-field/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/search-field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/search-field/examples/form.tsx (89%) rename apps/docs/src/content/{04-components => components}/form-controls/search-field/index.mdx (77%) rename apps/docs/src/content/{04-components => components}/form-controls/segmented-control/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/segmented-control/examples/radioGroup.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/segmented-control/examples/tabs.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/segmented-control/index.mdx (64%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/defaultValue.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/fieldDescription.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/form.tsx (91%) rename apps/docs/src/content/{04-components => components}/form-controls/select/examples/multiple.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/select/index.mdx (80%) rename apps/docs/src/content/{04-components => components}/form-controls/slider/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/slider/examples/form.tsx (92%) rename apps/docs/src/content/{04-components => components}/form-controls/slider/index.mdx (92%) rename apps/docs/src/content/{04-components => components}/form-controls/switch/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/switch/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/switch/examples/leading-label.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/switch/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/allowResize.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/autoResizeMaxRows.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/characterCount.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/combinedResize.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/form.tsx (90%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/invalid.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/examples/required.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-area/index.mdx (77%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/button.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/characterCount.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/defaultValue.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/form.tsx (90%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/inputProps.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/invalid.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/examples/password.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/text-field/index.mdx (79%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/examples/contextualHelp.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/examples/form.tsx (91%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/examples/granularity.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/examples/minMax.tsx (100%) rename apps/docs/src/content/{04-components => components}/form-controls/time-field/index.mdx (87%) rename apps/docs/src/content/{04-components => components}/navigation/breadcrumb/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/breadcrumb/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/breadcrumb/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/breadcrumb/index.mdx (94%) rename apps/docs/src/content/{04-components => components}/navigation/header-navigation/examples/contextMenu.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/header-navigation/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/header-navigation/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/header-navigation/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/header-navigation/index.mdx (69%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/button.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/download.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/external.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/inlineText.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/examples/position1.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/link/index.mdx (83%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/badge.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/collapsable.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/collapsed.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/groups.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/icons.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/examples/separator.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/navigation/index.mdx (75%) rename apps/docs/src/content/{04-components => components}/navigation/tab-navigation/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/tab-navigation/examples/layout-card.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/tab-navigation/examples/overflow.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/tab-navigation/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/navigation/tab-navigation/index.mdx (83%) rename apps/docs/src/content/{04-components => components}/overlays/contextual-help/examples/combine.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/contextual-help/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/contextual-help/index.mdx (73%) rename apps/docs/src/content/{04-components => components}/overlays/light-box/examples/actions.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/light-box/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/light-box/examples/fitScreenFalse.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/light-box/examples/gallery.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/light-box/examples/imageTrigger.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/light-box/index.mdx (75%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/confirmOnClose.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/controller.tsx (94%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/default.tsx (92%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/form.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/offCanvas.tsx (97%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/showCloseButton.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/modal/examples/size.tsx (99%) rename apps/docs/src/content/{04-components => components}/overlays/modal/index.mdx (94%) rename apps/docs/src/content/{04-components => components}/overlays/tooltip/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/tooltip/examples/delay.tsx (100%) rename apps/docs/src/content/{04-components => components}/overlays/tooltip/index.mdx (92%) rename apps/docs/src/content/{04-components => components}/react-hook-form/field/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/field/examples/typed-field.tsx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/field/index.mdx (85%) rename apps/docs/src/content/{04-components => components}/react-hook-form/form-root-error/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/form-root-error/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/form/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/form/examples/resetOnSubmit.tsx (92%) rename apps/docs/src/content/{04-components => components}/react-hook-form/form/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/submit-button/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/react-hook-form/submit-button/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/status/alert-badge/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert-badge/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert-badge/index.mdx (87%) rename apps/docs/src/content/{04-components => components}/status/alert-text/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert-text/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert-text/index.mdx (84%) rename apps/docs/src/content/{04-components => components}/status/alert/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert/examples/page.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert/examples/section.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert/examples/with-content.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/alert/index.mdx (80%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/colors.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/disabled.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/onClose.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/onPress.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/examples/scope.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/badge/index.mdx (77%) rename apps/docs/src/content/{04-components => components}/status/counter-badge/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/counter-badge/examples/high-number.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/counter-badge/examples/with-button.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/counter-badge/examples/without-content.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/counter-badge/index.mdx (94%) rename apps/docs/src/content/{04-components => components}/status/loading-spinner/examples/dark.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/loading-spinner/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/loading-spinner/examples/light.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/loading-spinner/index.mdx (77%) rename apps/docs/src/content/{04-components => components}/status/notification-provider/examples/auto-close.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/notification-provider/examples/closeById.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/notification-provider/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/notification-provider/examples/provider.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/notification-provider/index.mdx (93%) rename apps/docs/src/content/{04-components => components}/status/notification/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/notification/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/notification/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/decimal.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/maxValue.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/segments.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/examples/unit.tsx (100%) rename apps/docs/src/content/{04-components => components}/status/progress-bar/index.mdx (97%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/backgroundImage.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/baseColor.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/brandColor.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/customColor.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/gradient.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/layoutCard.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/examples/link.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accent-box/index.mdx (75%) rename apps/docs/src/content/{04-components => components}/structure/accordion/examples/default-expanded.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accordion/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accordion/examples/label.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accordion/examples/outline.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/accordion/index.mdx (74%) rename apps/docs/src/content/{04-components => components}/structure/align/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/align/index.mdx (59%) rename apps/docs/src/content/{04-components => components}/structure/column-layout/examples/columns.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/column-layout/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/column-layout/examples/gaps.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/column-layout/examples/hidden-columns.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/column-layout/index.mdx (95%) rename apps/docs/src/content/{04-components => components}/structure/combine/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/combine/examples/icon-text.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/combine/examples/input-button.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/combine/examples/text-contextual-help.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/combine/examples/text-copy-button.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/combine/index.mdx (72%) rename apps/docs/src/content/{04-components => components}/structure/flex/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/flex/examples/layoutCard.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/flex/examples/listItem.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/flex/index.mdx (71%) rename apps/docs/src/content/{04-components => components}/structure/layout-card/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/layout-card/examples/tab-navigation.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/layout-card/index.mdx (67%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/actionGroup.tsx (92%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/customEmptyView.tsx (86%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/default.tsx (97%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/domainApi.ts (100%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/filter.tsx (97%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/filterDateRange.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-accordion.tsx (92%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-action-group.tsx (94%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-checkbox.tsx (97%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-column-layout-hidden.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-column-layout.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-content.tsx (93%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/item-link.tsx (92%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/loadingView.tsx (95%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/mobile.tsx (97%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/mode-list.tsx (95%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/mode-table.tsx (95%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/mode-tile.tsx (95%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/namingDo.tsx (96%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/namingDont.tsx (97%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/sortingDo.tsx (96%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/sortingDont.tsx (95%) rename apps/docs/src/content/{04-components => components}/structure/list/examples/summary.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/list/index.mdx (89%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/alert-badge.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/context-menu.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/link.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/multiple.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/sub-heading.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/examples/switch.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/section/index.mdx (58%) rename apps/docs/src/content/{04-components => components}/structure/separator/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/separator/examples/vertical.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/separator/index.mdx (81%) rename apps/docs/src/content/{04-components => components}/structure/table/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/table/examples/fixed-column-widths.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/table/examples/horizontally-centered.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/table/examples/vertically-centered.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/table/examples/withFooter.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/table/index.mdx (100%) rename apps/docs/src/content/{04-components => components}/structure/tabs/examples/collapsed.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/tabs/examples/default-selected.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/tabs/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/tabs/examples/status.tsx (100%) rename apps/docs/src/content/{04-components => components}/structure/tabs/index.mdx (87%) rename apps/docs/src/content/{04-components => components}/upload/file-card-list/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card-list/examples/fileDropZone.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card-list/index.mdx (87%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/buttons.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/contextMenu.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/delete.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/failed.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/image.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/link.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/examples/progressBar.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-card/index.mdx (71%) rename apps/docs/src/content/{04-components => components}/upload/file-drop-zone/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-drop-zone/examples/fileCardList.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-drop-zone/examples/multiple.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-drop-zone/examples/type.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/file-drop-zone/index.mdx (75%) rename apps/docs/src/content/{04-components => components}/upload/image-cropper/examples/aspect.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/image-cropper/examples/crop-shape.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/image-cropper/examples/default.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/image-cropper/examples/file-drop-zone.tsx (96%) rename apps/docs/src/content/{04-components => components}/upload/image-cropper/examples/size.tsx (100%) rename apps/docs/src/content/{04-components => components}/upload/image-cropper/index.mdx (93%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/03-fehlermeldungen => foundations/content-guidelines/fehlermeldungen}/index.mdx (100%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/02-informationskonzept => foundations/content-guidelines/informationskonzept}/examples/alert.tsx (100%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/02-informationskonzept => foundations/content-guidelines/informationskonzept}/examples/alertBadge.tsx (100%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/02-informationskonzept => foundations/content-guidelines/informationskonzept}/examples/notification.tsx (100%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/02-informationskonzept => foundations/content-guidelines/informationskonzept}/examples/tabs.tsx (100%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/02-informationskonzept => foundations/content-guidelines/informationskonzept}/index.mdx (66%) rename apps/docs/src/content/{02-foundations/03-content-guidelines/01-sprach-guide => foundations/content-guidelines/sprach-guide}/index.mdx (100%) rename apps/docs/src/content/{02-foundations/01-design/04-accessibility => foundations/design/accessibility}/index.mdx (96%) rename apps/docs/src/content/{02-foundations/01-design/02-colors => foundations/design/colors}/index.mdx (96%) rename apps/docs/src/content/{02-foundations/01-design/01-design-tokens => foundations/design/design-tokens}/examples/schema.tsx (100%) rename apps/docs/src/content/{02-foundations/01-design/01-design-tokens => foundations/design/design-tokens}/index.mdx (95%) rename apps/docs/src/content/{02-foundations/01-design/03-themes => foundations/design/themes}/examples/alpha-dark.tsx (100%) rename apps/docs/src/content/{02-foundations/01-design/03-themes => foundations/design/themes}/examples/alpha-light.tsx (100%) rename apps/docs/src/content/{02-foundations/01-design/03-themes => foundations/design/themes}/index.mdx (97%) rename apps/docs/src/content/{02-foundations/01-design/05-typography => foundations/design/typography}/index.mdx (90%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/avatar-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/avatar-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/chart-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/chart-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/content-fragment-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/content-fragment-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/context-menu-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/context-menu-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/field-fragment-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/illustrated-message-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/illustrated-message-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/layout-card-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/layout-card-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/modal-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/modal-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/section-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/section-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/text-error.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/examples/text-loading.tsx (100%) rename apps/docs/src/content/{02-foundations/04-internal/01-boundaries => foundations/internal/boundaries}/index.mdx (89%) rename apps/docs/src/content/{02-foundations/02-structure/03-components => foundations/structure/components}/index.mdx (94%) rename apps/docs/src/content/{02-foundations/02-structure/01-layout => foundations/structure/layout}/examples/general-layout.tsx (100%) rename apps/docs/src/content/{02-foundations/02-structure/01-layout => foundations/structure/layout}/examples/mStudio-layout.tsx (100%) rename apps/docs/src/content/{02-foundations/02-structure/01-layout => foundations/structure/layout}/index.mdx (67%) rename apps/docs/src/content/{02-foundations/02-structure/02-spacing => foundations/structure/spacing}/examples/falseSpacing.tsx (100%) rename apps/docs/src/content/{02-foundations/02-structure/02-spacing => foundations/structure/spacing}/examples/rightSpacing.tsx (100%) rename apps/docs/src/content/{02-foundations/02-structure/02-spacing => foundations/structure/spacing}/index.mdx (90%) rename apps/docs/src/content/{01-get-started => get-started}/installation/index.mdx (88%) rename apps/docs/src/content/{01-get-started => get-started}/stylesheet/examples/components/ExampleSvg.tsx (100%) rename apps/docs/src/content/{01-get-started => get-started}/stylesheet/examples/composition.tsx (84%) rename apps/docs/src/content/{01-get-started => get-started}/stylesheet/examples/multiple-variants.tsx (100%) rename apps/docs/src/content/{01-get-started => get-started}/stylesheet/examples/variants.tsx (100%) rename apps/docs/src/content/{01-get-started => get-started}/stylesheet/index.mdx (95%) rename apps/docs/src/content/{01-get-started => get-started}/versioning/index.mdx (100%) rename apps/docs/src/content/{03-patterns/02-codesnippets => patterns/codesnippets}/multi-upload/examples/default.tsx (100%) rename apps/docs/src/content/{03-patterns/02-codesnippets => patterns/codesnippets}/multi-upload/index.mdx (67%) rename apps/docs/src/content/{03-patterns/02-codesnippets => patterns/codesnippets}/zeitintervalle/examples/default.tsx (100%) rename apps/docs/src/content/{03-patterns/02-codesnippets => patterns/codesnippets}/zeitintervalle/index.mdx (81%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/app-details.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/app-illustrated-message.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/create-container.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/domain-list.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/install-app.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/install-extension.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/project-illustrated-message.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/examples/project-list.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/anlegeprozess/index.mdx (68%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/dashboard/examples/customer-dashboard.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/dashboard/examples/dashboard.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/dashboard/examples/project-dashboard.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/dashboard/index.mdx (76%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/detail-page/examples/detail-page.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/detail-page/index.mdx (64%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/errorhandling/examples/alert-text.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/errorhandling/examples/illustrated-message.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/errorhandling/examples/modal.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/errorhandling/index.mdx (67%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/forms/examples/form.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/forms/examples/validation.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/forms/index.mdx (70%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/list-tile-table/examples/domain-list.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/list-tile-table/examples/project-list-empty.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/list-tile-table/examples/project-list.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/list-tile-table/examples/server-list.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/list-tile-table/examples/ticket-list.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/list-tile-table/index.mdx (62%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/navigation/examples/navigation.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/navigation/examples/tab-navigation.tsx (100%) rename apps/docs/src/content/{03-patterns/01-patterns => patterns/patterns}/navigation/index.mdx (81%) create mode 100644 apps/docs/src/lib/content/contentOrder.test.ts create mode 100644 apps/docs/src/lib/content/contentOrder.ts diff --git a/.github/scripts/release-relevance-lib.test.mjs b/.github/scripts/release-relevance-lib.test.mjs index 1e830217c4..7bd5ecabe9 100644 --- a/.github/scripts/release-relevance-lib.test.mjs +++ b/.github/scripts/release-relevance-lib.test.mjs @@ -12,7 +12,7 @@ test("isPublishRelevant: docs, CI and tooling paths are irrelevant", () => { ".github/workflows/publish.yml", ".github/scripts/release-relevance-lib.mjs", ".github/ISSUE_TEMPLATE/bug_report.yml", - "apps/docs/src/content/04-components/button.mdx", + "apps/docs/src/content/components/button.mdx", "apps/remote-dom-demo/src/App.tsx", "docs/adr/0005-semver-contract.md", "docs/remote-ui.md", @@ -91,7 +91,7 @@ test("classifyChangedFiles: docs-only and CI-only pushes do not publish", () => // #2870 "docs: fix heading spacing" → 0.2.0-alpha.1044 assert.equal( classifyChangedFiles([ - "apps/docs/src/content/01-foundations/typography.mdx", + "apps/docs/src/content/foundations/typography.mdx", "apps/docs/src/app/globals.css", ]).publish, false, @@ -108,7 +108,7 @@ test("classifyChangedFiles: docs-only and CI-only pushes do not publish", () => test("classifyChangedFiles: a mixed push publishes", () => { const result = classifyChangedFiles([ - "apps/docs/src/content/04-components/button.mdx", + "apps/docs/src/content/components/button.mdx", ".github/workflows/test.yml", "packages/components/src/components/Button/Button.tsx", ]); @@ -160,8 +160,8 @@ test("classifyChangedFiles: square brackets are legitimate path characters", () // Next.js dynamic routes in the docs app — docs-only, must still skip. assert.equal( classifyChangedFiles([ - "apps/docs/src/app/04-components/[group]/[component]/develop/page.tsx", - "apps/docs/src/app/01-get-started/[...slug]/page.tsx", + "apps/docs/src/app/components/[group]/[component]/develop/page.tsx", + "apps/docs/src/app/get-started/[...slug]/page.tsx", ]).publish, false, ); diff --git a/AGENTS.md b/AGENTS.md index d1e653ce01..046bdc42e4 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -200,7 +200,7 @@ A new or substantially changed component comes with: [packages/components/AGENTS.md](packages/components/AGENTS.md) 2. Stories: `stories/Default.stories.tsx` with realistic args and meaningful variants -3. A docs page in `apps/docs/src/content/04-components//…` +3. A docs page in `apps/docs/src/content/components//…` 4. Tests along the testing bar: unit tests for lib functions, browser tests for behavior (see the components AGENTS.md testing section). **New or changed rendered behavior (a new prop, variant, or layout that affects the visual diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md index bf316d2622..02d6a655a3 100644 --- a/CONTRIBUTE.md +++ b/CONTRIBUTE.md @@ -469,8 +469,8 @@ that automatically when no label is given). ### 9. Document it on the docs site -Add a doc set under `apps/docs/src/content/04-components///` -(the content is **not** colocated with the component — copy the structure of a +Add a doc set under `apps/docs/src/content/components///` (the +content is **not** colocated with the component — copy the structure of a neighbor like `actions/button/`): - `index.mdx` — frontmatter `component: Badge` + a `description:` diff --git a/README.md b/README.md index a5875cba01..9888ffca8f 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ export default function App() { Prefer to override Flow's styles without specificity tricks? Import the [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) variant instead — `@mittwald/flow-react-components/all-layered.css`. See the -[stylesheet guide](https://flow.mittwald.de/01-get-started/stylesheet#layered-variante-optional) +[stylesheet guide](https://flow.mittwald.de/get-started/stylesheet#layered-variante-optional) for when to use which. Set application-wide component defaults once by wrapping your app in diff --git a/apps/docs/AGENTS.md b/apps/docs/AGENTS.md index b117c695be..ae78d34e08 100644 --- a/apps/docs/AGENTS.md +++ b/apps/docs/AGENTS.md @@ -8,11 +8,20 @@ Next.js documentation site for the flow Styleguide, deployed to the section and page structures, heading conventions, tone of voice, and language rules (German content, English Design System terminology). - Content lives in `src/content` as MDX, one directory per section - (`01-get-started`, `02-foundations`, `03-patterns`, `04-components`). A - component page is a single `index.mdx` — the former `overview`, `develop` and - `guidelines` tabs are consolidated onto it. Their routes under - `src/app/04-components/[group]/[component]/` are `redirect()`-only, kept so + (`get-started`, `foundations`, `patterns`, `components`). A component page is + a single `index.mdx` — the former `overview`, `develop` and `guidelines` tabs + are consolidated onto it. Their routes under + `src/app/components/[group]/[component]/` are `redirect()`-only, kept so existing links (and their fragments) keep working. +- **Directory names are the public URL**, and they carry no order. The authored + order lives in `src/lib/content/contentOrder.ts` — a flat list of pathnames + that the navigation, the header, `llms.txt` and the sitemap all sort by. + Unlisted entries sort alphabetically by label (the components, deliberately). + `contentOrder.test.ts` rejects a stale entry and a group that lists only some + of its children; the latter is the silent half-ordered case. +- The sections lost their `NN-` prefixes, so `nginx.conf` carries a `rewrite` + that strips such a prefix from any segment and 301s. Old links keep working — + do not write new ones against the old paths. - Code examples are `.tsx` files in the `examples/` directory next to the MDX file, referenced via `example=""` (see "Page Building Blocks" in the README). diff --git a/apps/docs/README.md b/apps/docs/README.md index 4f170d4167..944231c005 100644 --- a/apps/docs/README.md +++ b/apps/docs/README.md @@ -16,8 +16,14 @@ The Styleguide is available at: https://flow.mittwald.de/ All content lives in `src/content`, organized in one directory per section -(`01-get-started`, `02-foundations`, `03-patterns`, `04-components`). Pages are -written in MDX. +(`get-started`, `foundations`, `patterns`, `components`). Pages are written in +MDX. Directory names are the URL — a page's path is its directory path. + +The order sections and their groups appear in is authored explicitly in +`src/lib/content/contentOrder.ts`; anything not listed there sorts +alphabetically by its label, which is what the components do. Add a page to an +ordered group and you add it to that list — a test fails if a group ends up half +listed. ## Styleguide Structure @@ -247,7 +253,7 @@ each with a link to that Component's page and its own example (Button: names both and one example shows them together. - **`## React Hook Form` is the fixed convention** for form-capable Components: always add it, linking to the - [Form (React Hook Form)](/04-components/react-hook-form/form) page. A simple + [Form (React Hook Form)](/components/react-hook-form/form) page. A simple toggle-style Component that ships no dedicated form example (for example Switch) may omit it. @@ -417,9 +423,9 @@ code identifiers. Use inline links generously to connect related documentation. - Component names in prose link to the Component's page: - `[Section](/04-components/structure/section)`. -- Links are root-relative (starting with `/01-get-started`, `/02-foundations`, - `/03-patterns`, or `/04-components`). + `[Section](/components/structure/section)`. +- Links are root-relative (starting with `/get-started`, `/foundations`, + `/patterns`, or `/components`). - Verify a link target exists before adding it, and avoid linking to the same page multiple times within a short section unless it improves readability. diff --git a/apps/docs/nginx.conf b/apps/docs/nginx.conf index 42d67a8936..ce9e394e2f 100644 --- a/apps/docs/nginx.conf +++ b/apps/docs/nginx.conf @@ -7,6 +7,14 @@ server { charset utf-8; charset_types text/plain text/markdown text/css text/xml application/javascript application/json; + # The content paths dropped their numeric prefixes, so links written before + # that rename point at pages which no longer exist. Strip the prefix from + # any segment and redirect — `/raw/**` included. A path carrying several + # prefixes converges over as many hops; the new paths never match, so this + # terminates. `/_next/` is excluded because build chunks are named + # `-.js` and must not be rewritten. + rewrite "^(?!/_next/)(.*/)[0-9]{2}-(.*)$" $1$2 permanent; + location ~ \.md$ { types { text/markdown md; diff --git a/apps/docs/src/app/04-components/_components/wireframe/registry.ts b/apps/docs/src/app/04-components/_components/wireframe/registry.ts deleted file mode 100644 index cfe1411415..0000000000 --- a/apps/docs/src/app/04-components/_components/wireframe/registry.ts +++ /dev/null @@ -1,185 +0,0 @@ -"use client"; -import type { FC } from "react"; -import { PlaceholderWireframe } from "@/app/04-components/_components/wireframe/PlaceholderWireframe"; -import { AccordionWireframe } from "@/app/04-components/_components/wireframe/wireframes/Accordion"; -import { AccentBoxWireframe } from "@/app/04-components/_components/wireframe/wireframes/AccentBox"; -import { ActionGroupWireframe } from "@/app/04-components/_components/wireframe/wireframes/ActionGroup"; -import { ActionWireframe } from "@/app/04-components/_components/wireframe/wireframes/Action"; -import { AlertBadgeWireframe } from "@/app/04-components/_components/wireframe/wireframes/AlertBadge"; -import { AlertTextWireframe } from "@/app/04-components/_components/wireframe/wireframes/AlertText"; -import { AlertWireframe } from "@/app/04-components/_components/wireframe/wireframes/Alert"; -import { AutocompleteWireframe } from "@/app/04-components/_components/wireframe/wireframes/Autocomplete"; -import { AvatarStackWireframe } from "@/app/04-components/_components/wireframe/wireframes/AvatarStack"; -import { AvatarWireframe } from "@/app/04-components/_components/wireframe/wireframes/Avatar"; -import { BadgeWireframe } from "@/app/04-components/_components/wireframe/wireframes/Badge"; -import { BigNumberWireframe } from "@/app/04-components/_components/wireframe/wireframes/BigNumber"; -import { BreadcrumbWireframe } from "@/app/04-components/_components/wireframe/wireframes/Breadcrumb"; -import { ButtonWireframe } from "@/app/04-components/_components/wireframe/wireframes/Button"; -import { CartesianChartWireframe } from "@/app/04-components/_components/wireframe/wireframes/CartesianChart"; -import { ChatWireframe } from "@/app/04-components/_components/wireframe/wireframes/Chat"; -import { CheckboxButtonWireframe } from "@/app/04-components/_components/wireframe/wireframes/CheckboxButton"; -import { CheckboxGroupWireframe } from "@/app/04-components/_components/wireframe/wireframes/CheckboxGroup"; -import { CheckboxWireframe } from "@/app/04-components/_components/wireframe/wireframes/Checkbox"; -import { CodeBlockWireframe } from "@/app/04-components/_components/wireframe/wireframes/CodeBlock"; -import { CodeEditorWireframe } from "@/app/04-components/_components/wireframe/wireframes/CodeEditor"; -import { ColorWireframe } from "@/app/04-components/_components/wireframe/wireframes/Color"; -import { ColumnLayoutWireframe } from "@/app/04-components/_components/wireframe/wireframes/ColumnLayout"; -import { CombineWireframe } from "@/app/04-components/_components/wireframe/wireframes/Combine"; -import { ComboBoxWireframe } from "@/app/04-components/_components/wireframe/wireframes/ComboBox"; -import { ContextMenuWireframe } from "@/app/04-components/_components/wireframe/wireframes/ContextMenu"; -import { ContextualHelpWireframe } from "@/app/04-components/_components/wireframe/wireframes/ContextualHelp"; -import { CopyButtonWireframe } from "@/app/04-components/_components/wireframe/wireframes/CopyButton"; -import { CounterBadgeWireframe } from "@/app/04-components/_components/wireframe/wireframes/CounterBadge"; -import { DatePickerWireframe } from "@/app/04-components/_components/wireframe/wireframes/DatePicker"; -import { DateRangePickerWireframe } from "@/app/04-components/_components/wireframe/wireframes/DateRangePicker"; -import { DonutChartWireframe } from "@/app/04-components/_components/wireframe/wireframes/DonutChart"; -import { FieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/Field"; -import { FileCardListWireframe } from "@/app/04-components/_components/wireframe/wireframes/FileCardList"; -import { FileCardWireframe } from "@/app/04-components/_components/wireframe/wireframes/FileCard"; -import { FileDropZoneWireframe } from "@/app/04-components/_components/wireframe/wireframes/FileDropZone"; -import { FileFieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/FileField"; -import { FlexWireframe } from "@/app/04-components/_components/wireframe/wireframes/Flex"; -import { FormRootErrorWireframe } from "@/app/04-components/_components/wireframe/wireframes/FormRootError"; -import { FormWireframe } from "@/app/04-components/_components/wireframe/wireframes/Form"; -import { HeaderNavigationWireframe } from "@/app/04-components/_components/wireframe/wireframes/HeaderNavigation"; -import { HeadingWireframe } from "@/app/04-components/_components/wireframe/wireframes/Heading"; -import { IconWireframe } from "@/app/04-components/_components/wireframe/wireframes/Icon"; -import { IllustratedMessageWireframe } from "@/app/04-components/_components/wireframe/wireframes/IllustratedMessage"; -import { ImageCropperWireframe } from "@/app/04-components/_components/wireframe/wireframes/ImageCropper"; -import { ImageWireframe } from "@/app/04-components/_components/wireframe/wireframes/Image"; -import { InlineCodeWireframe } from "@/app/04-components/_components/wireframe/wireframes/InlineCode"; -import { KbdWireframe } from "@/app/04-components/_components/wireframe/wireframes/Kbd"; -import { LabelWireframe } from "@/app/04-components/_components/wireframe/wireframes/Label"; -import { LabeledValueWireframe } from "@/app/04-components/_components/wireframe/wireframes/LabeledValue"; -import { LayoutCardWireframe } from "@/app/04-components/_components/wireframe/wireframes/LayoutCard"; -import { LightBoxWireframe } from "@/app/04-components/_components/wireframe/wireframes/LightBox"; -import { LinkWireframe } from "@/app/04-components/_components/wireframe/wireframes/Link"; -import { ListWireframe } from "@/app/04-components/_components/wireframe/wireframes/List"; -import { LoadingSpinnerWireframe } from "@/app/04-components/_components/wireframe/wireframes/LoadingSpinner"; -import { MarkdownEditorWireframe } from "@/app/04-components/_components/wireframe/wireframes/MarkdownEditor"; -import { MarkdownWireframe } from "@/app/04-components/_components/wireframe/wireframes/Markdown"; -import { MessageThreadWireframe } from "@/app/04-components/_components/wireframe/wireframes/MessageThread"; -import { MessageWireframe } from "@/app/04-components/_components/wireframe/wireframes/Message"; -import { ModalWireframe } from "@/app/04-components/_components/wireframe/wireframes/Modal"; -import { NavigationWireframe } from "@/app/04-components/_components/wireframe/wireframes/Navigation"; -import { NotificationWireframe } from "@/app/04-components/_components/wireframe/wireframes/Notification"; -import { NumberFieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/NumberField"; -import { PasswordCreationFieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/PasswordCreationField"; -import { ProgressBarWireframe } from "@/app/04-components/_components/wireframe/wireframes/ProgressBar"; -import { RadioGroupWireframe } from "@/app/04-components/_components/wireframe/wireframes/RadioGroup"; -import { RatingWireframe } from "@/app/04-components/_components/wireframe/wireframes/Rating"; -import { SearchFieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/SearchField"; -import { SectionWireframe } from "@/app/04-components/_components/wireframe/wireframes/Section"; -import { SegmentedControlWireframe } from "@/app/04-components/_components/wireframe/wireframes/SegmentedControl"; -import { SelectWireframe } from "@/app/04-components/_components/wireframe/wireframes/Select"; -import { SeparatorWireframe } from "@/app/04-components/_components/wireframe/wireframes/Separator"; -import { SkeletonTextWireframe } from "@/app/04-components/_components/wireframe/wireframes/SkeletonText"; -import { SkeletonWireframe } from "@/app/04-components/_components/wireframe/wireframes/Skeleton"; -import { SliderWireframe } from "@/app/04-components/_components/wireframe/wireframes/Slider"; -import { SubmitButtonWireframe } from "@/app/04-components/_components/wireframe/wireframes/SubmitButton"; -import { SwitchWireframe } from "@/app/04-components/_components/wireframe/wireframes/Switch"; -import { TabNavigationWireframe } from "@/app/04-components/_components/wireframe/wireframes/TabNavigation"; -import { TableWireframe } from "@/app/04-components/_components/wireframe/wireframes/Table"; -import { TabsWireframe } from "@/app/04-components/_components/wireframe/wireframes/Tabs"; -import { TextAreaWireframe } from "@/app/04-components/_components/wireframe/wireframes/TextArea"; -import { TextFieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/TextField"; -import { TextWireframe } from "@/app/04-components/_components/wireframe/wireframes/Text"; -import { TimeFieldWireframe } from "@/app/04-components/_components/wireframe/wireframes/TimeField"; -import { TooltipWireframe } from "@/app/04-components/_components/wireframe/wireframes/Tooltip"; -import { TruncateWireframe } from "@/app/04-components/_components/wireframe/wireframes/Truncate"; -import NotificationProviderWireframe from "@/app/04-components/_components/wireframe/wireframes/NotificationProvider"; - -const wireframes: Record = { - accordion: AccordionWireframe, - "accent-box": AccentBoxWireframe, - "action-group": ActionGroupWireframe, - action: ActionWireframe, - "alert-badge": AlertBadgeWireframe, - "alert-text": AlertTextWireframe, - alert: AlertWireframe, - // `align` is the deprecated name of `combine` and shares its wireframe. - align: CombineWireframe, - autocomplete: AutocompleteWireframe, - "avatar-stack": AvatarStackWireframe, - avatar: AvatarWireframe, - badge: BadgeWireframe, - "big-number": BigNumberWireframe, - breadcrumb: BreadcrumbWireframe, - button: ButtonWireframe, - "cartesian-chart": CartesianChartWireframe, - chat: ChatWireframe, - "checkbox-button": CheckboxButtonWireframe, - "checkbox-group": CheckboxGroupWireframe, - checkbox: CheckboxWireframe, - "code-block": CodeBlockWireframe, - "code-editor": CodeEditorWireframe, - color: ColorWireframe, - "column-layout": ColumnLayoutWireframe, - combine: CombineWireframe, - "combo-box": ComboBoxWireframe, - "context-menu": ContextMenuWireframe, - "contextual-help": ContextualHelpWireframe, - "copy-button": CopyButtonWireframe, - "counter-badge": CounterBadgeWireframe, - "date-picker": DatePickerWireframe, - "date-range-picker": DateRangePickerWireframe, - "donut-chart": DonutChartWireframe, - field: FieldWireframe, - "file-card-list": FileCardListWireframe, - "file-card": FileCardWireframe, - "file-drop-zone": FileDropZoneWireframe, - "file-field": FileFieldWireframe, - flex: FlexWireframe, - "form-root-error": FormRootErrorWireframe, - form: FormWireframe, - "header-navigation": HeaderNavigationWireframe, - heading: HeadingWireframe, - icon: IconWireframe, - "illustrated-message": IllustratedMessageWireframe, - "image-cropper": ImageCropperWireframe, - image: ImageWireframe, - "inline-code": InlineCodeWireframe, - kbd: KbdWireframe, - label: LabelWireframe, - "labeled-value": LabeledValueWireframe, - "layout-card": LayoutCardWireframe, - "light-box": LightBoxWireframe, - link: LinkWireframe, - list: ListWireframe, - "loading-spinner": LoadingSpinnerWireframe, - "markdown-editor": MarkdownEditorWireframe, - markdown: MarkdownWireframe, - "message-thread": MessageThreadWireframe, - message: MessageWireframe, - modal: ModalWireframe, - navigation: NavigationWireframe, - notification: NotificationWireframe, - "notification-provider": NotificationProviderWireframe, - "number-field": NumberFieldWireframe, - "password-creation-field": PasswordCreationFieldWireframe, - "progress-bar": ProgressBarWireframe, - "radio-group": RadioGroupWireframe, - rating: RatingWireframe, - "search-field": SearchFieldWireframe, - section: SectionWireframe, - "segmented-control": SegmentedControlWireframe, - select: SelectWireframe, - separator: SeparatorWireframe, - "skeleton-text": SkeletonTextWireframe, - skeleton: SkeletonWireframe, - slider: SliderWireframe, - "submit-button": SubmitButtonWireframe, - switch: SwitchWireframe, - "tab-navigation": TabNavigationWireframe, - table: TableWireframe, - tabs: TabsWireframe, - "text-area": TextAreaWireframe, - "text-field": TextFieldWireframe, - text: TextWireframe, - "time-field": TimeFieldWireframe, - tooltip: TooltipWireframe, - truncate: TruncateWireframe, -}; - -export const getWireframe = (slug: string): FC => - wireframes[slug] ?? PlaceholderWireframe; diff --git a/apps/docs/src/app/_components/layout/DocsSearch/SearchDialog.tsx b/apps/docs/src/app/_components/layout/DocsSearch/SearchDialog.tsx index 48f8f03b30..4f79d635e9 100644 --- a/apps/docs/src/app/_components/layout/DocsSearch/SearchDialog.tsx +++ b/apps/docs/src/app/_components/layout/DocsSearch/SearchDialog.tsx @@ -39,7 +39,7 @@ const RESULT_LIMIT = 20; const DEFAULT_SECTIONS = [ { - segment: "01-get-started", + segment: "get-started", title: "Get started", description: "Alles für den Einstieg in flow – von den wichtigsten Grundlagen bis zu ersten Schritten für einen schnellen Start.", @@ -51,19 +51,19 @@ const DEFAULT_SECTIONS = [ "Die veröffentlichten Flow-Releases mit Highlights, Migrationshinweisen und den enthaltenen Fixes.", }, { - segment: "02-foundations", + segment: "foundations", title: "Foundations", description: "Die Grundlagen des Designsystems – von Designprinzipien bis zu Farben, Typografie und weiteren Basisbausteinen.", }, { - segment: "03-patterns", + segment: "patterns", title: "Patterns", description: "Wiederkehrende Nutzerabläufe und Best Practices, die zeigen, wie mehrere Components sinnvoll zusammenspielen.", }, { - segment: "04-components", + segment: "components", title: "Components", description: "Die Dokumentation aller Components mit Beschreibungen, Eigenschaften, Anwendungsfällen und Implementierungshinweisen.", diff --git a/apps/docs/src/app/_components/layout/Groups/Groups.tsx b/apps/docs/src/app/_components/layout/Groups/Groups.tsx index fe722f1078..2860669b31 100644 --- a/apps/docs/src/app/_components/layout/Groups/Groups.tsx +++ b/apps/docs/src/app/_components/layout/Groups/Groups.tsx @@ -5,24 +5,14 @@ import { groupBy } from "remeda"; import { usePathname } from "next/navigation"; import { GroupText } from "@/app/_components/layout/MainNavigation/components/GroupText"; import { Link, MenuItem } from "@mittwald/flow-react-components"; +import { byContentOrder } from "@/lib/content/contentOrder"; interface Props { docs: SerializedMdxFile[]; render?: "menuItem" | "link"; } -const SECTION_ORDER = [ - "01-get-started", - "releases", - "02-foundations", - "03-patterns", - "04-components", -]; - -const orderIndex = (group: string): number => { - const i = SECTION_ORDER.indexOf(group); - return i === -1 ? SECTION_ORDER.length : i; -}; +const componentsSection = "components"; export const Groups: FC = (props) => { const { docs, render = "link" } = props; @@ -31,14 +21,23 @@ export const Groups: FC = (props) => { const navGroups = groupBy(deserializedDocs, (d) => d.pathname.split("/")[1]); - const currentPathname = usePathname(); + // Compared segment by segment: `/foundations/structure/components` must not + // mark the Components section as the current one. + const currentSection = usePathname().split("/")[1]; return Object.entries(navGroups) - .sort(([a], [b]) => orderIndex(a) - orderIndex(b)) + .sort(([a], [b]) => byContentOrder(`/${a}`, `/${b}`)) .map(([group, mdxFiles]) => { - const pathname = mdxFiles[0].pathname; - const isComponent = pathname.includes("04-components"); - const href = isComponent ? "/04-components" : pathname; + // The files arrive in filesystem order, which is alphabetical — back + // when the directories were numbered that happened to be the authored + // order too. It no longer is, so the first page is picked explicitly. + const pathname = mdxFiles + .map((mdxFile) => mdxFile.pathname) + .sort((a, b) => byContentOrder(a, b) || a.localeCompare(b))[0]; + + // The components have an overview page of their own; every other section + // links straight at its first page. + const href = group === componentsSection ? `/${group}` : pathname; if (render === "menuItem") { return ( @@ -52,7 +51,7 @@ export const Groups: FC = (props) => { {group} diff --git a/apps/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx b/apps/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx index 6652c95e3e..1fc3caf11d 100644 --- a/apps/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx +++ b/apps/docs/src/app/_components/layout/MainNavigation/MainNavigation.tsx @@ -34,7 +34,7 @@ import { } from "@/app/_components/layout/MainNavigation/components/GroupExpansion"; import { GroupExpansionButton } from "@/app/_components/layout/MainNavigation/components/GroupExpansionButton"; -const componentsPathSegment = "04-components"; +const componentsPathSegment = "components"; interface Props { docs: SerializedMdxFile[]; @@ -44,6 +44,8 @@ interface Props { interface NavigationSectionProps { tree: MdxDirectoryTree; group: string; + /** The section's own pathname, so its entries can look up their order. */ + path: string; } type TreeEntry = [string, MdxDirectoryTree | MdxFile]; @@ -77,24 +79,33 @@ const NavigationLink: FC = (props) => { ); }; -const sortableEntry = ([group, treeItem]: TreeEntry): SortableEntry => - treeItem instanceof MdxFile - ? { - label: treeItem.getNavTitle(), - pathSegment: group, - component: treeItem.mdxSource.frontmatter.component, - } - : { label: extractTextFromPath(group), pathSegment: group }; +/** + * A directory has no pathname of its own, so it is composed from the parent's; + * a file brings its own. + */ +const sortableEntry = + (parentPath: string) => + ([group, treeItem]: TreeEntry): SortableEntry => + treeItem instanceof MdxFile + ? { + label: treeItem.getNavTitle(), + path: treeItem.pathname, + component: treeItem.mdxSource.frontmatter.component, + } + : { + label: extractTextFromPath(group), + path: `${parentPath}/${group}`, + }; const sortableFile = (treeItem: MdxFile): SortableEntry => ({ label: treeItem.getNavTitle(), - pathSegment: treeItem.slugs.at(-1) ?? "", + path: treeItem.pathname, component: treeItem.mdxSource.frontmatter.component, }); -const sortEntries = (entries: TreeEntry[]): TreeEntry[] => +const sortEntries = (entries: TreeEntry[], parentPath: string): TreeEntry[] => [...entries].sort((a, b) => - compareEntries(sortableEntry(a), sortableEntry(b)), + compareEntries(sortableEntry(parentPath)(a), sortableEntry(parentPath)(b)), ); const collectMdxFiles = (entries: TreeEntry[]): MdxFile[] => @@ -104,17 +115,24 @@ const collectMdxFiles = (entries: TreeEntry[]): MdxFile[] => : collectMdxFiles(Object.entries(treeItem)), ); -const NavigationEntries: FC<{ entries: TreeEntry[] }> = (props) => - sortEntries(props.entries).map(([group, treeItem]) => +const NavigationEntries: FC<{ entries: TreeEntry[]; parentPath: string }> = ( + props, +) => + sortEntries(props.entries, props.parentPath).map(([group, treeItem]) => treeItem instanceof MdxFile ? ( ) : ( - + ), ); const NavigationSection: FC = (props) => { - const { tree, group } = props; + const { tree, group, path } = props; const groupExpansion = useGroupExpansion(); const currentPathname = usePathname(); @@ -136,7 +154,7 @@ const NavigationSection: FC = (props) => { - + ); }; @@ -160,7 +178,10 @@ const ComponentsNavigation: FC<{ tree: MdxDirectoryTree }> = (props) => { - + @@ -176,7 +197,10 @@ const ComponentsNavigation: FC<{ tree: MdxDirectoryTree }> = (props) => {
Integrations - +
@@ -209,7 +233,10 @@ const MainNavigation: FC = (props) => { aria-label={extractTextFromPath(mainPathSegment)} key={mainPathSegment} > - + )} diff --git a/apps/docs/src/app/_lib/compareEntries.ts b/apps/docs/src/app/_lib/compareEntries.ts index 173b829279..d68a2e0464 100644 --- a/apps/docs/src/app/_lib/compareEntries.ts +++ b/apps/docs/src/app/_lib/compareEntries.ts @@ -1,5 +1,6 @@ import { compareLabels } from "@/app/_lib/compareLabels"; import { compareDeprecatedLast } from "@/lib/componentStatus"; +import { byContentOrder } from "@/lib/content/contentOrder"; /** * What ordering needs to know about a navigation entry or an overview tile. @@ -9,31 +10,19 @@ import { compareDeprecatedLast } from "@/lib/componentStatus"; export interface SortableEntry { /** The rendered label. */ label: string; - /** The path segment; a numeric prefix ("01-design") is the author's order. */ - pathSegment: string; + /** The pathname, looked up in the authored order of the documentation. */ + path: string; /** Component display name, for the deprecated demotion. Absent for groups. */ component?: string; } -/** A numeric path prefix ("01-design") is the author's intended order. */ -const pathPrefix = (entry: SortableEntry): number | undefined => { - const prefix = /^(\d+)-/.exec(entry.pathSegment)?.[1]; - return prefix === undefined ? undefined : Number(prefix); -}; - -const comparePosition = (a: SortableEntry, b: SortableEntry): number => { - const prefixA = pathPrefix(a); - const prefixB = pathPrefix(b); - - return prefixA !== undefined && prefixB !== undefined - ? prefixA - prefixB - : compareLabels(a.label, b.label); -}; +const comparePosition = (a: SortableEntry, b: SortableEntry): number => + byContentOrder(a.path, b.path) || compareLabels(a.label, b.label); /** * The order of the component documentation: deprecated components last, then - * the author's numeric prefix, then the rendered label. Navigation and the - * component overview must agree, so both go through here. + * the authored order from `CONTENT_ORDER`, then the rendered label. Navigation + * and the component overview must agree, so both go through here. */ export const compareEntries = (a: SortableEntry, b: SortableEntry): number => compareDeprecatedLast(a.component, b.component) || comparePosition(a, b); diff --git a/apps/docs/src/app/_lib/extractTextFromPath.ts b/apps/docs/src/app/_lib/extractTextFromPath.ts index 5937d332bb..f40454091a 100644 --- a/apps/docs/src/app/_lib/extractTextFromPath.ts +++ b/apps/docs/src/app/_lib/extractTextFromPath.ts @@ -1,8 +1,4 @@ import humanizeString from "humanize-string"; -export const extractTextFromPath = (path: string) => { - return humanizeString(path.replaceAll(/^[0-9]+/g, "")).replace( - /(^|\s)\S/g, - (char) => char.toUpperCase(), - ); -}; +export const extractTextFromPath = (path: string) => + humanizeString(path).replace(/(^|\s)\S/g, (char) => char.toUpperCase()); diff --git a/apps/docs/src/app/_lib/integrationGroups.ts b/apps/docs/src/app/_lib/integrationGroups.ts index 979a5218bf..e58fed765c 100644 --- a/apps/docs/src/app/_lib/integrationGroups.ts +++ b/apps/docs/src/app/_lib/integrationGroups.ts @@ -1,6 +1,6 @@ /** - * Content groups under `04-components` that document an integration rather than - * a component. Navigation and the component overview both list them apart from + * Content groups under `components` that document an integration rather than a + * component. Navigation and the component overview both list them apart from * the components, so the set lives in one place. */ const integrationGroups = ["react-hook-form"]; diff --git a/apps/docs/src/app/04-components/[group]/[component]/guidelines/page.tsx b/apps/docs/src/app/components/[group]/[component]/develop/page.tsx similarity index 85% rename from apps/docs/src/app/04-components/[group]/[component]/guidelines/page.tsx rename to apps/docs/src/app/components/[group]/[component]/develop/page.tsx index 0a5d744ab0..82163b8431 100644 --- a/apps/docs/src/app/04-components/[group]/[component]/guidelines/page.tsx +++ b/apps/docs/src/app/components/[group]/[component]/develop/page.tsx @@ -2,7 +2,7 @@ import { redirect } from "next/navigation"; import type { StaticParams } from "@/lib/mdx/MdxFile"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; -const contentFolder = "src/content/04-components"; +const contentFolder = "src/content/components"; interface Props { params: Promise; @@ -22,5 +22,5 @@ export default async function Page(props: Props) { throw new Error("wrong parameter type"); } - redirect(`/04-components/${params.group}/${params.component}`); + redirect(`/components/${params.group}/${params.component}`); } diff --git a/apps/docs/src/app/04-components/[group]/[component]/overview/page.tsx b/apps/docs/src/app/components/[group]/[component]/guidelines/page.tsx similarity index 85% rename from apps/docs/src/app/04-components/[group]/[component]/overview/page.tsx rename to apps/docs/src/app/components/[group]/[component]/guidelines/page.tsx index 0a5d744ab0..82163b8431 100644 --- a/apps/docs/src/app/04-components/[group]/[component]/overview/page.tsx +++ b/apps/docs/src/app/components/[group]/[component]/guidelines/page.tsx @@ -2,7 +2,7 @@ import { redirect } from "next/navigation"; import type { StaticParams } from "@/lib/mdx/MdxFile"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; -const contentFolder = "src/content/04-components"; +const contentFolder = "src/content/components"; interface Props { params: Promise; @@ -22,5 +22,5 @@ export default async function Page(props: Props) { throw new Error("wrong parameter type"); } - redirect(`/04-components/${params.group}/${params.component}`); + redirect(`/components/${params.group}/${params.component}`); } diff --git a/apps/docs/src/app/04-components/[group]/[component]/develop/page.tsx b/apps/docs/src/app/components/[group]/[component]/overview/page.tsx similarity index 85% rename from apps/docs/src/app/04-components/[group]/[component]/develop/page.tsx rename to apps/docs/src/app/components/[group]/[component]/overview/page.tsx index 0a5d744ab0..82163b8431 100644 --- a/apps/docs/src/app/04-components/[group]/[component]/develop/page.tsx +++ b/apps/docs/src/app/components/[group]/[component]/overview/page.tsx @@ -2,7 +2,7 @@ import { redirect } from "next/navigation"; import type { StaticParams } from "@/lib/mdx/MdxFile"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; -const contentFolder = "src/content/04-components"; +const contentFolder = "src/content/components"; interface Props { params: Promise; @@ -22,5 +22,5 @@ export default async function Page(props: Props) { throw new Error("wrong parameter type"); } - redirect(`/04-components/${params.group}/${params.component}`); + redirect(`/components/${params.group}/${params.component}`); } diff --git a/apps/docs/src/app/04-components/[group]/[component]/page.tsx b/apps/docs/src/app/components/[group]/[component]/page.tsx similarity index 97% rename from apps/docs/src/app/04-components/[group]/[component]/page.tsx rename to apps/docs/src/app/components/[group]/[component]/page.tsx index e985c41e35..79148f91a7 100644 --- a/apps/docs/src/app/04-components/[group]/[component]/page.tsx +++ b/apps/docs/src/app/components/[group]/[component]/page.tsx @@ -7,7 +7,7 @@ import { serializeDeprecationNotice, } from "@/lib/componentStatus"; -const section = "04-components"; +const section = "components"; const contentFolder = `src/content/${section}`; interface Props { diff --git a/apps/docs/src/app/04-components/_components/ComponentCard.module.scss b/apps/docs/src/app/components/_components/ComponentCard.module.scss similarity index 100% rename from apps/docs/src/app/04-components/_components/ComponentCard.module.scss rename to apps/docs/src/app/components/_components/ComponentCard.module.scss diff --git a/apps/docs/src/app/04-components/_components/ComponentCard.tsx b/apps/docs/src/app/components/_components/ComponentCard.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/ComponentCard.tsx rename to apps/docs/src/app/components/_components/ComponentCard.tsx index 3584315ff8..277df456db 100644 --- a/apps/docs/src/app/04-components/_components/ComponentCard.tsx +++ b/apps/docs/src/app/components/_components/ComponentCard.tsx @@ -1,8 +1,8 @@ "use client"; import type { FC } from "react"; import { Heading, Text } from "@mittwald/flow-react-components"; -import type { ComponentLink } from "@/app/04-components/_components/ComponentsList"; -import { getWireframe } from "@/app/04-components/_components/wireframe/registry"; +import type { ComponentLink } from "@/app/components/_components/ComponentsList"; +import { getWireframe } from "@/app/components/_components/wireframe/registry"; import { ComponentStatusBadge } from "@/lib/componentStatus"; import styles from "./ComponentCard.module.scss"; diff --git a/apps/docs/src/app/04-components/_components/ComponentsList.tsx b/apps/docs/src/app/components/_components/ComponentsList.tsx similarity index 93% rename from apps/docs/src/app/04-components/_components/ComponentsList.tsx rename to apps/docs/src/app/components/_components/ComponentsList.tsx index a0da80e410..6db9d8d037 100644 --- a/apps/docs/src/app/04-components/_components/ComponentsList.tsx +++ b/apps/docs/src/app/components/_components/ComponentsList.tsx @@ -1,7 +1,7 @@ "use client"; import type { FC } from "react"; import { typedList } from "@mittwald/flow-react-components"; -import { ComponentCard } from "@/app/04-components/_components/ComponentCard"; +import { ComponentCard } from "@/app/components/_components/ComponentCard"; export interface ComponentLink { id: string; diff --git a/apps/docs/src/app/04-components/_components/ComponentsOverview.module.scss b/apps/docs/src/app/components/_components/ComponentsOverview.module.scss similarity index 100% rename from apps/docs/src/app/04-components/_components/ComponentsOverview.module.scss rename to apps/docs/src/app/components/_components/ComponentsOverview.module.scss diff --git a/apps/docs/src/app/04-components/_components/ComponentsOverview.tsx b/apps/docs/src/app/components/_components/ComponentsOverview.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/ComponentsOverview.tsx rename to apps/docs/src/app/components/_components/ComponentsOverview.tsx index 0ade0aae44..5ad09a156d 100644 --- a/apps/docs/src/app/04-components/_components/ComponentsOverview.tsx +++ b/apps/docs/src/app/components/_components/ComponentsOverview.tsx @@ -2,8 +2,8 @@ import type { FC } from "react"; import { Heading, Section } from "@mittwald/flow-react-components"; import { groupBy } from "remeda"; -import type { ComponentLink } from "@/app/04-components/_components/ComponentsList"; -import { ComponentsList } from "@/app/04-components/_components/ComponentsList"; +import type { ComponentLink } from "@/app/components/_components/ComponentsList"; +import { ComponentsList } from "@/app/components/_components/ComponentsList"; import { ComponentGroupingView } from "@/app/_components/ComponentGroupingView/ComponentGroupingView"; import { extractTextFromPath } from "@/app/_lib/extractTextFromPath"; import { compareEntries } from "@/app/_lib/compareEntries"; @@ -14,15 +14,17 @@ interface Props { components: ComponentLink[]; } +const componentsSection = "components"; + const sortableComponent = (component: ComponentLink) => ({ label: component.name, - pathSegment: component.slug, + path: `/${componentsSection}/${component.group}/${component.slug}`, component: component.component, }); const sortableGroup = (group: string) => ({ label: extractTextFromPath(group), - pathSegment: group, + path: `/${componentsSection}/${group}`, }); const toGroups = (components: ComponentLink[]): [string, ComponentLink[]][] => diff --git a/apps/docs/src/app/04-components/_components/wireframe/PlaceholderWireframe.tsx b/apps/docs/src/app/components/_components/wireframe/PlaceholderWireframe.tsx similarity index 65% rename from apps/docs/src/app/04-components/_components/wireframe/PlaceholderWireframe.tsx rename to apps/docs/src/app/components/_components/wireframe/PlaceholderWireframe.tsx index bb487cbcc5..89563bc601 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/PlaceholderWireframe.tsx +++ b/apps/docs/src/app/components/_components/wireframe/PlaceholderWireframe.tsx @@ -1,6 +1,6 @@ "use client"; import type { FC } from "react"; -import { WFrame } from "@/app/04-components/_components/wireframe/primitives"; +import { WFrame } from "@/app/components/_components/wireframe/primitives"; export const PlaceholderWireframe: FC = () => ; diff --git a/apps/docs/src/app/04-components/_components/wireframe/primitives.module.scss b/apps/docs/src/app/components/_components/wireframe/primitives.module.scss similarity index 100% rename from apps/docs/src/app/04-components/_components/wireframe/primitives.module.scss rename to apps/docs/src/app/components/_components/wireframe/primitives.module.scss diff --git a/apps/docs/src/app/04-components/_components/wireframe/primitives.tsx b/apps/docs/src/app/components/_components/wireframe/primitives.tsx similarity index 100% rename from apps/docs/src/app/04-components/_components/wireframe/primitives.tsx rename to apps/docs/src/app/components/_components/wireframe/primitives.tsx diff --git a/apps/docs/src/app/components/_components/wireframe/registry.ts b/apps/docs/src/app/components/_components/wireframe/registry.ts new file mode 100644 index 0000000000..50f3ba1f2a --- /dev/null +++ b/apps/docs/src/app/components/_components/wireframe/registry.ts @@ -0,0 +1,185 @@ +"use client"; +import type { FC } from "react"; +import { PlaceholderWireframe } from "@/app/components/_components/wireframe/PlaceholderWireframe"; +import { AccordionWireframe } from "@/app/components/_components/wireframe/wireframes/Accordion"; +import { AccentBoxWireframe } from "@/app/components/_components/wireframe/wireframes/AccentBox"; +import { ActionGroupWireframe } from "@/app/components/_components/wireframe/wireframes/ActionGroup"; +import { ActionWireframe } from "@/app/components/_components/wireframe/wireframes/Action"; +import { AlertBadgeWireframe } from "@/app/components/_components/wireframe/wireframes/AlertBadge"; +import { AlertTextWireframe } from "@/app/components/_components/wireframe/wireframes/AlertText"; +import { AlertWireframe } from "@/app/components/_components/wireframe/wireframes/Alert"; +import { AutocompleteWireframe } from "@/app/components/_components/wireframe/wireframes/Autocomplete"; +import { AvatarStackWireframe } from "@/app/components/_components/wireframe/wireframes/AvatarStack"; +import { AvatarWireframe } from "@/app/components/_components/wireframe/wireframes/Avatar"; +import { BadgeWireframe } from "@/app/components/_components/wireframe/wireframes/Badge"; +import { BigNumberWireframe } from "@/app/components/_components/wireframe/wireframes/BigNumber"; +import { BreadcrumbWireframe } from "@/app/components/_components/wireframe/wireframes/Breadcrumb"; +import { ButtonWireframe } from "@/app/components/_components/wireframe/wireframes/Button"; +import { CartesianChartWireframe } from "@/app/components/_components/wireframe/wireframes/CartesianChart"; +import { ChatWireframe } from "@/app/components/_components/wireframe/wireframes/Chat"; +import { CheckboxButtonWireframe } from "@/app/components/_components/wireframe/wireframes/CheckboxButton"; +import { CheckboxGroupWireframe } from "@/app/components/_components/wireframe/wireframes/CheckboxGroup"; +import { CheckboxWireframe } from "@/app/components/_components/wireframe/wireframes/Checkbox"; +import { CodeBlockWireframe } from "@/app/components/_components/wireframe/wireframes/CodeBlock"; +import { CodeEditorWireframe } from "@/app/components/_components/wireframe/wireframes/CodeEditor"; +import { ColorWireframe } from "@/app/components/_components/wireframe/wireframes/Color"; +import { ColumnLayoutWireframe } from "@/app/components/_components/wireframe/wireframes/ColumnLayout"; +import { CombineWireframe } from "@/app/components/_components/wireframe/wireframes/Combine"; +import { ComboBoxWireframe } from "@/app/components/_components/wireframe/wireframes/ComboBox"; +import { ContextMenuWireframe } from "@/app/components/_components/wireframe/wireframes/ContextMenu"; +import { ContextualHelpWireframe } from "@/app/components/_components/wireframe/wireframes/ContextualHelp"; +import { CopyButtonWireframe } from "@/app/components/_components/wireframe/wireframes/CopyButton"; +import { CounterBadgeWireframe } from "@/app/components/_components/wireframe/wireframes/CounterBadge"; +import { DatePickerWireframe } from "@/app/components/_components/wireframe/wireframes/DatePicker"; +import { DateRangePickerWireframe } from "@/app/components/_components/wireframe/wireframes/DateRangePicker"; +import { DonutChartWireframe } from "@/app/components/_components/wireframe/wireframes/DonutChart"; +import { FieldWireframe } from "@/app/components/_components/wireframe/wireframes/Field"; +import { FileCardListWireframe } from "@/app/components/_components/wireframe/wireframes/FileCardList"; +import { FileCardWireframe } from "@/app/components/_components/wireframe/wireframes/FileCard"; +import { FileDropZoneWireframe } from "@/app/components/_components/wireframe/wireframes/FileDropZone"; +import { FileFieldWireframe } from "@/app/components/_components/wireframe/wireframes/FileField"; +import { FlexWireframe } from "@/app/components/_components/wireframe/wireframes/Flex"; +import { FormRootErrorWireframe } from "@/app/components/_components/wireframe/wireframes/FormRootError"; +import { FormWireframe } from "@/app/components/_components/wireframe/wireframes/Form"; +import { HeaderNavigationWireframe } from "@/app/components/_components/wireframe/wireframes/HeaderNavigation"; +import { HeadingWireframe } from "@/app/components/_components/wireframe/wireframes/Heading"; +import { IconWireframe } from "@/app/components/_components/wireframe/wireframes/Icon"; +import { IllustratedMessageWireframe } from "@/app/components/_components/wireframe/wireframes/IllustratedMessage"; +import { ImageCropperWireframe } from "@/app/components/_components/wireframe/wireframes/ImageCropper"; +import { ImageWireframe } from "@/app/components/_components/wireframe/wireframes/Image"; +import { InlineCodeWireframe } from "@/app/components/_components/wireframe/wireframes/InlineCode"; +import { KbdWireframe } from "@/app/components/_components/wireframe/wireframes/Kbd"; +import { LabelWireframe } from "@/app/components/_components/wireframe/wireframes/Label"; +import { LabeledValueWireframe } from "@/app/components/_components/wireframe/wireframes/LabeledValue"; +import { LayoutCardWireframe } from "@/app/components/_components/wireframe/wireframes/LayoutCard"; +import { LightBoxWireframe } from "@/app/components/_components/wireframe/wireframes/LightBox"; +import { LinkWireframe } from "@/app/components/_components/wireframe/wireframes/Link"; +import { ListWireframe } from "@/app/components/_components/wireframe/wireframes/List"; +import { LoadingSpinnerWireframe } from "@/app/components/_components/wireframe/wireframes/LoadingSpinner"; +import { MarkdownEditorWireframe } from "@/app/components/_components/wireframe/wireframes/MarkdownEditor"; +import { MarkdownWireframe } from "@/app/components/_components/wireframe/wireframes/Markdown"; +import { MessageThreadWireframe } from "@/app/components/_components/wireframe/wireframes/MessageThread"; +import { MessageWireframe } from "@/app/components/_components/wireframe/wireframes/Message"; +import { ModalWireframe } from "@/app/components/_components/wireframe/wireframes/Modal"; +import { NavigationWireframe } from "@/app/components/_components/wireframe/wireframes/Navigation"; +import { NotificationWireframe } from "@/app/components/_components/wireframe/wireframes/Notification"; +import { NumberFieldWireframe } from "@/app/components/_components/wireframe/wireframes/NumberField"; +import { PasswordCreationFieldWireframe } from "@/app/components/_components/wireframe/wireframes/PasswordCreationField"; +import { ProgressBarWireframe } from "@/app/components/_components/wireframe/wireframes/ProgressBar"; +import { RadioGroupWireframe } from "@/app/components/_components/wireframe/wireframes/RadioGroup"; +import { RatingWireframe } from "@/app/components/_components/wireframe/wireframes/Rating"; +import { SearchFieldWireframe } from "@/app/components/_components/wireframe/wireframes/SearchField"; +import { SectionWireframe } from "@/app/components/_components/wireframe/wireframes/Section"; +import { SegmentedControlWireframe } from "@/app/components/_components/wireframe/wireframes/SegmentedControl"; +import { SelectWireframe } from "@/app/components/_components/wireframe/wireframes/Select"; +import { SeparatorWireframe } from "@/app/components/_components/wireframe/wireframes/Separator"; +import { SkeletonTextWireframe } from "@/app/components/_components/wireframe/wireframes/SkeletonText"; +import { SkeletonWireframe } from "@/app/components/_components/wireframe/wireframes/Skeleton"; +import { SliderWireframe } from "@/app/components/_components/wireframe/wireframes/Slider"; +import { SubmitButtonWireframe } from "@/app/components/_components/wireframe/wireframes/SubmitButton"; +import { SwitchWireframe } from "@/app/components/_components/wireframe/wireframes/Switch"; +import { TabNavigationWireframe } from "@/app/components/_components/wireframe/wireframes/TabNavigation"; +import { TableWireframe } from "@/app/components/_components/wireframe/wireframes/Table"; +import { TabsWireframe } from "@/app/components/_components/wireframe/wireframes/Tabs"; +import { TextAreaWireframe } from "@/app/components/_components/wireframe/wireframes/TextArea"; +import { TextFieldWireframe } from "@/app/components/_components/wireframe/wireframes/TextField"; +import { TextWireframe } from "@/app/components/_components/wireframe/wireframes/Text"; +import { TimeFieldWireframe } from "@/app/components/_components/wireframe/wireframes/TimeField"; +import { TooltipWireframe } from "@/app/components/_components/wireframe/wireframes/Tooltip"; +import { TruncateWireframe } from "@/app/components/_components/wireframe/wireframes/Truncate"; +import NotificationProviderWireframe from "@/app/components/_components/wireframe/wireframes/NotificationProvider"; + +const wireframes: Record = { + accordion: AccordionWireframe, + "accent-box": AccentBoxWireframe, + "action-group": ActionGroupWireframe, + action: ActionWireframe, + "alert-badge": AlertBadgeWireframe, + "alert-text": AlertTextWireframe, + alert: AlertWireframe, + // `align` is the deprecated name of `combine` and shares its wireframe. + align: CombineWireframe, + autocomplete: AutocompleteWireframe, + "avatar-stack": AvatarStackWireframe, + avatar: AvatarWireframe, + badge: BadgeWireframe, + "big-number": BigNumberWireframe, + breadcrumb: BreadcrumbWireframe, + button: ButtonWireframe, + "cartesian-chart": CartesianChartWireframe, + chat: ChatWireframe, + "checkbox-button": CheckboxButtonWireframe, + "checkbox-group": CheckboxGroupWireframe, + checkbox: CheckboxWireframe, + "code-block": CodeBlockWireframe, + "code-editor": CodeEditorWireframe, + color: ColorWireframe, + "column-layout": ColumnLayoutWireframe, + combine: CombineWireframe, + "combo-box": ComboBoxWireframe, + "context-menu": ContextMenuWireframe, + "contextual-help": ContextualHelpWireframe, + "copy-button": CopyButtonWireframe, + "counter-badge": CounterBadgeWireframe, + "date-picker": DatePickerWireframe, + "date-range-picker": DateRangePickerWireframe, + "donut-chart": DonutChartWireframe, + field: FieldWireframe, + "file-card-list": FileCardListWireframe, + "file-card": FileCardWireframe, + "file-drop-zone": FileDropZoneWireframe, + "file-field": FileFieldWireframe, + flex: FlexWireframe, + "form-root-error": FormRootErrorWireframe, + form: FormWireframe, + "header-navigation": HeaderNavigationWireframe, + heading: HeadingWireframe, + icon: IconWireframe, + "illustrated-message": IllustratedMessageWireframe, + "image-cropper": ImageCropperWireframe, + image: ImageWireframe, + "inline-code": InlineCodeWireframe, + kbd: KbdWireframe, + label: LabelWireframe, + "labeled-value": LabeledValueWireframe, + "layout-card": LayoutCardWireframe, + "light-box": LightBoxWireframe, + link: LinkWireframe, + list: ListWireframe, + "loading-spinner": LoadingSpinnerWireframe, + "markdown-editor": MarkdownEditorWireframe, + markdown: MarkdownWireframe, + "message-thread": MessageThreadWireframe, + message: MessageWireframe, + modal: ModalWireframe, + navigation: NavigationWireframe, + notification: NotificationWireframe, + "notification-provider": NotificationProviderWireframe, + "number-field": NumberFieldWireframe, + "password-creation-field": PasswordCreationFieldWireframe, + "progress-bar": ProgressBarWireframe, + "radio-group": RadioGroupWireframe, + rating: RatingWireframe, + "search-field": SearchFieldWireframe, + section: SectionWireframe, + "segmented-control": SegmentedControlWireframe, + select: SelectWireframe, + separator: SeparatorWireframe, + "skeleton-text": SkeletonTextWireframe, + skeleton: SkeletonWireframe, + slider: SliderWireframe, + "submit-button": SubmitButtonWireframe, + switch: SwitchWireframe, + "tab-navigation": TabNavigationWireframe, + table: TableWireframe, + tabs: TabsWireframe, + "text-area": TextAreaWireframe, + "text-field": TextFieldWireframe, + text: TextWireframe, + "time-field": TimeFieldWireframe, + tooltip: TooltipWireframe, + truncate: TruncateWireframe, +}; + +export const getWireframe = (slug: string): FC => + wireframes[slug] ?? PlaceholderWireframe; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AccentBox.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/AccentBox.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/AccentBox.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/AccentBox.tsx index 726790e765..11fd169d40 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AccentBox.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/AccentBox.tsx @@ -5,7 +5,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const AccentBoxWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Accordion.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Accordion.tsx similarity index 92% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Accordion.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Accordion.tsx index 0da08c9b2a..6b47735e8e 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Accordion.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Accordion.tsx @@ -7,7 +7,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconChevronUp, IconChevronDown, diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Action.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Action.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Action.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Action.tsx index 18c1490963..e6a4d58d6e 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Action.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Action.tsx @@ -4,7 +4,7 @@ import { WButton, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { Icon } from "@mittwald/flow-react-components"; import { IconLoader2 } from "@tabler/icons-react"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ActionGroup.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ActionGroup.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ActionGroup.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ActionGroup.tsx index ae7f7457f2..e793a7d874 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ActionGroup.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ActionGroup.tsx @@ -4,7 +4,7 @@ import { WButton, WFrame, WRow, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const ActionGroupWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Alert.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Alert.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Alert.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Alert.tsx index ab09e215d4..c623d2ddfd 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Alert.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Alert.tsx @@ -6,7 +6,7 @@ import { WIcon, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDanger } from "@mittwald/flow-react-components"; export const AlertWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AlertBadge.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/AlertBadge.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/AlertBadge.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/AlertBadge.tsx index 5c08bf0a8b..c62f2d9e0c 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AlertBadge.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/AlertBadge.tsx @@ -5,7 +5,7 @@ import { WFrame, WIcon, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDanger } from "@mittwald/flow-react-components"; export const AlertBadgeWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AlertText.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/AlertText.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/AlertText.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/AlertText.tsx index 52ce1ef2e6..197b895420 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AlertText.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/AlertText.tsx @@ -4,7 +4,7 @@ import { WFrame, WIcon, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDanger } from "@mittwald/flow-react-components"; export const AlertTextWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Autocomplete.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Autocomplete.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Autocomplete.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Autocomplete.tsx index 683da002b2..d88e65edc9 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Autocomplete.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Autocomplete.tsx @@ -5,7 +5,7 @@ import { WInput, WOverlay, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const AutocompleteWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Avatar.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Avatar.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Avatar.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Avatar.tsx index cf20fc0656..b2f6a0b920 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Avatar.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Avatar.tsx @@ -4,7 +4,7 @@ import { WCircle, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconUser } from "@mittwald/flow-react-components"; export const AvatarWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AvatarStack.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/AvatarStack.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/AvatarStack.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/AvatarStack.tsx index 71f4d1446e..d0b45bb1af 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/AvatarStack.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/AvatarStack.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WCircle, WFrame, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const AvatarStackWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Badge.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Badge.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Badge.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Badge.tsx index 695ac3806e..220968ba2a 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Badge.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Badge.tsx @@ -4,7 +4,7 @@ import { WBox, WFrame, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const BadgeWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/BigNumber.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/BigNumber.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/BigNumber.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/BigNumber.tsx index 44c1d07719..0dcb537586 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/BigNumber.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/BigNumber.tsx @@ -5,7 +5,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const BigNumberWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Breadcrumb.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Breadcrumb.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Breadcrumb.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Breadcrumb.tsx index b20f8c0bb6..c0ef57ffd5 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Breadcrumb.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Breadcrumb.tsx @@ -5,7 +5,7 @@ import { WIcon, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconChevronRight } from "@mittwald/flow-react-components"; export const BreadcrumbWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Button.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Button.tsx similarity index 78% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Button.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Button.tsx index ee54c216a5..fac8669c61 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Button.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Button.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WButton, WFrame, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const ButtonWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CartesianChart.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CartesianChart.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CartesianChart.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CartesianChart.tsx index b64b8a7605..1f84cfec00 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CartesianChart.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CartesianChart.tsx @@ -1,6 +1,6 @@ "use client"; import type { FC } from "react"; -import { WFrame } from "@/app/04-components/_components/wireframe/primitives"; +import { WFrame } from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const CartesianChartWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Chat.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Chat.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Chat.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Chat.tsx index a5932d16c6..dcf0ee5edd 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Chat.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Chat.tsx @@ -7,7 +7,7 @@ import { WInput, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const ChatWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Checkbox.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Checkbox.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Checkbox.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Checkbox.tsx index 50fb1457cb..c5f03a09eb 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Checkbox.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Checkbox.tsx @@ -5,7 +5,7 @@ import { WIcon, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCheckboxChecked } from "@mittwald/flow-react-components"; export const CheckboxWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CheckboxButton.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CheckboxButton.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CheckboxButton.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CheckboxButton.tsx index 3970d8c31c..b06ef0692a 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CheckboxButton.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CheckboxButton.tsx @@ -6,7 +6,7 @@ import { WIcon, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCheckboxChecked } from "@mittwald/flow-react-components"; export const CheckboxButtonWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CheckboxGroup.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CheckboxGroup.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CheckboxGroup.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CheckboxGroup.tsx index 679be67872..738bed30dd 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CheckboxGroup.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CheckboxGroup.tsx @@ -6,7 +6,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCheckboxChecked, IconCheckboxEmpty, diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CodeBlock.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CodeBlock.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CodeBlock.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CodeBlock.tsx index 0af42f1d30..59b9b9d2ba 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CodeBlock.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CodeBlock.tsx @@ -7,7 +7,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCode } from "@mittwald/flow-react-components"; export const CodeBlockWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CodeEditor.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CodeEditor.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CodeEditor.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CodeEditor.tsx index c3ee89da6d..d82bb6ab79 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CodeEditor.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CodeEditor.tsx @@ -7,7 +7,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCode } from "@mittwald/flow-react-components"; export const CodeEditorWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Color.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Color.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Color.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Color.tsx index 5d6f7862bd..a7687efa29 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Color.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Color.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconPalette } from "@tabler/icons-react"; import { Icon } from "@mittwald/flow-react-components"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ColumnLayout.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ColumnLayout.tsx similarity index 83% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ColumnLayout.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ColumnLayout.tsx index 3796baff04..94205b51dd 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ColumnLayout.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ColumnLayout.tsx @@ -5,7 +5,7 @@ import { WInput, WRow, WStack, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const ColumnLayoutWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Combine.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Combine.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Combine.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Combine.tsx index a6114a0fc2..63d1fec0c3 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Combine.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Combine.tsx @@ -5,7 +5,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const CombineWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ComboBox.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ComboBox.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ComboBox.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ComboBox.tsx index f1662d25f3..ebc49685b7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ComboBox.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ComboBox.tsx @@ -6,7 +6,7 @@ import { WInput, WOverlay, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconChevronDown } from "@mittwald/flow-react-components"; export const ComboBoxWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ContextMenu.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ContextMenu.tsx similarity index 89% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ContextMenu.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ContextMenu.tsx index ef5ea9024f..2eb0dc5d93 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ContextMenu.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ContextMenu.tsx @@ -7,7 +7,7 @@ import { WOverlay, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconContextMenu } from "@mittwald/flow-react-components"; export const ContextMenuWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ContextualHelp.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ContextualHelp.tsx similarity index 89% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ContextualHelp.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ContextualHelp.tsx index 35b7f05b5e..de0b83bcf7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ContextualHelp.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ContextualHelp.tsx @@ -5,7 +5,7 @@ import { WIcon, WOverlay, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconInfo } from "@mittwald/flow-react-components"; import styles from "./wireframes.module.scss"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CopyButton.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CopyButton.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CopyButton.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CopyButton.tsx index 0ba4281316..108b5dec63 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CopyButton.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CopyButton.tsx @@ -4,7 +4,7 @@ import { WButton, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCopy } from "@mittwald/flow-react-components"; export const CopyButtonWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CounterBadge.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/CounterBadge.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/CounterBadge.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/CounterBadge.tsx index 927d4f8c60..66ee695746 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/CounterBadge.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/CounterBadge.tsx @@ -4,7 +4,7 @@ import { WCircle, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { Icon } from "@mittwald/flow-react-components"; import { IconNumber3 } from "@tabler/icons-react"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/DatePicker.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/DatePicker.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/DatePicker.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/DatePicker.tsx index 2bff33a180..2798069e32 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/DatePicker.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/DatePicker.tsx @@ -6,7 +6,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDate } from "@mittwald/flow-react-components"; export const DatePickerWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/DateRangePicker.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/DateRangePicker.tsx similarity index 91% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/DateRangePicker.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/DateRangePicker.tsx index b85b794e32..7782ce8a29 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/DateRangePicker.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/DateRangePicker.tsx @@ -7,7 +7,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDate } from "@mittwald/flow-react-components"; import { IconMinus } from "@mittwald/flow-react-components"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/DonutChart.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/DonutChart.tsx similarity index 77% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/DonutChart.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/DonutChart.tsx index 6ce078547d..75c9eacaf6 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/DonutChart.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/DonutChart.tsx @@ -1,6 +1,6 @@ "use client"; import type { FC } from "react"; -import { WFrame } from "@/app/04-components/_components/wireframe/primitives"; +import { WFrame } from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const DonutChartWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Field.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Field.tsx similarity index 80% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Field.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Field.tsx index b4216ad33c..0aa8c4beb4 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Field.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Field.tsx @@ -5,7 +5,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const FieldWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileCard.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/FileCard.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/FileCard.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/FileCard.tsx index 8abc7b7126..2008c426f5 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileCard.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/FileCard.tsx @@ -6,7 +6,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const FileCardWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileCardList.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/FileCardList.tsx similarity index 91% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/FileCardList.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/FileCardList.tsx index ce9ff30798..7c723c2ce4 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileCardList.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/FileCardList.tsx @@ -6,7 +6,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const FileCardListWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileDropZone.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/FileDropZone.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/FileDropZone.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/FileDropZone.tsx index 31a7ad606d..4f11d805b7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileDropZone.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/FileDropZone.tsx @@ -4,7 +4,7 @@ import { WFrame, WIcon, WInput, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; import { IconUpload } from "@mittwald/flow-react-components"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileField.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/FileField.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/FileField.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/FileField.tsx index ea8f39bdeb..8e721d0ee0 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FileField.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/FileField.tsx @@ -4,7 +4,7 @@ import { WButton, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconUpload } from "@mittwald/flow-react-components"; export const FileFieldWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Flex.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Flex.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Flex.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Flex.tsx index e9f7a49235..be234ef231 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Flex.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Flex.tsx @@ -4,7 +4,7 @@ import { WBox, WFrame, WRow, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const FlexWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Form.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Form.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Form.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Form.tsx index 9c5732beee..81de94fe5a 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Form.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Form.tsx @@ -6,7 +6,7 @@ import { WInput, WRow, WStack, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const FormWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FormRootError.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/FormRootError.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/FormRootError.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/FormRootError.tsx index fa952f3e91..b9eb7a2aaa 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/FormRootError.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/FormRootError.tsx @@ -8,7 +8,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDanger } from "@mittwald/flow-react-components"; export const FormRootErrorWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/HeaderNavigation.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/HeaderNavigation.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/HeaderNavigation.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/HeaderNavigation.tsx index bb0a771812..80eb34129d 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/HeaderNavigation.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/HeaderNavigation.tsx @@ -4,7 +4,7 @@ import { WCircle, WFrame, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const HeaderNavigationWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Heading.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Heading.tsx similarity index 77% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Heading.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Heading.tsx index 96c660df64..4cdd72b52f 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Heading.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Heading.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const HeadingWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Icon.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Icon.tsx similarity index 83% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Icon.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Icon.tsx index c89f95796d..9b04836192 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Icon.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Icon.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconStar } from "@mittwald/flow-react-components"; export const IconWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/IllustratedMessage.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/IllustratedMessage.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/IllustratedMessage.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/IllustratedMessage.tsx index 983167010d..ee0ccf6039 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/IllustratedMessage.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/IllustratedMessage.tsx @@ -5,7 +5,7 @@ import { WIcon, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconStar } from "@mittwald/flow-react-components"; export const IllustratedMessageWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Image.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Image.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Image.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Image.tsx index b3053126b3..9fbd1fe4c3 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Image.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Image.tsx @@ -4,7 +4,7 @@ import { WBox, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconImage } from "@mittwald/flow-react-components"; export const ImageWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ImageCropper.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ImageCropper.tsx similarity index 94% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ImageCropper.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ImageCropper.tsx index d4b3bf3d97..613050ba82 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ImageCropper.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ImageCropper.tsx @@ -4,7 +4,7 @@ import { WFrame, WIcon, WStack, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; import { IconImage } from "@mittwald/flow-react-components"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/InlineCode.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/InlineCode.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/InlineCode.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/InlineCode.tsx index 721cb9906a..e17250ffff 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/InlineCode.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/InlineCode.tsx @@ -5,7 +5,7 @@ import { WIcon, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconCode } from "@mittwald/flow-react-components"; export const InlineCodeWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Kbd.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Kbd.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Kbd.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Kbd.tsx index 12a302f0e1..1bb031c39a 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Kbd.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Kbd.tsx @@ -4,7 +4,7 @@ import { WBox, WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { Icon } from "@mittwald/flow-react-components"; import { IconCommand } from "@tabler/icons-react"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Label.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Label.tsx similarity index 79% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Label.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Label.tsx index 8dc156c64a..1b6bdbf6d7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Label.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Label.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const LabelWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LabeledValue.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/LabeledValue.tsx similarity index 83% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/LabeledValue.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/LabeledValue.tsx index 151d1f999a..49f2013395 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LabeledValue.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/LabeledValue.tsx @@ -4,7 +4,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const LabeledValueWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LayoutCard.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/LayoutCard.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/LayoutCard.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/LayoutCard.tsx index fc5b4a776e..25d23f62b4 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LayoutCard.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/LayoutCard.tsx @@ -5,7 +5,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const LayoutCardWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LightBox.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/LightBox.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/LightBox.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/LightBox.tsx index 9f6cbf2604..d60c659953 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LightBox.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/LightBox.tsx @@ -4,7 +4,7 @@ import { WFrame, WIcon, WOverlay, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconImage } from "@mittwald/flow-react-components"; export const LightBoxWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Link.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Link.tsx similarity index 83% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Link.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Link.tsx index 6efb605342..016ae4c772 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Link.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Link.tsx @@ -5,7 +5,7 @@ import { WLine, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const LinkWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/List.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/List.tsx similarity index 94% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/List.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/List.tsx index 6573deb31a..3c9e3302f3 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/List.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/List.tsx @@ -7,7 +7,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const ListWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LoadingSpinner.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/LoadingSpinner.tsx similarity index 86% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/LoadingSpinner.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/LoadingSpinner.tsx index 6fd4d764a7..1e8e973536 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/LoadingSpinner.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/LoadingSpinner.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconLoader2 } from "@tabler/icons-react"; import { Icon } from "@mittwald/flow-react-components"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Markdown.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Markdown.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Markdown.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Markdown.tsx index 30f24c2cd8..71fabcf5f4 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Markdown.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Markdown.tsx @@ -6,7 +6,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconNumber } from "@mittwald/flow-react-components"; export const MarkdownWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/MarkdownEditor.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/MarkdownEditor.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/MarkdownEditor.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/MarkdownEditor.tsx index 6fe9e18831..a72475b445 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/MarkdownEditor.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/MarkdownEditor.tsx @@ -7,7 +7,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconNumber } from "@mittwald/flow-react-components"; export const MarkdownEditorWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Message.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Message.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Message.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Message.tsx index 7fe527d007..f887a5d072 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Message.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Message.tsx @@ -6,7 +6,7 @@ import { WFrame, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const MessageWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/MessageThread.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/MessageThread.tsx similarity index 89% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/MessageThread.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/MessageThread.tsx index 4d7a006782..84defa4446 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/MessageThread.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/MessageThread.tsx @@ -6,7 +6,7 @@ import { WFrame, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const MessageThreadWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Modal.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Modal.tsx similarity index 91% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Modal.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Modal.tsx index 10dee4282a..da62ff0fd4 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Modal.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Modal.tsx @@ -6,7 +6,7 @@ import { WOverlay, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const ModalWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Navigation.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Navigation.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Navigation.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Navigation.tsx index c82f41815d..59052b68b8 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Navigation.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Navigation.tsx @@ -4,7 +4,7 @@ import { WBox, WFrame, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const NavigationWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Notification.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Notification.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Notification.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Notification.tsx index 3b767618a5..66e6ac9e72 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Notification.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Notification.tsx @@ -6,7 +6,7 @@ import { WOverlay, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDanger } from "@mittwald/flow-react-components"; export const NotificationWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/NotificationProvider.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/NotificationProvider.tsx similarity index 91% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/NotificationProvider.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/NotificationProvider.tsx index 02b7eff207..a875c24760 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/NotificationProvider.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/NotificationProvider.tsx @@ -6,7 +6,7 @@ import { WOverlay, WRow, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconDanger } from "@mittwald/flow-react-components"; export const NotificationProviderWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/NumberField.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/NumberField.tsx similarity index 89% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/NumberField.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/NumberField.tsx index 1dcf5499a1..bc58ab4edd 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/NumberField.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/NumberField.tsx @@ -6,7 +6,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconPlus, IconMinus } from "@mittwald/flow-react-components"; export const NumberFieldWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/PasswordCreationField.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/PasswordCreationField.tsx similarity index 91% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/PasswordCreationField.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/PasswordCreationField.tsx index 72f5aed51d..0938e947b4 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/PasswordCreationField.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/PasswordCreationField.tsx @@ -6,7 +6,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { Icon } from "@mittwald/flow-react-components"; import { IconAsterisk } from "@tabler/icons-react"; diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ProgressBar.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/ProgressBar.tsx similarity index 80% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/ProgressBar.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/ProgressBar.tsx index fc099a867b..79cc4ecb2e 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/ProgressBar.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/ProgressBar.tsx @@ -1,6 +1,6 @@ "use client"; import type { FC } from "react"; -import { WFrame } from "@/app/04-components/_components/wireframe/primitives"; +import { WFrame } from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const ProgressBarWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/RadioGroup.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/RadioGroup.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/RadioGroup.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/RadioGroup.tsx index fe6db3c425..523918ade9 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/RadioGroup.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/RadioGroup.tsx @@ -6,7 +6,7 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconRadioOff, IconRadioOn } from "@mittwald/flow-react-components"; export const RadioGroupWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Rating.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Rating.tsx similarity index 89% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Rating.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Rating.tsx index caa8d2fbf5..b2810a41c7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Rating.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Rating.tsx @@ -4,7 +4,7 @@ import { WFrame, WIcon, WRow, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconStar, IconStarFilled } from "@mittwald/flow-react-components"; export const RatingWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SearchField.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/SearchField.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/SearchField.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/SearchField.tsx index 4ce08d3497..1ff0be94ed 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SearchField.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/SearchField.tsx @@ -4,7 +4,7 @@ import { WFrame, WIcon, WInput, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconSearch } from "@mittwald/flow-react-components"; export const SearchFieldWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Section.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Section.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Section.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Section.tsx index df6e2bfb13..c8c0b7f5bb 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Section.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Section.tsx @@ -5,7 +5,7 @@ import { WLine, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const SectionWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SegmentedControl.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/SegmentedControl.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/SegmentedControl.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/SegmentedControl.tsx index 0b5fd5263a..96fbd3bdb9 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SegmentedControl.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/SegmentedControl.tsx @@ -4,7 +4,7 @@ import { WFrame, WInput, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const SegmentedControlWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Select.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Select.tsx similarity index 88% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Select.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Select.tsx index 3a4bfbc429..c4aee5aa60 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Select.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Select.tsx @@ -6,7 +6,7 @@ import { WInput, WOverlay, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconChevronDown } from "@mittwald/flow-react-components"; export const SelectWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Separator.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Separator.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Separator.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Separator.tsx index a2e11d42ad..d7ee24fbf2 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Separator.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Separator.tsx @@ -5,7 +5,7 @@ import { WLine, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const SeparatorWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Skeleton.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Skeleton.tsx similarity index 82% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Skeleton.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Skeleton.tsx index 52317a15ca..9002380add 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Skeleton.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Skeleton.tsx @@ -4,7 +4,7 @@ import { WBox, WFrame, WStack, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const SkeletonWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SkeletonText.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/SkeletonText.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/SkeletonText.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/SkeletonText.tsx index f52bca021e..9bc2b8b5ed 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SkeletonText.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/SkeletonText.tsx @@ -4,7 +4,7 @@ import { WFrame, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const SkeletonTextWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Slider.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Slider.tsx similarity index 78% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Slider.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Slider.tsx index 63d3d51c21..f3b90ceeed 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Slider.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Slider.tsx @@ -1,6 +1,6 @@ "use client"; import type { FC } from "react"; -import { WFrame } from "@/app/04-components/_components/wireframe/primitives"; +import { WFrame } from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const SliderWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SubmitButton.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/SubmitButton.tsx similarity index 82% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/SubmitButton.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/SubmitButton.tsx index 7cf87e66a3..76240fe6b5 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/SubmitButton.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/SubmitButton.tsx @@ -4,7 +4,7 @@ import { WButton, WFrame, WInput, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const SubmitButtonWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Switch.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Switch.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Switch.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Switch.tsx index 576f014ac6..a1643fbbb7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Switch.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Switch.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WCircle, WFrame, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const SwitchWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TabNavigation.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/TabNavigation.tsx similarity index 85% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/TabNavigation.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/TabNavigation.tsx index 8a55e0c00d..cc7f208a21 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TabNavigation.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/TabNavigation.tsx @@ -7,9 +7,9 @@ import { WRow, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconChevronDown } from "@mittwald/flow-react-components"; -import styles from "@/app/04-components/_components/wireframe/wireframes/wireframes.module.scss"; +import styles from "@/app/components/_components/wireframe/wireframes/wireframes.module.scss"; export const TabNavigationWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Table.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Table.tsx similarity index 90% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Table.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Table.tsx index 7c9ad37e50..836e1a75cd 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Table.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Table.tsx @@ -1,6 +1,6 @@ "use client"; import type { FC } from "react"; -import { WFrame } from "@/app/04-components/_components/wireframe/primitives"; +import { WFrame } from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const TableWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Tabs.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Tabs.tsx similarity index 80% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Tabs.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Tabs.tsx index 151bf987f1..b0a70de14e 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Tabs.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Tabs.tsx @@ -5,8 +5,8 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; -import styles from "@/app/04-components/_components/wireframe/wireframes/wireframes.module.scss"; +} from "@/app/components/_components/wireframe/primitives"; +import styles from "@/app/components/_components/wireframe/wireframes/wireframes.module.scss"; export const TabsWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Text.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Text.tsx similarity index 79% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Text.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Text.tsx index 94f80c6968..41581946b5 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Text.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Text.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const TextWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TextArea.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/TextArea.tsx similarity index 81% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/TextArea.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/TextArea.tsx index 3357c1a887..3cc9879e2b 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TextArea.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/TextArea.tsx @@ -5,7 +5,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const TextAreaWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TextField.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/TextField.tsx similarity index 81% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/TextField.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/TextField.tsx index 71829ad12d..36db050c05 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TextField.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/TextField.tsx @@ -5,7 +5,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; export const TextFieldWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TimeField.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/TimeField.tsx similarity index 87% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/TimeField.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/TimeField.tsx index 1b28a75d75..af453ef758 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/TimeField.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/TimeField.tsx @@ -6,7 +6,7 @@ import { WInput, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconTime } from "@mittwald/flow-react-components"; export const TimeFieldWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Tooltip.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Tooltip.tsx similarity index 89% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Tooltip.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Tooltip.tsx index 07427bf80d..d2394deff7 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Tooltip.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Tooltip.tsx @@ -6,7 +6,7 @@ import { WOverlay, WStack, WText, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import styles from "./wireframes.module.scss"; export const TooltipWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Truncate.tsx b/apps/docs/src/app/components/_components/wireframe/wireframes/Truncate.tsx similarity index 84% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/Truncate.tsx rename to apps/docs/src/app/components/_components/wireframe/wireframes/Truncate.tsx index e792f14df3..fe85103112 100644 --- a/apps/docs/src/app/04-components/_components/wireframe/wireframes/Truncate.tsx +++ b/apps/docs/src/app/components/_components/wireframe/wireframes/Truncate.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import { WFrame, WIcon, -} from "@/app/04-components/_components/wireframe/primitives"; +} from "@/app/components/_components/wireframe/primitives"; import { IconContextMenu } from "@mittwald/flow-react-components"; export const TruncateWireframe: FC = () => ( diff --git a/apps/docs/src/app/04-components/_components/wireframe/wireframes/wireframes.module.scss b/apps/docs/src/app/components/_components/wireframe/wireframes/wireframes.module.scss similarity index 100% rename from apps/docs/src/app/04-components/_components/wireframe/wireframes/wireframes.module.scss rename to apps/docs/src/app/components/_components/wireframe/wireframes/wireframes.module.scss diff --git a/apps/docs/src/app/04-components/page.tsx b/apps/docs/src/app/components/page.tsx similarity index 83% rename from apps/docs/src/app/04-components/page.tsx rename to apps/docs/src/app/components/page.tsx index 2a101888ba..4219c8af4e 100644 --- a/apps/docs/src/app/04-components/page.tsx +++ b/apps/docs/src/app/components/page.tsx @@ -2,9 +2,9 @@ import { Heading, LayoutCard, Text } from "@mittwald/flow-react-components"; import type { Metadata } from "next"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import styles from "@/app/layout.module.scss"; -import { ComponentsOverview } from "@/app/04-components/_components/ComponentsOverview"; +import { ComponentsOverview } from "@/app/components/_components/ComponentsOverview"; -const contentFolder = "src/content/04-components"; +const contentFolder = "src/content/components"; export const metadata: Metadata = { title: "Components", @@ -21,7 +21,7 @@ export default async function Page() { name: mdxFile.getNavTitle(), component: mdxFile.mdxSource.frontmatter.component, description: mdxFile.mdxSource.frontmatter.description, - href: `/04-components${mdxFile.pathname}/overview`, + href: `/components${mdxFile.pathname}`, })); return ( diff --git a/apps/docs/src/app/03-patterns/[...slug]/page.tsx b/apps/docs/src/app/foundations/[...slug]/page.tsx similarity index 96% rename from apps/docs/src/app/03-patterns/[...slug]/page.tsx rename to apps/docs/src/app/foundations/[...slug]/page.tsx index 20cdcb19b2..a885e19381 100644 --- a/apps/docs/src/app/03-patterns/[...slug]/page.tsx +++ b/apps/docs/src/app/foundations/[...slug]/page.tsx @@ -3,7 +3,7 @@ import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import PageContent from "@/app/_components/layout/PageContent"; import type { Metadata } from "next"; -const section = "03-patterns"; +const section = "foundations"; const contentFolder = `src/content/${section}`; export const generateStaticParams = async () => { diff --git a/apps/docs/src/app/01-get-started/[...slug]/page.tsx b/apps/docs/src/app/get-started/[...slug]/page.tsx similarity index 96% rename from apps/docs/src/app/01-get-started/[...slug]/page.tsx rename to apps/docs/src/app/get-started/[...slug]/page.tsx index 541efc1957..1ec709b8dd 100644 --- a/apps/docs/src/app/01-get-started/[...slug]/page.tsx +++ b/apps/docs/src/app/get-started/[...slug]/page.tsx @@ -3,7 +3,7 @@ import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import PageContent from "@/app/_components/layout/PageContent"; import type { Metadata } from "next"; -const section = "01-get-started"; +const section = "get-started"; const contentFolder = `src/content/${section}`; export const generateStaticParams = async () => { diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx index e843fa9cbf..e0b9e7c781 100644 --- a/apps/docs/src/app/page.tsx +++ b/apps/docs/src/app/page.tsx @@ -45,7 +45,7 @@ const Home: FC = () => { fördern nutzerzentriertes, barrierearmes Design und sorgen für eine starke Developer Experience. - Zu Get Started + Zu Get Started @@ -81,7 +81,7 @@ const Home: FC = () => { {" "} verfügbar und hier im Styleguide dokumentiert. - + Zu den Components @@ -156,7 +156,7 @@ const Home: FC = () => { Erfahre mehr über die Grundlagen unseres Design Systems. - + Zu den Foundations @@ -168,9 +168,7 @@ const Home: FC = () => { Finde passende Pattern für häufige Design- und Interaktionsaufgaben. - - Zu den Patterns - + Zu den Patterns @@ -179,7 +177,7 @@ const Home: FC = () => { Nutze unseren modularen Components-Baukasten für dein Projekt. - + Zu den Components diff --git a/apps/docs/src/app/02-foundations/[...slug]/page.tsx b/apps/docs/src/app/patterns/[...slug]/page.tsx similarity index 96% rename from apps/docs/src/app/02-foundations/[...slug]/page.tsx rename to apps/docs/src/app/patterns/[...slug]/page.tsx index 8a812b0685..dad28e29b7 100644 --- a/apps/docs/src/app/02-foundations/[...slug]/page.tsx +++ b/apps/docs/src/app/patterns/[...slug]/page.tsx @@ -3,7 +3,7 @@ import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import PageContent from "@/app/_components/layout/PageContent"; import type { Metadata } from "next"; -const section = "02-foundations"; +const section = "patterns"; const contentFolder = `src/content/${section}`; export const generateStaticParams = async () => { diff --git a/apps/docs/src/content/04-components/content/truncate/examples/offset.tsx b/apps/docs/src/content/04-components/content/truncate/examples/offset.tsx deleted file mode 100644 index 2fb31c0716..0000000000 --- a/apps/docs/src/content/04-components/content/truncate/examples/offset.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Truncate } from "@mittwald/flow-react-components"; - - - https://flow.mittwald.de/04-components/lorem/ipsum/dolor/sit/amet/consetetur/sadipscing/elitr/sed/diam/nonumy/eirmod/tempor/invidunt/ut/labore/et/dolore/content/truncate/overview -; diff --git a/apps/docs/src/content/04-components/actions/action-group/examples/default.tsx b/apps/docs/src/content/components/actions/action-group/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action-group/examples/default.tsx rename to apps/docs/src/content/components/actions/action-group/examples/default.tsx diff --git a/apps/docs/src/content/04-components/actions/action-group/examples/link.tsx b/apps/docs/src/content/components/actions/action-group/examples/link.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action-group/examples/link.tsx rename to apps/docs/src/content/components/actions/action-group/examples/link.tsx diff --git a/apps/docs/src/content/04-components/actions/action-group/examples/preserveOrder.tsx b/apps/docs/src/content/components/actions/action-group/examples/preserveOrder.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action-group/examples/preserveOrder.tsx rename to apps/docs/src/content/components/actions/action-group/examples/preserveOrder.tsx diff --git a/apps/docs/src/content/04-components/actions/action-group/examples/size.tsx b/apps/docs/src/content/components/actions/action-group/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action-group/examples/size.tsx rename to apps/docs/src/content/components/actions/action-group/examples/size.tsx diff --git a/apps/docs/src/content/04-components/actions/action-group/examples/slots.tsx b/apps/docs/src/content/components/actions/action-group/examples/slots.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action-group/examples/slots.tsx rename to apps/docs/src/content/components/actions/action-group/examples/slots.tsx diff --git a/apps/docs/src/content/04-components/actions/action-group/index.mdx b/apps/docs/src/content/components/actions/action-group/index.mdx similarity index 76% rename from apps/docs/src/content/04-components/actions/action-group/index.mdx rename to apps/docs/src/content/components/actions/action-group/index.mdx index 8aedda349a..d228673114 100644 --- a/apps/docs/src/content/04-components/actions/action-group/index.mdx +++ b/apps/docs/src/content/components/actions/action-group/index.mdx @@ -10,7 +10,7 @@ description: Die ActionGroup gruppiert zusammengehörige Actions. # Best Practices - Für die Buttons in der ActionGroup gelten die - [Best Practices des Buttons](/04-components/actions/button). + [Best Practices des Buttons](/components/actions/button). - Hebe pro Seite möglichst nur eine Hauptaktion hervor. So erkennt der User den primären nächsten Schritt eindeutig. @@ -18,10 +18,10 @@ description: Die ActionGroup gruppiert zusammengehörige Actions. # Slots -Die [Actions](/04-components/actions/action) werden von der ActionGroup -automatisch in die Slots `primary`, `secondary` und `abort` sortiert. So werden -[Buttons](/04-components/actions/button) mit der Color Primary (Standard), -Success und Danger automatisch dem Slot `primary` zugeordnet, der am Ende der +Die [Actions](/components/actions/action) werden von der ActionGroup automatisch +in die Slots `primary`, `secondary` und `abort` sortiert. So werden +[Buttons](/components/actions/button) mit der Color Primary (Standard), Success +und Danger automatisch dem Slot `primary` zugeordnet, der am Ende der ActionGroup positioniert ist. @@ -50,7 +50,7 @@ dimensioniert. ## Link Kombiniere Buttons in der ActionGroup mit einem -[Link](/04-components/navigation/link), um textuelle Nebenaktionen anzubieten. +[Link](/components/navigation/link), um textuelle Nebenaktionen anzubieten. diff --git a/apps/docs/src/content/04-components/actions/action/examples/abort.tsx b/apps/docs/src/content/components/actions/action/examples/abort.tsx similarity index 81% rename from apps/docs/src/content/04-components/actions/action/examples/abort.tsx rename to apps/docs/src/content/components/actions/action/examples/abort.tsx index 93d2c966fc..63e6a4ee9b 100644 --- a/apps/docs/src/content/04-components/actions/action/examples/abort.tsx +++ b/apps/docs/src/content/components/actions/action/examples/abort.tsx @@ -1,4 +1,4 @@ -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; import { abortAction, Action, diff --git a/apps/docs/src/content/04-components/actions/action/examples/confirmation.tsx b/apps/docs/src/content/components/actions/action/examples/confirmation.tsx similarity index 88% rename from apps/docs/src/content/04-components/actions/action/examples/confirmation.tsx rename to apps/docs/src/content/components/actions/action/examples/confirmation.tsx index ac0c8472e9..c0437a2a43 100644 --- a/apps/docs/src/content/04-components/actions/action/examples/confirmation.tsx +++ b/apps/docs/src/content/components/actions/action/examples/confirmation.tsx @@ -6,7 +6,7 @@ import { Heading, Modal, } from "@mittwald/flow-react-components"; -import { sleepLong } from "@/content/04-components/actions/action/examples/lib"; +import { sleepLong } from "@/content/components/actions/action/examples/lib"; diff --git a/apps/docs/src/content/04-components/actions/action/examples/default.tsx b/apps/docs/src/content/components/actions/action/examples/default.tsx similarity index 66% rename from apps/docs/src/content/04-components/actions/action/examples/default.tsx rename to apps/docs/src/content/components/actions/action/examples/default.tsx index 32dc4f298f..4f92a9dbb8 100644 --- a/apps/docs/src/content/04-components/actions/action/examples/default.tsx +++ b/apps/docs/src/content/components/actions/action/examples/default.tsx @@ -2,7 +2,7 @@ import { Action, Button, } from "@mittwald/flow-react-components"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; diff --git a/apps/docs/src/content/04-components/actions/action/examples/feedback.tsx b/apps/docs/src/content/components/actions/action/examples/feedback.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action/examples/feedback.tsx rename to apps/docs/src/content/components/actions/action/examples/feedback.tsx diff --git a/apps/docs/src/content/04-components/actions/action/examples/lib.ts b/apps/docs/src/content/components/actions/action/examples/lib.ts similarity index 100% rename from apps/docs/src/content/04-components/actions/action/examples/lib.ts rename to apps/docs/src/content/components/actions/action/examples/lib.ts diff --git a/apps/docs/src/content/04-components/actions/action/examples/longAction.tsx b/apps/docs/src/content/components/actions/action/examples/longAction.tsx similarity index 66% rename from apps/docs/src/content/04-components/actions/action/examples/longAction.tsx rename to apps/docs/src/content/components/actions/action/examples/longAction.tsx index ab0e690246..cfda1bd815 100644 --- a/apps/docs/src/content/04-components/actions/action/examples/longAction.tsx +++ b/apps/docs/src/content/components/actions/action/examples/longAction.tsx @@ -2,7 +2,7 @@ import { Action, Button, } from "@mittwald/flow-react-components"; -import { sleepLong } from "@/content/04-components/actions/action/examples/lib"; +import { sleepLong } from "@/content/components/actions/action/examples/lib"; diff --git a/apps/docs/src/content/04-components/actions/action/examples/menuItem.tsx b/apps/docs/src/content/components/actions/action/examples/menuItem.tsx similarity index 79% rename from apps/docs/src/content/04-components/actions/action/examples/menuItem.tsx rename to apps/docs/src/content/components/actions/action/examples/menuItem.tsx index 749354decb..d87c1663d4 100644 --- a/apps/docs/src/content/04-components/actions/action/examples/menuItem.tsx +++ b/apps/docs/src/content/components/actions/action/examples/menuItem.tsx @@ -5,7 +5,7 @@ import { ContextMenu, MenuItem, } from "@mittwald/flow-react-components"; -import { sleepLong } from "@/content/04-components/actions/action/examples/lib"; +import { sleepLong } from "@/content/components/actions/action/examples/lib"; diff --git a/apps/docs/src/content/04-components/actions/action/examples/nested.tsx b/apps/docs/src/content/components/actions/action/examples/nested.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/action/examples/nested.tsx rename to apps/docs/src/content/components/actions/action/examples/nested.tsx diff --git a/apps/docs/src/content/04-components/actions/action/index.mdx b/apps/docs/src/content/components/actions/action/index.mdx similarity index 94% rename from apps/docs/src/content/04-components/actions/action/index.mdx rename to apps/docs/src/content/components/actions/action/index.mdx index ca60428f0f..031a321fef 100644 --- a/apps/docs/src/content/04-components/actions/action/index.mdx +++ b/apps/docs/src/content/components/actions/action/index.mdx @@ -13,7 +13,7 @@ description: - Nutze den Pending State nur für Vorgänge unter etwa fünf Sekunden. Für längere Prozesse eignet sich eher eine - [Notification](/04-components/status/notification). + [Notification](/components/status/notification). - Setze Feedback States nur ein, wenn sie dem Nutzer einen Mehrwert bieten. --- @@ -40,7 +40,7 @@ kann das Property `showFeedback` genutzt werden. Um User vor unbeabsichtigten Aktionen zu schützen, kann ein Bestätigungsmodal angezeigt werden. Dafür muss innerhalb der Action ein -[Modal](/04-components/overlays/modal) mit dem Attribut `slot="actionConfirm"` +[Modal](/components/overlays/modal) mit dem Attribut `slot="actionConfirm"` platziert werden. diff --git a/apps/docs/src/content/04-components/actions/button/examples/action-group.tsx b/apps/docs/src/content/components/actions/button/examples/action-group.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/action-group.tsx rename to apps/docs/src/content/components/actions/button/examples/action-group.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/action.tsx b/apps/docs/src/content/components/actions/button/examples/action.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/action.tsx rename to apps/docs/src/content/components/actions/button/examples/action.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/colors.tsx b/apps/docs/src/content/components/actions/button/examples/colors.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/colors.tsx rename to apps/docs/src/content/components/actions/button/examples/colors.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/combine.tsx b/apps/docs/src/content/components/actions/button/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/combine.tsx rename to apps/docs/src/content/components/actions/button/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/dark.tsx b/apps/docs/src/content/components/actions/button/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/dark.tsx rename to apps/docs/src/content/components/actions/button/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/default.tsx b/apps/docs/src/content/components/actions/button/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/default.tsx rename to apps/docs/src/content/components/actions/button/examples/default.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/icon-text.tsx b/apps/docs/src/content/components/actions/button/examples/icon-text.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/icon-text.tsx rename to apps/docs/src/content/components/actions/button/examples/icon-text.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/icon.tsx b/apps/docs/src/content/components/actions/button/examples/icon.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/icon.tsx rename to apps/docs/src/content/components/actions/button/examples/icon.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/light.tsx b/apps/docs/src/content/components/actions/button/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/light.tsx rename to apps/docs/src/content/components/actions/button/examples/light.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/sizes.tsx b/apps/docs/src/content/components/actions/button/examples/sizes.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/sizes.tsx rename to apps/docs/src/content/components/actions/button/examples/sizes.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/states.tsx b/apps/docs/src/content/components/actions/button/examples/states.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/states.tsx rename to apps/docs/src/content/components/actions/button/examples/states.tsx diff --git a/apps/docs/src/content/04-components/actions/button/examples/variants.tsx b/apps/docs/src/content/components/actions/button/examples/variants.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/button/examples/variants.tsx rename to apps/docs/src/content/components/actions/button/examples/variants.tsx diff --git a/apps/docs/src/content/04-components/actions/button/index.mdx b/apps/docs/src/content/components/actions/button/index.mdx similarity index 80% rename from apps/docs/src/content/04-components/actions/button/index.mdx rename to apps/docs/src/content/components/actions/button/index.mdx index e2c0fed467..684341c3be 100644 --- a/apps/docs/src/content/04-components/actions/button/index.mdx +++ b/apps/docs/src/content/components/actions/button/index.mdx @@ -17,21 +17,20 @@ description: - Richte die visuelle Hierarchie nach der Wichtigkeit der Aktion. Nutze dafür die verschiedenen Varianten und Colors. - Gib dem User nach der Aktion ein visuelles Feedback. Über die - [Action](/04-components/actions/action) lässt sich dieses Feedback steuern. + [Action](/components/actions/action) lässt sich dieses Feedback steuern. ## Button vs. Link Verwende für Navigation bevorzugt Links und für Aktionen Buttons. Eine Ausnahme können hervorgehobene -[Call-to-Actions](/04-components/navigation/link#kombiniere-mit-button) sein, -bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll -ist. +[Call-to-Actions](/components/navigation/link#kombiniere-mit-button) sein, bei +denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist. - eine Aktion auszuführen oder ein Event zu starten, ohne die Seite zu verlassen. - Formulare zu speichern oder zurückzusetzen. - - in einem [Modal](/04-components/overlays/modal) Aktionen auszuwählen. + - in einem [Modal](/components/overlays/modal) Aktionen auszuwählen. @@ -82,7 +81,7 @@ Farben unterstützen die visuelle Hierarchie zusätzlich. Verwende: Um auf farbigen Hintergründen ausreichend Kontrast zu erreichen, können Buttons auch in Light und Dark eingesetzt werden. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). @@ -109,7 +108,7 @@ steht. Die States **Pending**, **Succeeded** und **Failed** geben dem User zusätzliches visuelles Feedback darüber, dass im Hintergrund eine Aktion läuft, erfolgreich abgeschlossen wurde oder fehlgeschlagen ist. Um diese States zu steuern, kann -die [Action](/04-components/actions/action)-Komponente genutzt werden. +die [Action](/components/actions/action)-Komponente genutzt werden. @@ -118,15 +117,15 @@ die [Action](/04-components/actions/action)-Komponente genutzt werden. # Content Der Content-Bereich eines Buttons kann entweder Text, ein -[Icon](/04-components/content/icon) oder [Text](/04-components/content/text) mit -einem Icon am Ende enthalten. Achte in allen Fällen darauf, dass Text und Icon -die Aktion eindeutig beschreiben. +[Icon](/components/content/icon) oder [Text](/components/content/text) mit einem +Icon am Ende enthalten. Achte in allen Fällen darauf, dass Text und Icon die +Aktion eindeutig beschreiben. ## Icon Wenn ausschließlich ein Icon verwendet wird, sollte das `aria-label` den -Verwendungszweck beschreiben. Ein [Tooltip](/04-components/overlays/tooltip) -kann zusätzlich verdeutlichen, wofür die Aktion gedacht ist. +Verwendungszweck beschreiben. Ein [Tooltip](/components/overlays/tooltip) kann +zusätzlich verdeutlichen, wofür die Aktion gedacht ist. @@ -137,7 +136,7 @@ nur dazu, wenn es etwas beiträgt, das der Text allein nicht abdeckt: - **Verhalten:** Das Icon zeigt, wie sich der Button verhält. Ein Chevron-Icon zeigt zum Beispiel an, dass sich dahinter ein - [ContextMenu](/04-components/actions/context-menu) verbirgt. + [ContextMenu](/components/actions/context-menu) verbirgt. - **Erkennung:** Das Icon steht produktweit und ausschließlich für eine Feature-Familie, nach der User scannen, z. B. das AI-Icon neben „AI Agent verbinden". @@ -153,14 +152,14 @@ es nur Unruhe. Im Zweifel weglassen. ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um deinen -Button neben Input-Feldern zu platzieren. +Benutze die [Combine](/components/structure/combine)-Component, um deinen Button +neben Input-Feldern zu platzieren. ## ActionGroup -Benutze die [ActionGroup](/04-components/actions/action-group)-Component, um +Benutze die [ActionGroup](/components/actions/action-group)-Component, um zusammengehörige Aktionen zu gruppieren und automatisch in eine konsistente Hierarchie (Haupt- und Nebenaktion) zu bringen. @@ -168,8 +167,8 @@ Hierarchie (Haupt- und Nebenaktion) zu bringen. ## Action -Benutze die [Action](/04-components/actions/action)-Component, um die States -eines Buttons zu steuern. +Benutze die [Action](/components/actions/action)-Component, um die States eines +Buttons zu steuern. diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/avatar.tsx b/apps/docs/src/content/components/actions/context-menu/examples/avatar.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/avatar.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/avatar.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/default.tsx b/apps/docs/src/content/components/actions/context-menu/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/default.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/default.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/icon.tsx b/apps/docs/src/content/components/actions/context-menu/examples/icon.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/icon.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/icon.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/modal.tsx b/apps/docs/src/content/components/actions/context-menu/examples/modal.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/modal.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/modal.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/multi-select.tsx b/apps/docs/src/content/components/actions/context-menu/examples/multi-select.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/multi-select.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/multi-select.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/section.tsx b/apps/docs/src/content/components/actions/context-menu/examples/section.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/section.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/section.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/sectionSelectionMode.tsx b/apps/docs/src/content/components/actions/context-menu/examples/sectionSelectionMode.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/sectionSelectionMode.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/sectionSelectionMode.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/separator.tsx b/apps/docs/src/content/components/actions/context-menu/examples/separator.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/separator.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/separator.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/single-select.tsx b/apps/docs/src/content/components/actions/context-menu/examples/single-select.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/single-select.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/single-select.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/states.tsx b/apps/docs/src/content/components/actions/context-menu/examples/states.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/states.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/states.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/switch.tsx b/apps/docs/src/content/components/actions/context-menu/examples/switch.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/switch.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/switch.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/width.tsx b/apps/docs/src/content/components/actions/context-menu/examples/width.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/context-menu/examples/width.tsx rename to apps/docs/src/content/components/actions/context-menu/examples/width.tsx diff --git a/apps/docs/src/content/04-components/actions/context-menu/index.mdx b/apps/docs/src/content/components/actions/context-menu/index.mdx similarity index 71% rename from apps/docs/src/content/04-components/actions/context-menu/index.mdx rename to apps/docs/src/content/components/actions/context-menu/index.mdx index d73ba56591..1d762b9af6 100644 --- a/apps/docs/src/content/04-components/actions/context-menu/index.mdx +++ b/apps/docs/src/content/components/actions/context-menu/index.mdx @@ -15,8 +15,8 @@ description: - Zeige nur kontextrelevante Inhalte. - Benenne die Aktionen klar und verständlich. - Stelle häufig genutzte Aktionen nach oben, damit sie leicht erreichbar sind. -- Gruppiere bei Bedarf mit einer [Section](/04-components/structure/section) - oder einem [Separator](/04-components/structure/separator). Das erhöht die +- Gruppiere bei Bedarf mit einer [Section](/components/structure/section) oder + einem [Separator](/components/structure/separator). Das erhöht die Übersichtlichkeit. --- @@ -24,7 +24,7 @@ description: # Einfach-Auswahl Durch `selectionMode="single"` verhalten sich die Menüeinträge des ContextMenu -wie eine [RadioGroup](/04-components/form-controls/radio-group), sodass nur ein +wie eine [RadioGroup](/components/form-controls/radio-group), sodass nur ein Element ausgewählt werden kann. @@ -34,7 +34,7 @@ Element ausgewählt werden kann. # Mehrfach-Auswahl Durch `selectionMode="multiple"` verhalten sich die Menüeinträge des ContextMenu -wie [Checkboxen](/04-components/form-controls/checkbox), sodass mehrere Optionen +wie [Checkboxen](/components/form-controls/checkbox), sodass mehrere Optionen ausgewählt werden können. @@ -43,7 +43,7 @@ ausgewählt werden können. # Mit Switch -Ein [Switch](/04-components/form-controls/switch) im ContextMenu ermöglicht es, +Ein [Switch](/components/form-controls/switch) im ContextMenu ermöglicht es, Aktionen direkt zu aktivieren oder deaktivieren. @@ -52,7 +52,7 @@ Aktionen direkt zu aktivieren oder deaktivieren. # Mit Icon -Verwende [Icons](/04-components/content/icon) innerhalb vom ``, um +Verwende [Icons](/components/content/icon) innerhalb vom ``, um Aktionen schneller verständlich zu machen oder bekannte Funktionen klarer zu vermitteln. @@ -62,7 +62,7 @@ vermitteln. # Mit Separator -Ein [Separator](/04-components/structure/separator) gruppiert logisch +Ein [Separator](/components/structure/separator) gruppiert logisch zusammengehörige Aktionen. @@ -72,8 +72,7 @@ zusammengehörige Aktionen. # Mit ContextMenuSections Eine `ContextMenuSection` sorgt im ContextMenu für klare Struktur, indem sie -eine [Heading](/04-components/content/heading) und definierte Abstände -verwendet. +eine [Heading](/components/content/heading) und definierte Abstände verwendet. @@ -101,8 +100,8 @@ Auswahlgruppen mit jeweils eigenem Auswahlverhalten zu kombinieren. # Mit Avatar Verwende das ContextMenu als Profilmenü, indem innerhalb ein -[Avatar](/04-components/content/avatar) und eine -[Heading](/04-components/content/heading) platziert werden. +[Avatar](/components/content/avatar) und eine +[Heading](/components/content/heading) platziert werden. @@ -117,8 +116,8 @@ keine Interaktion möglich ist. oder kein Ereignis auslösen soll. - **Pending, Succeeded und Failed** – signalisieren dem Nutzer, dass im Hintergrund etwas passiert, nachdem er auf ein MenuItem geklickt hat. Verwende - das MenuItem zusammen mit der Component - [Action](/04-components/actions/action), um die States zu steuern. + das MenuItem zusammen mit der Component [Action](/components/actions/action), + um die States zu steuern. @@ -128,9 +127,9 @@ keine Interaktion möglich ist. ## Modal -Aktionen im ContextMenu können [Modals](/04-components/overlays/modal) als -Overlay öffnen, wenn zusätzliche Informationen erfasst, bestätigt oder -bearbeitet werden müssen. +Aktionen im ContextMenu können [Modals](/components/overlays/modal) als Overlay +öffnen, wenn zusätzliche Informationen erfasst, bestätigt oder bearbeitet werden +müssen. diff --git a/apps/docs/src/content/04-components/actions/copy-button/examples/combine.tsx b/apps/docs/src/content/components/actions/copy-button/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/copy-button/examples/combine.tsx rename to apps/docs/src/content/components/actions/copy-button/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/actions/copy-button/examples/default.tsx b/apps/docs/src/content/components/actions/copy-button/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/actions/copy-button/examples/default.tsx rename to apps/docs/src/content/components/actions/copy-button/examples/default.tsx diff --git a/apps/docs/src/content/04-components/actions/copy-button/index.mdx b/apps/docs/src/content/components/actions/copy-button/index.mdx similarity index 78% rename from apps/docs/src/content/04-components/actions/copy-button/index.mdx rename to apps/docs/src/content/components/actions/copy-button/index.mdx index 63e5cd95ac..e3288c9659 100644 --- a/apps/docs/src/content/04-components/actions/copy-button/index.mdx +++ b/apps/docs/src/content/components/actions/copy-button/index.mdx @@ -12,7 +12,7 @@ description: # Best Practices - Platziere den CopyButton unmittelbar neben dem zu kopierenden Text. Die - [Combine](/04-components/structure/combine)-Component hilft bei der Anordnung. + [Combine](/components/structure/combine)-Component hilft bei der Anordnung. - Nutze standardmäßig die Secondary Color. So bleibt der CopyButton trotz häufiger Nutzung in der Oberfläche optisch zurückhaltend. @@ -22,7 +22,7 @@ description: ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um einen +Benutze die [Combine](/components/structure/combine)-Component, um einen CopyButton neben dem zu kopierenden Text zu platzieren. diff --git a/apps/docs/src/content/04-components/chat/chat/examples/default.tsx b/apps/docs/src/content/components/chat/chat/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/chat/examples/default.tsx rename to apps/docs/src/content/components/chat/chat/examples/default.tsx diff --git a/apps/docs/src/content/04-components/chat/chat/examples/form.tsx b/apps/docs/src/content/components/chat/chat/examples/form.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/chat/examples/form.tsx rename to apps/docs/src/content/components/chat/chat/examples/form.tsx diff --git a/apps/docs/src/content/04-components/chat/chat/examples/markdown-editor.tsx b/apps/docs/src/content/components/chat/chat/examples/markdown-editor.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/chat/examples/markdown-editor.tsx rename to apps/docs/src/content/components/chat/chat/examples/markdown-editor.tsx diff --git a/apps/docs/src/content/04-components/chat/chat/examples/upload.tsx b/apps/docs/src/content/components/chat/chat/examples/upload.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/chat/examples/upload.tsx rename to apps/docs/src/content/components/chat/chat/examples/upload.tsx diff --git a/apps/docs/src/content/04-components/chat/chat/index.mdx b/apps/docs/src/content/components/chat/chat/index.mdx similarity index 65% rename from apps/docs/src/content/04-components/chat/chat/index.mdx rename to apps/docs/src/content/components/chat/chat/index.mdx index 215d1851d1..eecb4f4824 100644 --- a/apps/docs/src/content/04-components/chat/chat/index.mdx +++ b/apps/docs/src/content/components/chat/chat/index.mdx @@ -20,16 +20,16 @@ description: Der Chat kombiniert den MessageThread mit einer Texteingabe. ## FileField Erweitere einen Chat um eine Uploadfunktion: Über ein -[FileField](/04-components/form-controls/file-field) wählen User Dateien aus, -die dann in einer [FileCardList](/04-components/upload/file-card-list) -dargestellt werden. +[FileField](/components/form-controls/file-field) wählen User Dateien aus, die +dann in einer [FileCardList](/components/upload/file-card-list) dargestellt +werden. ## Markdown Editor -Statt einer [TextArea](/04-components/form-controls/text-area) kann auch der -[MarkdownEditor](/04-components/form-controls/markdown-editor) als Texteingabe +Statt einer [TextArea](/components/form-controls/text-area) kann auch der +[MarkdownEditor](/components/form-controls/markdown-editor) als Texteingabe verwendet werden. @@ -37,7 +37,7 @@ verwendet werden. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/chat/message-thread/examples/default.tsx b/apps/docs/src/content/components/chat/message-thread/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/message-thread/examples/default.tsx rename to apps/docs/src/content/components/chat/message-thread/examples/default.tsx diff --git a/apps/docs/src/content/04-components/chat/message-thread/index.mdx b/apps/docs/src/content/components/chat/message-thread/index.mdx similarity index 85% rename from apps/docs/src/content/04-components/chat/message-thread/index.mdx rename to apps/docs/src/content/components/chat/message-thread/index.mdx index 16e082303e..9e03e73be4 100644 --- a/apps/docs/src/content/04-components/chat/message-thread/index.mdx +++ b/apps/docs/src/content/components/chat/message-thread/index.mdx @@ -9,7 +9,7 @@ description: Der MessageThread gruppiert Messages zu einem Gesprächsverlauf. # Best Practices -- Halte die zeitliche Abfolge der [Messages](/04-components/chat/message) +- Halte die zeitliche Abfolge der [Messages](/components/chat/message) konsistent. - Zeichne Absender und Antwortender über das `type`-Property als `sender` bzw. `responder` aus. diff --git a/apps/docs/src/content/04-components/chat/message/examples/action.tsx b/apps/docs/src/content/components/chat/message/examples/action.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/message/examples/action.tsx rename to apps/docs/src/content/components/chat/message/examples/action.tsx diff --git a/apps/docs/src/content/04-components/chat/message/examples/color.tsx b/apps/docs/src/content/components/chat/message/examples/color.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/message/examples/color.tsx rename to apps/docs/src/content/components/chat/message/examples/color.tsx diff --git a/apps/docs/src/content/04-components/chat/message/examples/default.tsx b/apps/docs/src/content/components/chat/message/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/message/examples/default.tsx rename to apps/docs/src/content/components/chat/message/examples/default.tsx diff --git a/apps/docs/src/content/04-components/chat/message/examples/markdown.tsx b/apps/docs/src/content/components/chat/message/examples/markdown.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/message/examples/markdown.tsx rename to apps/docs/src/content/components/chat/message/examples/markdown.tsx diff --git a/apps/docs/src/content/04-components/chat/message/examples/sender.tsx b/apps/docs/src/content/components/chat/message/examples/sender.tsx similarity index 100% rename from apps/docs/src/content/04-components/chat/message/examples/sender.tsx rename to apps/docs/src/content/components/chat/message/examples/sender.tsx diff --git a/apps/docs/src/content/04-components/chat/message/index.mdx b/apps/docs/src/content/components/chat/message/index.mdx similarity index 67% rename from apps/docs/src/content/04-components/chat/message/index.mdx rename to apps/docs/src/content/components/chat/message/index.mdx index 803a4cdfbe..8737a13741 100644 --- a/apps/docs/src/content/04-components/chat/message/index.mdx +++ b/apps/docs/src/content/components/chat/message/index.mdx @@ -12,9 +12,9 @@ description: # Best Practices - Gruppiere mehrere Messages in einem - [MessageThread](/04-components/chat/message-thread). -- Halte das [ContextMenu](/04-components/actions/context-menu) schlank. Es - enthält nur direkt relevante Aktionen wie Bearbeiten und Löschen. + [MessageThread](/components/chat/message-thread). +- Halte das [ContextMenu](/components/actions/context-menu) schlank. Es enthält + nur direkt relevante Aktionen wie Bearbeiten und Löschen. --- @@ -41,16 +41,16 @@ System-Nachricht oder interne Notiz. Setze für den Text eine statische Farbe wi ## ActionGroup -Ergänze eine Message um einen [Button](/04-components/actions/button) oder eine -[ActionGroup](/04-components/actions/action-group). Die Actions sollten immer in +Ergänze eine Message um einen [Button](/components/actions/button) oder eine +[ActionGroup](/components/actions/action-group). Die Actions sollten immer in direktem Bezug zum Inhalt der Message stehen. ## Markdown -Nutze die [Markdown](/04-components/content/markdown)-Component, um den Text -einer Message als Markdown zu rendern. +Nutze die [Markdown](/components/content/markdown)-Component, um den Text einer +Message als Markdown zu rendern. diff --git a/apps/docs/src/content/04-components/content/avatar-stack/examples/clickable.tsx b/apps/docs/src/content/components/content/avatar-stack/examples/clickable.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar-stack/examples/clickable.tsx rename to apps/docs/src/content/components/content/avatar-stack/examples/clickable.tsx diff --git a/apps/docs/src/content/04-components/content/avatar-stack/examples/default.tsx b/apps/docs/src/content/components/content/avatar-stack/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar-stack/examples/default.tsx rename to apps/docs/src/content/components/content/avatar-stack/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/avatar-stack/examples/sizes.tsx b/apps/docs/src/content/components/content/avatar-stack/examples/sizes.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar-stack/examples/sizes.tsx rename to apps/docs/src/content/components/content/avatar-stack/examples/sizes.tsx diff --git a/apps/docs/src/content/04-components/content/avatar-stack/examples/total-count.tsx b/apps/docs/src/content/components/content/avatar-stack/examples/total-count.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar-stack/examples/total-count.tsx rename to apps/docs/src/content/components/content/avatar-stack/examples/total-count.tsx diff --git a/apps/docs/src/content/04-components/content/avatar-stack/index.mdx b/apps/docs/src/content/components/content/avatar-stack/index.mdx similarity index 61% rename from apps/docs/src/content/04-components/content/avatar-stack/index.mdx rename to apps/docs/src/content/components/content/avatar-stack/index.mdx index bac08647bf..0b4c3ad28d 100644 --- a/apps/docs/src/content/04-components/content/avatar-stack/index.mdx +++ b/apps/docs/src/content/components/content/avatar-stack/index.mdx @@ -10,16 +10,16 @@ description: # Best Practices -- Zeige nicht zu viele [Avatare](/04-components/content/avatar) gleichzeitig. +- Zeige nicht zu viele [Avatare](/components/content/avatar) gleichzeitig. Empfohlen sind höchstens fünf; für die verbleibende Anzahl nutzt du die Property `totalCount`. - Zeige bei Bedarf per Klick mehr Informationen an. Nutze auf den einzelnen - Avataren eine [ContextualHelp](/04-components/overlays/contextual-help) mit - dem Namen und auf dem `totalCount`-Avatar ein - [Modal](/04-components/overlays/modal) mit allen Usern in einer Liste. + Avataren eine [ContextualHelp](/components/overlays/contextual-help) mit dem + Namen und auf dem `totalCount`-Avatar ein [Modal](/components/overlays/modal) + mit allen Usern in einer Liste. - Halte die Avatare konsistent zur Darstellung an anderen Stellen. Nutze etwa das hochgeladene Profilbild statt eines generischen - User-[Icons](/04-components/content/icon). + User-[Icons](/components/content/icon). --- @@ -32,8 +32,8 @@ description: # Total Count Über die Property `totalCount` lässt sich die Gesamtzahl der -[Avatare](/04-components/content/avatar) angeben. Ist `totalCount` größer als -die Anzahl der angezeigten Avatare, wird ein zusätzlicher Counter mit der +[Avatare](/components/content/avatar) angeben. Ist `totalCount` größer als die +Anzahl der angezeigten Avatare, wird ein zusätzlicher Counter mit der verbleibenden Anzahl angezeigt. @@ -44,9 +44,9 @@ verbleibenden Anzahl angezeigt. Mache Avatare interaktiv, um mehr Informationen anzuzeigen. Im Beispiel öffnet jeder einzelne Avatar eine -[ContextualHelp](/04-components/overlays/contextual-help) mit dem Namen, während +[ContextualHelp](/components/overlays/contextual-help) mit dem Namen, während der `totalCount`-Avatar über `onCountPress` ein -[Modal](/04-components/overlays/modal) mit allen Usern öffnet. +[Modal](/components/overlays/modal) mit allen Usern öffnet. diff --git a/apps/docs/src/content/04-components/content/avatar/examples/colors.tsx b/apps/docs/src/content/components/content/avatar/examples/colors.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/colors.tsx rename to apps/docs/src/content/components/content/avatar/examples/colors.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/combine.tsx b/apps/docs/src/content/components/content/avatar/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/combine.tsx rename to apps/docs/src/content/components/content/avatar/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/default.tsx b/apps/docs/src/content/components/content/avatar/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/default.tsx rename to apps/docs/src/content/components/content/avatar/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/icon.tsx b/apps/docs/src/content/components/content/avatar/examples/icon.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/icon.tsx rename to apps/docs/src/content/components/content/avatar/examples/icon.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/image.tsx b/apps/docs/src/content/components/content/avatar/examples/image.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/image.tsx rename to apps/docs/src/content/components/content/avatar/examples/image.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/initials.tsx b/apps/docs/src/content/components/content/avatar/examples/initials.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/initials.tsx rename to apps/docs/src/content/components/content/avatar/examples/initials.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/sizes.tsx b/apps/docs/src/content/components/content/avatar/examples/sizes.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/sizes.tsx rename to apps/docs/src/content/components/content/avatar/examples/sizes.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/status-example.tsx b/apps/docs/src/content/components/content/avatar/examples/status-example.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/status-example.tsx rename to apps/docs/src/content/components/content/avatar/examples/status-example.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/examples/status.tsx b/apps/docs/src/content/components/content/avatar/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/avatar/examples/status.tsx rename to apps/docs/src/content/components/content/avatar/examples/status.tsx diff --git a/apps/docs/src/content/04-components/content/avatar/index.mdx b/apps/docs/src/content/components/content/avatar/index.mdx similarity index 73% rename from apps/docs/src/content/04-components/content/avatar/index.mdx rename to apps/docs/src/content/components/content/avatar/index.mdx index 2dd25d8ecb..98eefb3f38 100644 --- a/apps/docs/src/content/04-components/content/avatar/index.mdx +++ b/apps/docs/src/content/components/content/avatar/index.mdx @@ -11,22 +11,22 @@ description: # Best Practices - Wähle die passende Variante je nach Anwendungsfall. Ein - [Image](/04-components/content/image) eignet sich für personalisierte Elemente - wie Benutzerprofile, ein [Icon](/04-components/content/icon) für - wiederkehrende Inhalte. + [Image](/components/content/image) eignet sich für personalisierte Elemente + wie Benutzerprofile, ein [Icon](/components/content/icon) für wiederkehrende + Inhalte. - Zeige Initialen, wenn kein passendes Image hinterlegt ist. - Überlass die Farbe meist dem enthaltenen Element. Setze über `color` nur dann eine feste Farbe, wenn sie die Unterscheidung verbessert. - Sorge dafür, dass die Bedeutung des Avatars aus dem Kontext hervorgeht. - Nutze bei mehreren Avataren nebeneinander einen - [AvatarStack](/04-components/content/avatar-stack). + [AvatarStack](/components/content/avatar-stack). --- # Color Initials erhalten automatisch eine der Colors, abhängig von ihrem Inhalt. Ein -[Icon](/04-components/content/icon) erhält über den Avatar im Default die Color +[Icon](/components/content/icon) erhält über den Avatar im Default die Color `blue`. Für eine gezielte Wahl kann das Property `color` verwendet werden. @@ -44,7 +44,7 @@ Initials erhalten automatisch eine der Colors, abhängig von ihrem Inhalt. Ein Wird im Avatar das Property `status` gesetzt erhält der Avatar automatisch das passende Icon und die passende Farbe. Dieses Property darf nur verwendet werden, wenn der Status zusätzlich durch ein benachbartes Element (z. B. -[Text](/04-components/content/text) oder [Label](/04-components/content/label)) +[Text](/components/content/text) oder [Label](/components/content/label)) eindeutig kommuniziert wird. @@ -57,27 +57,27 @@ eindeutig kommuniziert wird. ## Image Im folgenden Code-Beispiel wird ein Avatar mit einem -[Image](/04-components/content/image) kombiniert. Wenn kein Image vorhanden ist, +[Image](/components/content/image) kombiniert. Wenn kein Image vorhanden ist, sollten Initials angezeigt werden. Die Initials werden automatisch aus dem Text generiert, der innerhalb von `` übergeben wird. Sie dienen ausschließlich als Platzhalter für ein -[Image](/04-components/content/image). +[Image](/components/content/image). ## Icon -Ein Avatar lässt sich mit einem beliebigen [Icon](/04-components/content/icon) +Ein Avatar lässt sich mit einem beliebigen [Icon](/components/content/icon) kombinieren. ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um Text neben +Benutze die [Combine](/components/structure/combine)-Component, um Text neben dem Avatar zu platzieren. diff --git a/apps/docs/src/content/04-components/content/code-block/examples/children.tsx b/apps/docs/src/content/components/content/code-block/examples/children.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/code-block/examples/children.tsx rename to apps/docs/src/content/components/content/code-block/examples/children.tsx diff --git a/apps/docs/src/content/04-components/content/code-block/examples/copyable.tsx b/apps/docs/src/content/components/content/code-block/examples/copyable.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/code-block/examples/copyable.tsx rename to apps/docs/src/content/components/content/code-block/examples/copyable.tsx diff --git a/apps/docs/src/content/04-components/content/code-block/examples/default.tsx b/apps/docs/src/content/components/content/code-block/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/code-block/examples/default.tsx rename to apps/docs/src/content/components/content/code-block/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/code-block/examples/lineNumbers.tsx b/apps/docs/src/content/components/content/code-block/examples/lineNumbers.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/code-block/examples/lineNumbers.tsx rename to apps/docs/src/content/components/content/code-block/examples/lineNumbers.tsx diff --git a/apps/docs/src/content/04-components/content/code-block/examples/truncateLines.tsx b/apps/docs/src/content/components/content/code-block/examples/truncateLines.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/code-block/examples/truncateLines.tsx rename to apps/docs/src/content/components/content/code-block/examples/truncateLines.tsx diff --git a/apps/docs/src/content/04-components/content/code-block/index.mdx b/apps/docs/src/content/components/content/code-block/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/content/code-block/index.mdx rename to apps/docs/src/content/components/content/code-block/index.mdx diff --git a/apps/docs/src/content/04-components/content/color/examples/accent-box.tsx b/apps/docs/src/content/components/content/color/examples/accent-box.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/color/examples/accent-box.tsx rename to apps/docs/src/content/components/content/color/examples/accent-box.tsx diff --git a/apps/docs/src/content/04-components/content/color/examples/color.tsx b/apps/docs/src/content/components/content/color/examples/color.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/color/examples/color.tsx rename to apps/docs/src/content/components/content/color/examples/color.tsx diff --git a/apps/docs/src/content/04-components/content/color/examples/custom.tsx b/apps/docs/src/content/components/content/color/examples/custom.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/color/examples/custom.tsx rename to apps/docs/src/content/components/content/color/examples/custom.tsx diff --git a/apps/docs/src/content/04-components/content/color/examples/default.tsx b/apps/docs/src/content/components/content/color/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/color/examples/default.tsx rename to apps/docs/src/content/components/content/color/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/color/examples/heading.tsx b/apps/docs/src/content/components/content/color/examples/heading.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/color/examples/heading.tsx rename to apps/docs/src/content/components/content/color/examples/heading.tsx diff --git a/apps/docs/src/content/04-components/content/color/examples/status.tsx b/apps/docs/src/content/components/content/color/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/color/examples/status.tsx rename to apps/docs/src/content/components/content/color/examples/status.tsx diff --git a/apps/docs/src/content/04-components/content/color/index.mdx b/apps/docs/src/content/components/content/color/index.mdx similarity index 75% rename from apps/docs/src/content/04-components/content/color/index.mdx rename to apps/docs/src/content/components/content/color/index.mdx index 1576873c29..706debcbc7 100644 --- a/apps/docs/src/content/04-components/content/color/index.mdx +++ b/apps/docs/src/content/components/content/color/index.mdx @@ -22,8 +22,8 @@ description: - Setze die Color-Component sparsam und nur in Ausnahmefällen ein. - Sorge für ausreichenden Kontrast der eingefärbten Schrift zum Hintergrund. - Hebe nur kurze Abschnitte von ein bis drei Wörtern hervor. So betonst du die - Aussage in [Texten](/04-components/content/text) oder - [Headings](/04-components/content/heading) gezielt. + Aussage in [Texten](/components/content/text) oder + [Headings](/components/content/heading) gezielt. --- @@ -37,9 +37,8 @@ Bedeutung übertragen. ## Brand Colors Brand Colors eignen sich, um einzelne Passagen in -[Texten](/04-components/content/text) oder -[Headings](/04-components/content/heading) hervorzuheben. Das ist vor allem bei -werblichen Hinweisen hilfreich. +[Texten](/components/content/text) oder [Headings](/components/content/heading) +hervorzuheben. Das ist vor allem bei werblichen Hinweisen hilfreich. @@ -63,24 +62,23 @@ HEX-Werts. ## Text -Teile eines [Textes](/04-components/content/text) lassen sich mithilfe der +Teile eines [Textes](/components/content/text) lassen sich mithilfe der Color-Component einfärben. ## Heading -Mit der Color-Component lassen sich in -[Headings](/04-components/content/heading) gezielt wichtige Wörter farblich -hervorheben. +Mit der Color-Component lassen sich in [Headings](/components/content/heading) +gezielt wichtige Wörter farblich hervorheben. ## AccentBox Ein häufiges Einsatzgebiet der Color-Component ist die Hervorhebung von -[Headings](/04-components/content/heading) in -[AccentBoxen](/04-components/structure/accent-box) mit Werbeinhalten. Dabei ist +[Headings](/components/content/heading) in +[AccentBoxen](/components/structure/accent-box) mit Werbeinhalten. Dabei ist besonders wichtig, dass die eingefärbte Schrift einen ausreichenden Kontrast zum Hintergrund aufweist. diff --git a/apps/docs/src/content/04-components/content/heading/examples/badge.tsx b/apps/docs/src/content/components/content/heading/examples/badge.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/badge.tsx rename to apps/docs/src/content/components/content/heading/examples/badge.tsx diff --git a/apps/docs/src/content/04-components/content/heading/examples/contextualHelp.tsx b/apps/docs/src/content/components/content/heading/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/contextualHelp.tsx rename to apps/docs/src/content/components/content/heading/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/content/heading/examples/dark.tsx b/apps/docs/src/content/components/content/heading/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/dark.tsx rename to apps/docs/src/content/components/content/heading/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/content/heading/examples/default.tsx b/apps/docs/src/content/components/content/heading/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/default.tsx rename to apps/docs/src/content/components/content/heading/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/heading/examples/levels.tsx b/apps/docs/src/content/components/content/heading/examples/levels.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/levels.tsx rename to apps/docs/src/content/components/content/heading/examples/levels.tsx diff --git a/apps/docs/src/content/04-components/content/heading/examples/light.tsx b/apps/docs/src/content/components/content/heading/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/light.tsx rename to apps/docs/src/content/components/content/heading/examples/light.tsx diff --git a/apps/docs/src/content/04-components/content/heading/examples/size.tsx b/apps/docs/src/content/components/content/heading/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/heading/examples/size.tsx rename to apps/docs/src/content/components/content/heading/examples/size.tsx diff --git a/apps/docs/src/content/04-components/content/heading/index.mdx b/apps/docs/src/content/components/content/heading/index.mdx similarity index 78% rename from apps/docs/src/content/04-components/content/heading/index.mdx rename to apps/docs/src/content/components/content/heading/index.mdx index 7bd33140b8..618d4e0613 100644 --- a/apps/docs/src/content/04-components/content/heading/index.mdx +++ b/apps/docs/src/content/components/content/heading/index.mdx @@ -33,7 +33,7 @@ eine sinnvolle Struktur mit verschiedenen Ebenen aufweisen. Zusätzlich zur Standard-Color kann die Heading in **Light** und **Dark** dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen nicht gut funktioniert. Wann welche Color passt, beschreibt -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). @@ -55,16 +55,16 @@ beibehalten. ## ContextualHelp -Verwende eine [ContextualHelp](/04-components/overlays/contextual-help), um -Usern zusätzliche Hilfestellungen zu geben (z. B. bei Fachbegriffen). +Verwende eine [ContextualHelp](/components/overlays/contextual-help), um Usern +zusätzliche Hilfestellungen zu geben (z. B. bei Fachbegriffen). ## Badge oder AlertBadge -Verwende ein [Badge](/04-components/status/badge), um wichtige Metainformationen -zu einem Abschnitt hervorzuheben, oder ein -[AlertBadge](/04-components/status/alert-badge), um einen Status anzuzeigen. +Verwende ein [Badge](/components/status/badge), um wichtige Metainformationen zu +einem Abschnitt hervorzuheben, oder ein +[AlertBadge](/components/status/alert-badge), um einen Status anzuzeigen. diff --git a/apps/docs/src/content/04-components/content/icon/examples/colors.tsx b/apps/docs/src/content/components/content/icon/examples/colors.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/colors.tsx rename to apps/docs/src/content/components/content/icon/examples/colors.tsx diff --git a/apps/docs/src/content/04-components/content/icon/examples/combine.tsx b/apps/docs/src/content/components/content/icon/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/combine.tsx rename to apps/docs/src/content/components/content/icon/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/content/icon/examples/custom-color.tsx b/apps/docs/src/content/components/content/icon/examples/custom-color.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/custom-color.tsx rename to apps/docs/src/content/components/content/icon/examples/custom-color.tsx diff --git a/apps/docs/src/content/04-components/content/icon/examples/default.tsx b/apps/docs/src/content/components/content/icon/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/default.tsx rename to apps/docs/src/content/components/content/icon/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/icon/examples/sizes.tsx b/apps/docs/src/content/components/content/icon/examples/sizes.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/sizes.tsx rename to apps/docs/src/content/components/content/icon/examples/sizes.tsx diff --git a/apps/docs/src/content/04-components/content/icon/examples/svg.tsx b/apps/docs/src/content/components/content/icon/examples/svg.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/svg.tsx rename to apps/docs/src/content/components/content/icon/examples/svg.tsx diff --git a/apps/docs/src/content/04-components/content/icon/examples/tabler.tsx b/apps/docs/src/content/components/content/icon/examples/tabler.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/icon/examples/tabler.tsx rename to apps/docs/src/content/components/content/icon/examples/tabler.tsx diff --git a/apps/docs/src/content/04-components/content/icon/index.mdx b/apps/docs/src/content/components/content/icon/index.mdx similarity index 94% rename from apps/docs/src/content/04-components/content/icon/index.mdx rename to apps/docs/src/content/components/content/icon/index.mdx index 36c934fe46..f89983bbc2 100644 --- a/apps/docs/src/content/04-components/content/icon/index.mdx +++ b/apps/docs/src/content/components/content/icon/index.mdx @@ -76,7 +76,7 @@ lassen sich drei Typen zuordnen: **Functional, Decorative** und **Status**. Functional Icons besitzen eine eindeutige, allgemein verständliche Symbolik, die der User bereits kennt. Sie unterstützen User bei Navigation und Interaktion und -werden häufig in Actions wie [Icon-Buttons](/04-components/actions/button) +werden häufig in Actions wie [Icon-Buttons](/components/actions/button) eingesetzt. @@ -101,7 +101,7 @@ Bestimmte Icons dienen der Anzeige des Status eines Elements. ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um ein Icon +Benutze die [Combine](/components/structure/combine)-Component, um ein Icon neben einem Text zu platzieren. diff --git a/apps/docs/src/content/04-components/content/illustrated-message/examples/actionGroup.tsx b/apps/docs/src/content/components/content/illustrated-message/examples/actionGroup.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/illustrated-message/examples/actionGroup.tsx rename to apps/docs/src/content/components/content/illustrated-message/examples/actionGroup.tsx diff --git a/apps/docs/src/content/04-components/content/illustrated-message/examples/danger.tsx b/apps/docs/src/content/components/content/illustrated-message/examples/danger.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/illustrated-message/examples/danger.tsx rename to apps/docs/src/content/components/content/illustrated-message/examples/danger.tsx diff --git a/apps/docs/src/content/04-components/content/illustrated-message/examples/dark.tsx b/apps/docs/src/content/components/content/illustrated-message/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/illustrated-message/examples/dark.tsx rename to apps/docs/src/content/components/content/illustrated-message/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/content/illustrated-message/examples/default.tsx b/apps/docs/src/content/components/content/illustrated-message/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/illustrated-message/examples/default.tsx rename to apps/docs/src/content/components/content/illustrated-message/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/illustrated-message/examples/light.tsx b/apps/docs/src/content/components/content/illustrated-message/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/illustrated-message/examples/light.tsx rename to apps/docs/src/content/components/content/illustrated-message/examples/light.tsx diff --git a/apps/docs/src/content/04-components/content/illustrated-message/examples/unavailable.tsx b/apps/docs/src/content/components/content/illustrated-message/examples/unavailable.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/illustrated-message/examples/unavailable.tsx rename to apps/docs/src/content/components/content/illustrated-message/examples/unavailable.tsx diff --git a/apps/docs/src/content/04-components/content/illustrated-message/index.mdx b/apps/docs/src/content/components/content/illustrated-message/index.mdx similarity index 71% rename from apps/docs/src/content/04-components/content/illustrated-message/index.mdx rename to apps/docs/src/content/components/content/illustrated-message/index.mdx index 90c7d56da4..0f59424c83 100644 --- a/apps/docs/src/content/04-components/content/illustrated-message/index.mdx +++ b/apps/docs/src/content/components/content/illustrated-message/index.mdx @@ -11,12 +11,12 @@ description: # Best Practices -- Wähle ein [Icon](/04-components/content/icon), das zum Kontext passt. +- Wähle ein [Icon](/components/content/icon), das zum Kontext passt. - Beschreibe im Text klar, warum der Zustand leer ist und was als Nächstes zu tun ist. - Unterstütze Handlungsaufforderungen mit interaktiven Elementen wie - [Buttons](/04-components/actions/button) oder - [Links](/04-components/navigation/link). + [Buttons](/components/actions/button) oder + [Links](/components/navigation/link). --- @@ -27,7 +27,7 @@ description: Bei Fehlern oder unzulässigem Zugriff hilft die IllustratedMessage Usern dabei zu verstehen, was nicht funktioniert und warum. Zusätzlich kann sie eine mögliche Lösung anbieten. Im Vergleich zu einem -[Alert](/04-components/status/alert) wirkt sie freundlicher und gleicht fehlende +[Alert](/components/status/alert) wirkt sie freundlicher und gleicht fehlende Inhalte visuell besser aus. @@ -38,7 +38,7 @@ Inhalte visuell besser aus. Zusätzlich zu den Standard-Colors kann die IllustratedMessage in **Light** und **Dark** dargestellt werden, wenn die Standard-Colors auf farbigen oder dekorativen Hintergründen nicht gut funktionieren. Wann welche Color passt, -beschreibt [Color](/02-foundations/01-design/02-colors#light-und-dark-color). +beschreibt [Color](/foundations/design/colors#light-und-dark-color). @@ -50,9 +50,9 @@ beschreibt [Color](/02-foundations/01-design/02-colors#light-und-dark-color). ## ActionGroup -Wenn mehr als eine [Action](/04-components/actions/action) benötigt wird, kann -die IllustratedMessage auch mit einer -[ActionGroup](/04-components/actions/action-group) kombiniert werden. +Wenn mehr als eine [Action](/components/actions/action) benötigt wird, kann die +IllustratedMessage auch mit einer +[ActionGroup](/components/actions/action-group) kombiniert werden. diff --git a/apps/docs/src/content/04-components/content/image/examples/aspectRatio.tsx b/apps/docs/src/content/components/content/image/examples/aspectRatio.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/image/examples/aspectRatio.tsx rename to apps/docs/src/content/components/content/image/examples/aspectRatio.tsx diff --git a/apps/docs/src/content/04-components/content/image/examples/border.tsx b/apps/docs/src/content/components/content/image/examples/border.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/image/examples/border.tsx rename to apps/docs/src/content/components/content/image/examples/border.tsx diff --git a/apps/docs/src/content/04-components/content/image/examples/default.tsx b/apps/docs/src/content/components/content/image/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/image/examples/default.tsx rename to apps/docs/src/content/components/content/image/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/image/index.mdx b/apps/docs/src/content/components/content/image/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/content/image/index.mdx rename to apps/docs/src/content/components/content/image/index.mdx diff --git a/apps/docs/src/content/04-components/content/inline-code/examples/dark.tsx b/apps/docs/src/content/components/content/inline-code/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/inline-code/examples/dark.tsx rename to apps/docs/src/content/components/content/inline-code/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/content/inline-code/examples/default.tsx b/apps/docs/src/content/components/content/inline-code/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/inline-code/examples/default.tsx rename to apps/docs/src/content/components/content/inline-code/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/inline-code/examples/light.tsx b/apps/docs/src/content/components/content/inline-code/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/inline-code/examples/light.tsx rename to apps/docs/src/content/components/content/inline-code/examples/light.tsx diff --git a/apps/docs/src/content/04-components/content/inline-code/index.mdx b/apps/docs/src/content/components/content/inline-code/index.mdx similarity index 85% rename from apps/docs/src/content/04-components/content/inline-code/index.mdx rename to apps/docs/src/content/components/content/inline-code/index.mdx index 8b5364d722..29e52eb456 100644 --- a/apps/docs/src/content/04-components/content/inline-code/index.mdx +++ b/apps/docs/src/content/components/content/inline-code/index.mdx @@ -12,7 +12,7 @@ description: InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor. - Setze InlineCode sparsam ein. Zu viele InlineCodes machen einen Text unleserlich. - Nutze InlineCode nur für kurze Beispiele. Für längere Code-Beispiele eignet - sich der [CodeBlock](/04-components/content/code-block). + sich der [CodeBlock](/components/content/code-block). --- @@ -22,7 +22,7 @@ Zusätzlich zur Standard-Color kann InlineCode in **Light** und **Dark** dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen keinen ausreichenden Kontrast (mind. 4,5:1) bietet. Wann welche Color passt, beschreibt -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). diff --git a/apps/docs/src/content/04-components/content/kbd/examples/children.tsx b/apps/docs/src/content/components/content/kbd/examples/children.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/kbd/examples/children.tsx rename to apps/docs/src/content/components/content/kbd/examples/children.tsx diff --git a/apps/docs/src/content/04-components/content/kbd/examples/context-menu.tsx b/apps/docs/src/content/components/content/kbd/examples/context-menu.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/kbd/examples/context-menu.tsx rename to apps/docs/src/content/components/content/kbd/examples/context-menu.tsx diff --git a/apps/docs/src/content/04-components/content/kbd/examples/default.tsx b/apps/docs/src/content/components/content/kbd/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/kbd/examples/default.tsx rename to apps/docs/src/content/components/content/kbd/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/kbd/examples/search-field.tsx b/apps/docs/src/content/components/content/kbd/examples/search-field.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/kbd/examples/search-field.tsx rename to apps/docs/src/content/components/content/kbd/examples/search-field.tsx diff --git a/apps/docs/src/content/04-components/content/kbd/examples/text.tsx b/apps/docs/src/content/components/content/kbd/examples/text.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/kbd/examples/text.tsx rename to apps/docs/src/content/components/content/kbd/examples/text.tsx diff --git a/apps/docs/src/content/04-components/content/kbd/examples/variants.tsx b/apps/docs/src/content/components/content/kbd/examples/variants.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/kbd/examples/variants.tsx rename to apps/docs/src/content/components/content/kbd/examples/variants.tsx diff --git a/apps/docs/src/content/04-components/content/kbd/index.mdx b/apps/docs/src/content/components/content/kbd/index.mdx similarity index 88% rename from apps/docs/src/content/04-components/content/kbd/index.mdx rename to apps/docs/src/content/components/content/kbd/index.mdx index a68f4d31c7..73d52efdeb 100644 --- a/apps/docs/src/content/04-components/content/kbd/index.mdx +++ b/apps/docs/src/content/components/content/kbd/index.mdx @@ -44,14 +44,14 @@ zu erzeugen. ## SearchField Wenn eine Suche durch einen Keyboard-Shortcut fokussiert werden kann, kann die -Kbd Component mit dem [SearchField](/04-components/form-controls/search-field) +Kbd Component mit dem [SearchField](/components/form-controls/search-field) kombiniert werden, um dem User das verfügbare Tastaturkürzel sichtbar zu machen. ## ContextMenu -In [ContextMenus](/04-components/actions/context-menu) werden häufig Aktionen +In [ContextMenus](/components/actions/context-menu) werden häufig Aktionen angezeigt, die zusätzlich per Keyboard-Shortcut ausgelöst werden können. In diesem Fall kann Kbd mit dem jeweiligen MenuItem kombiniert werden. @@ -59,7 +59,7 @@ diesem Fall kann Kbd mit dem jeweiligen MenuItem kombiniert werden. ## Text -Wird die Kbd Component innerhalb eines [Texts](/04-components/content/text) +Wird die Kbd Component innerhalb eines [Texts](/components/content/text) verwendet, wird sie automatisch in der `soft` Variante dargestellt. Dadurch hebt sie sich visuell vom Fließtext ab und macht deutlich, dass es sich um einen Keyboard-Shortcut handelt. diff --git a/apps/docs/src/content/04-components/content/label/examples/default.tsx b/apps/docs/src/content/components/content/label/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/label/examples/default.tsx rename to apps/docs/src/content/components/content/label/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/label/examples/states.tsx b/apps/docs/src/content/components/content/label/examples/states.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/label/examples/states.tsx rename to apps/docs/src/content/components/content/label/examples/states.tsx diff --git a/apps/docs/src/content/04-components/content/label/index.mdx b/apps/docs/src/content/components/content/label/index.mdx similarity index 80% rename from apps/docs/src/content/04-components/content/label/index.mdx rename to apps/docs/src/content/components/content/label/index.mdx index 0d86c59564..656ae53674 100644 --- a/apps/docs/src/content/04-components/content/label/index.mdx +++ b/apps/docs/src/content/components/content/label/index.mdx @@ -15,7 +15,7 @@ description: Ein Label erläutert Eingabeanforderungen in Formularen. - Benenne das Feld als Substantiv. Nutze etwa „E-Mail-Adresse“ statt „E-Mail eingeben“. - Gib Formatierungshinweise über die FieldDescription im - [TextField](/04-components/form-controls/text-field). + [TextField](/components/form-controls/text-field). --- @@ -26,8 +26,8 @@ Ein Label hat zwei States: - **Default** – das Label wird in seiner Standarddarstellung angezeigt. - **Disabled** – das Label beschreibt häufig komplexere Components und übernimmt automatisch deren State. Ist z. B. ein - [TextField](/04-components/form-controls/text-field) oder - [NumberField](/04-components/form-controls/number-field) gerade **disabled**, + [TextField](/components/form-controls/text-field) oder + [NumberField](/components/form-controls/number-field) gerade **disabled**, nimmt das Label denselben State an. diff --git a/apps/docs/src/content/04-components/content/labeled-value/examples/column-layout.tsx b/apps/docs/src/content/components/content/labeled-value/examples/column-layout.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/labeled-value/examples/column-layout.tsx rename to apps/docs/src/content/components/content/labeled-value/examples/column-layout.tsx diff --git a/apps/docs/src/content/04-components/content/labeled-value/examples/copy-button.tsx b/apps/docs/src/content/components/content/labeled-value/examples/copy-button.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/labeled-value/examples/copy-button.tsx rename to apps/docs/src/content/components/content/labeled-value/examples/copy-button.tsx diff --git a/apps/docs/src/content/04-components/content/labeled-value/examples/default.tsx b/apps/docs/src/content/components/content/labeled-value/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/labeled-value/examples/default.tsx rename to apps/docs/src/content/components/content/labeled-value/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/labeled-value/examples/inline-code.tsx b/apps/docs/src/content/components/content/labeled-value/examples/inline-code.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/labeled-value/examples/inline-code.tsx rename to apps/docs/src/content/components/content/labeled-value/examples/inline-code.tsx diff --git a/apps/docs/src/content/04-components/content/labeled-value/examples/link.tsx b/apps/docs/src/content/components/content/labeled-value/examples/link.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/labeled-value/examples/link.tsx rename to apps/docs/src/content/components/content/labeled-value/examples/link.tsx diff --git a/apps/docs/src/content/04-components/content/labeled-value/index.mdx b/apps/docs/src/content/components/content/labeled-value/index.mdx similarity index 66% rename from apps/docs/src/content/04-components/content/labeled-value/index.mdx rename to apps/docs/src/content/components/content/labeled-value/index.mdx index 89636a085e..07a85595da 100644 --- a/apps/docs/src/content/04-components/content/labeled-value/index.mdx +++ b/apps/docs/src/content/components/content/labeled-value/index.mdx @@ -10,11 +10,11 @@ description: # Best Practices -- Formuliere das [Label](/04-components/content/label) kurz, prägnant und in +- Formuliere das [Label](/components/content/label) kurz, prägnant und in einfacher Sprache, sodass es den Wert eindeutig beschreibt. - Stelle mehrere LabeledValues in einem - [ColumnLayout](/04-components/structure/column-layout) nebeneinander dar. - Setze dabei nicht zu viele Informationen in eine Zeile. + [ColumnLayout](/components/structure/column-layout) nebeneinander dar. Setze + dabei nicht zu viele Informationen in eine Zeile. - Sortiere sie nach Wichtigkeit und fasse sie in sinnvolle Gruppen. Ein Beispiel ist die Gruppe aus Name und Adresse. @@ -23,13 +23,13 @@ description: # Kombiniere mit ... Der Content-Bereich des LabeledValue kann einen -[Text](/04-components/content/text), einen InlineCode oder einen Link beinhalten +[Text](/components/content/text), einen InlineCode oder einen Link beinhalten und jeweils durch einen CopyButton ergänzt werden. ## ColumnLayout Stelle mehrere LabeledValues in einem -[ColumnLayout](/04-components/structure/column-layout) nebeneinander dar, um +[ColumnLayout](/components/structure/column-layout) nebeneinander dar, um zusammengehörige Informationen wie Name und Adresse zu gruppieren. @@ -37,22 +37,21 @@ zusammengehörige Informationen wie Name und Adresse zu gruppieren. ## InlineCode Mit `` anstelle von `` kann ein -[InlineCode](/04-components/content/inline-code) angezeigt werden. +[InlineCode](/components/content/inline-code) angezeigt werden. ## Link Nutze einen `` anstelle von ``, um einen -[Link](/04-components/navigation/link) anzuzeigen. +[Link](/components/navigation/link) anzuzeigen. ## CopyButton Verwende `` innerhalb des ``, um einen -[CopyButton](/04-components/actions/copy-button) am Ende des Contents -anzuzeigen. +[CopyButton](/components/actions/copy-button) am Ende des Contents anzuzeigen. diff --git a/apps/docs/src/content/04-components/content/markdown/examples/codeBlock.tsx b/apps/docs/src/content/components/content/markdown/examples/codeBlock.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/codeBlock.tsx rename to apps/docs/src/content/components/content/markdown/examples/codeBlock.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/dark.tsx b/apps/docs/src/content/components/content/markdown/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/dark.tsx rename to apps/docs/src/content/components/content/markdown/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/default.tsx b/apps/docs/src/content/components/content/markdown/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/default.tsx rename to apps/docs/src/content/components/content/markdown/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/heading.tsx b/apps/docs/src/content/components/content/markdown/examples/heading.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/heading.tsx rename to apps/docs/src/content/components/content/markdown/examples/heading.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/headingOffset.tsx b/apps/docs/src/content/components/content/markdown/examples/headingOffset.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/headingOffset.tsx rename to apps/docs/src/content/components/content/markdown/examples/headingOffset.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/inlineCode.tsx b/apps/docs/src/content/components/content/markdown/examples/inlineCode.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/inlineCode.tsx rename to apps/docs/src/content/components/content/markdown/examples/inlineCode.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/light.tsx b/apps/docs/src/content/components/content/markdown/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/light.tsx rename to apps/docs/src/content/components/content/markdown/examples/light.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/link.tsx b/apps/docs/src/content/components/content/markdown/examples/link.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/link.tsx rename to apps/docs/src/content/components/content/markdown/examples/link.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/orderedList.tsx b/apps/docs/src/content/components/content/markdown/examples/orderedList.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/orderedList.tsx rename to apps/docs/src/content/components/content/markdown/examples/orderedList.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/quote.tsx b/apps/docs/src/content/components/content/markdown/examples/quote.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/quote.tsx rename to apps/docs/src/content/components/content/markdown/examples/quote.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/table.tsx b/apps/docs/src/content/components/content/markdown/examples/table.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/table.tsx rename to apps/docs/src/content/components/content/markdown/examples/table.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/examples/unorderedList.tsx b/apps/docs/src/content/components/content/markdown/examples/unorderedList.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/markdown/examples/unorderedList.tsx rename to apps/docs/src/content/components/content/markdown/examples/unorderedList.tsx diff --git a/apps/docs/src/content/04-components/content/markdown/index.mdx b/apps/docs/src/content/components/content/markdown/index.mdx similarity index 91% rename from apps/docs/src/content/04-components/content/markdown/index.mdx rename to apps/docs/src/content/components/content/markdown/index.mdx index 9b967f1221..8d9801ff01 100644 --- a/apps/docs/src/content/04-components/content/markdown/index.mdx +++ b/apps/docs/src/content/components/content/markdown/index.mdx @@ -11,7 +11,7 @@ description: Die Markdown Component rendert Texteingaben im Markdown-Format. - Nutze Markdown vor allem für dynamische oder nutzergenerierte Texteingaben. - Verwende für mehr Kontrolle über Layout und semantische Elemente stattdessen - [Text](/04-components/content/text). Markdown wird als HTML ohne explizite + [Text](/components/content/text). Markdown wird als HTML ohne explizite Kontrolle über Elemente wie `

` oder `

` gerendert. --- @@ -21,7 +21,7 @@ description: Die Markdown Component rendert Texteingaben im Markdown-Format. Zusätzlich zur Standard-Color kann Markdown in **Light** und **Dark** dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen nicht gut funktioniert. Wann welche Color passt, beschreibt -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). diff --git a/apps/docs/src/content/04-components/content/skeleton-text/examples/default.tsx b/apps/docs/src/content/components/content/skeleton-text/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/skeleton-text/examples/default.tsx rename to apps/docs/src/content/components/content/skeleton-text/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/skeleton-text/examples/heading.tsx b/apps/docs/src/content/components/content/skeleton-text/examples/heading.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/skeleton-text/examples/heading.tsx rename to apps/docs/src/content/components/content/skeleton-text/examples/heading.tsx diff --git a/apps/docs/src/content/04-components/content/skeleton-text/examples/width.tsx b/apps/docs/src/content/components/content/skeleton-text/examples/width.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/skeleton-text/examples/width.tsx rename to apps/docs/src/content/components/content/skeleton-text/examples/width.tsx diff --git a/apps/docs/src/content/04-components/content/skeleton-text/index.mdx b/apps/docs/src/content/components/content/skeleton-text/index.mdx similarity index 76% rename from apps/docs/src/content/04-components/content/skeleton-text/index.mdx rename to apps/docs/src/content/components/content/skeleton-text/index.mdx index d863512cf2..2b54502797 100644 --- a/apps/docs/src/content/04-components/content/skeleton-text/index.mdx +++ b/apps/docs/src/content/components/content/skeleton-text/index.mdx @@ -12,9 +12,9 @@ description: # Best Practices - Platziere den SkeletonText in der Component, die später den Text enthält (z. - B. [Text](/04-components/content/text) oder - [Heading](/04-components/content/heading)). So entspricht seine Höhe der - finalen Typografie und es entsteht kein Layout-Sprung. + B. [Text](/components/content/text) oder + [Heading](/components/content/heading)). So entspricht seine Höhe der finalen + Typografie und es entsteht kein Layout-Sprung. - Wähle die Breite ungefähr passend zur Länge des erwarteten Textes. - Verwende pro Textblock nur wenige Zeilen. Zwei bis drei genügen, um den Inhalt anzudeuten, ohne visuelle Unruhe zu erzeugen. @@ -22,11 +22,11 @@ description: echter Fließtext wirkt. - Setze den SkeletonText nur für das initiale, kurzzeitige Laden ein. Für andere Lade- oder Feedbackprozesse eignet sich etwa der - [LoadingSpinner](/04-components/status/loading-spinner). + [LoadingSpinner](/components/status/loading-spinner). ## SkeletonText vs. Skeleton -SkeletonText und [Skeleton](/04-components/content/skeleton) haben dasselbe +SkeletonText und [Skeleton](/components/content/skeleton) haben dasselbe Erscheinungsbild, unterscheiden sich aber in ihrer Größe. @@ -38,7 +38,7 @@ Erscheinungsbild, unterscheiden sich aber in ihrer Größe. - Flächen, deren Größe du selbst festlegst. - - Bilder, [Avatare](/04-components/content/avatar) und andere grafische Elemente. + - Bilder, [Avatare](/components/content/avatar) und andere grafische Elemente. @@ -60,8 +60,7 @@ Vorschau der erwarteten Textlänge entspricht. ## Heading Platziere einen SkeletonText innerhalb einer -[Heading](/04-components/content/heading), damit er deren Schriftgröße -übernimmt. +[Heading](/components/content/heading), damit er deren Schriftgröße übernimmt. diff --git a/apps/docs/src/content/04-components/content/skeleton/examples/custom-size.tsx b/apps/docs/src/content/components/content/skeleton/examples/custom-size.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/skeleton/examples/custom-size.tsx rename to apps/docs/src/content/components/content/skeleton/examples/custom-size.tsx diff --git a/apps/docs/src/content/04-components/content/skeleton/examples/default.tsx b/apps/docs/src/content/components/content/skeleton/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/skeleton/examples/default.tsx rename to apps/docs/src/content/components/content/skeleton/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/skeleton/index.mdx b/apps/docs/src/content/components/content/skeleton/index.mdx similarity index 81% rename from apps/docs/src/content/04-components/content/skeleton/index.mdx rename to apps/docs/src/content/components/content/skeleton/index.mdx index 871426f4dc..e5d0b0f7b8 100644 --- a/apps/docs/src/content/04-components/content/skeleton/index.mdx +++ b/apps/docs/src/content/components/content/skeleton/index.mdx @@ -11,14 +11,14 @@ description: # Best Practices - Spiegele das finale Layout so gut wie möglich wider. Nutze vereinfachte Formen - für [Avatare](/04-components/content/avatar) oder - [Images](/04-components/content/image), damit User die erwarteten Inhalte + für [Avatare](/components/content/avatar) oder + [Images](/components/content/image), damit User die erwarteten Inhalte erkennen. - Halte Detailgrad und Anzahl gering. Skeletons sollten an Wireframes erinnern und keine visuelle Unruhe erzeugen. - Setze Skeletons nur für das initiale, kurzzeitige Laden ein. Für andere Lade- oder Feedbackprozesse eignet sich etwa der - [LoadingSpinner](/04-components/status/loading-spinner). + [LoadingSpinner](/components/status/loading-spinner). - Vermeide beim Laden einen Cumulative Layout Shift. Das finale Layout sollte den Skeleton-Content nahtlos ersetzen. - Signalisiere den Ladezustand über `aria-busy` am umgebenden Container. Das @@ -28,13 +28,13 @@ description: ## Skeleton vs. SkeletonText -Skeleton und [SkeletonText](/04-components/content/skeleton-text) haben dasselbe +Skeleton und [SkeletonText](/components/content/skeleton-text) haben dasselbe Erscheinungsbild, unterscheiden sich aber in ihrer Größe. - Flächen, deren Größe du selbst festlegst. - - Bilder, [Avatare](/04-components/content/avatar) und andere grafische Elemente. + - Bilder, [Avatare](/components/content/avatar) und andere grafische Elemente. diff --git a/apps/docs/src/content/04-components/content/text/examples/combine.tsx b/apps/docs/src/content/components/content/text/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/combine.tsx rename to apps/docs/src/content/components/content/text/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/dark.tsx b/apps/docs/src/content/components/content/text/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/dark.tsx rename to apps/docs/src/content/components/content/text/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/default.tsx b/apps/docs/src/content/components/content/text/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/default.tsx rename to apps/docs/src/content/components/content/text/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/elementType.tsx b/apps/docs/src/content/components/content/text/examples/elementType.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/elementType.tsx rename to apps/docs/src/content/components/content/text/examples/elementType.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/html.tsx b/apps/docs/src/content/components/content/text/examples/html.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/html.tsx rename to apps/docs/src/content/components/content/text/examples/html.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/light.tsx b/apps/docs/src/content/components/content/text/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/light.tsx rename to apps/docs/src/content/components/content/text/examples/light.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/noLigatures.tsx b/apps/docs/src/content/components/content/text/examples/noLigatures.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/noLigatures.tsx rename to apps/docs/src/content/components/content/text/examples/noLigatures.tsx diff --git a/apps/docs/src/content/04-components/content/text/examples/size.tsx b/apps/docs/src/content/components/content/text/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/text/examples/size.tsx rename to apps/docs/src/content/components/content/text/examples/size.tsx diff --git a/apps/docs/src/content/04-components/content/text/index.mdx b/apps/docs/src/content/components/content/text/index.mdx similarity index 85% rename from apps/docs/src/content/04-components/content/text/index.mdx rename to apps/docs/src/content/components/content/text/index.mdx index 69c023c536..ca47c489e9 100644 --- a/apps/docs/src/content/04-components/content/text/index.mdx +++ b/apps/docs/src/content/components/content/text/index.mdx @@ -12,7 +12,7 @@ description: # Best Practices - Formuliere Texte prägnant, verständlich und hilfreich. Orientiere dich am - [Sprach-Guide](/02-foundations/03-content-guidelines/01-sprach-guide). + [Sprach-Guide](/foundations/content-guidelines/sprach-guide). - Halte die Benutzeroberfläche auch ohne Text verständlich. Text wird häufig nur unaufmerksam wahrgenommen. - Begrenze die Zeilenlänge auf höchstens 75 Zeichen. Längere Zeilen erschweren @@ -26,7 +26,7 @@ description: Zusätzlich zur Standard-Color kann Text in **Light** und **Dark** dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen nicht gut funktioniert. Wann welche Color passt, beschreibt -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). @@ -89,10 +89,10 @@ dargestellt. ## Combine -Benutze die [Combine-Component](/04-components/structure/combine), um neben dem -Text z. B. ein [Icon](/04-components/content/icon), einen -[CopyButton](/04-components/actions/copy-button) oder ein -[ContextualHelp](/04-components/overlays/contextual-help) zu platzieren. +Benutze die [Combine-Component](/components/structure/combine), um neben dem +Text z. B. ein [Icon](/components/content/icon), einen +[CopyButton](/components/actions/copy-button) oder ein +[ContextualHelp](/components/overlays/contextual-help) zu platzieren. diff --git a/apps/docs/src/content/04-components/content/truncate/examples/default.tsx b/apps/docs/src/content/components/content/truncate/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/truncate/examples/default.tsx rename to apps/docs/src/content/components/content/truncate/examples/default.tsx diff --git a/apps/docs/src/content/04-components/content/truncate/examples/heading.tsx b/apps/docs/src/content/components/content/truncate/examples/heading.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/truncate/examples/heading.tsx rename to apps/docs/src/content/components/content/truncate/examples/heading.tsx diff --git a/apps/docs/src/content/components/content/truncate/examples/offset.tsx b/apps/docs/src/content/components/content/truncate/examples/offset.tsx new file mode 100644 index 0000000000..954784d150 --- /dev/null +++ b/apps/docs/src/content/components/content/truncate/examples/offset.tsx @@ -0,0 +1,5 @@ +import { Truncate } from "@mittwald/flow-react-components"; + + + https://flow.mittwald.de/components/lorem/ipsum/dolor/sit/amet/consetetur/sadipscing/elitr/sed/diam/nonumy/eirmod/tempor/invidunt/ut/labore/et/dolore/content/truncate/overview +; diff --git a/apps/docs/src/content/04-components/content/truncate/examples/text.tsx b/apps/docs/src/content/components/content/truncate/examples/text.tsx similarity index 100% rename from apps/docs/src/content/04-components/content/truncate/examples/text.tsx rename to apps/docs/src/content/components/content/truncate/examples/text.tsx diff --git a/apps/docs/src/content/04-components/content/truncate/index.mdx b/apps/docs/src/content/components/content/truncate/index.mdx similarity index 90% rename from apps/docs/src/content/04-components/content/truncate/index.mdx rename to apps/docs/src/content/components/content/truncate/index.mdx index 09766801aa..19eb00bc74 100644 --- a/apps/docs/src/content/04-components/content/truncate/index.mdx +++ b/apps/docs/src/content/components/content/truncate/index.mdx @@ -43,14 +43,14 @@ individueller Platzhalter definieren. ## Text -Kombiniere Truncate mit [Text](/04-components/content/text), um langen Fließtext +Kombiniere Truncate mit [Text](/components/content/text), um langen Fließtext einzeilig zu kürzen. ## Heading -Kombiniere Truncate mit [Heading](/04-components/content/heading), um lange +Kombiniere Truncate mit [Heading](/components/content/heading), um lange Überschriften zu kürzen. diff --git a/apps/docs/src/content/04-components/data-visualisation/big-number/examples/accent-box.tsx b/apps/docs/src/content/components/data-visualisation/big-number/examples/accent-box.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/big-number/examples/accent-box.tsx rename to apps/docs/src/content/components/data-visualisation/big-number/examples/accent-box.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/big-number/examples/default.tsx b/apps/docs/src/content/components/data-visualisation/big-number/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/big-number/examples/default.tsx rename to apps/docs/src/content/components/data-visualisation/big-number/examples/default.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/big-number/examples/rating.tsx b/apps/docs/src/content/components/data-visualisation/big-number/examples/rating.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/big-number/examples/rating.tsx rename to apps/docs/src/content/components/data-visualisation/big-number/examples/rating.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/big-number/index.mdx b/apps/docs/src/content/components/data-visualisation/big-number/index.mdx similarity index 81% rename from apps/docs/src/content/04-components/data-visualisation/big-number/index.mdx rename to apps/docs/src/content/components/data-visualisation/big-number/index.mdx index 57f04e0d60..4b46d7578d 100644 --- a/apps/docs/src/content/04-components/data-visualisation/big-number/index.mdx +++ b/apps/docs/src/content/components/data-visualisation/big-number/index.mdx @@ -19,7 +19,7 @@ description: Die BigNumber stellt Kennzahlen und Metriken prominent dar. ## Rating -Nutze das [Rating](/04-components/form-controls/rating), um den Kontext der +Nutze das [Rating](/components/form-controls/rating), um den Kontext der BigNumber für die User auf einer Bewertungsskala besser einzuordnen. @@ -27,7 +27,7 @@ BigNumber für die User auf einer Bewertungsskala besser einzuordnen. ## AccentBox Zur visuellen Hervorhebung kann die BigNumber innerhalb einer -[AccentBox](/04-components/structure/accent-box) angezeigt werden. +[AccentBox](/components/structure/accent-box) angezeigt werden. diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/area.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/area.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/area.tsx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/area.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/colors.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/colors.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/colors.tsx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/colors.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/default.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/default.tsx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/default.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/emptyView.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/emptyView.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/emptyView.tsx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/emptyView.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/line.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/line.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/line.tsx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/line.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/synced.tsx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/synced.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/examples/synced.tsx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/examples/synced.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/index.mdx b/apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx similarity index 84% rename from apps/docs/src/content/04-components/data-visualisation/cartesian-chart/index.mdx rename to apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx index 4de8d8e075..35a1baaf90 100644 --- a/apps/docs/src/content/04-components/data-visualisation/cartesian-chart/index.mdx +++ b/apps/docs/src/content/components/data-visualisation/cartesian-chart/index.mdx @@ -13,8 +13,7 @@ description: - Halte die x-Achse immer zeitbasiert. - Stelle Dimensionen mit - [Categorical Colors](/02-foundations/01-design/02-colors#categorical-color) - dar. + [Categorical Colors](/foundations/design/colors#categorical-color) dar. - Sortiere die Areas bei der Area-Darstellung nach Größe, die größte unten. - Halte die Zahl der Dimensionen übersichtlich. Das sichert die Lesbarkeit. @@ -44,9 +43,9 @@ Anteil einzelner Objekte daran. # Color Für die Farbgebung der Daten können -[Categorical Colors](/02-foundations/01-design/02-colors#categorical-color) oder -eigene Farben verwendet werden. Es sollte sichergestellt sein, dass Farben, die -direkt nebeneinander liegen, einen ausreichenden Kontrast zueinander haben. +[Categorical Colors](/foundations/design/colors#categorical-color) oder eigene +Farben verwendet werden. Es sollte sichergestellt sein, dass Farben, die direkt +nebeneinander liegen, einen ausreichenden Kontrast zueinander haben. diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/children.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/children.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/children.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/children.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/decimal.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/decimal.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/decimal.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/decimal.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/default.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/default.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/default.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/segments.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/segments.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/segments.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/segments.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/size.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/size.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/size.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/status.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/status.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/status.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/unit.tsx b/apps/docs/src/content/components/data-visualisation/donut-chart/examples/unit.tsx similarity index 100% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/examples/unit.tsx rename to apps/docs/src/content/components/data-visualisation/donut-chart/examples/unit.tsx diff --git a/apps/docs/src/content/04-components/data-visualisation/donut-chart/index.mdx b/apps/docs/src/content/components/data-visualisation/donut-chart/index.mdx similarity index 86% rename from apps/docs/src/content/04-components/data-visualisation/donut-chart/index.mdx rename to apps/docs/src/content/components/data-visualisation/donut-chart/index.mdx index a191c85b45..770e46a13c 100644 --- a/apps/docs/src/content/04-components/data-visualisation/donut-chart/index.mdx +++ b/apps/docs/src/content/components/data-visualisation/donut-chart/index.mdx @@ -12,7 +12,7 @@ description: Das DonutChart stellt Verteilungen und Anteile als Ring dar. - Kombiniere die Status-Farben gezielt, um Zustände hervorzuheben. Wechsle etwa bei hoher Speicherplatzauslastung auf Warning oder Danger. - Mach jede Segmentfarbe eindeutig unterscheidbar. Nutze dafür die - [Categorical Colors](/02-foundations/01-design/02-colors#categorical-color). + [Categorical Colors](/foundations/design/colors#categorical-color). - Begrenze die Segmente auf höchstens sechs. Mehr Segmente beeinträchtigen die Lesbarkeit stark. - Sortiere die Segmente nach Größe. Das größte beginnt auf der 12-Uhr-Position, @@ -74,10 +74,10 @@ Property `legendPosition` bestimmt werden. Die Farben der Segmente werden automatisch festgelegt, können aber über das `color`-Property, mit -[Categorical Colors](/02-foundations/01-design/02-colors#categorical-color) oder -eigenen Colors überschrieben werden. Beim Überschreiben muss darauf geachtet -werden, dass nebeneinander liegende Farben weiterhin einen ausreichenden -Kontrast zueinander haben. +[Categorical Colors](/foundations/design/colors#categorical-color) oder eigenen +Colors überschrieben werden. Beim Überschreiben muss darauf geachtet werden, +dass nebeneinander liegende Farben weiterhin einen ausreichenden Kontrast +zueinander haben. diff --git a/apps/docs/src/content/04-components/form-controls/autocomplete/examples/default.tsx b/apps/docs/src/content/components/form-controls/autocomplete/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/autocomplete/examples/default.tsx rename to apps/docs/src/content/components/form-controls/autocomplete/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/autocomplete/examples/filter.tsx b/apps/docs/src/content/components/form-controls/autocomplete/examples/filter.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/autocomplete/examples/filter.tsx rename to apps/docs/src/content/components/form-controls/autocomplete/examples/filter.tsx diff --git a/apps/docs/src/content/04-components/form-controls/autocomplete/examples/form.tsx b/apps/docs/src/content/components/form-controls/autocomplete/examples/form.tsx similarity index 94% rename from apps/docs/src/content/04-components/form-controls/autocomplete/examples/form.tsx rename to apps/docs/src/content/components/form-controls/autocomplete/examples/form.tsx index 01afac598c..c2cb4f8784 100644 --- a/apps/docs/src/content/04-components/form-controls/autocomplete/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/autocomplete/examples/form.tsx @@ -11,7 +11,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ email: string }>({ diff --git a/apps/docs/src/content/04-components/form-controls/autocomplete/examples/search.tsx b/apps/docs/src/content/components/form-controls/autocomplete/examples/search.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/autocomplete/examples/search.tsx rename to apps/docs/src/content/components/form-controls/autocomplete/examples/search.tsx diff --git a/apps/docs/src/content/04-components/form-controls/autocomplete/index.mdx b/apps/docs/src/content/components/form-controls/autocomplete/index.mdx similarity index 85% rename from apps/docs/src/content/04-components/form-controls/autocomplete/index.mdx rename to apps/docs/src/content/components/form-controls/autocomplete/index.mdx index fb3268b375..8d32935eb9 100644 --- a/apps/docs/src/content/04-components/form-controls/autocomplete/index.mdx +++ b/apps/docs/src/content/components/form-controls/autocomplete/index.mdx @@ -17,7 +17,7 @@ description: ## Autocomplete vs. ComboBox -Autocomplete und [ComboBoxen](/04-components/form-controls/combo-box) sehen oft +Autocomplete und [ComboBoxen](/components/form-controls/combo-box) sehen oft ähnlich aus, erfüllen aber unterschiedliche Zwecke. @@ -48,15 +48,15 @@ ein. ## SearchField Nutze `` mit einem -[SearchField](/04-components/form-controls/search-field), um die User beim -Suchen mit Vorschlägen zu unterstützen. +[SearchField](/components/form-controls/search-field), um die User beim Suchen +mit Vorschlägen zu unterstützen. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-button/examples/default.tsx b/apps/docs/src/content/components/form-controls/checkbox-button/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox-button/examples/default.tsx rename to apps/docs/src/content/components/form-controls/checkbox-button/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-button/examples/form.tsx b/apps/docs/src/content/components/form-controls/checkbox-button/examples/form.tsx similarity index 91% rename from apps/docs/src/content/04-components/form-controls/checkbox-button/examples/form.tsx rename to apps/docs/src/content/components/form-controls/checkbox-button/examples/form.tsx index 7703200dfa..be1c61384b 100644 --- a/apps/docs/src/content/04-components/form-controls/checkbox-button/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/checkbox-button/examples/form.tsx @@ -8,7 +8,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ acceptTerms: boolean }>(); diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-button/index.mdx b/apps/docs/src/content/components/form-controls/checkbox-button/index.mdx similarity index 77% rename from apps/docs/src/content/04-components/form-controls/checkbox-button/index.mdx rename to apps/docs/src/content/components/form-controls/checkbox-button/index.mdx index 7fd50b2260..17463b2f75 100644 --- a/apps/docs/src/content/04-components/form-controls/checkbox-button/index.mdx +++ b/apps/docs/src/content/components/form-controls/checkbox-button/index.mdx @@ -11,15 +11,14 @@ description: Der CheckboxButton ist eine auffälligere Variante der Checkbox. - Wähle den initialen Zustand nachvollziehbar und sinnvoll. - Ordne mehrere CheckboxButtons logisch und nachvollziehbar an. Mehr dazu unter - [CheckboxGroup](/04-components/form-controls/checkbox-group). + [CheckboxGroup](/components/form-controls/checkbox-group). - Nutze für eine kompaktere, unauffälligere Auswahl alternativ die - [Checkbox](/04-components/form-controls/checkbox). + [Checkbox](/components/form-controls/checkbox). ## CheckboxButton vs. Switch -Mit den Components CheckboxButton und -[Switch](/04-components/form-controls/switch) können Optionen -aktiviert/ausgewählt werden. +Mit den Components CheckboxButton und [Switch](/components/form-controls/switch) +können Optionen aktiviert/ausgewählt werden. @@ -42,7 +41,7 @@ aktiviert/ausgewählt werden. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/buttons.tsx b/apps/docs/src/content/components/form-controls/checkbox-group/examples/buttons.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/examples/buttons.tsx rename to apps/docs/src/content/components/form-controls/checkbox-group/examples/buttons.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/checkbox-group/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/checkbox-group/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/customColumns.tsx b/apps/docs/src/content/components/form-controls/checkbox-group/examples/customColumns.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/examples/customColumns.tsx rename to apps/docs/src/content/components/form-controls/checkbox-group/examples/customColumns.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/default.tsx b/apps/docs/src/content/components/form-controls/checkbox-group/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/examples/default.tsx rename to apps/docs/src/content/components/form-controls/checkbox-group/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/checkbox-group/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/checkbox-group/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/form.tsx b/apps/docs/src/content/components/form-controls/checkbox-group/examples/form.tsx similarity index 92% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/examples/form.tsx rename to apps/docs/src/content/components/form-controls/checkbox-group/examples/form.tsx index 06847b25f1..388d40d782 100644 --- a/apps/docs/src/content/04-components/form-controls/checkbox-group/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/checkbox-group/examples/form.tsx @@ -10,7 +10,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ permissions: string[] }>(); diff --git a/apps/docs/src/content/04-components/form-controls/checkbox-group/index.mdx b/apps/docs/src/content/components/form-controls/checkbox-group/index.mdx similarity index 68% rename from apps/docs/src/content/04-components/form-controls/checkbox-group/index.mdx rename to apps/docs/src/content/components/form-controls/checkbox-group/index.mdx index ad7e16fcda..dfdd7d39a6 100644 --- a/apps/docs/src/content/04-components/form-controls/checkbox-group/index.mdx +++ b/apps/docs/src/content/components/form-controls/checkbox-group/index.mdx @@ -11,8 +11,8 @@ description: # Best Practices - Beschreibe die Gruppierung mit einem logischen, prägnanten Label. -- Ordne die [Checkboxen](/04-components/form-controls/checkbox) bzw. - [CheckboxButtons](/04-components/form-controls/checkbox-button) sinnvoll an. +- Ordne die [Checkboxen](/components/form-controls/checkbox) bzw. + [CheckboxButtons](/components/form-controls/checkbox-button) sinnvoll an. Möglich sind Relevanz, alphabetische oder thematische Gruppierung. - Halte die Zahl der Auswahlmöglichkeiten überschaubar. Zu viele Optionen überfordern schnell. @@ -20,13 +20,13 @@ description: ## CheckboxGroup vs. RadioGroup Mit einer CheckboxGroup oder mit einer -[RadioGroup](/04-components/form-controls/radio-group) erhalten User -verschiedene Auswahlmöglichkeiten. +[RadioGroup](/components/form-controls/radio-group) erhalten User verschiedene +Auswahlmöglichkeiten. - eine Mehrfachauswahl darzustellen. - - [Checkboxen](/04-components/form-controls/checkbox) oder [CheckboxButtons](/04-components/form-controls/checkbox-button) sinnvoll zu strukturieren. + - [Checkboxen](/components/form-controls/checkbox) oder [CheckboxButtons](/components/form-controls/checkbox-button) sinnvoll zu strukturieren. @@ -42,8 +42,8 @@ verschiedene Auswahlmöglichkeiten. # CheckboxButtons Eine CheckboxGroup kann entweder mit -[CheckboxButtons](/04-components/form-controls/checkbox-button) oder -[Checkboxen](/04-components/form-controls/checkbox) gefüllt werden. +[CheckboxButtons](/components/form-controls/checkbox-button) oder +[Checkboxen](/components/form-controls/checkbox) gefüllt werden. @@ -52,7 +52,7 @@ Eine CheckboxGroup kann entweder mit # Spalten Die CheckboxGroup verwendet das -[ColumnLayout](/04-components/structure/column-layout), um eine Anpassung der +[ColumnLayout](/components/structure/column-layout), um eine Anpassung der Spalten zu ermöglichen. Bei der Verwendung von CheckboxButtons entspricht der Default dem des ColumnLayouts, während Checkboxen im Default untereinander angezeigt werden. @@ -74,15 +74,15 @@ eine `` eingebaut werden. ## ContextualHelp -Benutze die [ContextualHelp](/04-components/overlays/contextual-help), um -weitere Informationen bereitzustellen. +Benutze die [ContextualHelp](/components/overlays/contextual-help), um weitere +Informationen bereitzustellen. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/checkbox/examples/default.tsx b/apps/docs/src/content/components/form-controls/checkbox/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox/examples/default.tsx rename to apps/docs/src/content/components/form-controls/checkbox/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/checkbox/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/checkbox/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox/examples/form.tsx b/apps/docs/src/content/components/form-controls/checkbox/examples/form.tsx similarity index 90% rename from apps/docs/src/content/04-components/form-controls/checkbox/examples/form.tsx rename to apps/docs/src/content/components/form-controls/checkbox/examples/form.tsx index 7804025036..476b9b6dc2 100644 --- a/apps/docs/src/content/04-components/form-controls/checkbox/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/checkbox/examples/form.tsx @@ -8,7 +8,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ acceptTerms: boolean }>(); diff --git a/apps/docs/src/content/04-components/form-controls/checkbox/examples/indeterminated.tsx b/apps/docs/src/content/components/form-controls/checkbox/examples/indeterminated.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/checkbox/examples/indeterminated.tsx rename to apps/docs/src/content/components/form-controls/checkbox/examples/indeterminated.tsx diff --git a/apps/docs/src/content/04-components/form-controls/checkbox/index.mdx b/apps/docs/src/content/components/form-controls/checkbox/index.mdx similarity index 87% rename from apps/docs/src/content/04-components/form-controls/checkbox/index.mdx rename to apps/docs/src/content/components/form-controls/checkbox/index.mdx index 1992cfb142..4ed55bcab7 100644 --- a/apps/docs/src/content/04-components/form-controls/checkbox/index.mdx +++ b/apps/docs/src/content/components/form-controls/checkbox/index.mdx @@ -13,13 +13,13 @@ description: - Wähle den initialen Zustand nachvollziehbar und sinnvoll. Möglich sind ausgewählt, nicht ausgewählt oder uneindeutig. - Ordne mehrere Checkboxen logisch und nachvollziehbar an. Mehr dazu unter - [CheckboxGroup](/04-components/form-controls/checkbox-group). + [CheckboxGroup](/components/form-controls/checkbox-group). - Nutze für eine visuell stärkere Auswahl alternativ den - [CheckboxButton](/04-components/form-controls/checkbox-button). + [CheckboxButton](/components/form-controls/checkbox-button). ## Checkbox vs. Switch -Mit den Components Checkbox und [Switch](/04-components/form-controls/switch) +Mit den Components Checkbox und [Switch](/components/form-controls/switch) können Optionen aktiviert/ausgewählt werden. @@ -64,7 +64,7 @@ wird, warum der User die Checkbox gerade nicht auswählen kann. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/code-editor/examples/default.tsx b/apps/docs/src/content/components/form-controls/code-editor/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/code-editor/examples/default.tsx rename to apps/docs/src/content/components/form-controls/code-editor/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/code-editor/examples/form.tsx b/apps/docs/src/content/components/form-controls/code-editor/examples/form.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/code-editor/examples/form.tsx rename to apps/docs/src/content/components/form-controls/code-editor/examples/form.tsx diff --git a/apps/docs/src/content/04-components/form-controls/code-editor/index.mdx b/apps/docs/src/content/components/form-controls/code-editor/index.mdx similarity index 89% rename from apps/docs/src/content/04-components/form-controls/code-editor/index.mdx rename to apps/docs/src/content/components/form-controls/code-editor/index.mdx index 2a18d54b4e..5eb52f9638 100644 --- a/apps/docs/src/content/04-components/form-controls/code-editor/index.mdx +++ b/apps/docs/src/content/components/form-controls/code-editor/index.mdx @@ -20,7 +20,7 @@ description: ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/allowsCustomValue.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/allowsCustomValue.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/allowsCustomValue.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/allowsCustomValue.tsx diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/combine.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/combine.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/countryOptions.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/countryOptions.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/countryOptions.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/countryOptions.tsx diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/default.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/default.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/examples/form.tsx b/apps/docs/src/content/components/form-controls/combo-box/examples/form.tsx similarity index 91% rename from apps/docs/src/content/04-components/form-controls/combo-box/examples/form.tsx rename to apps/docs/src/content/components/form-controls/combo-box/examples/form.tsx index dcd7d584ff..ee3434364c 100644 --- a/apps/docs/src/content/04-components/form-controls/combo-box/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/combo-box/examples/form.tsx @@ -10,7 +10,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ domain: string }>(); diff --git a/apps/docs/src/content/04-components/form-controls/combo-box/index.mdx b/apps/docs/src/content/components/form-controls/combo-box/index.mdx similarity index 83% rename from apps/docs/src/content/04-components/form-controls/combo-box/index.mdx rename to apps/docs/src/content/components/form-controls/combo-box/index.mdx index 844440af60..469e50a8e0 100644 --- a/apps/docs/src/content/04-components/form-controls/combo-box/index.mdx +++ b/apps/docs/src/content/components/form-controls/combo-box/index.mdx @@ -17,8 +17,8 @@ description: ## ComboBox vs. Autocomplete -ComboBoxen und [Autocomplete](/04-components/form-controls/autocomplete) sehen -oft ähnlich aus, erfüllen aber unterschiedliche Zwecke. +ComboBoxen und [Autocomplete](/components/form-controls/autocomplete) sehen oft +ähnlich aus, erfüllen aber unterschiedliche Zwecke. @@ -66,14 +66,14 @@ Um wichtige Hinweise zur ComboBox bereitzustellen, kann unterhalb eine ## Combine -Benutze [Combine](/04-components/structure/combine), um einen -[Button](/04-components/actions/button) neben deiner ComboBox zu platzieren. +Benutze [Combine](/components/structure/combine), um einen +[Button](/components/actions/button) neben deiner ComboBox zu platzieren. ## ContextualHelp -Verwende ein [ContextualHelp](/04-components/overlays/contextual-help), wenn du +Verwende ein [ContextualHelp](/components/overlays/contextual-help), wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind. @@ -82,7 +82,7 @@ FieldDescription sind. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/default.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/default.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/form.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/form.tsx similarity index 91% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/form.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/form.tsx index 7edb6f5066..c39f478a3e 100644 --- a/apps/docs/src/content/04-components/form-controls/date-picker/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/date-picker/examples/form.tsx @@ -9,7 +9,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; import type { CalendarDate } from "@internationalized/date"; export default () => { diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/future.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/future.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/future.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/future.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/examples/unavailable.tsx b/apps/docs/src/content/components/form-controls/date-picker/examples/unavailable.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-picker/examples/unavailable.tsx rename to apps/docs/src/content/components/form-controls/date-picker/examples/unavailable.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-picker/index.mdx b/apps/docs/src/content/components/form-controls/date-picker/index.mdx similarity index 88% rename from apps/docs/src/content/04-components/form-controls/date-picker/index.mdx rename to apps/docs/src/content/components/form-controls/date-picker/index.mdx index c01b089a55..4425480f07 100644 --- a/apps/docs/src/content/04-components/form-controls/date-picker/index.mdx +++ b/apps/docs/src/content/components/form-controls/date-picker/index.mdx @@ -10,7 +10,7 @@ description: # Best Practices -- Verwende ein verständliches [Label](/04-components/content/label) wie „Datum". +- Verwende ein verständliches [Label](/components/content/label) wie „Datum". - Wähle ein Datumsformat passend zum gewohnten Format des Users und zum Kontext. - Wähle sinnvolle Defaultwerte. - Schränke Eingaben bei Bedarf mit `minValue` und `maxValue` ein. So zeigst du @@ -57,7 +57,7 @@ wird, warum der User gerade nicht mit dem DatePicker interagieren kann. ## ContextualHelp -Benutze das [ContextualHelp](/04-components/overlays/contextual-help), wenn +Benutze das [ContextualHelp](/components/overlays/contextual-help), wenn zusätzliche Informationen bereitgestellt werden sollen, die zu umfangreich für die FieldDescription sind. @@ -66,7 +66,7 @@ die FieldDescription sind. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/default.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/default.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/form.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/form.tsx similarity index 91% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/form.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/form.tsx index b6da1e5da1..ddc7389c9b 100644 --- a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/date-range-picker/examples/form.tsx @@ -10,7 +10,7 @@ import { typedField, } from "@mittwald/flow-react-components/react-hook-form"; import type { CalendarDate } from "@internationalized/date"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/future.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/future.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/future.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/future.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/withCustomPresets.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/withCustomPresets.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/withCustomPresets.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/withCustomPresets.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/examples/withPresets.tsx b/apps/docs/src/content/components/form-controls/date-range-picker/examples/withPresets.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/examples/withPresets.tsx rename to apps/docs/src/content/components/form-controls/date-range-picker/examples/withPresets.tsx diff --git a/apps/docs/src/content/04-components/form-controls/date-range-picker/index.mdx b/apps/docs/src/content/components/form-controls/date-range-picker/index.mdx similarity index 89% rename from apps/docs/src/content/04-components/form-controls/date-range-picker/index.mdx rename to apps/docs/src/content/components/form-controls/date-range-picker/index.mdx index d7e916e9c6..d64f54146c 100644 --- a/apps/docs/src/content/04-components/form-controls/date-range-picker/index.mdx +++ b/apps/docs/src/content/components/form-controls/date-range-picker/index.mdx @@ -11,8 +11,7 @@ description: # Best Practices -- Verwende ein verständliches [Label](/04-components/content/label) wie - „Zeitraum". +- Verwende ein verständliches [Label](/components/content/label) wie „Zeitraum". - Wähle ein Datumsformat passend zum gewohnten Format des Users und zum Kontext. - Wähle sinnvolle Defaultwerte. - Schränke den auswählbaren Zeitraum bei Bedarf mit `minValue` und `maxValue` @@ -67,7 +66,7 @@ wird, warum der User gerade nicht mit dem DateRangePicker interagieren kann. ## ContextualHelp -Benutze das [ContextualHelp](/04-components/overlays/contextual-help), wenn +Benutze das [ContextualHelp](/components/overlays/contextual-help), wenn zusätzliche Informationen bereitgestellt werden sollen, die zu umfangreich für die FieldDescription sind. @@ -76,7 +75,7 @@ die FieldDescription sind. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/default.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/default.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/form.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/form.tsx similarity index 95% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/form.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/form.tsx index 747c69d847..882dd9236b 100644 --- a/apps/docs/src/content/04-components/form-controls/file-field/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/file-field/examples/form.tsx @@ -12,7 +12,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/invalid.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/invalid.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/invalid.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/invalid.tsx diff --git a/apps/docs/src/content/04-components/form-controls/file-field/examples/multiple.tsx b/apps/docs/src/content/components/form-controls/file-field/examples/multiple.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/file-field/examples/multiple.tsx rename to apps/docs/src/content/components/form-controls/file-field/examples/multiple.tsx diff --git a/apps/docs/src/content/04-components/form-controls/file-field/index.mdx b/apps/docs/src/content/components/form-controls/file-field/index.mdx similarity index 73% rename from apps/docs/src/content/04-components/form-controls/file-field/index.mdx rename to apps/docs/src/content/components/form-controls/file-field/index.mdx index 901e372530..02fc18b159 100644 --- a/apps/docs/src/content/04-components/form-controls/file-field/index.mdx +++ b/apps/docs/src/content/components/form-controls/file-field/index.mdx @@ -11,14 +11,13 @@ description: # Best Practices -- Gib dem FileField ein aussagekräftiges [Label](/04-components/content/label), +- Gib dem FileField ein aussagekräftiges [Label](/components/content/label), wenn es sonst nicht eindeutig verständlich ist. - Kommuniziere zulässige Dateitypen und mögliche Größenbeschränkungen deutlich. - Stelle hochgeladene Dateien übersichtlich dar. Dafür eignen sich - [FileCard](/04-components/upload/file-card) oder - [FileCardList](/04-components/upload/file-card-list). -- Formuliere - [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) + [FileCard](/components/upload/file-card) oder + [FileCardList](/components/upload/file-card-list). +- Formuliere [Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen) klar und hilfreich. --- @@ -37,8 +36,8 @@ erlaubten Dateitypen dort anzugeben. Bei ungültiger Eingabe wird das FileField invalidiert. Über `` kann eine entsprechende -[Fehlermeldung](/02-foundations/03-content-guidelines/03-fehlermeldungen) -ausgegeben werden. +[Fehlermeldung](/foundations/content-guidelines/fehlermeldungen) ausgegeben +werden. @@ -49,7 +48,7 @@ ausgegeben werden. Über die Property `multiple` wird das gleichzeitige Hochladen mehrerer Dateien ermöglicht. Beim erneuten Hochladen werden bestehende Dateien ersetzt. Ein Beispiel für das Hochladen und Verwalten mehrerer Dateien findest du im -Codesnippet [Multi Upload](/03-patterns/02-codesnippets/multi-upload). +Codesnippet [Multi Upload](/patterns/codesnippets/multi-upload). @@ -68,15 +67,15 @@ wird, warum der User gerade nicht mit dem FileField interagieren kann. ## ContextualHelp -Verwende [ContextualHelp](/04-components/overlays/contextual-help), um -zusätzliche Informationen bereitzustellen. +Verwende [ContextualHelp](/components/overlays/contextual-help), um zusätzliche +Informationen bereitzustellen. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/allowResize.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/allowResize.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/allowResize.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/allowResize.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/autoResizeMaxRows.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/autoResizeMaxRows.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/autoResizeMaxRows.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/autoResizeMaxRows.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/characterCount.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/characterCount.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/characterCount.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/characterCount.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/chat.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/chat.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/chat.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/chat.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/combinedResize.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/combinedResize.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/combinedResize.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/combinedResize.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/customTools.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/customTools.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/customTools.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/customTools.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/default.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/default.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/examples/form.tsx b/apps/docs/src/content/components/form-controls/markdown-editor/examples/form.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/examples/form.tsx rename to apps/docs/src/content/components/form-controls/markdown-editor/examples/form.tsx diff --git a/apps/docs/src/content/04-components/form-controls/markdown-editor/index.mdx b/apps/docs/src/content/components/form-controls/markdown-editor/index.mdx similarity index 82% rename from apps/docs/src/content/04-components/form-controls/markdown-editor/index.mdx rename to apps/docs/src/content/components/form-controls/markdown-editor/index.mdx index 5bb0aa7d1a..44624f2568 100644 --- a/apps/docs/src/content/04-components/form-controls/markdown-editor/index.mdx +++ b/apps/docs/src/content/components/form-controls/markdown-editor/index.mdx @@ -13,16 +13,15 @@ description: - Wähle die Höhe über das Property `rows` passend zur erwarteten Textmenge. - Nutze die FieldDescription für Beispiele, Formatierungshinweise oder Kontext. -- Formuliere - [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) +- Formuliere [Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen) klar, hilfreich und lösungsorientiert. - Setze Custom Buttons sparsam ein. So bleibt die Toolbar übersichtlich und die Standard-Aktionen erkennbar. - Lass Custom Buttons die aktuelle Text- und Cursor-Position berücksichtigen. So lässt sich nahtlos weiterarbeiten. - Wähle für die Custom Buttons ein aussagekräftiges - [Icon](/04-components/content/icon) und formuliere das - [Label](/04-components/content/label) prägnant und leicht verständlich. + [Icon](/components/content/icon) und formuliere das + [Label](/components/content/label) prägnant und leicht verständlich. --- @@ -66,10 +65,10 @@ manuell geändert wird. Danach bleibt er in der eingestellten Größe bestehen. # Custom Buttons Ergänze die Toolbar des MarkdownEditors, indem du zusätzliche -[Actions](/04-components/actions/action) direkt als Children von +[Actions](/components/actions/action) direkt als Children von `` deklarierst. So lassen sich einfache -[Buttons](/04-components/actions/button) ebenso integrieren wie komplexere -Trigger wie `` oder ``. +[Buttons](/components/actions/button) ebenso integrieren wie komplexere Trigger +wie `` oder ``. @@ -89,14 +88,14 @@ wird, warum der User gerade nicht mit dem MarkdownEditor interagieren kann. ## Chat Verwende den MarkdownEditor als Eingabefeld innerhalb eines -[Chat](/04-components/chat/chat), um Nachrichten zu verfassen. +[Chat](/components/chat/chat), um Nachrichten zu verfassen. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/combine.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/combine.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/default.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/default.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/form.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/form.tsx similarity index 90% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/form.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/form.tsx index a126688364..9f1bf677ec 100644 --- a/apps/docs/src/content/04-components/form-controls/number-field/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/number-field/examples/form.tsx @@ -9,7 +9,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ age: number }>(); diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/invalid.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/invalid.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/invalid.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/invalid.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/required.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/required.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/required.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/required.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/examples/unit.tsx b/apps/docs/src/content/components/form-controls/number-field/examples/unit.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/number-field/examples/unit.tsx rename to apps/docs/src/content/components/form-controls/number-field/examples/unit.tsx diff --git a/apps/docs/src/content/04-components/form-controls/number-field/index.mdx b/apps/docs/src/content/components/form-controls/number-field/index.mdx similarity index 72% rename from apps/docs/src/content/04-components/form-controls/number-field/index.mdx rename to apps/docs/src/content/components/form-controls/number-field/index.mdx index 45eeb44e01..882704aabe 100644 --- a/apps/docs/src/content/04-components/form-controls/number-field/index.mdx +++ b/apps/docs/src/content/components/form-controls/number-field/index.mdx @@ -12,10 +12,9 @@ description: - Definiere Mindest- und Höchstwerte (`minValue`/`maxValue`) sinnvoll, wenn du Eingaben einschränken willst. -- Formuliere das [Label](/04-components/content/label) prägnant und leicht +- Formuliere das [Label](/components/content/label) prägnant und leicht verständlich. -- Formuliere - [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) +- Formuliere [Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen) klar, hilfreich und lösungsorientiert. --- @@ -32,9 +31,8 @@ definieren (s. # Validierung -Nutze für die Validierung -[React Hook Form](/04-components/react-hook-form/form). Alternativ stehen aber -auch folgende Properties zur Verfügung: +Nutze für die Validierung [React Hook Form](/components/react-hook-form/form). +Alternativ stehen aber auch folgende Properties zur Verfügung: - `isRequired` für Pflichtfelder. - `validate` für eigene Validierungen. @@ -74,24 +72,24 @@ wird, warum der User gerade nicht mit dem NumberField interagieren kann. ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um andere -Components wie einen [Button](/04-components/actions/button) neben dem -NumberField auszurichten. +Benutze die [Combine](/components/structure/combine)-Component, um andere +Components wie einen [Button](/components/actions/button) neben dem NumberField +auszurichten. ## ContextualHelp -Verwende [ContextualHelp](/04-components/overlays/contextual-help), um -zusätzliche Informationen bereitzustellen, die über den Umfang der -FieldDescription hinausgehen. +Verwende [ContextualHelp](/components/overlays/contextual-help), um zusätzliche +Informationen bereitzustellen, die über den Umfang der FieldDescription +hinausgehen. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/buttons.tsx b/apps/docs/src/content/components/form-controls/password-creation-field/examples/buttons.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/examples/buttons.tsx rename to apps/docs/src/content/components/form-controls/password-creation-field/examples/buttons.tsx diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/copyButton.tsx b/apps/docs/src/content/components/form-controls/password-creation-field/examples/copyButton.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/examples/copyButton.tsx rename to apps/docs/src/content/components/form-controls/password-creation-field/examples/copyButton.tsx diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/default.tsx b/apps/docs/src/content/components/form-controls/password-creation-field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/examples/default.tsx rename to apps/docs/src/content/components/form-controls/password-creation-field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/password-creation-field/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/password-creation-field/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/form.tsx b/apps/docs/src/content/components/form-controls/password-creation-field/examples/form.tsx similarity index 94% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/examples/form.tsx rename to apps/docs/src/content/components/form-controls/password-creation-field/examples/form.tsx index e40b051ee2..162a2a7aea 100644 --- a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/password-creation-field/examples/form.tsx @@ -4,7 +4,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; import { Label, Section, diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/examples/rules.tsx b/apps/docs/src/content/components/form-controls/password-creation-field/examples/rules.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/examples/rules.tsx rename to apps/docs/src/content/components/form-controls/password-creation-field/examples/rules.tsx diff --git a/apps/docs/src/content/04-components/form-controls/password-creation-field/index.mdx b/apps/docs/src/content/components/form-controls/password-creation-field/index.mdx similarity index 82% rename from apps/docs/src/content/04-components/form-controls/password-creation-field/index.mdx rename to apps/docs/src/content/components/form-controls/password-creation-field/index.mdx index e6ca270b7a..d3f7e808ce 100644 --- a/apps/docs/src/content/04-components/form-controls/password-creation-field/index.mdx +++ b/apps/docs/src/content/components/form-controls/password-creation-field/index.mdx @@ -15,7 +15,7 @@ description: bestehen. - Formuliere selbst definierte Richtlinien klar und eindeutig verständlich. - Nutze für die Eingabe bestehender Passwörter ein reguläres - [TextField](/04-components/form-controls/text-field) mit dem Type `password`. + [TextField](/components/form-controls/text-field) mit dem Type `password`. --- @@ -51,15 +51,15 @@ kann. ## Button Das PasswordCreationField kann mit zusätzlichen -[Buttons](/04-components/actions/button) ergänzt werden. Diese Erweiterungen -sind flexibel einsetzbar und sollten im direkten Zusammenhang mit der +[Buttons](/components/actions/button) ergänzt werden. Diese Erweiterungen sind +flexibel einsetzbar und sollten im direkten Zusammenhang mit der Passworterstellung stehen. ## CopyButton -Optional kann ein [CopyButton](/04-components/actions/copy-button) integriert +Optional kann ein [CopyButton](/components/actions/copy-button) integriert werden. Dadurch lassen sich erstellte Passwörter direkt in die Zwischenablage kopieren. @@ -68,7 +68,7 @@ kopieren. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/buttons.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/buttons.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/buttons.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/buttons.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/content.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/content.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/content.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/content.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/customColumns.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/customColumns.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/customColumns.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/customColumns.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/default.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/default.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/error.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/error.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/error.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/error.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/form.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/form.tsx similarity index 93% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/form.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/form.tsx index b43ecec795..76dae624cb 100644 --- a/apps/docs/src/content/04-components/form-controls/radio-group/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/radio-group/examples/form.tsx @@ -10,7 +10,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ coffee: string }>({ diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/examples/states.tsx b/apps/docs/src/content/components/form-controls/radio-group/examples/states.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/radio-group/examples/states.tsx rename to apps/docs/src/content/components/form-controls/radio-group/examples/states.tsx diff --git a/apps/docs/src/content/04-components/form-controls/radio-group/index.mdx b/apps/docs/src/content/components/form-controls/radio-group/index.mdx similarity index 73% rename from apps/docs/src/content/04-components/form-controls/radio-group/index.mdx rename to apps/docs/src/content/components/form-controls/radio-group/index.mdx index d71246e150..82e91f6fce 100644 --- a/apps/docs/src/content/04-components/form-controls/radio-group/index.mdx +++ b/apps/docs/src/content/components/form-controls/radio-group/index.mdx @@ -10,20 +10,19 @@ description: # Best Practices -- Beschrifte die RadioGroup mit einem [Label](/04-components/content/label). - Übernimmt ein nahes Element wie eine [Heading](/04-components/content/heading) +- Beschrifte die RadioGroup mit einem [Label](/components/content/label). + Übernimmt ein nahes Element wie eine [Heading](/components/content/heading) diese Rolle, setze stattdessen `aria-label` bzw. `aria-labelledby`. -- Nutze bei vielen Optionen ein [Select](/04-components/form-controls/select), - um die Oberfläche aufgeräumt zu halten. Als Faustregel ab etwa sieben - Optionen. +- Nutze bei vielen Optionen ein [Select](/components/form-controls/select), um + die Oberfläche aufgeräumt zu halten. Als Faustregel ab etwa sieben Optionen. - Wähle zu Beginn eine sinnvolle Option vor. Das vermeidet unnötige Fehlermeldungen. - Ordne die Optionen nach Wichtigkeit. Die wichtigste steht oben; eine Option mit weitreichenden Folgen gehört nach unten und ist nie vorausgewählt. - Formuliere die Optionen klar unterscheidbar. So erkennt der User die passende Wahl auf einen Blick. -- Folge in einem Formular dem [Form-Pattern](/03-patterns/01-patterns/forms). - Dort sind Aufbau, Validierung und Fehlerbehandlung geregelt. +- Folge in einem Formular dem [Form-Pattern](/patterns/patterns/forms). Dort + sind Aufbau, Validierung und Fehlerbehandlung geregelt. --- @@ -43,8 +42,8 @@ setzen. ## Error Ein Error-State wird angezeigt, wenn etwas schiefgelaufen ist (siehe -[Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen)). Da -meist eine Option vorselektiert ist, wird er nur selten benötigt. +[Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen)). Da meist +eine Option vorselektiert ist, wird er nur selten benötigt. @@ -61,7 +60,7 @@ statt `` auch `` nutzen. Anstelle einer einfachen Bezeichnung kann der `` auch mit zusätzlichem Inhalt gefüllt werden. Verwende dazu innerhalb des -`` [Text](/04-components/content/text) für eine Überschrift und +`` [Text](/components/content/text) für eine Überschrift und `` für Fließtext. @@ -69,7 +68,7 @@ zusätzlichem Inhalt gefüllt werden. Verwende dazu innerhalb des ## Benutzerdefinierte Spalten Die RadioGroup verwendet das -[ColumnLayout](/04-components/structure/column-layout), um eine Anpassung der +[ColumnLayout](/components/structure/column-layout), um eine Anpassung der Spalten zu ermöglichen. Bei der Verwendung von RadioButtons entspricht der Default dem des ColumnLayouts, während Radios im Default untereinander angezeigt werden. @@ -91,7 +90,7 @@ Für eine kurze Hilfestellung zu den Optionen kann unterhalb der `` ode ## ContextualHelp -Benutze die [ContextualHelp](/04-components/overlays/contextual-help) Component, +Benutze die [ContextualHelp](/components/overlays/contextual-help) Component, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind. @@ -100,7 +99,7 @@ FieldDescription sind. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/accent-box.tsx b/apps/docs/src/content/components/form-controls/rating/examples/accent-box.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/rating/examples/accent-box.tsx rename to apps/docs/src/content/components/form-controls/rating/examples/accent-box.tsx diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/big-number.tsx b/apps/docs/src/content/components/form-controls/rating/examples/big-number.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/rating/examples/big-number.tsx rename to apps/docs/src/content/components/form-controls/rating/examples/big-number.tsx diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/default.tsx b/apps/docs/src/content/components/form-controls/rating/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/rating/examples/default.tsx rename to apps/docs/src/content/components/form-controls/rating/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/icon.tsx b/apps/docs/src/content/components/form-controls/rating/examples/icon.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/rating/examples/icon.tsx rename to apps/docs/src/content/components/form-controls/rating/examples/icon.tsx diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/read-only.tsx b/apps/docs/src/content/components/form-controls/rating/examples/read-only.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/rating/examples/read-only.tsx rename to apps/docs/src/content/components/form-controls/rating/examples/read-only.tsx diff --git a/apps/docs/src/content/04-components/form-controls/rating/examples/size.tsx b/apps/docs/src/content/components/form-controls/rating/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/rating/examples/size.tsx rename to apps/docs/src/content/components/form-controls/rating/examples/size.tsx diff --git a/apps/docs/src/content/04-components/form-controls/rating/index.mdx b/apps/docs/src/content/components/form-controls/rating/index.mdx similarity index 75% rename from apps/docs/src/content/04-components/form-controls/rating/index.mdx rename to apps/docs/src/content/components/form-controls/rating/index.mdx index 6890cd2267..c646393de0 100644 --- a/apps/docs/src/content/04-components/form-controls/rating/index.mdx +++ b/apps/docs/src/content/components/form-controls/rating/index.mdx @@ -12,7 +12,7 @@ description: # Best Practices - Unterstütze die visuelle Darstellung immer mit ergänzendem Kontext. Dazu - eignet sich zum Beispiel ein [Label](/04-components/content/label). + eignet sich zum Beispiel ein [Label](/components/content/label). - Nutze eine konsistente Skalierung von 0 bis 5 Sternen innerhalb eines Interfaces. @@ -38,7 +38,7 @@ verwenden möchtest. # Alternative Icons Über die Properties `iconEmpty` und `iconFilled` können benutzerdefinierte -[Icons](/04-components/content/icon) gesetzt werden. +[Icons](/components/content/icon) gesetzt werden. @@ -48,16 +48,15 @@ verwenden möchtest. ## BigNumber -Das Rating kann mit einer -[BigNumber](/04-components/data-visualisation/big-number) kombiniert werden, um -den Wert der BigNumber visuell besser einordnen zu können. +Das Rating kann mit einer [BigNumber](/components/data-visualisation/big-number) +kombiniert werden, um den Wert der BigNumber visuell besser einordnen zu können. ## AccentBox Zur visuellen Hervorhebung kann das Rating innerhalb einer -[AccentBox](/04-components/structure/accent-box) angezeigt werden. +[AccentBox](/components/structure/accent-box) angezeigt werden. diff --git a/apps/docs/src/content/04-components/form-controls/search-field/examples/combine.tsx b/apps/docs/src/content/components/form-controls/search-field/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/search-field/examples/combine.tsx rename to apps/docs/src/content/components/form-controls/search-field/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/form-controls/search-field/examples/default.tsx b/apps/docs/src/content/components/form-controls/search-field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/search-field/examples/default.tsx rename to apps/docs/src/content/components/form-controls/search-field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/search-field/examples/form.tsx b/apps/docs/src/content/components/form-controls/search-field/examples/form.tsx similarity index 89% rename from apps/docs/src/content/04-components/form-controls/search-field/examples/form.tsx rename to apps/docs/src/content/components/form-controls/search-field/examples/form.tsx index 21caf98aa6..fdfb02e91a 100644 --- a/apps/docs/src/content/04-components/form-controls/search-field/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/search-field/examples/form.tsx @@ -8,7 +8,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ search: string }>(); diff --git a/apps/docs/src/content/04-components/form-controls/search-field/index.mdx b/apps/docs/src/content/components/form-controls/search-field/index.mdx similarity index 77% rename from apps/docs/src/content/04-components/form-controls/search-field/index.mdx rename to apps/docs/src/content/components/form-controls/search-field/index.mdx index 2f8d360617..2842f27669 100644 --- a/apps/docs/src/content/04-components/form-controls/search-field/index.mdx +++ b/apps/docs/src/content/components/form-controls/search-field/index.mdx @@ -21,8 +21,8 @@ description: ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um andere -Components, wie einen [Button](/04-components/actions/button), neben dem +Benutze die [Combine](/components/structure/combine)-Component, um andere +Components, wie einen [Button](/components/actions/button), neben dem SearchField auszurichten. @@ -30,7 +30,7 @@ SearchField auszurichten. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/segmented-control/examples/default.tsx b/apps/docs/src/content/components/form-controls/segmented-control/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/segmented-control/examples/default.tsx rename to apps/docs/src/content/components/form-controls/segmented-control/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/segmented-control/examples/radioGroup.tsx b/apps/docs/src/content/components/form-controls/segmented-control/examples/radioGroup.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/segmented-control/examples/radioGroup.tsx rename to apps/docs/src/content/components/form-controls/segmented-control/examples/radioGroup.tsx diff --git a/apps/docs/src/content/04-components/form-controls/segmented-control/examples/tabs.tsx b/apps/docs/src/content/components/form-controls/segmented-control/examples/tabs.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/segmented-control/examples/tabs.tsx rename to apps/docs/src/content/components/form-controls/segmented-control/examples/tabs.tsx diff --git a/apps/docs/src/content/04-components/form-controls/segmented-control/index.mdx b/apps/docs/src/content/components/form-controls/segmented-control/index.mdx similarity index 64% rename from apps/docs/src/content/04-components/form-controls/segmented-control/index.mdx rename to apps/docs/src/content/components/form-controls/segmented-control/index.mdx index 82f3bd0180..a73565dd39 100644 --- a/apps/docs/src/content/04-components/form-controls/segmented-control/index.mdx +++ b/apps/docs/src/content/components/form-controls/segmented-control/index.mdx @@ -4,9 +4,9 @@ description: Ein SegmentedControl bietet eine Einfachauswahl aus 2 bis 5 kurzen Optionen. deprecationNotice: SegmentedControl wird in einer zukünftigen Major-Version entfernt. Nutze - [Tabs](/04-components/structure/tabs), wenn die Auswahl Inhalte umschaltet, - und eine [RadioGroup](/04-components/form-controls/radio-group), wenn sie - einen Wert setzt. + [Tabs](/components/structure/tabs), wenn die Auswahl Inhalte umschaltet, und + eine [RadioGroup](/components/form-controls/radio-group), wenn sie einen Wert + setzt. --- @@ -19,9 +19,9 @@ Das SegmentedControl hat zwei verschiedene Aufgaben übernommen. Welche Componen es ersetzt, entscheidet die Aufgabe an der jeweiligen Stelle: - Schaltet die Auswahl den Inhalt darunter um, ersetzen - [Tabs](/04-components/structure/tabs) das SegmentedControl. + [Tabs](/components/structure/tabs) das SegmentedControl. - Setzt die Auswahl einen Wert – etwa in einem Formular oder in Einstellungen – - ersetzt eine [RadioGroup](/04-components/form-controls/radio-group) das + ersetzt eine [RadioGroup](/components/form-controls/radio-group) das SegmentedControl. - Migriere von Hand. Es gibt keinen Codemod: welche Component passt, hängt an der Aufgabe und ist pro Verwendung zu entscheiden. Die Diffs für beide Wege @@ -29,17 +29,17 @@ es ersetzt, entscheidet die Aufgabe an der jeweiligen Stelle: [MIGRATION.md](https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md). - SegmentedControl gibt zur Laufzeit eine Deprecation-Warnung aus und wird in einer zukünftigen Major-Version entfernt. Bis dahin bleibt der alte Pfad - abgesichert (siehe [Versionierung & Stabilität](/01-get-started/versioning)). + abgesichert (siehe [Versionierung & Stabilität](/get-started/versioning)). --- # Inhalte umschalten: Tabs Ein SegmentedControl, dessen Auswahl den Inhalt darunter austauscht, ist ein -Content Switcher – und damit die Aufgabe von -[Tabs](/04-components/structure/tabs). Aus jedem `` wird ein -``, dessen Titel im `` steht und dessen Inhalt direkt im Tab -liegt. Das Label und der State für den angezeigten Inhalt entfallen. +Content Switcher – und damit die Aufgabe von [Tabs](/components/structure/tabs). +Aus jedem `` wird ein ``, dessen Titel im `` steht +und dessen Inhalt direkt im Tab liegt. Das Label und der State für den +angezeigten Inhalt entfallen. @@ -48,9 +48,9 @@ liegt. Das Label und der State für den angezeigten Inhalt entfallen. # Werte auswählen: RadioGroup Ein SegmentedControl, dessen Auswahl einen Wert setzt, wird zu einer -[RadioGroup](/04-components/form-controls/radio-group). Aus jedem `` +[RadioGroup](/components/form-controls/radio-group). Aus jedem `` wird ein ``; Label, FieldDescription, FieldError und die Anbindung an -[React Hook Form](/04-components/react-hook-form/form) bleiben unverändert. +[React Hook Form](/components/react-hook-form/form) bleiben unverändert. diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/combine.tsx b/apps/docs/src/content/components/form-controls/select/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/select/examples/combine.tsx rename to apps/docs/src/content/components/form-controls/select/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/select/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/select/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/select/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/default.tsx b/apps/docs/src/content/components/form-controls/select/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/select/examples/default.tsx rename to apps/docs/src/content/components/form-controls/select/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/defaultValue.tsx b/apps/docs/src/content/components/form-controls/select/examples/defaultValue.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/select/examples/defaultValue.tsx rename to apps/docs/src/content/components/form-controls/select/examples/defaultValue.tsx diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/fieldDescription.tsx b/apps/docs/src/content/components/form-controls/select/examples/fieldDescription.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/select/examples/fieldDescription.tsx rename to apps/docs/src/content/components/form-controls/select/examples/fieldDescription.tsx diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/form.tsx b/apps/docs/src/content/components/form-controls/select/examples/form.tsx similarity index 91% rename from apps/docs/src/content/04-components/form-controls/select/examples/form.tsx rename to apps/docs/src/content/components/form-controls/select/examples/form.tsx index 42127811a8..1ac6f05d1f 100644 --- a/apps/docs/src/content/04-components/form-controls/select/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/select/examples/form.tsx @@ -10,7 +10,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ app: string }>(); diff --git a/apps/docs/src/content/04-components/form-controls/select/examples/multiple.tsx b/apps/docs/src/content/components/form-controls/select/examples/multiple.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/select/examples/multiple.tsx rename to apps/docs/src/content/components/form-controls/select/examples/multiple.tsx diff --git a/apps/docs/src/content/04-components/form-controls/select/index.mdx b/apps/docs/src/content/components/form-controls/select/index.mdx similarity index 80% rename from apps/docs/src/content/04-components/form-controls/select/index.mdx rename to apps/docs/src/content/components/form-controls/select/index.mdx index e418196369..e48f0f1c89 100644 --- a/apps/docs/src/content/04-components/form-controls/select/index.mdx +++ b/apps/docs/src/content/components/form-controls/select/index.mdx @@ -21,12 +21,12 @@ description: # Best Practices -- Formuliere das [Label](/04-components/content/label) kurz und deutlich. +- Formuliere das [Label](/components/content/label) kurz und deutlich. - Nutze einen Placeholder mit klarer Handlungsaufforderung, wenn kein sinnvoller Default existiert. Ein Beispiel ist „Sprache wählen". - Benenne die Optionen verständlich und konsistent. - Halte die Zahl der Optionen überschaubar. Bei sehr vielen Einträgen eignet - sich eher eine [ComboBox](/04-components/form-controls/combo-box). + sich eher eine [ComboBox](/components/form-controls/combo-box). - Ordne die Optionen nachvollziehbar. Möglich sind alphabetische, thematische oder Relevanz-Sortierung. @@ -63,23 +63,23 @@ unterhalb eine `` eingebaut werden. ## Combine -Benutze die [Combine](/04-components/structure/combine) Component, um -beispielsweise einen [Button](/04-components/actions/button) neben dem Select zu +Benutze die [Combine](/components/structure/combine) Component, um +beispielsweise einen [Button](/components/actions/button) neben dem Select zu platzieren. ## ContextualHelp -Benutze das [ContextualHelp](/04-components/overlays/contextual-help), um -weitere Informationen bereitstellen zu können. +Benutze das [ContextualHelp](/components/overlays/contextual-help), um weitere +Informationen bereitstellen zu können. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/slider/examples/default.tsx b/apps/docs/src/content/components/form-controls/slider/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/slider/examples/default.tsx rename to apps/docs/src/content/components/form-controls/slider/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/slider/examples/form.tsx b/apps/docs/src/content/components/form-controls/slider/examples/form.tsx similarity index 92% rename from apps/docs/src/content/04-components/form-controls/slider/examples/form.tsx rename to apps/docs/src/content/components/form-controls/slider/examples/form.tsx index 37bc38d421..74323d3822 100644 --- a/apps/docs/src/content/04-components/form-controls/slider/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/slider/examples/form.tsx @@ -9,7 +9,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ storage: number }>(); diff --git a/apps/docs/src/content/04-components/form-controls/slider/index.mdx b/apps/docs/src/content/components/form-controls/slider/index.mdx similarity index 92% rename from apps/docs/src/content/04-components/form-controls/slider/index.mdx rename to apps/docs/src/content/components/form-controls/slider/index.mdx index 38ffa1438b..8ab79137da 100644 --- a/apps/docs/src/content/04-components/form-controls/slider/index.mdx +++ b/apps/docs/src/content/components/form-controls/slider/index.mdx @@ -24,7 +24,7 @@ description: ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/switch/examples/default.tsx b/apps/docs/src/content/components/form-controls/switch/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/switch/examples/default.tsx rename to apps/docs/src/content/components/form-controls/switch/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/switch/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/switch/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/switch/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/switch/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/switch/examples/leading-label.tsx b/apps/docs/src/content/components/form-controls/switch/examples/leading-label.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/switch/examples/leading-label.tsx rename to apps/docs/src/content/components/form-controls/switch/examples/leading-label.tsx diff --git a/apps/docs/src/content/04-components/form-controls/switch/index.mdx b/apps/docs/src/content/components/form-controls/switch/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/switch/index.mdx rename to apps/docs/src/content/components/form-controls/switch/index.mdx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/allowResize.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/allowResize.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/allowResize.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/allowResize.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/autoResizeMaxRows.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/autoResizeMaxRows.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/autoResizeMaxRows.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/autoResizeMaxRows.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/characterCount.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/characterCount.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/characterCount.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/characterCount.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/combine.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/combine.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/combinedResize.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/combinedResize.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/combinedResize.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/combinedResize.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/default.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/default.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/form.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/form.tsx similarity index 90% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/form.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/form.tsx index 1aa4eac612..dba8b20c8b 100644 --- a/apps/docs/src/content/04-components/form-controls/text-area/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/text-area/examples/form.tsx @@ -9,7 +9,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ message: string }>(); diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/invalid.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/invalid.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/invalid.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/invalid.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/examples/required.tsx b/apps/docs/src/content/components/form-controls/text-area/examples/required.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-area/examples/required.tsx rename to apps/docs/src/content/components/form-controls/text-area/examples/required.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-area/index.mdx b/apps/docs/src/content/components/form-controls/text-area/index.mdx similarity index 77% rename from apps/docs/src/content/04-components/form-controls/text-area/index.mdx rename to apps/docs/src/content/components/form-controls/text-area/index.mdx index b503057af8..849b9b6cd9 100644 --- a/apps/docs/src/content/04-components/form-controls/text-area/index.mdx +++ b/apps/docs/src/content/components/form-controls/text-area/index.mdx @@ -12,11 +12,10 @@ description: # Best Practices - Wähle die Höhe über das Property `rows` passend zur erwarteten Textmenge. -- Formuliere das [Label](/04-components/content/label) prägnant und leicht +- Formuliere das [Label](/components/content/label) prägnant und leicht verständlich. - Nutze die FieldDescription für Beispiele, Formatierungshinweise oder Kontext. -- Formuliere - [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) +- Formuliere [Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen) klar, hilfreich und lösungsorientiert. --- @@ -33,9 +32,8 @@ angegeben – die maximale Zeichenanzahl anzeigt. # Validierung -Nutze für die Validierung -[React Hook Form](/04-components/react-hook-form/form). Alternativ stehen aber -auch folgende Properties zur Verfügung: +Nutze für die Validierung [React Hook Form](/components/react-hook-form/form). +Alternativ stehen aber auch folgende Properties zur Verfügung: - `isRequired` für Pflichtfelder. - `validate` für eigene Validierungen. @@ -93,24 +91,24 @@ wird, warum der User gerade nicht mit der TextArea interagieren kann. ## Combine -Benutze die [Combine](/04-components/structure/combine)-Component, um andere -Components, wie einen [Button](/04-components/actions/button), neben der -TextArea auszurichten. +Benutze die [Combine](/components/structure/combine)-Component, um andere +Components, wie einen [Button](/components/actions/button), neben der TextArea +auszurichten. ## ContextualHelp -Verwende [ContextualHelp](/04-components/overlays/contextual-help), um -zusätzliche Informationen bereitzustellen, die über den Umfang der -FieldDescription hinausgehen. +Verwende [ContextualHelp](/components/overlays/contextual-help), um zusätzliche +Informationen bereitzustellen, die über den Umfang der FieldDescription +hinausgehen. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/button.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/button.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/button.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/button.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/characterCount.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/characterCount.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/characterCount.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/characterCount.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/combine.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/combine.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/default.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/default.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/defaultValue.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/defaultValue.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/defaultValue.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/defaultValue.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/form.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/form.tsx similarity index 90% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/form.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/form.tsx index 5fc12f39a7..60fb1cc6a3 100644 --- a/apps/docs/src/content/04-components/form-controls/text-field/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/text-field/examples/form.tsx @@ -9,7 +9,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ url: string }>(); diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/inputProps.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/inputProps.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/inputProps.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/inputProps.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/invalid.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/invalid.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/invalid.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/invalid.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/examples/password.tsx b/apps/docs/src/content/components/form-controls/text-field/examples/password.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/text-field/examples/password.tsx rename to apps/docs/src/content/components/form-controls/text-field/examples/password.tsx diff --git a/apps/docs/src/content/04-components/form-controls/text-field/index.mdx b/apps/docs/src/content/components/form-controls/text-field/index.mdx similarity index 79% rename from apps/docs/src/content/04-components/form-controls/text-field/index.mdx rename to apps/docs/src/content/components/form-controls/text-field/index.mdx index 084992fd37..a7b70b2de6 100644 --- a/apps/docs/src/content/04-components/form-controls/text-field/index.mdx +++ b/apps/docs/src/content/components/form-controls/text-field/index.mdx @@ -10,11 +10,11 @@ description: Ein TextField ermöglicht die Texteingabe über die Tastatur. # Best Practices - Nutze das TextField nur für einzeilige Eingaben. Für mehrzeilige Angaben - eignet sich die [TextArea](/04-components/form-controls/text-area). + eignet sich die [TextArea](/components/form-controls/text-area). - Verwende für spezielle Eingabetypen das passende `type` Attribut. Für E-Mail-Adressen ist das zum Beispiel `email`. -- Folge in einem Formular dem [Forms-Pattern](/03-patterns/01-patterns/forms). - Dort sind Labels, Hilfetexte, Platzhalter und Fehlermeldungen geregelt. +- Folge in einem Formular dem [Forms-Pattern](/patterns/patterns/forms). Dort + sind Labels, Hilfetexte, Platzhalter und Fehlermeldungen geregelt. --- @@ -56,9 +56,8 @@ anzeigt. # Validierung -Nutze für die Validierung -[React Hook Form](/04-components/react-hook-form/form). Alternativ stehen aber -auch folgende Properties zur Verfügung: +Nutze für die Validierung [React Hook Form](/components/react-hook-form/form). +Alternativ stehen aber auch folgende Properties zur Verfügung: - `isRequired` für Pflichtfelder. - `validate` für eigene Validierungen. @@ -84,8 +83,8 @@ wird, warum der User gerade nicht mit dem TextField interagieren kann. ## Combine -Benutze die [Combine](/04-components/structure/combine) Component, um einen -[Button](/04-components/actions/button) neben deinem TextField zu platzieren. +Benutze die [Combine](/components/structure/combine) Component, um einen +[Button](/components/actions/button) neben deinem TextField zu platzieren. @@ -98,7 +97,7 @@ auszuführen. ## ContextualHelp -Benutze die [ContextualHelp](/04-components/overlays/contextual-help) Component, +Benutze die [ContextualHelp](/components/overlays/contextual-help) Component, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind. @@ -107,7 +106,7 @@ FieldDescription sind. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/form-controls/time-field/examples/contextualHelp.tsx b/apps/docs/src/content/components/form-controls/time-field/examples/contextualHelp.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/time-field/examples/contextualHelp.tsx rename to apps/docs/src/content/components/form-controls/time-field/examples/contextualHelp.tsx diff --git a/apps/docs/src/content/04-components/form-controls/time-field/examples/default.tsx b/apps/docs/src/content/components/form-controls/time-field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/time-field/examples/default.tsx rename to apps/docs/src/content/components/form-controls/time-field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/form-controls/time-field/examples/disabled.tsx b/apps/docs/src/content/components/form-controls/time-field/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/time-field/examples/disabled.tsx rename to apps/docs/src/content/components/form-controls/time-field/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/form-controls/time-field/examples/form.tsx b/apps/docs/src/content/components/form-controls/time-field/examples/form.tsx similarity index 91% rename from apps/docs/src/content/04-components/form-controls/time-field/examples/form.tsx rename to apps/docs/src/content/components/form-controls/time-field/examples/form.tsx index d8ada24b56..9ca25094af 100644 --- a/apps/docs/src/content/04-components/form-controls/time-field/examples/form.tsx +++ b/apps/docs/src/content/components/form-controls/time-field/examples/form.tsx @@ -9,7 +9,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; import type { CalendarDateTime } from "@internationalized/date"; export default () => { diff --git a/apps/docs/src/content/04-components/form-controls/time-field/examples/granularity.tsx b/apps/docs/src/content/components/form-controls/time-field/examples/granularity.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/time-field/examples/granularity.tsx rename to apps/docs/src/content/components/form-controls/time-field/examples/granularity.tsx diff --git a/apps/docs/src/content/04-components/form-controls/time-field/examples/minMax.tsx b/apps/docs/src/content/components/form-controls/time-field/examples/minMax.tsx similarity index 100% rename from apps/docs/src/content/04-components/form-controls/time-field/examples/minMax.tsx rename to apps/docs/src/content/components/form-controls/time-field/examples/minMax.tsx diff --git a/apps/docs/src/content/04-components/form-controls/time-field/index.mdx b/apps/docs/src/content/components/form-controls/time-field/index.mdx similarity index 87% rename from apps/docs/src/content/04-components/form-controls/time-field/index.mdx rename to apps/docs/src/content/components/form-controls/time-field/index.mdx index ba1a94ed00..fd7d91d40c 100644 --- a/apps/docs/src/content/04-components/form-controls/time-field/index.mdx +++ b/apps/docs/src/content/components/form-controls/time-field/index.mdx @@ -9,8 +9,7 @@ description: Mit dem TimeField können User eine konkrete Uhrzeit angeben. # Best Practices -- Verwende ein verständliches [Label](/04-components/content/label) wie - „Uhrzeit". +- Verwende ein verständliches [Label](/components/content/label) wie „Uhrzeit". - Wähle ein Zeitformat passend zum vertrauten Format des Users und zum Kontext. - Wähle sinnvolle Defaultwerte. - Schränke Eingaben bei Bedarf mit `minValue` und `maxValue` ein. So lässt du @@ -50,7 +49,7 @@ wird, warum der User gerade nicht mit dem TimeField interagieren kann. ## ContextualHelp -Benutze das [ContextualHelp](/04-components/overlays/contextual-help), wenn +Benutze das [ContextualHelp](/components/overlays/contextual-help), wenn zusätzliche Informationen bereitgestellt werden sollen, die zu umfangreich für die FieldDescription sind. @@ -59,7 +58,7 @@ die FieldDescription sind. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/navigation/breadcrumb/examples/dark.tsx b/apps/docs/src/content/components/navigation/breadcrumb/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/breadcrumb/examples/dark.tsx rename to apps/docs/src/content/components/navigation/breadcrumb/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/navigation/breadcrumb/examples/default.tsx b/apps/docs/src/content/components/navigation/breadcrumb/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/breadcrumb/examples/default.tsx rename to apps/docs/src/content/components/navigation/breadcrumb/examples/default.tsx diff --git a/apps/docs/src/content/04-components/navigation/breadcrumb/examples/light.tsx b/apps/docs/src/content/components/navigation/breadcrumb/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/breadcrumb/examples/light.tsx rename to apps/docs/src/content/components/navigation/breadcrumb/examples/light.tsx diff --git a/apps/docs/src/content/04-components/navigation/breadcrumb/index.mdx b/apps/docs/src/content/components/navigation/breadcrumb/index.mdx similarity index 94% rename from apps/docs/src/content/04-components/navigation/breadcrumb/index.mdx rename to apps/docs/src/content/components/navigation/breadcrumb/index.mdx index 44bff83d4d..07cfe5881d 100644 --- a/apps/docs/src/content/04-components/navigation/breadcrumb/index.mdx +++ b/apps/docs/src/content/components/navigation/breadcrumb/index.mdx @@ -29,7 +29,7 @@ Zusätzlich zur Standard-Color kann die Breadcrumb in **Light** und **Dark** dargestellt werden, um auf farbigen oder dekorativen Hintergründen ausreichend Kontrast zu erreichen. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). diff --git a/apps/docs/src/content/04-components/navigation/header-navigation/examples/contextMenu.tsx b/apps/docs/src/content/components/navigation/header-navigation/examples/contextMenu.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/header-navigation/examples/contextMenu.tsx rename to apps/docs/src/content/components/navigation/header-navigation/examples/contextMenu.tsx diff --git a/apps/docs/src/content/04-components/navigation/header-navigation/examples/dark.tsx b/apps/docs/src/content/components/navigation/header-navigation/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/header-navigation/examples/dark.tsx rename to apps/docs/src/content/components/navigation/header-navigation/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/navigation/header-navigation/examples/default.tsx b/apps/docs/src/content/components/navigation/header-navigation/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/header-navigation/examples/default.tsx rename to apps/docs/src/content/components/navigation/header-navigation/examples/default.tsx diff --git a/apps/docs/src/content/04-components/navigation/header-navigation/examples/light.tsx b/apps/docs/src/content/components/navigation/header-navigation/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/header-navigation/examples/light.tsx rename to apps/docs/src/content/components/navigation/header-navigation/examples/light.tsx diff --git a/apps/docs/src/content/04-components/navigation/header-navigation/index.mdx b/apps/docs/src/content/components/navigation/header-navigation/index.mdx similarity index 69% rename from apps/docs/src/content/04-components/navigation/header-navigation/index.mdx rename to apps/docs/src/content/components/navigation/header-navigation/index.mdx index 3988bc7df5..f406b4c110 100644 --- a/apps/docs/src/content/04-components/navigation/header-navigation/index.mdx +++ b/apps/docs/src/content/components/navigation/header-navigation/index.mdx @@ -11,7 +11,7 @@ description: # Best Practices - Beschrifte die Navigationspunkte klar und ordne sie sinnvoll an. -- Nutze für [Icons](/04-components/content/icon) gängige Symbole mit eindeutiger +- Nutze für [Icons](/components/content/icon) gängige Symbole mit eindeutiger Funktion. - Halte die Navigation schlank und beschränke sie auf relevante Elemente. @@ -23,7 +23,7 @@ Zusätzlich zur Standard-Color kann die HeaderNavigation in **Light** und **Dark** dargestellt werden, um auf farbigen oder dekorativen Hintergründen ausreichend Kontrast zu erreichen. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). @@ -35,10 +35,10 @@ Dark findest du in den Foundations unter ## ContextMenu -Nutze einen [Button](/04-components/actions/button) als Trigger für ein -[ContextMenu](/04-components/actions/context-menu), um zum Beispiel ein -Profil-Menü zu öffnen. Der Button kann dabei einen -[Avatar](/04-components/content/avatar) enthalten. +Nutze einen [Button](/components/actions/button) als Trigger für ein +[ContextMenu](/components/actions/context-menu), um zum Beispiel ein Profil-Menü +zu öffnen. Der Button kann dabei einen [Avatar](/components/content/avatar) +enthalten. diff --git a/apps/docs/src/content/04-components/navigation/link/examples/button.tsx b/apps/docs/src/content/components/navigation/link/examples/button.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/button.tsx rename to apps/docs/src/content/components/navigation/link/examples/button.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/dark.tsx b/apps/docs/src/content/components/navigation/link/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/dark.tsx rename to apps/docs/src/content/components/navigation/link/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/default.tsx b/apps/docs/src/content/components/navigation/link/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/default.tsx rename to apps/docs/src/content/components/navigation/link/examples/default.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/disabled.tsx b/apps/docs/src/content/components/navigation/link/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/disabled.tsx rename to apps/docs/src/content/components/navigation/link/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/download.tsx b/apps/docs/src/content/components/navigation/link/examples/download.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/download.tsx rename to apps/docs/src/content/components/navigation/link/examples/download.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/external.tsx b/apps/docs/src/content/components/navigation/link/examples/external.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/external.tsx rename to apps/docs/src/content/components/navigation/link/examples/external.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/inlineText.tsx b/apps/docs/src/content/components/navigation/link/examples/inlineText.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/inlineText.tsx rename to apps/docs/src/content/components/navigation/link/examples/inlineText.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/light.tsx b/apps/docs/src/content/components/navigation/link/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/light.tsx rename to apps/docs/src/content/components/navigation/link/examples/light.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/examples/position1.tsx b/apps/docs/src/content/components/navigation/link/examples/position1.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/link/examples/position1.tsx rename to apps/docs/src/content/components/navigation/link/examples/position1.tsx diff --git a/apps/docs/src/content/04-components/navigation/link/index.mdx b/apps/docs/src/content/components/navigation/link/index.mdx similarity index 83% rename from apps/docs/src/content/04-components/navigation/link/index.mdx rename to apps/docs/src/content/components/navigation/link/index.mdx index f390fb32c2..bbd5a7c3fe 100644 --- a/apps/docs/src/content/04-components/navigation/link/index.mdx +++ b/apps/docs/src/content/components/navigation/link/index.mdx @@ -10,7 +10,7 @@ description: # Best Practices -- Nutze Links zum Navigieren und [Buttons](/04-components/actions/button) für +- Nutze Links zum Navigieren und [Buttons](/components/actions/button) für Aktionen. Eine Ausnahme können hervorgehobene Call-to-Actions sein, bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist. - Halte den Linktext kurz, prägnant und in seiner Absicht klar erkennbar. @@ -21,9 +21,8 @@ description: Verwende für Navigation bevorzugt Links und für Aktionen Buttons. Eine Ausnahme können hervorgehobene -[Call-to-Actions](/04-components/navigation/link#kombiniere-mit-button) sein, -bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll -ist. +[Call-to-Actions](/components/navigation/link#kombiniere-mit-button) sein, bei +denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist. @@ -37,7 +36,7 @@ ist. - eine Aktion auszuführen oder ein Event zu starten, ohne die Seite zu verlassen. - Formulare zu speichern oder zurückzusetzen. - - in einem [Modal](/04-components/overlays/modal) Aktionen auszuwählen. + - in einem [Modal](/components/overlays/modal) Aktionen auszuwählen. @@ -49,7 +48,7 @@ ist. Auf farbigen oder dekorativen Hintergründen kann der Link in **Light** und **Dark** dargestellt werden, um ausreichend Kontrast zu erreichen. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). @@ -104,8 +103,8 @@ gesetzt ist. ## Section -Platziere einen Link im Header einer [Section](/04-components/structure/section) -neben der [Heading](/04-components/content/heading), um ihn inhaltlich mit der +Platziere einen Link im Header einer [Section](/components/structure/section) +neben der [Heading](/components/content/heading), um ihn inhaltlich mit der Section zu verknüpfen. @@ -114,7 +113,7 @@ Section zu verknüpfen. Für hervorgehobene Call-to-Actions, bei denen ein Button-ähnliches Erscheinungsbild für eine Navigation sinnvoll ist, kann ein -[Button](/04-components/actions/button) im Link platziert werden. +[Button](/components/actions/button) im Link platziert werden. diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/badge.tsx b/apps/docs/src/content/components/navigation/navigation/examples/badge.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/badge.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/badge.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/collapsable.tsx b/apps/docs/src/content/components/navigation/navigation/examples/collapsable.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/collapsable.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/collapsable.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/collapsed.tsx b/apps/docs/src/content/components/navigation/navigation/examples/collapsed.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/collapsed.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/collapsed.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/default.tsx b/apps/docs/src/content/components/navigation/navigation/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/default.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/default.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/groups.tsx b/apps/docs/src/content/components/navigation/navigation/examples/groups.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/groups.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/groups.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/icons.tsx b/apps/docs/src/content/components/navigation/navigation/examples/icons.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/icons.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/icons.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/examples/separator.tsx b/apps/docs/src/content/components/navigation/navigation/examples/separator.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/navigation/examples/separator.tsx rename to apps/docs/src/content/components/navigation/navigation/examples/separator.tsx diff --git a/apps/docs/src/content/04-components/navigation/navigation/index.mdx b/apps/docs/src/content/components/navigation/navigation/index.mdx similarity index 75% rename from apps/docs/src/content/04-components/navigation/navigation/index.mdx rename to apps/docs/src/content/components/navigation/navigation/index.mdx index 5437611d1c..b62cb49b35 100644 --- a/apps/docs/src/content/04-components/navigation/navigation/index.mdx +++ b/apps/docs/src/content/components/navigation/navigation/index.mdx @@ -12,8 +12,8 @@ description: # Best Practices - Benenne die Menüeinträge kurz, prägnant und verständlich. -- Setze [Icons](/04-components/content/icon) nur ergänzend ein, nicht als - alleinige Information. +- Setze [Icons](/components/content/icon) nur ergänzend ein, nicht als alleinige + Information. - Begrenze eine Gruppe auf etwa sieben bis acht Menüeinträge. So bleibt die Navigation übersichtlich. - Setze einklappbare Gruppen bewusst ein. Sie verbessern den Überblick, können @@ -23,7 +23,7 @@ description: # Mit Icons -Menüeinträge lassen sich optional mit einem [Icon](/04-components/content/icon) +Menüeinträge lassen sich optional mit einem [Icon](/components/content/icon) versehen. Dies bietet Usern eine zusätzliche visuelle Orientierung über den Inhalt der verlinkten Seite. @@ -34,7 +34,7 @@ Inhalt der verlinkten Seite. # Mit Gruppen Mehrere Menüeinträge können zu Gruppen zusammengefasst werden. Zur Kennzeichnung -dieser Gruppen eignet sich ein [Label](/04-components/content/label). +dieser Gruppen eignet sich ein [Label](/components/content/label). @@ -65,16 +65,16 @@ vielen Gruppen entsteht so eine Übersicht auf einen Blick. ## Separator Zur klaren Trennung von Menügruppen kann ein -[Separator](/04-components/structure/separator) verwendet werden. +[Separator](/components/structure/separator) verwendet werden. ## Badge -Menüeinträge können um ein [Badge](/04-components/status/badge) erweitert werden -um zusätzliche Metainformationen wie „New“ oder „Beta“ anzuzeigen. Für +Menüeinträge können um ein [Badge](/components/status/badge) erweitert werden um +zusätzliche Metainformationen wie „New“ oder „Beta“ anzuzeigen. Für Anwendungsfälle wie ein Benachrichtigungscenter kann außerdem ein -[CounterBadge](/04-components/status/counter-badge) verwendet werden. +[CounterBadge](/components/status/counter-badge) verwendet werden. diff --git a/apps/docs/src/content/04-components/navigation/tab-navigation/examples/default.tsx b/apps/docs/src/content/components/navigation/tab-navigation/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/tab-navigation/examples/default.tsx rename to apps/docs/src/content/components/navigation/tab-navigation/examples/default.tsx diff --git a/apps/docs/src/content/04-components/navigation/tab-navigation/examples/layout-card.tsx b/apps/docs/src/content/components/navigation/tab-navigation/examples/layout-card.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/tab-navigation/examples/layout-card.tsx rename to apps/docs/src/content/components/navigation/tab-navigation/examples/layout-card.tsx diff --git a/apps/docs/src/content/04-components/navigation/tab-navigation/examples/overflow.tsx b/apps/docs/src/content/components/navigation/tab-navigation/examples/overflow.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/tab-navigation/examples/overflow.tsx rename to apps/docs/src/content/components/navigation/tab-navigation/examples/overflow.tsx diff --git a/apps/docs/src/content/04-components/navigation/tab-navigation/examples/status.tsx b/apps/docs/src/content/components/navigation/tab-navigation/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/navigation/tab-navigation/examples/status.tsx rename to apps/docs/src/content/components/navigation/tab-navigation/examples/status.tsx diff --git a/apps/docs/src/content/04-components/navigation/tab-navigation/index.mdx b/apps/docs/src/content/components/navigation/tab-navigation/index.mdx similarity index 83% rename from apps/docs/src/content/04-components/navigation/tab-navigation/index.mdx rename to apps/docs/src/content/components/navigation/tab-navigation/index.mdx index 52a0a3a172..33823610c4 100644 --- a/apps/docs/src/content/04-components/navigation/tab-navigation/index.mdx +++ b/apps/docs/src/content/components/navigation/tab-navigation/index.mdx @@ -18,7 +18,7 @@ description: ## Tabs vs. TabNavigation -Flow bietet mit der TabNavigation und den [Tabs](/04-components/structure/tabs) +Flow bietet mit der TabNavigation und den [Tabs](/components/structure/tabs) zwei ähnlich aussehende Components, die sich aber in der Verwendung klar unterscheiden: @@ -39,7 +39,7 @@ unterscheiden: Passen nicht alle Links in die verfügbare Breite, bleiben die vorderen Links sichtbar und die übrigen werden ausgeblendet. Stattdessen erscheint rechts ein **Weitere**-Button, der die ausgeblendeten Links in einem -[ContextMenu](/04-components/actions/context-menu) öffnet. Befindet sich die +[ContextMenu](/components/actions/context-menu) öffnet. Befindet sich die aktuell aktive Seite im ContextMenu, wird der Button wie ein aktiver Link dargestellt. @@ -61,9 +61,9 @@ innerhalb eines Navigationsbereichs hinzuweisen. ## LayoutCard Platziere die TabNavigation in einer -[LayoutCard](/04-components/structure/layout-card), um zwischen den Unterseiten -zu navigieren. Der Inhalt der aktiven Seite wird darunter in derselben -LayoutCard dargestellt. +[LayoutCard](/components/structure/layout-card), um zwischen den Unterseiten zu +navigieren. Der Inhalt der aktiven Seite wird darunter in derselben LayoutCard +dargestellt. diff --git a/apps/docs/src/content/04-components/overlays/contextual-help/examples/combine.tsx b/apps/docs/src/content/components/overlays/contextual-help/examples/combine.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/contextual-help/examples/combine.tsx rename to apps/docs/src/content/components/overlays/contextual-help/examples/combine.tsx diff --git a/apps/docs/src/content/04-components/overlays/contextual-help/examples/default.tsx b/apps/docs/src/content/components/overlays/contextual-help/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/contextual-help/examples/default.tsx rename to apps/docs/src/content/components/overlays/contextual-help/examples/default.tsx diff --git a/apps/docs/src/content/04-components/overlays/contextual-help/index.mdx b/apps/docs/src/content/components/overlays/contextual-help/index.mdx similarity index 73% rename from apps/docs/src/content/04-components/overlays/contextual-help/index.mdx rename to apps/docs/src/content/components/overlays/contextual-help/index.mdx index 6fd211eb0a..a94f7c0289 100644 --- a/apps/docs/src/content/04-components/overlays/contextual-help/index.mdx +++ b/apps/docs/src/content/components/overlays/contextual-help/index.mdx @@ -12,9 +12,8 @@ description: # Best Practices - Ordne ein ContextualHelp immer einem spezifischen Element zu. Das kann zum - Beispiel eine [Heading](/04-components/content/heading), ein - [Text](/04-components/content/text) oder [Label](/04-components/content/label) - sein. + Beispiel eine [Heading](/components/content/heading), ein + [Text](/components/content/text) oder [Label](/components/content/label) sein. - Nutze es für weiterführende Erklärungen oder Verweise, nicht für Unerlässliches. Zum Verständnis der Oberfläche notwendige Inhalte gehören direkt in die Oberfläche. @@ -29,9 +28,8 @@ description: ## Combine -Benutze die [Combine](/04-components/structure/combine) Component, um das -ContextualHelp z. B. neben einem [Text](/04-components/content/text) zu -platzieren. +Benutze die [Combine](/components/structure/combine) Component, um das +ContextualHelp z. B. neben einem [Text](/components/content/text) zu platzieren. diff --git a/apps/docs/src/content/04-components/overlays/light-box/examples/actions.tsx b/apps/docs/src/content/components/overlays/light-box/examples/actions.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/light-box/examples/actions.tsx rename to apps/docs/src/content/components/overlays/light-box/examples/actions.tsx diff --git a/apps/docs/src/content/04-components/overlays/light-box/examples/default.tsx b/apps/docs/src/content/components/overlays/light-box/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/light-box/examples/default.tsx rename to apps/docs/src/content/components/overlays/light-box/examples/default.tsx diff --git a/apps/docs/src/content/04-components/overlays/light-box/examples/fitScreenFalse.tsx b/apps/docs/src/content/components/overlays/light-box/examples/fitScreenFalse.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/light-box/examples/fitScreenFalse.tsx rename to apps/docs/src/content/components/overlays/light-box/examples/fitScreenFalse.tsx diff --git a/apps/docs/src/content/04-components/overlays/light-box/examples/gallery.tsx b/apps/docs/src/content/components/overlays/light-box/examples/gallery.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/light-box/examples/gallery.tsx rename to apps/docs/src/content/components/overlays/light-box/examples/gallery.tsx diff --git a/apps/docs/src/content/04-components/overlays/light-box/examples/imageTrigger.tsx b/apps/docs/src/content/components/overlays/light-box/examples/imageTrigger.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/light-box/examples/imageTrigger.tsx rename to apps/docs/src/content/components/overlays/light-box/examples/imageTrigger.tsx diff --git a/apps/docs/src/content/04-components/overlays/light-box/index.mdx b/apps/docs/src/content/components/overlays/light-box/index.mdx similarity index 75% rename from apps/docs/src/content/04-components/overlays/light-box/index.mdx rename to apps/docs/src/content/components/overlays/light-box/index.mdx index 399d812b98..a66c772cd9 100644 --- a/apps/docs/src/content/04-components/overlays/light-box/index.mdx +++ b/apps/docs/src/content/components/overlays/light-box/index.mdx @@ -11,9 +11,8 @@ description: # Best Practices -- Kennzeichne die Aktions-[Icons](/04-components/content/icon) klar und - eindeutig. So vermeidest du Missverständnisse, etwa bei Löschen oder - Herunterladen. +- Kennzeichne die Aktions-[Icons](/components/content/icon) klar und eindeutig. + So vermeidest du Missverständnisse, etwa bei Löschen oder Herunterladen. - Pflege sinnvolle Alt-Texte für die Bilder. Das sichert die Screenreader-Unterstützung. @@ -36,8 +35,8 @@ mehrseitigen PDFs. Innerhalb der LightBox kann eine `LightBoxGallery` verwendet werden. Diese kann mit `LightBoxGalleryItems` gefüllt werden, welche die Platzierung von -[Images](/04-components/content/image) und -[ActionGroups](/04-components/actions/action-group) unterstützen. +[Images](/components/content/image) und +[ActionGroups](/components/actions/action-group) unterstützen. @@ -47,14 +46,14 @@ mit `LightBoxGalleryItems` gefüllt werden, welche die Platzierung von ## ActionGroup -In der LightBox kann eine [ActionGroup](/04-components/actions/action-group) +In der LightBox kann eine [ActionGroup](/components/actions/action-group) verwendet werden, diese richtet sich automatisch vertikal am Bild aus. ## Image -Als Trigger kann auch das [Image](/04-components/content/image) selbst verwendet +Als Trigger kann auch das [Image](/components/content/image) selbst verwendet werden. Kombiniere dazu ` diff --git a/apps/docs/src/content/04-components/overlays/modal/examples/form.tsx b/apps/docs/src/content/components/overlays/modal/examples/form.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/modal/examples/form.tsx rename to apps/docs/src/content/components/overlays/modal/examples/form.tsx diff --git a/apps/docs/src/content/04-components/overlays/modal/examples/offCanvas.tsx b/apps/docs/src/content/components/overlays/modal/examples/offCanvas.tsx similarity index 97% rename from apps/docs/src/content/04-components/overlays/modal/examples/offCanvas.tsx rename to apps/docs/src/content/components/overlays/modal/examples/offCanvas.tsx index 0f7bea582e..270141214c 100644 --- a/apps/docs/src/content/04-components/overlays/modal/examples/offCanvas.tsx +++ b/apps/docs/src/content/components/overlays/modal/examples/offCanvas.tsx @@ -16,7 +16,7 @@ import { Text, TextField, } from "@mittwald/flow-react-components"; -import { sleepLong } from "@/content/04-components/actions/action/examples/lib"; +import { sleepLong } from "@/content/components/actions/action/examples/lib"; diff --git a/apps/docs/src/content/04-components/overlays/modal/examples/showCloseButton.tsx b/apps/docs/src/content/components/overlays/modal/examples/showCloseButton.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/modal/examples/showCloseButton.tsx rename to apps/docs/src/content/components/overlays/modal/examples/showCloseButton.tsx diff --git a/apps/docs/src/content/04-components/overlays/modal/examples/size.tsx b/apps/docs/src/content/components/overlays/modal/examples/size.tsx similarity index 99% rename from apps/docs/src/content/04-components/overlays/modal/examples/size.tsx rename to apps/docs/src/content/components/overlays/modal/examples/size.tsx index 79e691e10b..34e6c5f492 100644 --- a/apps/docs/src/content/04-components/overlays/modal/examples/size.tsx +++ b/apps/docs/src/content/components/overlays/modal/examples/size.tsx @@ -20,7 +20,7 @@ import { Text, TextField, } from "@mittwald/flow-react-components"; -import { sleepLong } from "@/content/04-components/actions/action/examples/lib"; +import { sleepLong } from "@/content/components/actions/action/examples/lib"; export default () => { return ( diff --git a/apps/docs/src/content/04-components/overlays/modal/index.mdx b/apps/docs/src/content/components/overlays/modal/index.mdx similarity index 94% rename from apps/docs/src/content/04-components/overlays/modal/index.mdx rename to apps/docs/src/content/components/overlays/modal/index.mdx index 8bb2d7d9ba..eeeab7f647 100644 --- a/apps/docs/src/content/04-components/overlays/modal/index.mdx +++ b/apps/docs/src/content/components/overlays/modal/index.mdx @@ -49,7 +49,7 @@ Bestätigungs-Dialog erscheinen. Aktionen im Footer und der Close-Button in der Überschrift schließen dagegen sofort. Enthält das Modal eine -[Form (React Hook Form)](/04-components/react-hook-form/form), passiert das +[Form (React Hook Form)](/components/react-hook-form/form), passiert das automatisch, sobald sie ungespeicherte Änderungen enthält. Ohne Form – oder wenn du selbst entscheiden willst, wann es etwas zu verlieren gibt – setzt du `confirmOnClose`. @@ -85,7 +85,7 @@ geöffnet wurden. ## React Hook Form Weitere Details zur Formularlogik und -validierung findest du in der Component -[Form (React Hook Form)](/04-components/react-hook-form/form). +[Form (React Hook Form)](/components/react-hook-form/form). diff --git a/apps/docs/src/content/04-components/overlays/tooltip/examples/default.tsx b/apps/docs/src/content/components/overlays/tooltip/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/tooltip/examples/default.tsx rename to apps/docs/src/content/components/overlays/tooltip/examples/default.tsx diff --git a/apps/docs/src/content/04-components/overlays/tooltip/examples/delay.tsx b/apps/docs/src/content/components/overlays/tooltip/examples/delay.tsx similarity index 100% rename from apps/docs/src/content/04-components/overlays/tooltip/examples/delay.tsx rename to apps/docs/src/content/components/overlays/tooltip/examples/delay.tsx diff --git a/apps/docs/src/content/04-components/overlays/tooltip/index.mdx b/apps/docs/src/content/components/overlays/tooltip/index.mdx similarity index 92% rename from apps/docs/src/content/04-components/overlays/tooltip/index.mdx rename to apps/docs/src/content/components/overlays/tooltip/index.mdx index c241012566..bf260bc79d 100644 --- a/apps/docs/src/content/04-components/overlays/tooltip/index.mdx +++ b/apps/docs/src/content/components/overlays/tooltip/index.mdx @@ -15,8 +15,8 @@ description: Fehlermeldungen oder Feedback gehören nicht hinein, da er zum Beispiel auf dem Smartphone unbemerkt bleibt. - Verwende im Tooltip nur Text, keine interaktiven Inhalte wie - [Buttons](/04-components/actions/button) oder - [Links](/04-components/navigation/link). + [Buttons](/components/actions/button) oder + [Links](/components/navigation/link). - Lass den Tooltip die sichtbare Beschriftung ergänzen, nicht wiederholen. --- diff --git a/apps/docs/src/content/04-components/react-hook-form/field/examples/default.tsx b/apps/docs/src/content/components/react-hook-form/field/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/field/examples/default.tsx rename to apps/docs/src/content/components/react-hook-form/field/examples/default.tsx diff --git a/apps/docs/src/content/04-components/react-hook-form/field/examples/typed-field.tsx b/apps/docs/src/content/components/react-hook-form/field/examples/typed-field.tsx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/field/examples/typed-field.tsx rename to apps/docs/src/content/components/react-hook-form/field/examples/typed-field.tsx diff --git a/apps/docs/src/content/04-components/react-hook-form/field/index.mdx b/apps/docs/src/content/components/react-hook-form/field/index.mdx similarity index 85% rename from apps/docs/src/content/04-components/react-hook-form/field/index.mdx rename to apps/docs/src/content/components/react-hook-form/field/index.mdx index 6e40376bbc..ff37fce967 100644 --- a/apps/docs/src/content/04-components/react-hook-form/field/index.mdx +++ b/apps/docs/src/content/components/react-hook-form/field/index.mdx @@ -12,7 +12,7 @@ description: # typedField Die `typedField(form)`-Factory erzeugt eine Field-Component, die an den Typ des -jeweiligen [Forms](/04-components/react-hook-form/form) angepasst ist. Dadurch +jeweiligen [Forms](/components/react-hook-form/form) angepasst ist. Dadurch führen beispielsweise unbekannte Field-Namen zu einem TypeScript-Fehler. diff --git a/apps/docs/src/content/04-components/react-hook-form/form-root-error/examples/default.tsx b/apps/docs/src/content/components/react-hook-form/form-root-error/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/form-root-error/examples/default.tsx rename to apps/docs/src/content/components/react-hook-form/form-root-error/examples/default.tsx diff --git a/apps/docs/src/content/04-components/react-hook-form/form-root-error/index.mdx b/apps/docs/src/content/components/react-hook-form/form-root-error/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/form-root-error/index.mdx rename to apps/docs/src/content/components/react-hook-form/form-root-error/index.mdx diff --git a/apps/docs/src/content/04-components/react-hook-form/form/examples/default.tsx b/apps/docs/src/content/components/react-hook-form/form/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/form/examples/default.tsx rename to apps/docs/src/content/components/react-hook-form/form/examples/default.tsx diff --git a/apps/docs/src/content/04-components/react-hook-form/form/examples/resetOnSubmit.tsx b/apps/docs/src/content/components/react-hook-form/form/examples/resetOnSubmit.tsx similarity index 92% rename from apps/docs/src/content/04-components/react-hook-form/form/examples/resetOnSubmit.tsx rename to apps/docs/src/content/components/react-hook-form/form/examples/resetOnSubmit.tsx index 1f2c938b54..883a7e926d 100644 --- a/apps/docs/src/content/04-components/react-hook-form/form/examples/resetOnSubmit.tsx +++ b/apps/docs/src/content/components/react-hook-form/form/examples/resetOnSubmit.tsx @@ -1,4 +1,4 @@ -import { sleepLong } from "@/content/04-components/actions/action/examples/lib"; +import { sleepLong } from "@/content/components/actions/action/examples/lib"; import { ActionGroup, Label, diff --git a/apps/docs/src/content/04-components/react-hook-form/form/index.mdx b/apps/docs/src/content/components/react-hook-form/form/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/form/index.mdx rename to apps/docs/src/content/components/react-hook-form/form/index.mdx diff --git a/apps/docs/src/content/04-components/react-hook-form/submit-button/examples/default.tsx b/apps/docs/src/content/components/react-hook-form/submit-button/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/submit-button/examples/default.tsx rename to apps/docs/src/content/components/react-hook-form/submit-button/examples/default.tsx diff --git a/apps/docs/src/content/04-components/react-hook-form/submit-button/index.mdx b/apps/docs/src/content/components/react-hook-form/submit-button/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/react-hook-form/submit-button/index.mdx rename to apps/docs/src/content/components/react-hook-form/submit-button/index.mdx diff --git a/apps/docs/src/content/04-components/status/alert-badge/examples/default.tsx b/apps/docs/src/content/components/status/alert-badge/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert-badge/examples/default.tsx rename to apps/docs/src/content/components/status/alert-badge/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/alert-badge/examples/status.tsx b/apps/docs/src/content/components/status/alert-badge/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert-badge/examples/status.tsx rename to apps/docs/src/content/components/status/alert-badge/examples/status.tsx diff --git a/apps/docs/src/content/04-components/status/alert-badge/index.mdx b/apps/docs/src/content/components/status/alert-badge/index.mdx similarity index 87% rename from apps/docs/src/content/04-components/status/alert-badge/index.mdx rename to apps/docs/src/content/components/status/alert-badge/index.mdx index ddbe30d778..1ef0188456 100644 --- a/apps/docs/src/content/04-components/status/alert-badge/index.mdx +++ b/apps/docs/src/content/components/status/alert-badge/index.mdx @@ -16,12 +16,12 @@ description: - Wähle den Status passend zur Wichtigkeit der Meldung. - Setze ein AlertBadge nur für kritische oder besonders aufmerksamkeitsstarke Hinweise ein. Für weniger dringende Fälle genügt ein - [Badge](/04-components/status/badge). + [Badge](/components/status/badge). - Lass auf ein AlertBadge weiterführende Informationen in einem - [Alert](/04-components/status/alert) folgen. + [Alert](/components/status/alert) folgen. - Orientiere dich am - [Informationskonzept](/02-foundations/03-content-guidelines/02-informationskonzept). - Es beschreibt das Zusammenspiel der Status-Komponenten. + [Informationskonzept](/foundations/content-guidelines/informationskonzept). Es + beschreibt das Zusammenspiel der Status-Komponenten. ## AlertBadge vs. Badge diff --git a/apps/docs/src/content/04-components/status/alert-text/examples/default.tsx b/apps/docs/src/content/components/status/alert-text/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert-text/examples/default.tsx rename to apps/docs/src/content/components/status/alert-text/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/alert-text/examples/status.tsx b/apps/docs/src/content/components/status/alert-text/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert-text/examples/status.tsx rename to apps/docs/src/content/components/status/alert-text/examples/status.tsx diff --git a/apps/docs/src/content/04-components/status/alert-text/index.mdx b/apps/docs/src/content/components/status/alert-text/index.mdx similarity index 84% rename from apps/docs/src/content/04-components/status/alert-text/index.mdx rename to apps/docs/src/content/components/status/alert-text/index.mdx index 68bf68c01b..b63687e4d6 100644 --- a/apps/docs/src/content/04-components/status/alert-text/index.mdx +++ b/apps/docs/src/content/components/status/alert-text/index.mdx @@ -13,10 +13,10 @@ description: - Wähle den Schweregrad passend zur Bedeutung der Meldung. Welcher Status wofür steht, beschreibt das - [Informationskonzept](/02-foundations/03-content-guidelines/02-informationskonzept). + [Informationskonzept](/foundations/content-guidelines/informationskonzept). - Formuliere den Text klar, prägnant und lösungsorientiert. Verzichte auf Fachbegriffe und Schuldzuweisungen und beachte die - [Content Guidelines für Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen). + [Content Guidelines für Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen). --- diff --git a/apps/docs/src/content/04-components/status/alert/examples/default.tsx b/apps/docs/src/content/components/status/alert/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert/examples/default.tsx rename to apps/docs/src/content/components/status/alert/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/alert/examples/page.tsx b/apps/docs/src/content/components/status/alert/examples/page.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert/examples/page.tsx rename to apps/docs/src/content/components/status/alert/examples/page.tsx diff --git a/apps/docs/src/content/04-components/status/alert/examples/section.tsx b/apps/docs/src/content/components/status/alert/examples/section.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert/examples/section.tsx rename to apps/docs/src/content/components/status/alert/examples/section.tsx diff --git a/apps/docs/src/content/04-components/status/alert/examples/status.tsx b/apps/docs/src/content/components/status/alert/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert/examples/status.tsx rename to apps/docs/src/content/components/status/alert/examples/status.tsx diff --git a/apps/docs/src/content/04-components/status/alert/examples/with-content.tsx b/apps/docs/src/content/components/status/alert/examples/with-content.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/alert/examples/with-content.tsx rename to apps/docs/src/content/components/status/alert/examples/with-content.tsx diff --git a/apps/docs/src/content/04-components/status/alert/index.mdx b/apps/docs/src/content/components/status/alert/index.mdx similarity index 80% rename from apps/docs/src/content/04-components/status/alert/index.mdx rename to apps/docs/src/content/components/status/alert/index.mdx index c7204f4990..b59e0ab420 100644 --- a/apps/docs/src/content/04-components/status/alert/index.mdx +++ b/apps/docs/src/content/components/status/alert/index.mdx @@ -15,17 +15,16 @@ description: Für rein informative Hinweise reicht oft ein unauffälligeres Element. - Wähle den Schweregrad passend zur Bedeutung der Meldung. Welcher Status wofür steht, beschreibt das - [Informationskonzept](/02-foundations/03-content-guidelines/02-informationskonzept). + [Informationskonzept](/foundations/content-guidelines/informationskonzept). - Formuliere den Text klar, prägnant und lösungsorientiert. Verzichte auf Fachbegriffe und Schuldzuweisungen und beachte die - [Content Guidelines für Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen). + [Content Guidelines für Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen). - Biete nach Möglichkeit eine Handlungsmöglichkeit an. Zum Beispiel über einen - [Button](/04-components/actions/button) oder - [Link](/04-components/navigation/link). + [Button](/components/actions/button) oder [Link](/components/navigation/link). ## Alert vs. AccentBox -Alerts und [AccentBoxen](/04-components/structure/accent-box) dienen beide dazu, +Alerts und [AccentBoxen](/components/structure/accent-box) dienen beide dazu, dem User zusätzliche Informationen bereitzustellen. Eine einfache Faustregel hilft bei der Entscheidung: Kann die Information ignoriert werden, ohne negative Folgen? Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen @@ -56,9 +55,9 @@ werden. Über den Content beschreibst du zuerst die Ursache – was ist passiert und welche Folge ergibt sich – und anschließend, was der User tun kann. Wenn möglich, biete ihm eine Möglichkeit, sein Problem zu lösen, über einen -[Link](/04-components/navigation/link) oder einen -[Button](/04-components/actions/button). Eingefügte Buttons werden automatisch -in der Größe **Small** dargestellt, um ein ausgewogenes Gesamtbild zu +[Link](/components/navigation/link) oder einen +[Button](/components/actions/button). Eingefügte Buttons werden automatisch in +der Größe **Small** dargestellt, um ein ausgewogenes Gesamtbild zu gewährleisten. @@ -91,15 +90,14 @@ platziert werden. ## In einer Section Bezieht sich der Alert auf eine bestimmte -[Section](/04-components/structure/section), wird er in deren Content platziert. +[Section](/components/structure/section), wird er in deren Content platziert. ## Seitenweit Gilt sein Hinweis für die gesamte Seite, wird er prominent oberhalb der ersten -Section innerhalb der [LayoutCard](/04-components/structure/layout-card) -platziert. +Section innerhalb der [LayoutCard](/components/structure/layout-card) platziert. diff --git a/apps/docs/src/content/04-components/status/badge/examples/colors.tsx b/apps/docs/src/content/components/status/badge/examples/colors.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/colors.tsx rename to apps/docs/src/content/components/status/badge/examples/colors.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/dark.tsx b/apps/docs/src/content/components/status/badge/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/dark.tsx rename to apps/docs/src/content/components/status/badge/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/default.tsx b/apps/docs/src/content/components/status/badge/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/default.tsx rename to apps/docs/src/content/components/status/badge/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/disabled.tsx b/apps/docs/src/content/components/status/badge/examples/disabled.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/disabled.tsx rename to apps/docs/src/content/components/status/badge/examples/disabled.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/light.tsx b/apps/docs/src/content/components/status/badge/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/light.tsx rename to apps/docs/src/content/components/status/badge/examples/light.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/onClose.tsx b/apps/docs/src/content/components/status/badge/examples/onClose.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/onClose.tsx rename to apps/docs/src/content/components/status/badge/examples/onClose.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/onPress.tsx b/apps/docs/src/content/components/status/badge/examples/onPress.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/onPress.tsx rename to apps/docs/src/content/components/status/badge/examples/onPress.tsx diff --git a/apps/docs/src/content/04-components/status/badge/examples/scope.tsx b/apps/docs/src/content/components/status/badge/examples/scope.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/badge/examples/scope.tsx rename to apps/docs/src/content/components/status/badge/examples/scope.tsx diff --git a/apps/docs/src/content/04-components/status/badge/index.mdx b/apps/docs/src/content/components/status/badge/index.mdx similarity index 77% rename from apps/docs/src/content/04-components/status/badge/index.mdx rename to apps/docs/src/content/components/status/badge/index.mdx index f3ae304eed..5eaa8eb7a1 100644 --- a/apps/docs/src/content/04-components/status/badge/index.mdx +++ b/apps/docs/src/content/components/status/badge/index.mdx @@ -15,7 +15,7 @@ description: Wörter. - Verwende die Colors konsistent für gleiche Informationen. - Setze die Colors Blue, Green, Orange und Red mit Bedacht ein. Sie werden - leicht mit [AlertBadges](/04-components/status/alert-badge) oder Status-Colors + leicht mit [AlertBadges](/components/status/alert-badge) oder Status-Colors verwechselt. ## Badge vs. AlertBadge @@ -29,7 +29,7 @@ description: - der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist. - - weitere Informationen durch einen [Alert](/04-components/status/alert) notwendig sind. + - weitere Informationen durch einen [Alert](/components/status/alert) notwendig sind. @@ -38,14 +38,13 @@ description: # Color -Die [Color](/02-foundations/01-design/02-colors)-Varianten können frei gewählt -werden – achte dabei auf die beabsichtigte Wirkung. **Neutral** eignet sich zum -Beispiel für sekundäre Informationen, da das dezente Grau weniger Aufmerksamkeit -erzeugt. +Die [Color](/foundations/design/colors)-Varianten können frei gewählt werden – +achte dabei auf die beabsichtigte Wirkung. **Neutral** eignet sich zum Beispiel +für sekundäre Informationen, da das dezente Grau weniger Aufmerksamkeit erzeugt. Setze **Blue**, **Green**, **Orange** und **Red** mit Bedacht ein, da sie leicht -mit [AlertBadges](/04-components/status/alert-badge) oder Status-Colors -verwechselt werden. +mit [AlertBadges](/components/status/alert-badge) oder Status-Colors verwechselt +werden. @@ -54,7 +53,7 @@ verwechselt werden. Um auf farbigen oder dekorativen Hintergründen ausreichend Kontrast zu erreichen, kann das Badge auch in Light und Dark dargestellt werden. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). @@ -75,7 +74,7 @@ B. Priorität: hoch, Priorität: niedrig). Über `onPress` kann ein Badge eine Aktion auslösen, etwa um weiterführende Informationen zu öffnen. Es sollte dabei nicht als Ersatz für einen -[Button](/04-components/actions/button) missbraucht werden. +[Button](/components/actions/button) missbraucht werden. diff --git a/apps/docs/src/content/04-components/status/counter-badge/examples/default.tsx b/apps/docs/src/content/components/status/counter-badge/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/counter-badge/examples/default.tsx rename to apps/docs/src/content/components/status/counter-badge/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/counter-badge/examples/high-number.tsx b/apps/docs/src/content/components/status/counter-badge/examples/high-number.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/counter-badge/examples/high-number.tsx rename to apps/docs/src/content/components/status/counter-badge/examples/high-number.tsx diff --git a/apps/docs/src/content/04-components/status/counter-badge/examples/with-button.tsx b/apps/docs/src/content/components/status/counter-badge/examples/with-button.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/counter-badge/examples/with-button.tsx rename to apps/docs/src/content/components/status/counter-badge/examples/with-button.tsx diff --git a/apps/docs/src/content/04-components/status/counter-badge/examples/without-content.tsx b/apps/docs/src/content/components/status/counter-badge/examples/without-content.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/counter-badge/examples/without-content.tsx rename to apps/docs/src/content/components/status/counter-badge/examples/without-content.tsx diff --git a/apps/docs/src/content/04-components/status/counter-badge/index.mdx b/apps/docs/src/content/components/status/counter-badge/index.mdx similarity index 94% rename from apps/docs/src/content/04-components/status/counter-badge/index.mdx rename to apps/docs/src/content/components/status/counter-badge/index.mdx index 19308e59ae..326d599a3b 100644 --- a/apps/docs/src/content/04-components/status/counter-badge/index.mdx +++ b/apps/docs/src/content/components/status/counter-badge/index.mdx @@ -11,7 +11,7 @@ description: # Best Practices - Beziehe das CounterBadge eindeutig auf ein Element. Das kann zum Beispiel ein - [Button](/04-components/actions/button) oder Tab sein. + [Button](/components/actions/button) oder Tab sein. - Setze CounterBadges sparsam ein. Zu viele auf engem Raum überfordern den User. - Mach den Wert über das darunterliegende Element zugänglich. Das CounterBadge selbst ist nicht accessible; auf einem Button enthält daher ein `aria-label` diff --git a/apps/docs/src/content/04-components/status/loading-spinner/examples/dark.tsx b/apps/docs/src/content/components/status/loading-spinner/examples/dark.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/loading-spinner/examples/dark.tsx rename to apps/docs/src/content/components/status/loading-spinner/examples/dark.tsx diff --git a/apps/docs/src/content/04-components/status/loading-spinner/examples/default.tsx b/apps/docs/src/content/components/status/loading-spinner/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/loading-spinner/examples/default.tsx rename to apps/docs/src/content/components/status/loading-spinner/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/loading-spinner/examples/light.tsx b/apps/docs/src/content/components/status/loading-spinner/examples/light.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/loading-spinner/examples/light.tsx rename to apps/docs/src/content/components/status/loading-spinner/examples/light.tsx diff --git a/apps/docs/src/content/04-components/status/loading-spinner/index.mdx b/apps/docs/src/content/components/status/loading-spinner/index.mdx similarity index 77% rename from apps/docs/src/content/04-components/status/loading-spinner/index.mdx rename to apps/docs/src/content/components/status/loading-spinner/index.mdx index 3b97f18de7..75595c9e64 100644 --- a/apps/docs/src/content/04-components/status/loading-spinner/index.mdx +++ b/apps/docs/src/content/components/status/loading-spinner/index.mdx @@ -12,14 +12,14 @@ description: - Setze den LoadingSpinner nur bei unbestimmter Dauer ein. Bei konkret darstellbarem Fortschritt eignet sich eine - [ProgressBar](/04-components/status/progress-bar), bei kurzem initialem Laden - mit bekannter Layout-Struktur ein [Skeleton](/04-components/content/skeleton). + [ProgressBar](/components/status/progress-bar), bei kurzem initialem Laden mit + bekannter Layout-Struktur ein [Skeleton](/components/content/skeleton). - Setze ihn nur bei relevanter Ladezeit ein, als Faustregel ab etwa einer Sekunde. Bei sehr kurzen Ladezeiten bringt visuelles Feedback meist keinen Mehrwert. - Kombiniere ihn bei längeren Ladezeiten mit einer - [IllustratedMessage](/04-components/content/illustrated-message). So erhält - der User zusätzliche Informationen. + [IllustratedMessage](/components/content/illustrated-message). So erhält der + User zusätzliche Informationen. - Platziere ihn dort, wohin der User nach dem Laden schauen soll. - Zeige nicht zu viele Spinner gleichzeitig. Mehrere gleichzeitig wirken schnell unruhig. @@ -36,7 +36,7 @@ Benutzeroberfläche ablenkt. Auf farbigen oder dekorativen Hintergründen kann der LoadingSpinner in **Light** oder **Dark** dargestellt werden. Welche Color wann passt, beschreibt -[Color](/02-foundations/01-design/02-colors#light-und-dark-color). +[Color](/foundations/design/colors#light-und-dark-color). diff --git a/apps/docs/src/content/04-components/status/notification-provider/examples/auto-close.tsx b/apps/docs/src/content/components/status/notification-provider/examples/auto-close.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/notification-provider/examples/auto-close.tsx rename to apps/docs/src/content/components/status/notification-provider/examples/auto-close.tsx diff --git a/apps/docs/src/content/04-components/status/notification-provider/examples/closeById.tsx b/apps/docs/src/content/components/status/notification-provider/examples/closeById.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/notification-provider/examples/closeById.tsx rename to apps/docs/src/content/components/status/notification-provider/examples/closeById.tsx diff --git a/apps/docs/src/content/04-components/status/notification-provider/examples/default.tsx b/apps/docs/src/content/components/status/notification-provider/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/notification-provider/examples/default.tsx rename to apps/docs/src/content/components/status/notification-provider/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/notification-provider/examples/provider.tsx b/apps/docs/src/content/components/status/notification-provider/examples/provider.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/notification-provider/examples/provider.tsx rename to apps/docs/src/content/components/status/notification-provider/examples/provider.tsx diff --git a/apps/docs/src/content/04-components/status/notification-provider/index.mdx b/apps/docs/src/content/components/status/notification-provider/index.mdx similarity index 93% rename from apps/docs/src/content/04-components/status/notification-provider/index.mdx rename to apps/docs/src/content/components/status/notification-provider/index.mdx index ee9ffec329..fa6b7dc81f 100644 --- a/apps/docs/src/content/04-components/status/notification-provider/index.mdx +++ b/apps/docs/src/content/components/status/notification-provider/index.mdx @@ -12,7 +12,7 @@ description: - Überflute die User nicht mit zu vielen Notifications. - Für die angezeigten Notifications gelten die - [Best Practices der Notification](/04-components/status/notification). + [Best Practices der Notification](/components/status/notification). - Gib den Usern bei `autoClose` genug Zeit zum Lesen. Idealerweise ist die Anzeigedauer einstellbar. diff --git a/apps/docs/src/content/04-components/status/notification/examples/default.tsx b/apps/docs/src/content/components/status/notification/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/notification/examples/default.tsx rename to apps/docs/src/content/components/status/notification/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/notification/examples/status.tsx b/apps/docs/src/content/components/status/notification/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/notification/examples/status.tsx rename to apps/docs/src/content/components/status/notification/examples/status.tsx diff --git a/apps/docs/src/content/04-components/status/notification/index.mdx b/apps/docs/src/content/components/status/notification/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/status/notification/index.mdx rename to apps/docs/src/content/components/status/notification/index.mdx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/decimal.tsx b/apps/docs/src/content/components/status/progress-bar/examples/decimal.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/decimal.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/decimal.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/default.tsx b/apps/docs/src/content/components/status/progress-bar/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/default.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/default.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/maxValue.tsx b/apps/docs/src/content/components/status/progress-bar/examples/maxValue.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/maxValue.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/maxValue.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/segments.tsx b/apps/docs/src/content/components/status/progress-bar/examples/segments.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/segments.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/segments.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/size.tsx b/apps/docs/src/content/components/status/progress-bar/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/size.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/size.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/status.tsx b/apps/docs/src/content/components/status/progress-bar/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/status.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/status.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/examples/unit.tsx b/apps/docs/src/content/components/status/progress-bar/examples/unit.tsx similarity index 100% rename from apps/docs/src/content/04-components/status/progress-bar/examples/unit.tsx rename to apps/docs/src/content/components/status/progress-bar/examples/unit.tsx diff --git a/apps/docs/src/content/04-components/status/progress-bar/index.mdx b/apps/docs/src/content/components/status/progress-bar/index.mdx similarity index 97% rename from apps/docs/src/content/04-components/status/progress-bar/index.mdx rename to apps/docs/src/content/components/status/progress-bar/index.mdx index 3f930bb51d..be109f04bd 100644 --- a/apps/docs/src/content/04-components/status/progress-bar/index.mdx +++ b/apps/docs/src/content/components/status/progress-bar/index.mdx @@ -15,7 +15,7 @@ description: - Kombiniere die Status-Farben gezielt, um Zustände hervorzuheben. Wechsle etwa bei hoher Auslastung auf Warning oder Danger. - Nutze bei unbestimmtem Fortschritt eine Alternative wie den - [LoadingSpinner](/04-components/status/loading-spinner). + [LoadingSpinner](/components/status/loading-spinner). - Aktualisiere dauerhaft angezeigte ProgressBars regelmäßig. Das erhält die Verlässlichkeit, etwa bei der Speicherplatzauslastung. diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/backgroundImage.tsx b/apps/docs/src/content/components/structure/accent-box/examples/backgroundImage.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/backgroundImage.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/backgroundImage.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/baseColor.tsx b/apps/docs/src/content/components/structure/accent-box/examples/baseColor.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/baseColor.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/baseColor.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/brandColor.tsx b/apps/docs/src/content/components/structure/accent-box/examples/brandColor.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/brandColor.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/brandColor.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/customColor.tsx b/apps/docs/src/content/components/structure/accent-box/examples/customColor.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/customColor.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/customColor.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/default.tsx b/apps/docs/src/content/components/structure/accent-box/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/default.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/gradient.tsx b/apps/docs/src/content/components/structure/accent-box/examples/gradient.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/gradient.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/gradient.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/layoutCard.tsx b/apps/docs/src/content/components/structure/accent-box/examples/layoutCard.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/layoutCard.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/layoutCard.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/examples/link.tsx b/apps/docs/src/content/components/structure/accent-box/examples/link.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accent-box/examples/link.tsx rename to apps/docs/src/content/components/structure/accent-box/examples/link.tsx diff --git a/apps/docs/src/content/04-components/structure/accent-box/index.mdx b/apps/docs/src/content/components/structure/accent-box/index.mdx similarity index 75% rename from apps/docs/src/content/04-components/structure/accent-box/index.mdx rename to apps/docs/src/content/components/structure/accent-box/index.mdx index 6ea8e53316..255ca6ad84 100644 --- a/apps/docs/src/content/04-components/structure/accent-box/index.mdx +++ b/apps/docs/src/content/components/structure/accent-box/index.mdx @@ -13,19 +13,19 @@ description: - Setze die AccentBox sparsam ein, um gezielt Aufmerksamkeit zu lenken. - Platziere keine kritischen Inhalte in der AccentBox. Müssen Informationen zwingend wahrgenommen werden, nutze stattdessen einen - [Alert](/04-components/status/alert). + [Alert](/components/status/alert). - Sorge für ausreichenden Kontrast zum Inhalt. Das gilt besonders bei mit der - [Color](/04-components/content/color)-Component eingefärbten Texten; reicht - der Kontrast nicht, nutze die - [Light oder Dark Color](/02-foundations/01-design/02-colors#light-und-dark-color). + [Color](/components/content/color)-Component eingefärbten Texten; reicht der + Kontrast nicht, nutze die + [Light oder Dark Color](/foundations/design/colors#light-und-dark-color). ## AccentBox vs. Alert -AccentBoxen und [Alerts](/04-components/status/alert) dienen beide dazu, dem -User zusätzliche Informationen bereitzustellen. Eine einfache Faustregel hilft -bei der Entscheidung: Kann die Information ignoriert werden, ohne negative -Folgen? Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen -zu Problemen führen könnte – etwa bei sicherheitsrelevanten Hinweisen oder +AccentBoxen und [Alerts](/components/status/alert) dienen beide dazu, dem User +zusätzliche Informationen bereitzustellen. Eine einfache Faustregel hilft bei +der Entscheidung: Kann die Information ignoriert werden, ohne negative Folgen? +Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen zu +Problemen führen könnte – etwa bei sicherheitsrelevanten Hinweisen oder wichtigen Systemmeldungen – sollte ein Alert mit entsprechendem Status verwendet werden. @@ -95,16 +95,16 @@ festes Seitenverhältnis definiert werden. ## Link -Die AccentBox kann in einen [Link](/04-components/navigation/link) gewrappt -werden, um die gesamte Component klickbar zu machen. +Die AccentBox kann in einen [Link](/components/navigation/link) gewrappt werden, +um die gesamte Component klickbar zu machen. ## LayoutCard Befindet sich eine AccentBox als erstes Element innerhalb einer -[LayoutCard](/04-components/structure/layout-card), füllt sie die gesamte Größe -der LayoutCard aus. +[LayoutCard](/components/structure/layout-card), füllt sie die gesamte Größe der +LayoutCard aus. diff --git a/apps/docs/src/content/04-components/structure/accordion/examples/default-expanded.tsx b/apps/docs/src/content/components/structure/accordion/examples/default-expanded.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accordion/examples/default-expanded.tsx rename to apps/docs/src/content/components/structure/accordion/examples/default-expanded.tsx diff --git a/apps/docs/src/content/04-components/structure/accordion/examples/default.tsx b/apps/docs/src/content/components/structure/accordion/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accordion/examples/default.tsx rename to apps/docs/src/content/components/structure/accordion/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/accordion/examples/label.tsx b/apps/docs/src/content/components/structure/accordion/examples/label.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accordion/examples/label.tsx rename to apps/docs/src/content/components/structure/accordion/examples/label.tsx diff --git a/apps/docs/src/content/04-components/structure/accordion/examples/outline.tsx b/apps/docs/src/content/components/structure/accordion/examples/outline.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/accordion/examples/outline.tsx rename to apps/docs/src/content/components/structure/accordion/examples/outline.tsx diff --git a/apps/docs/src/content/04-components/structure/accordion/index.mdx b/apps/docs/src/content/components/structure/accordion/index.mdx similarity index 74% rename from apps/docs/src/content/04-components/structure/accordion/index.mdx rename to apps/docs/src/content/components/structure/accordion/index.mdx index 4bd9811029..085f859cac 100644 --- a/apps/docs/src/content/04-components/structure/accordion/index.mdx +++ b/apps/docs/src/content/components/structure/accordion/index.mdx @@ -37,10 +37,10 @@ Seite standardmäßig geöffnet dargestellt. # Mit Label -Statt einer [Heading](/04-components/content/heading) kann auch ein -[Label](/04-components/content/label) verwendet werden. Ein Label eignet sich, -wenn der Inhalt ergänzend oder sekundär ist und nicht im Fokus der Seite steht – -zum Beispiel bei Filtern, Formularfeldern oder optionalen Einstellungen. +Statt einer [Heading](/components/content/heading) kann auch ein +[Label](/components/content/label) verwendet werden. Ein Label eignet sich, wenn +der Inhalt ergänzend oder sekundär ist und nicht im Fokus der Seite steht – zum +Beispiel bei Filtern, Formularfeldern oder optionalen Einstellungen. diff --git a/apps/docs/src/content/04-components/structure/align/examples/default.tsx b/apps/docs/src/content/components/structure/align/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/align/examples/default.tsx rename to apps/docs/src/content/components/structure/align/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/align/index.mdx b/apps/docs/src/content/components/structure/align/index.mdx similarity index 59% rename from apps/docs/src/content/04-components/structure/align/index.mdx rename to apps/docs/src/content/components/structure/align/index.mdx index 449c016a9d..ed0e64ad5c 100644 --- a/apps/docs/src/content/04-components/structure/align/index.mdx +++ b/apps/docs/src/content/components/structure/align/index.mdx @@ -3,8 +3,8 @@ component: Align description: Align ordnet bekannte Kombinationen von Components korrekt zueinander an. deprecationNotice: - Align wurde in [Combine](/04-components/structure/combine) umbenannt und wird - in einer zukünftigen Major-Version entfernt. + Align wurde in [Combine](/components/structure/combine) umbenannt und wird in + einer zukünftigen Major-Version entfernt. --- @@ -13,14 +13,13 @@ deprecationNotice: # Best Practices -- Ersetze `` durch [Combine](/04-components/structure/combine). - Funktional ändert sich nichts, der neue Name beschreibt die Component - treffender. +- Ersetze `` durch [Combine](/components/structure/combine). Funktional + ändert sich nichts, der neue Name beschreibt die Component treffender. - Nutze für die Migration den Codemod aus der [MIGRATION.md](https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md). - Align gibt zur Laufzeit eine Deprecation-Warnung aus und wird in einer zukünftigen Major-Version entfernt. Bis dahin bleibt der alte Pfad abgesichert - (siehe [Versionierung & Stabilität](/01-get-started/versioning)). + (siehe [Versionierung & Stabilität](/get-started/versioning)). --- diff --git a/apps/docs/src/content/04-components/structure/column-layout/examples/columns.tsx b/apps/docs/src/content/components/structure/column-layout/examples/columns.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/column-layout/examples/columns.tsx rename to apps/docs/src/content/components/structure/column-layout/examples/columns.tsx diff --git a/apps/docs/src/content/04-components/structure/column-layout/examples/default.tsx b/apps/docs/src/content/components/structure/column-layout/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/column-layout/examples/default.tsx rename to apps/docs/src/content/components/structure/column-layout/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/column-layout/examples/gaps.tsx b/apps/docs/src/content/components/structure/column-layout/examples/gaps.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/column-layout/examples/gaps.tsx rename to apps/docs/src/content/components/structure/column-layout/examples/gaps.tsx diff --git a/apps/docs/src/content/04-components/structure/column-layout/examples/hidden-columns.tsx b/apps/docs/src/content/components/structure/column-layout/examples/hidden-columns.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/column-layout/examples/hidden-columns.tsx rename to apps/docs/src/content/components/structure/column-layout/examples/hidden-columns.tsx diff --git a/apps/docs/src/content/04-components/structure/column-layout/index.mdx b/apps/docs/src/content/components/structure/column-layout/index.mdx similarity index 95% rename from apps/docs/src/content/04-components/structure/column-layout/index.mdx rename to apps/docs/src/content/components/structure/column-layout/index.mdx index d2cd8930c5..68b09ea71d 100644 --- a/apps/docs/src/content/04-components/structure/column-layout/index.mdx +++ b/apps/docs/src/content/components/structure/column-layout/index.mdx @@ -14,8 +14,7 @@ description: - Wähle die Spaltenbreiten bewusst. Einheitliche Breiten wirken harmonisch, unterschiedliche lenken den Fokus auf breitere Inhalte. - Kombiniere das ColumnLayout bei Bedarf mit einer - [Section](/04-components/structure/section). Das schafft übersichtliche - Layouts. + [Section](/components/structure/section). Das schafft übersichtliche Layouts. - Verschachtele mehrere ColumnLayouts, um Inhalte optisch zu gruppieren. Jedes verschachtelte ColumnLayout bildet einen eigenen Container und bricht bei seiner eigenen Breite um, nicht bei der des äußeren. diff --git a/apps/docs/src/content/04-components/structure/combine/examples/default.tsx b/apps/docs/src/content/components/structure/combine/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/combine/examples/default.tsx rename to apps/docs/src/content/components/structure/combine/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/combine/examples/icon-text.tsx b/apps/docs/src/content/components/structure/combine/examples/icon-text.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/combine/examples/icon-text.tsx rename to apps/docs/src/content/components/structure/combine/examples/icon-text.tsx diff --git a/apps/docs/src/content/04-components/structure/combine/examples/input-button.tsx b/apps/docs/src/content/components/structure/combine/examples/input-button.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/combine/examples/input-button.tsx rename to apps/docs/src/content/components/structure/combine/examples/input-button.tsx diff --git a/apps/docs/src/content/04-components/structure/combine/examples/text-contextual-help.tsx b/apps/docs/src/content/components/structure/combine/examples/text-contextual-help.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/combine/examples/text-contextual-help.tsx rename to apps/docs/src/content/components/structure/combine/examples/text-contextual-help.tsx diff --git a/apps/docs/src/content/04-components/structure/combine/examples/text-copy-button.tsx b/apps/docs/src/content/components/structure/combine/examples/text-copy-button.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/combine/examples/text-copy-button.tsx rename to apps/docs/src/content/components/structure/combine/examples/text-copy-button.tsx diff --git a/apps/docs/src/content/04-components/structure/combine/index.mdx b/apps/docs/src/content/components/structure/combine/index.mdx similarity index 72% rename from apps/docs/src/content/04-components/structure/combine/index.mdx rename to apps/docs/src/content/components/structure/combine/index.mdx index 30d95425f6..ae233773f8 100644 --- a/apps/docs/src/content/04-components/structure/combine/index.mdx +++ b/apps/docs/src/content/components/structure/combine/index.mdx @@ -13,13 +13,13 @@ description: - Verwende nur die unterstützten Kombinationen. Andere Kombinationen erzeugen keine Anordnung. - Nutze Combine nicht als generisches Layout-Tool. Für eine freie Anordnung ist - [Flex](/04-components/structure/flex) vorgesehen, für Spalten das - [ColumnLayout](/04-components/structure/column-layout). + [Flex](/components/structure/flex) vorgesehen, für Spalten das + [ColumnLayout](/components/structure/column-layout). - Nutze neben der Anordnung auch visuelle Anpassungen wie das Setzen von Colors. ## Combine vs. Flex -Combine ist das fertige Pattern, [Flex](/04-components/structure/flex) das freie +Combine ist das fertige Pattern, [Flex](/components/structure/flex) das freie Werkzeug. Prüfe deshalb zuerst, ob die gewünschte Anordnung schon als Kombination existiert – dann bleibt sie auch bei geändertem Inhalt und über alle Breakpoints korrekt. @@ -42,15 +42,14 @@ Breakpoints korrekt. # Kombinationen -Neben [Avatar](/04-components/content/avatar) + -[Text](/04-components/content/text) unterstützt Combine die folgenden -Kombinationen. +Neben [Avatar](/components/content/avatar) + [Text](/components/content/text) +unterstützt Combine die folgenden Kombinationen. ## Input + Button -Der [Button](/04-components/actions/button) sitzt auf der Höhe des Eingabefelds -– unabhängig davon, ob das Feld ein [Label](/04-components/content/label) oder -eine FieldDescription hat. +Der [Button](/components/actions/button) sitzt auf der Höhe des Eingabefelds – +unabhängig davon, ob das Feld ein [Label](/components/content/label) oder eine +FieldDescription hat. diff --git a/apps/docs/src/content/04-components/structure/flex/examples/default.tsx b/apps/docs/src/content/components/structure/flex/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/flex/examples/default.tsx rename to apps/docs/src/content/components/structure/flex/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/flex/examples/layoutCard.tsx b/apps/docs/src/content/components/structure/flex/examples/layoutCard.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/flex/examples/layoutCard.tsx rename to apps/docs/src/content/components/structure/flex/examples/layoutCard.tsx diff --git a/apps/docs/src/content/04-components/structure/flex/examples/listItem.tsx b/apps/docs/src/content/components/structure/flex/examples/listItem.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/flex/examples/listItem.tsx rename to apps/docs/src/content/components/structure/flex/examples/listItem.tsx diff --git a/apps/docs/src/content/04-components/structure/flex/index.mdx b/apps/docs/src/content/components/structure/flex/index.mdx similarity index 71% rename from apps/docs/src/content/04-components/structure/flex/index.mdx rename to apps/docs/src/content/components/structure/flex/index.mdx index 30f8f7157c..3f25c46595 100644 --- a/apps/docs/src/content/04-components/structure/flex/index.mdx +++ b/apps/docs/src/content/components/structure/flex/index.mdx @@ -12,7 +12,7 @@ description: Interaktionen führen. Nutze Flex daher nur für gezielte, kleine Layout-Anpassungen und überlege sorgfältig, ob der Einsatz wirklich notwendig ist. Für wiederkehrende Kombinationen ist - [Combine](/04-components/structure/combine) zuständig. + [Combine](/components/structure/combine) zuständig. @@ -23,17 +23,17 @@ description: # Best Practices - Nutze Flex nicht für Layouts, die sich mit - [Combine](/04-components/structure/combine) und einem festen UI-Pattern - umsetzen lassen. + [Combine](/components/structure/combine) und einem festen UI-Pattern umsetzen + lassen. - Setze Flex gezielt für Sonderfälle ein. Für die meisten Fälle bietet das Designsystem bereits eine passende Lösung. - Nutze für ein Layout über mehrere Spalten das - [ColumnLayout](/04-components/structure/column-layout). Es bricht je - Breakpoint automatisch um. + [ColumnLayout](/components/structure/column-layout). Es bricht je Breakpoint + automatisch um. ## Flex vs. Combine -Flex ist das freie Werkzeug, [Combine](/04-components/structure/combine) das +Flex ist das freie Werkzeug, [Combine](/components/structure/combine) das fertige Pattern. Prüfe deshalb zuerst, ob die gewünschte Anordnung schon als Kombination existiert – dann bleibt sie auch bei geändertem Inhalt und über alle Breakpoints korrekt. @@ -58,16 +58,16 @@ Breakpoints korrekt. ## List -Innerhalb einer [List](/04-components/structure/list) platzierst du mit -`` den Content eines ListItems gezielt – in diesem Beispiel den zweiten -Text in der rechten unteren Ecke. +Innerhalb einer [List](/components/structure/list) platzierst du mit `` +den Content eines ListItems gezielt – in diesem Beispiel den zweiten Text in der +rechten unteren Ecke. ## LayoutCard -Innerhalb einer [LayoutCard](/04-components/structure/layout-card) ordnest du -mit `` einzelne Elemente gezielt an – hier den Button am unteren Rand. +Innerhalb einer [LayoutCard](/components/structure/layout-card) ordnest du mit +`` einzelne Elemente gezielt an – hier den Button am unteren Rand. diff --git a/apps/docs/src/content/04-components/structure/layout-card/examples/default.tsx b/apps/docs/src/content/components/structure/layout-card/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/layout-card/examples/default.tsx rename to apps/docs/src/content/components/structure/layout-card/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/layout-card/examples/tab-navigation.tsx b/apps/docs/src/content/components/structure/layout-card/examples/tab-navigation.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/layout-card/examples/tab-navigation.tsx rename to apps/docs/src/content/components/structure/layout-card/examples/tab-navigation.tsx diff --git a/apps/docs/src/content/04-components/structure/layout-card/index.mdx b/apps/docs/src/content/components/structure/layout-card/index.mdx similarity index 67% rename from apps/docs/src/content/04-components/structure/layout-card/index.mdx rename to apps/docs/src/content/components/structure/layout-card/index.mdx index 471597ffa6..ed62a1659d 100644 --- a/apps/docs/src/content/04-components/structure/layout-card/index.mdx +++ b/apps/docs/src/content/components/structure/layout-card/index.mdx @@ -12,11 +12,11 @@ description: # Best Practices - Strukturiere den Content sinnvoll, zum Beispiel mit - [Section](/04-components/structure/section) und - [ColumnLayout](/04-components/structure/column-layout). + [Section](/components/structure/section) und + [ColumnLayout](/components/structure/column-layout). - Kombiniere die LayoutCard bei Bedarf mit einer - [AccentBox](/04-components/structure/accent-box). So hebst du Inhalte - besonders hervor. + [AccentBox](/components/structure/accent-box). So hebst du Inhalte besonders + hervor. --- @@ -24,7 +24,7 @@ description: ## TabNavigation -Platziere die [TabNavigation](/04-components/navigation/tab-navigation) in einer +Platziere die [TabNavigation](/components/navigation/tab-navigation) in einer LayoutCard, um zwischen den Unterseiten zu navigieren. Der Inhalt der aktiven Seite wird darunter in derselben LayoutCard dargestellt. diff --git a/apps/docs/src/content/04-components/structure/list/examples/actionGroup.tsx b/apps/docs/src/content/components/structure/list/examples/actionGroup.tsx similarity index 92% rename from apps/docs/src/content/04-components/structure/list/examples/actionGroup.tsx rename to apps/docs/src/content/components/structure/list/examples/actionGroup.tsx index 14571e5fe0..19d82e5581 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/actionGroup.tsx +++ b/apps/docs/src/content/components/structure/list/examples/actionGroup.tsx @@ -10,7 +10,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/customEmptyView.tsx b/apps/docs/src/content/components/structure/list/examples/customEmptyView.tsx similarity index 86% rename from apps/docs/src/content/04-components/structure/list/examples/customEmptyView.tsx rename to apps/docs/src/content/components/structure/list/examples/customEmptyView.tsx index 98f25ff013..240fa6b62b 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/customEmptyView.tsx +++ b/apps/docs/src/content/components/structure/list/examples/customEmptyView.tsx @@ -5,7 +5,7 @@ import { Text, typedList, } from "@mittwald/flow-react-components"; -import { type Domain } from "@/content/04-components/structure/list/examples/domainApi"; +import { type Domain } from "@/content/components/structure/list/examples/domainApi"; export default () => { const List = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/default.tsx b/apps/docs/src/content/components/structure/list/examples/default.tsx similarity index 97% rename from apps/docs/src/content/04-components/structure/list/examples/default.tsx rename to apps/docs/src/content/components/structure/list/examples/default.tsx index de97b65f6e..0230144bd3 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/default.tsx +++ b/apps/docs/src/content/components/structure/list/examples/default.tsx @@ -14,7 +14,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/domainApi.ts b/apps/docs/src/content/components/structure/list/examples/domainApi.ts similarity index 100% rename from apps/docs/src/content/04-components/structure/list/examples/domainApi.ts rename to apps/docs/src/content/components/structure/list/examples/domainApi.ts diff --git a/apps/docs/src/content/04-components/structure/list/examples/filter.tsx b/apps/docs/src/content/components/structure/list/examples/filter.tsx similarity index 97% rename from apps/docs/src/content/04-components/structure/list/examples/filter.tsx rename to apps/docs/src/content/components/structure/list/examples/filter.tsx index e7a5990306..331f8958a9 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/filter.tsx +++ b/apps/docs/src/content/components/structure/list/examples/filter.tsx @@ -14,7 +14,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/filterDateRange.tsx b/apps/docs/src/content/components/structure/list/examples/filterDateRange.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/list/examples/filterDateRange.tsx rename to apps/docs/src/content/components/structure/list/examples/filterDateRange.tsx diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-accordion.tsx b/apps/docs/src/content/components/structure/list/examples/item-accordion.tsx similarity index 92% rename from apps/docs/src/content/04-components/structure/list/examples/item-accordion.tsx rename to apps/docs/src/content/components/structure/list/examples/item-accordion.tsx index 9b2dca00f7..ff557f8bb5 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/item-accordion.tsx +++ b/apps/docs/src/content/components/structure/list/examples/item-accordion.tsx @@ -10,7 +10,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const List = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-action-group.tsx b/apps/docs/src/content/components/structure/list/examples/item-action-group.tsx similarity index 94% rename from apps/docs/src/content/04-components/structure/list/examples/item-action-group.tsx rename to apps/docs/src/content/components/structure/list/examples/item-action-group.tsx index 3bee854975..27806e0b63 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/item-action-group.tsx +++ b/apps/docs/src/content/components/structure/list/examples/item-action-group.tsx @@ -12,7 +12,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const List = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-checkbox.tsx b/apps/docs/src/content/components/structure/list/examples/item-checkbox.tsx similarity index 97% rename from apps/docs/src/content/04-components/structure/list/examples/item-checkbox.tsx rename to apps/docs/src/content/components/structure/list/examples/item-checkbox.tsx index e18fadbadb..809d5ffe0e 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/item-checkbox.tsx +++ b/apps/docs/src/content/components/structure/list/examples/item-checkbox.tsx @@ -9,7 +9,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; import { useState } from "react"; export default () => { diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-column-layout-hidden.tsx b/apps/docs/src/content/components/structure/list/examples/item-column-layout-hidden.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/list/examples/item-column-layout-hidden.tsx rename to apps/docs/src/content/components/structure/list/examples/item-column-layout-hidden.tsx diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-column-layout.tsx b/apps/docs/src/content/components/structure/list/examples/item-column-layout.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/list/examples/item-column-layout.tsx rename to apps/docs/src/content/components/structure/list/examples/item-column-layout.tsx diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-content.tsx b/apps/docs/src/content/components/structure/list/examples/item-content.tsx similarity index 93% rename from apps/docs/src/content/04-components/structure/list/examples/item-content.tsx rename to apps/docs/src/content/components/structure/list/examples/item-content.tsx index 918d24d393..86b7ba63f7 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/item-content.tsx +++ b/apps/docs/src/content/components/structure/list/examples/item-content.tsx @@ -10,7 +10,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const List = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/item-link.tsx b/apps/docs/src/content/components/structure/list/examples/item-link.tsx similarity index 92% rename from apps/docs/src/content/04-components/structure/list/examples/item-link.tsx rename to apps/docs/src/content/components/structure/list/examples/item-link.tsx index 4a4b4e14fb..5081e85468 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/item-link.tsx +++ b/apps/docs/src/content/components/structure/list/examples/item-link.tsx @@ -9,7 +9,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const List = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/loadingView.tsx b/apps/docs/src/content/components/structure/list/examples/loadingView.tsx similarity index 95% rename from apps/docs/src/content/04-components/structure/list/examples/loadingView.tsx rename to apps/docs/src/content/components/structure/list/examples/loadingView.tsx index 68cb3e55bc..ca7347bf1c 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/loadingView.tsx +++ b/apps/docs/src/content/components/structure/list/examples/loadingView.tsx @@ -10,7 +10,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const List = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/mobile.tsx b/apps/docs/src/content/components/structure/list/examples/mobile.tsx similarity index 97% rename from apps/docs/src/content/04-components/structure/list/examples/mobile.tsx rename to apps/docs/src/content/components/structure/list/examples/mobile.tsx index cf95578a1b..81dad38455 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/mobile.tsx +++ b/apps/docs/src/content/components/structure/list/examples/mobile.tsx @@ -15,7 +15,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/mode-list.tsx b/apps/docs/src/content/components/structure/list/examples/mode-list.tsx similarity index 95% rename from apps/docs/src/content/04-components/structure/list/examples/mode-list.tsx rename to apps/docs/src/content/components/structure/list/examples/mode-list.tsx index bae52bc36c..ef3aab1adf 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/mode-list.tsx +++ b/apps/docs/src/content/components/structure/list/examples/mode-list.tsx @@ -12,7 +12,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/mode-table.tsx b/apps/docs/src/content/components/structure/list/examples/mode-table.tsx similarity index 95% rename from apps/docs/src/content/04-components/structure/list/examples/mode-table.tsx rename to apps/docs/src/content/components/structure/list/examples/mode-table.tsx index 4856c9c338..cd48502f07 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/mode-table.tsx +++ b/apps/docs/src/content/components/structure/list/examples/mode-table.tsx @@ -2,7 +2,7 @@ import { typedList } from "@mittwald/flow-react-components"; import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/mode-tile.tsx b/apps/docs/src/content/components/structure/list/examples/mode-tile.tsx similarity index 95% rename from apps/docs/src/content/04-components/structure/list/examples/mode-tile.tsx rename to apps/docs/src/content/components/structure/list/examples/mode-tile.tsx index 8a33ad9374..76b0c5e75d 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/mode-tile.tsx +++ b/apps/docs/src/content/components/structure/list/examples/mode-tile.tsx @@ -12,7 +12,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/namingDo.tsx b/apps/docs/src/content/components/structure/list/examples/namingDo.tsx similarity index 96% rename from apps/docs/src/content/04-components/structure/list/examples/namingDo.tsx rename to apps/docs/src/content/components/structure/list/examples/namingDo.tsx index 9ba2bbd9c7..8a74b7d0f3 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/namingDo.tsx +++ b/apps/docs/src/content/components/structure/list/examples/namingDo.tsx @@ -12,7 +12,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/namingDont.tsx b/apps/docs/src/content/components/structure/list/examples/namingDont.tsx similarity index 97% rename from apps/docs/src/content/04-components/structure/list/examples/namingDont.tsx rename to apps/docs/src/content/components/structure/list/examples/namingDont.tsx index 92d43909d4..bcf155fc87 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/namingDont.tsx +++ b/apps/docs/src/content/components/structure/list/examples/namingDont.tsx @@ -12,7 +12,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/sortingDo.tsx b/apps/docs/src/content/components/structure/list/examples/sortingDo.tsx similarity index 96% rename from apps/docs/src/content/04-components/structure/list/examples/sortingDo.tsx rename to apps/docs/src/content/components/structure/list/examples/sortingDo.tsx index 0e0d3b2fa5..8fab251bbd 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/sortingDo.tsx +++ b/apps/docs/src/content/components/structure/list/examples/sortingDo.tsx @@ -1,7 +1,7 @@ import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; import { AlertBadge, Avatar, diff --git a/apps/docs/src/content/04-components/structure/list/examples/sortingDont.tsx b/apps/docs/src/content/components/structure/list/examples/sortingDont.tsx similarity index 95% rename from apps/docs/src/content/04-components/structure/list/examples/sortingDont.tsx rename to apps/docs/src/content/components/structure/list/examples/sortingDont.tsx index 8f9b1dd5c3..37b643a9e1 100644 --- a/apps/docs/src/content/04-components/structure/list/examples/sortingDont.tsx +++ b/apps/docs/src/content/components/structure/list/examples/sortingDont.tsx @@ -12,7 +12,7 @@ import { import { type Domain, domains, -} from "@/content/04-components/structure/list/examples/domainApi"; +} from "@/content/components/structure/list/examples/domainApi"; export default () => { const DomainList = typedList(); diff --git a/apps/docs/src/content/04-components/structure/list/examples/summary.tsx b/apps/docs/src/content/components/structure/list/examples/summary.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/list/examples/summary.tsx rename to apps/docs/src/content/components/structure/list/examples/summary.tsx diff --git a/apps/docs/src/content/04-components/structure/list/index.mdx b/apps/docs/src/content/components/structure/list/index.mdx similarity index 89% rename from apps/docs/src/content/04-components/structure/list/index.mdx rename to apps/docs/src/content/components/structure/list/index.mdx index 507243897b..6b6c87d6e4 100644 --- a/apps/docs/src/content/04-components/structure/list/index.mdx +++ b/apps/docs/src/content/components/structure/list/index.mdx @@ -21,10 +21,10 @@ description: - Platziere weiteren Seiteninhalt oberhalb der List. So verursacht das Nachladen über den „Mehr anzeigen“-Button keine Layout-Verschiebungen; die List nimmt die volle Breite des Contents einer - [LayoutCard](/04-components/structure/layout-card) ein. + [LayoutCard](/components/structure/layout-card) ein. - Beschreibe die List zugänglich. Ist sie der einzige Hauptinhalt einer Seite, erhält sie ein `aria-label`; hat sie eine eigene - [Heading](/04-components/content/heading), wird diese über `aria-labelledby` + [Heading](/components/content/heading), wird diese über `aria-labelledby` zugeordnet. --- @@ -58,8 +58,8 @@ die maximale Breite der Kacheln. Ideal für Daten, die schnell erfassbar sein müssen, während die optische Gestaltung zweitrangig ist. Nutze ``, um die List als -[Table](/04-components/structure/table) darzustellen – dabei gelten die -Guidelines der Table. +[Table](/components/structure/table) darzustellen – dabei gelten die Guidelines +der Table. @@ -71,9 +71,9 @@ Ein ListItem repräsentiert ein spezifisches Element einer Kategorie (z. B. eine Domain, E-Mail-Adresse oder ein Projekt) und zeigt nur die Informationen, die zum Verständnis nötig sind. In der Listenansicht besteht es typischerweise aus: -- **Avatar:** Der [Avatar](/04-components/content/avatar) steht am Anfang. Ein - [Icon](/04-components/content/icon) spiegelt die Kategorie wider (z. B. ein - Domain-Icon); ein hochgeladenes [Image](/04-components/content/image) wird +- **Avatar:** Der [Avatar](/components/content/avatar) steht am Anfang. Ein + [Icon](/components/content/icon) spiegelt die Kategorie wider (z. B. ein + Domain-Icon); ein hochgeladenes [Image](/components/content/image) wird angezeigt, andernfalls erscheinen Initialen. - **Titel und Untertitel:** Der Titel gibt den Namen wieder, der Untertitel ergänzt weitere Informationen nach dem Muster „Beschreibung – 1. Information @@ -81,8 +81,8 @@ zum Verständnis nötig sind. In der Listenansicht besteht es typischerweise aus - **Content Slots:** Zusätzliche Bereiche (Top und Bottom Content), die flexibel befüllt werden können. - **Aktionen:** Interaktionen erfolgen über ein - [ContextMenu](/04-components/actions/context-menu) oder direkt als - [Buttons](/04-components/actions/button) im ListItem. + [ContextMenu](/components/actions/context-menu) oder direkt als + [Buttons](/components/actions/button) im ListItem. In der Rasteransicht ist die Darstellung kompakter: Der Avatar wird größer und eckig, Top Content sowie die Accordion-Funktion entfallen. @@ -103,7 +103,7 @@ wird in `` platziert. ## Mit Checkboxen -[Checkboxen](/04-components/form-controls/checkbox) in einem ListItem werden +[Checkboxen](/components/form-controls/checkbox) in einem ListItem werden automatisch am Anfang der Zeile angeordnet. Ihre Funktionalität wird nicht von der List gesteuert und muss individuell implementiert werden. Achte darauf, dass die gesamte Zeile zur Auswahl genutzt werden kann – nutze dafür `onAction` der @@ -121,8 +121,8 @@ platziert werden. Die Position wird über das `slot`-Property gesteuert. ## Mit ColumnLayout Dem ListItem können die -[ColumnLayout](/04-components/structure/column-layout)-Properties `s`, `m` und -`l` mitgegeben werden, um Seitenverhältnis und Umbruchverhalten von Header und +[ColumnLayout](/components/structure/column-layout)-Properties `s`, `m` und `l` +mitgegeben werden, um Seitenverhältnis und Umbruchverhalten von Header und Content zu steuern. @@ -136,7 +136,7 @@ die entsprechenden Content Slots nicht angezeigt. ## Mit ActionGroup Verwende eine ActionGroup innerhalb des ``, um -[Buttons](/04-components/actions/button) im ListItem zu platzieren. +[Buttons](/components/actions/button) im ListItem zu platzieren. @@ -179,15 +179,14 @@ sind. # Filter Ein Klick auf den Filter-Button öffnet ein -[ContextMenu](/04-components/actions/context-menu), in dem Filter aktiviert oder +[ContextMenu](/components/actions/context-menu), in dem Filter aktiviert oder deaktiviert werden können. - Standardmäßig erlaubt ein Filter die **Mehrfachauswahl**, damit User nach mehreren Kriterien filtern können; die Optionen erscheinen dann als - [Checkbox](/04-components/form-controls/checkbox). Bei **Einzelauswahl** - werden sie als [RadioGroup](/04-components/form-controls/radio-group) - dargestellt. -- Jeder **aktive Filter** wird durch eine [Badge](/04-components/status/badge) + [Checkbox](/components/form-controls/checkbox). Bei **Einzelauswahl** werden + sie als [RadioGroup](/components/form-controls/radio-group) dargestellt. +- Jeder **aktive Filter** wird durch eine [Badge](/components/status/badge) visualisiert, die per Klick entfernt werden kann. Sind mindestens zwei Filter aktiv, erscheint zusätzlich ein „Filter zurücksetzen“-Button. - Mehrere Filter **derselben Kategorie** (z. B. Status, Art, Größe) werden in @@ -241,11 +240,11 @@ Enddatum eingrenzen. # Suche Verwende `` innerhalb der List, um ein -[SearchField](/04-components/form-controls/search-field) anzuzeigen. -Standardmäßig startet die Suche automatisch; soll sie erst auf Enter auslösen, -setze `autoSubmit` auf `false`. Öffnet sich die List in einem -[Modal](/04-components/overlays/modal), fokussiere das Suchfeld über -`autoFocus`, damit der User direkt tippen kann. +[SearchField](/components/form-controls/search-field) anzuzeigen. Standardmäßig +startet die Suche automatisch; soll sie erst auf Enter auslösen, setze +`autoSubmit` auf `false`. Öffnet sich die List in einem +[Modal](/components/overlays/modal), fokussiere das Suchfeld über `autoFocus`, +damit der User direkt tippen kann. --- @@ -289,8 +288,8 @@ verwendet. Über das `loadingView`-Property eines `` – oder eines `` in der Tabellenansicht – lässt sich diese Ansicht anpassen. Sie gilt in allen Ansichten (List, Tiles, Table) und auch für einzelne Items, die nach dem initialen Laden noch suspenden – etwa weil ihr Inhalt eigene Daten -nachlädt. Gestalte sie mit [Skeleton](/04-components/content/skeleton) und -[SkeletonText](/04-components/content/skeleton-text) so, dass sie dem Inhalt in +nachlädt. Gestalte sie mit [Skeleton](/components/content/skeleton) und +[SkeletonText](/components/content/skeleton-text) so, dass sie dem Inhalt in Aufbau und Größe nahekommt, damit der Übergang ohne Layout-Sprung wirkt. @@ -299,8 +298,8 @@ Aufbau und Größe nahekommt, damit der Übergang ohne Layout-Sprung wirkt. Über `emptyView` zeigst du eine eigene Ansicht an, wenn die List keine Einträge enthält – in der Regel eine -[IllustratedMessage](/04-components/content/illustrated-message), die den User -über einen [Button](/04-components/actions/button) einlädt, das erste Element zu +[IllustratedMessage](/components/content/illustrated-message), die den User über +einen [Button](/components/actions/button) einlädt, das erste Element zu erstellen. Liefert eine Suche oder ein Filter kein Ergebnis, zeigt `emptySearchResultView` einen entsprechenden Hinweis. Ist das jeweilige Property nicht gesetzt, verwendet die List eine vordefinierte Ansicht. @@ -405,7 +404,7 @@ besonders kleinen Bildschirmen wandern diese Elemente zusammen mit der Suche eine Zeile nach unten. Der Inhalt der ListItems bricht bei kleineren Bildschirmgrößen um. Top Content -kann über [ColumnLayouts](/04-components/structure/column-layout) auf kleinen +kann über [ColumnLayouts](/components/structure/column-layout) auf kleinen Bildschirmen ausgeblendet werden – dabei dürfen nur Informationen entfallen, die der User nicht benötigt, um das ListItem zu verstehen. @@ -418,7 +417,7 @@ der User nicht benötigt, um das ListItem zu verstehen. ## ActionGroup Verwende `` innerhalb der List, um eine -[ActionGroup](/04-components/actions/action-group) mit Aktionen anzuzeigen, die +[ActionGroup](/components/actions/action-group) mit Aktionen anzuzeigen, die sich direkt auf die Liste beziehen. diff --git a/apps/docs/src/content/04-components/structure/section/examples/alert-badge.tsx b/apps/docs/src/content/components/structure/section/examples/alert-badge.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/alert-badge.tsx rename to apps/docs/src/content/components/structure/section/examples/alert-badge.tsx diff --git a/apps/docs/src/content/04-components/structure/section/examples/context-menu.tsx b/apps/docs/src/content/components/structure/section/examples/context-menu.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/context-menu.tsx rename to apps/docs/src/content/components/structure/section/examples/context-menu.tsx diff --git a/apps/docs/src/content/04-components/structure/section/examples/default.tsx b/apps/docs/src/content/components/structure/section/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/default.tsx rename to apps/docs/src/content/components/structure/section/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/section/examples/link.tsx b/apps/docs/src/content/components/structure/section/examples/link.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/link.tsx rename to apps/docs/src/content/components/structure/section/examples/link.tsx diff --git a/apps/docs/src/content/04-components/structure/section/examples/multiple.tsx b/apps/docs/src/content/components/structure/section/examples/multiple.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/multiple.tsx rename to apps/docs/src/content/components/structure/section/examples/multiple.tsx diff --git a/apps/docs/src/content/04-components/structure/section/examples/sub-heading.tsx b/apps/docs/src/content/components/structure/section/examples/sub-heading.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/sub-heading.tsx rename to apps/docs/src/content/components/structure/section/examples/sub-heading.tsx diff --git a/apps/docs/src/content/04-components/structure/section/examples/switch.tsx b/apps/docs/src/content/components/structure/section/examples/switch.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/section/examples/switch.tsx rename to apps/docs/src/content/components/structure/section/examples/switch.tsx diff --git a/apps/docs/src/content/04-components/structure/section/index.mdx b/apps/docs/src/content/components/structure/section/index.mdx similarity index 58% rename from apps/docs/src/content/04-components/structure/section/index.mdx rename to apps/docs/src/content/components/structure/section/index.mdx index ba20eaa316..044d3bb155 100644 --- a/apps/docs/src/content/04-components/structure/section/index.mdx +++ b/apps/docs/src/content/components/structure/section/index.mdx @@ -12,11 +12,11 @@ description: # Best Practices - Gib jeder Section eine kurze, aussagekräftige - [Heading](/04-components/content/heading). + [Heading](/components/content/heading). - Stelle bei mehreren Sections die wichtigste nach oben. So sieht der User den wichtigsten oder am häufigsten genutzten Content zuerst. - Setze Sections sparsam ein. Verteile umfangreichen Content sonst auf mehrere - Seiten oder eine [TabNavigation](/04-components/navigation/tab-navigation). + Seiten oder eine [TabNavigation](/components/navigation/tab-navigation). - Beziehe AlertBadge, Badge und Actions immer auf ihre eigene Section. --- @@ -24,17 +24,17 @@ description: # Mehrere Sections Werden mehrere Sections untereinander platziert, trennt sie automatisch ein -[Separator](/04-components/structure/separator). +[Separator](/components/structure/separator). ## Sub-Headings Sections beginnen in der Regel mit einer -H2-[Heading](/04-components/content/heading). Ist eine feinere Unterteilung -nötig, platzierst du Headings auf niedrigerem Level (H3) direkt in der Section. -Sie erhalten automatisch einen größeren Abstand zum darüberliegenden Content, -statt durch einen Separator getrennt zu werden. +H2-[Heading](/components/content/heading). Ist eine feinere Unterteilung nötig, +platzierst du Headings auf niedrigerem Level (H3) direkt in der Section. Sie +erhalten automatisch einen größeren Abstand zum darüberliegenden Content, statt +durch einen Separator getrennt zu werden. @@ -43,12 +43,12 @@ statt durch einen Separator getrennt zu werden. # Actions In der rechten oberen Ecke bietet die Section einen Bereich für -[Actions](/04-components/actions/action). Dort kannst du einen -[Link](/04-components/navigation/link), einen -[Switch](/04-components/form-controls/switch), -[Buttons](/04-components/actions/button) oder eine Kombination dieser Components +[Actions](/components/actions/action). Dort kannst du einen +[Link](/components/navigation/link), einen +[Switch](/components/form-controls/switch), +[Buttons](/components/actions/button) oder eine Kombination dieser Components platzieren. Mehrere zusammengehörige Actions kannst du über eine -[ActionGroup](/04-components/actions/action-group) gruppieren. +[ActionGroup](/components/actions/action-group) gruppieren. @@ -56,7 +56,7 @@ platzieren. Mehrere zusammengehörige Actions kannst du über eine Es lassen sich mehrere Buttons nebeneinander anzeigen. Werden jedoch mehr als zwei bis drei Actions nötig, behält die Hauptaktion ihren eigenen Button und -alle weiteren wandern in ein [ContextMenu](/04-components/actions/context-menu). +alle weiteren wandern in ein [ContextMenu](/components/actions/context-menu). @@ -66,9 +66,9 @@ alle weiteren wandern in ein [ContextMenu](/04-components/actions/context-menu). ## AlertBadge und Badge -Ergänze die [Heading](/04-components/content/heading) mit einem -[AlertBadge](/04-components/status/alert-badge) oder einem -[Badge](/04-components/status/badge), um den User schnell über den Status oder +Ergänze die [Heading](/components/content/heading) mit einem +[AlertBadge](/components/status/alert-badge) oder einem +[Badge](/components/status/badge), um den User schnell über den Status oder Metadaten des Inhalts einer Section zu informieren. diff --git a/apps/docs/src/content/04-components/structure/separator/examples/default.tsx b/apps/docs/src/content/components/structure/separator/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/separator/examples/default.tsx rename to apps/docs/src/content/components/structure/separator/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/separator/examples/vertical.tsx b/apps/docs/src/content/components/structure/separator/examples/vertical.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/separator/examples/vertical.tsx rename to apps/docs/src/content/components/structure/separator/examples/vertical.tsx diff --git a/apps/docs/src/content/04-components/structure/separator/index.mdx b/apps/docs/src/content/components/structure/separator/index.mdx similarity index 81% rename from apps/docs/src/content/04-components/structure/separator/index.mdx rename to apps/docs/src/content/components/structure/separator/index.mdx index 18af717fc2..c505af4199 100644 --- a/apps/docs/src/content/04-components/structure/separator/index.mdx +++ b/apps/docs/src/content/components/structure/separator/index.mdx @@ -11,8 +11,8 @@ description: # Best Practices - Verlasse dich auf die automatische Trennung durch die - [Section](/04-components/structure/section). Zwischen Sections mit einer - H2-[Heading](/04-components/content/heading) setzt sie den Separator meist + [Section](/components/structure/section). Zwischen Sections mit einer + H2-[Heading](/components/content/heading) setzt sie den Separator meist selbst. - Richte die Breite des Separators an der Breite des Content-Bereichs aus. - Setze den Separator sparsam ein. Bei zu häufiger Verwendung geht die diff --git a/apps/docs/src/content/04-components/structure/table/examples/default.tsx b/apps/docs/src/content/components/structure/table/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/table/examples/default.tsx rename to apps/docs/src/content/components/structure/table/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/table/examples/fixed-column-widths.tsx b/apps/docs/src/content/components/structure/table/examples/fixed-column-widths.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/table/examples/fixed-column-widths.tsx rename to apps/docs/src/content/components/structure/table/examples/fixed-column-widths.tsx diff --git a/apps/docs/src/content/04-components/structure/table/examples/horizontally-centered.tsx b/apps/docs/src/content/components/structure/table/examples/horizontally-centered.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/table/examples/horizontally-centered.tsx rename to apps/docs/src/content/components/structure/table/examples/horizontally-centered.tsx diff --git a/apps/docs/src/content/04-components/structure/table/examples/vertically-centered.tsx b/apps/docs/src/content/components/structure/table/examples/vertically-centered.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/table/examples/vertically-centered.tsx rename to apps/docs/src/content/components/structure/table/examples/vertically-centered.tsx diff --git a/apps/docs/src/content/04-components/structure/table/examples/withFooter.tsx b/apps/docs/src/content/components/structure/table/examples/withFooter.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/table/examples/withFooter.tsx rename to apps/docs/src/content/components/structure/table/examples/withFooter.tsx diff --git a/apps/docs/src/content/04-components/structure/table/index.mdx b/apps/docs/src/content/components/structure/table/index.mdx similarity index 100% rename from apps/docs/src/content/04-components/structure/table/index.mdx rename to apps/docs/src/content/components/structure/table/index.mdx diff --git a/apps/docs/src/content/04-components/structure/tabs/examples/collapsed.tsx b/apps/docs/src/content/components/structure/tabs/examples/collapsed.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/tabs/examples/collapsed.tsx rename to apps/docs/src/content/components/structure/tabs/examples/collapsed.tsx diff --git a/apps/docs/src/content/04-components/structure/tabs/examples/default-selected.tsx b/apps/docs/src/content/components/structure/tabs/examples/default-selected.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/tabs/examples/default-selected.tsx rename to apps/docs/src/content/components/structure/tabs/examples/default-selected.tsx diff --git a/apps/docs/src/content/04-components/structure/tabs/examples/default.tsx b/apps/docs/src/content/components/structure/tabs/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/tabs/examples/default.tsx rename to apps/docs/src/content/components/structure/tabs/examples/default.tsx diff --git a/apps/docs/src/content/04-components/structure/tabs/examples/status.tsx b/apps/docs/src/content/components/structure/tabs/examples/status.tsx similarity index 100% rename from apps/docs/src/content/04-components/structure/tabs/examples/status.tsx rename to apps/docs/src/content/components/structure/tabs/examples/status.tsx diff --git a/apps/docs/src/content/04-components/structure/tabs/index.mdx b/apps/docs/src/content/components/structure/tabs/index.mdx similarity index 87% rename from apps/docs/src/content/04-components/structure/tabs/index.mdx rename to apps/docs/src/content/components/structure/tabs/index.mdx index 7fcd3ed49a..f080888813 100644 --- a/apps/docs/src/content/04-components/structure/tabs/index.mdx +++ b/apps/docs/src/content/components/structure/tabs/index.mdx @@ -19,8 +19,8 @@ description: ## Tabs vs. TabNavigation Flow bietet mit Tabs und der -[TabNavigation](/04-components/navigation/tab-navigation) zwei ähnlich -aussehende Components, die sich in der Verwendung klar unterscheiden. +[TabNavigation](/components/navigation/tab-navigation) zwei ähnlich aussehende +Components, die sich in der Verwendung klar unterscheiden. @@ -46,8 +46,8 @@ eine eingeklappte Ansicht. # Mit Status-Icon Enthält der Inhalt eines Tabs eine wichtige Information oder Warnung (z. B. in -Form eines [Alerts](/04-components/status/alert)), muss der entsprechende Tab -ein Status-Icon erhalten, um die Aufmerksamkeit darauf zu lenken. +Form eines [Alerts](/components/status/alert)), muss der entsprechende Tab ein +Status-Icon erhalten, um die Aufmerksamkeit darauf zu lenken. diff --git a/apps/docs/src/content/04-components/upload/file-card-list/examples/default.tsx b/apps/docs/src/content/components/upload/file-card-list/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card-list/examples/default.tsx rename to apps/docs/src/content/components/upload/file-card-list/examples/default.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card-list/examples/fileDropZone.tsx b/apps/docs/src/content/components/upload/file-card-list/examples/fileDropZone.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card-list/examples/fileDropZone.tsx rename to apps/docs/src/content/components/upload/file-card-list/examples/fileDropZone.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card-list/index.mdx b/apps/docs/src/content/components/upload/file-card-list/index.mdx similarity index 87% rename from apps/docs/src/content/04-components/upload/file-card-list/index.mdx rename to apps/docs/src/content/components/upload/file-card-list/index.mdx index 883d3b6f0b..12ddfcc5db 100644 --- a/apps/docs/src/content/04-components/upload/file-card-list/index.mdx +++ b/apps/docs/src/content/components/upload/file-card-list/index.mdx @@ -20,7 +20,7 @@ description: Die FileCardList platziert mehrere FileCards in einem ColumnLayout. ## FileDropZone Stelle mit der FileCardList die Dateien dar, die über eine -[FileDropZone](/04-components/upload/file-drop-zone) hochgeladen wurden. +[FileDropZone](/components/upload/file-drop-zone) hochgeladen wurden. diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/buttons.tsx b/apps/docs/src/content/components/upload/file-card/examples/buttons.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/buttons.tsx rename to apps/docs/src/content/components/upload/file-card/examples/buttons.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/contextMenu.tsx b/apps/docs/src/content/components/upload/file-card/examples/contextMenu.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/contextMenu.tsx rename to apps/docs/src/content/components/upload/file-card/examples/contextMenu.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/default.tsx b/apps/docs/src/content/components/upload/file-card/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/default.tsx rename to apps/docs/src/content/components/upload/file-card/examples/default.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/delete.tsx b/apps/docs/src/content/components/upload/file-card/examples/delete.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/delete.tsx rename to apps/docs/src/content/components/upload/file-card/examples/delete.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/failed.tsx b/apps/docs/src/content/components/upload/file-card/examples/failed.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/failed.tsx rename to apps/docs/src/content/components/upload/file-card/examples/failed.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/image.tsx b/apps/docs/src/content/components/upload/file-card/examples/image.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/image.tsx rename to apps/docs/src/content/components/upload/file-card/examples/image.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/link.tsx b/apps/docs/src/content/components/upload/file-card/examples/link.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/link.tsx rename to apps/docs/src/content/components/upload/file-card/examples/link.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/examples/progressBar.tsx b/apps/docs/src/content/components/upload/file-card/examples/progressBar.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-card/examples/progressBar.tsx rename to apps/docs/src/content/components/upload/file-card/examples/progressBar.tsx diff --git a/apps/docs/src/content/04-components/upload/file-card/index.mdx b/apps/docs/src/content/components/upload/file-card/index.mdx similarity index 71% rename from apps/docs/src/content/04-components/upload/file-card/index.mdx rename to apps/docs/src/content/components/upload/file-card/index.mdx index 3d38614b4f..81ead07f62 100644 --- a/apps/docs/src/content/04-components/upload/file-card/index.mdx +++ b/apps/docs/src/content/components/upload/file-card/index.mdx @@ -16,17 +16,16 @@ description: Die FileCard visualisiert Dateien samt relevanter Informationen. - Biete wichtige Interaktionen als Aktionen an. Ein Beispiel ist das Entfernen der Datei. - Stelle mehrere Dateien mit der - [FileCardList](/04-components/upload/file-card-list) dar. Häufig ergänzt die - FileCard eine [FileDropZone](/04-components/upload/file-drop-zone) oder ein - [FileField](/04-components/form-controls/file-field). + [FileCardList](/components/upload/file-card-list) dar. Häufig ergänzt die + FileCard eine [FileDropZone](/components/upload/file-drop-zone) oder ein + [FileField](/components/form-controls/file-field). --- # Mit Delete Button -Verwende `delete`, um in der FileCard einen -[Button](/04-components/actions/button) anzuzeigen, mit dem die Datei -unmittelbar entfernt werden kann. +Verwende `delete`, um in der FileCard einen [Button](/components/actions/button) +anzuzeigen, mit dem die Datei unmittelbar entfernt werden kann. @@ -64,21 +63,21 @@ Informationen können im Subtitle der FileCard angezeigt werden. ## Button -Platziere einen oder mehrere [Button](/04-components/actions/button) innerhalb -der FileCard, um zusätzliche Optionen anzubieten. +Platziere einen oder mehrere [Button](/components/actions/button) innerhalb der +FileCard, um zusätzliche Optionen anzubieten. ## ContextMenu Nutze ein `` innerhalb der FileCard, um wichtige Interaktionen in -einem [ContextMenu](/04-components/actions/context-menu) zu platzieren. +einem [ContextMenu](/components/actions/context-menu) zu platzieren. ## ProgressBar -Nutze eine [ProgressBar](/04-components/status/progress-bar) innerhalb der +Nutze eine [ProgressBar](/components/status/progress-bar) innerhalb der FileCard, um beispielsweise einen Upload-Fortschritt anzuzeigen. diff --git a/apps/docs/src/content/04-components/upload/file-drop-zone/examples/default.tsx b/apps/docs/src/content/components/upload/file-drop-zone/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-drop-zone/examples/default.tsx rename to apps/docs/src/content/components/upload/file-drop-zone/examples/default.tsx diff --git a/apps/docs/src/content/04-components/upload/file-drop-zone/examples/fileCardList.tsx b/apps/docs/src/content/components/upload/file-drop-zone/examples/fileCardList.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-drop-zone/examples/fileCardList.tsx rename to apps/docs/src/content/components/upload/file-drop-zone/examples/fileCardList.tsx diff --git a/apps/docs/src/content/04-components/upload/file-drop-zone/examples/multiple.tsx b/apps/docs/src/content/components/upload/file-drop-zone/examples/multiple.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-drop-zone/examples/multiple.tsx rename to apps/docs/src/content/components/upload/file-drop-zone/examples/multiple.tsx diff --git a/apps/docs/src/content/04-components/upload/file-drop-zone/examples/type.tsx b/apps/docs/src/content/components/upload/file-drop-zone/examples/type.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/file-drop-zone/examples/type.tsx rename to apps/docs/src/content/components/upload/file-drop-zone/examples/type.tsx diff --git a/apps/docs/src/content/04-components/upload/file-drop-zone/index.mdx b/apps/docs/src/content/components/upload/file-drop-zone/index.mdx similarity index 75% rename from apps/docs/src/content/04-components/upload/file-drop-zone/index.mdx rename to apps/docs/src/content/components/upload/file-drop-zone/index.mdx index 4d1bb2eda7..1356b5a313 100644 --- a/apps/docs/src/content/04-components/upload/file-drop-zone/index.mdx +++ b/apps/docs/src/content/components/upload/file-drop-zone/index.mdx @@ -12,10 +12,9 @@ description: # Best Practices - Biete immer eine alternative Upload-Möglichkeit über einen - [Button](/04-components/actions/button). + [Button](/components/actions/button). - Kommuniziere zulässige Dateitypen und mögliche Größenbeschränkungen deutlich. -- Formuliere - [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) +- Formuliere [Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen) klar und hilfreich. --- @@ -34,7 +33,7 @@ Dateigrößen beim Hochladen zu informieren. Über die Property `multiple` wird das gleichzeitige Hochladen mehrerer Dateien ermöglicht. Beim erneuten Hochladen werden bestehende Dateien ersetzt. Ein Beispiel für das Hochladen und Verwalten mehrerer Dateien findest du im -Codesnippet [Multi Upload](/03-patterns/02-codesnippets/multi-upload). +Codesnippet [Multi Upload](/patterns/codesnippets/multi-upload). @@ -45,8 +44,8 @@ Codesnippet [Multi Upload](/03-patterns/02-codesnippets/multi-upload). ## FileCardList Stelle die hochgeladenen Dateien übersichtlich mit einer -[FileCardList](/04-components/upload/file-card-list) dar – für eine einzelne -Datei genügt eine [FileCard](/04-components/upload/file-card). +[FileCardList](/components/upload/file-card-list) dar – für eine einzelne Datei +genügt eine [FileCard](/components/upload/file-card). diff --git a/apps/docs/src/content/04-components/upload/image-cropper/examples/aspect.tsx b/apps/docs/src/content/components/upload/image-cropper/examples/aspect.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/image-cropper/examples/aspect.tsx rename to apps/docs/src/content/components/upload/image-cropper/examples/aspect.tsx diff --git a/apps/docs/src/content/04-components/upload/image-cropper/examples/crop-shape.tsx b/apps/docs/src/content/components/upload/image-cropper/examples/crop-shape.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/image-cropper/examples/crop-shape.tsx rename to apps/docs/src/content/components/upload/image-cropper/examples/crop-shape.tsx diff --git a/apps/docs/src/content/04-components/upload/image-cropper/examples/default.tsx b/apps/docs/src/content/components/upload/image-cropper/examples/default.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/image-cropper/examples/default.tsx rename to apps/docs/src/content/components/upload/image-cropper/examples/default.tsx diff --git a/apps/docs/src/content/04-components/upload/image-cropper/examples/file-drop-zone.tsx b/apps/docs/src/content/components/upload/image-cropper/examples/file-drop-zone.tsx similarity index 96% rename from apps/docs/src/content/04-components/upload/image-cropper/examples/file-drop-zone.tsx rename to apps/docs/src/content/components/upload/image-cropper/examples/file-drop-zone.tsx index 2886632425..f69262d218 100644 --- a/apps/docs/src/content/04-components/upload/image-cropper/examples/file-drop-zone.tsx +++ b/apps/docs/src/content/components/upload/image-cropper/examples/file-drop-zone.tsx @@ -17,7 +17,7 @@ import { SubmitButton, typedField, } from "@mittwald/flow-react-components/react-hook-form"; -import { sleep } from "@/content/04-components/actions/action/examples/lib"; +import { sleep } from "@/content/components/actions/action/examples/lib"; export default () => { const form = useForm<{ diff --git a/apps/docs/src/content/04-components/upload/image-cropper/examples/size.tsx b/apps/docs/src/content/components/upload/image-cropper/examples/size.tsx similarity index 100% rename from apps/docs/src/content/04-components/upload/image-cropper/examples/size.tsx rename to apps/docs/src/content/components/upload/image-cropper/examples/size.tsx diff --git a/apps/docs/src/content/04-components/upload/image-cropper/index.mdx b/apps/docs/src/content/components/upload/image-cropper/index.mdx similarity index 93% rename from apps/docs/src/content/04-components/upload/image-cropper/index.mdx rename to apps/docs/src/content/components/upload/image-cropper/index.mdx index 96e4a25de6..c388158bc4 100644 --- a/apps/docs/src/content/04-components/upload/image-cropper/index.mdx +++ b/apps/docs/src/content/components/upload/image-cropper/index.mdx @@ -47,7 +47,7 @@ werden. ## FileDropZone Kombiniere den ImageCropper mit einer -[FileDropZone](/04-components/upload/file-drop-zone), um ein hochgeladenes Bild +[FileDropZone](/components/upload/file-drop-zone), um ein hochgeladenes Bild direkt zuzuschneiden. diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/03-fehlermeldungen/index.mdx b/apps/docs/src/content/foundations/content-guidelines/fehlermeldungen/index.mdx similarity index 100% rename from apps/docs/src/content/02-foundations/03-content-guidelines/03-fehlermeldungen/index.mdx rename to apps/docs/src/content/foundations/content-guidelines/fehlermeldungen/index.mdx diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/alert.tsx b/apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/alert.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/alert.tsx rename to apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/alert.tsx diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/alertBadge.tsx b/apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/alertBadge.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/alertBadge.tsx rename to apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/alertBadge.tsx diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/notification.tsx b/apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/notification.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/notification.tsx rename to apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/notification.tsx diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/tabs.tsx b/apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/tabs.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/examples/tabs.tsx rename to apps/docs/src/content/foundations/content-guidelines/informationskonzept/examples/tabs.tsx diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/index.mdx b/apps/docs/src/content/foundations/content-guidelines/informationskonzept/index.mdx similarity index 66% rename from apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/index.mdx rename to apps/docs/src/content/foundations/content-guidelines/informationskonzept/index.mdx index c9b2718c32..61d3b78778 100644 --- a/apps/docs/src/content/02-foundations/03-content-guidelines/02-informationskonzept/index.mdx +++ b/apps/docs/src/content/foundations/content-guidelines/informationskonzept/index.mdx @@ -14,9 +14,8 @@ Benachrichtigungen gestaltet sind. # Status Das Informationskonzept unterscheidet verschiedene Status. Jeder Status folgt -dabei einem definierten Kombination aus -[Color](/02-foundations/01-design/02-colors)- und -[Icon](/04-components/content/icon#icon-bibliothek), um eine eindeutige und +dabei einem definierten Kombination aus [Color](/foundations/design/colors)- und +[Icon](/components/content/icon#icon-bibliothek), um eine eindeutige und schnelle Erkennung zu ermöglichen. Wenn zwei Status inhaltlich miteinander konkurrieren, wird immer der @@ -35,14 +34,14 @@ Warning und Info. # Alert -Ein [Alert](/04-components/status/alert) wird dort eingesetzt, wo unmittelbare +Ein [Alert](/components/status/alert) wird dort eingesetzt, wo unmittelbare Aufmerksamkeit erforderlich ist – etwa bei Systemfehlern oder wichtigen Systeminformationen. Er übermittelt die Information in wenigen Sätzen und gibt, wenn möglich, eine Handlungsempfehlung. Diese kann mithilfe eines -[Links](/04-components/navigation/link) oder eines -[Buttons](/04-components/actions/button) unterstützt werden. Alerts sollten -stets in der Nähe des betroffenen Inhalts platziert werden (s. -[Alert: Position](/04-components/status/alert#position)). +[Links](/components/navigation/link) oder eines +[Buttons](/components/actions/button) unterstützt werden. Alerts sollten stets +in der Nähe des betroffenen Inhalts platziert werden (s. +[Alert: Position](/components/status/alert#position)). @@ -50,15 +49,15 @@ stets in der Nähe des betroffenen Inhalts platziert werden (s. # AlertBadge -Eine [AlertBadge](/04-components/status/alert-badge) dient dazu, den Status -eines Elements schnell sichtbar zu machen, beispielsweise in -[Headings](/04-components/content/heading) oder -[List](/04-components/structure/list)-Einträgen. In vielen Fällen wird sie durch -einen [Alert](/04-components/status/alert) ergänzt, etwa auf der -[Detailseite](/03-patterns/01-patterns/detail-page), um zusätzliche -Informationen bereitzustellen. Für Metadaten oder ergänzende Informationen ist -hingegen die [Badge](/04-components/status/badge) besser geeignet (siehe -[AlertBadge vs. Badge](/04-components/status/alert-badge#best-practices-alertbadge-vs-badge)). +Eine [AlertBadge](/components/status/alert-badge) dient dazu, den Status eines +Elements schnell sichtbar zu machen, beispielsweise in +[Headings](/components/content/heading) oder +[List](/components/structure/list)-Einträgen. In vielen Fällen wird sie durch +einen [Alert](/components/status/alert) ergänzt, etwa auf der +[Detailseite](/patterns/patterns/detail-page), um zusätzliche Informationen +bereitzustellen. Für Metadaten oder ergänzende Informationen ist hingegen die +[Badge](/components/status/badge) besser geeignet (siehe +[AlertBadge vs. Badge](/components/status/alert-badge#best-practices-alertbadge-vs-badge)). @@ -66,17 +65,17 @@ hingegen die [Badge](/04-components/status/badge) besser geeignet (siehe # Notifications -[Notifications](/04-components/status/notification) informieren über wichtige +[Notifications](/components/status/notification) informieren über wichtige System- oder Statusmeldungen und erscheinen kurz im Bildschirm des Users. So stellen sie sicher, dass User über einen Status informiert werden, auch wenn sie sich gerade nicht auf der betroffenen -[Detailseite](/03-patterns/01-patterns/detail-page) befinden. Notifications -sollten bewusst und sparsam eingesetzt werden. Denn zu viele Notifications -überfluten den User und lenken von wirklich wichtigen Informationen ab. +[Detailseite](/patterns/patterns/detail-page) befinden. Notifications sollten +bewusst und sparsam eingesetzt werden. Denn zu viele Notifications überfluten +den User und lenken von wirklich wichtigen Informationen ab. Notifications werden durch den -[NotificationsProvider](/04-components/status/notification-provider) ausgelöst. -Da Notifications in der Regel nur kurz sichtbar sind, sollten sie an einem +[NotificationsProvider](/components/status/notification-provider) ausgelöst. Da +Notifications in der Regel nur kurz sichtbar sind, sollten sie an einem zentralen Ort gesammelt werden, damit ungelesene Notifications auch zu einem späteren Zeitpunkt eingesehen werden können. Kritische Probleme sollten zusätzlich zur Notification per E-Mail kommuniziert werden. So wird @@ -88,10 +87,10 @@ sichergestellt, dass der User die Informationen zuverlässig erhält. # Status-Icon -Einzelne [Status-Icons](/04-components/content/icon#icon-bibliothek) können den +Einzelne [Status-Icons](/components/content/icon#icon-bibliothek) können den User auf versteckte Status-Informtionen aufmerksam machen. Zum Beispiel zeigt -ein Status-Icon innerhalb von einem [Tab](/04-components/structure/tabs) an, -dass in diesem ein relevanter Status vorliegt. Der Status kann dann im Tab z. B. -mit Hilfe eines [Alerts](/04-components/status/alert) erläutert werden. +ein Status-Icon innerhalb von einem [Tab](/components/structure/tabs) an, dass +in diesem ein relevanter Status vorliegt. Der Status kann dann im Tab z. B. mit +Hilfe eines [Alerts](/components/status/alert) erläutert werden. diff --git a/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx b/apps/docs/src/content/foundations/content-guidelines/sprach-guide/index.mdx similarity index 100% rename from apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx rename to apps/docs/src/content/foundations/content-guidelines/sprach-guide/index.mdx diff --git a/apps/docs/src/content/02-foundations/01-design/04-accessibility/index.mdx b/apps/docs/src/content/foundations/design/accessibility/index.mdx similarity index 96% rename from apps/docs/src/content/02-foundations/01-design/04-accessibility/index.mdx rename to apps/docs/src/content/foundations/design/accessibility/index.mdx index ca0cedfdfa..a604c9a903 100644 --- a/apps/docs/src/content/02-foundations/01-design/04-accessibility/index.mdx +++ b/apps/docs/src/content/foundations/design/accessibility/index.mdx @@ -57,8 +57,8 @@ Beachte dabei einige Grundlagen: den Zweck eines Bildes beschreiben. Dekorative Bilder benötigen keinen Alternativtext. - **Beschrifte interaktive Elemente verständlich:** - [Links](/04-components/navigation/link) und - [Buttons](/04-components/actions/button) sollten klar sagen, was passiert. + [Links](/components/navigation/link) und [Buttons](/components/actions/button) + sollten klar sagen, was passiert. - **Prüfe Farbkontraste bei individuellen Anpassungen.** --- diff --git a/apps/docs/src/content/02-foundations/01-design/02-colors/index.mdx b/apps/docs/src/content/foundations/design/colors/index.mdx similarity index 96% rename from apps/docs/src/content/02-foundations/01-design/02-colors/index.mdx rename to apps/docs/src/content/foundations/design/colors/index.mdx index 16448a3a9d..afc52fd48f 100644 --- a/apps/docs/src/content/02-foundations/01-design/02-colors/index.mdx +++ b/apps/docs/src/content/foundations/design/colors/index.mdx @@ -37,7 +37,7 @@ Elemente und visuelle Hervorhebungen. Functional Colors kommunizieren Zustände und unterstützen die Nutzerführung. Sie helfen dabei, Informationen schnell einzuordnen und Handlungsbedarf zu erkennen. Weitere Details zur Anwendung finden sich im -[Informationskonzept](/02-foundations/03-content-guidelines/02-informationskonzept). +[Informationskonzept](/foundations/content-guidelines/informationskonzept). ## Espelkamp Green @@ -96,7 +96,7 @@ oder Bildern entwickelt. Sie bestehen aus jeweils 8 transparenten Abstufungen. Da die Farben auf Transparenzen basieren, muss der Kontrast zur jeweiligen Hintergrundfarbe eigenständig auf Barrierefreiheit geprüft werden. Aus diesem Grund stehen sie nur in definierten Components zur Verfügung, beispielsweise im -[Button](/04-components/actions/button). +[Button](/components/actions/button). Die Verwendung orientiert sich am HSL-Farbmodell. HSL steht für Hue, Saturation und Lightness. Für die Auswahl von Light oder Dark ist ausschließlich der @@ -118,7 +118,7 @@ den Kontrast mit Dark. Bei der Verwendung von Light und Dark auf individuellen Hintergründen sollte das Verhalten beim Theme-Wechsel bewusst gesteuert werden. Nutze dafür die Colors Light Static und Dark Static. - Mehr zu Themes + Mehr zu Themes diff --git a/apps/docs/src/content/02-foundations/01-design/01-design-tokens/examples/schema.tsx b/apps/docs/src/content/foundations/design/design-tokens/examples/schema.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/01-design/01-design-tokens/examples/schema.tsx rename to apps/docs/src/content/foundations/design/design-tokens/examples/schema.tsx diff --git a/apps/docs/src/content/02-foundations/01-design/01-design-tokens/index.mdx b/apps/docs/src/content/foundations/design/design-tokens/index.mdx similarity index 95% rename from apps/docs/src/content/02-foundations/01-design/01-design-tokens/index.mdx rename to apps/docs/src/content/foundations/design/design-tokens/index.mdx index 36dd90dd87..8c19bfaea9 100644 --- a/apps/docs/src/content/02-foundations/01-design/01-design-tokens/index.mdx +++ b/apps/docs/src/content/foundations/design/design-tokens/index.mdx @@ -71,10 +71,9 @@ abgrenzt. **hosting-blue-800** Der Token `hosting-blue-800` definiert eine spezifische -[Color](/02-foundations/01-design/02-colors). Der Name der Farbe `hosting-blue` -gibt den **Context** an. Die Zahl `800` ist die **Clarification**, die die -Abstufung der Farbe definiert und auf den genauen Farbwert `#0054F5` im -Designsystem verweist. +[Color](/foundations/design/colors). Der Name der Farbe `hosting-blue` gibt den +**Context** an. Die Zahl `800` ist die **Clarification**, die die Abstufung der +Farbe definiert und auf den genauen Farbwert `#0054F5` im Designsystem verweist. **primary-solid-background-color-default** @@ -87,7 +86,7 @@ Hintergrundfarbe in der „Solid“-Variante verwendet wird. Die **Clarification **alert-info-outline-border-color-default** Dieser Token definiert eine Designentscheidung für eine spezifische Component, -in diesem Fall einen [Alert](/04-components/status/alert). `alert` liefert den +in diesem Fall einen [Alert](/components/status/alert). `alert` liefert den **Context** und stellt klar, dass der Token nur für diese Component verwendet wird. `info-outline-border-color` als **Common Unit** kategorisiert den Token weiter ein: Er wird für die Border-Color eines Alerts in der „Info“- und diff --git a/apps/docs/src/content/02-foundations/01-design/03-themes/examples/alpha-dark.tsx b/apps/docs/src/content/foundations/design/themes/examples/alpha-dark.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/01-design/03-themes/examples/alpha-dark.tsx rename to apps/docs/src/content/foundations/design/themes/examples/alpha-dark.tsx diff --git a/apps/docs/src/content/02-foundations/01-design/03-themes/examples/alpha-light.tsx b/apps/docs/src/content/foundations/design/themes/examples/alpha-light.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/01-design/03-themes/examples/alpha-light.tsx rename to apps/docs/src/content/foundations/design/themes/examples/alpha-light.tsx diff --git a/apps/docs/src/content/02-foundations/01-design/03-themes/index.mdx b/apps/docs/src/content/foundations/design/themes/index.mdx similarity index 97% rename from apps/docs/src/content/02-foundations/01-design/03-themes/index.mdx rename to apps/docs/src/content/foundations/design/themes/index.mdx index 4221b19cb3..4d64171ee6 100644 --- a/apps/docs/src/content/02-foundations/01-design/03-themes/index.mdx +++ b/apps/docs/src/content/foundations/design/themes/index.mdx @@ -55,7 +55,7 @@ und sorgen für konsistente Lesbarkeit. Für die Verwendung von Light Static und Dark Static gelten die gleichen Richtlinien wie für -[Light und Dark Colors](/02-foundations/01-design/02-colors#light-und-dark-color). +[Light und Dark Colors](/foundations/design/colors#light-und-dark-color). ( ### Tab -Manche Seiten verteilen Inhalte auf mehrere -[Tabs](/04-components/structure/tabs). In solchen Fällen kann es sinnvoll sein, -Tabs separat abzusichern. Dafür eignet sich `WithBoundaries.SectionsFragment`. +Manche Seiten verteilen Inhalte auf mehrere [Tabs](/components/structure/tabs). +In solchen Fällen kann es sinnvoll sein, Tabs separat abzusichern. Dafür eignet +sich `WithBoundaries.SectionsFragment`. ``` export const CronjobTabs: FC = () => ( @@ -149,15 +149,15 @@ export const CronjobTabs: FC = () => ( Für Modals sollte immer ein `WithBoundaries.Modal` verwendet werden. Dies verhindert auch das Nachladen von Daten innerhalb des -[Modals](/04-components/overlays/modal), bevor das Modal geöffnet wird. +[Modals](/components/overlays/modal), bevor das Modal geöffnet wird. ### Inhalte von Forms in Modals Eine teilweise geladene oder fehlerhafte -[Form](/04-components/react-hook-form/form) untergräbt das Vertrauen der User -und kann zu unvollständigen oder inkonsistenten Daten führen. Sobald innerhalb -der Form ein Fehler auftritt, fällt automatisch das ganze Modal in eine -ErrorView, auch wenn es darin noch Boundaries gibt. +[Form](/components/react-hook-form/form) untergräbt das Vertrauen der User und +kann zu unvollständigen oder inkonsistenten Daten führen. Sobald innerhalb der +Form ein Fehler auftritt, fällt automatisch das ganze Modal in eine ErrorView, +auch wenn es darin noch Boundaries gibt. ``` interface Props { @@ -250,12 +250,12 @@ fehleranfällig. Sie sollten immer von einer Boundary umschlossen werden. Für d ## Inhalte einzelner Elemente -Kleine Elemente wie [Texte](/04-components/content/text), -[Links](/04-components/navigation/link), [Badges](/04-components/status/badge), -[Actions](/04-components/actions/action) oder -[ContextMenus](/04-components/actions/context-menu) werden oft dynamisch -geladen, da sie das Nutzungserlebnis der Seite lediglich ergänzen. Diese sollten -daher separat geschützt werden, um nicht die gesamte Seite zu blockieren. Diese +Kleine Elemente wie [Texte](/components/content/text), +[Links](/components/navigation/link), [Badges](/components/status/badge), +[Actions](/components/actions/action) oder +[ContextMenus](/components/actions/context-menu) werden oft dynamisch geladen, +da sie das Nutzungserlebnis der Seite lediglich ergänzen. Diese sollten daher +separat geschützt werden, um nicht die gesamte Seite zu blockieren. Diese Elemente besitzen oft keine eigene ErrorView und erscheinen im Fehlerfall nicht oder verbleiben in ihrem Ladezustand. @@ -287,7 +287,7 @@ und eine eingebaute Boundary besitzen. ### Alerts / Badges -[Alerts](/04-components/status/alert) und Badges ergänzen eine Seite oft nur um +[Alerts](/components/status/alert) und Badges ergänzen eine Seite oft nur um kleine Hinweise oder Statusinformationen. Sie werden in ein `WithBoundaries.Fragment` verpackt. So bleiben sie geschützt, ohne eine eigene Loading View auszulösen. @@ -315,7 +315,7 @@ export const CustomerBankruptAlert: FC = (props) => ( ### Field -Für [Fields](/04-components/react-hook-form/field) kann die +Für [Fields](/components/react-hook-form/field) kann die `WithBoundaries.FieldFragment` Component verwendet werden. Sie zeigt im Loading State ein Textfeld, dem optional ein Label mitgegeben werden kann. @@ -403,6 +403,6 @@ allen relevanten Situationen greifen. Ebenso wichtig ist eine klare und konsistente Formulierung der Fehlermeldungen, damit User verstehen, was passiert und wie sie weitermachen können. Für konkrete Hinweise zur sprachlichen Ausgestaltung bietet die Guideline -[Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen) -weitere Orientierung. So entsteht ein stabiles und nachvollziehbares Verhalten, -das sowohl die Entwicklung als auch die Nutzung der Anwendung unterstützt. +[Fehlermeldungen](/foundations/content-guidelines/fehlermeldungen) weitere +Orientierung. So entsteht ein stabiles und nachvollziehbares Verhalten, das +sowohl die Entwicklung als auch die Nutzung der Anwendung unterstützt. diff --git a/apps/docs/src/content/02-foundations/02-structure/03-components/index.mdx b/apps/docs/src/content/foundations/structure/components/index.mdx similarity index 94% rename from apps/docs/src/content/02-foundations/02-structure/03-components/index.mdx rename to apps/docs/src/content/foundations/structure/components/index.mdx index b02de0ac44..2e6280a7ad 100644 --- a/apps/docs/src/content/02-foundations/02-structure/03-components/index.mdx +++ b/apps/docs/src/content/foundations/structure/components/index.mdx @@ -32,8 +32,8 @@ Components-Libraries basieren in der Regel darauf, Components zu verschachteln, um größere Components zu bauen. Das ist ein weit verbreitetes und effektives Pattern, das außerdem leicht verständlich ist. Genau deshalb unterstützen wir dieses Modell auch in Flow. Wenn man zum Beispiel ein -[CounterBadge](/04-components/status/counter-badge) innerhalb eines -[Buttons](/04-components/actions/button) platziert, wird dieses automatisch oben +[CounterBadge](/components/status/counter-badge) innerhalb eines +[Buttons](/components/actions/button) platziert, wird dieses automatisch oben rechts positioniert – so, wie man es erwarten würde. --- @@ -43,7 +43,7 @@ rechts positioniert – so, wie man es erwarten würde. Wir haben unsere Frontend-Entwickler gefragt, was am Ende besser lesbar ist: 1. Unterkomponenten über Props zu übergeben, wie das - [Icon](/04-components/content/icon) im Beispiel + [Icon](/components/content/icon) im Beispiel 2. Das Icon als Child in die Component zu legen. Wir haben uns für Variante 2 entschieden, da sie besonders bei mehreren diff --git a/apps/docs/src/content/02-foundations/02-structure/01-layout/examples/general-layout.tsx b/apps/docs/src/content/foundations/structure/layout/examples/general-layout.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/02-structure/01-layout/examples/general-layout.tsx rename to apps/docs/src/content/foundations/structure/layout/examples/general-layout.tsx diff --git a/apps/docs/src/content/02-foundations/02-structure/01-layout/examples/mStudio-layout.tsx b/apps/docs/src/content/foundations/structure/layout/examples/mStudio-layout.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/02-structure/01-layout/examples/mStudio-layout.tsx rename to apps/docs/src/content/foundations/structure/layout/examples/mStudio-layout.tsx diff --git a/apps/docs/src/content/02-foundations/02-structure/01-layout/index.mdx b/apps/docs/src/content/foundations/structure/layout/index.mdx similarity index 67% rename from apps/docs/src/content/02-foundations/02-structure/01-layout/index.mdx rename to apps/docs/src/content/foundations/structure/layout/index.mdx index ae6f2f982b..2daf711f5c 100644 --- a/apps/docs/src/content/02-foundations/02-structure/01-layout/index.mdx +++ b/apps/docs/src/content/foundations/structure/layout/index.mdx @@ -32,7 +32,7 @@ Grob lassen sich die meisten Layouts, die mit Flow erstellt werden können, in 4 Bereiche einteilen: **Header**, **Side-Navigation**, **Content** und **Overlay**. Das Layout innerhalb dieser Bereiche wird durch verschiedene Components und deren Komposition bestimmt. In unseren Components ist das -[Spacing](/02-foundations/02-structure/02-spacing) bereits integriert. +[Spacing](/foundations/structure/spacing) bereits integriert. Verschiedene Layouts mit Code zum Kopieren finden sich unter Code Templates. @@ -51,13 +51,13 @@ Verschiedene Layouts mit Code zum Kopieren finden sich unter Code Templates. Der Header-Bereich befindet sich im oberen Bereich des Layouts und ist auf jeder Seite identisch. Er kann das Logo sowie eine -[HeaderNavigation](/04-components/navigation/header-navigation) enthalten. Ein +[HeaderNavigation](/components/navigation/header-navigation) enthalten. Ein Hauptbestandteil der HeaderNavigation sind primäre Navigationspunkte. Ergänzend -gibt es [Buttons](/04-components/actions/button), die Overlays oder -[ContextMenus](/04-components/actions/context-menu) öffnen, wie beispielsweise -für die Suche, das NotificationCenter oder das ProfilMenu. Im Header-Bereich -sollten ausschließlich wichtige Elemente angezeigt werden, die auf allen Seiten -sichtbar sein müssen. +gibt es [Buttons](/components/actions/button), die Overlays oder +[ContextMenus](/components/actions/context-menu) öffnen, wie beispielsweise für +die Suche, das NotificationCenter oder das ProfilMenu. Im Header-Bereich sollten +ausschließlich wichtige Elemente angezeigt werden, die auf allen Seiten sichtbar +sein müssen. ## Side-Navigation @@ -67,8 +67,8 @@ Navigation bestehen, sondern kann auch aus einer Primary und einer Secondary Navigation bestehen. Zum Aufbau einer Side-Navigation kann eine -[LayoutCard](/04-components/structure/layout-card) mit der Component -[Navigation](/04-components/navigation/navigation) gefüllt werden. +[LayoutCard](/components/structure/layout-card) mit der Component +[Navigation](/components/navigation/navigation) gefüllt werden. ## Content @@ -78,24 +78,24 @@ empfohlen, den Inhalt nach einem wiederkehrenden Muster anzuordnen, das bereits auf anderen Seiten verwendet wurde. Die Navigationsstruktur im Content-Bereich folgt ebenfalls einem klaren Muster. -Im Content-Bereich können [Tabs](/04-components/structure/tabs) und -[List](/04-components/structure/list) verwendet werden, um die Inhalte zu teilen +Im Content-Bereich können [Tabs](/components/structure/tabs) und +[List](/components/structure/list) verwendet werden, um die Inhalte zu teilen oder in die Tiefe zu navigieren. Bei der Navigation in tiefere Ebenen, z. B. -über eine List, bietet eine [Breadcrumb](/04-components/navigation/breadcrumb) -eine Orientierungshilfe. +über eine List, bietet eine [Breadcrumb](/components/navigation/breadcrumb) eine +Orientierungshilfe. -Der Content wird von einer [LayoutCard](/04-components/structure/layout-card) +Der Content wird von einer [LayoutCard](/components/structure/layout-card) umschlossen. Um innerhalb der LayoutCard die richtigen Abstände in vertikaler und horizontaler Richtung sicherzustellen, sollten die Layout-Components -[Section](/04-components/structure/section) und -[ColumnLayout](/04-components/structure/column-layout) verwendet werden. +[Section](/components/structure/section) und +[ColumnLayout](/components/structure/column-layout) verwendet werden. ## Overlay Ein Overlay öffnet sich über der eigentlichen Seite. Größere Overlays wie -[Modals](/04-components/overlays/modal) und -[OffCanvas](/04-components/overlays/modal) erhalten zusätzlich einen Backdrop, -damit sich der User besser auf den angezeigten Inhalt konzentrieren kann. -Andere, kleinere Overlays wie [ContextMenu](/04-components/actions/context-menu) -oder [Tooltip](/04-components/overlays/tooltip) erhalten keinen Backdrop für die -im Hintergrund angezeigte Seite. +[Modals](/components/overlays/modal) und [OffCanvas](/components/overlays/modal) +erhalten zusätzlich einen Backdrop, damit sich der User besser auf den +angezeigten Inhalt konzentrieren kann. Andere, kleinere Overlays wie +[ContextMenu](/components/actions/context-menu) oder +[Tooltip](/components/overlays/tooltip) erhalten keinen Backdrop für die im +Hintergrund angezeigte Seite. diff --git a/apps/docs/src/content/02-foundations/02-structure/02-spacing/examples/falseSpacing.tsx b/apps/docs/src/content/foundations/structure/spacing/examples/falseSpacing.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/02-structure/02-spacing/examples/falseSpacing.tsx rename to apps/docs/src/content/foundations/structure/spacing/examples/falseSpacing.tsx diff --git a/apps/docs/src/content/02-foundations/02-structure/02-spacing/examples/rightSpacing.tsx b/apps/docs/src/content/foundations/structure/spacing/examples/rightSpacing.tsx similarity index 100% rename from apps/docs/src/content/02-foundations/02-structure/02-spacing/examples/rightSpacing.tsx rename to apps/docs/src/content/foundations/structure/spacing/examples/rightSpacing.tsx diff --git a/apps/docs/src/content/02-foundations/02-structure/02-spacing/index.mdx b/apps/docs/src/content/foundations/structure/spacing/index.mdx similarity index 90% rename from apps/docs/src/content/02-foundations/02-structure/02-spacing/index.mdx rename to apps/docs/src/content/foundations/structure/spacing/index.mdx index 1c11b589b7..b138a2ecdb 100644 --- a/apps/docs/src/content/02-foundations/02-structure/02-spacing/index.mdx +++ b/apps/docs/src/content/foundations/structure/spacing/index.mdx @@ -14,8 +14,8 @@ jedoch oft kleinere Spacings als 8px benötigt werden, stehen zusätzlich feiner Abstufungen von 4px und 2px zur Verfügung. Standardmäßig folgen alle Components den definierten Spacings. Für ein optimales Spacing – das Einfluss auf das Layout hat – sollten die Components -[ColumnLayout](/04-components/structure/column-layout) und -[Section](/04-components/structure/section) verwendet werden. +[ColumnLayout](/components/structure/column-layout) und +[Section](/components/structure/section) verwendet werden. --- @@ -25,8 +25,8 @@ Um mit dem Spacing ein harmonisches Layout zu erschaffen, achte auf folgende Punkte: - Verwende die Layout-Components - [ColumnLayout](/04-components/structure/column-layout) und - [Section](/04-components/structure/section), um dadurch das richtige vertikale + [ColumnLayout](/components/structure/column-layout) und + [Section](/components/structure/section), um dadurch das richtige vertikale und horizontale Spacing zu erhalten. - Spacing hilft bei der Gruppierung von Elementen auf Benutzeroberflächen. Je geringer das Spacing zwischen den Elementen ist, desto größer ist das Gefühl @@ -36,7 +36,7 @@ Punkte: - Zwischen dem [Avatar](/04-components/content/avatar) und dem Namen und + Zwischen dem [Avatar](/components/content/avatar) und dem Namen und Untertitel ist ein Spacing von 8px definiert, da diese Größe ein gutes Zusammengehörigkeitsgefühl vermittelt. diff --git a/apps/docs/src/content/01-get-started/installation/index.mdx b/apps/docs/src/content/get-started/installation/index.mdx similarity index 88% rename from apps/docs/src/content/01-get-started/installation/index.mdx rename to apps/docs/src/content/get-started/installation/index.mdx index 1213c61d54..9d7985604f 100644 --- a/apps/docs/src/content/01-get-started/installation/index.mdx +++ b/apps/docs/src/content/get-started/installation/index.mdx @@ -47,10 +47,10 @@ Dafür umschließt du deine Anwendung mit dem ``: ``` Jede einzelne Verwendung bleibt stärker als der Standard: Setzt eine -[List](/04-components/structure/list) das -`disableInitialSuspenseBoundary`-Property an ihrer Datenquelle, gilt dort dieser -Wert. Verschachtelte Provider gelten jeweils für ihren Teilbaum und übernehmen -die Werte, die sie nicht selbst nennen. +[List](/components/structure/list) das `disableInitialSuspenseBoundary`-Property +an ihrer Datenquelle, gilt dort dieser Wert. Verschachtelte Provider gelten +jeweils für ihren Teilbaum und übernehmen die Werte, die sie nicht selbst +nennen. Diese Defaults stehen zur Verfügung: diff --git a/apps/docs/src/content/01-get-started/stylesheet/examples/components/ExampleSvg.tsx b/apps/docs/src/content/get-started/stylesheet/examples/components/ExampleSvg.tsx similarity index 100% rename from apps/docs/src/content/01-get-started/stylesheet/examples/components/ExampleSvg.tsx rename to apps/docs/src/content/get-started/stylesheet/examples/components/ExampleSvg.tsx diff --git a/apps/docs/src/content/01-get-started/stylesheet/examples/composition.tsx b/apps/docs/src/content/get-started/stylesheet/examples/composition.tsx similarity index 84% rename from apps/docs/src/content/01-get-started/stylesheet/examples/composition.tsx rename to apps/docs/src/content/get-started/stylesheet/examples/composition.tsx index 92a12e54ac..53decf2cc5 100644 --- a/apps/docs/src/content/01-get-started/stylesheet/examples/composition.tsx +++ b/apps/docs/src/content/get-started/stylesheet/examples/composition.tsx @@ -1,4 +1,4 @@ -import ExampleSvg from "@/content/01-get-started/stylesheet/examples/components/ExampleSvg"; +import ExampleSvg from "@/content/get-started/stylesheet/examples/components/ExampleSvg";