From e77b143a52e963865b75d998970718ffe1383ab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Gro=C3=9Fklaus?= Date: Tue, 8 Mar 2022 21:17:49 +0100 Subject: [PATCH] feat(core)!: Remove info files, menu entries get formatted by miyagi instead (#123) --- docs/docs/component-files/info.md | 11 ------- .../configuration/default-configuration.md | 4 --- docs/docs/configuration/options.md | 9 ----- docs/docs/how-to/organizing-components.md | 2 -- docs/mkdocs.yml | 1 - packages/core/assets/css/main/menu.css | 1 + packages/core/lib/config.json | 4 --- packages/core/lib/generator/component.js | 14 -------- packages/core/lib/helpers.js | 32 ------------------ packages/core/lib/init/args.js | 4 +-- packages/core/lib/init/watcher.js | 13 -------- .../core/lib/render/views/iframe/component.js | 9 ++--- packages/core/lib/state/file-contents.js | 3 +- packages/core/lib/state/menu/index.js | 33 +++++-------------- packages/core/tests/lib/init/config.test.js | 4 --- packages/core/tests/mock-data/menu.json | 2 +- 16 files changed, 16 insertions(+), 130 deletions(-) delete mode 100644 docs/docs/component-files/info.md diff --git a/docs/docs/component-files/info.md b/docs/docs/component-files/info.md deleted file mode 100644 index ff142dc0..00000000 --- a/docs/docs/component-files/info.md +++ /dev/null @@ -1,11 +0,0 @@ -**File:** `info.json` - -```json -{ - "name": "My component" -} -``` - -## Name - -You can give your component a custom name by setting `name` in your `info.json`. If you omit it, the file name is used instead. diff --git a/docs/docs/configuration/default-configuration.md b/docs/docs/configuration/default-configuration.md index 2b518990..7774658b 100644 --- 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 index b2283f39..4456e660 100644 --- a/docs/docs/configuration/options.md +++ b/docs/docs/configuration/options.md @@ -226,15 +226,6 @@ default: _**Note:** You can use `""` 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 index aa5ee379..6066af10 100644 --- 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 index 57e8dc07..7d5a55b6 100644 --- 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 index e9dc8f93..f08e5968 100644 --- 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 index 6336c01e..aac08ba0 100644 --- 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 index fca2ddcb..720dd720 100644 --- 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 index 0384d85b..a5540d5e 100644 --- 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 index 7bd343c7..54094fdb 100644 --- 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 index ea161ea4..3c136ca8 100644 --- 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 index e382f9a5..894a40b0 100644 --- 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 index a5cf4511..c2bb9622 100644 --- 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 index 68d5f9eb..01a3378a 100644 --- 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 index 139a6593..58faca61 100644 --- 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 index 597cde67..2761bd8e 100644 --- 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",