@carbon/cli 10.29.0

package/src/commands/sync/readme.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2019, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const fs = require('fs-extra');
+const path = require('path');
+const prettier = require('prettier');
+const prettierConfig = require('prettier-config-carbon');
+const createRemark = require('remark');
+const monorepo = require('./remark/remark-monorepo');
+
+const packageDenyList = new Set([
+  'carbon-components',
+  'carbon-components-react',
+  '@carbon/react',
+  '@carbon/sketch',
+  '@carbon/styles',
+]);
+
+function run({ root, packagePaths }) {
+  const remark = createRemark().use(monorepo, {
+    root: root.directory,
+  });
+  const prettierOptions = {
+    ...prettierConfig,
+    parser: 'markdown',
+  };
+
+  return Promise.all(
+    packagePaths
+      .filter((pkg) => !packageDenyList.has(pkg.packageJson.name))
+      .map(async ({ packagePath }) => {
+        const README_PATH = path.join(packagePath, 'README.md');
+        if (!(await fs.pathExists(README_PATH))) {
+          return;
+        }
+
+        const readme = await fs.readFile(README_PATH, 'utf8');
+        const file = await process(remark, packagePath, readme);
+        await fs.writeFile(
+          README_PATH,
+          prettier.format(String(file), prettierOptions)
+        );
+      })
+  );
+}
+
+function process(remark, cwd, contents) {
+  return new Promise((resolve, reject) => {
+    remark.process({ cwd, contents }, (error, file) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve(file);
+    });
+  });
+}
+
+module.exports = {
+  name: 'readme',
+  run,
+};

package/src/commands/sync/remark/remark-monorepo.js

