feat: it-tools v3 base

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

@@ -0,0 +1,8 @@
+{
+  "uppercase": "Uppercase letters (A-Z)",
+  "lowercase": "Lowercase letters (a-z)",
+  "numbers": "Numbers (0-9)",
+  "symbols": "Special characters (!@#...)",
+  "length": "Length",
+  "result-placeholder": "Your token will appear here"
+}

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

@@ -0,0 +1,8 @@
+{
+  "uppercase": "Lettres majuscules (A-Z)",
+  "lowercase": "Lettres minuscules (a-z)",
+  "numbers": "Chiffres (0-9)",
+  "symbols": "Caractères spéciaux (!@#...)",
+  "length": "Longueur",
+  "result-placeholder": "Le token apparaîtra ici"
+}

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

@@ -0,0 +1,28 @@
+import { sample as sampleImpl, times } from 'lodash-es';
+
+export function createToken({
+  withUppercase = true,
+  withLowercase = true,
+  withNumbers = true,
+  withSymbols = false,
+  length = 64,
+  alphabet,
+  sample = sampleImpl,
+}: {
+  withUppercase?: boolean;
+  withLowercase?: boolean;
+  withNumbers?: boolean;
+  withSymbols?: boolean;
+  length?: number;
+  alphabet?: string;
+  sample?: (str: string) => string;
+}) {
+  const allAlphabet = alphabet ?? [
+    withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : '',
+    withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '',
+    withNumbers ? '0123456789' : '',
+    withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
+  ].join('');
+
+  return times(length, () => sample(allAlphabet)).join('');
+}

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

@@ -0,0 +1,71 @@
+import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@/modules/ui/components/switch';
+import { TextArea } from '@/modules/ui/components/textarea';
+import { TextFieldRoot } from '@/modules/ui/components/textfield';
+import { type Component, createSignal } from 'solid-js';
+import { useCurrentTool } from '../../tools.provider';
+import defaultDictionary from './locales/en.json';
+import { createToken } from './token-generator.models';
+
+const TokenGeneratorTool: Component = () => {
+  const [getUseUpperCase, setUseUpperCase] = createSignal(true);
+  const [getUseLowerCase, setUseLowerCase] = createSignal(true);
+  const [getUseNumbers, setUseNumbers] = createSignal(true);
+  const [getUseSpecialCharacters, setUseSpecialCharacters] = createSignal(false);
+  const [getLength] = createSignal(64);
+
+  const { t } = useCurrentTool({ defaultDictionary });
+
+  const getToken = () => createToken({
+    withUppercase: getUseUpperCase(),
+    withLowercase: getUseLowerCase(),
+    withNumbers: getUseNumbers(),
+    withSymbols: getUseSpecialCharacters(),
+    length: getLength(),
+  });
+
+  return (
+    <div class="space-y-2 mx-auto max-w-1200px p-6">
+      <Switch class="flex items-center space-x-2" checked={getUseUpperCase()} onChange={setUseUpperCase}>
+        <SwitchControl>
+          <SwitchThumb />
+        </SwitchControl>
+        <SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
+          {t('uppercase')}
+        </SwitchLabel>
+      </Switch>
+
+      <Switch class="flex items-center space-x-2" checked={getUseLowerCase()} onChange={setUseLowerCase}>
+        <SwitchControl>
+          <SwitchThumb />
+        </SwitchControl>
+        <SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
+          {t('lowercase')}
+        </SwitchLabel>
+      </Switch>
+
+      <Switch class="flex items-center space-x-2" checked={getUseNumbers()} onChange={setUseNumbers}>
+        <SwitchControl>
+          <SwitchThumb />
+        </SwitchControl>
+        <SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
+          {t('numbers')}
+        </SwitchLabel>
+      </Switch>
+
+      <Switch class="flex items-center space-x-2" checked={getUseSpecialCharacters()} onChange={setUseSpecialCharacters}>
+        <SwitchControl>
+          <SwitchThumb />
+        </SwitchControl>
+        <SwitchLabel class="text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70">
+          {t('symbols')}
+        </SwitchLabel>
+      </Switch>
+
+      <TextFieldRoot>
+        <TextArea placeholder="Your token will appear here" value={getToken()} readonly />
+      </TextFieldRoot>
+    </div>
+  );
+};
+
+export default TokenGeneratorTool;

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

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

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

@@ -0,0 +1,35 @@
+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 { CurrentToolProvider } from '../tools.provider';
+import { getToolDefinitionBySlug } from '../tools.registry';
+
+export const ToolPage: Component = () => {
+  const params = useParams();
+  const { getLocale } = useI18n();
+
+  const toolDefinition = getToolDefinitionBySlug({ slug: params.toolSlug });
+  const ToolComponent = lazy(toolDefinition.entryFile);
+
+  const [toolDict] = createResource(getLocale, async (locale) => {
+    const [dict = { default: {} }] = await safely(import(`../definitions/${toolDefinition.dirName}/locales/${locale}.json`));
+
+    return dict;
+  });
+
+  return (
+    <Show when={toolDict()}>
+      {toolLocaleDict => (
+        <CurrentToolProvider toolLocaleDict={toolLocaleDict}>
+          <ToolComponent />
+        </CurrentToolProvider>
+      )}
+    </Show>
+  );
+};

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

@@ -0,0 +1,17 @@
+import type { Component } from 'solid-js';
+
+export { defineTool };
+
+function defineTool(toolDefinition: {
+  slug: string;
+  entryFile: () => Promise<{ default: Component }>;
+  currentDirUrl: 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

@@ -0,0 +1,31 @@
+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 { merge } from 'lodash-es';
+import { createContext, useContext } from 'solid-js';
+
+type ToolProviderContext = {
+  toolLocaleDict: Accessor<Record<string, string>>;
+};
+
+const CurrentToolContext = createContext<ToolProviderContext>();
+
+export function useCurrentTool<T>({ defaultDictionary }: { defaultDictionary: T }) {
+  const context = useContext(CurrentToolContext);
+
+  if (!context) {
+    throw new Error('useCurrentTool must be used within a CurrentToolProvider');
+  }
+
+  return {
+    t: translator(() => flatten(merge({}, defaultDictionary, context.toolLocaleDict()))),
+  };
+}
+
+export const CurrentToolProvider: ParentComponent<ToolProviderContext> = (props) => {
+  return (
+    <CurrentToolContext.Provider value={props}>
+      {props.children}
+    </CurrentToolContext.Provider>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { keyBy, map } from 'lodash-es';
+import { tokenGeneratorTool } from './definitions/token-generator/token-generator.tool';
+
+export const toolDefinitions = [
+  tokenGeneratorTool,
+];
+
+export const toolSlugs = map(toolDefinitions, 'slug');
+export const toolDefinitionBySlug = keyBy(toolDefinitions, 'slug');
+
+export { getToolDefinitionBySlug };
+
+function getToolDefinitionBySlug({ slug }: { slug: string }) {
+  return toolDefinitionBySlug[slug];
+}

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

@@ -0,0 +1,18 @@
+import { useI18n } from '../i18n/i18n.provider';
+import { toolDefinitions } from './tools.registry';
+
+export { useToolsStore };
+
+function useToolsStore() {
+  const { t } = useI18n();
+
+  const tools = 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 };
+}

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

@@ -0,0 +1,3 @@
+import type { Flatten, Translator } from '@solid-primitives/i18n';
+
+export type ToolI18nFactory = <T extends Record<string, string>>(args: { defaultDictionary: T }) => { t: Translator<Flatten<T>> };