Merge branch 'dev' into rec

rharkor · Sep 16, 2024 · b9b690a · b9b690a
2 parents 0208f81 + 014c08f
commit b9b690a
Show file tree

Hide file tree

Showing 20 changed files with 219 additions and 89 deletions.
diff --git a/packages/cli-app/src/api/plugins/queries.ts b/packages/cli-app/src/api/plugins/queries.ts
@@ -17,9 +17,9 @@ export const getPluginsQuery = async ({ input }: apiInputFromSchema<typeof getPl
   }
 }
 
-export const getPluginQuery = async ({ input: { id } }: apiInputFromSchema<typeof getPluginSchema>) => {
+export const getPluginQuery = async ({ input: { name, store } }: apiInputFromSchema<typeof getPluginSchema>) => {
   try {
-    const plugin = await getPlugin(id)
+    const plugin = await getPlugin(name, store)
 
     if (!plugin) {
       throw new Error("Plugin not found")

diff --git a/packages/cli-app/src/api/plugins/schemas.ts b/packages/cli-app/src/api/plugins/schemas.ts
@@ -1,6 +1,7 @@
 import { z } from "zod"
 
 import { fullPluginSchema, singlePluginSchema } from "@/lib/plugins/types"
+import { storeConfigSchema } from "@next-boilerplate/scripts/utils/template-config/index.js"
 
 export const getPluginsSchema = () =>
   z.object({
@@ -14,7 +15,8 @@ export const getPluginsResponseSchema = () =>
 
 export const getPluginSchema = () =>
   z.object({
-    id: z.string(),
+    name: z.string(),
+    store: storeConfigSchema,
   })
 
 export const getPluginResponseSchema = () =>

diff --git a/packages/cli-app/src/api/templates/queries.ts b/packages/cli-app/src/api/templates/queries.ts
@@ -17,9 +17,9 @@ export const getTemplatesQuery = async ({ input }: apiInputFromSchema<typeof get
   }
 }
 
-export const getTemplateQuery = async ({ input: { id } }: apiInputFromSchema<typeof getTemplateSchema>) => {
+export const getTemplateQuery = async ({ input: { name, store } }: apiInputFromSchema<typeof getTemplateSchema>) => {
   try {
-    const template = await getTemplate(id)
+    const template = await getTemplate(name, store)
 
     if (!template) {
       throw new Error("Template not found")

diff --git a/packages/cli-app/src/api/templates/schemas.ts b/packages/cli-app/src/api/templates/schemas.ts
@@ -1,6 +1,7 @@
 import { z } from "zod"
 
 import { fullTemplateSchema, singleTemplateSchema } from "@/lib/templates/types"
+import { storeConfigSchema } from "@next-boilerplate/scripts/utils/template-config/index.js"
 
 export const getTemplatesSchema = () =>
   z.object({
@@ -14,7 +15,8 @@ export const getTemplatesResponseSchema = () =>
 
 export const getTemplateSchema = () =>
   z.object({
-    id: z.string(),
+    name: z.string(),
+    store: storeConfigSchema,
   })
 
 export const getTemplateResponseSchema = () =>

diff --git a/packages/cli-app/src/app/components/current-configuration.tsx b/packages/cli-app/src/app/components/current-configuration.tsx
@@ -167,7 +167,11 @@ export default function CurrentConfiguration({
     await updateConfiguration({
       configuration: {
         plugins: configuration.data.configuration.plugins?.map((p) => {
-          if (p.id === plugin.id) {
+          if (
+            p.name === plugin.name &&
+            p.store.name === plugin.store.name &&
+            p.store.version === plugin.store.version
+          ) {
             return plugin
           }
           return p
@@ -203,7 +207,7 @@ export default function CurrentConfiguration({
         <AnimatePresence>
           {plugins.map((plugin) => (
             <Plugin
-              key={plugin.id}
+              key={plugin.store.name + "@" + plugin.store.version + "/" + plugin.name}
               plugin={plugin}
               dictionary={dictionary}
               isPending={isPending}
@@ -298,12 +302,12 @@ function Plugin({
   return (
     <>
       <ItemCard
-        id={plugin.id}
+        id={plugin.store.name + "@" + plugin.store.version + "/" + plugin.name}
         liRef={liRef}
         title={plugin.name}
         subTitle={plugin.sourcePath}
         description={plugin.description}
-        href={`/plugins/${encodeURIComponent(plugin.id)}`}
+        href={`/plugins/${encodeURIComponent(plugin.store.name + "@" + plugin.store.version + "/" + plugin.name)}`}
         actions={
           <>
             <Button color="primary" variant="flat" className="h-max min-w-0 p-2.5">

diff --git a/packages/cli-app/src/app/plugins/[id]/content.tsx b/packages/cli-app/src/app/plugins/[id]/content.tsx
@@ -17,32 +17,38 @@ import { PluginContentDr } from "./content.dr"
 type TPlugin = RouterOutputs["plugins"]["getPlugin"]
 
 export default function PluginContent({
-  id,
+  pluginFull,
   dictionary,
   ssrPlugin,
   ssrConfiguration,
 }: {
-  id: string
+  pluginFull: {
+    store: {
+      name: string
+      version: string
+    }
+    name: string
+  }
   dictionary: TDictionary<typeof PluginContentDr>
   ssrPlugin: TPlugin
   ssrConfiguration: RouterOutputs["configuration"]["getConfiguration"]
 }) {
   const utils = trpc.useUtils()
 
-  const plugin = trpc.plugins.getPlugin.useQuery(
-    {
-      id,
-    },
-    {
-      initialData: ssrPlugin,
-    }
-  )
+  const plugin = trpc.plugins.getPlugin.useQuery(pluginFull, {
+    initialData: ssrPlugin,
+  })
   const configuration = trpc.configuration.getConfiguration.useQuery(undefined, {
     initialData: ssrConfiguration,
   })
 
   const isInstalled = useMemo(() => {
-    return configuration.data.configuration.plugins?.some((p) => p.id === plugin.data.plugin.id)
+    return configuration.data.configuration.plugins?.some(
+      (p) =>
+        p.name === plugin.data.plugin.name &&
+        p.store.name === plugin.data.plugin.store.name &&
+        p.store.version === plugin.data.plugin.store.version
+    )
   }, [configuration.data, plugin.data])
 
   const [isPluginUpdating, setIsPluginUpdating] = useState(false)
@@ -73,13 +79,24 @@ export default function PluginContent({
       await updateConfigurationMutation.mutateAsync({
         configuration: {
           ...configuration.data.configuration,
-          plugins: configuration.data.configuration.plugins?.filter((plugin) => plugin.id !== plugin.id),
+          plugins: configuration.data.configuration.plugins?.filter(
+            (p) =>
+              p.name !== plugin.data.plugin.name ||
+              p.store.name !== plugin.data.plugin.store.name ||
+              p.store.version !== plugin.data.plugin.store.version
+          ),
         },
       })
     } finally {
       setIsPluginUpdating(false)
     }
-  }, [configuration.data.configuration, updateConfigurationMutation])
+  }, [
+    configuration.data.configuration,
+    plugin.data.plugin.name,
+    plugin.data.plugin.store.name,
+    plugin.data.plugin.store.version,
+    updateConfigurationMutation,
+  ])
 
   const togglePlugin = useCallback(async () => {
     if (isInstalled) {

diff --git a/packages/cli-app/src/app/plugins/[id]/page.tsx b/packages/cli-app/src/app/plugins/[id]/page.tsx
@@ -2,10 +2,30 @@ import { getDictionary } from "@/lib/langs"
 import { trpc } from "@/lib/trpc/server"
 import { dictionaryRequirements } from "@/lib/utils/dictionary"
 import { extractLocale } from "@/lib/utils/server-utils"
+import { matchItemFull } from "@next-boilerplate/scripts/utils/template-config/index.js"
 
 import PluginContent from "./content"
 import { PluginContentDr } from "./content.dr"
 
+// plugin.store.name + "@" + plugin.store.version + "/" + plugin.name
+// Ex:
+// - @next-boilerplate/cli-app@latest/turbo/default
+// - [email protected]/my-plugin
+const extractPluginFull = (pluginId: string) => {
+  const match = pluginId.match(matchItemFull)
+  if (!match) {
+    throw new Error(`Invalid plugin ID: ${pluginId}`)
+  }
+
+  return {
+    store: {
+      name: match[1],
+      version: match[2],
+    },
+    name: match[3],
+  }
+}
+
 export default async function Plugin({
   params,
 }: {
@@ -17,10 +37,17 @@ export default async function Plugin({
   const dictionary = await getDictionary(locale, dictionaryRequirements({}, PluginContentDr))
 
   const pluginId = decodeURIComponent(params.id)
-  const ssrPlugin = await trpc.plugins.getPlugin({ id: pluginId })
+  const pluginFull = extractPluginFull(pluginId)
+
+  const ssrPlugin = await trpc.plugins.getPlugin(pluginFull)
   const ssrConfiguration = await trpc.configuration.getConfiguration()
 
   return (
-    <PluginContent id={pluginId} dictionary={dictionary} ssrPlugin={ssrPlugin} ssrConfiguration={ssrConfiguration} />
+    <PluginContent
+      pluginFull={pluginFull}
+      dictionary={dictionary}
+      ssrPlugin={ssrPlugin}
+      ssrConfiguration={ssrConfiguration}
+    />
   )
 }
diff --git a/packages/cli-app/src/app/plugins/content.tsx b/packages/cli-app/src/app/plugins/content.tsx
@@ -56,14 +56,28 @@ export default function PluginsContent({
           ? [...Array(5)].map((_, i) => (
               <Plugin
                 key={i}
-                plugin={{ id: "", name: "", store: "", description: "", sourcePath: "", paths: [] }}
+                plugin={{
+                  name: "",
+                  store: {
+                    name: "",
+                    version: "",
+                  },
+                  description: "",
+                  sourcePath: "",
+                  paths: [],
+                }}
                 dictionary={dictionary}
                 ssrConfiguration={ssrConfiguration}
                 isLoading
               />
             ))
           : plugins.data?.plugins.map((plugin) => (
-              <Plugin key={plugin.id} plugin={plugin} dictionary={dictionary} ssrConfiguration={ssrConfiguration} />
+              <Plugin
+                key={plugin.store.name + "@" + plugin.store.version + "/" + plugin.name}
+                plugin={plugin}
+                dictionary={dictionary}
+                ssrConfiguration={ssrConfiguration}
+              />
             ))}
       </ul>
     </>

diff --git a/packages/cli-app/src/app/plugins/plugin.tsx b/packages/cli-app/src/app/plugins/plugin.tsx
@@ -35,8 +35,13 @@ export default function Plugin({
   })
 
   const isPluginInConfiguration = useMemo(() => {
-    return configuration.data.configuration.plugins?.some((_plugin) => _plugin.id === plugin.id)
-  }, [configuration.data.configuration.plugins, plugin.id])
+    return configuration.data.configuration.plugins?.some(
+      (_plugin) =>
+        _plugin.name === plugin.name &&
+        _plugin.store.name === plugin.store.name &&
+        _plugin.store.version === plugin.store.version
+    )
+  }, [configuration.data.configuration.plugins, plugin])
 
   const updateConfigurationMutation = trpc.configuration.updateConfiguration.useMutation({
     onSuccess: async () => {
@@ -57,10 +62,15 @@ export default function Plugin({
     await updateConfigurationMutation.mutateAsync({
       configuration: {
         ...configuration.data.configuration,
-        plugins: configuration.data.configuration.plugins?.filter((_plugin) => _plugin.id !== plugin.id),
+        plugins: configuration.data.configuration.plugins?.filter(
+          (_plugin) =>
+            _plugin.name !== plugin.name &&
+            _plugin.store.name !== plugin.store.name &&
+            _plugin.store.version !== plugin.store.version
+        ),
       },
     })
-  }, [configuration.data.configuration, plugin.id, updateConfigurationMutation])
+  }, [configuration.data.configuration, plugin, updateConfigurationMutation])
 
   const togglePlugin = useCallback(async () => {
     if (isPluginInConfiguration) {
@@ -72,8 +82,8 @@ export default function Plugin({
 
   return (
     <ItemCard
-      key={plugin.id}
-      id={plugin.id}
+      key={plugin.store.name + "@" + plugin.store.version + "/" + plugin.name}
+      id={plugin.store.name + "@" + plugin.store.version + "/" + plugin.name}
       title={plugin.name}
       subTitle={plugin.sourcePath}
       description={plugin.description}
@@ -120,7 +130,7 @@ export default function Plugin({
           </>
         )
       }
-      href={`/plugins/${encodeURIComponent(plugin.id)}`}
+      href={`/plugins/${encodeURIComponent(plugin.store.name + "@" + plugin.store.version + "/" + plugin.name)}`}
       className="pr-12"
     />
   )

diff --git a/packages/cli-app/src/app/templates/[id]/content.tsx b/packages/cli-app/src/app/templates/[id]/content.tsx
@@ -19,26 +19,27 @@ import { TemplateContentDr } from "./content.dr"
 type TTemplate = RouterOutputs["templates"]["getTemplate"]
 
 export default function TemplateContent({
-  id,
+  templateFull,
   dictionary,
   ssrTemplate,
   ssrConfiguration,
 }: {
-  id: string
+  templateFull: {
+    store: {
+      name: string
+      version: string
+    }
+    name: string
+  }
   dictionary: TDictionary<typeof TemplateContentDr>
   ssrTemplate: TTemplate
   ssrConfiguration: RouterOutputs["configuration"]["getConfiguration"]
 }) {
   const utils = trpc.useUtils()
 
-  const template = trpc.templates.getTemplate.useQuery(
-    {
-      id,
-    },
-    {
-      initialData: ssrTemplate,
-    }
-  )
+  const template = trpc.templates.getTemplate.useQuery(templateFull, {
+    initialData: ssrTemplate,
+  })
   const configuration = trpc.configuration.getConfiguration.useQuery(undefined, {
     initialData: ssrConfiguration,
   })
@@ -94,7 +95,12 @@ export default function TemplateContent({
         </div>
         <ul className="flex flex-1 flex-col gap-2">
           {plugins.map((plugin) => (
-            <Plugin key={plugin.id} plugin={plugin} dictionary={dictionary} ssrConfiguration={ssrConfiguration} />
+            <Plugin
+              key={plugin.store.name + "@" + plugin.store.version + "/" + plugin.name}
+              plugin={plugin}
+              dictionary={dictionary}
+              ssrConfiguration={ssrConfiguration}
+            />
           ))}
         </ul>
       </div>