chore: add plop for generating component files from a template #366
Conversation
There was a problem hiding this comment.
size-limit report
| Path | Size |
|---|---|
| components | 4.68 KB (+15.6% 🔺) |
| styles | 3.81 KB (0%) |
Codecov Report
@@ Coverage Diff @@
## main #366 +/- ##
=======================================
Coverage 85.39% 85.39%
=======================================
Files 8 8
Lines 89 89
Branches 37 37
=======================================
Hits 76 76
Partials 13 13 Continue to review full report at Codecov.
|
168ac37 to
fdc89e8
Compare
packages/components/src/TestComponent/TestComponent.stories.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/TestComponent/__snapshots__/TestComponent.spec.tsx.snap
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
size-limit report
| Path | Size |
|---|---|
| components | 4.68 KB (+15.7% 🔺) |
| styles | 3.81 KB (0%) |
| type: "add", | ||
| path: | ||
| "packages/components/src/{{pascalCase name}}/{{pascalCase name}}.module.css", | ||
| templateFile: "plop-templates/Component/Component.module.css.hbs", | ||
| }, |
There was a problem hiding this comment.
This section is the only change I made in this file from the original PR #309
| @@ -0,0 +1,24 @@ | |||
| import * as React from "react"; | |||
| import { Story } from "@storybook/react/types-6-0"; | |||
| import TestComponent from "./TestComponent"; | |||
There was a problem hiding this comment.
NOTE: This import is not automatically alphabetized by the generator, so, in this case, I had to manually move the component import down one line to be below Story.
There was a problem hiding this comment.
dang that's mildly annoying. we do have a lint sort-imports rule setup but I'm not sure it can auto-fix 🤔 def can be a future followup
There was a problem hiding this comment.
Should I make a ticket?
There was a problem hiding this comment.
that'd be great, thanks! we can put it in the DS: Strategy/Infra epic
There was a problem hiding this comment.
There was a problem hiding this comment.
There is an autofix version though https://www.npmjs.com/package/eslint-plugin-simple-import-sort.
| import classNames from "classnames/bind"; | ||
| import styles from "./{{pascalCase name}}.module.css"; | ||
|
|
||
| const cx = classNames.bind(styles); |
There was a problem hiding this comment.
things be changing every day 😅 It seems we're all on board with camelcase classnames and replacing classNames.bind with clsx (and you wouldn't need to worry about paramCase)
There was a problem hiding this comment.
😞 sorry for flip flopping - I think we're set now with camelCase + clsx (#362 option 3)
There was a problem hiding this comment.
Np! It's expected while these things are still being settled.
There was a problem hiding this comment.
size-limit report
| Path | Size |
|---|---|
| components | 4.94 KB (+14.24% 🔺) |
| styles | 3.81 KB (0%) |
| @@ -0,0 +1,24 @@ | |||
| import * as React from "react"; | |||
| import { Story } from "@storybook/react/types-6-0"; | |||
| import TestComponent from "./TestComponent"; | |||
There was a problem hiding this comment.
dang that's mildly annoying. we do have a lint sort-imports rule setup but I'm not sure it can auto-fix 🤔 def can be a future followup
|
Broken test is the snapshot, which I'm going to remove anyway. |
There was a problem hiding this comment.
size-limit report
| Path | Size |
|---|---|
| components | 4.24 KB (0%) |
| styles | 3.81 KB (0%) |
Summary
This PR adds a command line feature that allows developers to easily generate template files for creating a new component. This change is heavily based on #309
Video
plop1.mp4
Test Plan:
In your terminal, in the
edu-design-systemdirectory, runplop(ornpx plop),verify you're asked for a component name,
type in two words separated by a space,
and verify you're told the script succeeded with 6 actions.
Navigate to storybook,
verify a component with the name you input (now with pascal case) is present in the list,
and verify there are 2 stories, one with purple text on the left and one with purple text on the right.
Open your text editor,
verify a directory in
srcnow exists with your component name (in pascal case),check out the files inside,
verify they match the
PlopTestfiles (with your component name used instead of "PlopTest"),open
packages/components/src/index.ts,and verify your component is now listed as an export.