From dae5adeb538bb392bf83b830166c0278b53bcd8e Mon Sep 17 00:00:00 2001 From: Yahya Date: Tue, 3 Mar 2026 11:43:32 +0700 Subject: [PATCH 1/4] feat: datum-ui v0.2 monorepo with component reorganization --- .changeset/config.json | 9 +- .changeset/peer-deps-docs.md | 5 + .changeset/pre.json | 16 + .changeset/rare-dancers-itch.md | 5 + .changeset/typography-map-docs.md | 5 + .github/workflows/ci.yml | 81 + .github/workflows/publish-datum-ui.yml | 4 +- .github/workflows/release.yml | 26 +- .gitignore | 26 +- .npmrc | 4 +- .nvmrc | 2 +- .vscode/settings.json | 63 +- README.md | 306 +- apps/docs/.eslintrc.cjs | 4 - apps/docs/.storybook/main.js | 37 - apps/docs/.storybook/preview.tsx | 27 - apps/docs/app/docs/[[...slug]]/page.tsx | 45 + apps/docs/app/docs/layout.tsx | 13 + apps/docs/app/globals.css | 1 + apps/docs/app/layout.tsx | 23 + apps/docs/app/page.tsx | 18 + apps/docs/components/component-preview.tsx | 28 + apps/docs/components/providers.tsx | 9 + apps/docs/components/ui.tsx | 10 + .../content/docs/components/base/alert.mdx | 114 + .../content/docs/components/base/badge.mdx | 234 + .../docs/components/base/breadcrumb.mdx | 97 + .../docs/components/base/button-group.mdx | 18 + .../content/docs/components/base/button.mdx | 134 + .../content/docs/components/base/calendar.mdx | 69 + .../content/docs/components/base/card.mdx | 206 + .../content/docs/components/base/chart.mdx | 22 + .../content/docs/components/base/checkbox.mdx | 83 + .../docs/components/base/collapsible.mdx | 79 + .../content/docs/components/base/command.mdx | 126 + .../content/docs/components/base/dialog.mdx | 122 + .../docs/components/base/hover-card.mdx | 74 + .../docs/components/base/input-group.mdx | 18 + .../content/docs/components/base/input.mdx | 124 + .../content/docs/components/base/label.mdx | 60 + .../docs/content/docs/components/base/map.mdx | 267 + .../content/docs/components/base/meta.json | 45 + .../components/base/place-autocomplete.mdx | 22 + .../content/docs/components/base/popover.mdx | 88 + .../docs/components/base/radio-group.mdx | 135 + .../content/docs/components/base/select.mdx | 144 + .../docs/components/base/separator.mdx | 118 + .../content/docs/components/base/sheet.mdx | 93 + .../content/docs/components/base/skeleton.mdx | 104 + .../content/docs/components/base/spinner.mdx | 74 + .../docs/components/base/stat-card.mdx | 153 + .../content/docs/components/base/switch.mdx | 83 + .../content/docs/components/base/table.mdx | 209 + .../content/docs/components/base/tabs.mdx | 111 + .../content/docs/components/base/textarea.mdx | 65 + .../content/docs/components/base/tooltip.mdx | 118 + .../docs/components/base/typography.mdx | 220 + .../docs/components/base/visuallyhidden.mdx | 22 + .../docs/components/features/autocomplete.mdx | 144 + .../docs/components/features/avatar-stack.mdx | 238 + .../features/calendar-date-picker.mdx | 103 + .../docs/components/features/dropdown.mdx | 116 + .../docs/components/features/dropzone.mdx | 109 + .../components/features/empty-content.mdx | 141 + .../components/features/file-input-button.mdx | 78 + .../content/docs/components/features/form.mdx | 281 + .../content/docs/components/features/grid.mdx | 195 + .../docs/components/features/input-number.mdx | 88 + .../components/features/input-with-addons.mdx | 77 + .../components/features/loader-overlay.mdx | 117 + .../docs/components/features/meta.json | 33 + .../docs/components/features/more-actions.mdx | 106 + .../docs/components/features/nprogress.mdx | 86 + .../docs/components/features/page-title.mdx | 144 + .../docs/components/features/sidebar.mdx | 313 + .../docs/components/features/stepper.mdx | 129 + .../docs/components/features/tag-input.mdx | 133 + .../docs/components/features/task-queue.mdx | 161 + .../components/features/time-range-picker.mdx | 148 + .../docs/components/features/toast.mdx | 109 + apps/docs/content/docs/components/icons.mdx | 151 + apps/docs/content/docs/components/index.mdx | 26 + apps/docs/content/docs/components/meta.json | 10 + apps/docs/content/docs/components/themes.mdx | 111 + apps/docs/content/docs/hooks/index.mdx | 11 + apps/docs/content/docs/hooks/meta.json | 8 + .../docs/hooks/use-copy-to-clipboard.mdx | 124 + apps/docs/content/docs/hooks/use-debounce.mdx | 124 + apps/docs/content/docs/index.mdx | 48 + apps/docs/content/docs/installation.mdx | 50 + apps/docs/content/docs/meta.json | 13 + apps/docs/content/docs/providers.mdx | 47 + apps/docs/content/docs/theming.mdx | 59 + apps/docs/lib/source.ts | 8 + apps/docs/mdx-components.tsx | 14 + apps/docs/next-env.d.ts | 6 + apps/docs/next.config.ts | 10 + apps/docs/package.json | 76 +- apps/docs/source.config.ts | 5 + .../stories/add-filter-dropdown.stories.tsx | 156 - apps/docs/stories/alert.stories.tsx | 176 - apps/docs/stories/badge.stories.tsx | 79 - apps/docs/stories/button.stories.tsx | 209 - apps/docs/stories/card.stories.tsx | 160 - apps/docs/stories/checkbox.stories.tsx | 89 - apps/docs/stories/combobox.stories.tsx | 126 - apps/docs/stories/dialog.stories.tsx | 220 - apps/docs/stories/filter-chip.stories.tsx | 80 - apps/docs/stories/input.stories.tsx | 109 - apps/docs/stories/label.stories.tsx | 52 - apps/docs/stories/multi-combobox.stories.tsx | 110 - apps/docs/stories/select.stories.tsx | 162 - apps/docs/stories/separator.stories.tsx | 74 - apps/docs/stories/skeleton.stories.tsx | 59 - apps/docs/stories/styles.css | 22 - apps/docs/stories/tabs.stories.tsx | 138 - apps/docs/stories/textarea.stories.tsx | 70 - .../stories/time-range-dropdown.stories.tsx | 100 - apps/docs/stories/tooltip.stories.tsx | 132 - apps/docs/tsconfig.json | 30 +- apps/docs/vite.config.ts | 6 - apps/storybook/.storybook/main.ts | 24 + apps/storybook/.storybook/preview.tsx | 18 + apps/storybook/eslint.config.ts | 20 + apps/storybook/package.json | 39 + apps/storybook/postcss.config.mjs | 5 + apps/storybook/stories/base/alert.stories.tsx | 118 + apps/storybook/stories/base/badge.stories.tsx | 54 + .../stories/base/breadcrumb.stories.tsx | 62 + .../storybook/stories/base/button.stories.tsx | 123 + .../stories/base/calendar.stories.tsx | 41 + apps/storybook/stories/base/card.stories.tsx | 81 + .../stories/base/checkbox.stories.tsx | 46 + .../storybook/stories/base/dialog.stories.tsx | 116 + .../stories/base/hover-card.stories.tsx | 47 + apps/storybook/stories/base/input.stories.tsx | 44 + apps/storybook/stories/base/label.stories.tsx | 25 + apps/storybook/stories/base/map.stories.tsx | 210 + .../stories/base/popover.stories.tsx | 41 + .../stories/base/radio-group.stories.tsx | 68 + .../storybook/stories/base/select.stories.tsx | 86 + .../stories/base/separator.stories.tsx | 51 + apps/storybook/stories/base/sheet.stories.tsx | 98 + .../stories/base/skeleton.stories.tsx | 43 + .../stories/base/spinner.stories.tsx | 46 + .../storybook/stories/base/switch.stories.tsx | 46 + apps/storybook/stories/base/tabs.stories.tsx | 76 + .../stories/base/textarea.stories.tsx | 36 + .../stories/base/tooltip.stories.tsx | 63 + .../stories/base/typography.stories.tsx | 248 + .../stories/features/autocomplete.stories.tsx | 152 + .../stories/features/avatar-stack.stories.tsx | 58 + .../features/calendar-date-picker.stories.tsx | 95 + .../stories/features/dropdown.stories.tsx | 83 + .../stories/features/dropzone.stories.tsx | 83 + .../features/empty-content.stories.tsx | 75 + .../features/file-input-button.stories.tsx | 92 + .../stories/features/form.stories.tsx | 706 + .../stories/features/grid.stories.tsx | 76 + .../stories/features/input-number.stories.tsx | 49 + .../features/input-with-addons.stories.tsx | 55 + .../features/loader-overlay.stories.tsx | 44 + .../stories/features/more-actions.stories.tsx | 81 + .../stories/features/nprogress.stories.tsx | 29 + .../stories/features/page-title.stories.tsx | 55 + .../stories/features/sidebar.stories.tsx | 151 + .../stories/features/stepper.stories.tsx | 85 + .../stories/features/tag-input.stories.tsx | 51 + .../stories/features/task-queue.stories.tsx | 312 + .../features/time-range-picker.stories.tsx | 104 + .../stories/features/toast.stories.tsx | 63 + apps/storybook/stories/storybook.css | 16 + apps/storybook/tsconfig.json | 4 + assets/logo.png | Bin 0 -> 2798 bytes docs/plans/2026-03-03-v0.2-refactor-design.md | 421 + ...2026-03-03-v0.2-refactor-implementation.md | 1683 ++ eslint.config.ts | 3 + lefthook.yml | 19 + package.json | 26 +- packages/config/eslint/index.ts | 16 + packages/config/package.json | 21 + .../tsconfig}/base.json | 26 +- packages/config/tsconfig/react-app.json | 10 + .../tsconfig}/react-library.json | 6 +- packages/datum-ui/.eslintrc.js | 4 - packages/datum-ui/.prettierrc | 3 - packages/datum-ui/CHANGELOG.md | 19 + packages/datum-ui/LICENSE | 201 - packages/datum-ui/README.md | 301 +- packages/datum-ui/eslint.config.ts | 3 + packages/datum-ui/package.json | 292 +- packages/datum-ui/scripts/fix-dts-imports.mjs | 109 + .../datum-ui/scripts/strip-workspace-deps.mjs | 44 + .../add-filter-dropdown.tsx | 111 - .../src/add-filter-dropdown/index.tsx | 2 - packages/datum-ui/src/alert/index.tsx | 2 - packages/datum-ui/src/assets.d.ts | 9 + packages/datum-ui/src/badge/badge.tsx | 38 - packages/datum-ui/src/badge/index.tsx | 2 - packages/datum-ui/src/button/button.tsx | 319 - packages/datum-ui/src/button/index.tsx | 4 - packages/datum-ui/src/button/link-button.tsx | 49 - packages/datum-ui/src/card/card.tsx | 71 - packages/datum-ui/src/card/index.tsx | 16 - packages/datum-ui/src/checkbox/checkbox.tsx | 21 - packages/datum-ui/src/checkbox/index.tsx | 2 - packages/datum-ui/src/combobox/combobox.tsx | 155 - packages/datum-ui/src/combobox/index.tsx | 2 - .../src/components/base/alert/README.md | 443 + .../base/alert/__tests__/alert.test.tsx | 92 + .../src/{ => components/base}/alert/alert.tsx | 72 +- .../src/components/base/alert/index.ts | 1 + .../src/components/base/badge/README.md | 317 + .../base/badge/__tests__/badge.test.tsx | 69 + .../src/components/base/badge/badge.tsx | 229 + .../src/components/base/badge/index.ts | 1 + .../src/components/base/breadcrumb/index.ts | 1 + .../src/components/base/button-group/index.ts | 1 + .../{ => components/base}/button/README.md | 2 +- .../base/button/__tests__/button.test.tsx | 125 + .../src/components/base/button/button.tsx | 332 + .../src/components/base/button/index.tsx | 4 + .../components/base/button/link-button.tsx | 60 + .../src/components/base/calendar/calendar.tsx | 183 + .../src/components/base/calendar/index.ts | 1 + .../base/card/__tests__/card.test.tsx | 56 + .../src/components/base/card/card.tsx | 38 + .../src/components/base/card/index.ts | 1 + .../src/components/base/chart/index.ts | 1 + .../base/checkbox/__tests__/checkbox.test.tsx | 32 + .../src/components/base/checkbox/checkbox.tsx | 11 + .../src/components/base/checkbox/index.ts | 1 + .../src/components/base/collapsible/index.ts | 1 + .../src/components/base/command/index.ts | 1 + .../src/components/base/dialog/README.md | 180 + .../base/dialog/__tests__/dialog.test.tsx | 90 + .../src/components/base/dialog/dialog.tsx | 182 + .../src/components/base/dialog/index.ts | 9 + .../src/components/base/hover-card/index.ts | 1 + .../datum-ui/src/components/base/index.ts | 41 + .../src/components/base/input-group/index.ts | 1 + .../base/input/__tests__/input.test.tsx | 37 + .../src/components/base/input/index.ts | 1 + .../src/components/base/input/input.tsx | 28 + .../base/label/__tests__/label.test.tsx | 21 + .../src/components/base/label/index.ts | 17 + .../src/components/base/label/label.tsx | 37 + .../datum-ui/src/components/base/map/index.ts | 1 + .../base/place-autocomplete/index.ts | 1 + .../src/components/base/popover/index.ts | 1 + .../__tests__/radio-group.test.tsx | 45 + .../src/components/base/radio-group/index.ts | 1 + .../base/radio-group/radio-group.tsx | 20 + .../base/select/__tests__/select.test.tsx | 88 + .../base/select/index.ts} | 13 +- .../src/components/base/select/select.tsx | 96 + .../src/components/base/separator/index.ts | 1 + .../base/sheet/__tests__/sheet.test.tsx | 64 + .../src/components/base/sheet/index.ts | 11 + .../src/components/base/sheet/sheet.tsx | 109 + .../src/components/base/skeleton/index.ts | 1 + .../src/components/base/spinner/index.ts | 1 + .../base/switch/__tests__/switch.test.tsx | 32 + .../src/components/base/switch/index.ts | 1 + .../src/components/base/switch/switch.tsx | 11 + .../src/components/base/table/index.ts | 1 + .../base/tabs/__tests__/tabs.test.tsx | 70 + .../src/components/base/tabs/index.ts | 1 + .../src/components/base/tabs/tabs.tsx | 76 + .../base/textarea/__tests__/textarea.test.tsx | 32 + .../src/components/base/textarea/index.ts | 1 + .../src/components/base/textarea/textarea.tsx | 28 + .../src/components/base/tooltip/README.md | 370 + .../base/tooltip/__tests__/tooltip.test.tsx | 48 + .../src/components/base/tooltip/index.ts | 1 + .../{ => components/base}/tooltip/tooltip.tsx | 64 +- .../src/components/base/typography/index.ts | 1 + .../components/base/typography/typography.tsx | 386 + .../components/base/visuallyhidden/index.ts | 1 + .../features/autocomplete/autocomplete.tsx | 459 + .../autocomplete/autocomplete.types.ts | 102 + .../components/features/autocomplete/index.ts | 7 + .../__tests__/avatar-stack.test.tsx | 35 + .../features/avatar-stack/avatar-stack.tsx | 95 + .../components/features/avatar-stack/index.ts | 1 + .../calendar-date-picker.tsx | 889 + .../features/calendar-date-picker/index.ts | 1 + .../dropdown/__tests__/dropdown.test.tsx | 72 + .../components/features/dropdown/dropdown.tsx | 225 + .../src/components/features/dropdown/index.ts | 1 + .../dropzone/__tests__/dropzone.test.tsx | 38 + .../components/features/dropzone/dropzone.tsx | 218 + .../src/components/features/dropzone/index.ts | 2 + .../__tests__/empty-content.test.tsx | 43 + .../empty-content/assets/milo-stamp.svg | 32 + .../features/empty-content/assets/scene-5.png | Bin 0 -> 17232 bytes .../features/empty-content/assets/scene-6.png | Bin 0 -> 6244 bytes .../features/empty-content/assets/scene-7.png | Bin 0 -> 20173 bytes .../features/empty-content/empty-content.tsx | 246 + .../features/empty-content/index.ts | 2 + .../__tests__/file-input-button.test.tsx | 26 + .../file-input-button/file-input-button.tsx | 139 + .../features/file-input-button/index.ts | 1 + .../src/components/features/form/README.md | 574 + .../features/form/__tests__/form.test.tsx | 360 + .../form/components/form-autocomplete.tsx | 73 + .../features/form/components/form-button.tsx | 52 + .../form/components/form-checkbox.tsx | 63 + .../form/components/form-copy-box.tsx | 124 + .../features/form/components/form-custom.tsx | 40 + .../form/components/form-description.tsx | 30 + .../features/form/components/form-dialog.tsx | 201 + .../features/form/components/form-error.tsx | 62 + .../form/components/form-field-array.tsx | 135 + .../features/form/components/form-field.tsx | 310 + .../form/components/form-input-group.tsx | 55 + .../features/form/components/form-input.tsx | 41 + .../form/components/form-radio-group.tsx | 90 + .../features/form/components/form-root.tsx | 218 + .../features/form/components/form-select.tsx | 78 + .../features/form/components/form-submit.tsx | 27 + .../features/form/components/form-switch.tsx | 63 + .../form/components/form-textarea.tsx | 41 + .../features/form/components/form-when.tsx | 66 + .../features/form/components/index.ts | 28 + .../form/components/stepper/form-step.tsx | 32 + .../form/components/stepper/form-stepper.tsx | 505 + .../features/form/components/stepper/index.ts | 4 + .../components/stepper/stepper-controls.tsx | 106 + .../components/stepper/stepper-navigation.tsx | 181 + .../features/form/context/field-context.tsx | 36 + .../features/form/context/form-context.tsx | 44 + .../components/features/form/context/index.ts | 17 + .../components/features/form/hooks/index.ts | 5 + .../features/form/hooks/use-field-context.ts | 27 + .../features/form/hooks/use-field.ts | 114 + .../features/form/hooks/use-form-context.ts | 24 + .../features/form/hooks/use-stepper.ts | 73 + .../features/form/hooks/use-watch.ts | 127 + .../src/components/features/form/index.ts | 263 + .../components/features/form/types/index.ts | 716 + .../src/components/features/grid/README.md | 230 + .../features/grid/components/col.tsx | 85 + .../features/grid/components/index.tsx | 8 + .../features/grid/components/row.tsx | 99 + .../features/grid/constants/grid.constants.ts | 26 + .../src/components/features/grid/index.ts | 24 + .../src/components/features/grid/style.css | 1088 ++ .../features/grid/types/grid.types.ts | 48 + .../features/grid/utils/responsive.ts | 75 + .../datum-ui/src/components/features/index.ts | 27 + .../__tests__/input-number.test.tsx | 72 + .../components/features/input-number/index.ts | 1 + .../features/input-number/input-number.tsx | 133 + .../__tests__/input-with-addons.test.tsx | 52 + .../features/input-with-addons/index.ts | 1 + .../input-with-addons/input-with-addons.tsx | 57 + .../__tests__/loader-overlay.test.tsx | 24 + .../features/loader-overlay/index.ts | 1 + .../loader-overlay/loader-overlay.tsx | 28 + .../__tests__/more-actions.test.tsx | 123 + .../components/features/more-actions/index.ts | 2 + .../features/more-actions/more-actions.tsx | 100 + .../components/features/nprogress/index.ts | 32 + .../features/nprogress/nprogress.css | 24 + .../page-title/__tests__/page-title.test.tsx | 33 + .../components/features/page-title/index.ts | 2 + .../features/page-title/page-title.tsx | 53 + .../features/sidebar/app-sidebar.tsx | 63 + .../src/components/features/sidebar/index.ts | 3 + .../components/features/sidebar/nav-main.tsx | 669 + .../components/features/sidebar/sidebar.tsx | 946 + .../src/components/features/stepper/index.ts | 1 + .../components/features/stepper/stepper.tsx | 506 + .../tag-input/__tests__/tag-input.test.tsx | 100 + .../components/features/tag-input/index.ts | 1 + .../features/tag-input/tag-input.tsx | 481 + .../task-queue/FUTURE_ENHANCEMENTS.md | 234 + .../components/features/task-queue/README.md | 596 + .../features/task-queue/constants.ts | 8 + .../features/task-queue/core/index.ts | 9 + .../task-queue/core/task-panel-actions.tsx | 91 + .../task-queue/core/task-panel-counter.tsx | 56 + .../task-queue/core/task-panel-header.tsx | 7 + .../task-queue/core/task-panel-item.tsx | 170 + .../features/task-queue/core/task-panel.tsx | 38 + .../task-queue/core/task-queue-dropdown.tsx | 109 + .../task-queue/core/task-queue-trigger.tsx | 87 + .../task-queue/core/task-summary-dialog.tsx | 186 + .../features/task-queue/engine/executor.ts | 155 + .../features/task-queue/engine/index.ts | 4 + .../features/task-queue/engine/queue.ts | 580 + .../engine/storage/detect-storage.ts | 41 + .../task-queue/engine/storage/index.ts | 5 + .../engine/storage/local-storage.ts | 81 + .../engine/storage/memory-storage.ts | 33 + .../engine/storage/redis-storage.ts | 106 + .../task-queue/engine/storage/storage.ts | 1 + .../features/task-queue/hooks/index.ts | 9 + .../task-queue/hooks/use-task-queue.ts | 49 + .../task-queue/hooks/use-task-scope.ts | 152 + .../components/features/task-queue/index.ts | 53 + .../features/task-queue/provider/index.ts | 1 + .../provider/task-queue-provider.tsx | 65 + .../components/features/task-queue/types.ts | 275 + .../features/task-queue/utils/index.ts | 89 + .../components/absolute-range-panel.tsx | 326 + .../time-range-picker/components/index.ts | 5 + .../components/quick-ranges-panel.tsx | 53 + .../components/timezone-selector.tsx | 39 + .../features/time-range-picker/index.ts | 49 + .../features/time-range-picker/presets.ts | 160 + .../time-range-picker/time-range-picker.tsx | 366 + .../features/time-range-picker/types.ts | 67 + .../time-range-picker/utils/format-display.ts | 89 + .../features/time-range-picker/utils/index.ts | 23 + .../time-range-picker/utils/timezone.ts | 167 + .../time-range-picker/utils/to-api-format.ts | 51 + .../features/toast/__tests__/toast.test.ts | 36 + .../features/toast/headless-toast.tsx | 54 + .../src/components/features/toast/index.ts | 3 + .../src/components/features/toast/toast.ts | 53 + .../src/components/features/toast/toaster.tsx | 13 + .../src/components/features/toast/types.ts | 6 + .../components/features/toast/use-toast.ts | 20 + .../icons/close.icon.tsx} | 17 +- .../{ => components}/icons/icon-wrapper.tsx | 8 +- .../datum-ui/src/components/icons/index.ts | 3 + .../icons/spinner.icon.tsx} | 32 +- packages/datum-ui/src/components/index.ts | 10 + .../src/components/themes/client-only.tsx | 20 + .../datum-ui/src/components/themes/index.ts | 9 + .../datum-ui/src/components/themes/script.ts | 50 + .../src/components/themes/theme-script.tsx | 50 + .../src/components/themes/theme.provider.tsx | 236 + .../datum-ui/src/components/themes/types.ts | 34 + packages/datum-ui/src/dialog/dialog.tsx | 153 - packages/datum-ui/src/dialog/index.tsx | 20 - .../datum-ui/src/filter-chip/filter-chip.tsx | 206 - packages/datum-ui/src/filter-chip/index.tsx | 2 - packages/datum-ui/src/hooks/index.ts | 3 + .../src/hooks/use-copy-to-clipboard.ts | 49 + packages/datum-ui/src/hooks/use-debounce.ts | 23 + packages/datum-ui/src/hooks/use-theme.ts | 1 + packages/datum-ui/src/icons/index.ts | 3 - packages/datum-ui/src/index.ts | 29 +- packages/datum-ui/src/input/index.tsx | 2 - packages/datum-ui/src/input/input.tsx | 32 - packages/datum-ui/src/label/index.tsx | 2 - packages/datum-ui/src/label/label.tsx | 21 - packages/datum-ui/src/lib/index.ts | 1 - .../datum-ui/src/multi-combobox/index.tsx | 2 - .../src/multi-combobox/multi-combobox.tsx | 157 - .../__tests__/datum-provider.test.tsx | 69 + .../datum-ui/src/providers/datum.provider.tsx | 54 + packages/datum-ui/src/providers/index.ts | 2 + packages/datum-ui/src/select/select.tsx | 64 - packages/datum-ui/src/separator/index.tsx | 2 - packages/datum-ui/src/separator/separator.tsx | 23 - packages/datum-ui/src/skeleton/index.tsx | 2 - packages/datum-ui/src/skeleton/skeleton.tsx | 18 - packages/datum-ui/src/styles/custom.css | 27 - packages/datum-ui/src/styles/fonts.css | 12 +- .../src/styles/fonts/AllianceNo1-Medium.ttf | Bin 0 -> 83136 bytes .../src/styles/fonts/AllianceNo1-Regular.ttf | Bin 0 -> 83128 bytes .../src/styles/fonts/AllianceNo1-SemiBold.ttf | Bin 0 -> 83284 bytes .../styles/fonts/FTRegolaNeue-Medium.woff2 | Bin 0 -> 63344 bytes .../styles/fonts/FTRegolaNeue-Regular.woff2 | Bin 0 -> 58176 bytes .../styles/fonts/FTRegolaNeue-Semibold.woff2 | Bin 0 -> 63696 bytes packages/datum-ui/src/styles/root.css | 6 +- packages/datum-ui/src/styles/theme.css | 3 - packages/datum-ui/src/styles/themes/alpha.css | 167 +- .../src/styles/tokens/brand-tokens.css | 57 - packages/datum-ui/src/tabs/index.tsx | 7 - packages/datum-ui/src/tabs/tabs.tsx | 49 - packages/datum-ui/src/textarea/index.tsx | 2 - packages/datum-ui/src/textarea/textarea.tsx | 30 - .../src/time-range-dropdown/index.tsx | 2 - .../time-range-dropdown.tsx | 226 - packages/datum-ui/src/tooltip/index.tsx | 2 - packages/datum-ui/src/utils/cn.ts | 7 + packages/datum-ui/src/utils/index.ts | 1 + packages/datum-ui/test/setup.ts | 39 + packages/datum-ui/test/utils.d.ts | 9 + packages/datum-ui/test/utils.d.ts.map | 1 + packages/datum-ui/test/utils.tsx | 29 + packages/datum-ui/tsconfig.build.json | 14 + packages/datum-ui/tsconfig.json | 9 +- packages/datum-ui/tsdown.config.ts | 128 + packages/datum-ui/tsup.config.ts | 9 - packages/datum-ui/vitest.config.ts | 21 + packages/eslint-config/README.md | 3 - packages/eslint-config/library.js | 35 - packages/eslint-config/package.json | 17 - packages/eslint-config/react.js | 39 - packages/eslint-config/storybook.js | 45 - packages/shadcn/.eslintrc.js | 5 - packages/shadcn/.prettierrc | 3 - packages/shadcn/README.md | 332 - packages/shadcn/components.json | 7 +- packages/shadcn/hooks/use-theme.ts | 37 + packages/shadcn/package.json | 145 +- packages/shadcn/postcss.config.js | 1 - packages/shadcn/style.css | 2 - packages/shadcn/styles/shadcn.css | 55 + packages/shadcn/styles/style.css | 2 + packages/shadcn/tsconfig.json | 9 +- packages/shadcn/ui/alert.tsx | 3 +- packages/shadcn/ui/avatar.tsx | 2 +- packages/shadcn/ui/badge.tsx | 2 +- packages/shadcn/ui/breadcrumb.tsx | 2 +- packages/shadcn/ui/button-group.tsx | 77 + packages/shadcn/ui/button.tsx | 4 +- packages/shadcn/ui/card.tsx | 2 +- packages/shadcn/ui/chart.tsx | 2 +- packages/shadcn/ui/checkbox.tsx | 40 +- packages/shadcn/ui/command.tsx | 4 +- packages/shadcn/ui/dialog.tsx | 2 +- packages/shadcn/ui/dropdown-menu.tsx | 2 +- packages/shadcn/ui/hover-card.tsx | 2 +- packages/shadcn/ui/input-group.tsx | 157 + packages/shadcn/ui/input.tsx | 2 +- packages/shadcn/ui/label.tsx | 30 +- packages/shadcn/ui/map-leaflet-imports.ts | 11 + packages/shadcn/ui/map.tsx | 1419 ++ packages/shadcn/ui/place-autocomplete.tsx | 351 + packages/shadcn/ui/popover.tsx | 2 +- packages/shadcn/ui/radio-group.tsx | 2 +- packages/shadcn/ui/select.tsx | 2 +- packages/shadcn/ui/separator.tsx | 39 +- packages/shadcn/ui/sheet.tsx | 6 +- packages/shadcn/ui/skeleton.tsx | 2 +- packages/shadcn/ui/spinner.tsx | 15 + packages/shadcn/ui/switch.tsx | 2 +- packages/shadcn/ui/table.tsx | 2 +- packages/shadcn/ui/tabs.tsx | 2 +- packages/shadcn/ui/textarea.tsx | 2 +- packages/shadcn/ui/tooltip.tsx | 2 +- packages/tailwind-config/main.css | 7 - packages/tailwind-config/package.json | 14 - packages/tailwind-config/postcss.config.js | 6 - packages/typescript-config/package.json | 9 - packages/typescript-config/react-app.json | 16 - pnpm-lock.yaml | 15923 +++++++++------- turbo.json | 25 +- 545 files changed, 50358 insertions(+), 12092 deletions(-) create mode 100644 .changeset/peer-deps-docs.md create mode 100644 .changeset/pre.json create mode 100644 .changeset/rare-dancers-itch.md create mode 100644 .changeset/typography-map-docs.md create mode 100644 .github/workflows/ci.yml delete mode 100644 apps/docs/.eslintrc.cjs delete mode 100644 apps/docs/.storybook/main.js delete mode 100644 apps/docs/.storybook/preview.tsx create mode 100644 apps/docs/app/docs/[[...slug]]/page.tsx create mode 100644 apps/docs/app/docs/layout.tsx create mode 100644 apps/docs/app/globals.css create mode 100644 apps/docs/app/layout.tsx create mode 100644 apps/docs/app/page.tsx create mode 100644 apps/docs/components/component-preview.tsx create mode 100644 apps/docs/components/providers.tsx create mode 100644 apps/docs/components/ui.tsx create mode 100644 apps/docs/content/docs/components/base/alert.mdx create mode 100644 apps/docs/content/docs/components/base/badge.mdx create mode 100644 apps/docs/content/docs/components/base/breadcrumb.mdx create mode 100644 apps/docs/content/docs/components/base/button-group.mdx create mode 100644 apps/docs/content/docs/components/base/button.mdx create mode 100644 apps/docs/content/docs/components/base/calendar.mdx create mode 100644 apps/docs/content/docs/components/base/card.mdx create mode 100644 apps/docs/content/docs/components/base/chart.mdx create mode 100644 apps/docs/content/docs/components/base/checkbox.mdx create mode 100644 apps/docs/content/docs/components/base/collapsible.mdx create mode 100644 apps/docs/content/docs/components/base/command.mdx create mode 100644 apps/docs/content/docs/components/base/dialog.mdx create mode 100644 apps/docs/content/docs/components/base/hover-card.mdx create mode 100644 apps/docs/content/docs/components/base/input-group.mdx create mode 100644 apps/docs/content/docs/components/base/input.mdx create mode 100644 apps/docs/content/docs/components/base/label.mdx create mode 100644 apps/docs/content/docs/components/base/map.mdx create mode 100644 apps/docs/content/docs/components/base/meta.json create mode 100644 apps/docs/content/docs/components/base/place-autocomplete.mdx create mode 100644 apps/docs/content/docs/components/base/popover.mdx create mode 100644 apps/docs/content/docs/components/base/radio-group.mdx create mode 100644 apps/docs/content/docs/components/base/select.mdx create mode 100644 apps/docs/content/docs/components/base/separator.mdx create mode 100644 apps/docs/content/docs/components/base/sheet.mdx create mode 100644 apps/docs/content/docs/components/base/skeleton.mdx create mode 100644 apps/docs/content/docs/components/base/spinner.mdx create mode 100644 apps/docs/content/docs/components/base/stat-card.mdx create mode 100644 apps/docs/content/docs/components/base/switch.mdx create mode 100644 apps/docs/content/docs/components/base/table.mdx create mode 100644 apps/docs/content/docs/components/base/tabs.mdx create mode 100644 apps/docs/content/docs/components/base/textarea.mdx create mode 100644 apps/docs/content/docs/components/base/tooltip.mdx create mode 100644 apps/docs/content/docs/components/base/typography.mdx create mode 100644 apps/docs/content/docs/components/base/visuallyhidden.mdx create mode 100644 apps/docs/content/docs/components/features/autocomplete.mdx create mode 100644 apps/docs/content/docs/components/features/avatar-stack.mdx create mode 100644 apps/docs/content/docs/components/features/calendar-date-picker.mdx create mode 100644 apps/docs/content/docs/components/features/dropdown.mdx create mode 100644 apps/docs/content/docs/components/features/dropzone.mdx create mode 100644 apps/docs/content/docs/components/features/empty-content.mdx create mode 100644 apps/docs/content/docs/components/features/file-input-button.mdx create mode 100644 apps/docs/content/docs/components/features/form.mdx create mode 100644 apps/docs/content/docs/components/features/grid.mdx create mode 100644 apps/docs/content/docs/components/features/input-number.mdx create mode 100644 apps/docs/content/docs/components/features/input-with-addons.mdx create mode 100644 apps/docs/content/docs/components/features/loader-overlay.mdx create mode 100644 apps/docs/content/docs/components/features/meta.json create mode 100644 apps/docs/content/docs/components/features/more-actions.mdx create mode 100644 apps/docs/content/docs/components/features/nprogress.mdx create mode 100644 apps/docs/content/docs/components/features/page-title.mdx create mode 100644 apps/docs/content/docs/components/features/sidebar.mdx create mode 100644 apps/docs/content/docs/components/features/stepper.mdx create mode 100644 apps/docs/content/docs/components/features/tag-input.mdx create mode 100644 apps/docs/content/docs/components/features/task-queue.mdx create mode 100644 apps/docs/content/docs/components/features/time-range-picker.mdx create mode 100644 apps/docs/content/docs/components/features/toast.mdx create mode 100644 apps/docs/content/docs/components/icons.mdx create mode 100644 apps/docs/content/docs/components/index.mdx create mode 100644 apps/docs/content/docs/components/meta.json create mode 100644 apps/docs/content/docs/components/themes.mdx create mode 100644 apps/docs/content/docs/hooks/index.mdx create mode 100644 apps/docs/content/docs/hooks/meta.json create mode 100644 apps/docs/content/docs/hooks/use-copy-to-clipboard.mdx create mode 100644 apps/docs/content/docs/hooks/use-debounce.mdx create mode 100644 apps/docs/content/docs/index.mdx create mode 100644 apps/docs/content/docs/installation.mdx create mode 100644 apps/docs/content/docs/meta.json create mode 100644 apps/docs/content/docs/providers.mdx create mode 100644 apps/docs/content/docs/theming.mdx create mode 100644 apps/docs/lib/source.ts create mode 100644 apps/docs/mdx-components.tsx create mode 100644 apps/docs/next-env.d.ts create mode 100644 apps/docs/next.config.ts create mode 100644 apps/docs/source.config.ts delete mode 100644 apps/docs/stories/add-filter-dropdown.stories.tsx delete mode 100644 apps/docs/stories/alert.stories.tsx delete mode 100644 apps/docs/stories/badge.stories.tsx delete mode 100644 apps/docs/stories/button.stories.tsx delete mode 100644 apps/docs/stories/card.stories.tsx delete mode 100644 apps/docs/stories/checkbox.stories.tsx delete mode 100644 apps/docs/stories/combobox.stories.tsx delete mode 100644 apps/docs/stories/dialog.stories.tsx delete mode 100644 apps/docs/stories/filter-chip.stories.tsx delete mode 100644 apps/docs/stories/input.stories.tsx delete mode 100644 apps/docs/stories/label.stories.tsx delete mode 100644 apps/docs/stories/multi-combobox.stories.tsx delete mode 100644 apps/docs/stories/select.stories.tsx delete mode 100644 apps/docs/stories/separator.stories.tsx delete mode 100644 apps/docs/stories/skeleton.stories.tsx delete mode 100644 apps/docs/stories/styles.css delete mode 100644 apps/docs/stories/tabs.stories.tsx delete mode 100644 apps/docs/stories/textarea.stories.tsx delete mode 100644 apps/docs/stories/time-range-dropdown.stories.tsx delete mode 100644 apps/docs/stories/tooltip.stories.tsx delete mode 100644 apps/docs/vite.config.ts create mode 100644 apps/storybook/.storybook/main.ts create mode 100644 apps/storybook/.storybook/preview.tsx create mode 100644 apps/storybook/eslint.config.ts create mode 100644 apps/storybook/package.json create mode 100644 apps/storybook/postcss.config.mjs create mode 100644 apps/storybook/stories/base/alert.stories.tsx create mode 100644 apps/storybook/stories/base/badge.stories.tsx create mode 100644 apps/storybook/stories/base/breadcrumb.stories.tsx create mode 100644 apps/storybook/stories/base/button.stories.tsx create mode 100644 apps/storybook/stories/base/calendar.stories.tsx create mode 100644 apps/storybook/stories/base/card.stories.tsx create mode 100644 apps/storybook/stories/base/checkbox.stories.tsx create mode 100644 apps/storybook/stories/base/dialog.stories.tsx create mode 100644 apps/storybook/stories/base/hover-card.stories.tsx create mode 100644 apps/storybook/stories/base/input.stories.tsx create mode 100644 apps/storybook/stories/base/label.stories.tsx create mode 100644 apps/storybook/stories/base/map.stories.tsx create mode 100644 apps/storybook/stories/base/popover.stories.tsx create mode 100644 apps/storybook/stories/base/radio-group.stories.tsx create mode 100644 apps/storybook/stories/base/select.stories.tsx create mode 100644 apps/storybook/stories/base/separator.stories.tsx create mode 100644 apps/storybook/stories/base/sheet.stories.tsx create mode 100644 apps/storybook/stories/base/skeleton.stories.tsx create mode 100644 apps/storybook/stories/base/spinner.stories.tsx create mode 100644 apps/storybook/stories/base/switch.stories.tsx create mode 100644 apps/storybook/stories/base/tabs.stories.tsx create mode 100644 apps/storybook/stories/base/textarea.stories.tsx create mode 100644 apps/storybook/stories/base/tooltip.stories.tsx create mode 100644 apps/storybook/stories/base/typography.stories.tsx create mode 100644 apps/storybook/stories/features/autocomplete.stories.tsx create mode 100644 apps/storybook/stories/features/avatar-stack.stories.tsx create mode 100644 apps/storybook/stories/features/calendar-date-picker.stories.tsx create mode 100644 apps/storybook/stories/features/dropdown.stories.tsx create mode 100644 apps/storybook/stories/features/dropzone.stories.tsx create mode 100644 apps/storybook/stories/features/empty-content.stories.tsx create mode 100644 apps/storybook/stories/features/file-input-button.stories.tsx create mode 100644 apps/storybook/stories/features/form.stories.tsx create mode 100644 apps/storybook/stories/features/grid.stories.tsx create mode 100644 apps/storybook/stories/features/input-number.stories.tsx create mode 100644 apps/storybook/stories/features/input-with-addons.stories.tsx create mode 100644 apps/storybook/stories/features/loader-overlay.stories.tsx create mode 100644 apps/storybook/stories/features/more-actions.stories.tsx create mode 100644 apps/storybook/stories/features/nprogress.stories.tsx create mode 100644 apps/storybook/stories/features/page-title.stories.tsx create mode 100644 apps/storybook/stories/features/sidebar.stories.tsx create mode 100644 apps/storybook/stories/features/stepper.stories.tsx create mode 100644 apps/storybook/stories/features/tag-input.stories.tsx create mode 100644 apps/storybook/stories/features/task-queue.stories.tsx create mode 100644 apps/storybook/stories/features/time-range-picker.stories.tsx create mode 100644 apps/storybook/stories/features/toast.stories.tsx create mode 100644 apps/storybook/stories/storybook.css create mode 100644 apps/storybook/tsconfig.json create mode 100644 assets/logo.png create mode 100644 docs/plans/2026-03-03-v0.2-refactor-design.md create mode 100644 docs/plans/2026-03-03-v0.2-refactor-implementation.md create mode 100644 eslint.config.ts create mode 100644 lefthook.yml create mode 100644 packages/config/eslint/index.ts create mode 100644 packages/config/package.json rename packages/{typescript-config => config/tsconfig}/base.json (50%) create mode 100644 packages/config/tsconfig/react-app.json rename packages/{typescript-config => config/tsconfig}/react-library.json (53%) delete mode 100644 packages/datum-ui/.eslintrc.js delete mode 100644 packages/datum-ui/.prettierrc create mode 100644 packages/datum-ui/CHANGELOG.md delete mode 100644 packages/datum-ui/LICENSE create mode 100644 packages/datum-ui/eslint.config.ts create mode 100644 packages/datum-ui/scripts/fix-dts-imports.mjs create mode 100644 packages/datum-ui/scripts/strip-workspace-deps.mjs delete mode 100644 packages/datum-ui/src/add-filter-dropdown/add-filter-dropdown.tsx delete mode 100644 packages/datum-ui/src/add-filter-dropdown/index.tsx delete mode 100644 packages/datum-ui/src/alert/index.tsx create mode 100644 packages/datum-ui/src/assets.d.ts delete mode 100644 packages/datum-ui/src/badge/badge.tsx delete mode 100644 packages/datum-ui/src/badge/index.tsx delete mode 100644 packages/datum-ui/src/button/button.tsx delete mode 100644 packages/datum-ui/src/button/index.tsx delete mode 100644 packages/datum-ui/src/button/link-button.tsx delete mode 100644 packages/datum-ui/src/card/card.tsx delete mode 100644 packages/datum-ui/src/card/index.tsx delete mode 100644 packages/datum-ui/src/checkbox/checkbox.tsx delete mode 100644 packages/datum-ui/src/checkbox/index.tsx delete mode 100644 packages/datum-ui/src/combobox/combobox.tsx delete mode 100644 packages/datum-ui/src/combobox/index.tsx create mode 100644 packages/datum-ui/src/components/base/alert/README.md create mode 100644 packages/datum-ui/src/components/base/alert/__tests__/alert.test.tsx rename packages/datum-ui/src/{ => components/base}/alert/alert.tsx (73%) create mode 100644 packages/datum-ui/src/components/base/alert/index.ts create mode 100644 packages/datum-ui/src/components/base/badge/README.md create mode 100644 packages/datum-ui/src/components/base/badge/__tests__/badge.test.tsx create mode 100644 packages/datum-ui/src/components/base/badge/badge.tsx create mode 100644 packages/datum-ui/src/components/base/badge/index.ts create mode 100644 packages/datum-ui/src/components/base/breadcrumb/index.ts create mode 100644 packages/datum-ui/src/components/base/button-group/index.ts rename packages/datum-ui/src/{ => components/base}/button/README.md (99%) create mode 100644 packages/datum-ui/src/components/base/button/__tests__/button.test.tsx create mode 100644 packages/datum-ui/src/components/base/button/button.tsx create mode 100644 packages/datum-ui/src/components/base/button/index.tsx create mode 100644 packages/datum-ui/src/components/base/button/link-button.tsx create mode 100644 packages/datum-ui/src/components/base/calendar/calendar.tsx create mode 100644 packages/datum-ui/src/components/base/calendar/index.ts create mode 100644 packages/datum-ui/src/components/base/card/__tests__/card.test.tsx create mode 100644 packages/datum-ui/src/components/base/card/card.tsx create mode 100644 packages/datum-ui/src/components/base/card/index.ts create mode 100644 packages/datum-ui/src/components/base/chart/index.ts create mode 100644 packages/datum-ui/src/components/base/checkbox/__tests__/checkbox.test.tsx create mode 100644 packages/datum-ui/src/components/base/checkbox/checkbox.tsx create mode 100644 packages/datum-ui/src/components/base/checkbox/index.ts create mode 100644 packages/datum-ui/src/components/base/collapsible/index.ts create mode 100644 packages/datum-ui/src/components/base/command/index.ts create mode 100644 packages/datum-ui/src/components/base/dialog/README.md create mode 100644 packages/datum-ui/src/components/base/dialog/__tests__/dialog.test.tsx create mode 100644 packages/datum-ui/src/components/base/dialog/dialog.tsx create mode 100644 packages/datum-ui/src/components/base/dialog/index.ts create mode 100644 packages/datum-ui/src/components/base/hover-card/index.ts create mode 100644 packages/datum-ui/src/components/base/index.ts create mode 100644 packages/datum-ui/src/components/base/input-group/index.ts create mode 100644 packages/datum-ui/src/components/base/input/__tests__/input.test.tsx create mode 100644 packages/datum-ui/src/components/base/input/index.ts create mode 100644 packages/datum-ui/src/components/base/input/input.tsx create mode 100644 packages/datum-ui/src/components/base/label/__tests__/label.test.tsx create mode 100644 packages/datum-ui/src/components/base/label/index.ts create mode 100644 packages/datum-ui/src/components/base/label/label.tsx create mode 100644 packages/datum-ui/src/components/base/map/index.ts create mode 100644 packages/datum-ui/src/components/base/place-autocomplete/index.ts create mode 100644 packages/datum-ui/src/components/base/popover/index.ts create mode 100644 packages/datum-ui/src/components/base/radio-group/__tests__/radio-group.test.tsx create mode 100644 packages/datum-ui/src/components/base/radio-group/index.ts create mode 100644 packages/datum-ui/src/components/base/radio-group/radio-group.tsx create mode 100644 packages/datum-ui/src/components/base/select/__tests__/select.test.tsx rename packages/datum-ui/src/{select/index.tsx => components/base/select/index.ts} (71%) create mode 100644 packages/datum-ui/src/components/base/select/select.tsx create mode 100644 packages/datum-ui/src/components/base/separator/index.ts create mode 100644 packages/datum-ui/src/components/base/sheet/__tests__/sheet.test.tsx create mode 100644 packages/datum-ui/src/components/base/sheet/index.ts create mode 100644 packages/datum-ui/src/components/base/sheet/sheet.tsx create mode 100644 packages/datum-ui/src/components/base/skeleton/index.ts create mode 100644 packages/datum-ui/src/components/base/spinner/index.ts create mode 100644 packages/datum-ui/src/components/base/switch/__tests__/switch.test.tsx create mode 100644 packages/datum-ui/src/components/base/switch/index.ts create mode 100644 packages/datum-ui/src/components/base/switch/switch.tsx create mode 100644 packages/datum-ui/src/components/base/table/index.ts create mode 100644 packages/datum-ui/src/components/base/tabs/__tests__/tabs.test.tsx create mode 100644 packages/datum-ui/src/components/base/tabs/index.ts create mode 100644 packages/datum-ui/src/components/base/tabs/tabs.tsx create mode 100644 packages/datum-ui/src/components/base/textarea/__tests__/textarea.test.tsx create mode 100644 packages/datum-ui/src/components/base/textarea/index.ts create mode 100644 packages/datum-ui/src/components/base/textarea/textarea.tsx create mode 100644 packages/datum-ui/src/components/base/tooltip/README.md create mode 100644 packages/datum-ui/src/components/base/tooltip/__tests__/tooltip.test.tsx create mode 100644 packages/datum-ui/src/components/base/tooltip/index.ts rename packages/datum-ui/src/{ => components/base}/tooltip/tooltip.tsx (70%) create mode 100644 packages/datum-ui/src/components/base/typography/index.ts create mode 100644 packages/datum-ui/src/components/base/typography/typography.tsx create mode 100644 packages/datum-ui/src/components/base/visuallyhidden/index.ts create mode 100644 packages/datum-ui/src/components/features/autocomplete/autocomplete.tsx create mode 100644 packages/datum-ui/src/components/features/autocomplete/autocomplete.types.ts create mode 100644 packages/datum-ui/src/components/features/autocomplete/index.ts create mode 100644 packages/datum-ui/src/components/features/avatar-stack/__tests__/avatar-stack.test.tsx create mode 100644 packages/datum-ui/src/components/features/avatar-stack/avatar-stack.tsx create mode 100644 packages/datum-ui/src/components/features/avatar-stack/index.ts create mode 100644 packages/datum-ui/src/components/features/calendar-date-picker/calendar-date-picker.tsx create mode 100644 packages/datum-ui/src/components/features/calendar-date-picker/index.ts create mode 100644 packages/datum-ui/src/components/features/dropdown/__tests__/dropdown.test.tsx create mode 100644 packages/datum-ui/src/components/features/dropdown/dropdown.tsx create mode 100644 packages/datum-ui/src/components/features/dropdown/index.ts create mode 100644 packages/datum-ui/src/components/features/dropzone/__tests__/dropzone.test.tsx create mode 100644 packages/datum-ui/src/components/features/dropzone/dropzone.tsx create mode 100644 packages/datum-ui/src/components/features/dropzone/index.ts create mode 100644 packages/datum-ui/src/components/features/empty-content/__tests__/empty-content.test.tsx create mode 100644 packages/datum-ui/src/components/features/empty-content/assets/milo-stamp.svg create mode 100644 packages/datum-ui/src/components/features/empty-content/assets/scene-5.png create mode 100644 packages/datum-ui/src/components/features/empty-content/assets/scene-6.png create mode 100644 packages/datum-ui/src/components/features/empty-content/assets/scene-7.png create mode 100644 packages/datum-ui/src/components/features/empty-content/empty-content.tsx create mode 100644 packages/datum-ui/src/components/features/empty-content/index.ts create mode 100644 packages/datum-ui/src/components/features/file-input-button/__tests__/file-input-button.test.tsx create mode 100644 packages/datum-ui/src/components/features/file-input-button/file-input-button.tsx create mode 100644 packages/datum-ui/src/components/features/file-input-button/index.ts create mode 100644 packages/datum-ui/src/components/features/form/README.md create mode 100644 packages/datum-ui/src/components/features/form/__tests__/form.test.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-autocomplete.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-button.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-checkbox.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-copy-box.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-custom.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-description.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-dialog.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-error.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-field-array.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-field.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-input-group.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-input.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-radio-group.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-root.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-select.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-submit.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-switch.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-textarea.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/form-when.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/index.ts create mode 100644 packages/datum-ui/src/components/features/form/components/stepper/form-step.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/stepper/form-stepper.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/stepper/index.ts create mode 100644 packages/datum-ui/src/components/features/form/components/stepper/stepper-controls.tsx create mode 100644 packages/datum-ui/src/components/features/form/components/stepper/stepper-navigation.tsx create mode 100644 packages/datum-ui/src/components/features/form/context/field-context.tsx create mode 100644 packages/datum-ui/src/components/features/form/context/form-context.tsx create mode 100644 packages/datum-ui/src/components/features/form/context/index.ts create mode 100644 packages/datum-ui/src/components/features/form/hooks/index.ts create mode 100644 packages/datum-ui/src/components/features/form/hooks/use-field-context.ts create mode 100644 packages/datum-ui/src/components/features/form/hooks/use-field.ts create mode 100644 packages/datum-ui/src/components/features/form/hooks/use-form-context.ts create mode 100644 packages/datum-ui/src/components/features/form/hooks/use-stepper.ts create mode 100644 packages/datum-ui/src/components/features/form/hooks/use-watch.ts create mode 100644 packages/datum-ui/src/components/features/form/index.ts create mode 100644 packages/datum-ui/src/components/features/form/types/index.ts create mode 100644 packages/datum-ui/src/components/features/grid/README.md create mode 100644 packages/datum-ui/src/components/features/grid/components/col.tsx create mode 100644 packages/datum-ui/src/components/features/grid/components/index.tsx create mode 100644 packages/datum-ui/src/components/features/grid/components/row.tsx create mode 100644 packages/datum-ui/src/components/features/grid/constants/grid.constants.ts create mode 100644 packages/datum-ui/src/components/features/grid/index.ts create mode 100644 packages/datum-ui/src/components/features/grid/style.css create mode 100644 packages/datum-ui/src/components/features/grid/types/grid.types.ts create mode 100644 packages/datum-ui/src/components/features/grid/utils/responsive.ts create mode 100644 packages/datum-ui/src/components/features/index.ts create mode 100644 packages/datum-ui/src/components/features/input-number/__tests__/input-number.test.tsx create mode 100644 packages/datum-ui/src/components/features/input-number/index.ts create mode 100644 packages/datum-ui/src/components/features/input-number/input-number.tsx create mode 100644 packages/datum-ui/src/components/features/input-with-addons/__tests__/input-with-addons.test.tsx create mode 100644 packages/datum-ui/src/components/features/input-with-addons/index.ts create mode 100644 packages/datum-ui/src/components/features/input-with-addons/input-with-addons.tsx create mode 100644 packages/datum-ui/src/components/features/loader-overlay/__tests__/loader-overlay.test.tsx create mode 100644 packages/datum-ui/src/components/features/loader-overlay/index.ts create mode 100644 packages/datum-ui/src/components/features/loader-overlay/loader-overlay.tsx create mode 100644 packages/datum-ui/src/components/features/more-actions/__tests__/more-actions.test.tsx create mode 100644 packages/datum-ui/src/components/features/more-actions/index.ts create mode 100644 packages/datum-ui/src/components/features/more-actions/more-actions.tsx create mode 100644 packages/datum-ui/src/components/features/nprogress/index.ts create mode 100644 packages/datum-ui/src/components/features/nprogress/nprogress.css create mode 100644 packages/datum-ui/src/components/features/page-title/__tests__/page-title.test.tsx create mode 100644 packages/datum-ui/src/components/features/page-title/index.ts create mode 100644 packages/datum-ui/src/components/features/page-title/page-title.tsx create mode 100644 packages/datum-ui/src/components/features/sidebar/app-sidebar.tsx create mode 100644 packages/datum-ui/src/components/features/sidebar/index.ts create mode 100644 packages/datum-ui/src/components/features/sidebar/nav-main.tsx create mode 100644 packages/datum-ui/src/components/features/sidebar/sidebar.tsx create mode 100644 packages/datum-ui/src/components/features/stepper/index.ts create mode 100644 packages/datum-ui/src/components/features/stepper/stepper.tsx create mode 100644 packages/datum-ui/src/components/features/tag-input/__tests__/tag-input.test.tsx create mode 100644 packages/datum-ui/src/components/features/tag-input/index.ts create mode 100644 packages/datum-ui/src/components/features/tag-input/tag-input.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/FUTURE_ENHANCEMENTS.md create mode 100644 packages/datum-ui/src/components/features/task-queue/README.md create mode 100644 packages/datum-ui/src/components/features/task-queue/constants.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/core/index.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-panel-actions.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-panel-counter.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-panel-header.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-panel-item.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-panel.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-queue-dropdown.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-queue-trigger.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/core/task-summary-dialog.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/executor.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/index.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/queue.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/storage/detect-storage.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/storage/index.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/storage/local-storage.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/storage/memory-storage.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/storage/redis-storage.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/engine/storage/storage.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/hooks/index.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/hooks/use-task-queue.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/hooks/use-task-scope.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/index.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/provider/index.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/provider/task-queue-provider.tsx create mode 100644 packages/datum-ui/src/components/features/task-queue/types.ts create mode 100644 packages/datum-ui/src/components/features/task-queue/utils/index.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/components/absolute-range-panel.tsx create mode 100644 packages/datum-ui/src/components/features/time-range-picker/components/index.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/components/quick-ranges-panel.tsx create mode 100644 packages/datum-ui/src/components/features/time-range-picker/components/timezone-selector.tsx create mode 100644 packages/datum-ui/src/components/features/time-range-picker/index.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/presets.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/time-range-picker.tsx create mode 100644 packages/datum-ui/src/components/features/time-range-picker/types.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/utils/format-display.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/utils/index.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/utils/timezone.ts create mode 100644 packages/datum-ui/src/components/features/time-range-picker/utils/to-api-format.ts create mode 100644 packages/datum-ui/src/components/features/toast/__tests__/toast.test.ts create mode 100644 packages/datum-ui/src/components/features/toast/headless-toast.tsx create mode 100644 packages/datum-ui/src/components/features/toast/index.ts create mode 100644 packages/datum-ui/src/components/features/toast/toast.ts create mode 100644 packages/datum-ui/src/components/features/toast/toaster.tsx create mode 100644 packages/datum-ui/src/components/features/toast/types.ts create mode 100644 packages/datum-ui/src/components/features/toast/use-toast.ts rename packages/datum-ui/src/{icons/close-icon.tsx => components/icons/close.icon.tsx} (84%) rename packages/datum-ui/src/{ => components}/icons/icon-wrapper.tsx (78%) create mode 100644 packages/datum-ui/src/components/icons/index.ts rename packages/datum-ui/src/{icons/spinner-icon.tsx => components/icons/spinner.icon.tsx} (84%) create mode 100644 packages/datum-ui/src/components/index.ts create mode 100644 packages/datum-ui/src/components/themes/client-only.tsx create mode 100644 packages/datum-ui/src/components/themes/index.ts create mode 100644 packages/datum-ui/src/components/themes/script.ts create mode 100644 packages/datum-ui/src/components/themes/theme-script.tsx create mode 100644 packages/datum-ui/src/components/themes/theme.provider.tsx create mode 100644 packages/datum-ui/src/components/themes/types.ts delete mode 100644 packages/datum-ui/src/dialog/dialog.tsx delete mode 100644 packages/datum-ui/src/dialog/index.tsx delete mode 100644 packages/datum-ui/src/filter-chip/filter-chip.tsx delete mode 100644 packages/datum-ui/src/filter-chip/index.tsx create mode 100644 packages/datum-ui/src/hooks/index.ts create mode 100644 packages/datum-ui/src/hooks/use-copy-to-clipboard.ts create mode 100644 packages/datum-ui/src/hooks/use-debounce.ts create mode 100644 packages/datum-ui/src/hooks/use-theme.ts delete mode 100644 packages/datum-ui/src/icons/index.ts delete mode 100644 packages/datum-ui/src/input/index.tsx delete mode 100644 packages/datum-ui/src/input/input.tsx delete mode 100644 packages/datum-ui/src/label/index.tsx delete mode 100644 packages/datum-ui/src/label/label.tsx delete mode 100644 packages/datum-ui/src/lib/index.ts delete mode 100644 packages/datum-ui/src/multi-combobox/index.tsx delete mode 100644 packages/datum-ui/src/multi-combobox/multi-combobox.tsx create mode 100644 packages/datum-ui/src/providers/__tests__/datum-provider.test.tsx create mode 100644 packages/datum-ui/src/providers/datum.provider.tsx create mode 100644 packages/datum-ui/src/providers/index.ts delete mode 100644 packages/datum-ui/src/select/select.tsx delete mode 100644 packages/datum-ui/src/separator/index.tsx delete mode 100644 packages/datum-ui/src/separator/separator.tsx delete mode 100644 packages/datum-ui/src/skeleton/index.tsx delete mode 100644 packages/datum-ui/src/skeleton/skeleton.tsx delete mode 100644 packages/datum-ui/src/styles/custom.css create mode 100755 packages/datum-ui/src/styles/fonts/AllianceNo1-Medium.ttf create mode 100755 packages/datum-ui/src/styles/fonts/AllianceNo1-Regular.ttf create mode 100755 packages/datum-ui/src/styles/fonts/AllianceNo1-SemiBold.ttf create mode 100644 packages/datum-ui/src/styles/fonts/FTRegolaNeue-Medium.woff2 create mode 100644 packages/datum-ui/src/styles/fonts/FTRegolaNeue-Regular.woff2 create mode 100644 packages/datum-ui/src/styles/fonts/FTRegolaNeue-Semibold.woff2 delete mode 100644 packages/datum-ui/src/styles/theme.css delete mode 100644 packages/datum-ui/src/styles/tokens/brand-tokens.css delete mode 100644 packages/datum-ui/src/tabs/index.tsx delete mode 100644 packages/datum-ui/src/tabs/tabs.tsx delete mode 100644 packages/datum-ui/src/textarea/index.tsx delete mode 100644 packages/datum-ui/src/textarea/textarea.tsx delete mode 100644 packages/datum-ui/src/time-range-dropdown/index.tsx delete mode 100644 packages/datum-ui/src/time-range-dropdown/time-range-dropdown.tsx delete mode 100644 packages/datum-ui/src/tooltip/index.tsx create mode 100644 packages/datum-ui/src/utils/cn.ts create mode 100644 packages/datum-ui/src/utils/index.ts create mode 100644 packages/datum-ui/test/setup.ts create mode 100644 packages/datum-ui/test/utils.d.ts create mode 100644 packages/datum-ui/test/utils.d.ts.map create mode 100644 packages/datum-ui/test/utils.tsx create mode 100644 packages/datum-ui/tsconfig.build.json create mode 100644 packages/datum-ui/tsdown.config.ts delete mode 100644 packages/datum-ui/tsup.config.ts create mode 100644 packages/datum-ui/vitest.config.ts delete mode 100644 packages/eslint-config/README.md delete mode 100644 packages/eslint-config/library.js delete mode 100644 packages/eslint-config/package.json delete mode 100644 packages/eslint-config/react.js delete mode 100644 packages/eslint-config/storybook.js delete mode 100644 packages/shadcn/.eslintrc.js delete mode 100644 packages/shadcn/.prettierrc delete mode 100644 packages/shadcn/README.md create mode 100644 packages/shadcn/hooks/use-theme.ts delete mode 100644 packages/shadcn/postcss.config.js delete mode 100644 packages/shadcn/style.css create mode 100644 packages/shadcn/styles/style.css create mode 100644 packages/shadcn/ui/button-group.tsx create mode 100644 packages/shadcn/ui/input-group.tsx create mode 100644 packages/shadcn/ui/map-leaflet-imports.ts create mode 100644 packages/shadcn/ui/map.tsx create mode 100644 packages/shadcn/ui/place-autocomplete.tsx create mode 100644 packages/shadcn/ui/spinner.tsx delete mode 100644 packages/tailwind-config/main.css delete mode 100644 packages/tailwind-config/package.json delete mode 100644 packages/tailwind-config/postcss.config.js delete mode 100644 packages/typescript-config/package.json delete mode 100644 packages/typescript-config/react-app.json diff --git a/.changeset/config.json b/.changeset/config.json index a91a85d3..f29c4a70 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,12 +1,11 @@ { - "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json", + "$schema": "https://unpkg.com/@changesets/config@3/schema.json", "changelog": "@changesets/cli/changelog", "commit": false, "fixed": [], "linked": [], "access": "public", + "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": [ - "@repo/docs" - ] -} \ No newline at end of file + "ignore": ["@repo/storybook", "@repo/docs"] +} diff --git a/.changeset/peer-deps-docs.md b/.changeset/peer-deps-docs.md new file mode 100644 index 00000000..00ce444f --- /dev/null +++ b/.changeset/peer-deps-docs.md @@ -0,0 +1,5 @@ +--- +"@datum-cloud/datum-ui": patch +--- + +Add peer dependency documentation to all component doc pages, fix incorrect dependency listings, and add lucide-react guidance to installation docs diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..bdf69b51 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,16 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "@repo/docs": "0.0.0", + "@repo/storybook": "0.0.0", + "@repo/config": "0.0.0", + "@datum-cloud/datum-ui": "0.1.0", + "@repo/shadcn": "0.0.0" + }, + "changesets": [ + "peer-deps-docs", + "rare-dancers-itch", + "typography-map-docs" + ] +} diff --git a/.changeset/rare-dancers-itch.md b/.changeset/rare-dancers-itch.md new file mode 100644 index 00000000..2659a3d8 --- /dev/null +++ b/.changeset/rare-dancers-itch.md @@ -0,0 +1,5 @@ +--- +"@datum-cloud/datum-ui": minor +--- + +Complete restructure of the datum-ui package from a flat component library into a scalable monorepo-based design system with a two-layer architecture (shadcn primitives + datum components), full test suite, Storybook explorer, and Fumadocs documentation site diff --git a/.changeset/typography-map-docs.md b/.changeset/typography-map-docs.md new file mode 100644 index 00000000..da52e713 --- /dev/null +++ b/.changeset/typography-map-docs.md @@ -0,0 +1,5 @@ +--- +"@datum-cloud/datum-ui": minor +--- + +Add Typography component (Title, Text, Paragraph, Link, List, Blockquote, Code), Map docs and Storybook stories diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..8944503e --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,81 @@ +name: CI + +on: + pull_request: + branches: [main] + push: + branches: [main] + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: pnpm/action-setup@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 24 + cache: pnpm + + - run: pnpm install --frozen-lockfile + + - run: pnpm lint + + typecheck: + name: Typecheck + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: pnpm/action-setup@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 24 + cache: pnpm + + - run: pnpm install --frozen-lockfile + + - run: pnpm turbo typecheck + + test: + name: Test + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: pnpm/action-setup@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 24 + cache: pnpm + + - run: pnpm install --frozen-lockfile + + - run: pnpm test + + build: + name: Build + runs-on: ubuntu-latest + needs: [lint, typecheck, test] + steps: + - uses: actions/checkout@v4 + + - uses: pnpm/action-setup@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 24 + cache: pnpm + + - run: pnpm install --frozen-lockfile + + - run: pnpm build diff --git a/.github/workflows/publish-datum-ui.yml b/.github/workflows/publish-datum-ui.yml index a1946b19..1928135d 100644 --- a/.github/workflows/publish-datum-ui.yml +++ b/.github/workflows/publish-datum-ui.yml @@ -13,8 +13,8 @@ jobs: publish-datum-ui: uses: datum-cloud/actions/.github/workflows/publish-npm-package.yaml@main permissions: - contents: write # needed to push the version bump commit and tag - id-token: write # needed for npm trusted publishing (OIDC) + contents: write + id-token: write with: package-name: "@datum-cloud/datum-ui" diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 7c8bbb48..3333c7a5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -5,38 +5,34 @@ on: branches: - main -concurrency: ${{ github.workflow }}-${{ github.ref }} +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true jobs: release: name: Release runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write steps: - - name: Checkout Repo - uses: actions/checkout@v4 + - uses: actions/checkout@v4 - - name: Setup Node.js 24.x - uses: actions/setup-node@v4 + - uses: pnpm/action-setup@v4 + + - uses: actions/setup-node@v4 with: node-version: 24 cache: pnpm - - name: Install Dependencies - run: | - corepack enable - pnpm install --frozen-lockfile + - run: pnpm install --frozen-lockfile - name: Create Release Pull Request or Publish to npm id: changesets uses: changesets/action@v1 with: - # This expects you to have a script called release which does a build for your packages and calls changeset publish publish: pnpm release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - - - name: Send a Slack notification if a publish happens - if: steps.changesets.outputs.published == 'true' - # You can do something when a publish happens. - run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!" diff --git a/.gitignore b/.gitignore index 69b92637..9b35b5fd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,13 +1,15 @@ -.DS_Store -node_modules -.turbo -*.log -.next -dist -dist-ssr -*.local -.env -.cache -server/dist -public/dist +node_modules/ +dist/ storybook-static/ +.next/ +.turbo/ +coverage/ +*.tsbuildinfo +.env* +.source/ + +*.tgz + +.claude/ +CLAUDE.MD +/docs/ \ No newline at end of file diff --git a/.npmrc b/.npmrc index 15e41aa5..3e775efb 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1 @@ -auto-install-peers = true -public-hoist-pattern[]=*storybook* -engine-strict = true +auto-install-peers=true diff --git a/.nvmrc b/.nvmrc index 18c92ea9..54c65116 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v24 \ No newline at end of file +v24 diff --git a/.vscode/settings.json b/.vscode/settings.json index 61a83af9..1d3f801b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,11 +1,60 @@ { + // TypeScript — use workspace version (not VS Code's bundled one) + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true, + + // ESLint — flat config support + "eslint.useFlatConfig": true, "eslint.workingDirectories": [ - { - "mode": "auto" - } + { "pattern": "apps/*" }, + { "pattern": "packages/*" } ], - "typescript.tsdk": "node_modules/typescript/lib", - "css.lint.unknownAtRules": "ignore", - "scss.lint.unknownAtRules": "ignore", - "less.lint.unknownAtRules": "ignore" + + // Formatting — let ESLint handle it, disable built-in formatters + "editor.formatOnSave": true, + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, + + // Tailwind CSS v4 + "tailwindCSS.experimental.classRegex": [ + ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], + ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] + ], + "tailwindCSS.includeLanguages": { + "typescript": "javascript", + "typescriptreact": "javascript" + }, + + // File associations + "files.associations": { + "*.css": "tailwindcss" + }, + + // Search and file exclusions + "search.exclude": { + "**/node_modules": true, + "**/dist": true, + "**/.next": true, + "**/.turbo": true, + "**/storybook-static": true, + "**/coverage": true, + "**/.source": true + }, + "files.exclude": { + "**/.turbo": true + }, + + // Editor defaults for the project + "editor.tabSize": 2, + "editor.insertSpaces": true, + + // File nesting for cleaner explorer + "explorer.fileNesting.enabled": true, + "explorer.fileNesting.patterns": { + "package.json": "pnpm-lock.yaml, pnpm-workspace.yaml, .nvmrc, turbo.json, .gitignore, .npmrc", + "tsconfig.json": "tsconfig.*.json", + "eslint.config.*": ".eslintignore" + } } diff --git a/README.md b/README.md index a97345a5..70264deb 100644 --- a/README.md +++ b/README.md @@ -1,208 +1,218 @@ -# Turborepo Design System Starter +

