feat(elements): add @carbon/elements package (#199)

* feat(elements): add @carbon/elements package

* chore(project): run sync

* chore(elements): add additional build folders to clean task

packages/bundler/package.json

@@ -2,9 +2,6 @@
   "name": "@carbon/bundler",
   "private": true,
   "version": "0.0.1-alpha.26",
-  "bin": {
-    "bundler": "./bin/bundler.js"
-  },
   "license": "Apache-2.0",
   "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/bundler",
   "bugs": "https://github.com/IBM/carbon-elements/issues",
@@ -34,5 +31,11 @@
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^3.4.0"
+  },
+  "devDependencies": {
+    "change-case": "^3.0.2"
+  },
+  "bin": {
+    "bundler": "./bin/bundler.js"
   }
 }

packages/bundler/src/bundler.js

@@ -31,9 +31,11 @@ async function bundler({ argv, cwd: getWorkingDirectory }) {
     .command('check <glob>')
     .description('check that each file can be compiled')
     .option('-i, --ignore <glob>', 'pass in a glob of files to ignore')
+    .option('-l, --list', 'list all the files that were compiled')
     .action((pattern, cmd) =>
       check(pattern, {
         cwd,
+        list: cmd.list || false,
         ignore: cmd.ignore || [],
       })
     );

packages/bundler/src/commands/bundle.js

@@ -7,6 +7,7 @@
 
 'use strict';
 
+const { pascalCase } = require('change-case');
 const fs = require('fs-extra');
 const path = require('path');
 const rollup = require('rollup').rollup;
@@ -87,12 +88,31 @@ async function bundle(entrypoint, { cwd, globals, name } = {}) {
 
         if (format === 'umd') {
           outputOptions.name = name;
-          outputOptions.globals = globals;
+          outputOptions.globals = {
+            ...formatDependenciesIntoGlobals(dependencies),
+            ...globals,
+          };
         }
 
         return bundle.write(outputOptions);
       })
   );
 }
 
+function formatDependenciesIntoGlobals(dependencies) {
+  return Object.keys(dependencies).reduce((acc, key) => {
+    const parts = key.split('/').map((identifier, i) => {
+      if (i === 0) {
+        return identifier.replace(/@/, '');
+      }
+      return identifier;
+    });
+
+    return {
+      ...acc,
+      [key]: pascalCase(parts.join(' ')),
+    };
+  }, {});
+}
+
 module.exports = bundle;

packages/bundler/src/commands/check.js

@@ -13,7 +13,7 @@ const glob = require('../glob');
 const { reporter } = require('../reporter');
 const compile = require('../tools/compile');
 
-async function check(pattern, { ignore, cwd } = {}) {
+async function check(pattern, { ignore, cwd, list } = {}) {
   reporter.info(`Running in: ${cwd}`);
   reporter.info(`Checking pattern: '${pattern}', ignoring: '${ignore}'`);
   // Assume globs are for checking scss files for now
@@ -50,6 +50,10 @@ async function check(pattern, { ignore, cwd } = {}) {
     return;
   }
 
+  if (list) {
+    reporter.info('Compiled the following files:');
+    console.log(files);
+  }
   reporter.success(`Successfully compiled ${files.length} files! 🎉`);
   process.exit(0);
 }

packages/elements/.gitignore

@@ -0,0 +1 @@
+scss/bundled

packages/elements/.npmignore

@@ -0,0 +1,3 @@
+__tests__
+examples
+tasks

packages/elements/README.md

@@ -0,0 +1,30 @@
+# @carbon/elements
+
+> A collection of design elements in code for the IBM Design Language
+
+## Getting started
+
+To install `@carbon/elements` in your project, you will need to run
+the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @carbon/elements
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following
+command instead:
+
+```bash
+yarn add @carbon/elements
+```
+
+## 🙌 Contributing
+
+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 [Contributing Guide](/.github/CONTRIBUTING.md)
+! 👀
+
+## 📝 License
+
+Licensed under the [Apache 2.0 License](/LICENSE).

packages/elements/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@carbon/elements",
+  "description": "A collection of design elements in code for the IBM Design Language",
+  "version": "0.0.1-alpha.26",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/elements",
+  "bugs": "https://github.com/IBM/carbon-elements/issues",
+  "files": [
+    "es",
+    "lib",
+    "scss",
+    "umd"
+  ],
+  "keywords": [
+    "ibm",
+    "elements",
+    "carbon",
+    "carbon-elements",
+    "carbon-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node tasks/build.js && bundler bundle src/index.js --name CarbonElements",
+    "clean": "rimraf es lib scss/bundled umd"
+  },
+  "dependencies": {
+    "@carbon/colors": "0.0.1-alpha.26",
+    "@carbon/grid": "0.0.1-alpha.26",
+    "@carbon/import-once": "0.0.1-alpha.26",
+    "@carbon/layout": "0.0.1-alpha.26",
+    "@carbon/motion": "0.0.1-alpha.26",
+    "@carbon/type": "0.0.1-alpha.26"
+  },
+  "devDependencies": {
+    "@carbon/bundler": "0.0.1-alpha.26",
+    "fs-extra": "^7.0.1",
+    "klaw-sync": "^6.0.0",
+    "replace-in-file": "^3.4.2",
+    "rimraf": "^2.6.2"
+  }
+}

