chore: added template.ts generation script (#139)

* chore: wip generate template file * build: added template generation script * chore: update all imports with new templates * refactor: generation script * chore: update renderless component csb version * chore: tidy up string * build(script): 💚 improve build script * chore: gitignore template file Co-authored-by: Navin <[email protected]>
adaptui · Nov 5, 2020 · 9538982 · 9538982
1 parent f28bd9a
commit 9538982
Show file tree

Hide file tree

Showing 39 changed files with 225 additions and 234 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 __js
+templates.ts
 
 # Dependency directories
 node_modules/

diff --git a/package.json b/package.json
@@ -116,6 +116,7 @@
     "lint-staged": "10.5.1",
     "lodash": "4.17.20",
     "mockdate": "^3.0.2",
+    "outdent": "^0.7.1",
     "prettier": "2.1.2",
     "raw-loader": "^4.0.2",
     "react": "16.14.0",

diff --git a/scripts/create-preview-tabs.ts b/scripts/create-preview-tabs.ts
@@ -12,7 +12,7 @@ interface Props {
 
 export function createPreviewTabs(props: Props) {
   const { js, ts, css, deps: extraDeps = [] } = props;
-  const deps = ["renderless-components@alpha", ...extraDeps];
+  const deps = ["renderless-components@0.1.1-alpha.6", ...extraDeps];
   const tabs = [];
 
   if (js) {

diff --git a/scripts/generate-js.js b/scripts/generate-js.js
@@ -3,6 +3,8 @@ const path = require("path");
 const chalk = require("chalk");
 const globFs = require("glob-fs")();
 const transpileTs = require("./transpile-ts");
+const outdent = require("outdent");
+const { camelCase } = require("lodash");
 
 function recurse(file) {
   // `file.pattern` is an object with a `glob` (string) property
@@ -55,5 +57,98 @@ const generateJsFiles = filePath => {
   createFile(templatePath, transpiledCode);
 };
 
+// -> get all the component folders [accordion, breadcrumb...]
+// -> find all the .components inside the folders
+// -> create object with component pairs
+// { accordion: [Accordion.component.tsx, AccordionStyled.component.tsx] }
+// -> loop through them and create template.ts file
+const isDirectory = source => fs.lstatSync(source).isDirectory();
+const getDirectories = source =>
+  fs
+    .readdirSync(source)
+    .map(name => path.join(source, name))
+    .filter(isDirectory);
+
+function getComponentFolderPairs() {
+  const componentFolders = getDirectories(
+    path.resolve(__dirname, "../src"),
+  ).filter(path => !path.match(/(__mocks__|utils)/));
+
+  const components = componentFolders.reduce((prev, curr) => {
+    const folderName = path.parse(curr);
+    const allfiles = fs
+      .readdirSync(`${curr}/stories`)
+      .filter(fn => fn.match(/(\.component\.tsx|\.css)$/));
+
+    return { ...prev, [folderName.base]: allfiles };
+  }, {});
+
+  return components;
+}
+
+function generateImportString(component, index) {
+  const templateVarName = camelCase(
+    component.replace(".component.tsx", "").replace(".css", ""),
+  );
+
+  const warningMsg =
+    index === 0
+      ? "// Auto Generated File, Do not modify directly!! execute `yarn generatejs` to regenerate\n"
+      : "";
+
+  const jsComponent = component.replace("tsx", "jsx");
+  let importString = outdent`
+    ${warningMsg}
+    // @ts-ignore
+    export { default as ${templateVarName}Template } from "!!raw-loader!./${component}";\n
+    // @ts-ignore
+    export { default as ${templateVarName}TemplateJs } from "!!raw-loader!./__js/${jsComponent}";\n
+  `;
+
+  if (component.endsWith(".css")) {
+    importString = outdent`
+    ${warningMsg}
+    // @ts-ignore
+    export { default as ${templateVarName}CssTemplate } from "!!raw-loader!./${component}";\n
+    `;
+  }
+
+  return importString;
+}
+
+function generateTemplateFile() {
+  const components = getComponentFolderPairs();
+
+  Object.keys(components).forEach(componentName => {
+    const componentPairs = components[componentName];
+
+    const templateFilePath = path.join(
+      __dirname,
+      "../src",
+      componentName,
+      "stories",
+      "templates.ts",
+    );
+
+    createFile(templateFilePath, "");
+
+    componentPairs.forEach((component, index) => {
+      const importString = generateImportString(component, index);
+
+      console.log(
+        chalk.red.yellow(
+          `Writing template.ts (${chalk.cyanBright(component)})`,
+        ),
+      );
+
+      fs.appendFileSync(templateFilePath, importString, "UTF-8", {
+        flags: "a+",
+      });
+    });
+  });
+}
+
+generateTemplateFile();
+
 const files = globFs.use(recurse).readdirSync("**/*.component.tsx", {});
 files.forEach(filePath => generateJsFiles(filePath));
diff --git a/src/accordion/stories/Accordion.stories.tsx b/src/accordion/stories/Accordion.stories.tsx
@@ -1,15 +1,18 @@
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 
-import { appTemplate, appTemplateJs } from "./templates";
+import { accordionTemplate, accordionTemplateJs } from "./templates";
 import { App as Accordion } from "./Accordion.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Accordion,
   title: "Accordion",
   parameters: {
-    preview: createPreviewTabs({ js: appTemplateJs, ts: appTemplate }),
+    preview: createPreviewTabs({
+      js: accordionTemplate,
+      ts: accordionTemplateJs,
+    }),
   },
 } as Meta;
 

diff --git a/src/accordion/stories/AccordionStyled.stories.tsx b/src/accordion/stories/AccordionStyled.stories.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import {
-  styledAppTemplate,
-  styledAppTemplateJs,
-  cssTemplate,
+  accordionStyledTemplate,
+  accordionStyledTemplateJs,
+  accordionStyledCssTemplate,
 } from "./templates";
 import "./AccordionStyled.css";
 import { App as Accordion } from "./AccordionStyled.component";
@@ -15,9 +15,9 @@ export default {
   title: "AccordionStyled",
   parameters: {
     preview: createPreviewTabs({
-      js: styledAppTemplateJs,
-      ts: styledAppTemplate,
-      css: cssTemplate,
+      js: accordionStyledTemplate,
+      ts: accordionStyledTemplateJs,
+      css: accordionStyledCssTemplate,
     }),
   },
 } as Meta;

diff --git a/src/accordion/stories/templates.ts b/src/accordion/stories/templates.ts
diff --git a/src/breadcrumbs/stories/Breadcrumbs.stories.tsx b/src/breadcrumbs/stories/Breadcrumbs.stories.tsx
@@ -3,17 +3,21 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Breadcrumbs.css";
 import { App as Breadcrumbs } from "./Breadcrumbs.component";
-import { appTemplate, appTemplateJs, cssTemplate } from "./templates";
+import {
+  breadcrumbsTemplate,
+  breadcrumbsTemplateJs,
+  breadcrumbsCssTemplate,
+} from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Breadcrumbs,
   title: "Breadcrumbs",
   parameters: {
     preview: createPreviewTabs({
-      js: appTemplateJs,
-      ts: appTemplate,
-      css: cssTemplate,
+      js: breadcrumbsTemplateJs,
+      ts: breadcrumbsTemplate,
+      css: breadcrumbsCssTemplate,
     }),
   },
 } as Meta;

diff --git a/src/breadcrumbs/stories/templates.ts b/src/breadcrumbs/stories/templates.ts
diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx
@@ -5,7 +5,11 @@ import { addWeeks, format, subWeeks } from "date-fns";
 
 import "./Calendar.css";
 import { App as Calendar } from "./Calendar.component";
-import { appTemplate, appTemplateJs, cssTemplate } from "./templates";
+import {
+  calendarTemplate,
+  calendarTemplateJs,
+  calendarCssTemplate,
+} from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
@@ -19,9 +23,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: appTemplateJs,
-      ts: appTemplate,
-      css: cssTemplate,
+      js: calendarTemplateJs,
+      ts: calendarTemplate,
+      css: calendarCssTemplate,
     }),
   },
 } as Meta;

diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx
@@ -5,9 +5,9 @@ import { addDays, addWeeks, subDays, format, subWeeks } from "date-fns";
 
 import "./RangeCalendar.css";
 import {
-  rangeAppTemplate,
-  rangeAppTemplateJs,
-  rangeCssTemplate,
+  rangeCalendarTemplate,
+  rangeCalendarTemplateJs,
+  rangeCalendarCssTemplate,
 } from "./templates";
 import { App as RangeCalendar } from "./RangeCalendar.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -31,9 +31,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: rangeAppTemplateJs,
-      ts: rangeAppTemplate,
-      css: rangeCssTemplate,
+      js: rangeCalendarTemplateJs,
+      ts: rangeCalendarTemplate,
+      css: rangeCalendarCssTemplate,
     }),
   },
 } as Meta;

diff --git a/src/calendar/stories/templates.ts b/src/calendar/stories/templates.ts
diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx
@@ -5,7 +5,11 @@ import { addWeeks, subWeeks, format, addDays } from "date-fns";
 
 import "./DatePicker.css";
 import { App as DatePicker } from "./DatePicker.component";
-import { appTemplate, appTemplateJs, cssTemplate } from "./templates";
+import {
+  datePickerTemplate,
+  datePickerTemplateJs,
+  datePickerCssTemplate,
+} from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
@@ -19,9 +23,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: appTemplateJs,
-      ts: appTemplate,
-      css: cssTemplate,
+      js: datePickerTemplateJs,
+      ts: datePickerTemplate,
+      css: datePickerCssTemplate,
     }),
   },
 } as Meta;

diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DateRangePicker.stories.tsx
@@ -5,9 +5,9 @@ import { useArgs } from "@storybook/client-api";
 import { addWeeks, setDate, subWeeks } from "date-fns";
 
 import {
-  rangeAppTemplate,
-  rangeAppTemplateJs,
-  rangeCssTemplate,
+  dateRangePickerTemplate,
+  dateRangePickerTemplateJs,
+  dateRangePickerCssTemplate,
 } from "./templates";
 import "./DatePicker.css";
 import { App as DateRangePicker } from "./DateRangePicker.component";
@@ -24,9 +24,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: rangeAppTemplateJs,
-      ts: rangeAppTemplate,
-      css: rangeCssTemplate,
+      js: dateRangePickerTemplateJs,
+      ts: dateRangePickerTemplate,
+      css: dateRangePickerCssTemplate,
     }),
   },
 } as Meta;

diff --git a/src/datepicker/stories/templates.ts b/src/datepicker/stories/templates.ts
diff --git a/src/drawer/stories/Drawer.stories.tsx b/src/drawer/stories/Drawer.stories.tsx
@@ -2,16 +2,16 @@ import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { App as Drawer } from "./Drawer.component";
-import { appTemplate, appTemplateJs } from "./templates";
+import { drawerTemplate, drawerTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   title: "Drawer",
   component: Drawer,
   parameters: {
     preview: createPreviewTabs({
-      js: appTemplateJs,
-      ts: appTemplate,
+      js: drawerTemplateJs,
+      ts: drawerTemplate,
       deps: ["emotion@latest"],
     }),
   },

diff --git a/src/drawer/stories/templates.ts b/src/drawer/stories/templates.ts