+ -This is a community-maintained example. If you experience a problem, please submit a pull request with a fix. GitHub Issues will be closed. +

Datum UI

-This guide explains how to use a React design system starter powered by: +

+ Datum Cloud Design System & Component Library +

+

-- 🏎 [Turborepo](https://turborepo.dev) — High-performance build system for Monorepos -- 🚀 [React](https://reactjs.org/) — JavaScript library for user interfaces -- 🛠 [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild -- 📖 [Storybook](https://storybook.js.org/) — UI component environment powered by Vite +--- -As well as a few others tools preconfigured: +## About -- [TypeScript](https://www.typescriptlang.org/) for static type checking -- [ESLint](https://eslint.org/) for code linting -- [Prettier](https://prettier.io) for code formatting -- [Changesets](https://github.com/changesets/changesets) for managing versioning and changelogs -- [GitHub Actions](https://github.com/changesets/action) for fully automated package publishing +Datum UI is Datum Cloud's design system and React component library. It provides themed, composable components built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com), and [Tailwind CSS v4](https://tailwindcss.com) with a Figma-driven design token pipeline. -## Using this example +### Key Features -Run the following command: +- **50+ Components** — Buttons, forms, data tables, dialogs, maps, typography, navigation, and more +- **Two-Layer Architecture** — shadcn/Radix primitives (base) + Datum-customized components (features) +- **Compound Form System** — Built on Conform.js and Zod with validation, field arrays, and multi-step support +- **Interactive Maps** — SSR-safe Leaflet integration with drawing tools, layers, clustering, and fullscreen +- **Task Queue** — Background task engine with progress UI, retry logic, and summary dialogs +- **Design Token Pipeline** — Figma tokens → purpose tokens → theme classes +- **Dark Mode** — Built-in theme provider with system preference detection +- **TypeScript** — Fully typed with exported types for all components -```sh -npx create-turbo@latest -e design-system -``` - -### Useful Commands - -- `pnpm build` - Build all packages, including the Storybook site -- `pnpm dev` - Run all packages locally and preview with Storybook -- `pnpm lint` - Lint all packages -- `pnpm changeset` - Generate a changeset -- `pnpm clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script) - -## Turborepo +### Built With -[Turborepo](https://turborepo.dev) is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching. +- **React 19** — Latest React with server component support +- **Tailwind CSS v4** — Utility-first CSS framework +- **Radix UI** — Accessible, unstyled primitives +- **shadcn/ui** — Component foundation layer +- **CVA** — Class-variance-authority for variant-based component APIs +- **Conform.js + Zod** — Form state management and schema validation -Using Turborepo simplifies managing your design system monorepo, as you can have a single lint, build, test, and release process for all packages. [Learn more](https://vercel.com/blog/monorepos-are-changing-how-teams-build-software) about how monorepos improve your development workflow. +--- -## Apps & Packages +## Monorepo Structure -This Turborepo includes the following packages and applications: - -- `apps/docs`: Component documentation site with Storybook -- `packages/ui`: Core React components -- `packages/typescript-config`: Shared `tsconfig.json`s used throughout the Turborepo -- `packages/eslint-config`: ESLint preset - -Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). Workspaces enables us to "hoist" dependencies that are shared between packages to the root `package.json`. This means smaller `node_modules` folders and a better local dev experience. To install a dependency for the entire monorepo, use the `-w` workspaces flag with `pnpm add`. +``` +packages/ + datum-ui/ # Component library (@datum-cloud/datum-ui) + shadcn/ # shadcn/ui primitives (@repo/shadcn) + config/ # Shared config (TypeScript, Tailwind, ESLint) +apps/ + docs/ # Fumadocs documentation site + storybook/ # Storybook component explorer +``` -This example sets up your `.gitignore` to exclude all generated files, other folders like `node_modules` used to store your dependencies. +| Package | Description | npm | +|---|---|---| +| `@datum-cloud/datum-ui` | Published component library | [![npm](https://img.shields.io/npm/v/@datum-cloud/datum-ui)](https://www.npmjs.com/package/@datum-cloud/datum-ui) | +| `@repo/shadcn` | Internal shadcn/ui primitives | — | +| `@repo/config` | Shared TypeScript, Tailwind, and ESLint config | — | -### Compilation +--- -To make the ui library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with `tsup`, which uses `esbuild` to greatly improve performance. +## Prerequisites -Running `pnpm build` from the root of the Turborepo will run the `build` command defined in each package's `package.json` file. Turborepo runs each `build` in parallel and caches & hashes the output to speed up future builds. +- **Node.js >= 24** — Required for ESM module resolution with pnpm's strict dependency linking +- **pnpm >= 10** — Monorepo package manager -For `@acme/ui`, the `build` command is equivalent to the following: +## Quick Start (Development) ```bash -tsup src/*.tsx --format esm,cjs --dts --external react -``` +# Clone and install +git clone https://github.com/datum-cloud/datum-ui.git +cd datum-ui +pnpm install -`tsup` compiles all of the components in the design system individually, into both ES Modules and CommonJS formats as well as their TypeScript types. The `package.json` for `@acme/ui` then instructs the consumer to select the correct format: - -```json:ui/package.json -{ - "name": "@acme/ui", - "version": "0.0.0", - "sideEffects": false, - "exports":{ - "./button": { - "types": "./src/button.tsx", - "import": "./dist/button.mjs", - "require": "./dist/button.js" - } - } -} -``` +# Start Storybook (component explorer) +pnpm --filter @repo/storybook dev -Run `pnpm build` to confirm compilation is working correctly. You should see a folder `ui/dist` which contains the compiled output. +# Start documentation site +pnpm --filter @repo/docs dev -```bash -ui -└── dist - ├── button.d.ts <-- Types - ├── button.js <-- CommonJS version - ├── button.mjs <-- ES Modules version - └── button.d.mts <-- ES Modules version with Types -``` +# Build the component library +pnpm --filter @datum-cloud/datum-ui build -## Components +# Run all checks +pnpm --filter @datum-cloud/datum-ui typecheck +pnpm --filter @datum-cloud/datum-ui lint +pnpm --filter @datum-cloud/datum-ui test +``` -Each file inside of `ui/src` is a component inside our design system. For example: +> **Note:** Apps auto-build `@datum-cloud/datum-ui` before starting via a `predev` script. -```tsx:ui/src/Button.tsx -import * as React from 'react'; +--- -export interface ButtonProps { - children: React.ReactNode; -} +## Usage (Consumers) -export function Button(props: ButtonProps) { - return ; -} +Install the package: -Button.displayName = 'Button'; +```bash +npm install @datum-cloud/datum-ui +# or +yarn add @datum-cloud/datum-ui +# or +pnpm add @datum-cloud/datum-ui +# or +bun add @datum-cloud/datum-ui ``` -When adding a new file, ensure that its specifier is defined in `package.json` file: - -```json:ui/package.json -{ - "name": "@acme/ui", - "version": "0.0.0", - "sideEffects": false, - "exports":{ - "./button": { - "types": "./src/button.tsx", - "import": "./dist/button.mjs", - "require": "./dist/button.js" - } - // Add new component exports here - } +Wrap your app with `DatumProvider` and import styles: + +```tsx +import { DatumProvider, Button, Input } from '@datum-cloud/datum-ui' +import '@datum-cloud/datum-ui/styles' + +function App() { + return ( + + + + + ) } ``` -## Storybook - -Storybook provides us with an interactive UI playground for our components. This allows us to preview our components in the browser and instantly see changes when developing locally. This example preconfigures Storybook to: +### Entry Points -- Use Vite to bundle stories instantly (in milliseconds) -- Automatically find any stories inside the `stories/` folder -- Support using module path aliases like `@acme/ui` for imports -- Write MDX for component documentation pages +| Import Path | Description | +|---|---| +| `@datum-cloud/datum-ui` | All components, hooks, providers, and utilities | +| `@datum-cloud/datum-ui/components` | Components only (base + features) | +| `@datum-cloud/datum-ui/providers` | `DatumProvider` | +| `@datum-cloud/datum-ui/hooks` | `useCopyToClipboard`, `useDebounce` | +| `@datum-cloud/datum-ui/icons` | `CloseIcon`, `IconWrapper`, `SpinnerIcon` | +| `@datum-cloud/datum-ui/utils` | `cn` (className merge utility) | +| `@datum-cloud/datum-ui/styles` | Global CSS (fonts, tokens, component styles) | -For example, here's the included Story for our `Button` component: +### Peer Dependencies -```js:apps/docs/stories/button.stories.mdx -import { Button } from '@acme/ui/button'; -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +All peer dependencies are **optional** — install only what you use. - +> Replace `npm install` with `yarn add`, `pnpm add`, or `bun add` for your package manager. -# Button +```bash +# Core (required) +npm install react react-dom -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod. +# Forms +npm install @conform-to/react @conform-to/zod zod -## Props +# Maps +npm install leaflet react-leaflet leaflet-draw leaflet.fullscreen leaflet.markercluster react-leaflet-markercluster - +# Charts +npm install recharts -## Examples +# Date pickers +npm install react-day-picker date-fns date-fns-tz - - - - - +# Animations +npm install motion ``` -This example includes a few helpful Storybook scripts: +See the full peer dependency list in the [package README](packages/datum-ui/README.md). -- `pnpm dev`: Starts Storybook in dev mode with hot reloading at `localhost:6006` -- `pnpm build`: Builds the Storybook UI and generates the static HTML files -- `pnpm preview-storybook`: Starts a local server to view the generated Storybook UI +--- -## Versioning & Publishing Packages +## Component Overview -This example uses [Changesets](https://github.com/changesets/changesets) to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately. +### Base Components (30) -You'll need to create an `NPM_TOKEN` and `GITHUB_TOKEN` and add it to your GitHub repository settings to enable access to npm. It's also worth installing the [Changesets bot](https://github.com/apps/changeset-bot) on your repository. +Thin wrappers around shadcn/Radix primitives with Datum styling. -### Generating the Changelog +`Alert` · `Badge` · `Breadcrumb` · `Button` · `ButtonGroup` · `Calendar` · `Card` · `Chart` · `Checkbox` · `Collapsible` · `Command` · `Dialog` · `HoverCard` · `Input` · `InputGroup` · `Label` · `Map` · `PlaceAutocomplete` · `Popover` · `RadioGroup` · `Select` · `Separator` · `Sheet` · `Skeleton` · `Spinner` · `Switch` · `Table` · `Tabs` · `Textarea` · `Tooltip` · `Typography` · `VisuallyHidden` -To generate your changelog, run `pnpm changeset` locally: +### Feature Components (18) -1. **Which packages would you like to include?** – This shows which packages and changed and which have remained the same. By default, no packages are included. Press `space` to select the packages you want to include in the `changeset`. -1. **Which packages should have a major bump?** – Press `space` to select the packages you want to bump versions for. -1. If doing the first major version, confirm you want to release. -1. Write a summary for the changes. -1. Confirm the changeset looks as expected. -1. A new Markdown file will be created in the `changeset` folder with the summary and a list of the packages included. +Complex, fully-customized components with significant business logic. -### Releasing +`Autocomplete` · `AvatarStack` · `CalendarDatePicker` · `Dropdown` · `Dropzone` · `EmptyContent` · `FileInputButton` · `Form` · `Grid` · `InputNumber` · `InputWithAddons` · `LoaderOverlay` · `MoreActions` · `NProgress` · `PageTitle` · `Sidebar` · `Stepper` · `TagInput` · `TaskQueue` · `TimeRangePicker` · `Toast` -When you push your code to GitHub, the [GitHub Action](https://github.com/changesets/action) will run the `release` script defined in the root `package.json`: +For the complete component API with props, sub-components, and usage examples, see the [package README](packages/datum-ui/README.md). -```bash -turbo run build --filter=docs^... && changeset publish -``` +--- + +## Documentation -Turborepo runs the `build` script for all publishable packages (excluding docs) and publishes the packages to npm. By default, this example includes `acme` as the npm organization. To change this, do the following: +- **[Package README](packages/datum-ui/README.md)** — Full component catalog, API reference, and usage examples +- **[Documentation Site](apps/docs/)** — Component docs, guides, and live previews +- **[Storybook](apps/storybook/)** — Interactive component explorer -- Rename folders in `packages/*` to replace `acme` with your desired scope -- Search and replace `acme` with your desired scope -- Re-run `pnpm install` +--- -To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s +## Contributing -```diff -- "publishConfig": { -- "access": "public" -- }, +```bash +# 1. Create a feature branch +git checkout -b feat/my-feature + +# 2. Make changes and verify +pnpm --filter @datum-cloud/datum-ui build +pnpm --filter @datum-cloud/datum-ui typecheck +pnpm --filter @datum-cloud/datum-ui lint +pnpm --filter @datum-cloud/datum-ui test + +# 3. Add a changeset +pnpm changeset + +# 4. Commit and push +git add . +git commit -m "feat: description of changes" +git push -u origin feat/my-feature ``` + +## License + +MIT diff --git a/apps/docs/.eslintrc.cjs b/apps/docs/.eslintrc.cjs deleted file mode 100644 index a38cd223..00000000 --- a/apps/docs/.eslintrc.cjs +++ /dev/null @@ -1,4 +0,0 @@ -/** @type {import("eslint").Linter.Config} */ -module.exports = { - extends: ["@repo/eslint-config/storybook.js"], -}; diff --git a/apps/docs/.storybook/main.js b/apps/docs/.storybook/main.js deleted file mode 100644 index 5b157eb4..00000000 --- a/apps/docs/.storybook/main.js +++ /dev/null @@ -1,37 +0,0 @@ -import path from "node:path"; -import { fileURLToPath } from "node:url"; -import tailwindcss from "@tailwindcss/vite"; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - -const config = { - stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"], - framework: { - name: "@storybook/react-vite", - options: {}, - }, - - async viteFinal(config) { - config.plugins = [...(config.plugins || []), tailwindcss()]; - return { - ...config, - resolve: { - ...config.resolve, - alias: [ - ...(Array.isArray(config.resolve?.alias) ? config.resolve.alias : []), - { - find: /^@datum-cloud\/datum-ui$/, - replacement: path.resolve(__dirname, "../../../packages/datum-ui/src/index.ts"), - }, - ], - }, - define: { "process.env": {} }, - }; - }, - - docs: { - autodocs: true, - }, -}; - -export default config; diff --git a/apps/docs/.storybook/preview.tsx b/apps/docs/.storybook/preview.tsx deleted file mode 100644 index ed9432a7..00000000 --- a/apps/docs/.storybook/preview.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { Preview } from "@storybook/react"; -import { useEffect } from "react"; -import "../stories/styles.css"; - -const preview: Preview = { - decorators: [ - (Story) => { - useEffect(() => { - document.documentElement.classList.add("theme-alpha"); - return () => { - document.documentElement.classList.remove("theme-alpha"); - }; - }, []); - return ; - }, - ], - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, -}; - -export default preview; diff --git a/apps/docs/app/docs/[[...slug]]/page.tsx b/apps/docs/app/docs/[[...slug]]/page.tsx new file mode 100644 index 00000000..beb4a4c5 --- /dev/null +++ b/apps/docs/app/docs/[[...slug]]/page.tsx @@ -0,0 +1,45 @@ +import { DocsBody, DocsPage } from 'fumadocs-ui/page' +import { notFound } from 'next/navigation' + +import { source } from '@/lib/source' +import { getMDXComponents } from '@/mdx-components' + +interface PageProps { + params: Promise<{ slug?: string[] }> +} + +export default async function Page({ params }: PageProps) { + const { slug } = await params + const page = source.getPage(slug) + + if (!page) { + notFound() + } + + const MDX = page.data.body + + return ( + + + + + + ) +} + +export function generateStaticParams(): { slug: string[] }[] { + return source.generateParams() +} + +export async function generateMetadata({ params }: PageProps) { + const { slug } = await params + const page = source.getPage(slug) + if (!page) { + notFound() + } + + return { + title: page.data.title, + description: page.data.description, + } +} diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx new file mode 100644 index 00000000..ab9a42fd --- /dev/null +++ b/apps/docs/app/docs/layout.tsx @@ -0,0 +1,13 @@ +import type { ReactNode } from 'react' + +import { DocsLayout } from 'fumadocs-ui/layouts/docs' + +import { source } from '@/lib/source' + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css new file mode 100644 index 00000000..a7b7c340 --- /dev/null +++ b/apps/docs/app/globals.css @@ -0,0 +1 @@ +@import 'fumadocs-ui/style.css'; diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx new file mode 100644 index 00000000..f4393958 --- /dev/null +++ b/apps/docs/app/layout.tsx @@ -0,0 +1,23 @@ +import type { ReactNode } from 'react' + +import { RootProvider } from 'fumadocs-ui/provider/next' + +import { Providers } from '@/components/providers' +import './globals.css' + +export default function RootLayout({ children }: { children: ReactNode }) { + return ( + + + + {children} + + + + ) +} + +export const metadata = { + title: 'datum-ui', + description: 'Datum Cloud Design System Documentation', +} diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx new file mode 100644 index 00000000..23d8049f --- /dev/null +++ b/apps/docs/app/page.tsx @@ -0,0 +1,18 @@ +import Link from 'next/link' + +export default function HomePage() { + return ( +
+

datum-ui

+

+ Datum Cloud Design System +

+ + View Documentation + +
+ ) +} diff --git a/apps/docs/components/component-preview.tsx b/apps/docs/components/component-preview.tsx new file mode 100644 index 00000000..5eb204db --- /dev/null +++ b/apps/docs/components/component-preview.tsx @@ -0,0 +1,28 @@ +'use client' + +import type { ReactNode } from 'react' + +interface ComponentPreviewProps { + /** Accessible label for the preview area */ + name: string + /** The live component(s) to render */ + children: ReactNode + /** Additional CSS class for the preview container */ + className?: string +} + +/** + * Renders live datum-ui components in a bordered preview container. + * Used in MDX docs to show interactive component examples. + */ +export function ComponentPreview({ name, children, className }: ComponentPreviewProps) { + return ( +
+ {children} +
+ ) +} diff --git a/apps/docs/components/providers.tsx b/apps/docs/components/providers.tsx new file mode 100644 index 00000000..3829ea93 --- /dev/null +++ b/apps/docs/components/providers.tsx @@ -0,0 +1,9 @@ +'use client' + +import type { ReactNode } from 'react' + +import { DatumProvider } from '@datum-cloud/datum-ui' + +export function Providers({ children }: { children: ReactNode }) { + return {children} +} diff --git a/apps/docs/components/ui.tsx b/apps/docs/components/ui.tsx new file mode 100644 index 00000000..b38b86b1 --- /dev/null +++ b/apps/docs/components/ui.tsx @@ -0,0 +1,10 @@ +'use client' + +/** + * Client-side re-export of datum-ui components. + * + * datum-ui's bundle includes React hooks at the top level, which makes it + * incompatible with Next.js server components. MDX files must import from + * this wrapper instead of '@datum-cloud/datum-ui' directly. + */ +export * from '@datum-cloud/datum-ui' diff --git a/apps/docs/content/docs/components/base/alert.mdx b/apps/docs/content/docs/components/base/alert.mdx new file mode 100644 index 00000000..dbc99f16 --- /dev/null +++ b/apps/docs/content/docs/components/base/alert.mdx @@ -0,0 +1,114 @@ +--- +title: Alert +description: Display contextual feedback messages with semantic variants and optional dismiss functionality. +--- + +import { Alert, AlertTitle, AlertDescription } from '@/components/ui' + +## Overview + +The Alert component displays short, important messages to the user. It supports seven semantic variants for different contexts (default, secondary, outline, destructive, success, info, warning) and an optional close button for dismissible alerts. + +## Dependencies + +No additional dependencies required — this component uses only React and Tailwind CSS. + +## Usage + + + + Heads up! + You can add components to your app using the CLI. + + + +```tsx +import { Alert, AlertTitle, AlertDescription } from '@datum-cloud/datum-ui' + + + Heads up! + You can add components to your app using the CLI. + +``` + +## Examples + +### Variants + + +
+ + Default + This is a default alert. + + + Secondary + This is a secondary alert. + + + Outline + This is an outline alert. + + + Destructive + Your session has expired. Please log in again. + + + Success + Your changes have been saved successfully. + + + Info + A new software update is available. + + + Warning + Your account is approaching its storage limit. + +
+ + +```tsx +... +... +... +... +``` + +### Closable + +Set `closable` to show a dismiss button. Provide `onClose` for custom handling, or omit it to auto-hide the alert. + + + + Dismissible + Click the close button to dismiss this alert. + + + +```tsx + console.log('closed')}> + Dismissible + Click the close button to dismiss this alert. + +``` + +## Props + +### Alert + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `variant` | `'default' \| 'secondary' \| 'outline' \| 'destructive' \| 'success' \| 'info' \| 'warning'` | `'default'` | Semantic color variant | +| `closable` | `boolean` | `false` | Show a close button | +| `onClose` | `() => void` | -- | Callback on dismiss; if omitted the alert auto-hides | +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Alert content (typically AlertTitle + AlertDescription) | + +### AlertTitle + +Renders a bold heading line inside the alert. Accepts all `div` HTML attributes. + +### AlertDescription + +Renders muted body text inside the alert. Accepts all `div` HTML attributes. diff --git a/apps/docs/content/docs/components/base/badge.mdx b/apps/docs/content/docs/components/base/badge.mdx new file mode 100644 index 00000000..52ccf6a5 --- /dev/null +++ b/apps/docs/content/docs/components/base/badge.mdx @@ -0,0 +1,234 @@ +--- +title: Badge +description: A flexible badge component for displaying labels, status indicators, and tags with multiple type and theme variants. +--- + +import { Badge } from '@/components/ui' + +## Overview + +Badge is a lightweight inline element used to display short labels, status indicators, categories, or tags. It supports nine semantic types and three visual themes, making it adaptable for a wide range of use cases such as status flags, counters, and categorization labels. + +## Dependencies + +No additional dependencies required — this component uses only React and Tailwind CSS. + +## Usage + + + Badge + + +```tsx +import { Badge } from '@datum-cloud/datum-ui' + +Badge +``` + +## Examples + +### Types + +The `type` prop controls the semantic color of the badge. Each type maps to a distinct color defined by design tokens. + + +
+ Primary + Secondary + Tertiary + Quaternary + Info + Warning + Danger + Success + Muted +
+ + +```tsx +Primary +Secondary +Tertiary +Quaternary +Info +Warning +Danger +Success +Muted +``` + +### Themes + +The `theme` prop controls the visual style of the badge. Choose between a filled background, a bordered outline, or a subtle tinted appearance. + + +
+ Solid + Outline + Light +
+ + +```tsx +Solid +Outline +Light +``` + +### Type and Theme Combinations + +Every type can be combined with every theme. Here is a grid showing all combinations. + + +
+
+ Primary Solid + Primary Outline + Primary Light +
+
+ Secondary Solid + Secondary Outline + Secondary Light +
+
+ Success Solid + Success Outline + Success Light +
+
+ Danger Solid + Danger Outline + Danger Light +
+
+ Warning Solid + Warning Outline + Warning Light +
+
+ + +```tsx +Primary Solid +Primary Outline +Primary Light + +Secondary Solid +Secondary Outline +Secondary Light + +Success Solid +Success Outline +Success Light + +Danger Solid +Danger Outline +Danger Light + +Warning Solid +Warning Outline +Warning Light +``` + +### Status Indicators + +Badges work well as status indicators in lists, tables, or cards. + + +
+ Active + Pending + Failed + In Progress + Archived +
+ + +```tsx +Active +Pending +Failed +In Progress +Archived +``` + +### With Icons + +Since Badge renders as a `div` with `inline-flex`, you can include icons alongside text by adding a `gap` class. + + +
+ + + Verified + + + + Rejected + + + + Caution + +
+ + +```tsx +import { CheckCircle, XCircle, AlertTriangle } from 'lucide-react' + + + + Verified + + + + Rejected + + + + Caution + +``` + +### Custom Styling + +Pass additional Tailwind classes via the `className` prop to customize padding, borders, shadows, or any other styling. + + +
+ Larger Padding + Thicker Border + With Shadow +
+ + +```tsx +Larger Padding +Thicker Border +With Shadow +``` + +## Props + +### Badge + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `type` | `'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'info' \| 'warning' \| 'danger' \| 'success' \| 'muted'` | `'muted'` | Semantic color type of the badge | +| `theme` | `'solid' \| 'outline' \| 'light'` | `'solid'` | Visual style theme of the badge | +| `className` | `string` | - | Additional CSS classes to apply | +| `children` | `React.ReactNode` | - | Badge content | +| `...props` | `React.HTMLAttributes` | - | All standard HTML div attributes | + +### badgeVariants + +The `badgeVariants` utility is also exported for use cases where you need badge styling without the Badge component wrapper. + +```tsx +import { badgeVariants } from '@datum-cloud/datum-ui' + +
+ Custom Element +
+``` diff --git a/apps/docs/content/docs/components/base/breadcrumb.mdx b/apps/docs/content/docs/components/base/breadcrumb.mdx new file mode 100644 index 00000000..bd36addc --- /dev/null +++ b/apps/docs/content/docs/components/base/breadcrumb.mdx @@ -0,0 +1,97 @@ +--- +title: Breadcrumb +description: A navigational trail showing the user's current location within a hierarchy. +--- + +## Overview + +Breadcrumb renders a horizontal list of links representing the user's current path within the application hierarchy. It follows the WAI-ARIA breadcrumb pattern with `nav[aria-label="breadcrumb"]` and `aria-current="page"` on the current page. Built on Radix UI's Slot for polymorphic link rendering. + +## Dependencies + +This component requires the following packages: + +```package-install +@radix-ui/react-slot +``` + +## Usage + +```tsx +import { + Breadcrumb, BreadcrumbList, BreadcrumbItem, + BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator +} from '@datum-cloud/datum-ui' + + + + + Home + + + + Projects + + + + Settings + + + +``` + +## Examples + +### With Framework Links + +Use `asChild` on `BreadcrumbLink` to render your framework's link component instead of a plain ``: + +```tsx +import { Link } from '@remix-run/react' + + + Projects + +``` + +### With Ellipsis + +For deep hierarchies, collapse middle items with `BreadcrumbEllipsis`: + +```tsx +import { BreadcrumbEllipsis } from '@datum-cloud/datum-ui' + + + + + Home + + + + + + + + Services + + + + API Gateway + + + +``` + +## Props + +### Sub-components + +| Component | Description | +|-----------|-------------| +| `Breadcrumb` | Root `nav` element with `aria-label="breadcrumb"` | +| `BreadcrumbList` | Ordered list (`ol`) container | +| `BreadcrumbItem` | List item (`li`) wrapper | +| `BreadcrumbLink` | Clickable link; supports `asChild` for custom link components | +| `BreadcrumbPage` | Current page indicator (non-interactive, `aria-current="page"`) | +| `BreadcrumbSeparator` | Chevron separator between items (customizable via `children`) | +| `BreadcrumbEllipsis` | Collapsed indicator for deep hierarchies | diff --git a/apps/docs/content/docs/components/base/button-group.mdx b/apps/docs/content/docs/components/base/button-group.mdx new file mode 100644 index 00000000..a662aa24 --- /dev/null +++ b/apps/docs/content/docs/components/base/button-group.mdx @@ -0,0 +1,18 @@ +--- +title: Button Group +description: Group related buttons together with consistent spacing and styling. +--- + +# Button Group + +Re-exported from shadcn/ui. Groups related buttons together. + +## Dependencies + +No additional dependencies required — this component uses only React and Tailwind CSS. + +## Usage + +```tsx +import { ButtonGroup } from '@datum-cloud/datum-ui' +``` diff --git a/apps/docs/content/docs/components/base/button.mdx b/apps/docs/content/docs/components/base/button.mdx new file mode 100644 index 00000000..e414e4c4 --- /dev/null +++ b/apps/docs/content/docs/components/base/button.mdx @@ -0,0 +1,134 @@ +--- +title: Button +description: Trigger actions and events with configurable types, themes, sizes, and states. +--- + +import { Button } from '@/components/ui' + +## Overview + +The Button component supports multiple visual types (primary, secondary, tertiary, quaternary, danger, warning, success) combined with themes (solid, outline, light, borderless, link) for flexible styling. It includes loading states, icon support, and full-width layout. + +## Dependencies + +This component requires the following packages: + +```package-install +@radix-ui/react-slot +``` + +## Usage + + + + + +```tsx +import { Button } from '@datum-cloud/datum-ui' + + +``` + +## Examples + +### Types + + +
+ + + + + + + +
+ + +```tsx + + + + + + + +``` + +### Themes + + +
+ + + + + +
+ + +```tsx + + + + + +``` + +### Sizes + + +
+ + + + +
+ + +```tsx + + + + +``` + +### Loading State + + +
+ + +
+ + +```tsx + +``` + +### Full Width + + +
+ +
+ + +```tsx + +``` + +## Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `type` | `'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'warning' \| 'danger' \| 'success'` | `'primary'` | Color type | +| `theme` | `'solid' \| 'light' \| 'outline' \| 'borderless' \| 'link'` | `'solid'` | Visual theme | +| `size` | `'xs' \| 'small' \| 'default' \| 'large' \| 'icon' \| 'link'` | `'default'` | Button size | +| `block` | `boolean` | `false` | Full width | +| `loading` | `boolean` | `false` | Show loading spinner | +| `icon` | `ReactNode` | -- | Icon element | +| `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement | +| `loadingIcon` | `ReactNode` | -- | Custom loading spinner | +| `disabled` | `boolean` | `false` | Disabled state | +| `htmlType` | `'button' \| 'submit' \| 'reset'` | `'button'` | HTML button type | diff --git a/apps/docs/content/docs/components/base/calendar.mdx b/apps/docs/content/docs/components/base/calendar.mdx new file mode 100644 index 00000000..d4164048 --- /dev/null +++ b/apps/docs/content/docs/components/base/calendar.mdx @@ -0,0 +1,69 @@ +--- +title: Calendar +description: A date picker calendar built on react-day-picker with Datum styling. +--- + +import { Calendar } from '@/components/ui' + +## Overview + +The `Calendar` component renders an interactive month calendar. It supports single-date selection, date ranges, outside-day display, and multiple months. Built on `react-day-picker` v4 with Datum design tokens applied to navigation, day cells, and range highlighting. + +## Dependencies + +This component requires the following packages: + +```package-install +react-day-picker +``` + +## Usage + + + + + +```tsx +import { Calendar } from '@datum-cloud/datum-ui' + + +``` + +## Examples + +### Single Date Selection + +```tsx +const [date, setDate] = useState(new Date()) + + +``` + +### Multi-Month + +```tsx + +``` + +## Props + +The `Calendar` component accepts all `react-day-picker` `DayPicker` props plus the following. + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `mode` | `'single' \| 'multiple' \| 'range'` | -- | Selection mode | +| `selected` | `Date \| Date[] \| DateRange` | -- | Controlled selected date(s) | +| `onSelect` | `(date) => void` | -- | Callback when selection changes | +| `showOutsideDays` | `boolean` | `true` | Show days from adjacent months | +| `numberOfMonths` | `number` | `1` | Number of months to display | +| `captionLayout` | `'label' \| 'dropdown'` | `'label'` | Month/year caption style | +| `buttonVariant` | `'ghost' \| 'outline' \| ...` | `'ghost'` | Navigation button variant | +| `className` | `string` | -- | Additional CSS classes | +| `classNames` | `object` | -- | Override individual element classes | diff --git a/apps/docs/content/docs/components/base/card.mdx b/apps/docs/content/docs/components/base/card.mdx new file mode 100644 index 00000000..97aaa6b2 --- /dev/null +++ b/apps/docs/content/docs/components/base/card.mdx @@ -0,0 +1,206 @@ +--- +title: Card +description: A container component for grouping related content with optional header, footer, and description sections. +--- + +import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui' + +## Overview + +The Card component provides a styled container for grouping related content. It extends the shadcn Card with Datum-specific styling and includes sub-components for structured layouts: `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter`. + +## Dependencies + +No additional dependencies required — this component uses only React and Tailwind CSS. + +## Usage + + + + + Card Title + Card description providing additional context. + + +