packages/elements/scss/bundle.scss

@@ -0,0 +1,8 @@
+// The bundled files below are generated using the `yarn build` stage for this
+// package
+@import './bundled/@carbon/import-once/scss/import-once';
+@import './bundled/@carbon/colors/scss/colors';
+@import './bundled/@carbon/layout/scss/layout';
+@import './bundled/@carbon/grid/scss/grid';
+@import './bundled/@carbon/type/scss/type';
+@import './bundled/@carbon/motion/scss/motion';

packages/elements/scss/elements.scss

@@ -0,0 +1,6 @@
+@import '@carbon/import-once/scss/import-once';
+@import '@carbon/colors/scss/colors';
+@import '@carbon/layout/scss/layout';
+@import '@carbon/grid/scss/grid';
+@import '@carbon/type/scss/type';
+@import '@carbon/motion/scss/motion';

packages/elements/src/index.js

@@ -0,0 +1,4 @@
+export * from '@carbon/colors';
+export * from '@carbon/layout';
+export * from '@carbon/motion';
+export * from '@carbon/type';

packages/elements/tasks/build.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const fs = require('fs-extra');
+const klaw = require('klaw-sync');
+const path = require('path');
+const replace = require('replace-in-file');
+const packageJson = require('../package.json');
+
+const WORKSPACE_NODE_MODULES = path.resolve(__dirname, '../../../node_modules');
+const BUNDLE_DIR = path.resolve(__dirname, '../scss/bundled');
+const dependencies = Object.keys(packageJson.dependencies).map(key => {
+  return [key, path.join(WORKSPACE_NODE_MODULES, key)];
+});
+
+async function build() {
+  // Copy scss folders over
+  await Promise.all(
+    dependencies.map(async ([dependency, dependencyPath]) => {
+      const scssFolder = path.join(dependencyPath, 'scss');
+      if (!(await fs.pathExists(scssFolder))) {
+        return;
+      }
+
+      await fs.copy(scssFolder, path.join(BUNDLE_DIR, dependency, 'scss'));
+    })
+  );
+
+  // Replace `@carbon` imports with relative paths
+  const paths = klaw(BUNDLE_DIR, {
+    nodir: true,
+  });
+
+  await Promise.all(
+    paths.map(async file => {
+      const relativeImportPath = path.relative(
+        file.path,
+        path.join(BUNDLE_DIR, '@carbon')
+      );
+      await replace({
+        files: file.path,
+        from: /\@carbon/g,
+        to: `${relativeImportPath}/@carbon`,
+      });
+    })
+  );
+}
+
+build().catch(error => {
+  console.error(error);
+});