@jobber/generators 0.6.1-pre.28 → 0.7.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/GetJobber/atlantis/compare/@jobber/generators@0.6.0...@jobber/generators@0.7.0) (2023-02-23)
+
+
+### Features
+
+* **generators:** JOB-62646 Update generator to create storybook file ([#1063](https://github.com/GetJobber/atlantis/issues/1063)) ([7347292](https://github.com/GetJobber/atlantis/commit/734729221c8c6331ddbfbb5b84692a504b270e67))
+
+
+
+
+
 # [0.6.0](https://github.com/GetJobber/atlantis/compare/@jobber/generators@0.5.1...@jobber/generators@0.6.0) (2023-02-07)
 
 

package/index.js

@@ -7,7 +7,7 @@ module.exports = function (plop, config) {
   const { basePath, templateGlob } = Object.assign(
     {
       basePath: "packages/components/src",
-      templateGlob: "*",
+      templateGlob: "!(*.stories.*)",
     },
     config || {},
   );
@@ -30,6 +30,23 @@ module.exports = function (plop, config) {
         default: basePath,
         directoryOnly: true,
       },
+      {
+        type: "expand",
+        name: "storybook",
+        message: "Create Storybook mdx?",
+        choices: [
+          {
+            key: "y",
+            name: "Yes",
+            value: "yes",
+          },
+          {
+            key: "n",
+            name: "No",
+            value: "no",
+          },
+        ],
+      },
     ],
     actions: [
       /**
@@ -46,6 +63,18 @@ module.exports = function (plop, config) {
         base: "templates/component",
         templateFiles: `templates/component/${templateGlob}`,
       },
+      {
+        type: "addMany",
+        destination: `{{path}}/{{name}}/`,
+        base: "templates/component",
+        templateFiles: `templates/component/*.stories.*`,
+        skip(data) {
+          if (data.storybook !== "yes") {
+            return "Not adding storybook file";
+          }
+          return;
+        },
+      },
     ],
   });
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@jobber/generators",
-  "version": "0.6.1-pre.28+9e3affe9",
+  "version": "0.7.0",
   "license": "MIT",
   "main": "index.js",
   "scripts": {},
   "dependencies": {
     "inquirer-path": "^1.0.0-beta5"
   },
-  "gitHead": "9e3affe9bf5a4eb6392fbbc672bbb550254a95e3"
+  "gitHead": "80ab88b320ffbb94af1dfd20c055ebd771c4bcaa"
 }

package/templates/component/{{name}}.stories.{{mdx}}

@@ -0,0 +1,99 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { {{name}} } from ".";
+import { Figma } from "storybook-addon-designs/blocks";
+
+
+# {{ titleCase name }}
+
+<Meta title="Components/{{ name }}" component={ {{ name }} } />
+
+```ts
+import { {{ name }} } from "@jobber/components/{{ name }}";
+```
+
+<Canvas>
+  <Story name="{{ name }}" args={ { "text": "Bob"} }>
+    {args => <{{ name }} {...args} />}
+  </Story>
+</Canvas>
+
+<!--
+  INTERFACE: This is for the proposal stage of the component
+
+  Provide an example of what the component looks like in code. How would you use
+  it from another React component? This should consist primarily of code blocks.
+  This section can be deleted once the component is built, when the Playground
+  will demonstrate this at a higher fidelity.
+-->
+
+## Props
+
+<ArgsTable of={ {{ name }} } story="{{ name }}" />
+
+<!--
+  It is not necessary to provide an example of each prop. Use usage examples to
+  highlight key features of a component or particular considerations.
+
+  See `Button.mdx` for a good example of this.
+-->
+
+## Usage guidelines
+
+The `<{{name}}>` will... _Add a brief description of the component_
+
+<!--
+  What is the design purpose of this component? How do its responsibilities
+  relate to other components? What should this component not be used for? What
+  are some related components in Atlantis? Try to describe this component not
+  in terms of what it looks like or what elements make it up, but what function
+  it performs or how it enables a user to perform tasks (e.g. “Buttons allow users
+  to initiate, complete, and reverse actions.” vs “Buttons are rectangular elements
+  that have a green background and white text”).
+-->
+
+## Content guidelines
+
+<!--
+  What type of content does this component present (documents, text, images, other components)?
+  What is the recommended, or expected, amount of content? What is the components’ behaviour when
+  the provided content diverges from what is expected (image aspect ratio, amount of text, video
+  vs audio, filesize)? Are there any important references to the [Product Vocabulary](https://atlantis.getjobber.com/guides/product-vocabulary)
+  that should be made regarding this component? What happens when content is unavailable or unreliable
+  (poor connection, empty states, flaky GPS data?)
+-->
+
+## Accessibility
+
+<!--
+  Describe the accessibility concerns for the component. How does it handle touch vs cursor vs
+  keyboard events? Should it capture input? What should a screen reader see when it's focuse?
+-->
+
+## Responsiveness
+
+<!--
+  How should the component behave on an iPhone 8? An iPad? A 1920x1080 monitor? How does the
+  component appear when the component itself is less than 375px wide? Less than 640px wide?
+  Less than 1200px wide? Greater than 1200px? Does it change when the device DPI is higher
+  or lower?
+-->
+
+## Mockup
+
+<Figma collapsable />
+
+<!--
+  Insert a Figma mockup from the [Design System Contribution template](https://www.figma.com/file/3BXCXXD9glMtj8RAHjXiQC/Design-System-Contribution-TEMPLATE?node-id=26%3A2)
+  that conveys the visual design of the component, with variants and state accounted for.
+  Consider progressive enhancement; might this rely on newer browser features that aren’t
+  widely supported yet?
+-->
+
+## Notes
+
+<!--
+  What decisions worth remembering have gone into this component? Did we consider any potentially valuable
+  functionality that we’re not implementing right now for scope purposes? Are there any design decisions
+  that might need explaining beyond the usage guidelines? This will help consumers understand this component
+  more fully.
+-->