+ This is the main content area of the card. +

+ + + + +```tsx +import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@datum-cloud/datum-ui' + + + + Card Title + Card description providing additional context. + + +

This is the main content area of the card.

+ + +``` + +## Examples + +### Simple Card + +A card with content only, without header or footer. + + + + +

+ A simple card with only content, no header or footer. +

+ + + + +```tsx + + +

A simple card with only content, no header or footer.

+ + +``` + +### With Footer Actions + +Use `CardFooter` to place actions at the bottom of the card. + + + + + Project Settings + Manage your project configuration and preferences. + + +

+ Review and update project settings below. Changes will be applied immediately after saving. +

+ + + + + + + + +```tsx +import { Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@datum-cloud/datum-ui' + + + + Project Settings + Manage your project configuration and preferences. + + +

Review and update project settings below.

+ + + + + + +``` + +### Full Example + +A complete card showcasing all sub-components together. + + + + + Notifications + Configure how you receive notifications. + + +
+
+ Email notifications + Enabled +
+
+ Push notifications + Disabled +
+
+ + + + + + + +```tsx + + + Notifications + Configure how you receive notifications. + + +
+
+ Email notifications + Enabled +
+
+ Push notifications + Disabled +
+
+ + + + + +``` + +## Props + +### Card + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Card content, typically sub-components | + +All standard `div` HTML attributes are also supported. + +### CardHeader + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Typically contains `CardTitle` and `CardDescription` | + +### CardTitle + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Title text | + +### CardDescription + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Description text | + +### CardContent + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Main card body content | + +### CardFooter + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `children` | `ReactNode` | -- | Footer content, typically actions | diff --git a/apps/docs/content/docs/components/base/chart.mdx b/apps/docs/content/docs/components/base/chart.mdx new file mode 100644 index 00000000..68a300e0 --- /dev/null +++ b/apps/docs/content/docs/components/base/chart.mdx @@ -0,0 +1,22 @@ +--- +title: Chart +description: Data visualization components built on Recharts. +--- + +# Chart + +Re-exported from shadcn/ui. Provides chart components built on Recharts. + +## Dependencies + +This component requires the following packages: + +```package-install +recharts +``` + +## Usage + +```tsx +import { ChartContainer, ChartTooltip, ChartLegend } from '@datum-cloud/datum-ui' +``` diff --git a/apps/docs/content/docs/components/base/checkbox.mdx b/apps/docs/content/docs/components/base/checkbox.mdx new file mode 100644 index 00000000..de9f9313 --- /dev/null +++ b/apps/docs/content/docs/components/base/checkbox.mdx @@ -0,0 +1,83 @@ +--- +title: Checkbox +description: A toggleable checkbox control built on Radix UI Checkbox. +--- + +import { Checkbox, Label } from '@/components/ui' + +## Overview + +The `Checkbox` component renders an accessible checkbox input. It supports checked, unchecked, and indeterminate states, and is styled with Datum design tokens. + +## Dependencies + +This component requires the following packages: + +```package-install +@radix-ui/react-checkbox +``` + +## Usage + + + + + +```tsx +import { Checkbox } from '@datum-cloud/datum-ui' + + +``` + +## Examples + +### Checked by Default + + + + + +```tsx + +``` + +### With Label + + +
+ + +
+ + +```tsx +
+ + +
+``` + +### Disabled + + + + + +```tsx + +``` + +## Props + +The `Checkbox` component accepts all props from Radix UI's `Checkbox.Root`. + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `checked` | `boolean \| 'indeterminate'` | -- | Controlled checked state | +| `defaultChecked` | `boolean` | `false` | Default checked state | +| `onCheckedChange` | `(checked: boolean \| 'indeterminate') => void` | -- | Callback when state changes | +| `disabled` | `boolean` | `false` | Disables the checkbox | +| `required` | `boolean` | `false` | Marks as required in a form | +| `name` | `string` | -- | Name for form submission | +| `value` | `string` | -- | Value for form submission | +| `className` | `string` | -- | Additional CSS classes | diff --git a/apps/docs/content/docs/components/base/collapsible.mdx b/apps/docs/content/docs/components/base/collapsible.mdx new file mode 100644 index 00000000..b31c2e29 --- /dev/null +++ b/apps/docs/content/docs/components/base/collapsible.mdx @@ -0,0 +1,79 @@ +--- +title: Collapsible +description: A component that toggles the visibility of its content with expand/collapse behavior. +--- + +## Overview + +Collapsible is a thin wrapper around Radix UI's Collapsible primitive. It lets users expand and collapse a section of content, useful for FAQs, advanced settings panels, or any progressive-disclosure pattern. + +## Dependencies + +This component requires the following packages: + +```package-install +@radix-ui/react-collapsible +``` + +## Usage + +```tsx +import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@datum-cloud/datum-ui' +import { Button } from '@datum-cloud/datum-ui' +import { ChevronsUpDown } from 'lucide-react' + + + + + + +
+ Advanced configuration options go here. +
+ + +``` + +## Examples + +### Controlled + +Use `open` and `onOpenChange` for controlled state: + +```tsx +const [isOpen, setIsOpen] = useState(false) + + + + + + +

