chore(template): update yarn new (#1080)

* chore(template): update yarn new * Return promises for Promise.all
zendeskgarden · May 4, 2021 · 72d6a8f · 72d6a8f
1 parent 6ebea50
commit 72d6a8f
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 57 deletions.
diff --git a/packages/.template/README.md b/packages/.template/README.md
@@ -14,7 +14,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
-```jsx static
+```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Example } from '@zendeskgarden/react-{{component}}';
 

diff --git a/packages/.template/examples/basic.md b/packages/.template/examples/basic.md
diff --git a/packages/.template/package.json b/packages/.template/package.json
@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "polished": "^4.0.0",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",

diff --git a/packages/.template/stories/1-Readme.stories.mdx b/packages/.template/stories/1-Readme.stories.mdx
@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs/blocks';
+import README from '../README.md';
+
+<Meta title="Components/{{componentName}}/README" />
+
+<Description>{README}</Description>
diff --git a/packages/.template/stories/2-Example.stories.tsx b/packages/.template/stories/2-Example.stories.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Grid, Row, Col } from '@zendeskgarden/react-grid';
+import { Well } from '@zendeskgarden/react-notifications';
+import { Toggle, Field, Input, Label } from '@zendeskgarden/react-forms';
+import { Example } from '@zendeskgarden/react-{{component}}';
+
+export default {
+  title: 'Components/{{componentName}}/Example',
+  component: Example
+} as Meta;
+
+export const Default: Story = () => {
+  const [compact, setCompact] = React.useState(false);
+  const [text, setText] = React.useState('');
+
+  const style = { width: 300 };
+
+  return (
+    <Grid>
+      <Row>
+        <Col>
+          <Well isRecessed style={style}>
+            <Field>
+              <Label>Text</Label>
+              <Input isCompact value={text} onChange={event => setText(event.target.value)} />
+            </Field>
+            <Field className="u-mt-xs">
+              <Toggle checked={compact} onChange={event => setCompact(event.target.checked)}>
+                <Label>Compact</Label>
+              </Toggle>
+            </Field>
+          </Well>
+        </Col>
+        <Col>
+          <Example isCompact={compact}>
+            <span>{text}</span>
+          </Example>
+        </Col>
+      </Row>
+    </Grid>
+  );
+};
+
+Default.parameters = {
+  docs: {
+    description: {
+      component: `
+A description of the {{component}} component.
+`
+    }
+  }
+};
diff --git a/utils/scripts/new.js b/utils/scripts/new.js
@@ -16,6 +16,7 @@ const path = require('path');
 const fs = require('fs-extra');
 const childProcess = require('child_process');
 const handlebars = require('handlebars');
+const prettier = require('prettier');
 
 /**
  * Register handlebars template helper utilities
@@ -24,6 +25,10 @@ require('handlebars-helpers')({
   handlebars
 });
 
+const tsconfigPath = path.resolve(__dirname, '..', '..', 'tsconfig.json');
+
+const tsconfig = require(tsconfigPath);
+
 const welcomeSplashScreen = () => {
   console.log(pelorous('#################################'));
   console.log(pelorous(`#### ${chalk.white('Garden - Create Package')} ####`));
@@ -80,22 +85,53 @@ const updateReadme = ({ packageName }) => {
   });
 };
 
-const updateStyleguideConfig = ({ packageName }) => {
-  const styleguideConfigPath = path.resolve(
+const updateStoryReadme = ({ packageName }) => {
+  const storyPath = path.resolve(
     __dirname,
     '..',
     '..',
     'packages',
     packageName,
-    'styleguide.config.js'
+    'stories',
+    '1-Readme.stories.mdx'
   );
 
-  return fs.readFile(styleguideConfigPath, 'utf-8').then(originalStyleguideConfigContent => {
-    const template = handlebars.compile(originalStyleguideConfigContent);
-    const newStyleguideConfigContent = template({ component: packageName });
+  return fs
+    .readFile(storyPath, 'utf-8')
+    .then(originalStory => {
+      const template = handlebars.compile(originalStory);
+      const newStoryContent = template({
+        componentName: packageName.charAt(0).toUpperCase() + packageName.slice(1)
+      });
+
+      return fs.writeFile(storyPath, newStoryContent);
+    })
+    .catch(console.error);
+};
 
-    return fs.writeFile(styleguideConfigPath, newStyleguideConfigContent);
-  });
+const updateStory = ({ packageName }) => {
+  const storyPath = path.resolve(
+    __dirname,
+    '..',
+    '..',
+    'packages',
+    packageName,
+    'stories',
+    '2-Example.stories.tsx'
+  );
+
+  return fs
+    .readFile(storyPath, 'utf-8')
+    .then(originalStory => {
+      const template = handlebars.compile(originalStory);
+      const newStoryContent = template({
+        component: packageName,
+        componentName: packageName.charAt(0).toUpperCase() + packageName.slice(1)
+      });
+
+      return fs.writeFile(storyPath, newStoryContent);
+    })
+    .catch(console.error);
 };
 
 const performLernaBootstrap = ({ packageName }) => {
@@ -121,7 +157,8 @@ retrievePrompts()
     return Promise.all([
       updatePackageJson({ packageName }),
       updateReadme({ packageName }),
-      updateStyleguideConfig({ packageName })
+      updateStory({ packageName }),
+      updateStoryReadme({ packageName })
     ]).then(() => {
       console.log(
         chalk.green(
@@ -134,11 +171,22 @@ retrievePrompts()
   })
   .then(performLernaBootstrap)
   .then(({ packageName }) => {
-    console.log(
-      pelorous(
-        `Start local development with: "${chalk.white(
-          `yarn start --scope @zendeskgarden/react-${packageName}`
-        )}"`
-      )
+    tsconfig.compilerOptions.paths[`@zendeskgarden/react-${packageName}`] = [
+      `./packages/${packageName}/src/index.ts`
+    ];
+
+    fs.writeFile(
+      tsconfigPath,
+      prettier.format(JSON.stringify(tsconfig), {
+        parser: 'json',
+        printWidth: 100
+      }),
+      err => {
+        if (err) console.error(err);
+      }
     );
-  });
+  })
+  .then(() => {
+    console.log(pelorous(`Start local development with: "${chalk.white('yarn start')}"`));
+  })
+  .catch(console.error);