@jobber/generators 0.7.3-rc.46 → 0.8.0

package/CHANGELOG.md

@@ -1,8 +1,19 @@
-# Changelog
+# Change Log
 
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/GetJobber/atlantis/compare/@jobber/generators@0.7.2...@jobber/generators@0.8.0) (2023-08-11)
+
+
+### Features
+
+* Upgrade to Node 18 [Feature Branch][JOB-62820] ([#1141](https://github.com/GetJobber/atlantis/issues/1141)) ([8b766cd](https://github.com/GetJobber/atlantis/commit/8b766cd1ebb215610ff3b0babe5d1f05540872b6)), closes [#1142](https://github.com/GetJobber/atlantis/issues/1142) [#1149](https://github.com/GetJobber/atlantis/issues/1149) [#1150](https://github.com/GetJobber/atlantis/issues/1150)
+
+
+
+
+
 ## [0.7.2](https://github.com/GetJobber/atlantis/compare/@jobber/generators@0.7.1...@jobber/generators@0.7.2) (2023-02-28)
 
 **Note:** Version bump only for package @jobber/generators

package/index.js

@@ -23,6 +23,25 @@ module.exports = function (plop, config) {
         name: "name",
         message: "Component Name:",
       },
+      {
+        type: "list",
+        name: "type",
+        message: "Generate for:",
+        choices: [
+          {
+            name: "Web",
+            value: "web",
+          },
+          {
+            name: "React native",
+            value: "native",
+          },
+          {
+            name: "Both",
+            value: "both",
+          },
+        ],
+      },
       {
         type: "path",
         name: "path",
@@ -31,21 +50,70 @@ module.exports = function (plop, config) {
         directoryOnly: true,
       },
     ],
-    actions: [
-      /**
-       * Gatsby is insisting on at least opening every file ending in `.mdx`.
-       * This allows us to name the template file {{name}}.{{mdx}} and have
-       * plop rename it to Component.mdx when it runs.
-       *
-       * https://plopjs.com/documentation/#addmany
-       */
-      answers => Object.assign(answers, { mdx: "mdx" }),
-      {
-        type: "addMany",
-        destination: `{{path}}/{{name}}/`,
-        base: "templates/component",
-        templateFiles: `templates/component/${templateGlob}`,
-      },
-    ],
+    actions: answers => {
+      Object.assign(answers, { mdx: "mdx", tsx: "tsx" });
+      const actions = [];
+
+      if (answers.type === "web") {
+        actions.push(
+          {
+            type: "addMany",
+            destination: `{{path}}/{{name}}/`,
+            base: "templates/component",
+            templateFiles: `templates/component/${templateGlob}`,
+          },
+          {
+            type: "addMany",
+            destination: `docs/components/{{name}}/`,
+            base: "templates/docs",
+            templateFiles: `templates/docs/!(Mobile)*`,
+          },
+        );
+      } else if (answers.type === "native") {
+        actions.push(
+          {
+            type: "addMany",
+            destination: `packages/components-native/src/{{name}}/`,
+            base: "templates/component-native",
+            templateFiles: `templates/component-native/${templateGlob}`,
+          },
+          {
+            type: "addMany",
+            destination: `docs/components/{{name}}/`,
+            base: "templates/docs",
+            templateFiles: `templates/docs/!(Web)*`,
+          },
+          mobileReminder,
+        );
+      } else {
+        actions.push(
+          {
+            type: "addMany",
+            destination: `{{path}}/{{name}}/`,
+            base: "templates/component",
+            templateFiles: `templates/component/${templateGlob}`,
+          },
+          {
+            type: "addMany",
+            destination: `packages/components-native/src/{{name}}/`,
+            base: "templates/component-native",
+            templateFiles: `templates/component-native/${templateGlob}`,
+          },
+          {
+            type: "addMany",
+            destination: `docs/components/{{name}}/`,
+            base: "templates/docs",
+            templateFiles: `templates/docs/${templateGlob}`,
+          },
+          mobileReminder,
+        );
+      }
+
+      return actions;
+    },
   });
 };
