@popina/cli 5.0.0-20260203082304Z → 5.0.0

package/turbo/generators/plopGenerator/icon.ts

@@ -0,0 +1,201 @@
+import fs from 'fs'
+import path from 'path'
+import type { PlopTypes } from '@turbo/gen'
+
+export const generatorIcon = (plop: PlopTypes.NodePlopAPI) => {
+  plop.setGenerator('icon', {
+    description: 'Create a new icon in @pragma/ui',
+    prompts: [
+      // Prompt the user to choose how to create the icon
+      {
+        type: 'list',
+        name: 'iconSource',
+        message: 'How do you want to create the icon?',
+        choices: [
+          '🔸 Import Lucide React from "https://lucide.dev/icons/"',
+          '🔹 Create Custom SVG',
+        ],
+      },
+      // Prompt to enter the name of the Lucide icon to import (if chosen)
+      {
+        type: 'input',
+        name: 'importedIconName',
+        message: 'Enter the name of the Lucide icon you want to import:',
+        when: (answers) =>
+          answers.iconSource ===
+          '🔸 Import Lucide React from "https://lucide.dev/icons/"',
+        validate: (input) => {
+          if (!input) {
+            return 'Icon name is required.'
+          }
+
+          // Trim and convert the icon name to PascalCase
+          const importedIconName = input.trim()
+          const pascalCaseImportedIconName =
+            importedIconName[0].toUpperCase() + importedIconName.slice(1)
+          const importedIconFileName = `${importedIconName}.js`
+
+          // Build file paths
+          const importedIconFilePath = path.join(
+            plop.getDestBasePath(),
+            '/node_modules/lucide-react/dist/esm/icons/' + importedIconFileName,
+          )
+          const iconIndexFilePath = path.join(
+            plop.getDestBasePath(),
+            'packages/ui/src/icons/index.tsx',
+          )
+
+          // Check if the Lucide icon file exists
+          if (!fs.existsSync(importedIconFilePath)) {
+            return `The icon ${importedIconName} is not found in the Lucide React list. Please choose a different name or verify the icon exists. Refer to the website: 👉 https://lucide.dev/icons/ 👈`
+          }
+
+          // Check if the Lucide icon name already exists in the index.tsx file
+          if (fs.existsSync(iconIndexFilePath)) {
+            const iconIndexContent = fs.readFileSync(iconIndexFilePath, 'utf-8')
+            const iconIndexPattern = new RegExp(
+              `\\b${pascalCaseImportedIconName}\\b`,
+            )
+
+            if (iconIndexPattern.test(iconIndexContent)) {
+              return `The icon name "${pascalCaseImportedIconName}" already exists in the index.tsx file. Please choose a different name.`
+            }
+          }
+
+          return true
+        },
+      },
+      // Prompt to enter the name of the custom SVG icon (if chosen)
+      {
+        type: 'input',
+        name: 'customIconName',
+        message: 'What is the name of the icon you want to create?',
+        when: (answers) => answers.iconSource === '🔹 Create Custom SVG',
+        validate: (input) => {
+          if (!input) {
+            return 'Icon name is required.'
+          }
+
+          // Trim and convert the icon name to PascalCase
+          const pascalCaseCustomIconName = plop.getHelper('pascalCase')(input)
+
+          // Build the file path for the custom SVG icon
+          const customIconFilePath = path.join(
+            plop.getDestBasePath(),
+            'packages/ui/src/icons/index.tsx',
+          )
+
+          // Check if the custom SVG icon file already exists
+          if (fs.existsSync(customIconFilePath)) {
+            const iconIndexContent = fs.readFileSync(
+              customIconFilePath,
+              'utf-8',
+            )
+            const iconIndexPattern = new RegExp(
+              `\\b${pascalCaseCustomIconName}\\b`,
+            )
+
+            if (iconIndexPattern.test(iconIndexContent)) {
+              return `The icon name "${pascalCaseCustomIconName}" already exists in the index.tsx file. Please choose a different name.`
+            }
+          }
+
+          return true
+        },
+      },
+    ],
+    actions: function (answers) {
+      const actions: PlopTypes.Actions = []
+
+      if (answers && answers.iconSource === '🔹 Create Custom SVG') {
+        const iconName = plop.getHelper('pascalCase')(answers.customIconName)
+        const camelCaseCustomName = plop.getHelper('camelCase')(iconName)
+        const customIconFileName = `${iconName}.tsx`
+        const importStatement = `import { ${iconName} } from './${iconName}'`
+        const customIconFilePath = path.join(
+          plop.getDestBasePath(),
+          'packages/ui/src/icons/' + customIconFileName,
+        )
+
+        // Add actions for '🔹 Create Custom SVG'
+        actions.push(
+          {
+            type: 'add',
+            path: customIconFilePath,
+            templateFile: 'templates/icon/icon-react.hbs',
+          },
+          {
+            type: 'modify',
+            path: '{{ turbo.paths.root }}/packages/ui/src/icons/index.tsx',
+            pattern: /(?=(import \{))(.+)(?=(\export type Icon = LucideIcon))/s,
+            template: `$2${importStatement}\n\n`,
+          },
+          {
+            type: 'modify',
+            path: '{{ turbo.paths.root }}/packages/ui/src/icons/index.tsx',
+            pattern: /(?<=(const \Icons \= \{))/s,
+            template: `\n  ${camelCaseCustomName}: ${iconName},`,
+          },
+        )
+      }
+
+      if (
+        answers &&
+        answers.iconSource ===
+          '🔸 Import Lucide React from "https://lucide.dev/icons/"'
+      ) {
+        const importedIconName = answers.importedIconName
+
+        let pascalCaseImportedIconName: string
+
+        if (importedIconName.includes('-')) {
+          const splittedAnswer: string[] = answers.importedIconName.split('-') // ['air', 'vent']
+
+          pascalCaseImportedIconName = splittedAnswer.reduce<string>(
+            (acc, word) => {
+              return acc + word[0].toUpperCase() + word.slice(1)
+            },
+            '',
+          )
+          console.log(pascalCaseImportedIconName)
+        } else {
+          pascalCaseImportedIconName =
+            importedIconName[0].toUpperCase() + importedIconName.slice(1)
+        }
+
+        const importedIconFileName = `${importedIconName}.js`
+        const importedIconFilePath = path.join(
+          plop.getDestBasePath(),
+          '/node_modules/lucide-react/dist/esm/icons/' + importedIconFileName,
+        )
+
+        if (fs.existsSync(importedIconFilePath)) {
+          const importKey = `${pascalCaseImportedIconName[0].toLowerCase()}${pascalCaseImportedIconName.slice(
+            1,
+          )}`
+          // Add actions for '🔸 Import Lucide React since "https://lucide.dev/icons/"'
+          actions.push(
+            {
+              type: 'modify',
+              path: '{{ turbo.paths.root }}/packages/ui/src/icons/index.tsx',
+              pattern: /(?=(import \{))(.*?)(?=(\} from 'lucide-react'))/s,
+              template: `$2  ${pascalCaseImportedIconName},\n`,
+            },
+            {
+              type: 'modify',
+              path: '{{ turbo.paths.root }}/packages/ui/src/icons/index.tsx',
+              pattern: /(?<=(const \Icons \= \{))/s,
+              template: `\n  ${importKey}: ${pascalCaseImportedIconName},`,
+            },
+          )
+        } else {
+          console.error(
+            `The file "${importedIconFileName}" doesn't exist in the specified path.`,
+          )
+        }
+      }
+
+      return actions
+    },
+  })
+}

package/turbo/generators/templates/api/api-controller.hbs

@@ -0,0 +1,46 @@
+import { RouteHandler } from 'fastify'
+
+import type { 
+{{#each endpointActions}}
+  {{this.typeName}},
+{{/each}}
+} from './{{ getEntityFromPath modulePath}}.schema'
+
+import {
+  {{#each endpointActions}}
+  {{this.actionName}},
+  {{/each}}
+} from './{{ getEntityFromPath modulePath}}.service'
+
+import {
+    {{!-- Counting on prettier to format your code correctly and remove this if empty 🫠 --}}
+    {{#each endpointActions}}
+    {{#if this.isAParamRoute}}
+    {{ pascalCase this.entityName }}IdType,
+    {{/if}}
+    {{/each}} 
+} from '@pragma/common/server'
+
+{{#each endpointActions}}
+export const {{this.actionName}}Handler: RouteHandler<{
+  Reply: {{this.typeName}}
+{{#if this.isAParamRoute}}
+  Params: {{ pascalCase this.entityName }}IdType
+}> = (req, reply) => {
+  const {{this.entity}}Id = req.params.id
+  const { id, createdAt, updatedAt } = {{this.actionName}}({{this.entity}}Id)
+
+  reply.code({{this.responseCode}}).send({
+    id: id,
+    createdAt: createdAt,
+    updatedAt: updatedAt,
+  })
+{{else}}
+}> = (_, reply) => {
+  const payload = {{this.actionName}}()
+
+  reply.code({{this.responseCode}}).send(payload)
+{{/if}}
+}
+
+{{/each}}

package/turbo/generators/templates/api/api-param-schema.hbs

@@ -0,0 +1,22 @@
+import { buildJsonSchemas } from '@pragma/common/server'
+import { z } from 'zod'
+
+{{#each endpointActions}}
+{{#if this.isAParamRoute}}
+const {{this.entityName}}IdSchema = z.object({
+  id: z.string({ description: '{{ pascalCase this.entityName }} id path parameter' }).uuid(),
+})
+
+export type {{ pascalCase this.entityName }}IdType = z.infer<typeof {{this.entityName}}IdSchema>
+
+export const { schemas: {{this.entityName}}IdParamSchema, $ref: {{this.entityName}}ParamRef } =
+  buildJsonSchemas(
+    {
+      {{this.entityName}}IdSchema,
+    },
+    { $id: '{{this.entityName}}_id' },
+  )
+
+export const with{{ pascalCase this.entityName }}Param = {{this.entityName}}ParamRef('{{this.entityName}}IdSchema')
+{{/if}}
+{{/each}}

package/turbo/generators/templates/api/api-router.hbs

@@ -0,0 +1,28 @@
+import { FastifyPluginAsync } from 'fastify'
+
+import {
+{{#each endpointActions}}
+  {{this.actionName}}Handler,
+{{/each}}
+} from './{{ getEntityFromPath modulePath }}.controller'
+
+import {
+{{#each endpointActions}}
+  {{this.fastifySchemaName}},
+{{/each}}
+} from './{{ getEntityFromPath modulePath}}.schema'
+
+const {{ getEntityFromPath modulePath }}: FastifyPluginAsync = async (fastify): Promise<void> => {
+{{#each endpointActions}}
+  fastify.{{this.verb}}(
+    '{{this.route}}',
+    {
+      schema: {{this.fastifySchemaName}},
+      config: { authorize: 'SUPER_ADMIN_ONLY' },
+    },
+    {{this.actionName}}Handler,
+  )
+{{/each}}
+}
+
+export default {{ getEntityFromPath modulePath }}

package/turbo/generators/templates/api/api-schema.hbs

@@ -0,0 +1,90 @@
+import { FastifySchema } from 'fastify'
+import { buildJsonSchemas } from '@pragma/common/server'
+import z from 'zod'
+
+import {
+    {{!-- Counting on prettier to format your code correctly and remove this if empty 🫠 --}}
+    {{#each endpointActions}}
+    {{#if this.isAParamRoute}}
+    with{{pascalCase this.entityName}}Param,
+    {{/if}}
+    {{/each}} 
+} from '@pragma/common/server'
+
+
+// import { bindExamples } from '@pragma/common/shared'
+
+const {{ upperCase ( getEntityFromPath modulePath ) }}_TAG = { tags: ['{{ pascalCase ( getEntityFromPath modulePath ) }}'] }
+
+/**
+ * Zod elementary models definitions.
+ */
+{{#each endpointActions}}
+const {{this.zodElementarySchemaDefinition}} = {
+  id: z.string({ description: '{{ pascalCase this.entityName  }} ID' }).uuid(),
+  createdAt: z.date({ description: '{{ pascalCase this.entityName  }} creation date in the DB' }),
+  updatedAt: z.date({ description: '{{ pascalCase this.entityName  }} last update date in the DB' }),
+}
+
+{{/each}}
+/**
+ * Zod schema definitions.
+ */
+{{#each endpointActions}}
+export const {{ this.zodSchemaDefinitionName }} = {{#unless this.isAParamRoute}}z.array({{/unless}}z.object({{ this.zodElementarySchemaDefinition }}, {
+  description: '{{ pascalCase this.entityName }}',
+}){{#unless this.isAParamRoute}}){{/unless}}
+
+{{/each}}
+/**
+ * Generate types from zod schemas.
+ */
+{{#each endpointActions}}
+export type {{this.typeName}} = z.infer<typeof {{this.zodSchemaDefinitionName}}>
+{{/each}}
+
+/**
+ * Examples of schemas from types definitions.
+ */
+// const schemaExamples = {
+{{#each endpointActions}}
+//   {{this.actionName}}SchemaExample,
+{{/each}}
+// }
+
+/**
+ * Generate JSON schemas from zod schemas.
+ */
+export const { schemas: {{ getEntityFromPath modulePath }}Schemas, $ref: {{ getEntityFromPath modulePath }}Ref } = buildJsonSchemas(
+  {
+  {{#each endpointActions}}
+    {{this.zodSchemaDefinitionName}},
+  {{/each}}
+  },
+  { $id: '{{ getEntityFromPath modulePath }}Schemas' },
+)
+
+/**
+ * Bind examples to JSON schemas.
+ */
+// bindExamples({{ getEntityFromPath modulePath }}Schemas, schemaExamples)
+
+/**
+ *  Export Fastify schemas.
+ */
+{{#each endpointActions}}
+export const {{this.fastifySchemaName}}: FastifySchema = {
+  ...{{ upperCase ( getEntityFromPath ../this.modulePath ) }}_TAG,
+  description: '{{this.fastifyDescription}}',
+  summary: '{{this.fastifySummary}}',
+  operationId: '{{this.fastifyOperationId}}',
+  security: [{ apiKey: [] }],
+  hide: true,
+  response: {
+    {{this.responseCode}}: {{ getEntityFromPath ../this.modulePath }}Ref('{{this.zodSchemaDefinitionName}}'),
+  },
+  {{#if this.isAParamRoute}}
+  params: with{{pascalCase this.entityName}}Param,
+  {{/if}}
+}
+{{/each}}

package/turbo/generators/templates/api/api-service.hbs

@@ -0,0 +1,42 @@
+import {
+{{#each endpointActions}}
+  type {{this.typeName}},
+{{/each}}
+} from './{{ getEntityFromPath modulePath}}.schema'
+
+import { faker } from '@faker-js/faker'
+
+{{#each endpointActions}}
+export function {{this.actionName}}(
+  {{#if this.isAParamRoute}}
+  id: string
+  {{/if}}
+): {{this.typeName}} {
+  {{#if this.isAParamRoute}}
+  return {
+    id: id,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  }
+  {{else}}
+  return [
+    {
+      id: faker.string.uuid(),
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+    {
+      id: faker.string.uuid(),
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+    {
+      id: faker.string.uuid(),
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  ]
+  {{/if}}
+}
+
+{{/each}}

package/turbo/generators/templates/component/component-index.hbs

@@ -0,0 +1 @@
+export * from './{{pascalCase componentName}}'

package/turbo/generators/templates/component/component-react.hbs

@@ -0,0 +1,14 @@
+import React from 'react'
+
+interface {{pascalCase componentName}}Props {
+  /**
+   * TODO: Change this
+   */
+  name?: 'change me'
+}
+
+const {{pascalCase componentName}} = ({ name }: {{pascalCase componentName}}Props) => {
+  return <div>{name}</div>
+}
+
+export { {{pascalCase componentName}} }

package/turbo/generators/templates/component/component-story.hbs

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { {{pascalCase componentName}} } from './{{pascalCase componentName}}'
+
+const meta: Meta<typeof {{pascalCase componentName}}> = {
+  title: 'Components/{{pascalCase componentName}}', //Todo: Change the section name ex. 'Components/DataDisplay/componentName'
+  component: {{pascalCase componentName}},
+  decorators: [
+    (Story) => (
+      <div className="h-full w-full">
+        <Story />
+      </div>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof {{pascalCase componentName}}>
+export const Base: Story = {
+  args: {},
+}

package/turbo/generators/templates/component/component-test.hbs

@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom'
+
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { {{pascalCase componentName}} } from './{{pascalCase componentName}}'
+
+describe('{{pascalCase componentName}} Component', () => {
+  test('should render the {{pascalCase componentName}} Component', () => {
+    render(<{{pascalCase componentName}} name="change me" />)
+    const component = screen.getByText('change me')
+    expect(component).toBeInTheDocument()
+  })
+})

package/turbo/generators/templates/icon/icon-react.hbs

@@ -0,0 +1,32 @@
+import React from 'react'
+
+interface {{pascalCase customIconName}}Props extends React.SVGProps<SVGSVGElement> {
+  ref?: React.Ref<SVGSVGElement>;
+}
+
+export const {{pascalCase customIconName}} =
+   ({ ref, className, ...props }: {{pascalCase customIconName}}Props) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="#f62992"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <path d="M18 6a4 4 0 0 0-4 4 7 7 0 0 0-7 7c0-5 4-5 4-10.5a4.5 4.5 0 1 0-9 0 2.5 2.5 0 0 0 5 0C7 10 3 11 3 17c0 2.8 2.2 5 5 5h10" />
+        <path d="M16 20c0-1.7 1.3-3 3-3h1a2 2 0 0 0 2-2v-2a4 4 0 0 0-4-4V4" />
+        <path d="M15.2 22a3 3 0 0 0-2.2-5" />
+        <path d="M18 13h.01" />
+      </svg>
+    )
+  }
+/**
+ * TODO: Then add in svg
+ * ref={ref}
+ * className={props.className}
+ * fill="currentColor"
+ */

package/build/index.d.ts

@@ -1 +0,0 @@
-#!/usr/bin/env node