+ Detailed information revealed on demand. +

+ + +``` + +## Props + +### Collapsible + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `open` | `boolean` | -- | Controlled open state | +| `onOpenChange` | `(open: boolean) => void` | -- | Callback when state changes | +| `defaultOpen` | `boolean` | `false` | Uncontrolled initial state | +| `disabled` | `boolean` | `false` | Prevent toggling | + +### Sub-components + +| Component | Description | +|-----------|-------------| +| `CollapsibleTrigger` | The element that toggles the content | +| `CollapsibleContent` | The section that expands and collapses | diff --git a/apps/docs/content/docs/components/base/command.mdx b/apps/docs/content/docs/components/base/command.mdx new file mode 100644 index 00000000..92796945 --- /dev/null +++ b/apps/docs/content/docs/components/base/command.mdx @@ -0,0 +1,126 @@ +--- +title: Command +description: A searchable command palette for quick navigation and action execution. +--- + +## Overview + +Command provides a searchable, keyboard-navigable list of actions, inspired by the command palettes in VS Code and Linear. It is built on [cmdk](https://cmdk.paco.me/) and can be used inline or inside a dialog overlay (`CommandDialog`). Items are automatically filtered as the user types. + +## Dependencies + +This component requires the following packages: + +```package-install +cmdk +``` + +## Usage + +```tsx +import { + Command, CommandInput, CommandList, + CommandEmpty, CommandGroup, CommandItem +} from '@datum-cloud/datum-ui' + + + + + No results found. + + Create Project + Deploy Service + View Logs + + + +``` + +## Examples + +### Command Dialog + +Wrap the command palette in a `CommandDialog` for a modal overlay, typically bound to a keyboard shortcut like `Ctrl+K`: + +```tsx +import { CommandDialog, CommandInput, CommandList, CommandGroup, CommandItem } from '@datum-cloud/datum-ui' + +function CommandMenu() { + const [open, setOpen] = useState(false) + + useEffect(() => { + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { + e.preventDefault() + setOpen((prev) => !prev) + } + } + document.addEventListener('keydown', onKeyDown) + return () => document.removeEventListener('keydown', onKeyDown) + }, []) + + return ( + + + + + Dashboard + Projects + Settings + + + Create Project + Invite Member + + + + ) +} +``` + +### With Icons and Shortcuts + +```tsx +import { Settings, Plus, Users } from 'lucide-react' + + + + Settings + Ctrl+, + + + + New Project + Ctrl+N + +``` + +## Props + +### Command + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes | +| `filter` | `(value: string, search: string) => number` | -- | Custom filter function | + +### CommandDialog + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `open` | `boolean` | -- | Controlled open state | +| `onOpenChange` | `(open: boolean) => void` | -- | Callback when open state changes | +| `title` | `string` | `'Command Palette'` | Accessible dialog title (visually hidden) | +| `description` | `string` | `'Search for a command to run...'` | Accessible dialog description (visually hidden) | + +### Sub-components + +| Component | Description | +|-----------|-------------| +| `CommandInput` | Search input with a built-in search icon | +| `CommandList` | Scrollable container for command items (max 300px height) | +| `CommandEmpty` | Shown when no items match the search query | +| `CommandGroup` | Groups items under a heading | +| `CommandItem` | A single selectable command | +| `CommandSeparator` | Visual divider between groups | +| `CommandShortcut` | Right-aligned keyboard shortcut label | diff --git a/apps/docs/content/docs/components/base/dialog.mdx b/apps/docs/content/docs/components/base/dialog.mdx new file mode 100644 index 00000000..14106146 --- /dev/null +++ b/apps/docs/content/docs/components/base/dialog.mdx @@ -0,0 +1,122 @@ +--- +title: Dialog +description: A modal overlay for confirmations, forms, and focused user interactions. +--- + +import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, Button, Input, Label } from '@/components/ui' + +## Overview + +The Dialog component renders a centered modal panel with a semi-transparent backdrop. It composes Radix UI's Dialog primitive with Datum styling -- blur overlay, rounded content panel, and built-in close button. Use it for confirmations, short forms, or any interaction that requires focused attention. + +## Dependencies + +This component requires the following packages: + +```package-install +@radix-ui/react-dialog +``` + +## Usage + +```tsx +import { + Dialog, DialogTrigger, DialogContent, + DialogHeader, DialogFooter, DialogTitle, + DialogDescription, DialogClose, Button +} from '@datum-cloud/datum-ui' + + + + + + + + Invite Team Member + They will receive an email invitation. + + + + + + + + + +``` + +## Examples + +### With Form + +Add form fields between the header and footer for data-entry dialogs: + +```tsx + + + + + + + Create API Key + Generate a new API key. + +
+ + +
+ + + + + + + + +``` + +### Destructive Confirmation + +```tsx + + + + + + + Delete Project + This action cannot be undone. + + + + + + + + + +``` + +## Props + +### Dialog + +Root component. Controls open/close state. + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `open` | `boolean` | -- | Controlled open state | +| `onOpenChange` | `(open: boolean) => void` | -- | Called when open state changes | +| `defaultOpen` | `boolean` | `false` | Uncontrolled initial open state | + +### DialogContent + +The modal panel. Renders inside a portal with an overlay and a built-in close button. + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `className` | `string` | -- | Additional CSS classes for the panel | + +### Sub-components + +`DialogTrigger`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, and `DialogClose` are compositional wrappers -- see the examples above for usage patterns. diff --git a/apps/docs/content/docs/components/base/hover-card.mdx b/apps/docs/content/docs/components/base/hover-card.mdx new file mode 100644 index 00000000..ec7b5204 --- /dev/null +++ b/apps/docs/content/docs/components/base/hover-card.mdx @@ -0,0 +1,74 @@ +--- +title: HoverCard +description: A floating preview card that appears on hover over a trigger element. +--- + +## Overview + +HoverCard shows a floating preview card when the user hovers over a trigger element. It is useful for displaying supplementary information (user profiles, resource summaries, link previews) without requiring a click. Built on Radix UI's HoverCard primitive. + +## Dependencies + +This component requires the following packages: + +```package-install +@radix-ui/react-hover-card +``` + +## Usage + +```tsx +import { HoverCard, HoverCardTrigger, HoverCardContent } from '@datum-cloud/datum-ui' + + + + @sarah + + +
+

