[Backend] Diff Command

[Nathan-Papa]

Description:

We want to create a CLI that allows our users to download our components and themes directly into their projects. An important command we will need is a "diff" command that serves as a way for our users to be able to automatically update their local BoG components to match the current version (in case of any updates). Please read everything below, there is some crucial information about using the base CLI for testing and helpful documentation at the bottom.

Acceptance Criteria:

• src/cli/src/commands/diff.ts:
  • Command initially asks user for the location of their component directory (prompt them that this is where the components from the design system should be, and that if the component folders have been renamed, our command will not find the components to check). This path should be required.
  • Command scans the folder at the inputted path for folders that match BoG component folders (for example, look for BogCheckbox, BogIcon, etc.)
    • For each found folder, scan the files within it to see if there are any differences to what is on the production branch of our GitHub repository
      • If there are any differences ask the user if they would like to upgrade to the current version
        • If a 'y' is inputted, the local folder gets overwritten so it matches the folder on our remote branch and then continues executing
        • If no, command continues executing
      • At the end, command gives a short summary of what components were upgraded
        • If none were upgraded, command outputs a special message stating that

Testing Recommendations

I would try running this command with an empty components folder, a folder with updated components, and a folder where you've removed a line or something from a couple of components and see if they get correctly updated.

CLI Test Usage

Setup:

1. Go to src/cli
2. Run npm i
3. Run npm run dev
4. Run npm run link
5. Now from anywhere in the project you can run our commands as cli-test init/add/diff

Important Tips/Context:

• For your changes to be reflecting in what you are running locally, you must follow the below steps before running any of the commands:

  1. Go to the src/cli folder
  2. Run npm run dev
  3. Run npm run link

• When implementing your ticket, make sure you are coding in the src/cli/src/commands folder (in the .ts files). To give some context, commander was being very weird with .ts files, so npm run dev in this directory takes all of the .ts files and outputs them as their .js counterparts in the src/cli/dist folder. The files in the src/cli/dist folder is what is actually being run, but you should be developing on the .ts files in src/cli/src/commands.

Resources:

To be completely honest, I don't know exactly what packages are the best packages to use. However, when thinking about the individual criteria for this command, use shadcn's add command as an outline.

Shadcn's diff command: https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/diff.ts

I also recommend looking at the Commander documentation as this is what we will use to actually support our commands. Feel free to look up other resources and model your commands after theirs.

https://www.npmjs.com/package/commander/v/12.0.0?activeTab=readme

I also used this youtube video to set up the environment, so if anything existing is confusing or if you want someone to explain some of the concepts to you, use this video:

https://www.youtube.com/watch?v=mSnDUMybZXk