feature/add sb generator, update sanity generators (#28)

* add sb generator

* fix generators, update according to generated types

* fix sb types template

* bump turbo eslint version

* fix lock

* remove test component

.prettierignore

@@ -0,0 +1 @@
+**/*.hbs

apps/storyblok/src/constants/sbComponents.tsx

@@ -1,3 +1,4 @@
+// start of sb components imports
 import Blog from "@/contentSections/Blog";
 import CardsGrid from "@/contentSections/CardsGrid";
 import SimpleCarousel from "@/contentSections/carousels/SimpleCarousel";
@@ -12,7 +13,10 @@ import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import PageContainer from "@/components/Page";
 
+// end of sb components imports
+
 export const COMPONENTS = {
+  // start of sb components mapping
   page: PageContainer,
   copy: Copy,
   header: Header,
@@ -25,4 +29,5 @@ export const COMPONENTS = {
   wideSimpleCarousel: WideSimpleCarousel,
   hero: Hero,
   pricing: Pricing,
+  // end of sb components mapping
 };

package.json

@@ -37,7 +37,7 @@
     "@turbo/gen": "^2.0.6",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",
-    "turbo": "^2.1.3"
+    "turbo": "^2.2.3"
   },
   "manypkg": {
     "ignoredRules": [

packages/eslint-config/package.json

@@ -8,8 +8,8 @@
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "^2.0.6",
-    "eslint-plugin-react": "^7.34.1"
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-config-turbo": "^2.2.3"
   },
   "publishConfig": {
     "access": "public"

prettier.config.js

@@ -37,4 +37,4 @@ module.exports = {
     "prettier-plugin-tailwindcss",
   ],
   tailwindConfig: "./packages/ui/tailwind.config.ts",
-}
+};

turbo.json

@@ -14,12 +14,7 @@
     "build": {
       "cache": false,
       "dependsOn": ["^build"],
-      "outputs": [
-        ".next/**",
-        "!.next/cache/**",
-        "dist/**",
-        "storybook-static/**"
-      ]
+      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
     },
     "start": {
       "dependsOn": ["^build"]
@@ -33,10 +28,6 @@
     "dev:turbo": {
       "cache": false,
       "persistent": true
-    },
-    "proxy": {
-      "cache": false,
-      "persistent": true
     }
   }
 }

turbo/generators/config.ts

@@ -1,70 +1,86 @@
 import type { PlopTypes } from "@turbo/gen";
 
+const componentNamePrompt = {
+  type: "input",
+  name: "sectionName",
+  message: "What is the name of the new section?",
+  validate: (input: string) => {
+    if (!input) {
+      return "section name is required";
+    }
+
+    if (input.split(" ").length > 1) {
+      return "section name should be a single word";
+    }
+
+    return true;
+  },
+};
+
 export default function generator(plop: PlopTypes.NodePlopAPI): void {
   plop.setHelper("capitialize", (str: string) => {
     return str.charAt(0).toUpperCase() + str.slice(1);
   });
 
+  plop.setHelper("lowercase", (str: string) => {
+    return str.toLowerCase();
+  });
+
   plop.setGenerator("UI", {
     description: "Create a new UI component",
-    prompts: [
-      {
-        type: "input",
-        name: "componentName",
-        message: "What is the name of the new component?",
-        validate: (input: string) => {
-          if (!input) {
-            return "component name is required";
-          }
-
-          if (input.split(" ").length > 1) {
-            return "component name should be a single word";
-          }
-
-          return true;
-        },
-      },
-    ],
+    prompts: [componentNamePrompt],
     actions: [
       {
         type: "add",
-        path: "{{ turbo.paths.root }}/packages/ui/components/ui/{{ componentName }}/index.tsx",
+        path: "{{ turbo.paths.root }}/packages/ui/components/ui/{{ capitialize sectionName }}/index.tsx",
         templateFile: "templates/uiComponent.hbs",
       },
       {
         type: "add",
-        path: "{{ turbo.paths.root }}/packages/ui/components/ui/{{ componentName }}/types.ts",
+        path: "{{ turbo.paths.root }}/packages/ui/components/ui/{{ capitialize sectionName }}/types.ts",
         templateFile: "templates/uiComponentTypes.hbs",
       },
       {
         type: "modify",
         path: "{{ turbo.paths.root }}/packages/ui/index.tsx",
         pattern: /(\/\/ end component exports)/g,
-        template: `export * from "./components/ui/{{ componentName }}"\n$1`,
+        template: `export * from "./components/ui/{{ capitialize sectionName }}"\n$1`,
       },
     ],
   });
 
-  plop.setGenerator("Sanity", {
+  plop.setGenerator("Storyblok", {
     description: "Create a new content section",
-    prompts: [
-      {
-        type: "input",
-        name: "sectionName",
-        message: "What is the name of the new section?",
-        validate: (input: string) => {
-          if (!input) {
-            return "section name is required";
-          }
-
-          if (input.split(" ").length > 1) {
-            return "section name should be a single word";
-          }
-
-          return true;
-        },
+    prompts: [componentNamePrompt],
+    actions: [
+      {
+        type: "add",
+        path: "{{ turbo.paths.root }}/apps/storyblok/src/contentSections/{{ capitialize sectionName }}/index.tsx",
+        templateFile: "templates/storyblokSection.hbs",
+      },
+      {
+        type: "add",
+        path: "{{ turbo.paths.root }}/apps/storyblok/src/contentSections/{{ capitialize sectionName }}/types.ts",
+        templateFile: "templates/storyblokSectionTypes.hbs",
+      },
+      {
+        type: "modify",
+        path: "{{ turbo.paths.root }}/apps/storyblok/src/constants/sbComponents.tsx",
+        pattern: /(\/\/ end of sb components imports)/g,
+        template: `import {{ capitialize sectionName }} from '@/contentSections/{{ capitialize sectionName }}'\n$1`,
+      },
+      {
+        type: "modify",
+        path: "{{ turbo.paths.root }}/apps/storyblok/src/constants/sbComponents.tsx",
+        pattern: /(\/\/ end of sb components mapping)/g,
+        template: `  {{ lowercase sectionName }}: {{ capitialize sectionName }},\n$1`,
       },
     ],
+  });
+
+  plop.setGenerator("Sanity", {
+    description: "Create a new content section",
+    prompts: [componentNamePrompt],
     actions: [
       {
         type: "add",

turbo/generators/templates/sanitySectionTypes.hbs

@@ -1,8 +1,7 @@
-export interface I{{ capitialize sectionName }} {
-    _key: string;
-    title: string;
-}
+import type { Section{{ capitialize sectionName }} } from "@/generated/extracted-types";
 
-export interface I{{ capitialize sectionName }}SectionProps {
-    data: I{{ capitialize sectionName }}
+export interface I{{ capitialize sectionName }}Props {
+  data: Section{{ capitialize sectionName }} & {
+    _key: string;
+  };
 }

turbo/generators/templates/storyblokSection.hbs

@@ -0,0 +1,27 @@
+import EmptyBlock from "@shared/ui/components/EmptyBlock";
+
+import { {{capitialize sectionName}} as {{capitialize sectionName}}UI } from "@shared/ui";
+
+import { prepareImageProps } from "@/lib/adapters/prepareImageProps";
+import { prepareLinkProps } from "@/lib/adapters/prepareLinkProps";
+import { prepareRichTextProps } from "@/lib/adapters/prepareRichTextProps";
+import SectionContainer from "@/components/SectionContainer";
+
+import type { I{{capitialize sectionName}}Props } from "./types";
+
+export default function {{capitialize sectionName}}({ blok }: I{{capitialize sectionName}}Props) {
+  const { text, image, link } = blok;
+
+  if (text.length === 0 && image.length === 0 && link.length === 0)
+    return <EmptyBlock name={blok.component as string} />;
+
+  return (
+    <SectionContainer blok={blok}>
+      <{{capitialize sectionName}}UI
+        text={prepareRichTextProps(text[0])}
+        image={prepareImageProps(image[0])}
+        link={prepareLinkProps(link[0])}
+      />
+    </SectionContainer>
+  );
+}

turbo/generators/templates/storyblokSectionTypes.hbs

@@ -0,0 +1,5 @@
+import type { {{capitialize sectionName}}Storyblok } from "@/generated/extracted-types";
+
+export interface I{{capitialize sectionName}}Props {
+  blok: {{capitialize sectionName}}Storyblok;
+}

turbo/generators/templates/uiComponent.hbs

@@ -1,10 +1,7 @@
-import type { I{{ capitialize componentName }}Props } from "./types"
-
-export function {{ capitialize componentName }} ({ title }: I{{ capitialize componentName }}Props)  {
-  return (
-    <div>
-      new UI component: Table
-      title: {title || 'title not provided'}
-    </div>
-  )
-}
+import type { I{{capitialize sectionName}}Props } from "./types" export function
+{{capitialize sectionName}}
+({ title }: I{{capitialize sectionName}}Props) { return (
+<div>
+  new UI component: Table title: {title || 'title not provided'}
+</div>
+) }

turbo/generators/templates/uiComponentTypes.hbs

@@ -1,3 +1 @@
-export interface I{{ capitialize componentName }}Props {
-  title: string;
-}
+export interface I{{capitialize sectionName}}Props { title: string; }