@prokodo/ui 0.1.14 β 1.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/LICENSE +187 -26
- package/NOTICE +24 -0
- package/README.md +32 -302
- package/dist/components/RTE/RTE.client.js +0 -1
- package/dist/components/RTE/RTE.css +180 -68
- package/dist/components/RTE/RTE.js +4 -1
- package/dist/components/RTE/RTE.module.css +180 -68
- package/dist/components/RTE/RTE.module.scss.js +10 -0
- package/dist/components/RTE/RTE.view.js +5 -1
- package/dist/components/accordion/Accordion.css +120 -67
- package/dist/components/accordion/Accordion.js +8 -2
- package/dist/components/accordion/Accordion.module.css +120 -67
- package/dist/components/accordion/Accordion.module.scss.js +12 -5
- package/dist/components/accordion/Accordion.view.js +4 -4
- package/dist/components/animated/Animated.client.js +13 -5
- package/dist/components/animated/Animated.js +8 -2
- package/dist/components/animatedText/AnimatedText.client.js +10 -2
- package/dist/components/animatedText/AnimatedText.js +8 -2
- package/dist/components/autocomplete/Autocomplete.client.js +5 -1
- package/dist/components/autocomplete/Autocomplete.css +111 -95
- package/dist/components/autocomplete/Autocomplete.js +4 -1
- package/dist/components/autocomplete/Autocomplete.module.css +111 -95
- package/dist/components/autocomplete/Autocomplete.module.scss.js +11 -4
- package/dist/components/autocomplete/Autocomplete.view.js +16 -5
- package/dist/components/avatar/Avatar.css +11 -8
- package/dist/components/avatar/Avatar.js +4 -1
- package/dist/components/avatar/Avatar.module.css +11 -8
- package/dist/components/avatar/Avatar.module.scss.js +1 -0
- package/dist/components/avatar/Avatar.view.js +22 -15
- package/dist/components/base-link/BaseLink.js +4 -1
- package/dist/components/base-link/BaseLink.view.js +3 -0
- package/dist/components/button/Button.client.js +12 -16
- package/dist/components/button/Button.css +85 -137
- package/dist/components/button/Button.js +4 -1
- package/dist/components/button/Button.module.css +85 -137
- package/dist/components/button/Button.module.scss.js +15 -19
- package/dist/components/button/Button.view.js +8 -2
- package/dist/components/calendly/Calendly.css +132 -0
- package/dist/components/calendly/Calendly.js +8 -2
- package/dist/components/calendly/Calendly.module.css +132 -0
- package/dist/components/calendly/Calendly.module.scss.js +6 -0
- package/dist/components/calendly/Calendly.view.js +12 -6
- package/dist/components/card/Card.client.js +6 -1
- package/dist/components/card/Card.css +67 -32
- package/dist/components/card/Card.js +11 -5
- package/dist/components/card/Card.module.css +67 -32
- package/dist/components/card/Card.module.scss.js +8 -2
- package/dist/components/card/Card.view.js +25 -8
- package/dist/components/carousel/Carousel.client.js +138 -129
- package/dist/components/carousel/Carousel.css +8 -4
- package/dist/components/carousel/Carousel.js +8 -2
- package/dist/components/carousel/Carousel.module.css +8 -4
- package/dist/components/carousel/Carousel.view.js +10 -0
- package/dist/components/checkbox/Checkbox.css +100 -79
- package/dist/components/checkbox/Checkbox.js +4 -1
- package/dist/components/checkbox/Checkbox.module.css +100 -79
- package/dist/components/checkbox/Checkbox.module.scss.js +11 -4
- package/dist/components/checkbox/Checkbox.view.js +7 -2
- package/dist/components/checkbox-group/CheckboxGroup.css +39 -6
- package/dist/components/checkbox-group/CheckboxGroup.js +4 -1
- package/dist/components/checkbox-group/CheckboxGroup.module.css +39 -6
- package/dist/components/checkbox-group/CheckboxGroup.module.scss.js +8 -0
- package/dist/components/checkbox-group/CheckboxGroup.view.js +7 -2
- package/dist/components/chip/Chip.css +185 -61
- package/dist/components/chip/Chip.js +4 -1
- package/dist/components/chip/Chip.module.css +185 -61
- package/dist/components/chip/Chip.module.scss.js +13 -17
- package/dist/components/chip/Chip.view.js +7 -4
- package/dist/components/datePicker/DatePicker.client.js +211 -66
- package/dist/components/datePicker/DatePicker.css +940 -0
- package/dist/components/datePicker/DatePicker.js +4 -1
- package/dist/components/datePicker/DatePicker.module.css +940 -0
- package/dist/components/datePicker/DatePicker.module.scss.js +62 -0
- package/dist/components/datePicker/DatePicker.server.js +31 -1
- package/dist/components/datePicker/DatePicker.utils.js +103 -0
- package/dist/components/datePicker/DatePicker.view.js +113 -41
- package/dist/components/datePicker/DatePickerDialog.view.js +291 -0
- package/dist/components/dialog/Dialog.css +107 -132
- package/dist/components/dialog/Dialog.js +8 -2
- package/dist/components/dialog/Dialog.module.css +107 -132
- package/dist/components/dialog/Dialog.module.scss.js +13 -8
- package/dist/components/dialog/Dialog.view.js +23 -5
- package/dist/components/drawer/Drawer.client.js +0 -1
- package/dist/components/drawer/Drawer.css +8 -8
- package/dist/components/drawer/Drawer.js +4 -1
- package/dist/components/drawer/Drawer.module.css +8 -8
- package/dist/components/drawer/Drawer.view.js +14 -3
- package/dist/components/dynamic-list/DynamicList.client.js +1 -0
- package/dist/components/dynamic-list/DynamicList.css +20 -12
- package/dist/components/dynamic-list/DynamicList.js +4 -1
- package/dist/components/dynamic-list/DynamicList.module.css +20 -12
- package/dist/components/dynamic-list/DynamicList.module.scss.js +1 -0
- package/dist/components/dynamic-list/DynamicList.view.js +89 -44
- package/dist/components/form/Form.client.js +4 -1
- package/dist/components/form/Form.js +4 -1
- package/dist/components/form/Form.view.js +6 -4
- package/dist/components/form/FormField.client.js +59 -4
- package/dist/components/form/FormField.js +4 -1
- package/dist/components/form/FormField.server.js +10 -4
- package/dist/components/form/FormResponse.js +6 -3
- package/dist/components/grid/Grid.css +1 -1
- package/dist/components/grid/Grid.module.css +1 -1
- package/dist/components/headline/Headline.css +16 -16
- package/dist/components/headline/Headline.js +13 -8
- package/dist/components/headline/Headline.module.css +16 -16
- package/dist/components/headline/Headline.module.scss.js +1 -1
- package/dist/components/headline/Headline.variants.js +4 -1
- package/dist/components/icon/Icon.css +14 -14
- package/dist/components/icon/Icon.js +8 -2
- package/dist/components/icon/Icon.module.css +14 -14
- package/dist/components/image/Image.client.js +9 -5
- package/dist/components/image/Image.css +4 -3
- package/dist/components/image/Image.js +8 -2
- package/dist/components/image/Image.module.css +4 -3
- package/dist/components/image/Image.server.js +2 -1
- package/dist/components/image-text/ImageText.css +43 -14
- package/dist/components/image-text/ImageText.js +68 -50
- package/dist/components/image-text/ImageText.module.css +43 -14
- package/dist/components/image-text/ImageText.module.scss.js +11 -2
- package/dist/components/input/Input.client.js +15 -2
- package/dist/components/input/Input.css +197 -115
- package/dist/components/input/Input.js +4 -1
- package/dist/components/input/Input.module.css +197 -115
- package/dist/components/input/Input.module.scss.js +19 -3
- package/dist/components/input/Input.view.js +102 -63
- package/dist/components/input/InputValidation.js +6 -2
- package/dist/components/inputOTP/InputOTP.client.js +165 -0
- package/dist/components/inputOTP/InputOTP.css +155 -7
- package/dist/components/inputOTP/InputOTP.js +10 -194
- package/dist/components/inputOTP/InputOTP.lazy.js +12 -0
- package/dist/components/inputOTP/InputOTP.module.css +155 -7
- package/dist/components/inputOTP/InputOTP.module.scss.js +14 -0
- package/dist/components/inputOTP/InputOTP.server.js +32 -0
- package/dist/components/inputOTP/InputOTP.view.js +117 -0
- package/dist/components/label/Label.css +33 -14
- package/dist/components/label/Label.js +37 -35
- package/dist/components/label/Label.module.css +33 -14
- package/dist/components/label/Label.module.scss.js +9 -2
- package/dist/components/link/Link.css +13 -13
- package/dist/components/link/Link.js +5 -3
- package/dist/components/link/Link.module.css +13 -13
- package/dist/components/link/Link.view.js +16 -13
- package/dist/components/list/List.css +71 -32
- package/dist/components/list/List.js +74 -28
- package/dist/components/list/List.module.css +71 -32
- package/dist/components/list/List.module.scss.js +1 -1
- package/dist/components/loading/Loading.js +4 -1
- package/dist/components/loading/Loading.view.js +47 -7
- package/dist/components/lottie/Lottie.css +16 -0
- package/dist/components/lottie/Lottie.js +9 -5
- package/dist/components/lottie/Lottie.module.css +16 -0
- package/dist/components/lottie/Lottie.module.scss.js +6 -2
- package/dist/components/map/Map.css +130 -0
- package/dist/components/map/Map.js +67 -46
- package/dist/components/map/Map.module.css +130 -0
- package/dist/components/map/Map.module.scss.js +6 -0
- package/dist/components/pagination/Pagination.css +127 -11
- package/dist/components/pagination/Pagination.js +4 -1
- package/dist/components/pagination/Pagination.module.css +127 -11
- package/dist/components/pagination/Pagination.module.scss.js +12 -4
- package/dist/components/pagination/Pagination.view.js +16 -2
- package/dist/components/post-item/PostItem.css +16 -16
- package/dist/components/post-item/PostItem.js +4 -1
- package/dist/components/post-item/PostItem.module.css +16 -16
- package/dist/components/post-item/PostItem.view.js +14 -5
- package/dist/components/post-item/PostItemAuthor.js +4 -1
- package/dist/components/post-teaser/PostTeaser.css +13 -13
- package/dist/components/post-teaser/PostTeaser.js +4 -1
- package/dist/components/post-teaser/PostTeaser.module.css +13 -13
- package/dist/components/post-teaser/PostTeaser.view.js +14 -5
- package/dist/components/post-widget/PostWidget.css +6 -8
- package/dist/components/post-widget/PostWidget.js +5 -3
- package/dist/components/post-widget/PostWidget.module.css +6 -8
- package/dist/components/post-widget/PostWidget.view.js +21 -8
- package/dist/components/post-widget-carousel/PostWidgetCarousel.css +7 -7
- package/dist/components/post-widget-carousel/PostWidgetCarousel.js +8 -2
- package/dist/components/post-widget-carousel/PostWidgetCarousel.module.css +7 -7
- package/dist/components/post-widget-carousel/PostWidgetCarousel.view.js +32 -14
- package/dist/components/progressBar/ProgressBar.css +4 -4
- package/dist/components/progressBar/ProgressBar.js +8 -2
- package/dist/components/progressBar/ProgressBar.module.css +4 -4
- package/dist/components/progressBar/ProgressBar.view.js +6 -3
- package/dist/components/quote/Quote.css +21 -6
- package/dist/components/quote/Quote.js +5 -5
- package/dist/components/quote/Quote.module.css +21 -6
- package/dist/components/quote/Quote.module.scss.js +5 -0
- package/dist/components/rating/Rating.client.js +6 -1
- package/dist/components/rating/Rating.css +34 -21
- package/dist/components/rating/Rating.js +4 -1
- package/dist/components/rating/Rating.module.css +34 -21
- package/dist/components/rating/Rating.module.scss.js +8 -0
- package/dist/components/rating/Rating.view.js +4 -2
- package/dist/components/rich-text/RichText.client.js +55 -20
- package/dist/components/rich-text/RichText.css +47 -31
- package/dist/components/rich-text/RichText.js +8 -2
- package/dist/components/rich-text/RichText.module.css +47 -31
- package/dist/components/rich-text/RichText.server.js +3 -0
- package/dist/components/select/Select.client.js +303 -102
- package/dist/components/select/Select.css +542 -221
- package/dist/components/select/Select.js +8 -2
- package/dist/components/select/Select.module.css +542 -221
- package/dist/components/select/Select.module.scss.js +57 -14
- package/dist/components/select/Select.view.js +75 -25
- package/dist/components/sidenav/SideNav.client.js +24 -1
- package/dist/components/sidenav/SideNav.css +89 -21
- package/dist/components/sidenav/SideNav.js +8 -2
- package/dist/components/sidenav/SideNav.module.css +89 -21
- package/dist/components/sidenav/SideNav.module.scss.js +6 -1
- package/dist/components/sidenav/SideNav.view.js +69 -14
- package/dist/components/skeleton/Skeleton.css +7 -7
- package/dist/components/skeleton/Skeleton.module.css +7 -7
- package/dist/components/slider/Slider.client.js +11 -2
- package/dist/components/slider/Slider.css +177 -112
- package/dist/components/slider/Slider.js +4 -1
- package/dist/components/slider/Slider.module.css +177 -112
- package/dist/components/slider/Slider.module.scss.js +11 -2
- package/dist/components/slider/Slider.view.js +140 -90
- package/dist/components/snackbar/Snackbar.client.js +5 -1
- package/dist/components/snackbar/Snackbar.css +125 -64
- package/dist/components/snackbar/Snackbar.js +4 -1
- package/dist/components/snackbar/Snackbar.module.css +125 -64
- package/dist/components/snackbar/Snackbar.module.scss.js +11 -13
- package/dist/components/snackbar/Snackbar.view.js +2 -2
- package/dist/components/snackbar/SnackbarProvider.js +8 -2
- package/dist/components/stepper/Stepper.client.js +27 -9
- package/dist/components/stepper/Stepper.css +46 -11
- package/dist/components/stepper/Stepper.js +4 -1
- package/dist/components/stepper/Stepper.module.css +46 -11
- package/dist/components/stepper/Stepper.module.scss.js +7 -0
- package/dist/components/stepper/Stepper.server.js +2 -0
- package/dist/components/stepper/Stepper.view.js +6 -1
- package/dist/components/switch/Switch.css +108 -84
- package/dist/components/switch/Switch.js +4 -1
- package/dist/components/switch/Switch.module.css +108 -84
- package/dist/components/switch/Switch.module.scss.js +14 -12
- package/dist/components/switch/Switch.view.js +10 -8
- package/dist/components/table/Table.css +19 -14
- package/dist/components/table/Table.js +1 -0
- package/dist/components/table/Table.module.css +19 -14
- package/dist/components/tabs/Tabs.client.js +1 -0
- package/dist/components/tabs/Tabs.css +53 -27
- package/dist/components/tabs/Tabs.js +8 -2
- package/dist/components/tabs/Tabs.module.css +53 -27
- package/dist/components/tabs/Tabs.module.scss.js +7 -2
- package/dist/components/tabs/Tabs.view.js +12 -4
- package/dist/components/teaser/Teaser.css +5 -5
- package/dist/components/teaser/Teaser.js +4 -4
- package/dist/components/teaser/Teaser.module.css +5 -5
- package/dist/components/tooltip/Tooltip.client.js +140 -95
- package/dist/components/tooltip/Tooltip.css +46 -9
- package/dist/components/tooltip/Tooltip.js +10 -4
- package/dist/components/tooltip/Tooltip.module.css +46 -9
- package/dist/components/tooltip/Tooltip.module.scss.js +5 -1
- package/dist/components/tooltip/Tooltip.view.js +7 -1
- package/dist/constants/project.js +1 -1
- package/dist/helpers/createIsland.js +1 -0
- package/dist/helpers/createLazyWrapper.js +1 -0
- package/dist/hooks/useGoogleMaps.js +0 -1
- package/dist/theme.css +3269 -1588
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/RTE/RTE.d.ts +6 -1
- package/dist/types/components/RTE/RTE.lazy.d.ts +6 -1
- package/dist/types/components/RTE/RTE.view.d.ts +1 -1
- package/dist/types/components/accordion/Accordion.d.ts +1 -1
- package/dist/types/components/accordion/Accordion.lazy.d.ts +1 -1
- package/dist/types/components/accordion/Accordion.model.d.ts +1 -1
- package/dist/types/components/accordion/Accordion.view.d.ts +1 -1
- package/dist/types/components/autocomplete/Autocomplete.model.d.ts +2 -0
- package/dist/types/components/autocomplete/Autocomplete.view.d.ts +1 -1
- package/dist/types/components/avatar/Avatar.d.ts +1 -1
- package/dist/types/components/avatar/Avatar.lazy.d.ts +1 -1
- package/dist/types/components/avatar/Avatar.model.d.ts +1 -1
- package/dist/types/components/avatar/Avatar.view.d.ts +1 -1
- package/dist/types/components/calendly/Calendly.view.d.ts +1 -1
- package/dist/types/components/card/Card.model.d.ts +1 -1
- package/dist/types/components/card/Card.view.d.ts +1 -1
- package/dist/types/components/carousel/Carousel.view.d.ts +1 -1
- package/dist/types/components/checkbox/Checkbox.d.ts +1 -0
- package/dist/types/components/checkbox/Checkbox.lazy.d.ts +1 -0
- package/dist/types/components/checkbox/Checkbox.model.d.ts +2 -0
- package/dist/types/components/checkbox/Checkbox.view.d.ts +1 -1
- package/dist/types/components/checkbox-group/CheckboxGroup.model.d.ts +2 -0
- package/dist/types/components/checkbox-group/CheckboxGroup.view.d.ts +1 -1
- package/dist/types/components/datePicker/DatePicker.model.d.ts +70 -1
- package/dist/types/components/datePicker/DatePicker.utils.d.ts +10 -0
- package/dist/types/components/datePicker/DatePicker.view.d.ts +7 -4
- package/dist/types/components/datePicker/DatePickerDialog.view.d.ts +4 -0
- package/dist/types/components/dynamic-list/DynamicList.model.d.ts +3 -1
- package/dist/types/components/dynamic-list/DynamicList.view.d.ts +1 -1
- package/dist/types/components/form/Form.d.ts +1 -1
- package/dist/types/components/form/Form.lazy.d.ts +1 -1
- package/dist/types/components/form/Form.model.d.ts +19 -4
- package/dist/types/components/form/FormField.client.d.ts +2 -2
- package/dist/types/components/form/FormField.d.ts +1 -1
- package/dist/types/components/form/FormField.lazy.d.ts +1 -1
- package/dist/types/components/form/FormField.server.d.ts +2 -2
- package/dist/types/components/headline/Headline.model.d.ts +2 -2
- package/dist/types/components/input/Input.model.d.ts +8 -1
- package/dist/types/components/input/Input.view.d.ts +1 -1
- package/dist/types/components/inputOTP/InputOTP.client.d.ts +4 -0
- package/dist/types/components/inputOTP/InputOTP.d.ts +10 -3
- package/dist/types/components/inputOTP/InputOTP.lazy.d.ts +11 -0
- package/dist/types/components/inputOTP/InputOTP.model.d.ts +10 -0
- package/dist/types/components/inputOTP/InputOTP.server.d.ts +3 -0
- package/dist/types/components/inputOTP/InputOTP.view.d.ts +3 -0
- package/dist/types/components/inputOTP/index.d.ts +1 -1
- package/dist/types/components/label/Label.model.d.ts +2 -0
- package/dist/types/components/link/Link.model.d.ts +1 -1
- package/dist/types/components/link/Link.view.d.ts +1 -1
- package/dist/types/components/list/List.d.ts +1 -1
- package/dist/types/components/list/List.model.d.ts +14 -5
- package/dist/types/components/list/index.d.ts +1 -1
- package/dist/types/components/loading/Loading.model.d.ts +2 -0
- package/dist/types/components/loading/index.d.ts +1 -1
- package/dist/types/components/pagination/Pagination.model.d.ts +2 -0
- package/dist/types/components/pagination/Pagination.view.d.ts +1 -1
- package/dist/types/components/post-item/PostItem.model.d.ts +2 -1
- package/dist/types/components/post-teaser/PostTeaser.model.d.ts +2 -1
- package/dist/types/components/post-widget/PostWidget.view.d.ts +1 -1
- package/dist/types/components/progressBar/ProgressBar.d.ts +1 -1
- package/dist/types/components/progressBar/ProgressBar.lazy.d.ts +1 -1
- package/dist/types/components/progressBar/ProgressBar.model.d.ts +3 -2
- package/dist/types/components/progressBar/ProgressBar.view.d.ts +1 -1
- package/dist/types/components/progressBar/index.d.ts +1 -1
- package/dist/types/components/quote/Quote.model.d.ts +1 -1
- package/dist/types/components/rating/Rating.model.d.ts +2 -0
- package/dist/types/components/rich-text/RichText.client.d.ts +1 -1
- package/dist/types/components/rich-text/RichText.d.ts +1 -1
- package/dist/types/components/rich-text/RichText.lazy.d.ts +1 -1
- package/dist/types/components/rich-text/RichText.model.d.ts +1 -1
- package/dist/types/components/select/Select.model.d.ts +2 -0
- package/dist/types/components/select/Select.view.d.ts +1 -1
- package/dist/types/components/sidenav/SideNav.client.d.ts +1 -1
- package/dist/types/components/sidenav/SideNav.model.d.ts +16 -2
- package/dist/types/components/sidenav/SideNav.view.d.ts +1 -1
- package/dist/types/components/slider/Slider.model.d.ts +2 -0
- package/dist/types/components/snackbar/Snackbar.model.d.ts +3 -2
- package/dist/types/components/snackbar/Snackbar.view.d.ts +3 -2
- package/dist/types/components/snackbar/index.d.ts +1 -1
- package/dist/types/components/stepper/Stepper.d.ts +1 -0
- package/dist/types/components/stepper/Stepper.lazy.d.ts +1 -0
- package/dist/types/components/stepper/Stepper.model.d.ts +3 -0
- package/dist/types/components/stepper/Stepper.server.d.ts +1 -1
- package/dist/types/components/switch/Switch.d.ts +2 -2
- package/dist/types/components/switch/Switch.lazy.d.ts +2 -2
- package/dist/types/components/switch/Switch.model.d.ts +3 -4
- package/dist/types/components/tabs/Tabs.model.d.ts +2 -0
- package/dist/types/components/tabs/Tabs.view.d.ts +1 -1
- package/dist/types/components/teaser/Teaser.model.d.ts +1 -1
- package/dist/types/components/tooltip/Tooltip.model.d.ts +2 -0
- package/package.json +53 -24
package/LICENSE
CHANGED
|
@@ -1,35 +1,196 @@
|
|
|
1
|
-
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
2
4
|
|
|
3
|
-
|
|
4
|
-
Licensed Work: prokodo-ui β a reusable UI component library built with React and TypeScript.
|
|
5
|
-
Software License Date: 2025-05-23
|
|
6
|
-
Change Date: 2028-05-23
|
|
7
|
-
Change License: MIT
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
=====
|
|
7
|
+
1. Definitions.
|
|
11
8
|
|
|
12
|
-
|
|
13
|
-
as
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
14
11
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
You may use, copy, modify, and distribute the Licensed Work,
|
|
18
|
-
but only for the following purpose:
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
19
14
|
|
|
20
|
-
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
21
22
|
|
|
22
|
-
You
|
|
23
|
-
|
|
24
|
-
- unless you obtain a **commercial license** from the Licensor.
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
"Work" shall mean the work of authorship made available under
|
|
36
|
+
the License, as indicated by a copyright notice that is included in
|
|
37
|
+
or attached to the work (an example is provided in the Appendix below).
|
|
38
|
+
|
|
39
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
40
|
+
form, that is based on (or derived from) the Work and for which the
|
|
41
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
42
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
43
|
+
of this License, Derivative Works shall not include works that remain
|
|
44
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
45
|
+
the Work and Derivative Works thereof.
|
|
46
|
+
|
|
47
|
+
"Contribution" shall mean, as defined in Section 5 below, any
|
|
48
|
+
Contribution intentionally submitted to the Licensor for inclusion in
|
|
49
|
+
the Work by the copyright owner or by an individual or Legal Entity
|
|
50
|
+
authorized to submit on behalf of the copyright owner. For the purposes
|
|
51
|
+
of this definition, "submitted" means any form of electronic, verbal,
|
|
52
|
+
or written communication sent to the Licensor or its representatives,
|
|
53
|
+
including but not limited to communication on electronic mailing lists,
|
|
54
|
+
source code control systems, and issue tracking systems that are managed
|
|
55
|
+
by, or on behalf of, the Licensor for the purpose of discussing and
|
|
56
|
+
improving the Work, but excluding communication that is conspicuously
|
|
57
|
+
marked or otherwise designated in writing by the copyright owner as
|
|
58
|
+
"Not a Contribution."
|
|
59
|
+
|
|
60
|
+
"Contributor" shall mean Licensor and any Legal Entity on behalf of
|
|
61
|
+
whom a Contribution has been received by the Licensor and subsequently
|
|
62
|
+
incorporated within the Work.
|
|
63
|
+
|
|
64
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
65
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
66
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
67
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
68
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
69
|
+
Work and such Derivative Works in Source or Object form.
|
|
70
|
+
|
|
71
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
72
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
73
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
74
|
+
(except as stated in this section) patent license to make, have made,
|
|
75
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
76
|
+
where such license applies only to those patent claims licensable
|
|
77
|
+
by such Contributor that are necessarily infringed by their
|
|
78
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
79
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
80
|
+
institute patent litigation against any entity (including a cross-claim
|
|
81
|
+
or counterclaim in a lawsuit) alleging that the Work or any
|
|
82
|
+
Contribution embodied within the Work constitutes direct or contributory
|
|
83
|
+
patent infringement, then any patent licenses granted to You under
|
|
84
|
+
this License for that Work shall terminate as of the date such
|
|
85
|
+
litigation is filed.
|
|
86
|
+
|
|
87
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
88
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
89
|
+
modifications, and in Source or Object form, provided that You
|
|
90
|
+
meet the following conditions:
|
|
91
|
+
|
|
92
|
+
(a) You must give any other recipients of the Work or
|
|
93
|
+
Derivative Works a copy of this License; and
|
|
94
|
+
|
|
95
|
+
(b) You must cause any modified files to carry prominent notices
|
|
96
|
+
stating that You changed the files; and
|
|
97
|
+
|
|
98
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
99
|
+
that You distribute, all copyright, patent, trademark, and
|
|
100
|
+
attribution notices from the Source form of the Work,
|
|
101
|
+
excluding those notices that do not pertain to any part of
|
|
102
|
+
the Derivative Works; and
|
|
103
|
+
|
|
104
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
105
|
+
distribution, You must include a readable copy of the
|
|
106
|
+
attribution notices contained within such NOTICE file, in
|
|
107
|
+
at least one of the following places: within a NOTICE text
|
|
108
|
+
file distributed as part of the Derivative Works; within
|
|
109
|
+
the Source form or documentation, if provided along with
|
|
110
|
+
the Derivative Works; or, within a display generated by
|
|
111
|
+
the Derivative Works, if and wherever such third-party
|
|
112
|
+
notices normally appear. The contents of the NOTICE file
|
|
113
|
+
are for informational purposes only and do not modify the
|
|
114
|
+
License. You may add Your own attribution notices within
|
|
115
|
+
Derivative Works that You distribute, alongside or as an
|
|
116
|
+
addendum to the NOTICE text from the Work, provided
|
|
117
|
+
that such additional attribution notices cannot be construed
|
|
118
|
+
as modifying the License.
|
|
119
|
+
|
|
120
|
+
You may add Your own license statement for Your modifications and
|
|
121
|
+
may provide additional grant of rights to use, copy, modify, merge,
|
|
122
|
+
publish, distribute, sublicense, and/or sell copies of the
|
|
123
|
+
Derivative Works, and to permit persons to whom the Derivative Works
|
|
124
|
+
are furnished to do so.
|
|
125
|
+
|
|
126
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
127
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
128
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
129
|
+
this License, without any additional terms or conditions.
|
|
130
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
131
|
+
the terms of any separate license agreement you may have executed
|
|
132
|
+
with Licensor regarding such Contributions.
|
|
133
|
+
|
|
134
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
135
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
136
|
+
except as required for reasonable and customary use in describing the
|
|
137
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
138
|
+
|
|
139
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
140
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
141
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
142
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
143
|
+
implied, including, without limitation, any warranties or conditions
|
|
144
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
145
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
146
|
+
appropriateness of using or reproducing the Work and assume any
|
|
147
|
+
risks associated with Your exercise of permissions under this License.
|
|
148
|
+
|
|
149
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
150
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
151
|
+
unless required by applicable law (such as deliberate and grossly
|
|
152
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
153
|
+
liable to You for damages, including any direct, indirect, special,
|
|
154
|
+
incidental, or exemplary damages of any character arising as a
|
|
155
|
+
result of this License or out of the use or inability to use the
|
|
156
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
157
|
+
work stoppage, computer failure or malfunction, or all other
|
|
158
|
+
commercial damages or losses), even if such Contributor has been
|
|
159
|
+
advised of the possibility of such damages.
|
|
160
|
+
|
|
161
|
+
9. Accepting Warranty or Liability. While redistributing the Work or
|
|
162
|
+
Derivative Works thereof, You may choose to offer, and charge a fee
|
|
163
|
+
for, acceptance of support, warranty, indemnity, or other liability
|
|
164
|
+
obligations and/or rights consistent with this License. However, in
|
|
165
|
+
accepting such obligations, You may act only on Your own behalf and
|
|
166
|
+
on Your sole responsibility, not on behalf of any other Contributor,
|
|
167
|
+
and only if You agree to indemnify, defend, and hold each Contributor
|
|
168
|
+
harmless for any liability incurred by, or claims asserted against,
|
|
169
|
+
such Contributor by reason of your accepting any such warranty or
|
|
170
|
+
additional liability.
|
|
171
|
+
|
|
172
|
+
END OF TERMS AND CONDITIONS
|
|
173
|
+
|
|
174
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
175
|
+
|
|
176
|
+
To apply the Apache License to your work, attach the following
|
|
177
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
178
|
+
replaced with your own identifying information. (Don't include
|
|
179
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
180
|
+
comment syntax for the file format in question. It may also be
|
|
181
|
+
provided in a machine-readable format not visible to end-users
|
|
182
|
+
(e.g., in a package manifest file).
|
|
183
|
+
|
|
184
|
+
Copyright 2025 prokodo (Christian Salat)
|
|
185
|
+
|
|
186
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
187
|
+
you may not use this file except in compliance with the License.
|
|
188
|
+
You may obtain a copy of the License at
|
|
189
|
+
|
|
190
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
191
|
+
|
|
192
|
+
Unless required by applicable law or agreed to in writing, software
|
|
193
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
194
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
195
|
+
implied. See the License for the specific language governing
|
|
196
|
+
permissions and limitations under the License.
|
package/NOTICE
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
prokodo-ui
|
|
2
|
+
Copyright 2025 prokodo (Christian Salat)
|
|
3
|
+
|
|
4
|
+
This product is licensed under the Apache License, Version 2.0.
|
|
5
|
+
You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
----------------------------------------------------------------------------
|
|
10
|
+
|
|
11
|
+
This repository contains Apache-2.0-licensed source code.
|
|
12
|
+
Third-party assets included in this repository may carry their own licenses.
|
|
13
|
+
See THIRD_PARTY_NOTICES.md for details.
|
|
14
|
+
|
|
15
|
+
Branded theme files (signature colours, radial glows, brand illustrations,
|
|
16
|
+
and the prokodo visual identity) are NOT distributed as part of this npm package.
|
|
17
|
+
|
|
18
|
+
----------------------------------------------------------------------------
|
|
19
|
+
|
|
20
|
+
TRADEMARK NOTICE
|
|
21
|
+
|
|
22
|
+
"prokodo" and the prokodo logo are trademarks of prokodo (Christian Salat).
|
|
23
|
+
The Apache License 2.0 does not grant permission to use these marks.
|
|
24
|
+
See TRADEMARKS.md for the full trademark policy.
|
package/README.md
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<a href="https://
|
|
3
|
-
<img src="
|
|
2
|
+
<a href="https://ui.prokodo.com" target="_blank" rel="noopener noreferrer">
|
|
3
|
+
<img src="./assets/images/banner.svg" alt="prokodo UI β Empowering Digital Innovation" width="900" />
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
|
-
<h1 align="center">prokodo UI (Beta)</h1>
|
|
7
|
-
<h2 align="center">Empowering Digital Innovation</h2>
|
|
8
6
|
|
|
9
7
|
**Modern, customizable UI components built with React and TypeScript β developed by [prokodo](https://www.prokodo.com) for high-performance web interfaces.**
|
|
10
8
|
|
|
@@ -27,11 +25,13 @@
|
|
|
27
25
|
https://www.prokodo.com/en/guide/next-js/next-js-migration/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=migration_en
|
|
28
26
|
</details>
|
|
29
27
|
|
|
28
|
+
<br>
|
|
29
|
+
|
|
30
30
|
[](https://www.npmjs.com/package/@prokodo/ui)
|
|
31
31
|
[](https://github.com/prokodo-agency/ui/actions/workflows/release.yml)
|
|
32
|
-
[](LICENSE)
|
|
33
|
+
[](https://ui.prokodo.com)
|
|
34
|
+
[](https://ui.prokodo.com/storybook)
|
|
35
35
|
[](#)
|
|
36
36
|
[](#)
|
|
37
37
|
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
- π§© **Component-rich**: 50+ reusable UI components
|
|
46
46
|
- π§ͺ **Reliable**: Fully tested with Jest and Testing Library
|
|
47
47
|
- π **Storybook**: Explore the components at [ui.prokodo.com](https://ui.prokodo.com)
|
|
48
|
-
- π¦ **Ready-to-install**: Distributed via npm
|
|
48
|
+
- π¦ **Ready-to-install**: Distributed via npm under the Apache-2.0 license β free for production use
|
|
49
49
|
- π **Optimized for Next.js 13β16 out of the box** (App Router, React Server Components)
|
|
50
50
|
- β‘ **Turbopack compatible** (no config required)
|
|
51
51
|
- π **Framework adapters** via `UIRuntimeProvider` for `next/link` & `next/image`
|
|
@@ -64,13 +64,21 @@ Each component is built for **lazy loading**, works seamlessly with **React Serv
|
|
|
64
64
|
|
|
65
65
|
This makes `@prokodo/ui` ideal for modern SSR apps using Next.js or Remix, with excellent Time-to-Interactive (TTI) and Core Web Vitals.
|
|
66
66
|
|
|
67
|
+
## π License & Usage
|
|
68
|
+
|
|
69
|
+
| | |
|
|
70
|
+
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
71
|
+
| **License** | [Apache-2.0](LICENSE) β free for production use, modification, and redistribution |
|
|
72
|
+
| **Trademark** | "prokodo" and the prokodo logo are trademarks of prokodo (Christian Salat). See [TRADEMARKS.md](TRADEMARKS.md) |
|
|
73
|
+
| **Brand theme** | Signature visuals (logo, illustrations, special glow patterns) may appear in docs/Storybook but are not distributed in the npm package |
|
|
74
|
+
| **Contributing** | Sign-off required (DCO 1.1). See [CONTRIBUTING.md](CONTRIBUTING.md) |
|
|
75
|
+
| **Security** | Responsible disclosure via GitHub Advisories. See [SECURITY.md](SECURITY.md) |
|
|
76
|
+
|
|
67
77
|
---
|
|
68
78
|
|
|
69
79
|
## π Getting Started
|
|
70
80
|
|
|
71
|
-
###
|
|
72
|
-
|
|
73
|
-
> β οΈ ESM-only: This package does not support CommonJS (`require()`).
|
|
81
|
+
### Install
|
|
74
82
|
|
|
75
83
|
```bash
|
|
76
84
|
pnpm add @prokodo/ui
|
|
@@ -78,300 +86,22 @@ pnpm add @prokodo/ui
|
|
|
78
86
|
npm install @prokodo/ui
|
|
79
87
|
```
|
|
80
88
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
#### React
|
|
84
|
-
|
|
85
|
-
```tsx
|
|
86
|
-
import { Button, type ButtonProps } from "@prokodo/ui/button"
|
|
87
|
-
|
|
88
|
-
export default function Layout() {
|
|
89
|
-
// Renders to HTML on the server with zeroβJS.
|
|
90
|
-
// On the client, it will hydrate when scrolled into view or the user interacts.
|
|
91
|
-
return <Button title="Click me" />
|
|
92
|
-
}
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
#### Next.js (RSC + AIC, lazyβhydrate when visible/interacted)
|
|
96
|
-
|
|
97
|
-
```tsx
|
|
98
|
-
import { Button, type ButtonProps } from "@prokodo/ui/button"
|
|
99
|
-
|
|
100
|
-
export default function Layout() {
|
|
101
|
-
// Renders to HTML on the server with zeroβJS.
|
|
102
|
-
// On the client, it will hydrate when scrolled into view or the user interacts.
|
|
103
|
-
return <Button title="Click me" />
|
|
104
|
-
}
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
#### Next.js (RSC + AIC, force immediate hydration with priority)
|
|
108
|
-
|
|
109
|
-
```tsx
|
|
110
|
-
import { Button, type ButtonProps } from "@prokodo/ui/button"
|
|
111
|
-
|
|
112
|
-
export default function AboveTheFoldHero() {
|
|
113
|
-
// Because this lives above the fold, we want it to hydrate right away:
|
|
114
|
-
return <Button priority title="Welcome to prokodo" />
|
|
115
|
-
}
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
#### Next.js ("use client" wrapper, immediate hydration - above the fold)
|
|
119
|
-
|
|
120
|
-
```tsx
|
|
121
|
-
"use client"
|
|
122
|
-
|
|
123
|
-
import { Button, type ButtonProps } from "@prokodo/ui/button"
|
|
124
|
-
import { type FC, memo } from "react"
|
|
125
|
-
|
|
126
|
-
// In a pureβclient file, you can wrap the AIC export.
|
|
127
|
-
// The `priority` prop here ensures hydration runs immediately when mounted.
|
|
128
|
-
export const HeadlineClient: FC<ButtonProps> = memo(props => {
|
|
129
|
-
return <Button {...props} priority />
|
|
130
|
-
})
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
#### Next.js (hydrate on visibility only, default behavior)
|
|
134
|
-
|
|
135
|
-
```tsx
|
|
136
|
-
import { Headline, type ButtonProps } from "@prokodo/ui/button"
|
|
137
|
-
|
|
138
|
-
export default function GalleryPage() {
|
|
139
|
-
return (
|
|
140
|
-
<div style={{ height: "200vh" }}>
|
|
141
|
-
<p>Keep scrollingβ¦</p>
|
|
142
|
-
<div style={{ marginTop: "100vh" }}>
|
|
143
|
-
{/* This will render as HTML on the server;
|
|
144
|
-
on the client, it only hydrates when this element scrolls into view. */}
|
|
145
|
-
<Button title="I hydrate when you see me" />
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
)
|
|
149
|
-
}
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
## π¦ Available Components
|
|
153
|
-
|
|
154
|
-
### Compatibility of the components
|
|
155
|
-
|
|
156
|
-
- β
= Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also be used as a clientβonly entry.
|
|
157
|
-
- \- = RSC (AIC) only; no clientβside bundle needed. (Usable in both, but best practice to use in RSC only)
|
|
158
|
-
|
|
159
|
-
| Component | β
AIC (RSC + optional client) | β
SSR-Compatible (`"use client"`) |
|
|
160
|
-
| ------------------- | :----------------------------: | :--------------------------------: |
|
|
161
|
-
| Accordion | β
| β
|
|
|
162
|
-
| Animated | β
| β
|
|
|
163
|
-
| AnimatedText | β
| β
|
|
|
164
|
-
| Autocomplete | β
| β
|
|
|
165
|
-
| Avatar | β
| β
|
|
|
166
|
-
| BaseLink | β
| β
|
|
|
167
|
-
| Button | β
| β
|
|
|
168
|
-
| Calendly | β
| β
|
|
|
169
|
-
| Card | β
| β
|
|
|
170
|
-
| Carousel | β
| β
|
|
|
171
|
-
| Checkbox | β
| β
|
|
|
172
|
-
| CheckboxGroup | β
| β
|
|
|
173
|
-
| Chip | β
| β
|
|
|
174
|
-
| DatePicker | β
| β
|
|
|
175
|
-
| Dialog | β
| β
|
|
|
176
|
-
| Drawer | β
| β
|
|
|
177
|
-
| DynamicList | β
| β
|
|
|
178
|
-
| Form | β
| β
|
|
|
179
|
-
| FormResponse | β
| β |
|
|
180
|
-
| Grid/GridRow | β
| β |
|
|
181
|
-
| Headline | β
| - |
|
|
182
|
-
| Icon | β
| β |
|
|
183
|
-
| Image | β
| β
|
|
|
184
|
-
| ImageText | β
| - |
|
|
185
|
-
| Input | β
| β
|
|
|
186
|
-
| Label | β
| β |
|
|
187
|
-
| Link | β
| β
|
|
|
188
|
-
| List | β
| β |
|
|
189
|
-
| Loading | β
| β |
|
|
190
|
-
| Lottie | β | β
|
|
|
191
|
-
| Map | β | β
|
|
|
192
|
-
| Pagination | β
| β
|
|
|
193
|
-
| PostItem | β
| β
|
|
|
194
|
-
| PostTeaser | β
| β
|
|
|
195
|
-
| PostWidget | β
| β
|
|
|
196
|
-
| PostWidgetCarousel | β
| β
|
|
|
197
|
-
| ProgressBar | β
| β
|
|
|
198
|
-
| Quote | β
| β |
|
|
199
|
-
| Rating | β
| β
|
|
|
200
|
-
| RichText | β
| β
|
|
|
201
|
-
| RTE (Beta) | β
| β
|
|
|
202
|
-
| Select | β
| β
|
|
|
203
|
-
| SideNav | β
| β
|
|
|
204
|
-
| Skeleton | β
| β |
|
|
205
|
-
| Slider | β
| β
|
|
|
206
|
-
| Snackbar & Provider | β
| β
|
|
|
207
|
-
| Stepper | β
| β
|
|
|
208
|
-
| Switch | β
| β
|
|
|
209
|
-
| Table | β
| β |
|
|
210
|
-
| Tabs | β
| β
|
|
|
211
|
-
| Teaser | β
| - |
|
|
212
|
-
| Tooltip | β
| β
|
|
|
213
|
-
|
|
214
|
-
## Since Next.js 16
|
|
215
|
-
|
|
216
|
-
- Link/Image runtime provider (required for <Link>/<Image> adapters)
|
|
217
|
-
- For Next.js apps, provide your framework components (next/link, next/image) via a small client provider.
|
|
218
|
-
- Do not pass linkComponent / imageComponent props from pagesβuse the provider instead.
|
|
219
|
-
|
|
220
|
-
### 1. Create a client provider
|
|
221
|
-
|
|
222
|
-
```tsx
|
|
223
|
-
// app/providers/ProkodoUiNextProvider.tsx
|
|
224
|
-
"use client"
|
|
225
|
-
|
|
226
|
-
import NextLink from "next/link"
|
|
227
|
-
import NextImage from "next/image"
|
|
228
|
-
import { UIRuntimeProvider } from "@prokodo/ui/runtime"
|
|
229
|
-
|
|
230
|
-
export function ProkodoUiNextProvider({
|
|
231
|
-
children,
|
|
232
|
-
}: {
|
|
233
|
-
children: React.ReactNode
|
|
234
|
-
}) {
|
|
235
|
-
return (
|
|
236
|
-
<UIRuntimeProvider
|
|
237
|
-
value={{ linkComponent: NextLink, imageComponent: NextImage }}
|
|
238
|
-
>
|
|
239
|
-
{children}
|
|
240
|
-
</UIRuntimeProvider>
|
|
241
|
-
)
|
|
242
|
-
}
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
### 2. Wrap your root layout
|
|
246
|
-
|
|
247
|
-
```tsx
|
|
248
|
-
// app/layout.tsx (server component)
|
|
249
|
-
import { ProkodoUiNextProvider } from "./providers/ProkodoUiNextProvider"
|
|
250
|
-
|
|
251
|
-
export default function RootLayout({
|
|
252
|
-
children,
|
|
253
|
-
}: {
|
|
254
|
-
children: React.ReactNode
|
|
255
|
-
}) {
|
|
256
|
-
return (
|
|
257
|
-
<html lang="en">
|
|
258
|
-
<body>
|
|
259
|
-
<ProkodoUiNextProvider>{children}</ProkodoUiNextProvider>
|
|
260
|
-
</body>
|
|
261
|
-
</html>
|
|
262
|
-
)
|
|
263
|
-
}
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
### 3. Use components normally (no extra props needed)
|
|
267
|
-
|
|
268
|
-
```tsx
|
|
269
|
-
import { Link } from "@prokodo/ui/link"
|
|
270
|
-
import { Image } from "@prokodo/ui/image"
|
|
271
|
-
|
|
272
|
-
export default function Page() {
|
|
273
|
-
return (
|
|
274
|
-
<>
|
|
275
|
-
<Link href="/about">About</Link>
|
|
276
|
-
<Image src="/hero.jpg" alt="Hero" />
|
|
277
|
-
</>
|
|
278
|
-
)
|
|
279
|
-
}
|
|
280
|
-
```
|
|
281
|
-
|
|
282
|
-
**Notes**:
|
|
283
|
-
|
|
284
|
-
- The provider file must be a "use client" module.
|
|
285
|
-
- Remove any linkComponent / imageComponent props you previously passed from server code.
|
|
286
|
-
- Plain React (non-Next) apps donβt need this; just use <a> / <img> or pass your own adapters inside client components.
|
|
287
|
-
|
|
288
|
-
## How to create my own Island Component?
|
|
289
|
-
|
|
290
|
-
### 1. Create your island component (Navbar.tsx):
|
|
291
|
-
|
|
292
|
-
Island architecture lets you render components on the server and hydrate them on the client only when needed.
|
|
293
|
-
|
|
294
|
-
```tsx
|
|
295
|
-
import { createIsland } from "@prokodo/ui/createIsland"
|
|
296
|
-
import { NavbarServer } from "./Navbar.server"
|
|
297
|
-
|
|
298
|
-
import type { NavbarProps } from "./Navbar.model"
|
|
299
|
-
|
|
300
|
-
export const Navbar = createIsland<NavbarProps>({
|
|
301
|
-
name: "Navbar",
|
|
302
|
-
Server: NavbarServer,
|
|
303
|
-
loadLazy: () => import("./Navbar.lazy"),
|
|
304
|
-
|
|
305
|
-
// Optional: Force client-side hydration as soon as someone uses an action
|
|
306
|
-
// We are automatically recognizing onChange, onKeyDown, ... events. Only needed for custom attributes.
|
|
307
|
-
isInteractive: (p: NavbarProps) => p.customEvent === true,
|
|
308
|
-
})
|
|
309
|
-
```
|
|
310
|
-
|
|
311
|
-
### 2. Create your lazy-hydrate wrapper (Navbar.lazy):
|
|
312
|
-
|
|
313
|
-
```tsx
|
|
314
|
-
"use client"
|
|
315
|
-
import { createLazyWrapper } from "@prokodo/ui/createLazyWrapper"
|
|
316
|
-
|
|
317
|
-
import { NavbarClient } from "./Navbar.client"
|
|
318
|
-
import { NavbarServer } from "./Navbar.server"
|
|
319
|
-
|
|
320
|
-
import type { NavbarProps } from "./Navbar.model"
|
|
321
|
-
|
|
322
|
-
export default createLazyWrapper<NavbarProps>({
|
|
323
|
-
name: "Navbar",
|
|
324
|
-
Client: NavbarClient,
|
|
325
|
-
Server: NavbarServer,
|
|
326
|
-
|
|
327
|
-
// Optional: Defer hydration until the component becomes visible in the viewport (Default: true)
|
|
328
|
-
// Can be controlled by priority attribute.
|
|
329
|
-
hydrateOnVisible: false,
|
|
330
|
-
|
|
331
|
-
// Optional: Force client-side hydration as soon as someone uses an action.
|
|
332
|
-
// We are automatically recognizing onChange, onKeyDown, ... events. Only needed for custom attributes.
|
|
333
|
-
isInteractive: (p: NavbarProps) => p.customEvent === true,
|
|
334
|
-
})
|
|
335
|
-
```
|
|
336
|
-
|
|
337
|
-
## π― Next steps
|
|
338
|
-
|
|
339
|
-
- [ ] Add more β¨ **fancy styling**, UI polish and properties
|
|
340
|
-
- [ ] Improve **accessibility** to meet **WCAG 2.2 AAA** standards
|
|
341
|
-
- [ ] Detailed Documentation about the components
|
|
342
|
-
- [x] Detailed Typescript-Model-Documentation about the components
|
|
343
|
-
|
|
344
|
-
## Examples (Next.js + Headless CMS)
|
|
345
|
-
|
|
346
|
-
Real-world setups we ship:
|
|
347
|
-
|
|
348
|
-
- Next.js + **Strapi** content models
|
|
349
|
-
- Next.js + **Contentful** entries & preview
|
|
350
|
-
- Migration from **Headless WordPress** to Next.js
|
|
351
|
-
|
|
352
|
-
**Need help or a quick scoping?**
|
|
353
|
-
|
|
354
|
-
- πΊπΈ **Next.js Agency (EN)** β https://www.prokodo.com/en/next-js-agency/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=examples_cta_en
|
|
355
|
-
- π©πͺ **Next.js Agentur (DE)** β https://www.prokodo.com/de/next-js-agentur/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=examples_cta_de
|
|
356
|
-
|
|
357
|
-
<details>
|
|
358
|
-
<summary><b>Further reading: Next.js guides</b> (SEO Β· Performance Β· Migration)</summary>
|
|
359
|
-
|
|
360
|
-
- SEO (Metadata API, hreflang):
|
|
361
|
-
https://www.prokodo.com/en/guide/next-js/next-js-seo/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=seo_en
|
|
89
|
+
> β οΈ ESM-only: This package does not support CommonJS (`require()`).
|
|
362
90
|
|
|
363
|
-
|
|
364
|
-
https://www.prokodo.com/en/guide/next-js/next-js-performance/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=perf_en
|
|
91
|
+
### Documentation & Examples
|
|
365
92
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
93
|
+
| Resource | Link |
|
|
94
|
+
| --------------------------------- | -------------------------------------------------------------------------- |
|
|
95
|
+
| π Full docs & API reference | [ui.prokodo.com](https://ui.prokodo.com) |
|
|
96
|
+
| π¨ Interactive component explorer | [ui.prokodo.com/storybook](https://ui.prokodo.com/storybook) |
|
|
97
|
+
| π¦ npm | [npmjs.com/package/@prokodo/ui](https://www.npmjs.com/package/@prokodo/ui) |
|
|
369
98
|
|
|
370
99
|
## π Documentation
|
|
371
100
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
101
|
+
| | |
|
|
102
|
+
| --------------------------------- | ------------------------------------------------------------ |
|
|
103
|
+
| π Docs & API reference | [ui.prokodo.com](https://ui.prokodo.com) |
|
|
104
|
+
| π¨ Component explorer (Storybook) | [ui.prokodo.com/storybook](https://ui.prokodo.com/storybook) |
|
|
375
105
|
|
|
376
106
|
## π Local Development
|
|
377
107
|
|
|
@@ -390,7 +120,7 @@ pnpm run storybook:build
|
|
|
390
120
|
|
|
391
121
|
## π License
|
|
392
122
|
|
|
393
|
-
This library is published under the
|
|
123
|
+
This library is published under the [Apache License 2.0](LICENSE).
|
|
394
124
|
|
|
395
|
-
Β© 2025 prokodo
|
|
125
|
+
Β© 2025 prokodo. See [NOTICE](NOTICE) and [TRADEMARKS.md](TRADEMARKS.md).
|
|
396
126
|
Visit us at [prokodo.com](https://www.prokodo.com).
|
|
@@ -263,7 +263,6 @@ function RTEClient(props) {
|
|
|
263
263
|
const root = q.root;
|
|
264
264
|
const onRootClick = /* @__PURE__ */ __name((ev) => {
|
|
265
265
|
var _a2, _b2;
|
|
266
|
-
if (Boolean(disabled) || Boolean(readOnly)) return;
|
|
267
266
|
const el = ev.target;
|
|
268
267
|
if (!el || el.tagName !== "IMG") return;
|
|
269
268
|
const img = el;
|