chore(cd): added deploy on cloudflare pages

packages/app/src/modules/tools/definitions/random-port-generator/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "name": "Random Port Generator",
+  "description": "Generate a random port number outside of the reserved ports range (0-1023).",
+  "refresh": "Refresh port",
+  "copy-toast": "Port copied to clipboard"
+}

packages/app/src/modules/tools/definitions/random-port-generator/random-port-generator.page.tsx

@@ -0,0 +1,31 @@
+import type { Component } from 'solid-js';
+import { CopyButton } from '@/modules/shared/copy/copy-button';
+import { createRefreshableSignal } from '@/modules/shared/signals';
+import { Button } from '@/modules/ui/components/button';
+import { useCurrentTool } from '../../tools.provider';
+import defaultDictionary from './locales/en.json';
+import { generateRandomPort } from './random-port-generator.services';
+
+const RandomPortGenerator: Component = () => {
+  const [getPort, refreshPort] = createRefreshableSignal(generateRandomPort);
+  const { t } = useCurrentTool({ defaultDictionary });
+
+  return (
+    <div class="mx-auto max-w-1200px p-6">
+      <div>
+        {getPort()}
+      </div>
+
+      <div class="flex gap-4 mt-4">
+        <Button onClick={refreshPort} variant="outline">
+          <div class="i-tabler-refresh mr-2 text-base text-muted-foreground" />
+          {t('refresh')}
+        </Button>
+
+        <CopyButton textToCopy={getPort} toastMessage={t('copy-toast')} />
+      </div>
+    </div>
+  );
+};
+
+export default RandomPortGenerator;

packages/app/src/modules/tools/definitions/random-port-generator/random-port-generator.services.ts

@@ -0,0 +1,5 @@
+import { random } from 'lodash-es';
+
+export function generateRandomPort() {
+  return random(1024, 65535);
+}

packages/app/src/modules/tools/definitions/random-port-generator/random-port-generator.tool.ts

@@ -0,0 +1,9 @@
+import { defineTool } from '../../tools.models';
+
+export const randomPortGeneratorTool = defineTool({
+  slug: 'random-port-generator',
+  entryFile: () => import('./random-port-generator.page'),
+  icon: 'i-tabler-server',
+  createdAt: new Date('2024-10-03'),
+  dirName: 'random-port-generator',
+});

packages/app/src/modules/tools/definitions/token-generator/locales/en.json

@@ -1,4 +1,6 @@
 {
+  "name": "Token Generator",
+  "description": "Generate random string with the characters you want, uppercase, lowercase letters, numbers and/or symbols.",
   "uppercase": "Uppercase letters (A-Z)",
   "lowercase": "Lowercase letters (a-z)",
   "numbers": "Numbers (0-9)",

packages/app/src/modules/tools/definitions/token-generator/locales/fr.json

@@ -1,4 +1,6 @@
 {
+  "name": "Générateur de token",
+  "description": "Génère une chaîne de caractères aléatoire, contrôlez les caractères que vous voulez, lettres majuscules, minuscules, chiffres et/ou symboles.",
   "uppercase": "Lettres majuscules (A-Z)",
   "lowercase": "Lettres minuscules (a-z)",
   "numbers": "Chiffres (0-9)",

packages/app/src/modules/tools/definitions/token-generator/token-generator.tool.ts

@@ -5,5 +5,5 @@ export const tokenGeneratorTool = defineTool({
   entryFile: () => import('./token-generator.page'),
   icon: 'i-tabler-key',
   createdAt: new Date('2024-02-13'),
-  currentDirUrl: import.meta.url,
+  dirName: 'token-generator',
 });

packages/app/src/modules/tools/pages/tool.page.tsx

@@ -1,12 +1,7 @@
-import type { LocaleKey } from '@/modules/i18n/i18n.types';
-import type { Flatten } from '@solid-primitives/i18n';
-import type { ToolI18nFactory } from '../tools.types';
 import { useI18n } from '@/modules/i18n/i18n.provider';
 import { safely } from '@corentinth/chisels';
-import { flatten, translator } from '@solid-primitives/i18n';
 import { useParams } from '@solidjs/router';
-import { merge } from 'lodash-es';
-import { type Component, createContext, createResource, lazy, Show } from 'solid-js';
+import { type Component, createResource, lazy, Show } from 'solid-js';
 import { CurrentToolProvider } from '../tools.provider';
 import { getToolDefinitionBySlug } from '../tools.registry';
 
@@ -18,9 +13,13 @@ export const ToolPage: Component = () => {
   const ToolComponent = lazy(toolDefinition.entryFile);
 
   const [toolDict] = createResource(getLocale, async (locale) => {
-    const [dict = { default: {} }] = await safely(import(`../definitions/${toolDefinition.dirName}/locales/${locale}.json`));
+    const [dict, error] = await safely(import(`../definitions/${toolDefinition.dirName}/locales/${locale}.json`));
 
-    return dict;
+    if (error) {
+      console.error(error);
+    }
+
+    return dict ?? { default: {} };
   });
 
   return (

packages/app/src/modules/tools/tools.models.ts

@@ -5,13 +5,12 @@ export { defineTool };
 function defineTool(toolDefinition: {
   slug: string;
   entryFile: () => Promise<{ default: Component }>;
-  currentDirUrl: string;
+  dirName: string;
   icon: string;
   createdAt: Date;
 }) {
   return {
     ...toolDefinition,
     key: toolDefinition.slug,
-    dirName: toolDefinition.currentDirUrl.split('/').slice(-2)[0],
   };
 }

packages/app/src/modules/tools/tools.provider.tsx

@@ -1,6 +1,5 @@
 import type { Accessor, ParentComponent } from 'solid-js';
-import type { ToolI18nFactory } from './tools.types';
-import { flatten, type Flatten, translator, type Translator } from '@solid-primitives/i18n';
+import { flatten, translator } from '@solid-primitives/i18n';
 import { merge } from 'lodash-es';
 import { createContext, useContext } from 'solid-js';
 

packages/app/src/modules/tools/tools.registry.ts

@@ -1,8 +1,10 @@
 import { keyBy, map } from 'lodash-es';
+import { randomPortGeneratorTool } from './definitions/random-port-generator/random-port-generator.tool';
 import { tokenGeneratorTool } from './definitions/token-generator/token-generator.tool';
 
 export const toolDefinitions = [
   tokenGeneratorTool,
+  randomPortGeneratorTool,
 ];
 
 export const toolSlugs = map(toolDefinitions, 'slug');

packages/app/src/modules/tools/tools.store.ts

@@ -1,3 +1,4 @@
+import { createMemo } from 'solid-js';
 import { useI18n } from '../i18n/i18n.provider';
 import { toolDefinitions } from './tools.registry';
 
@@ -6,13 +7,13 @@ export { useToolsStore };
 function useToolsStore() {
   const { t } = useI18n();
 
-  const tools = toolDefinitions.map((tool) => {
+  const getTools = createMemo(() => toolDefinitions.map((tool) => {
     return {
       ...tool,
       name: t(`tools.${tool.slug}.name` as any) ?? tool.slug,
       description: t(`tools.${tool.slug}.description` as any) ?? tool.slug,
     };
-  });
+  }));
 
-  return { tools };
+  return { getTools };
 }