component generator: correcting template and thor tasks to account for component status

[mxriverlynn]

the problem

while exploring the view components code and learning how it works, how to build components, etc, i ran into some issues with the component_generator thor command:

• the component status was not set correctly by the component.tt template. it was hard coded to :alpha
• the component namespace was not set correctly in the component.tt yard doc example. status based namespace was missing
• the gatsby nav.yml file was not updated to include the newly generate component. errors out saying supplied flag value not found

these issues resulted in failure to build or run the view components web app, due to the incorrect or missing status.

the fixes

this PR corrects the issues above with these changes:

• update component.tt template to ensure the correct status is used for both alpha and beta states
• update the module/namespace used in the @Example generated by the component.tt template
• corrects the component_generator.thor file to correct the after: setting for inserting the new component into the nav.yml file

with these changes, i am able to generate a new component with the correct status and namespace, having it update the nav.yml file correctly:

example output

generate component with no flags:

❯ bundle exec thor component_generator sample_thing

      create  app/components/primer/alpha/sample_thing.rb
      create  app/components/primer/alpha/sample_thing.html.erb
      create  test/components/primer/alpha/sample_thing_test.rb
      create  test/components/previews/alpha/sample_thing_preview.rb
      insert  lib/tasks/docs.rake
      insert  test/components/component_test.rb
      insert  docs/src/@primer/gatsby-theme-doctocat/nav.yml

generate component with status flag:

❯ bundle exec thor component_generator sample_thing --status beta

      create  app/components/primer/beta/sample_thing.rb
      create  app/components/primer/beta/sample_thing.html.erb
      create  test/components/primer/beta/sample_thing_test.rb
      create  test/components/previews/beta/sample_thing_preview.rb
      insert  lib/tasks/docs.rake
      insert  test/components/component_test.rb
      insert  docs/src/@primer/gatsby-theme-doctocat/nav.yml

generate component with status flag and js flag

❯ bundle exec thor component_generator sample_thing --status beta --js

      create  app/components/primer/beta/sample_thing.rb
      create  app/components/primer/beta/sample_thing.html.erb
      create  test/components/primer/beta/sample_thing_test.rb
      create  test/system/beta/sample_thing_test.rb
      create  demo/test/components/previews/primer/beta/sample_thing_preview.rb
      create  test/components/previews/beta/sample_thing_preview.rb
      insert  lib/tasks/docs.rake
      insert  lib/tasks/docs.rake
      insert  test/components/component_test.rb
      insert  docs/src/@primer/gatsby-theme-doctocat/nav.yml
      create  app/components/primer/beta/sample_thing.ts
      append  app/components/primer/primer.ts

         run  yarn add js from "."
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
...

screenshots

screenshot showing sample thing component in localhost:5400, generated with --status beta --js flags. shows the correct status, the correct message in the sidebar telling the developer to edit the nav file, and the correct namespace with running example in the page

[changeset-bot]

🦋 Changeset detected

Latest commit: 55199d1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jonrohan]

This is great! I just ran into this problem yesterday, like you read my mind. 💜