Mickey makes more js (#144)

* fix: use icon gts instead svg file + adapt test + use dropdown popover for action menu and design table

* feat: new theme selector ember ui + convert more svg

* fix: test lint lefthook

* fix: test lint lefthook

* fix: test lint lefthook again

* fix: handle also french trad

* refactor: update chevron icons to use attributes and replace inline SVG in navbar with ChevronDownIcon

Author: remadex

doc-app/app/assets/icons/delete.gts

@@ -0,0 +1,20 @@
+import type { TOC } from '@ember/component/template-only';
+
+const DeleteIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+    />
+  </svg>
+</template>;
+
+export default DeleteIcon;

doc-app/app/assets/icons/edit.gts

@@ -0,0 +1,20 @@
+import type { TOC } from '@ember/component/template-only';
+
+const EditIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+    />
+  </svg>
+</template>;
+
+export default EditIcon;

doc-app/app/assets/icons/getting-started.gts

@@ -0,0 +1,19 @@
+import type { TOC } from '@ember/component/template-only';
+
+const GettingStartedIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
+    />
+  </svg>
+</template>;
+export default GettingStartedIcon;

doc-app/app/assets/icons/installation.gts

@@ -0,0 +1,19 @@
+import type { TOC } from '@ember/component/template-only';
+
+const InstallationIcon: TOC<{ Element: SVGSVGElement }> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+</template>;
+export default InstallationIcon;

doc-app/app/components/docs/ember-ui/prefabs/table-generic.gts

@@ -8,6 +8,8 @@ import type { TOC } from '@ember/component/template-only';
 import type { TpkSelectSignature } from '@triptyk/ember-input/components/tpk-select';
 import { hash } from '@ember/helper';
 import stringify from 'doc-app/helpers/to-string';
+import EditIcon from 'doc-app/assets/icons/edit.gts';
+import DeleteIcon from 'doc-app/assets/icons/delete.gts';
 
 const TpkSelectElement: TOC<
   TpkSelectSignature & {
@@ -36,6 +38,9 @@ export default class TpkTableGenericPrefabExample extends Component {
     entity: 'user',
     pageSizes: [10, 30, 50, 75],
     defaultSortColumn: 'firstName',
+    rowClick: (element: unknown) => {
+      console.log('Row clicked:', element);
+    },
     columns: [
       {
         field: 'lastName',
@@ -56,14 +61,18 @@ export default class TpkTableGenericPrefabExample extends Component {
     ],
     actionMenu: [
       {
-        icon: 'edit',
+        icon: <template><EditIcon class="size-4" /></template> as TOC<{
+          Element: SVGSVGElement;
+        }>,
         action: (element: unknown) => {
           console.log('Edit clicked', element);
         },
         name: 'Edit',
       },
       {
-        icon: 'delete',
+        icon: <template><DeleteIcon class="size-4" /></template> as TOC<{
+          Element: SVGSVGElement;
+        }>,
         action: (element: unknown) => {
           console.log('Delete clicked', element);
         },

doc-app/app/routes/application.ts

@@ -2,6 +2,7 @@
 import Route from '@ember/routing/route';
 import { type Registry as Services, service } from '@ember/service';
 import translationsForEnUs from 'virtual:ember-intl/translations/en-us';
+import translationsForFrFr from 'virtual:ember-intl/translations/fr-fr';
 
 export default class ApplicationRoute extends Route {
   @service declare intl: Services['intl'];
@@ -12,6 +13,7 @@ export default class ApplicationRoute extends Route {
 
   private setupIntl(): void {
     this.intl.addTranslations('en-us', translationsForEnUs);
+    this.intl.addTranslations('fr-fr', translationsForFrFr);
     this.intl.setLocale(['en-us']);
   }
 }

doc-app/app/templates/dashboard.gts

@@ -4,10 +4,12 @@ import TpkDashBoard, {
   type SidebarItem,
 } from '@triptyk/ember-ui/components/prefabs/tpk-dashboard';
 import type { TOC } from '@ember/component/template-only';
-import ThemeSelector from 'doc-app/components/theme-selector';
+import TpkThemeSelector from '@triptyk/ember-ui/components/prefabs/tpk-theme-selector';
 import { service } from '@ember/service';
 import type { IntlService } from 'ember-intl';
 import { action } from '@ember/object';
+import GettingStartedIcon from 'doc-app/assets/icons/getting-started.gts';
+import InstallationIcon from 'doc-app/assets/icons/installation.gts';
 
 export default class DashboardTemplate extends Component {
   @service declare intl: IntlService;
@@ -27,43 +29,17 @@ export default class DashboardTemplate extends Component {
       type: 'link',
       label: 'Getting Started',
       route: 'dashboard.docs.ember-input-validation.prefabs.input',
-      icon: <template>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="size-4"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
-          />
-        </svg>
-      </template> as TOC<{ Element: SVGSVGElement }>,
+      icon: <template><GettingStartedIcon class="size-4" /></template> as TOC<{
+        Element: SVGSVGElement;
+      }>,
     },
     {
       type: 'link',
       label: 'Installation',
       route: 'dashboard.docs.ember-input-validation.prefabs.input',
-      icon: <template>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="size-4"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-          />
-        </svg>
-      </template> as TOC<{ Element: SVGSVGElement }>,
+      icon: <template><InstallationIcon class="size-4" /></template> as TOC<{
+        Element: SVGSVGElement;
+      }>,
     },
     {
       type: 'group',
@@ -314,7 +290,7 @@ export default class DashboardTemplate extends Component {
                 </svg>
               </a>
             </div>
-            <ThemeSelector />
+            <TpkThemeSelector @localStorageKey="doc-app-theme" />
           </div>
         </:footer>
         <:content>

doc-app/app/templates/dashboard/docs/ember-ui/prefabs/table-generic.gts

@@ -46,12 +46,12 @@ export default class TpkTableGenericPrefabDocs extends Component<TpkTableGeneric
       )
       actionMenu=(array
         (hash
-          icon="edit"
+          icon=(component EditIcon)
           action=this.onEdit
           name="Edit"
         )
         (hash
-          icon="delete"
+          icon=(component DeleteIcon)
           action=this.onDelete
           name="Delete"
         )

doc-app/app/templates/home.gts

@@ -7,7 +7,7 @@ import TpkDashBoard, {
   type Language,
 } from '@triptyk/ember-ui/components/prefabs/tpk-dashboard';
 import type { TOC } from '@ember/component/template-only';
-import ThemeSelector from 'doc-app/components/theme-selector';
+import TpkThemeSelector from '@triptyk/ember-ui/components/prefabs/tpk-theme-selector';
 import { hash } from '@ember/helper';
 import type { IntlService } from 'ember-intl';
 
@@ -165,7 +165,10 @@ export default class DashboardTemplate extends Component {
         </:content>
         <:footer>
           <div class="flex items-center justify-center w-full p-2 px-4">
-            <ThemeSelector @sidebarCollapsed={{this.sidebarCollapsed}} />
+            <TpkThemeSelector
+              @sidebarCollapsed={{this.sidebarCollapsed}}
+              @localStorageKey="doc-app-theme"
+            />
           </div>
         </:footer>
         <:menu>

doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-password-test.gts

@@ -57,12 +57,7 @@ module(
       await renderComponent({
         disabled: false,
       });
-      assert
-        .dom('[data-test-tpk-password-toggle-button]')
-        .hasClass('tpk-password-toggle-button');
-      assert
-        .dom('[data-test-tpk-password-toggle-icon]')
-        .hasAttribute('src', /data:image\/svg\+xml/);
+      assert.dom('[data-test-tpk-password-toggle-icon-eye-shut]').exists();
     });
 
     test('Input type should be password', async function (assert) {
@@ -86,10 +81,10 @@ module(
         disabled: false,
       });
       await click('[data-test-tpk-password-toggle-button]');
-
+      assert.dom('[data-test-tpk-password-toggle-icon-eye]').exists();
       assert
-        .dom('[data-test-tpk-password-toggle-button] img')
-        .hasAttribute('src', /data:image\/svg\+xml/);
+        .dom('[data-test-tpk-password-toggle-icon-eye-shut]')
+        .doesNotExist();
     });
 
     test('When button is clicked twice, input type should be password', async function (assert) {