Sarah Lin

+

+ Platform engineer. Joined March 2024. +

+
+ + +``` + +## Examples + +### Resource Preview + +```tsx + + + us-east-1-prod + + +
+

Production Cluster

+

Region: us-east-1

+

Replicas: 3 / 3 healthy

+

Last deployed: 2 hours ago

+
+ + +``` + +## Props + +### HoverCardContent + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `align` | `'start' \| 'center' \| 'end'` | `'center'` | Horizontal alignment relative to trigger | +| `sideOffset` | `number` | `4` | Distance from the trigger in pixels | +| `className` | `string` | -- | Additional CSS classes | + +### Sub-components + +| Component | Description | +|-----------|-------------| +| `HoverCard` | Root -- manages hover state with open/close delay | +| `HoverCardTrigger` | The element that activates the card on hover | +| `HoverCardContent` | The floating preview panel | diff --git a/apps/docs/content/docs/components/base/input-group.mdx b/apps/docs/content/docs/components/base/input-group.mdx new file mode 100644 index 00000000..c396a1d1 --- /dev/null +++ b/apps/docs/content/docs/components/base/input-group.mdx @@ -0,0 +1,18 @@ +--- +title: Input Group +description: Group input elements with labels, addons, and icons. +--- + +# Input Group + +Re-exported from shadcn/ui. Groups input elements with labels and addons. + +## Dependencies + +No additional dependencies required — this component uses only React and Tailwind CSS. + +## Usage + +```tsx +import { InputGroup } from '@datum-cloud/datum-ui' +``` diff --git a/apps/docs/content/docs/components/base/input.mdx b/apps/docs/content/docs/components/base/input.mdx new file mode 100644 index 00000000..35837d63 --- /dev/null +++ b/apps/docs/content/docs/components/base/input.mdx @@ -0,0 +1,124 @@ +--- +title: Input +description: A styled text input field for capturing user input with built-in focus and error states. +--- + +import { Input } from '@/components/ui' + +## Overview + +The `Input` component wraps a standard HTML `` element with Datum design tokens for consistent styling across your application. It supports all native input types, provides visual feedback for focus and invalid states, and integrates with the Datum theming system. + +## Dependencies + +No additional dependencies required — this component uses only React and Tailwind CSS. + +## Usage + +```tsx +import { Input } from '@datum-cloud/datum-ui' + + +``` + +## Examples + +### Default + +A basic text input with placeholder text. + +```tsx + +``` + +### Email Input + +Use the `type` prop to render different input types. + +```tsx + +``` + +### Password Input + +```tsx + +``` + +### Number Input + +```tsx + +``` + +### Disabled + +Set the `disabled` prop to prevent interaction. The input renders with reduced opacity and a not-allowed cursor. + +```tsx + +``` + +### Read-Only + +Use `readOnly` to display a value that cannot be edited. + +```tsx + +``` + +### Invalid State + +Add `aria-invalid` to trigger the destructive border style, typically used with form validation. + +```tsx + +``` + +### With Custom Class + +Pass a `className` prop to extend or override the default styles. + +```tsx + +``` + +### File Input + +The component supports file inputs with styled file button text. + +```tsx + +``` + +## Props + +The `Input` component accepts all standard HTML `` attributes via `React.ComponentProps<'input'>`. + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `type` | `string` | `'text'` | The HTML input type (`text`, `email`, `password`, `number`, `file`, etc.) | +| `placeholder` | `string` | — | Placeholder text displayed when the input is empty | +| `disabled` | `boolean` | `false` | Disables the input, preventing interaction | +| `readOnly` | `boolean` | `false` | Makes the input read-only | +| `value` | `string \| number` | — | The controlled value of the input | +| `defaultValue` | `string \| number` | — | The uncontrolled default value | +| `onChange` | `(e: ChangeEvent) => void` | — | Callback fired when the input value changes | +| `className` | `string` | — | Additional CSS classes to merge with default styles | +| `ref` | `RefObject` | — | Ref forwarded to the underlying `` element | +| `aria-invalid` | `boolean \| string` | — | Marks the input as invalid, applying a destructive border style | + +## Styling + +The Input component uses the following Datum design tokens: + +| Token | Purpose | +|-------|---------| +| `--input-background` | Input background color (applied at 50% opacity) | +| `--input-foreground` | Text color | +| `--input-border` | Default border color | +| `--input-placeholder` | Placeholder text color | +| `--input-focus-border` | Border color on focus | +| `--input-focus-shadow` | Shadow applied on focus | + +Override these tokens in your theme to customize input appearance globally. See [Theming](/docs/theming) for details. diff --git a/apps/docs/content/docs/components/base/label.mdx b/apps/docs/content/docs/components/base/label.mdx new file mode 100644 index 00000000..5a682277 --- /dev/null +++ b/apps/docs/content/docs/components/base/label.mdx @@ -0,0 +1,60 @@ +--- +title: Label +description: An accessible text label for form controls, built on Radix UI Label. +--- + +import { Label, Input } from '@/components/ui' + +## Overview + +The `Label` component renders an accessible `