@@ -0,0 +1,425 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const fs = require('fs-extra');
+const path = require('path');
+
+function monorepo() {
+  async function transformer(tree, file) {
+    const { cwd } = file;
+    const localPackageJsonPath = path.join(cwd, 'package.json');
+    const localPackageJson = await fs.readJson(localPackageJsonPath);
+    const { name, description } = localPackageJson;
+
+    if (!name) {
+      return new Error(
+        `Expected a name to be defined for the package at: ${cwd}`
+      );
+    }
+    if (!description) {
+      return new Error(
+        `Expected a description to be defined for the package at: ${cwd}`
+      );
+    }
+
+    // Grab all sections under `## Usage` as these are custom for each project
+    const usage = [];
+    let usageHeadingFound = false;
+
+    for (const child of tree.children) {
+      if (usageHeadingFound) {
+        if (child.type === 'heading' && child.depth <= 2) {
+          break;
+        }
+        usage.push(child);
+      }
+
+      if (
+        child.type === 'heading' &&
+        child.depth === 2 &&
+        child.children[0].value === 'Usage'
+      ) {
+        usageHeadingFound = true;
+        usage.push(child);
+      }
+    }
+
+    // [x] Title
+    // [x] Getting Started
+    // [x] Usage
+    // [x] Examples
+    // [ ] Contributors
+    // [x] Contributing
+    // [x] License
+    // eslint-disable-next-line require-atomic-updates
+    tree.children = [
+      ...createTitle(localPackageJson.name, localPackageJson.description),
+      ...createGettingStarted(localPackageJson.name),
+      ...usage,
+      ...(await createAPIDoc(localPackageJson.name, path.join(cwd, 'docs'))),
+      ...(await createExamples(
+        localPackageJson.name,
+        path.join(cwd, 'examples')
+      )),
+      ...createContributing(),
+      ...createLicense(),
+    ];
+  }
+
+  return transformer;
+}
+
+function createTitle(name, description) {
+  return [
+    {
+      type: 'heading',
+      depth: 1,
+      children: [
+        {
+          type: 'text',
+          value: name,
+        },
+      ],
+    },
+    {
+      type: 'blockquote',
+      children: [
+        {
+          type: 'paragraph',
+          children: [
+            {
+              type: 'text',
+              value: description,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}
+
+function createGettingStarted(name) {
+  return [
+    {
+      type: 'heading',
+      depth: 2,
+      children: [
+        {
+          type: 'text',
+          value: 'Getting started',
+        },
+      ],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value: 'To install ',
+        },
+        {
+          type: 'inlineCode',
+          value: name,
+        },
+        {
+          type: 'text',
+          value:
+            ' in your project, you will need to run the following command using ',
+        },
+        {
+          type: 'link',
+          title: null,
+          url: 'https://www.npmjs.com/',
+          children: [
+            {
+              type: 'text',
+              value: 'npm',
+            },
+          ],
+        },
+        {
+          type: 'text',
+          value: ':',
+        },
+      ],
+    },
+    {
+      type: 'code',
+      lang: 'bash',
+      value: `npm install -S ${name}`,
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value: 'If you prefer ',
+        },
+        {
+          type: 'link',
+          title: null,
+          url: 'https://yarnpkg.com/en/',
+          children: [
+            {
+              type: 'text',
+              value: 'Yarn',
+            },
+          ],
+        },
+        {
+          type: 'text',
+          value: ', use the following command\ninstead:',
+        },
+      ],
+    },
+    {
+      type: 'code',
+      lang: 'bash',
+      meta: null,
+      value: `yarn add ${name}`,
+    },
+  ];
+}
+
+async function createAPIDoc(name, docsDir) {
+  // No docs to list
+  if (!(await fs.pathExists(docsDir))) {
+    return [];
+  }
+
+  const docs = (await fs.readdir(docsDir)).filter((name) => {
+    // Ignore dotfiles and json files
+    return !(name[0] === '.' || name === 'sass.json');
+  });
+
+  if (docs.length === 0) {
+    return [];
+  }
+
+  return [
+    {
+      type: 'heading',
+      depth: 2,
+      children: [
+        {
+          type: 'text',
+          value: '📖 API Documentation',
+        },
+      ],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value: "If you're looking for ",
+        },
+        {
+          type: 'inlineCode',
+          value: name,
+        },
+        {
+          type: 'text',
+          value: ' API documentation, check out:',
+        },
+      ],
+    },
+    {
+      type: 'list',
+      ordered: false,
+      spread: false,
+      children: docs.map((doc) => ({
+        type: 'listItem',
+        spread: false,
+        checked: null,
+        children: [
+          {
+            type: 'paragraph',
+            children: [
+              {
+                type: 'link',
+                title: null,
+                url: `./docs/${doc}`,
+                children: [
+                  {
+                    type: 'text',
+                    value: `${
+                      doc[0].toUpperCase() +
+                      doc.slice(1).replace(/\.[^/.]+$/, '')
+                    }`,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      })),
+    },
+  ];
+}
+
+async function createExamples(name, examplesDir) {
+  // No examples to list
+  if (!(await fs.pathExists(examplesDir))) {
+    return [];
+  }
+
+  const examples = (await fs.readdir(examplesDir)).filter((name) => {
+    // Ignore dotfiles and special cases `codesandbox` and `storybook`
+    return !(
+      name[0] === '.' ||
+      name === 'codesandbox' ||
+      name === 'storybook' ||
+      name === 'preview'
+    );
+  });
+
+  if (examples.length === 0) {
+    return [];
+  }
+
+  return [
+    {
+      type: 'heading',
+      depth: 2,
+      children: [
+        {
+          type: 'text',
+          value: '📚 Examples',
+        },
+      ],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value: "If you're looking for more examples on how to use ",
+        },
+        {
+          type: 'inlineCode',
+          value: name,
+        },
+        {
+          type: 'text',
+          value: ', we have some examples that you can check out:',
+        },
+      ],
+    },
+    {
+      type: 'list',
+      ordered: false,
+      spread: false,
+      children: examples.map((example) => ({
+        type: 'listItem',
+        spread: false,
+        checked: null,
+        children: [
+          {
+            type: 'paragraph',
+            children: [
+              {
+                type: 'link',
+                title: null,
+                url: `./examples/${example}`,
+                children: [
+                  {
+                    type: 'text',
+                    value: example,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      })),
+    },
+  ];
+}
+
+function createContributing() {
+  return [
+    {
+      type: 'heading',
+      depth: 2,
+      children: [
+        {
+          type: 'text',
+          value: '🙌 Contributing',
+        },
+      ],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            "We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our ",
+        },
+        {
+          type: 'link',
+          title: null,
+          url: '/.github/CONTRIBUTING.md',
+          children: [
+            {
+              type: 'text',
+              value: 'Contributing Guide',
+            },
+          ],
+        },
+        {
+          type: 'text',
+          value: '! 👀',
+        },
+      ],
+    },
+  ];
+}
+
+function createLicense() {
+  return [
+    {
+      type: 'heading',
+      depth: 2,
+      children: [
+        {
+          type: 'text',
+          value: '📝 License',
+        },
+      ],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value: 'Licensed under the ',
+        },
+        {
+          type: 'link',
+          title: null,
+          url: '/LICENSE',
+          children: [
+            {
+              type: 'text',
+              value: 'Apache 2.0 License',
+            },
+          ],
+        },
+        {
+          type: 'text',
+          value: '.',
+        },
+      ],
+    },
+  ];
+}
+
+module.exports = monorepo;

package/src/commands/sync.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2019, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { workspace } = require('../workspace');
+
+const tasks = {
+  npm: require('./sync/npm'),
+  package: require('./sync/package'),
+  readme: require('./sync/readme'),
+};
+
+async function sync(args, env) {
+  const { target } = args;
+  const tasksToRun = target === 'all' ? Object.keys(tasks) : [target];
+
+  for (const name of tasksToRun) {
+    const task = tasks[name];
+    await task.run(env);
+  }
+}
+
+module.exports = {
+  command: 'sync [target]',
+  desc: 'sync files across workspaces',
+  builder(yargs) {
+    yargs.positional('target', {
+      describe: 'choose a target to sync',
+      choices: ['all', 'npm', 'package', 'readme'],
+      default: 'all',
+    });
+  },
+  handler: workspace(sync),
+};

package/src/compile.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const sass = require('sass');
+
+const defaultOptions = {
+  includePaths: ['node_modules', '../../node_modules'],
+};
+
+function compile(filepaths, options) {
+  return filepaths.map((file) => {
+    return sass.renderSync({
+      file,
+      ...defaultOptions,
+      ...options,
+    });
+  });
+}
+
+module.exports = compile;

package/src/component/index.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2019, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const fs = require('fs-extra');
+const path = require('path');
+const template = require('lodash.template');
+
+const TEMPLATES_DIR = path.join(__dirname, 'templates');
+const blocklist = new Set(['.DS_Store']);
+
+async function loadTemplates() {
+  const files = await fs.readdir(TEMPLATES_DIR).then((names) => {
+    return names
+      .filter((name) => {
+        return !blocklist.has(name);
+      })
+      .map((name) => {
+        const extension = path.extname(name);
+        return {
+          name: path.basename(name, `.template${extension}`),
+          filepath: path.join(TEMPLATES_DIR, name),
+        };
+      });
+  });
+
+  const templates = {};
+
+  for (const { name, filepath } of files) {
+    const contents = await fs.readFile(filepath, 'utf8');
+    const compile = template(contents);
+    templates[name] = {
+      compile,
+    };
+  }
+
+  return templates;
+}
+
+module.exports = {
+  loadTemplates,
+};

package/src/component/templates/component.template.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function <%= name %>({ children, ...rest }) {
+  return <div {...rest}>{children}</div>;
+}
+
+<%= name %>.propTypes = {
+  children: PropTypes.node,
+};
+
+export default <%= name %>;

package/src/component/templates/index.template.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ import <%= name %> from './<%= name %>';
+ export { <%= name %> };

package/src/component/templates/mdx.template.mdx

@@ -0,0 +1,37 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { <%= name %> } from './';
+
+# <%= name %>
+
+[Source
+code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/<%=
+name %>) &nbsp;|&nbsp; [Usage
+guidelines](https://www.carbondesignsystem.com/components/<%= name %>/usage)
+&nbsp;|&nbsp; [Accessibility](https://www.carbondesignsystem.com/components/<%=
+url %>/accessibility)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+TODO
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/<%=
+name %>/<%= name %>.mdx).

package/src/component/templates/story.template.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { <%= name %> } from './';
+import mdx from './<%= name %>.mdx';
+
+export default {
+  title: '<%= name %>',
+  component: <%= name %>,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const example = () => <<%= name %>>Story Example</<%= name %>>;