Small optimizations / alignments with the react version

.eslintrc.cjs

@@ -50,7 +50,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.cjs', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
+        extensions: ['.cjs', '.d.ts', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
       },
     },
   },

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2024 Dominik Zogg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

src/app.tsx

@@ -6,14 +6,14 @@ import { A } from '@solidjs/router';
 const App: Component<RouteSectionProps> = (props: RouteSectionProps) => {
   const [getDisplayMenu, setDisplayMenu] = createSignal<boolean>(false);
 
+  const toggleMenu = () => {
+    setDisplayMenu(!getDisplayMenu());
+  };
+
   return (
     <div class="relative flex min-h-full flex-col md:flex-row">
       <nav class="absolute flow-root h-16 w-full bg-gray-900 px-4 py-3 text-2xl font-semibold uppercase leading-relaxed text-gray-100">
-        <button
-          class="float-right block border-2 p-2 md:hidden"
-          data-testid="navigation-toggle"
-          onClick={() => setDisplayMenu((displayMenu) => !displayMenu)}
-        >
+        <button class="float-right block border-2 p-2 md:hidden" data-testid="navigation-toggle" onClick={toggleMenu}>
           <span class="block h-2 w-6 border-t-2" />
           <span class="block h-2 w-6 border-t-2" />
           <span class="block h-0 w-6 border-t-2" />

src/component/button.tsx

@@ -36,7 +36,7 @@ export const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement> & { c
   return (
     <button
       {...props}
-      class={`inline-block px-5 py-2 text-white ${getColorThemeClasses(props.colorTheme)}  ${props.class ?? ''}`}
+      class={`inline-block px-5 py-2 text-white ${getColorThemeClasses(props.colorTheme)} ${props.class ?? ''}`}
     >
       {props.children}
     </button>

src/component/form/form.tsx

@@ -22,7 +22,7 @@ export type TextFieldProps = {
 
 export const TextField: Component<TextFieldProps> = (props: TextFieldProps) => {
   return (
-    <label class="block">
+    <label class={`block ${props.getInvalidParameters().length > 0 ? 'text-red-600' : ''} `}>
       {props.label}
       <input
         data-testid={props['data-testid']}
@@ -41,7 +41,7 @@ export const TextField: Component<TextFieldProps> = (props: TextFieldProps) => {
         value={props.getValue()}
       />
       <Show when={props.getInvalidParameters().length > 0}>
-        <ul class="mb-3 text-red-600">
+        <ul class="mb-3">
           <For each={props.getInvalidParameters()}>{(invalidParameter) => <li>{invalidParameter.reason}</li>}</For>
         </ul>
       </Show>

src/component/heading.tsx

@@ -3,5 +3,9 @@ import type { Component, JSX } from 'solid-js';
 export const H1: Component<JSX.HTMLAttributes<HTMLHeadingElement>> = (
   props: JSX.HTMLAttributes<HTMLHeadingElement>,
 ) => {
-  return <h1 class="mb-4 border-b pb-2 text-4xl font-black">{props.children}</h1>;
+  return (
+    <h1 {...props} class={`mb-4 border-b pb-2 text-4xl font-black ${props.class ?? ''}`}>
+      {props.children}
+    </h1>
+  );
 };

src/component/page/pet/list.tsx

@@ -98,17 +98,15 @@ const PetListComponent: Component = () => {
           {(getPetList) => (
             <div>
               <Show when={getPetList()._links?.create}>
-                <AnchorButton href="/pet/create" colorTheme="green">
+                <AnchorButton href="/pet/create" colorTheme="green" class="mb-4">
                   Create
                 </AnchorButton>
               </Show>
-              <div class="mt-4">
-                <PetFiltersForm
-                  getHttpError={getHttpError}
-                  getInitialPetFilters={() => getQuery().filters}
-                  submitPetFilters={submitPetFilters}
-                />
-              </div>
+              <PetFiltersForm
+                getHttpError={getHttpError}
+                getInitialPetFilters={() => getQuery().filters}
+                submitPetFilters={submitPetFilters}
+              />
               <div class="mt-4">
                 <Table>
                   <Thead>

tests/component/form/pet-filters-form.test.tsx

@@ -93,13 +93,13 @@ test('bad request - with query string name', () => {
     "<div>
       <form>
         <fieldset class="mb-3 border border-gray-300 px-4 py-3">
-          <label class="block"
+          <label class="block text-red-600"
             >Name<input
               type="text"
               data-testid="pet-filters-form-name"
               class="mb-3 mt-2 block w-full border px-3 py-2 border-red-600 bg-red-100"
             />
-            <ul class="mb-3 text-red-600">
+            <ul class="mb-3">
               <li>reason</li>
             </ul></label
           ><button

tests/component/form/pet-form.test.tsx

@@ -161,13 +161,13 @@ test('bad request - with query string name', () => {
     "<div>
       <form>
         <fieldset class="mb-3 border border-gray-300 px-4 py-3">
-          <label class="block"
+          <label class="block text-red-600"
             >Name<input
               type="text"
               data-testid="pet-form-name"
               class="mb-3 mt-2 block w-full border px-3 py-2 border-red-600 bg-red-100"
             />
-            <ul class="mb-3 text-red-600">
+            <ul class="mb-3">
               <li>reason1</li>
             </ul></label
           ><label class="block"
@@ -180,13 +180,13 @@ test('bad request - with query string name', () => {
             <div class="mb-2 block">Vaccinations</div>
             <div>
               <fieldset class="mb-3 border border-gray-300 px-4 py-3">
-                <label class="block"
+                <label class="block text-red-600"
                   >Name<input
                     type="text"
                     data-testid="pet-form-vaccinations-0-name"
                     class="mb-3 mt-2 block w-full border px-3 py-2 border-red-600 bg-red-100"
                   />
-                  <ul class="mb-3 text-red-600">
+                  <ul class="mb-3">
                     <li>reason2</li>
                   </ul></label
                 ><button

tests/component/page/pet/list.test.tsx

@@ -174,17 +174,14 @@ test('default', async () => {
             <a
               colortheme="green"
               href="/pet/create"
-              class="inline-block px-5 py-2 text-white bg-green-600 hover:bg-green-700 inactive"
+              class="inline-block px-5 py-2 text-white bg-green-600 hover:bg-green-700 mb-4 inactive"
               link=""
               >Create</a
-            >
-            <div class="mt-4">
-              <button
-                data-testid="pet-filters-form-submit"
-                data-has-http-error="false"
-                data-has-initial-pet-filters="true"
-              ></button>
-            </div>
+            ><button
+              data-testid="pet-filters-form-submit"
+              data-has-http-error="false"
+              data-has-initial-pet-filters="true"
+            ></button>
             <div class="mt-4">
               <div class="block w-full md:table">
                 <div class="block w-full md:table-header-group">