@cratis/components 1.10.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +475 -4
- package/dist/cjs/CommandDialog/CommandDialog.js +94 -4
- package/dist/cjs/CommandDialog/CommandDialog.js.map +1 -1
- package/dist/cjs/CommandDialog/CommandStepper.js +63 -3
- package/dist/cjs/CommandDialog/CommandStepper.js.map +1 -1
- package/dist/cjs/CommandDialog/StepperCommandDialog.js +95 -6
- package/dist/cjs/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/cjs/CommandForm/fields/CalendarField.js +14 -1
- package/dist/cjs/CommandForm/fields/CalendarField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/CheckboxField.js +10 -1
- package/dist/cjs/CommandForm/fields/CheckboxField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/ChipsField.js +11 -1
- package/dist/cjs/CommandForm/fields/ChipsField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/ColorPickerField.js +17 -1
- package/dist/cjs/CommandForm/fields/ColorPickerField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/DropdownField.js +16 -1
- package/dist/cjs/CommandForm/fields/DropdownField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/InputTextField.js +41 -1
- package/dist/cjs/CommandForm/fields/InputTextField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/MultiSelectField.js +13 -1
- package/dist/cjs/CommandForm/fields/MultiSelectField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/NumberField.js +11 -1
- package/dist/cjs/CommandForm/fields/NumberField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/RadioButtonField.js +23 -0
- package/dist/cjs/CommandForm/fields/RadioButtonField.js.map +1 -0
- package/dist/cjs/CommandForm/fields/RadioGroupField.js +40 -0
- package/dist/cjs/CommandForm/fields/RadioGroupField.js.map +1 -0
- package/dist/cjs/CommandForm/fields/SliderField.js +10 -1
- package/dist/cjs/CommandForm/fields/SliderField.js.map +1 -1
- package/dist/cjs/CommandForm/fields/TextAreaField.js +12 -1
- package/dist/cjs/CommandForm/fields/TextAreaField.js.map +1 -1
- package/dist/cjs/CommandForm/index.js +4 -0
- package/dist/cjs/CommandForm/index.js.map +1 -1
- package/dist/cjs/Common/CratisComponentsProvider.js +44 -0
- package/dist/cjs/Common/CratisComponentsProvider.js.map +1 -0
- package/dist/cjs/Common/ErrorBoundary.js +32 -0
- package/dist/cjs/Common/ErrorBoundary.js.map +1 -1
- package/dist/cjs/Common/FormElement.css +26 -0
- package/dist/cjs/Common/FormElement.js +14 -1
- package/dist/cjs/Common/FormElement.js.map +1 -1
- package/dist/cjs/Common/Page.js +13 -0
- package/dist/cjs/Common/Page.js.map +1 -1
- package/dist/cjs/Common/Tooltip.css +3 -3
- package/dist/cjs/Common/index.js +4 -0
- package/dist/cjs/Common/index.js.map +1 -1
- package/dist/cjs/DataPage/DataPage.js +113 -8
- package/dist/cjs/DataPage/DataPage.js.map +1 -1
- package/dist/cjs/DataTables/DataTableForObservableQuery.js +65 -6
- package/dist/cjs/DataTables/DataTableForObservableQuery.js.map +1 -1
- package/dist/cjs/DataTables/DataTableForQuery.js +62 -6
- package/dist/cjs/DataTables/DataTableForQuery.js.map +1 -1
- package/dist/cjs/Dialogs/BusyIndicatorDialog.js +47 -0
- package/dist/cjs/Dialogs/BusyIndicatorDialog.js.map +1 -1
- package/dist/cjs/Dialogs/Dialog.js +79 -6
- package/dist/cjs/Dialogs/Dialog.js.map +1 -1
- package/dist/cjs/Dropdown/Dropdown.js +13 -0
- package/dist/cjs/Dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/ObjectContentEditor/ObjectContentEditor.js +37 -21
- package/dist/cjs/ObjectContentEditor/ObjectContentEditor.js.map +1 -1
- package/dist/cjs/ObjectNavigationalBar/ObjectNavigationalBar.css +6 -0
- package/dist/cjs/ObjectNavigationalBar/ObjectNavigationalBar.js +14 -2
- package/dist/cjs/ObjectNavigationalBar/ObjectNavigationalBar.js.map +1 -1
- package/dist/cjs/PivotViewer/PivotViewer.css +131 -134
- package/dist/cjs/PivotViewer/PivotViewer.js +19 -0
- package/dist/cjs/PivotViewer/PivotViewer.js.map +1 -1
- package/dist/cjs/PivotViewer/components/Spinner.css +8 -8
- package/dist/cjs/SchemaEditor/NameCell.js +2 -2
- package/dist/cjs/SchemaEditor/NameCell.js.map +1 -1
- package/dist/cjs/SchemaEditor/SchemaEditor.js +15 -3
- package/dist/cjs/SchemaEditor/SchemaEditor.js.map +1 -1
- package/dist/cjs/SchemaEditor/SchemaEditor.module.css +5 -1
- package/dist/cjs/SchemaEditor/TypeCell.js +3 -3
- package/dist/cjs/SchemaEditor/TypeCell.js.map +1 -1
- package/dist/cjs/TimeMachine/EventsView.css +17 -17
- package/dist/cjs/TimeMachine/EventsView.js +13 -2
- package/dist/cjs/TimeMachine/EventsView.js.map +1 -1
- package/dist/cjs/TimeMachine/Properties.css +57 -0
- package/dist/cjs/TimeMachine/Properties.js +9 -28
- package/dist/cjs/TimeMachine/Properties.js.map +1 -1
- package/dist/cjs/TimeMachine/ReadModelView.js +10 -0
- package/dist/cjs/TimeMachine/ReadModelView.js.map +1 -1
- package/dist/cjs/TimeMachine/TimeMachine.css +38 -18
- package/dist/cjs/Toolbar/Toolbar.css +34 -17
- package/dist/cjs/Toolbar/ToolbarLayout.js +19 -20
- package/dist/cjs/Toolbar/ToolbarLayout.js.map +1 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/tailwind-utilities.css +444 -7
- package/dist/cjs/tokens.css +83 -0
- package/dist/esm/CommandDialog/CommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/CommandDialog.js +94 -4
- package/dist/esm/CommandDialog/CommandDialog.js.map +1 -1
- package/dist/esm/CommandDialog/CommandStepper.d.ts.map +1 -1
- package/dist/esm/CommandDialog/CommandStepper.js +63 -3
- package/dist/esm/CommandDialog/CommandStepper.js.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts +4 -0
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.js +95 -6
- package/dist/esm/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/esm/CommandForm/fields/CalendarField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/CalendarField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/CalendarField.js +14 -1
- package/dist/esm/CommandForm/fields/CalendarField.js.map +1 -1
- package/dist/esm/CommandForm/fields/CheckboxField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/CheckboxField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/CheckboxField.js +10 -1
- package/dist/esm/CommandForm/fields/CheckboxField.js.map +1 -1
- package/dist/esm/CommandForm/fields/ChipsField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/ChipsField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/ChipsField.js +11 -1
- package/dist/esm/CommandForm/fields/ChipsField.js.map +1 -1
- package/dist/esm/CommandForm/fields/ColorPickerField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/ColorPickerField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/ColorPickerField.js +17 -1
- package/dist/esm/CommandForm/fields/ColorPickerField.js.map +1 -1
- package/dist/esm/CommandForm/fields/DropdownField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/DropdownField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/DropdownField.js +16 -1
- package/dist/esm/CommandForm/fields/DropdownField.js.map +1 -1
- package/dist/esm/CommandForm/fields/InputTextField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/InputTextField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/InputTextField.js +41 -1
- package/dist/esm/CommandForm/fields/InputTextField.js.map +1 -1
- package/dist/esm/CommandForm/fields/MultiSelectField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/MultiSelectField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/MultiSelectField.js +13 -1
- package/dist/esm/CommandForm/fields/MultiSelectField.js.map +1 -1
- package/dist/esm/CommandForm/fields/NumberField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/NumberField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/NumberField.js +11 -1
- package/dist/esm/CommandForm/fields/NumberField.js.map +1 -1
- package/dist/esm/CommandForm/fields/RadioButtonField.d.ts +17 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.d.ts.map +1 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.js +21 -0
- package/dist/esm/CommandForm/fields/RadioButtonField.js.map +1 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.d.ts +19 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.d.ts.map +1 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.js +38 -0
- package/dist/esm/CommandForm/fields/RadioGroupField.js.map +1 -0
- package/dist/esm/CommandForm/fields/SliderField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/SliderField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/SliderField.js +10 -1
- package/dist/esm/CommandForm/fields/SliderField.js.map +1 -1
- package/dist/esm/CommandForm/fields/TextAreaField.d.ts +5 -0
- package/dist/esm/CommandForm/fields/TextAreaField.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/TextAreaField.js +12 -1
- package/dist/esm/CommandForm/fields/TextAreaField.js.map +1 -1
- package/dist/esm/CommandForm/fields/index.d.ts +2 -0
- package/dist/esm/CommandForm/fields/index.d.ts.map +1 -1
- package/dist/esm/CommandForm/fields/index.js +2 -0
- package/dist/esm/CommandForm/fields/index.js.map +1 -1
- package/dist/esm/CommandForm/index.js +2 -0
- package/dist/esm/CommandForm/index.js.map +1 -1
- package/dist/esm/Common/CratisComponentsProvider.d.ts +11 -0
- package/dist/esm/Common/CratisComponentsProvider.d.ts.map +1 -0
- package/dist/esm/Common/CratisComponentsProvider.js +40 -0
- package/dist/esm/Common/CratisComponentsProvider.js.map +1 -0
- package/dist/esm/Common/ErrorBoundary.d.ts.map +1 -1
- package/dist/esm/Common/ErrorBoundary.js +32 -0
- package/dist/esm/Common/ErrorBoundary.js.map +1 -1
- package/dist/esm/Common/FormElement.css +26 -0
- package/dist/esm/Common/FormElement.d.ts +1 -0
- package/dist/esm/Common/FormElement.d.ts.map +1 -1
- package/dist/esm/Common/FormElement.js +14 -1
- package/dist/esm/Common/FormElement.js.map +1 -1
- package/dist/esm/Common/Page.d.ts.map +1 -1
- package/dist/esm/Common/Page.js +13 -0
- package/dist/esm/Common/Page.js.map +1 -1
- package/dist/esm/Common/Tooltip.css +3 -3
- package/dist/esm/Common/index.d.ts +1 -0
- package/dist/esm/Common/index.d.ts.map +1 -1
- package/dist/esm/Common/index.js +1 -0
- package/dist/esm/Common/index.js.map +1 -1
- package/dist/esm/DataPage/DataPage.d.ts +12 -3
- package/dist/esm/DataPage/DataPage.d.ts.map +1 -1
- package/dist/esm/DataPage/DataPage.js +113 -8
- package/dist/esm/DataPage/DataPage.js.map +1 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.d.ts +9 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.d.ts.map +1 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.js +65 -6
- package/dist/esm/DataTables/DataTableForObservableQuery.js.map +1 -1
- package/dist/esm/DataTables/DataTableForQuery.d.ts +9 -1
- package/dist/esm/DataTables/DataTableForQuery.d.ts.map +1 -1
- package/dist/esm/DataTables/DataTableForQuery.js +62 -6
- package/dist/esm/DataTables/DataTableForQuery.js.map +1 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.d.ts.map +1 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.js +47 -0
- package/dist/esm/Dialogs/BusyIndicatorDialog.js.map +1 -1
- package/dist/esm/Dialogs/Dialog.d.ts +5 -1
- package/dist/esm/Dialogs/Dialog.d.ts.map +1 -1
- package/dist/esm/Dialogs/Dialog.js +79 -6
- package/dist/esm/Dialogs/Dialog.js.map +1 -1
- package/dist/esm/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/Dropdown/Dropdown.js +13 -0
- package/dist/esm/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.d.ts +2 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.d.ts.map +1 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.js +37 -21
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.js.map +1 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.css +6 -0
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.d.ts +3 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.d.ts.map +1 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.js +14 -2
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.js.map +1 -1
- package/dist/esm/PivotViewer/PivotViewer.css +131 -134
- package/dist/esm/PivotViewer/PivotViewer.d.ts.map +1 -1
- package/dist/esm/PivotViewer/PivotViewer.js +19 -0
- package/dist/esm/PivotViewer/PivotViewer.js.map +1 -1
- package/dist/esm/PivotViewer/components/Spinner.css +8 -8
- package/dist/esm/SchemaEditor/NameCell.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/NameCell.js +2 -2
- package/dist/esm/SchemaEditor/NameCell.js.map +1 -1
- package/dist/esm/SchemaEditor/SchemaEditor.d.ts +2 -1
- package/dist/esm/SchemaEditor/SchemaEditor.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/SchemaEditor.js +15 -3
- package/dist/esm/SchemaEditor/SchemaEditor.js.map +1 -1
- package/dist/esm/SchemaEditor/SchemaEditor.module.css +5 -1
- package/dist/esm/SchemaEditor/TypeCell.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/TypeCell.js +3 -3
- package/dist/esm/SchemaEditor/TypeCell.js.map +1 -1
- package/dist/esm/TimeMachine/EventsView.css +17 -17
- package/dist/esm/TimeMachine/EventsView.d.ts +5 -0
- package/dist/esm/TimeMachine/EventsView.d.ts.map +1 -1
- package/dist/esm/TimeMachine/EventsView.js +13 -2
- package/dist/esm/TimeMachine/EventsView.js.map +1 -1
- package/dist/esm/TimeMachine/Properties.css +57 -0
- package/dist/esm/TimeMachine/Properties.d.ts +1 -0
- package/dist/esm/TimeMachine/Properties.d.ts.map +1 -1
- package/dist/esm/TimeMachine/Properties.js +9 -28
- package/dist/esm/TimeMachine/Properties.js.map +1 -1
- package/dist/esm/TimeMachine/ReadModelView.d.ts.map +1 -1
- package/dist/esm/TimeMachine/ReadModelView.js +10 -0
- package/dist/esm/TimeMachine/ReadModelView.js.map +1 -1
- package/dist/esm/TimeMachine/TimeMachine.css +38 -18
- package/dist/esm/Toolbar/Toolbar.css +34 -17
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts +1 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarLayout.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarLayout.js +20 -21
- package/dist/esm/Toolbar/ToolbarLayout.js.map +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/tailwind-utilities.css +444 -7
- package/dist/esm/tokens.css +83 -0
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +53 -25
- package/dist/esm/CommandDialog/CommandDialog.stories.d.ts +0 -21
- package/dist/esm/CommandDialog/CommandDialog.stories.d.ts.map +0 -1
- package/dist/esm/CommandDialog/CommandDialog.stories.js +0 -353
- package/dist/esm/CommandDialog/CommandDialog.stories.js.map +0 -1
- package/dist/esm/CommandDialog/CommandStepper.stories.d.ts +0 -11
- package/dist/esm/CommandDialog/CommandStepper.stories.d.ts.map +0 -1
- package/dist/esm/CommandDialog/CommandStepper.stories.js +0 -84
- package/dist/esm/CommandDialog/CommandStepper.stories.js.map +0 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.d.ts +0 -12
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.d.ts.map +0 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.js +0 -158
- package/dist/esm/CommandDialog/StepperCommandDialog.stories.js.map +0 -1
- package/dist/esm/CommandForm/fields/Fields.stories.d.ts +0 -17
- package/dist/esm/CommandForm/fields/Fields.stories.d.ts.map +0 -1
- package/dist/esm/CommandForm/fields/Fields.stories.js +0 -179
- package/dist/esm/CommandForm/fields/Fields.stories.js.map +0 -1
- package/dist/esm/Common/ErrorBoundary.stories.d.ts +0 -8
- package/dist/esm/Common/ErrorBoundary.stories.d.ts.map +0 -1
- package/dist/esm/Common/ErrorBoundary.stories.js +0 -22
- package/dist/esm/Common/ErrorBoundary.stories.js.map +0 -1
- package/dist/esm/Common/FormElement.stories.d.ts +0 -9
- package/dist/esm/Common/FormElement.stories.d.ts.map +0 -1
- package/dist/esm/Common/FormElement.stories.js +0 -27
- package/dist/esm/Common/FormElement.stories.js.map +0 -1
- package/dist/esm/Common/Icon.stories.d.ts +0 -11
- package/dist/esm/Common/Icon.stories.d.ts.map +0 -1
- package/dist/esm/Common/Icon.stories.js +0 -26
- package/dist/esm/Common/Icon.stories.js.map +0 -1
- package/dist/esm/Common/Page.stories.d.ts +0 -10
- package/dist/esm/Common/Page.stories.d.ts.map +0 -1
- package/dist/esm/Common/Page.stories.js +0 -35
- package/dist/esm/Common/Page.stories.js.map +0 -1
- package/dist/esm/DataPage/DataPage.stories.d.ts +0 -10
- package/dist/esm/DataPage/DataPage.stories.d.ts.map +0 -1
- package/dist/esm/DataPage/DataPage.stories.js +0 -69
- package/dist/esm/DataPage/DataPage.stories.js.map +0 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts +0 -8
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts.map +0 -1
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.js +0 -79
- package/dist/esm/DataTables/DataTableForObservableQuery.stories.js.map +0 -1
- package/dist/esm/DataTables/DataTableForQuery.stories.d.ts +0 -8
- package/dist/esm/DataTables/DataTableForQuery.stories.d.ts.map +0 -1
- package/dist/esm/DataTables/DataTableForQuery.stories.js +0 -54
- package/dist/esm/DataTables/DataTableForQuery.stories.js.map +0 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.d.ts +0 -7
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.d.ts.map +0 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.js +0 -15
- package/dist/esm/Dialogs/BusyIndicatorDialog.stories.js.map +0 -1
- package/dist/esm/Dialogs/ConfirmationDialog.stories.d.ts +0 -7
- package/dist/esm/Dialogs/ConfirmationDialog.stories.d.ts.map +0 -1
- package/dist/esm/Dialogs/ConfirmationDialog.stories.js +0 -20
- package/dist/esm/Dialogs/ConfirmationDialog.stories.js.map +0 -1
- package/dist/esm/Dialogs/Dialog.stories.d.ts +0 -13
- package/dist/esm/Dialogs/Dialog.stories.d.ts.map +0 -1
- package/dist/esm/Dialogs/Dialog.stories.js +0 -85
- package/dist/esm/Dialogs/Dialog.stories.js.map +0 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.d.ts +0 -12
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.d.ts.map +0 -1
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.js +0 -184
- package/dist/esm/ObjectContentEditor/ObjectContentEditor.stories.js.map +0 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.d.ts +0 -10
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.d.ts.map +0 -1
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.js +0 -45
- package/dist/esm/ObjectNavigationalBar/ObjectNavigationalBar.stories.js.map +0 -1
- package/dist/esm/PivotViewer/PivotViewer.stories.d.ts +0 -8
- package/dist/esm/PivotViewer/PivotViewer.stories.d.ts.map +0 -1
- package/dist/esm/PivotViewer/PivotViewer.stories.js +0 -233
- package/dist/esm/PivotViewer/PivotViewer.stories.js.map +0 -1
- package/dist/esm/SchemaEditor/SchemaEditor.stories.d.ts +0 -12
- package/dist/esm/SchemaEditor/SchemaEditor.stories.d.ts.map +0 -1
- package/dist/esm/SchemaEditor/SchemaEditor.stories.js +0 -157
- package/dist/esm/SchemaEditor/SchemaEditor.stories.js.map +0 -1
- package/dist/esm/TimeMachine/EventsView.stories.d.ts +0 -9
- package/dist/esm/TimeMachine/EventsView.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/EventsView.stories.js +0 -82
- package/dist/esm/TimeMachine/EventsView.stories.js.map +0 -1
- package/dist/esm/TimeMachine/Properties.stories.d.ts +0 -10
- package/dist/esm/TimeMachine/Properties.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/Properties.stories.js +0 -51
- package/dist/esm/TimeMachine/Properties.stories.js.map +0 -1
- package/dist/esm/TimeMachine/ReadModelView.stories.d.ts +0 -8
- package/dist/esm/TimeMachine/ReadModelView.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/ReadModelView.stories.js +0 -80
- package/dist/esm/TimeMachine/ReadModelView.stories.js.map +0 -1
- package/dist/esm/TimeMachine/TimeMachine.stories.d.ts +0 -9
- package/dist/esm/TimeMachine/TimeMachine.stories.d.ts.map +0 -1
- package/dist/esm/TimeMachine/TimeMachine.stories.js +0 -115
- package/dist/esm/TimeMachine/TimeMachine.stories.js.map +0 -1
- package/dist/esm/Toolbar/Toolbar.stories.d.ts +0 -26
- package/dist/esm/Toolbar/Toolbar.stories.d.ts.map +0 -1
- package/dist/esm/Toolbar/Toolbar.stories.js +0 -240
- package/dist/esm/Toolbar/Toolbar.stories.js.map +0 -1
- package/dist/esm/given.d.ts +0 -5
- package/dist/esm/given.d.ts.map +0 -1
- package/dist/esm/given.js +0 -7
- package/dist/esm/given.js.map +0 -1
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Dialog } from './Dialog';
|
|
4
|
-
import { DialogButtons, DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
|
|
5
|
-
import { Button } from 'primereact/button';
|
|
6
|
-
import { InputText } from 'primereact/inputtext';
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Dialogs/Dialog',
|
|
9
|
-
component: Dialog,
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: 'centered',
|
|
12
|
-
},
|
|
13
|
-
};
|
|
14
|
-
export default meta;
|
|
15
|
-
const DialogWrapper = ({ buttons, title, children, isValid }) => {
|
|
16
|
-
const ResultDialog = () => {
|
|
17
|
-
const { closeDialog } = useDialogContext();
|
|
18
|
-
return (_jsx(Dialog, { title: title, buttons: buttons, onConfirm: () => closeDialog(DialogResult.Ok), onCancel: () => closeDialog(DialogResult.Cancelled), isValid: isValid, children: children }));
|
|
19
|
-
};
|
|
20
|
-
const [DialogComponent, showDialog] = useDialog(ResultDialog);
|
|
21
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Open Dialog", onClick: async () => await showDialog() }), _jsx(DialogComponent, {})] }));
|
|
22
|
-
};
|
|
23
|
-
export const OkCancel = {
|
|
24
|
-
render: () => (_jsx(DialogWrapper, { title: "Confirm Action", buttons: DialogButtons.OkCancel, children: _jsx("p", { children: "Are you sure you want to perform this action?" }) }))
|
|
25
|
-
};
|
|
26
|
-
export const YesNo = {
|
|
27
|
-
render: () => (_jsx(DialogWrapper, { title: "Delete Item", buttons: DialogButtons.YesNo, children: _jsx("p", { children: "Do you want to delete this item? This cannot be undone." }) }))
|
|
28
|
-
};
|
|
29
|
-
export const YesNoCancel = {
|
|
30
|
-
render: () => (_jsx(DialogWrapper, { title: "Save Changes", buttons: DialogButtons.YesNoCancel, children: _jsx("p", { children: "You have unsaved changes. Do you want to save them before closing?" }) }))
|
|
31
|
-
};
|
|
32
|
-
export const Ok = {
|
|
33
|
-
render: () => (_jsx(DialogWrapper, { title: "Information", buttons: DialogButtons.Ok, children: _jsx("p", { children: "The operation completed successfully." }) }))
|
|
34
|
-
};
|
|
35
|
-
export const WithForm = {
|
|
36
|
-
render: () => {
|
|
37
|
-
const AddNameDialog = () => {
|
|
38
|
-
const { closeDialog } = useDialogContext();
|
|
39
|
-
const [name, setName] = useState('');
|
|
40
|
-
return (_jsx(Dialog, { title: "Edit Name", buttons: DialogButtons.OkCancel, onConfirm: () => closeDialog(DialogResult.Ok, { name }), onCancel: () => closeDialog(DialogResult.Cancelled), isValid: name.trim().length > 0, children: _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { htmlFor: "name", children: "Name" }), _jsx(InputText, { id: "name", value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter name..." }), name.trim().length === 0 && (_jsx("small", { className: "p-error", children: "Name is required" }))] }) }));
|
|
41
|
-
};
|
|
42
|
-
const [AddNameDialogComponent, showAddNameDialog] = useDialog(AddNameDialog);
|
|
43
|
-
const [result, setResult] = useState('');
|
|
44
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Open Form Dialog", onClick: async () => {
|
|
45
|
-
const [dialogResult, value] = await showAddNameDialog();
|
|
46
|
-
if (dialogResult === DialogResult.Ok && value) {
|
|
47
|
-
setResult(value.name);
|
|
48
|
-
}
|
|
49
|
-
} }), result && _jsxs("p", { children: ["Last saved name: ", result] }), _jsx(AddNameDialogComponent, {})] }));
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
export const IsBusy = {
|
|
53
|
-
render: () => {
|
|
54
|
-
const [busy, setBusy] = useState(false);
|
|
55
|
-
const BusyDialog = () => {
|
|
56
|
-
const { closeDialog } = useDialogContext();
|
|
57
|
-
return (_jsx(Dialog, { title: "Saving changes", buttons: DialogButtons.OkCancel, onConfirm: async () => {
|
|
58
|
-
setBusy(true);
|
|
59
|
-
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
60
|
-
setBusy(false);
|
|
61
|
-
closeDialog(DialogResult.Ok);
|
|
62
|
-
return true;
|
|
63
|
-
}, onCancel: () => closeDialog(DialogResult.Cancelled), isBusy: busy, children: _jsx("p", { children: "Click Ok to simulate a 3-second save operation. All buttons become disabled and the primary button shows a spinner." }) }));
|
|
64
|
-
};
|
|
65
|
-
const [DialogComponent, showDialog] = useDialog(BusyDialog);
|
|
66
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Open Dialog", onClick: async () => await showDialog() }), _jsx(DialogComponent, {})] }));
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
export const CustomButtons = {
|
|
70
|
-
render: () => {
|
|
71
|
-
const CustomActionsDialog = () => {
|
|
72
|
-
const { closeDialog } = useDialogContext();
|
|
73
|
-
return (_jsx(Dialog, { title: "Custom Actions", buttons: _jsxs(_Fragment, { children: [_jsx(Button, { label: "Save Draft", icon: "pi pi-save", severity: "secondary", onClick: () => closeDialog(DialogResult.Ok, { action: 'draft' }) }), _jsx(Button, { label: "Publish", icon: "pi pi-send", onClick: () => closeDialog(DialogResult.Ok, { action: 'publish' }) })] }), onCancel: () => closeDialog(DialogResult.Cancelled), children: _jsx("p", { children: "Choose what to do with your changes." }) }));
|
|
74
|
-
};
|
|
75
|
-
const [CustomActionsDialogComponent, showCustomActionsDialog] = useDialog(CustomActionsDialog);
|
|
76
|
-
const [result, setResult] = useState('');
|
|
77
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Open Custom Dialog", onClick: async () => {
|
|
78
|
-
const [dialogResult, value] = await showCustomActionsDialog();
|
|
79
|
-
if (dialogResult === DialogResult.Ok && value) {
|
|
80
|
-
setResult(value.action);
|
|
81
|
-
}
|
|
82
|
-
} }), result && _jsxs("p", { children: ["Last action: ", result] }), _jsx(CustomActionsDialogComponent, {})] }));
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../Dialogs/Dialog.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { ObjectContentEditor } from './ObjectContentEditor';
|
|
3
|
-
declare const meta: Meta<typeof ObjectContentEditor>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof ObjectContentEditor>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const WithTimestamp: Story;
|
|
8
|
-
export declare const SimpleObject: Story;
|
|
9
|
-
export declare const WithArray: Story;
|
|
10
|
-
export declare const EditMode: Story;
|
|
11
|
-
export declare const EditModeWithValidation: Story;
|
|
12
|
-
//# sourceMappingURL=ObjectContentEditor.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../ObjectContentEditor/ObjectContentEditor.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAoFlD,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAmBF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAiBF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AA6BF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA4BpC,CAAC"}
|
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ObjectContentEditor } from './ObjectContentEditor';
|
|
3
|
-
import { useState } from 'react';
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'Components/ObjectContentEditor',
|
|
6
|
-
component: ObjectContentEditor,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: 'padded',
|
|
10
|
-
},
|
|
11
|
-
};
|
|
12
|
-
export default meta;
|
|
13
|
-
const userSchema = {
|
|
14
|
-
type: 'object',
|
|
15
|
-
properties: {
|
|
16
|
-
id: {
|
|
17
|
-
type: 'string',
|
|
18
|
-
format: 'guid',
|
|
19
|
-
description: 'Unique identifier for the user'
|
|
20
|
-
},
|
|
21
|
-
name: {
|
|
22
|
-
type: 'string',
|
|
23
|
-
description: 'Full name of the user'
|
|
24
|
-
},
|
|
25
|
-
email: {
|
|
26
|
-
type: 'string',
|
|
27
|
-
format: 'email',
|
|
28
|
-
description: 'Email address'
|
|
29
|
-
},
|
|
30
|
-
age: {
|
|
31
|
-
type: 'integer',
|
|
32
|
-
description: 'User age in years'
|
|
33
|
-
},
|
|
34
|
-
isActive: {
|
|
35
|
-
type: 'boolean',
|
|
36
|
-
description: 'Whether the user account is active'
|
|
37
|
-
},
|
|
38
|
-
address: {
|
|
39
|
-
type: 'object',
|
|
40
|
-
description: 'User address information',
|
|
41
|
-
properties: {
|
|
42
|
-
street: { type: 'string' },
|
|
43
|
-
city: { type: 'string' },
|
|
44
|
-
zipCode: { type: 'string' },
|
|
45
|
-
country: { type: 'string' }
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
tags: {
|
|
49
|
-
type: 'array',
|
|
50
|
-
description: 'User tags',
|
|
51
|
-
items: { type: 'string' }
|
|
52
|
-
},
|
|
53
|
-
orders: {
|
|
54
|
-
type: 'array',
|
|
55
|
-
description: 'User orders',
|
|
56
|
-
items: {
|
|
57
|
-
type: 'object',
|
|
58
|
-
properties: {
|
|
59
|
-
orderId: { type: 'string' },
|
|
60
|
-
total: { type: 'number' },
|
|
61
|
-
date: { type: 'string', format: 'date-time' }
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
const sampleUser = {
|
|
68
|
-
id: '123e4567-e89b-12d3-a456-426614174000',
|
|
69
|
-
name: 'John Doe',
|
|
70
|
-
email: 'john.doe@example.com',
|
|
71
|
-
age: 30,
|
|
72
|
-
isActive: true,
|
|
73
|
-
address: {
|
|
74
|
-
street: '123 Main St',
|
|
75
|
-
city: 'New York',
|
|
76
|
-
zipCode: '10001',
|
|
77
|
-
country: 'USA'
|
|
78
|
-
},
|
|
79
|
-
tags: ['premium', 'verified', 'newsletter'],
|
|
80
|
-
orders: [
|
|
81
|
-
{
|
|
82
|
-
orderId: 'ORD-001',
|
|
83
|
-
total: 99.99,
|
|
84
|
-
date: '2024-01-15T10:30:00Z'
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
orderId: 'ORD-002',
|
|
88
|
-
total: 149.99,
|
|
89
|
-
date: '2024-02-20T14:45:00Z'
|
|
90
|
-
}
|
|
91
|
-
]
|
|
92
|
-
};
|
|
93
|
-
export const Default = {
|
|
94
|
-
args: {
|
|
95
|
-
object: sampleUser,
|
|
96
|
-
schema: userSchema,
|
|
97
|
-
},
|
|
98
|
-
};
|
|
99
|
-
export const WithTimestamp = {
|
|
100
|
-
args: {
|
|
101
|
-
object: sampleUser,
|
|
102
|
-
schema: userSchema,
|
|
103
|
-
timestamp: new Date('2024-02-21T12:00:00Z'),
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
const simpleObject = {
|
|
107
|
-
title: 'Simple Object',
|
|
108
|
-
count: 42,
|
|
109
|
-
enabled: true,
|
|
110
|
-
value: 3.14
|
|
111
|
-
};
|
|
112
|
-
const simpleSchema = {
|
|
113
|
-
type: 'object',
|
|
114
|
-
properties: {
|
|
115
|
-
title: { type: 'string', description: 'The title' },
|
|
116
|
-
count: { type: 'integer', description: 'A count value' },
|
|
117
|
-
enabled: { type: 'boolean', description: 'Whether enabled' },
|
|
118
|
-
value: { type: 'number', description: 'A numeric value' }
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
export const SimpleObject = {
|
|
122
|
-
args: {
|
|
123
|
-
object: simpleObject,
|
|
124
|
-
schema: simpleSchema,
|
|
125
|
-
},
|
|
126
|
-
};
|
|
127
|
-
const arrayData = {
|
|
128
|
-
items: ['apple', 'banana', 'orange', 'grape']
|
|
129
|
-
};
|
|
130
|
-
const arraySchema = {
|
|
131
|
-
type: 'object',
|
|
132
|
-
properties: {
|
|
133
|
-
items: {
|
|
134
|
-
type: 'array',
|
|
135
|
-
description: 'List of fruits',
|
|
136
|
-
items: { type: 'string' }
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
export const WithArray = {
|
|
141
|
-
args: {
|
|
142
|
-
object: arrayData,
|
|
143
|
-
schema: arraySchema,
|
|
144
|
-
},
|
|
145
|
-
};
|
|
146
|
-
const editableSchema = {
|
|
147
|
-
type: 'object',
|
|
148
|
-
required: ['name', 'email'],
|
|
149
|
-
properties: {
|
|
150
|
-
name: { type: 'string', description: 'Full name' },
|
|
151
|
-
email: { type: 'string', format: 'email', description: 'Email address' },
|
|
152
|
-
age: { type: 'integer', description: 'Age in years' },
|
|
153
|
-
isActive: { type: 'boolean', description: 'Account is active' },
|
|
154
|
-
website: { type: 'string', format: 'uri', description: 'Personal website' },
|
|
155
|
-
birthDate: { type: 'string', format: 'date', description: 'Date of birth' },
|
|
156
|
-
notes: {
|
|
157
|
-
type: 'string',
|
|
158
|
-
description: 'Long-form notes about this person (rendered as textarea when value is long)'
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
};
|
|
162
|
-
const editableObject = {
|
|
163
|
-
name: 'Jane Smith',
|
|
164
|
-
email: 'jane@example.com',
|
|
165
|
-
age: 28,
|
|
166
|
-
isActive: true,
|
|
167
|
-
website: 'https://example.com',
|
|
168
|
-
birthDate: '1996-03-15',
|
|
169
|
-
notes: 'This field is intentionally long to demonstrate the textarea input. It contains more than fifty characters.'
|
|
170
|
-
};
|
|
171
|
-
export const EditMode = {
|
|
172
|
-
render: () => {
|
|
173
|
-
const [obj, setObj] = useState(editableObject);
|
|
174
|
-
return (_jsx(ObjectContentEditor, { object: obj, schema: editableSchema, editMode: true, onChange: setObj }));
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
export const EditModeWithValidation = {
|
|
178
|
-
render: () => {
|
|
179
|
-
const [obj, setObj] = useState({ ...editableObject, name: '', email: 'not-an-email' });
|
|
180
|
-
const [hasErrors, setHasErrors] = useState(false);
|
|
181
|
-
return (_jsxs("div", { className: "p-4", children: [_jsx(ObjectContentEditor, { object: obj, schema: editableSchema, editMode: true, onChange: setObj, onValidationChange: setHasErrors }), _jsxs("div", { className: "mt-4", children: [_jsx("button", { className: "p-button p-component", disabled: hasErrors, onClick: () => alert('Saved: ' + JSON.stringify(obj, null, 2)), children: "Save" }), hasErrors && (_jsx("span", { className: "p-error ml-3", children: "Please fix validation errors before saving." }))] })] }));
|
|
182
|
-
}
|
|
183
|
-
};
|
|
184
|
-
//# sourceMappingURL=ObjectContentEditor.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectContentEditor.stories.js","sourceRoot":"","sources":["../../../ObjectContentEditor/ObjectContentEditor.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { ObjectNavigationalBar } from './ObjectNavigationalBar';
|
|
3
|
-
declare const meta: Meta<typeof ObjectNavigationalBar>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof ObjectNavigationalBar>;
|
|
6
|
-
export declare const Interactive: Story;
|
|
7
|
-
export declare const AtRoot: Story;
|
|
8
|
-
export declare const SingleLevel: Story;
|
|
9
|
-
export declare const DeepPath: Story;
|
|
10
|
-
//# sourceMappingURL=ObjectNavigationalBar.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectNavigationalBar.stories.d.ts","sourceRoot":"","sources":["../../../ObjectNavigationalBar/ObjectNavigationalBar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAO5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEpD,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { ObjectNavigationalBar } from './ObjectNavigationalBar';
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'Components/ObjectNavigationalBar',
|
|
6
|
-
component: ObjectNavigationalBar,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: 'padded',
|
|
10
|
-
},
|
|
11
|
-
};
|
|
12
|
-
export default meta;
|
|
13
|
-
export const Interactive = {
|
|
14
|
-
render: () => {
|
|
15
|
-
const [navigationPath, setNavigationPath] = useState(['users', '0', 'address']);
|
|
16
|
-
const handleNavigate = (index) => {
|
|
17
|
-
if (index === 0) {
|
|
18
|
-
setNavigationPath([]);
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
setNavigationPath(navigationPath.slice(0, index));
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
return (_jsxs("div", { style: { padding: '1rem', background: 'var(--surface-ground)', minHeight: '200px' }, children: [_jsxs("h3", { children: ["Current Path: ", navigationPath.length > 0 ? navigationPath.join(' > ') : 'Root'] }), _jsx(ObjectNavigationalBar, { navigationPath: navigationPath, onNavigate: handleNavigate }), _jsx("div", { style: { marginTop: '2rem' }, children: _jsx("p", { children: "Click on breadcrumb items to navigate, or use the back button." }) })] }));
|
|
25
|
-
},
|
|
26
|
-
};
|
|
27
|
-
export const AtRoot = {
|
|
28
|
-
args: {
|
|
29
|
-
navigationPath: [],
|
|
30
|
-
onNavigate: (index) => console.log('Navigate to', index),
|
|
31
|
-
},
|
|
32
|
-
};
|
|
33
|
-
export const SingleLevel = {
|
|
34
|
-
args: {
|
|
35
|
-
navigationPath: ['users'],
|
|
36
|
-
onNavigate: (index) => console.log('Navigate to', index),
|
|
37
|
-
},
|
|
38
|
-
};
|
|
39
|
-
export const DeepPath = {
|
|
40
|
-
args: {
|
|
41
|
-
navigationPath: ['users', '0', 'address', 'city'],
|
|
42
|
-
onNavigate: (index) => console.log('Navigate to', index),
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
//# sourceMappingURL=ObjectNavigationalBar.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectNavigationalBar.stories.js","sourceRoot":"","sources":["../../../ObjectNavigationalBar/ObjectNavigationalBar.stories.tsx"],"names":[],"mappings":";AAGA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,IAAI,GAAuC;IAC7C,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACR,MAAM,EAAE,QAAQ;KACnB;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAW,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;QAE1F,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;YACrC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBACd,iBAAiB,CAAC,EAAE,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACJ,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;YACtD,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,CACH,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,uBAAuB,EAAE,SAAS,EAAE,OAAO,EAAE,aACpF,2CAAmB,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,IAAM,EACxF,KAAC,qBAAqB,IAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,cAAc,GAC5B,EACF,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAC7B,yFAAqE,GACnE,IACJ,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE;QACF,cAAc,EAAE,EAAE;QAClB,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC;KACnE;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,cAAc,EAAE,CAAC,OAAO,CAAC;QACzB,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC;KACnE;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE;QACF,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC;QACjD,UAAU,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC;KACnE;CACJ,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { PivotViewer } from './PivotViewer';
|
|
3
|
-
declare const meta: Meta<typeof PivotViewer>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof PivotViewer>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const LargeDataset: Story;
|
|
8
|
-
//# sourceMappingURL=PivotViewer.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PivotViewer.stories.d.ts","sourceRoot":"","sources":["../../../PivotViewer/PivotViewer.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAgH5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,OAAO,EAAE,KAgFrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6I1B,CAAC"}
|
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { PivotViewer } from './PivotViewer';
|
|
3
|
-
const FIRST_NAMES = [
|
|
4
|
-
'Alice', 'Bob', 'Charlie', 'Diana', 'Edward', 'Fiona', 'George', 'Hannah',
|
|
5
|
-
'Isaac', 'Julia', 'Kevin', 'Laura', 'Michael', 'Natalie', 'Oliver', 'Penelope',
|
|
6
|
-
'Quinn', 'Rachel', 'Samuel', 'Tara', 'Ursula', 'Victor', 'Wendy', 'Xavier',
|
|
7
|
-
'Yvonne', 'Zachary', 'Amelia', 'Benjamin', 'Clara', 'Daniel', 'Eleanor', 'Frank',
|
|
8
|
-
'Grace', 'Henry', 'Iris', 'James', 'Katherine', 'Leo', 'Mia', 'Noah',
|
|
9
|
-
];
|
|
10
|
-
const LAST_NAMES = [
|
|
11
|
-
'Johnson', 'Smith', 'Brown', 'Prince', 'Norton', 'Lee', 'Miller', 'Davis',
|
|
12
|
-
'Newton', 'Taylor', 'Anderson', 'Wilson', 'Moore', 'Jackson', 'Martin', 'White',
|
|
13
|
-
'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Walker',
|
|
14
|
-
'Hall', 'Allen', 'Young', 'King', 'Wright', 'Scott', 'Green', 'Baker',
|
|
15
|
-
'Adams', 'Nelson', 'Carter', 'Mitchell', 'Perez', 'Roberts', 'Turner', 'Phillips',
|
|
16
|
-
];
|
|
17
|
-
const DEPARTMENTS = [
|
|
18
|
-
'Engineering', 'Product', 'Design', 'Marketing', 'Sales',
|
|
19
|
-
'Finance', 'Human Resources', 'Legal', 'Operations', 'Support',
|
|
20
|
-
'Research', 'Data Science', 'Security', 'Infrastructure', 'Customer Success',
|
|
21
|
-
];
|
|
22
|
-
const OFFICES = [
|
|
23
|
-
'Seattle', 'San Francisco', 'Austin', 'New York', 'Boston',
|
|
24
|
-
'Chicago', 'Denver', 'Los Angeles', 'Atlanta', 'London',
|
|
25
|
-
'Berlin', 'Amsterdam', 'Singapore', 'Tokyo', 'Sydney',
|
|
26
|
-
];
|
|
27
|
-
const SENIORITY_LEVELS = ['Intern', 'Junior', 'Mid-level', 'Senior', 'Staff', 'Principal', 'Director', 'VP'];
|
|
28
|
-
const EMPLOYMENT_STATUSES = ['Active', 'On Leave', 'Contractor', 'Part-time'];
|
|
29
|
-
const SKILL_TAGS = [
|
|
30
|
-
'TypeScript', 'Python', 'Go', 'Rust', 'Java', 'C#', 'React', 'Node.js',
|
|
31
|
-
'Kubernetes', 'AWS', 'Azure', 'GCP', 'ML/AI', 'Data Engineering', 'Security',
|
|
32
|
-
'Product Management', 'UX Design', 'DevOps', 'Agile', 'Communication',
|
|
33
|
-
];
|
|
34
|
-
function seededRng(seed) {
|
|
35
|
-
let s = seed;
|
|
36
|
-
return () => {
|
|
37
|
-
s = (s * 1664525 + 1013904223) & 0xffffffff;
|
|
38
|
-
return (s >>> 0) / 0xffffffff;
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
function pick(rng, arr) {
|
|
42
|
-
return arr[Math.floor(rng() * arr.length)];
|
|
43
|
-
}
|
|
44
|
-
function generateEmployees(count) {
|
|
45
|
-
const rng = seededRng(42);
|
|
46
|
-
const employees = [];
|
|
47
|
-
for (let i = 0; i < count; i++) {
|
|
48
|
-
const firstName = pick(rng, FIRST_NAMES);
|
|
49
|
-
const lastName = pick(rng, LAST_NAMES);
|
|
50
|
-
const seniority = pick(rng, SENIORITY_LEVELS);
|
|
51
|
-
const seniorityIndex = SENIORITY_LEVELS.indexOf(seniority);
|
|
52
|
-
const age = 22 + Math.floor(rng() * 40);
|
|
53
|
-
const yearsAtCompany = Math.floor(rng() * Math.min(age - 20, 20));
|
|
54
|
-
const baseSalary = 60_000 + seniorityIndex * 25_000 + Math.floor(rng() * 30_000);
|
|
55
|
-
const numSkills = 1 + Math.floor(rng() * 4);
|
|
56
|
-
const shuffled = [...SKILL_TAGS].sort(() => rng() - 0.5);
|
|
57
|
-
const skills = shuffled.slice(0, numSkills);
|
|
58
|
-
employees.push({
|
|
59
|
-
id: i + 1,
|
|
60
|
-
name: `${firstName} ${lastName}`,
|
|
61
|
-
firstName,
|
|
62
|
-
lastName,
|
|
63
|
-
age,
|
|
64
|
-
department: pick(rng, DEPARTMENTS),
|
|
65
|
-
office: pick(rng, OFFICES),
|
|
66
|
-
seniority,
|
|
67
|
-
status: pick(rng, EMPLOYMENT_STATUSES),
|
|
68
|
-
salary: baseSalary,
|
|
69
|
-
yearsAtCompany,
|
|
70
|
-
skills,
|
|
71
|
-
primarySkill: skills[0],
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
return employees;
|
|
75
|
-
}
|
|
76
|
-
const largeDataset = generateEmployees(2_500);
|
|
77
|
-
const meta = {
|
|
78
|
-
title: 'PivotViewer/PivotViewer',
|
|
79
|
-
component: PivotViewer,
|
|
80
|
-
};
|
|
81
|
-
export default meta;
|
|
82
|
-
const sampleData = [
|
|
83
|
-
{ id: 1, name: 'Alice Johnson', age: 28, department: 'Engineering', address: { street: '123 Main St', city: 'Seattle', zipCode: '98101' } },
|
|
84
|
-
{ id: 2, name: 'Bob Smith', age: 35, department: 'Marketing', address: { street: '456 Oak Ave', city: 'Portland', zipCode: '97201' } },
|
|
85
|
-
{ id: 3, name: 'Charlie Brown', age: 42, department: 'Engineering', address: { street: '789 Pine Rd', city: 'Seattle', zipCode: '98102' } },
|
|
86
|
-
{ id: 4, name: 'Diana Prince', age: 31, department: 'Sales', address: { street: '321 Elm St', city: 'San Francisco', zipCode: '94102' } },
|
|
87
|
-
{ id: 5, name: 'Edward Norton', age: 29, department: 'Engineering', address: { street: '654 Maple Dr', city: 'Portland', zipCode: '97202' } },
|
|
88
|
-
{ id: 6, name: 'Fiona Lee', age: 33, department: 'Human Resources', address: { street: '852 Cedar St', city: 'Seattle', zipCode: '98103' } },
|
|
89
|
-
{ id: 7, name: 'George Miller', age: 27, department: 'Support', address: { street: '147 Birch Ln', city: 'Portland', zipCode: '97204' } },
|
|
90
|
-
{ id: 8, name: 'Hannah Davis', age: 45, department: 'Finance', address: { street: '963 Walnut Ave', city: 'San Francisco', zipCode: '94103' } },
|
|
91
|
-
{ id: 9, name: 'Isaac Newton', age: 38, department: 'Research', address: { street: '753 Spruce Rd', city: 'Austin', zipCode: '73301' } },
|
|
92
|
-
];
|
|
93
|
-
export const Default = {
|
|
94
|
-
render: () => {
|
|
95
|
-
const dimensions = [
|
|
96
|
-
{
|
|
97
|
-
key: 'department',
|
|
98
|
-
label: 'Department',
|
|
99
|
-
getValue: (item) => item.department,
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
key: 'city',
|
|
103
|
-
label: 'City',
|
|
104
|
-
getValue: (item) => item.address.city,
|
|
105
|
-
},
|
|
106
|
-
];
|
|
107
|
-
const filters = [
|
|
108
|
-
{
|
|
109
|
-
key: 'age',
|
|
110
|
-
label: 'Age',
|
|
111
|
-
getValue: (item) => item.age,
|
|
112
|
-
type: 'number',
|
|
113
|
-
},
|
|
114
|
-
];
|
|
115
|
-
return (_jsx("div", { className: "storybook-wrapper", style: { height: 'calc(100vh - 2rem)', minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', alignItems: 'stretch', justifyContent: 'flex-start' }, children: _jsx(PivotViewer, { data: sampleData, dimensions: dimensions, filters: filters, searchFields: [
|
|
116
|
-
(item) => item.name,
|
|
117
|
-
(item) => item.department,
|
|
118
|
-
(item) => item.address.city,
|
|
119
|
-
(item) => item.address.street,
|
|
120
|
-
], cardRenderer: (item) => ({
|
|
121
|
-
title: item.name,
|
|
122
|
-
labels: ['Id', 'Age', 'Department', 'City'],
|
|
123
|
-
values: [String(item.id), String(item.age), item.department, item.address.city],
|
|
124
|
-
}), colors: {
|
|
125
|
-
primaryColor: '#91BDF8',
|
|
126
|
-
primary500: '#2E66BA',
|
|
127
|
-
}, detailRenderer: (item, onClose) => (_jsxs("section", { children: [_jsxs("header", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: 0 }, children: item.name }), _jsxs("p", { style: { margin: 0, opacity: 0.8 }, children: ["Department \u2022 ", item.department] })] }), _jsx("button", { type: "button", onClick: onClose, title: "Close", className: "p-button p-button-text", children: "Close" })] }), _jsxs("dl", { style: { marginTop: '1rem', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.35rem 0.75rem' }, children: [_jsxs("div", { children: [_jsx("dt", { children: "Age" }), _jsx("dd", { children: item.age })] }), _jsxs("div", { children: [_jsx("dt", { children: "City" }), _jsx("dd", { children: item.address.city })] }), _jsxs("div", { children: [_jsx("dt", { children: "Street" }), _jsx("dd", { children: item.address.street })] })] })] })), getItemId: (item) => item.id }) }));
|
|
128
|
-
},
|
|
129
|
-
};
|
|
130
|
-
export const LargeDataset = {
|
|
131
|
-
name: 'Large Dataset (2 500 employees)',
|
|
132
|
-
render: () => {
|
|
133
|
-
const dimensions = [
|
|
134
|
-
{
|
|
135
|
-
key: 'department',
|
|
136
|
-
label: 'Department',
|
|
137
|
-
getValue: (item) => item.department,
|
|
138
|
-
},
|
|
139
|
-
{
|
|
140
|
-
key: 'office',
|
|
141
|
-
label: 'Office',
|
|
142
|
-
getValue: (item) => item.office,
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
key: 'seniority',
|
|
146
|
-
label: 'Seniority',
|
|
147
|
-
getValue: (item) => item.seniority,
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
key: 'status',
|
|
151
|
-
label: 'Status',
|
|
152
|
-
getValue: (item) => item.status,
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
key: 'primarySkill',
|
|
156
|
-
label: 'Primary Skill',
|
|
157
|
-
getValue: (item) => item.primarySkill,
|
|
158
|
-
},
|
|
159
|
-
];
|
|
160
|
-
const filters = [
|
|
161
|
-
{
|
|
162
|
-
key: 'department',
|
|
163
|
-
label: 'Department',
|
|
164
|
-
getValue: (item) => item.department,
|
|
165
|
-
multi: true,
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
key: 'office',
|
|
169
|
-
label: 'Office',
|
|
170
|
-
getValue: (item) => item.office,
|
|
171
|
-
multi: true,
|
|
172
|
-
},
|
|
173
|
-
{
|
|
174
|
-
key: 'seniority',
|
|
175
|
-
label: 'Seniority',
|
|
176
|
-
getValue: (item) => item.seniority,
|
|
177
|
-
multi: true,
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
key: 'status',
|
|
181
|
-
label: 'Status',
|
|
182
|
-
getValue: (item) => item.status,
|
|
183
|
-
multi: true,
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
key: 'salary',
|
|
187
|
-
label: 'Salary',
|
|
188
|
-
getValue: (item) => item.salary,
|
|
189
|
-
type: 'number',
|
|
190
|
-
buckets: 20,
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
key: 'age',
|
|
194
|
-
label: 'Age',
|
|
195
|
-
getValue: (item) => item.age,
|
|
196
|
-
type: 'number',
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
key: 'yearsAtCompany',
|
|
200
|
-
label: 'Years at Company',
|
|
201
|
-
getValue: (item) => item.yearsAtCompany,
|
|
202
|
-
type: 'number',
|
|
203
|
-
},
|
|
204
|
-
];
|
|
205
|
-
return (_jsx("div", { className: "storybook-wrapper", style: {
|
|
206
|
-
height: 'calc(100vh - 2rem)',
|
|
207
|
-
minHeight: 0,
|
|
208
|
-
display: 'flex',
|
|
209
|
-
flexDirection: 'column',
|
|
210
|
-
overflow: 'hidden',
|
|
211
|
-
alignItems: 'stretch',
|
|
212
|
-
}, children: _jsx(PivotViewer, { data: largeDataset, dimensions: dimensions, filters: filters, defaultDimensionKey: "department", searchFields: [
|
|
213
|
-
(item) => item.name,
|
|
214
|
-
(item) => item.department,
|
|
215
|
-
(item) => item.office,
|
|
216
|
-
(item) => item.seniority,
|
|
217
|
-
(item) => item.primarySkill,
|
|
218
|
-
], cardRenderer: (item) => ({
|
|
219
|
-
title: item.name,
|
|
220
|
-
labels: ['Dept', 'Office', 'Seniority', 'Salary'],
|
|
221
|
-
values: [
|
|
222
|
-
item.department,
|
|
223
|
-
item.office,
|
|
224
|
-
item.seniority,
|
|
225
|
-
`$${item.salary.toLocaleString()}`,
|
|
226
|
-
],
|
|
227
|
-
}), detailRenderer: (item, onClose) => (_jsxs("section", { children: [_jsxs("header", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '0.5rem' }, children: [_jsxs("div", { children: [_jsx("h3", { style: { margin: 0 }, children: item.name }), _jsxs("p", { style: { margin: 0, opacity: 0.7 }, children: [item.seniority, " \u00B7 ", item.department] })] }), _jsx("button", { type: "button", onClick: onClose, title: "Close", className: "p-button p-button-text", children: "Close" })] }), _jsxs("dl", { style: { marginTop: '1rem', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.35rem 0.75rem' }, children: [_jsx("dt", { children: "Office" }), _jsx("dd", { children: item.office }), _jsx("dt", { children: "Age" }), _jsx("dd", { children: item.age }), _jsx("dt", { children: "Status" }), _jsx("dd", { children: item.status }), _jsx("dt", { children: "Salary" }), _jsxs("dd", { children: ["$", item.salary.toLocaleString()] }), _jsx("dt", { children: "Tenure" }), _jsxs("dd", { children: [item.yearsAtCompany, " yr", item.yearsAtCompany !== 1 ? 's' : ''] }), _jsx("dt", { children: "Skills" }), _jsx("dd", { children: item.skills.join(', ') })] })] })), getItemId: (item) => item.id, colors: {
|
|
228
|
-
primaryColor: '#91BDF8',
|
|
229
|
-
primary500: '#2E66BA',
|
|
230
|
-
} }) }));
|
|
231
|
-
},
|
|
232
|
-
};
|
|
233
|
-
//# sourceMappingURL=PivotViewer.stories.js.map
|