chore: enhance types

SAP-samples · Sep 11, 2024 · 5c185f7 · 5c185f7
1 parent dd7b5a6
commit 5c185f7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -381,19 +381,19 @@ function App() {
 
 			<section className="app-content">
 				<div className="create-todo-wrapper">
-					<ui5-input placeholder="Type a task..." ref={todoInput} className="add-todo-element-width" id="add-input"></ui5-input>
-					<ui5-date-picker format-pattern="dd/MM/yyyy" className="add-todo-element-width" ref={todoDeadline} id="date-picker"></ui5-date-picker>
-					<ui5-button className="add-todo-element-width" ref={addButton} design="Emphasized" id="add-button">
+					<ui5-input placeholder="Type a task..." ref={todoInput} class="add-todo-element-width" id="add-input"></ui5-input>
+					<ui5-date-picker format-pattern="dd/MM/yyyy" class="add-todo-element-width" ref={todoDeadline} id="date-picker"></ui5-date-picker>
+					<ui5-button class="add-todo-element-width" ref={addButton} design="Emphasized" id="add-button">
 						Add Todo
 					</ui5-button>
 				</div>
 
 				<div className="list-todos-wrapper">
-					<ui5-panel header-text="Incompleted Tasks" collapsed={!todos.filter((todo) => !todo.done).length || undefined} className="list-todos-panel">
+					<ui5-panel header-text="Incompleted Tasks" collapsed={!todos.filter((todo) => !todo.done).length || undefined} class="list-todos-panel">
 						<TodoList items={todos.filter((todo) => !todo.done)} handleSelectionChange={handleDone} handleDelete={handleRemove} handleEdit={handleEdit}></TodoList>
 					</ui5-panel>
 
-					<ui5-panel header-text="Completed Tasks" collapsed={!todos.filter((todo) => todo.done).length || undefined} className="list-todos-panel" id="completed-tasks">
+					<ui5-panel header-text="Completed Tasks" collapsed={!todos.filter((todo) => todo.done).length || undefined} class="list-todos-panel" id="completed-tasks">
 						<TodoList items={todos.filter((todo) => todo.done)} handleSelectionChange={handleUnDone} handleDelete={handleRemove} handleEdit={handleEdit}></TodoList>
 					</ui5-panel>
 				</div>
@@ -403,7 +403,7 @@ function App() {
 				<div className="dialog-content">
 					<div className="edit-wrapper">
 						<ui5-label>Title:</ui5-label>
-						<ui5-textarea className="title-textarea" max-length="24" show-exceeded-text value={todoBeingEditted.text} ref={titleEditInput}></ui5-textarea>
+						<ui5-textarea class="title-textarea" max-length="24" show-exceeded-text value={todoBeingEditted.text} ref={titleEditInput}></ui5-textarea>
 					</div>
 
 					<div className="edit-wrapper date-edit-fields">
@@ -413,18 +413,18 @@ function App() {
 				</div>
 
 				<div className="dialog-footer">
-					<ui5-button className="dialog-footer-btn--cancel" design="Transparent" ref={cancelBtn}>
+					<ui5-button class="dialog-footer-btn--cancel" design="Transparent" ref={cancelBtn}>
 						Cancel
 					</ui5-button>
 					{/*close dialog*/}
-					<ui5-button className="dialog-footer-btn--save" design="Emphasized" ref={saveBtn}>
+					<ui5-button class="dialog-footer-btn--save" design="Emphasized" ref={saveBtn}>
 						Save
 					</ui5-button>
 					{/*save dialog info*/}
 				</div>
 			</ui5-dialog>
 
-			<ui5-popover ref={themeSettingsPopover} className="app-bar-theming-popover" placement="Bottom" horizontal-align="End" header-text="Theme">
+			<ui5-popover ref={themeSettingsPopover} class="app-bar-theming-popover" placement="Bottom" horizontal-align="End" header-text="Theme">
 				<ui5-list ref={themeSelect} selection-mode="Single">
 					<ui5-li icon="palette" data-theme="sap_horizon" selected>
 						SAP Horizon Morning
@@ -453,7 +453,7 @@ function App() {
 				</ui5-list>
 			</ui5-popover>
 
-			<ui5-popover ref={profilePopover} className="app-bar-profile-popover" placement="Bottom" horizontal-align="End">
+			<ui5-popover ref={profilePopover} class="app-bar-profile-popover" placement="Bottom" horizontal-align="End">
 				<div className="profile-settings">
 					<ui5-avatar size="M" initials="JD"></ui5-avatar>
 					<div className="profile-text">
@@ -481,15 +481,15 @@ function App() {
 				<div>
 					<div className="profile-rtl-switch centered">
 						<div className="profile-rtl-switch-title">
-							<ui5-label className="profile-rtl-switch-text">RTL</ui5-label>
+							<ui5-label class="profile-rtl-switch-text">RTL</ui5-label>
 						</div>
 						<ui5-switch ref={rtlSwitch}></ui5-switch>
 					</div>
 				</div>
 
 				<div className="profile-rtl-switch centered">
 					<div className="profile-rtl-switch-title">
-						<ui5-label className="profile-rtl-switch-text">Compact</ui5-label>
+						<ui5-label class="profile-rtl-switch-text">Compact</ui5-label>
 					</div>
 					<ui5-switch ref={contentDensitySwitch}></ui5-switch>
 				</div>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,4 +1,4 @@
-import type { DOMAttributes, useRef, Key } from "react";
+import type { useRef, Key } from "react";
 import type Dialog from "@ui5/webcomponents/dist/Dialog";
 import type Input from "@ui5/webcomponents/dist/Input";
 import type Text from "@ui5/webcomponents/dist/Text";
@@ -25,9 +25,17 @@ import type ShellBar from "@ui5/webcomponents-fiori/dist/ShellBar";
 import type ShellBarItem from "@ui5/webcomponents-fiori/dist/ShellBarItem";
 import type Icon from "@ui5/webcomponents/dist/Icon";
 
+type CamelToKebab<S extends string> = S extends `${infer T}${infer U}`
+  ? `${T extends Lowercase<T> ? '' : '-'}${Lowercase<T>}${CamelToKebab<U>}`
+  : S;
+
+type CamelCaseToKebabCase<T> = {
+  [K in keyof T as CamelToKebab<Extract<K, string>>]: T[K];
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type CustomElement<T> = Partial<T & CustomElementAttrs<T> & { children: any }>;
-type CustomElementAttrs<T> = DOMAttributes<T> & { key: Key; ref: ReturnType<typeof useRef<T>>; class: string };
+type CustomElement<T> = Partial<CustomElementAttrs<T> & { children: any }>;
+type CustomElementAttrs<T> = CamelCaseToKebabCase<T> & { key: Key; ref: ReturnType<typeof useRef<T>>; class: string };
 
 declare global {
 	namespace JSX {