search

GetJobber / atlantis

🔱 Atlantis
https://atlantis.getjobber.com
MIT License
27 stars 30 forks source link

docs(components): Adding Avatar to Docs #2127

Open scotttjob opened 5 days ago

scotttjob commented 5 days ago

Motivations

We wanted a PR to show the minimum required effort to import a component into the new docs site.

This PR is the Avatar component, and the steps to import are below (with a lot of additional info and thoughts):

  1. Added an entry matching the component name (Avatar) (parent folder name 1:1) in packages/site/src/generateDocs.mjs. This is currently a manual process, but may be replaced with an automatic step in the future.
  2. Add an entry to packages/site/src/componentList.ts that matches the others. Feel free to provide aliases or synonyms for your component that you're familiar with to the additionalMatches array. There are other examples in the file already.
  3. Add a new folder under packages/site/src/content that matches the name you used in step 1. In the case of this PR, it was Avatar.
  4. In that new folder under packages/site/src/content/<YOUR_COMPONENT> add a new index.ts and from within the file: Engage the vscode snippets (CMD + Shift + P): Snippets: Insert Snippet and you should see (or can search for) componentTemplate. Select that option.
  5. Fill in the name of the component you used in Step 1 and Step 3. The VSCode snippet tool will automatically change the locations in the file where you need to fill in the name of your component.
  6. Add an entry for your new component in the packages/site/src/content/index.ts file so the application can find your new component. This process may be automated in the future.

Some Notes

We're currently leaving the built props files in the repo (so they're part of this PR). This was a shortcut. It will most likely be changed soon, and we'll have the build process cached for the file generation step. If it was instant it would already be the case, but it takes a bit of time to generate the props so didn't want to bog down every build with a costly generation step before we could implement it properly.

There are some mobile considerations in the codebase already, but a big remaining todo item to proper support for all our mobile components. So a note that the steps above should be for components for Web (at least for now)

Changes

Added the Avatar component to the new docs site.

Testing

Run the docs site from the packages/site directory with npm run dev. You should see an 'Avatar' option after clicking on Components.

Changes can be tested via Pre-release

In Atlantis we use Github's built in pull request reviews.

Random photo of Atlantis