feat(core)!: Remove info files, menu entries get formatted by miyagi …

…instead (#123)

packages/core/assets/css/main/menu.css

@@ -85,6 +85,7 @@
   border-radius: var(--Miyagi-borderRadius);
   display: block;
   padding: 0 var(--Miyagi-linkSpacing);
+  text-transform: capitalize;
 }
 
 .Menu-listItem.has-no-match .Menu-component,

packages/core/lib/config.json

@@ -47,10 +47,6 @@
         "name": "index",
         "extension": "css"
       },
-      "info": {
-        "name": "info",
-        "extension": "json"
-      },
       "js": {
         "name": "index",
         "extension": "js"

packages/core/lib/generator/component.js

@@ -97,19 +97,6 @@ module.exports = async function componentGenerator(cliParams, config) {
           }
         }
         break;
-      case "info":
-        {
-          const data = {
-            name: "",
-          };
-
-          if (filesConfig.info.extension === "yaml") {
-            str = jsonToYaml.dump(data);
-          } else {
-            str = `${JSON.stringify(data, null, 2)}\n`;
-          }
-        }
-        break;
       case "schema":
         {
           const data = {
@@ -209,7 +196,6 @@ module.exports = async function componentGenerator(cliParams, config) {
       )}.${filesConfig.templates.extension}`,
       mocks: `${filesConfig.mocks.name}.${filesConfig.mocks.extension}`,
       docs: "README.md",
-      info: `${filesConfig.info.name}.${filesConfig.info.extension}`,
       css: `${helpers.getResolvedFileName(
         filesConfig.css.name,
         componentName

packages/core/lib/helpers.js

@@ -137,22 +137,6 @@ module.exports = {
     return filePath.replace(path.basename(filePath), "README.md");
   },
 
-  /**
-   * Accepts a template file path and returns the path to the corresponding info file
-   *
-   * @param {object} app - the express instance
-   * @param {string} filePath - file path to a template file
-   * @returns {string} file path to the corresponding info file
-   */
-  getInfoPathFromTemplatePath: function (app, filePath) {
-    return filePath.replace(
-      path.basename(filePath),
-      `${app.get("config").files.info.name}.${
-        app.get("config").files.info.extension
-      }`
-    );
-  },
-
   /**
    * Accepts a template file path and returns the path to the corresponding schema file
    *
@@ -197,22 +181,6 @@ module.exports = {
     return path.extname(filePath) === ".md";
   },
 
-  /**
-   * Accepts a file path and checks if it is an info file
-   *
-   * @param {object} app - the express instance
-   * @param {string} filePath - path to any type of file
-   * @returns {boolean} is true if the given file is a info file
-   */
-  fileIsInfoFile: function (app, filePath) {
-    return (
-      path.basename(filePath) ===
-      `${app.get("config").files.info.name}.${
-        app.get("config").files.info.extension
-      }`
-    );
-  },
-
   /**
    * Accepts a file path and checks if it is a schema file
    *

packages/core/lib/init/args.js

@@ -16,11 +16,11 @@ module.exports = yargs
   })
   .command(
     "new",
-    "Creates a new component folder (including template, mock, documentation, info, css and js files)",
+    "Creates a new component folder (including template, mock, documentation, css and js files)",
     {
       skip: {
         description:
-          "files that will not be created\n(comma separated list of css, docs, info, js, mocks, tpl)",
+          "files that will not be created\n(comma separated list of css, docs, js, mocks, tpl)",
         type: "string",
       },
       only: {

packages/core/lib/init/watcher.js

@@ -72,7 +72,6 @@ async function updateFileContents(app, events) {
       helpers.fileIsTemplateFile(app, changedPath) ||
       helpers.fileIsDataFile(app, changedPath) ||
       helpers.fileIsDocumentationFile(changedPath) ||
-      helpers.fileIsInfoFile(app, changedPath) ||
       helpers.fileIsSchemaFile(app, changedPath)
     ) {
       const fullPath = path.join(process.cwd(), changedPath);
@@ -239,18 +238,6 @@ async function handleFileChange() {
     });
 
     changeFileCallback(true, hasBeenAdded);
-    // updated file is an info file
-  } else if (
-    triggeredEvents.some(({ changedPath }) =>
-      helpers.fileIsInfoFile(appInstance, changedPath)
-    )
-  ) {
-    await setState(appInstance, {
-      fileContents: await updateFileContents(appInstance, triggeredEvents),
-      menu: true,
-    });
-
-    changeFileCallback(true, true);
     // updated file is a schema file
   } else if (
     triggeredEvents.some(({ changedPath }) =>

packages/core/lib/render/views/iframe/component.js

@@ -38,10 +38,6 @@ module.exports = async function renderIframeComponent({
     app.get("state").fileContents[
       helpers.getDocumentationPathFromTemplatePath(templateFilePath)
     ];
-  const componentInfo =
-    app.get("state").fileContents[
-      helpers.getInfoPathFromTemplatePath(app, templateFilePath)
-    ];
   const schemaFilePath = helpers.getSchemaPathFromTemplatePath(
     app,
     templateFilePath
@@ -107,11 +103,12 @@ module.exports = async function renderIframeComponent({
 
   let componentName = path.basename(path.dirname(file));
 
-  if (componentInfo) {
+  // @TODO
+  /*if (componentInfo) {
     if (componentInfo.name) {
       componentName = componentInfo.name;
     }
-  }
+  }*/
 
   let context;
 

packages/core/lib/state/file-contents.js

@@ -59,7 +59,6 @@ async function getFilePaths(app) {
           )}.${files.templates.extension}`,
           `${files.mocks.name}.${files.mocks.extension}`,
           `${files.schema.name}.${files.schema.extension}`,
-          `${files.info.name}.${files.info.extension}`,
           `data.${files.mocks.extension}`,
         ]) ||
         helpers.fileIsDocumentationFile(res)
@@ -209,7 +208,7 @@ async function readFile(app, fileName) {
  * and their content.
  *
  * @param {object} app - the express instance
- * @returns {Promise} gets resolved with the content of all docs, mocks, schema, info files
+ * @returns {Promise} gets resolved with the content of all docs, mocks, schema files
  */
 async function getFileContents(app) {
   const fileContents = {};

packages/core/lib/state/menu/index.js

@@ -42,21 +42,12 @@ function hasComponentFileWithCorrectNameAsChild(app, directory) {
  * @returns {object} adapted file tree object
  */
 function getDataForLinkedDirectory(app, directory) {
-  const info =
-    app.get("state").fileContents[
-      path.join(
-        directory.path,
-        `${app.get("config").files.info.name}.${
-          app.get("config").files.info.extension
-        }`
-      )
-    ];
   const shortPath = helpers.getShortPathFromFullPath(app, directory.path);
   const normalizedShortPath = helpers.normalizeString(shortPath);
 
   return {
     type: directory.type,
-    name: info && info.name ? info.name : directory.name,
+    name: directory.name.replaceAll("-", " "),
     fullPath: directory.path,
     shortPath,
     normalizedShortPath,
@@ -79,7 +70,10 @@ function getDataForDocumentationFile(app, file) {
 
   return {
     type: file.type,
-    name: path.basename(file.name, ".md"),
+    name: path
+      .basename(file.name, ".md")
+      .replaceAll("-", " ")
+      .replaceAll("_", " "),
     fullPath: file.path,
     shortPath,
     normalizedShortPath,
@@ -89,24 +83,13 @@ function getDataForDocumentationFile(app, file) {
 }
 
 /**
- * @param {object} app - the express instance
  * @param {object} directory - file tree object
  * @returns {object} adapted file tree object
  */
-function getDataForDirectory(app, directory) {
-  const info =
-    app.get("state").fileContents[
-      path.join(
-        directory.path,
-        `${app.get("config").files.info.name}.${
-          app.get("config").files.info.extension
-        }`
-      )
-    ];
-
+function getDataForDirectory(directory) {
   return {
     type: directory.type,
-    name: info && info.name ? info.name : directory.name,
+    name: directory.name.replaceAll("-", " "),
     fullPath: directory.path,
     index: directory.index,
     id: helpers.normalizeString(directory.path),
@@ -124,7 +107,7 @@ function restructureDirectory(app, directory) {
   if (hasComponentFileWithCorrectNameAsChild(app, directory)) {
     item = getDataForLinkedDirectory(app, directory);
   } else {
-    item = getDataForDirectory(app, directory);
+    item = getDataForDirectory(directory);
   }
 
   return item;

packages/core/tests/lib/init/config.test.js

@@ -592,10 +592,6 @@ describe("lib/init/config", () => {
             extension: "css",
             name: "index",
           },
-          info: {
-            extension: "json",
-            name: "info",
-          },
           js: {
             extension: "js",
             name: "index",

packages/core/tests/mock-data/menu.json

@@ -84,7 +84,7 @@
       },
       {
         "type": "directory",
-        "name": "link-list",
+        "name": "link list",
         "fullPath": "/miyagi/tests/src/components/link-list",
         "shortPath": "components/link-list",
         "normalizedShortPath": "components-link-list",