+
+function mobileReminder() {
+  return "🎉 Mobile Component created!. Remember to add the new component's export to packages/components-native/src/index.ts";
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@jobber/generators",
-  "version": "0.7.3-rc.46+f2d509e4",
+  "version": "0.8.0",
   "license": "MIT",
   "main": "index.js",
   "scripts": {},
   "dependencies": {
     "inquirer-path": "^1.0.0-beta5"
   },
-  "gitHead": "f2d509e41433cee216fc2320b05d783a0e9458cf"
+  "gitHead": "b94758cdc707512c2b57b9317fb2cfc961c77908"
 }

package/templates/component-native/index.ts

@@ -0,0 +1 @@
+export { {{name}} } from "./{{name}}";

package/templates/component-native/{{name}}.style.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  bold: {
+    fontWeight: "bold",
+  },
+});

package/templates/component-native/{{name}}.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { cleanup, render } from "@testing-library/react-native";
+
+afterEach(cleanup);
+
+
+it("renders a {{name}}", () => {
+  const { getByText } = render(< {{ name }} text = "Foo" />);
+  expect(getByText("Foo")).toBeTruthy();
+});

package/templates/component-native/{{name}}.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Text } from "react-native";
+import { styles } from "./{{name}}.style";
+
+interface {{name}}Props {
+  /**
+   * Text to display.
+   */
+  readonly text: string;
+}
+
+export function {{name}}({ text }: {{name}}Props) {
+  return <Text style={styles.bold}>{text}</Text>
+}

package/templates/docs/Mobile.stories.{{tsx}}

@@ -0,0 +1,20 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { {{name}} } from "@jobber/components-native";
+
+export default {
+  title: "Components/Category/{{name}}/Mobile",
+  component: {{name}},
+  parameters: {
+    viewMode: "story",
+    previewTabs: { code: { hidden: false } },
+    viewport: { defaultViewport: "mobile1" },
+  },
+} as ComponentMeta<typeof {{name}}>;
+
+const BasicTemplate: ComponentStory<typeof {{name}}> = args => (
+  <{{name}} {...args} />
+);
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {};

package/templates/docs/Web.stories.{{tsx}}

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { {{name}} } from "@jobber/components/{{name}}";
+
+export default {
+  title: "Components/Category/{{name}}/Web",
+  component: {{name}},
+  parameters: {
+    viewMode: "story",
+    previewTabs: { code: { hidden: false } },
+  },
+} as ComponentMeta<typeof {{name}}>;
+
+const BasicTemplate: ComponentStory<typeof {{name}}> = args => (
+  <{{name}} {...args} />
+);
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {};

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

@@ -1,65 +1,57 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { {{name}} } from ".";
+import { Meta } from "@storybook/addon-docs";
 import { Figma } from "storybook-addon-designs/blocks";
 
-
 # {{ titleCase name }}
 
-<Meta title="Components/{{ name }}" component={ {{ name }} } />
+<Meta title="Components/Category/{{ name }}/Docs" />
 
-```ts
-import { {{ name }} } from "@jobber/components/{{ name }}";
-```
+## Design & usage guidelines
 
-<Canvas>
-  <Story name="{{ name }}" args={ { "text": "Bob"} }>
-    {args => <{{ name }} {...args} />}
-  </Story>
-</Canvas>
+The {{name}} will... _Add a brief description of the design and usage of the component_
 
 <!--
-  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.
+  What is the design purpose of this component? How do its responsibilities
+  relate to other components? What should this component not be used for?
+  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”).
 -->
 
-## Props
-
-<ArgsTable of={ {{ name }} } story="{{ name }}" />
+## Content guidelines
 
 <!--
-  It is not necessary to provide an example of each prop. Use usage examples to
-  highlight key features of a component or particular considerations.
+  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?)
+-->
+
+## Related components
 
-  See `Button.mdx` for a good example of this.
+<!--
+  What are some related components in Atlantis?
 -->
 
-## Usage guidelines
+## Related patterns
+
+<!--
+  Is there a pattern related to this component?
+-->
 
-The `<{{name}}>` will... _Add a brief description of the component_
+## Related resources
 
 <!--
-  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”).
+  Is there any related resource (internal or external) to this component?
 -->
 
-## Content guidelines
+## Platform considerations
 
 <!--
-  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?)
+  Mostly for mobile components. Is there something that applies only for Android/iOS or
+  is browser-specific?
 -->
 
 ## Accessibility