Upgrade react and migrate the code

packages/adapters/preact/package.json

@@ -53,8 +53,8 @@
 	},
 	"devDependencies": {
 		"@public-ui/components": "workspace:*",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"typescript": "5.6.3",
 		"unbuild": "1.2.1"
 	},

packages/adapters/react/README.md

@@ -39,7 +39,6 @@ register(DEFAULT, defineCustomElements)
 Then, you can import any component from `@public-ui/react` and render it within React components:
 
 ```tsx
-import React from 'react';
 import type { FC } from 'react';
 import { KolButton } from '@public-ui/react';
 

packages/adapters/react/package.json

@@ -55,8 +55,8 @@
 		"@types/normalize-package-data": "2.4.4",
 		"@types/react": "18.3.4",
 		"@types/react-dom": "18.3.1",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"typescript": "5.6.3",
 		"unbuild": "1.2.1"
 	},

packages/designer/public/index.html

@@ -9,7 +9,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
 		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
-		<link rel="stylesheet" href="assets/bundes/style.css" />
 		<link rel="stylesheet" href="assets/codicons/codicon.css" />
 		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
 		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />

packages/samples/react/package.json

@@ -59,8 +59,8 @@
 		"npm-run-all": "4.1.5",
 		"postcss-loader": "8.1.1",
 		"prettier": "3.4.2",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-number-format": "5.4.2",
 		"react-router": "6.28.0",
 		"react-router-dom": "6.28.0",

packages/samples/react/public/index.html

@@ -6,7 +6,6 @@
 		<meta name="description" content="Webapp demonstrating KolBri-components with React." />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
-		<link rel="stylesheet" href="assets/bundes/style.css" />
 		<link rel="stylesheet" href="assets/codicons/codicon.css" />
 		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
 		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />

packages/samples/react/src/App.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { useLocation } from 'react-router';
 import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 

packages/samples/react/src/components/BackPage.tsx

@@ -1,5 +1,4 @@
 import { KolAlert, KolButton } from '@public-ui/react';
-import React from 'react';
 
 import type { FC } from 'react';
 

packages/samples/react/src/components/FormWrap.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButton, KolForm } from '@public-ui/react';
 
 export const FormWrap = <P,>({ RefComponent: Component, ...props }: { RefComponent: any } & Partial<P>) => {

packages/samples/react/src/components/Navigation.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { KolAccordion, KolTree, KolTreeItem } from '@public-ui/react';
 import { useMobile } from '../hooks/useMobile';
 import type { Routes, Route } from '../shares/types';

packages/samples/react/src/components/SampleDescription.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 
 import { PUBLIC_CODE_COMPONENT_URL, PUBLIC_DOC_COMPONENT_URL } from '../shares/constants';
 

packages/samples/react/src/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react';
 

packages/samples/react/src/components/abbr/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolAbbr } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/accordion/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolAccordion } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/accordion/headlines.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { KolAccordion } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';

packages/samples/react/src/components/alert/basic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { KolAlert } from '@public-ui/react';
 import type { FC } from 'react';
 import type { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';

packages/samples/react/src/components/alert/card-msg.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { AlertVariants } from './basic';
 import { SampleDescription } from '../SampleDescription';

packages/samples/react/src/components/alert/html.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolAlert, KolHeading } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { FC } from 'react';

packages/samples/react/src/components/avatar/basic.tsx

@@ -1,5 +1,5 @@
 import { KolAvatar } from '@public-ui/react';
-import React from 'react';
+
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/badge/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolBadge } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/badge/button.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { KolBadge } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';

packages/samples/react/src/components/breadcrumb/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolBreadcrumb } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/button-group/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolBadge, KolButton, KolButtonGroup } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/button-link/aria-description.tsx

@@ -1,5 +1,5 @@
 import { KolButtonLink } from '@public-ui/react';
-import React from 'react';
+
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/button-link/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButtonLink } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/button-link/icons.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButtonLink } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/button-link/image.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButtonLink } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/button/access-key.tsx

@@ -1,5 +1,5 @@
 import { KolButton, KolLink } from '@public-ui/react';
-import React from 'react';
+
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';

packages/samples/react/src/components/button/aria-description.tsx

@@ -1,5 +1,5 @@
 import { KolButton } from '@public-ui/react';
-import React from 'react';
+
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';

packages/samples/react/src/components/button/baselined.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/button/basic.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { ButtonVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/button/expert-slot.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { ButtonVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
 

packages/samples/react/src/components/button/icons.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/button/partials/cases.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { KolButton } from '@public-ui/react';
 import { useToasterService } from '../../../hooks/useToasterService';
 import type { ButtonSampleProps } from './type';

packages/samples/react/src/components/button/partials/variants.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ButtonCases } from './cases';
 import { KolHeading } from '@public-ui/react';
 import type { ButtonSampleProps } from './type';

packages/samples/react/src/components/button/short-key.tsx

@@ -1,5 +1,5 @@
 import { KolButton } from '@public-ui/react';
-import React from 'react';
+
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';

packages/samples/react/src/components/button/width.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/card/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolCard } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/combobox/basic.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useContext } from 'react';
-import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { ComboboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';

packages/samples/react/src/components/combobox/partials/cases.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolCombobox } from '@public-ui/react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';

packages/samples/react/src/components/combobox/partials/variants.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Components } from '@public-ui/components';
 
 import { ComboboxCases } from './cases';

packages/samples/react/src/components/details/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolDetails } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/drawer/basic.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useContext, useEffect } from 'react';
+import { useRef, useState, useContext, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { HideMenusContext } from '../../shares/HideMenusContext';

packages/samples/react/src/components/drawer/controlled.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useState, useContext } from 'react';
+import { useState, useContext } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { HideMenusContext } from '../../shares/HideMenusContext';

packages/samples/react/src/components/drawer/partials/align.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { KolInputRadio } from '@public-ui/react';
 

packages/samples/react/src/components/form/basic.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { SampleDescription } from '../SampleDescription';
 import { KolForm, KolInputText } from '@public-ui/react';
 

packages/samples/react/src/components/form/error-list.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { SampleDescription } from '../SampleDescription';
 import { KolForm, KolInputText } from '@public-ui/react';
 

packages/samples/react/src/components/handout/basic.tsx

@@ -1,6 +1,6 @@
 import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
 import type { FC } from 'react';
-import React from 'react';
+
 import {
 	KolAbbr,
 	KolAccordion,

packages/samples/react/src/components/heading/badged.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolBadge, KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/heading/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/heading/paragraph.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/icon/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolIcon } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/image/basic.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { SampleDescription } from '../SampleDescription';
 import { KolImage } from '@public-ui/react';
 

packages/samples/react/src/components/indented-text/basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { KolBadge, KolIndentedText } from '@public-ui/react';
 
 import type { FC } from 'react';

packages/samples/react/src/components/input-checkbox/basic.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';

packages/samples/react/src/components/input-checkbox/button.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';

packages/samples/react/src/components/input-checkbox/partials/cases.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { KolInputCheckbox } from '@public-ui/react';
 

packages/samples/react/src/components/input-checkbox/partials/variants.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { InputCheckboxCases } from './cases';
 

packages/samples/react/src/components/input-checkbox/switch.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+
 import { SampleDescription } from '../SampleDescription';
 import { InputCheckboxVariants } from './partials/variants';
 import { FormWrap } from '../FormWrap';

packages/samples/react/src/components/input-color/basic.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputColorVariants } from './partials/variants';