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

…instead (#123)
miyagi-dev · Jul 14, 2022 · f6b89cd · f6b89cd
1 parent 165df3a
commit f6b89cd
Show file tree

Hide file tree

Showing 16 changed files with 16 additions and 130 deletions.
diff --git a/docs/docs/component-files/info.md b/docs/docs/component-files/info.md
diff --git a/docs/docs/configuration/default-configuration.md b/docs/docs/configuration/default-configuration.md
@@ -49,10 +49,6 @@ Please refer to the [available options](/configuration/options/) for a full expl
       "name": "index",
       "extension": "css"
     },
-    "info": {
-      "name": "info",
-      "extension": "json"
-    },
     "js": {
       "name": "index",
       "extension": "js"

diff --git a/docs/docs/configuration/options.md b/docs/docs/configuration/options.md
@@ -226,15 +226,6 @@ default:
 
 _**Note:** You can use `"<component>"` for `name` if the file should have the same name as the component folder._
 
-default:
-
-```json
-{
-  "extension": "json",
-  "name": "info"
-}
-```
-
 ### `js`
 
 default:

diff --git a/docs/docs/how-to/organizing-components.md b/docs/docs/how-to/organizing-components.md
@@ -43,5 +43,3 @@ _miyagi_ assumes that you have a dedicated folder for each of your components li
 ```
 
 You can call the folders whatever you want and you can nest them as deep as you want.
-
-Additionally to [info files in your components](/component-files/info/), you can also put a `info.json` or `info.yaml` in every other folder if you want to change the displayed name in the navigation.
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -44,7 +44,6 @@ nav:
       - Introduction: component-files/introduction.md
       - Assets: component-files/assets.md
       - Documentation: component-files/documentation.md
-      - Info: component-files/info.md
       - Mocks: component-files/mocks.md
       - Schema: component-files/schema.md
       - Template: component-files/template.md

diff --git a/packages/core/assets/css/main/menu.css b/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,

diff --git a/packages/core/lib/config.json b/packages/core/lib/config.json
@@ -47,10 +47,6 @@
         "name": "index",
         "extension": "css"
       },
-      "info": {
-        "name": "info",
-        "extension": "json"
-      },
       "js": {
         "name": "index",
         "extension": "js"

diff --git a/packages/core/lib/generator/component.js b/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

diff --git a/packages/core/lib/helpers.js b/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
    *

diff --git a/packages/core/lib/init/args.js b/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: {

diff --git a/packages/core/lib/init/watcher.js b/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 }) =>

diff --git a/packages/core/lib/render/views/iframe/component.js b/packages/core/lib/render/views/iframe/component.js
@@ -39,10 +39,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
@@ -108,11 +104,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;
 

diff --git a/packages/core/lib/state/file-contents.js b/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 = {};

diff --git a/packages/core/lib/state/menu/index.js b/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;

diff --git a/packages/core/tests/lib/init/config.test.js b/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",

diff --git a/packages/core/tests/mock-data/menu.json b/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",