feat(cli): override theme components from command line (#850)

* feat(cli): override theme components from command line

* docs: instruction on how to override theme component

docs/guide/TROUBLESHOOTING.md

@@ -28,3 +28,14 @@ sidebar: auto
 ---
 
 `*` - if you are using your self-hosted Shopware instance
+
+
+### Question: How can I override theme component? 
+
+You can override theme component easily by typing `yarn shopware-pwa override` and picking component to override.
+:::warning
+Please remember, that overriding component means you no longer use theme component so you'll have no updates for overrided components. If you feel that you need to override couple of components to accomplish some effect maybe we can help you upgrading theme to allow you to override just one component to have this. Feel free to ask your questions on slack or create an issue for that.
+:::
+
+Here's how overriding component looks like:
+![overriding theme components](../assets/shopware-pwa-components-override.gif)

packages/cli/src/commands/override.ts

@@ -0,0 +1,68 @@
+import { GluegunToolbox } from "gluegun";
+
+// TODO: method from nuxt-module/src/files.ts - move it to shared package - https://github.com/DivanteLtd/shopware-pwa/issues/849
+function getAllFiles(
+ dirPath: string,
+ arrayOfFiles: string[] = [],
+ excludeHidden: boolean = true
+): string[] {
+ const jetpack = require("fs-jetpack");
+ const path = require("path");
+ if (!dirPath || !jetpack.exists(dirPath)) return [];
+ const files: string[] = jetpack.list(dirPath) as string[];
+ files.forEach((file) => {
+ if (jetpack.exists(path.join(dirPath, file)) === "dir") {
+ arrayOfFiles = getAllFiles(path.join(dirPath, file), arrayOfFiles);
+ } else {
+ const fileName = path.join(dirPath, file).replace(__dirname + "/", "");
+ if (!(excludeHidden && file.startsWith("."))) {
+ arrayOfFiles.push(path.normalize(fileName));
+ }
+ }
+ });
+
+ return arrayOfFiles;
+}
+
+module.exports = {
+ name: "override",
+ alias: ["o"],
+ hidden: false,
+ description:
+ "Allows you to override theme component. Component will appear in project ready to be edited.",
+ run: async (toolbox: GluegunToolbox) => {
+ const directoryPath = `${toolbox.defaultThemeLocation}/components/`;
+
+ const componentsFullPaths = getAllFiles(directoryPath);
+ const themeComponents = componentsFullPaths.map((path) =>
+ path.replace(directoryPath, "")
+ );
+
+ const componentToOverrideQuestion = {
+ type: "autocomplete",
+ name: "componentToOverride",
+ message: "Type or select component to override",
+ limit: 10,
+ choices: themeComponents,
+ };
+
+ const answers = await toolbox.prompt.ask([componentToOverrideQuestion]);
+
+ const copyFrom = `${directoryPath}${answers.componentToOverride}`;
+ const copyTo = `components/${answers.componentToOverride}`;
+
+ try {
+ await toolbox.filesystem.copyAsync(copyFrom, copyTo);
+ toolbox.print.success(
+ `Component overrided. You can edit it in ${copyTo}`
+ );
+ const ua = require("universal-analytics");
+ const visitor = ua("UA-167979975-1");
+ visitor
+ .event("CLI", "override-component", answers.componentToOverride)
+ .send();
+ } catch (e) {
+ toolbox.print.error(e.message);
+ }
+ },
+};