@dittowords/cli 3.6.0 → 3.7.0

package/lib/generate-suggestions.test.ts

@@ -1,6 +1,6 @@
 import fs from "fs/promises";
 import path from "path";
-import { findTextInJSXFiles } from "./generate-suggestions";
+import { findComponentsInJSXFiles } from "./generate-suggestions";
 
 describe("findTextInJSXFiles", () => {
   async function createTempFile(filename, content) {
@@ -15,9 +15,10 @@ describe("findTextInJSXFiles", () => {
   }
 
   it("should return an empty obj when no files are found", async () => {
-    const result = await findTextInJSXFiles(".", {
-      text: "searchString",
-    } as any);
+    const result = await findComponentsInJSXFiles({
+      directory: ".",
+      components: {},
+    });
 
     expect(result).toEqual({});
   });
@@ -26,9 +27,17 @@ describe("findTextInJSXFiles", () => {
     const file1 = await createTempFile("file1.jsx", "<div>No match</div>");
     const file2 = await createTempFile("file2.tsx", "<div>No match</div>");
 
-    const result = await findTextInJSXFiles(".", {
-      text: "searchString",
-    } as any);
+    const result = await findComponentsInJSXFiles({
+      directory: ".",
+      components: {
+        acomponent: {
+          name: "A Component",
+          text: "A Component",
+          status: "NONE",
+          folder: null,
+        },
+      },
+    });
 
     expect(result).toEqual({});
 
@@ -43,24 +52,106 @@ describe("findTextInJSXFiles", () => {
     );
 
     const expectedResult = {
-      [file1]: [
-        {
-          lineNumber: 1,
-          preview: "<div>Test searchString and another searchString</div>",
+      "search-string": {
+        apiId: "search-string",
+        folder: null,
+        name: "Search String",
+        occurrences: {
+          [file1]: [
+            {
+              lineNumber: 1,
+              preview: "<div>Test searchString and another searchString</div>",
+            },
+            {
+              lineNumber: 1,
+              preview: "<div>Test searchString and another searchString</div>",
+            },
+          ],
         },
-        {
-          lineNumber: 1,
-          preview: "<div>Test searchString and another searchString</div>",
+        status: "NONE",
+        text: "searchString",
+      },
+    };
+
+    const result = await findComponentsInJSXFiles({
+      directory: ".",
+      components: {
+        "search-string": {
+          name: "Search String",
+          text: "searchString",
+          status: "NONE",
+          folder: null,
+        },
+      },
+    });
+
+    expect(result).toEqual(expectedResult);
+
+    await deleteTempFile(file1);
+  });
+
+  it("-f flag works", async () => {
+    const file1 = await createTempFile(
+      "file1.jsx",
+      `<div>Test searchString and another searchString</div>`
+    );
+
+    const expectedResult = {
+      "search-string": {
+        apiId: "search-string",
+        folder: null,
+        name: "Search String",
+        occurrences: {
+          [file1]: [
+            {
+              lineNumber: 1,
+              preview: "<div>Test searchString and another searchString</div>",
+            },
+            {
+              lineNumber: 1,
+              preview: "<div>Test searchString and another searchString</div>",
+            },
+          ],
         },
-      ],
+        status: "NONE",
+        text: "searchString",
+      },
     };
 
-    const result = await findTextInJSXFiles(".", {
-      text: "searchString",
-    } as any);
+    const result = await findComponentsInJSXFiles({
+      directory: ".",
+      files: ["file1.jsx"],
+      components: {
+        "search-string": {
+          name: "Search String",
+          text: "searchString",
+          status: "NONE",
+          folder: null,
+        },
+      },
+    });
 
     expect(result).toEqual(expectedResult);
 
+    try {
+      const result2 = await findComponentsInJSXFiles({
+        directory: ".",
+        files: ["file2.jsx"],
+        components: {
+          "search-string": {
+            name: "Search String",
+            text: "searchString",
+            status: "NONE",
+            folder: null,
+          },
+        },
+      });
+
+      expect(false).toEqual(true);
+    } catch {
+      expect(true).toEqual(true);
+    }
+
     await deleteTempFile(file1);
   });
 });

package/lib/generate-suggestions.ts

@@ -4,10 +4,16 @@ import { parse } from "@babel/parser";
 import traverse from "@babel/traverse";
 
 import {
+  FetchComponentResponse,
   FetchComponentResponseComponent,
   fetchComponents,
 } from "./http/fetchComponents";
 
+interface Occurrence {
+  lineNumber: number;
+  preview: string;
+}
+
 interface Result extends FetchComponentResponseComponent {
   apiId: string;
   occurrences: {
@@ -15,48 +21,41 @@ interface Result extends FetchComponentResponseComponent {
   };
 }
 
-interface Occurrence {
-  lineNumber: number;
-  preview: string;
-}
-
-async function generateSuggestions(flags: { directory?: string }) {
-  const components = await fetchComponents();
-  const results: { [apiId: string]: Result } = {};
-
-  for (const [compApiId, component] of Object.entries(components)) {
-    if (!results[compApiId]) {
-      results[compApiId] = { apiId: compApiId, ...component, occurrences: {} };
-    }
-
-    const directory = flags.directory || ".";
-    const result = await findTextInJSXFiles(directory, component);
-    results[compApiId].occurrences = result;
+async function generateSuggestions(flags: {
+  directory?: string;
+  files?: string[];
+  componentFolder?: string;
+}) {
+  const components = await fetchComponents({
+     ...(flags.componentFolder ? { componentFolder: flags.componentFolder} : {})
+  });
+  const directory = flags.directory || ".";
 
-    // Remove if there the length is zero
-    if (Object.keys(results[compApiId].occurrences).length === 0) {
-      delete results[compApiId];
-    }
-  }
+  const results: { [apiId: string]: Result } = await findComponentsInJSXFiles({
+    directory,
+    files: flags.files,
+    components,
+  });
 
   // Display results to user
   console.log(JSON.stringify(results, null, 2));
 }
 
-async function findTextInJSXFiles(
-  path: string,
-  component: FetchComponentResponseComponent
-) {
-  const result: Result["occurrences"] = {};
-  const files = glob.sync(`${path}/**/*.+(jsx|tsx)`, {
-    ignore: "**/node_modules/**",
-  });
+async function findComponentsInJSXFiles(params: {
+  directory: string;
+  files?: string[];
+  components: FetchComponentResponse;
+}): Promise<{ [apiId: string]: Result }> {
+  const result: { [apiId: string]: Result } = {};
+  const files =
+    params.files ||
+    glob.sync(`${params.directory}/**/*.+(jsx|tsx)`, {
+      ignore: "**/node_modules/**",
+    });
 
   const promises: Promise<any>[] = [];
 
   for (const file of files) {
-    result[file] = [];
-
     promises.push(
       fs.readFile(file, "utf-8").then((code) => {
         const ast = parse(code, {
@@ -64,46 +63,68 @@ async function findTextInJSXFiles(
           plugins: ["jsx", "typescript"],
         });
 
-        const occurrences: Occurrence[] = [];
-
         traverse(ast, {
           JSXText(path) {
-            if (path.node.value.includes(component.text)) {
-              const escapedText = component.text.replace(
-                /[.*+?^${}()|[\]\\]/g,
-                "\\$&"
-              );
-              const regex = new RegExp(escapedText, "g");
-              let match;
-              while ((match = regex.exec(path.node.value)) !== null) {
-                const lines = path.node.value.slice(0, match.index).split("\n");
-
-                if (!path.node.loc) {
-                  continue;
-                }
-
-                const lineNumber = path.node.loc.start.line + lines.length - 1;
+            for (const [compApiId, component] of Object.entries(
+              params.components
+            )) {
+              // If we haven't seen this component before, add it to the result
+              if (!result[compApiId]) {
+                result[compApiId] = {
+                  apiId: compApiId,
+                  ...component,
+                  occurrences: {},
+                };
+              }
 
-                const codeLines = code.split("\n");
-                const line = codeLines[lineNumber - 1];
-                const preview = replaceAt(
-                  line,
-                  match.index,
-                  component.text,
-                  `${component.text}`
+              if (path.node.value.includes(component.text)) {
+                // Escape all special characters from the text so we can use it in a regex
+                const escapedText = component.text.replace(
+                  /[.*+?^${}()|[\]\\]/g,
+                  "\\$&"
                 );
+                const regex = new RegExp(escapedText, "g");
+                let match;
+                while ((match = regex.exec(path.node.value)) !== null) {
+                  const lines = path.node.value
+                    .slice(0, match.index)
+                    .split("\n");
+
+                  if (!path.node.loc) {
+                    continue;
+                  }
+
+                  const lineNumber =
+                    path.node.loc.start.line + lines.length - 1;
+
+                  const codeLines = code.split("\n");
+                  const line = codeLines[lineNumber - 1];
+                  const preview = replaceAt(
+                    line,
+                    match.index,
+                    component.text,
+                    `${component.text}`
+                  );
+
+                  // Initialize the occurrences array if it doesn't exist
+                  if (!result[compApiId]["occurrences"][file]) {
+                    result[compApiId]["occurrences"][file] = [];
+                  }
+
+                  result[compApiId]["occurrences"][file].push({
+                    lineNumber,
+                    preview,
+                  });
+                }
+              }
 
-                occurrences.push({ lineNumber, preview });
+              // Remove from result if no occurrences were found
+              if (Object.keys(result[compApiId]["occurrences"]).length === 0) {
+                delete result[compApiId];
               }
             }
           },
         });
-
-        if (occurrences.length > 0) {
-          result[file] = occurrences;
-        } else {
-          delete result[file];
-        }
       })
     );
   }
@@ -125,4 +146,4 @@ function replaceAt(
   );
 }
 
-export { findTextInJSXFiles, generateSuggestions };
+export { findComponentsInJSXFiles, generateSuggestions };

package/lib/http/fetchComponents.ts

@@ -11,16 +11,26 @@ export interface FetchComponentResponse {
   [compApiId: string]: FetchComponentResponseComponent;
 }
 
-export async function fetchComponents(): Promise<FetchComponentResponse> {
+export async function fetchComponents(options: {
+  componentFolder?: string;
+}): Promise<FetchComponentResponse> {
   const api = createApiClient();
-  const { data } = await api.get<{
-    [compApiId: string]: {
-      name: string;
-      text: string;
-      status: "NONE" | "WIP" | "REVIEW" | "FINAL";
-      folder: "string" | null;
-    };
-  }>("/components", {});
 
-  return data;
+  if (options.componentFolder) {
+    try {
+      const { data } = await api.get<FetchComponentResponse>(`/component-folders/${options.componentFolder}/components`, {});
+
+      return data;
+    }
+    catch (e) {
+      console.log(`Failed to get components for ${options.componentFolder}. Please verify the folder's API ID.`)
+      return {}
+    }
+
+  }
+  else {
+    const { data } = await api.get<FetchComponentResponse>("/components", {});
+
+    return data;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dittowords/cli",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Command Line Interface for Ditto (dittowords.com).",
   "main": "bin/index.js",
   "scripts": {
@@ -40,8 +40,6 @@
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^18.0.0",
     "babel-jest": "^29.3.1",
-    "eslint": "^8.27.0",
-    "eslint-config-airbnb-base": "^14.2.0",
     "husky": "^7.0.4",
     "jest": "^29.3.1",
     "lint-staged": "^11.2.4",

package/testfiles/test1.jsx

@@ -2,15 +2,15 @@ import React from "react";
 function HelloWorld() {
   return (
     <div>
-      <p>hello world</p>
+      <p>hello!</p>
       <p>Some additional text.</p>
-      <p>hello world</p>
+      <p>hello!</p>
       <p>More additional text.</p>
-      <p>ahhh hello world iaewofjaowiejfoiwjfoffj</p>
+      <p>ahhh hello! iaewofjaowiejfoiwjfoffj</p>
       <p>Even more additional text.</p>
-      <p>hello world</p>
+      <p>hello!</p>
       <p>Final additional text.</p>
-      <p>hello world</p>
+      <p>hello!</p>
       <p>good bye</p>
     </div>
   );

package/testfiles/test2.jsx

@@ -2,7 +2,7 @@ import React from "react";
 function HelloWorld() {
   return (
     <div>
-      <p>good bye</p>
+      <p>good bye?</p>
     </div>
   );
 }

package/.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    commonjs: true,
-    es2020: true,
-    "jest/globals": true,
-  },
-  extends: ["airbnb-base"],
-  parserOptions: {
-    ecmaVersion: 11,
-  },
-  plugins: ["jest"],
-  rules: {
-    "no-console": "off",
-    "no-underscore-dangle": ["error", { allow: ["_id", "__get__"] }],
-  },
-};

package/bin/lib/add-project.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const project_1 = require("./init/project");
-const projectsToText_1 = __importDefault(require("./utils/projectsToText"));
-const getSelectedProjects_1 = require("./utils/getSelectedProjects");
-const output_1 = __importDefault(require("./output"));
-const quit_1 = require("./utils/quit");
-const addProject = async () => {
-    const projects = (0, getSelectedProjects_1.getSelectedProjects)();
-    const usingComponents = (0, getSelectedProjects_1.getIsUsingComponents)();
-    try {
-        if (usingComponents) {
-            if (projects.length) {
-                console.log(`\nYou're currently syncing text from the ${output_1.default.info("Component Library")} and from the following projects: ${(0, projectsToText_1.default)(projects)}`);
-            }
-            else {
-                console.log(`\nYou're currently only syncing text from the ${output_1.default.info("Component Library")}`);
-            }
-        }
-        else if (projects.length) {
-            console.log(`\nYou're currently set up to sync text from the following projects: ${(0, projectsToText_1.default)(projects)}`);
-        }
-        await (0, project_1.collectAndSaveSource)({
-            components: false,
-        });
-    }
-    catch (error) {
-        console.log(`\nSorry, there was an error adding a project to your workspace: `, error);
-        (0, quit_1.quit)("Project selection was not updated.");
-    }
-};
-exports.default = addProject;
-//# sourceMappingURL=add-project.js.map

package/bin/lib/add-project.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"add-project.js","sourceRoot":"","sources":["../../lib/add-project.ts"],"names":[],"mappings":";;;;;AAAA,4CAAsD;AACtD,4EAAoD;AACpD,qEAGqC;AACrC,sDAA8B;AAC9B,uCAAoC;AAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;IAC5B,MAAM,QAAQ,GAAG,IAAA,yCAAmB,GAAE,CAAC;IACvC,MAAM,eAAe,GAAG,IAAA,0CAAoB,GAAE,CAAC;IAE/C,IAAI;QACF,IAAI,eAAe,EAAE;YACnB,IAAI,QAAQ,CAAC,MAAM,EAAE;gBACnB,OAAO,CAAC,GAAG,CACT,4CAA4C,gBAAM,CAAC,IAAI,CACrD,mBAAmB,CACpB,qCAAqC,IAAA,wBAAc,EAAC,QAAQ,CAAC,EAAE,CACjE,CAAC;aACH;iBAAM;gBACL,OAAO,CAAC,GAAG,CACT,iDAAiD,gBAAM,CAAC,IAAI,CAC1D,mBAAmB,CACpB,EAAE,CACJ,CAAC;aACH;SACF;aAAM,IAAI,QAAQ,CAAC,MAAM,EAAE;YAC1B,OAAO,CAAC,GAAG,CACT,uEAAuE,IAAA,wBAAc,EACnF,QAAQ,CACT,EAAE,CACJ,CAAC;SACH;QACD,MAAM,IAAA,8BAAoB,EAAC;YACzB,UAAU,EAAE,KAAK;SAClB,CAAC,CAAC;KACJ;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,GAAG,CACT,kEAAkE,EAClE,KAAK,CACN,CAAC;QACF,IAAA,WAAI,EAAC,oCAAoC,CAAC,CAAC;KAC5C;AACH,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/bin/lib/api.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.create = void 0;
-const axios_1 = __importDefault(require("axios"));
-const config_1 = __importDefault(require("./config"));
-const consts_1 = __importDefault(require("./consts"));
-const create = (token) => {
-    return axios_1.default.create({
-        baseURL: consts_1.default.API_HOST,
-        headers: {
-            Authorization: `token ${token}`,
-        },
-    });
-};
-exports.create = create;
-exports.default = (0, exports.create)(config_1.default.getToken(consts_1.default.CONFIG_FILE, consts_1.default.API_HOST));
-//# sourceMappingURL=api.js.map

package/bin/lib/api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"api.js","sourceRoot":"","sources":["../../lib/api.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,sDAA8B;AAC9B,sDAA8B;AAEvB,MAAM,MAAM,GAAG,CAAC,KAAc,EAAE,EAAE;IACvC,OAAO,eAAK,CAAC,MAAM,CAAC;QAClB,OAAO,EAAE,gBAAM,CAAC,QAAQ;QACxB,OAAO,EAAE;YACP,aAAa,EAAE,SAAS,KAAK,EAAE;SAChC;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAPW,QAAA,MAAM,UAOjB;AAEF,kBAAe,IAAA,cAAM,EAAC,gBAAM,CAAC,QAAQ,CAAC,gBAAM,CAAC,WAAW,EAAE,gBAAM,CAAC,QAAQ,CAAC,CAAC,CAAC"}