chore(project): clean up preview examples and prettier usage (#311)

* chore(project): rename basic examples to preview

* chore: clean up tasks

* chore(project): fix prettier config for faster results

* chore(project): run format

* chore(prettier): update prettierignore

.github/CONTRIBUTING.md

@@ -47,7 +47,7 @@ If you want to help improve the docs, it's a good idea to let others know what y
    $ git remote add upstream git@github.com:IBM/carbon-elements.git
    $ git remote -v
    ```
-   
+
 4. Switch to our version of Node. If you are using (nvm [Node Version Manager)](https://github.com/creationix/nvm), you can run `nvm use` to quicky switch Node versions. If you are aren't using nvm, you can still check the `.nvmrc` dotfile in the root of this project to find the major stable version of Node we are using, and then you can switch manually.
 
 ### Submitting an Issue

.prettierignore

@@ -8,3 +8,10 @@ ts
 
 # Storybook examples
 **/storybook/stories/**
+
+# Package-specific
+packages/colors/scss/*
+packages/elements/scss/*
+!packages/elements/scss/elements.scss
+!packages/elements/scss/index.scss
+packages/themes/scss/*

package.json

@@ -19,8 +19,8 @@
     "clean": "lerna run clean && lerna clean --yes && rimraf build && rimraf node_modules",
     "doctoc": "doctoc --title '## Table of Contents' docs",
     "examples": "rimraf build && yarn build && node tasks/examples.js",
-    "format": "prettier --write \"**/*.{css,js,md,scss,ts}\"",
-    "format:diff": "prettier --list-different \"**/*.{css,js,md,scss,ts}\"",
+    "format": "prettier --write '**/*.{css,js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{css,js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:staged": "prettier --write",
     "lint": "toolkit lint .",
     "lint:styles": "toolkit stylelint \"**/*.{css,scss}\"",

packages/colors/README.md

@@ -37,8 +37,9 @@ import { black, blue, warmGray } from '@carbon/colors';
 const { black, blue, warmGray } = require('@carbon/colors');
 ```
 
-Each color swatch is exported as a variable, and each color name is also exported as an object that can be called
-by specifying grade, for example:
+Each color swatch is exported as a variable, and each color name is
+also exported as an object that can be called by specifying grade, for
+example:
 
 ```js
 black;

packages/colors/examples/preview/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "parcel build -d build --public-url \"/colors/examples/basic\" index.html",
+    "build": "parcel build -d build --public-url \"/colors/examples/preview\" index.html",
     "develop": "parcel index.html --no-cache"
   },
   "devDependencies": {

packages/grid/README.md

@@ -68,13 +68,6 @@ span one column at our `sm` breakpoint. By default, as we scale beyond
 the breakpoint the layout will still take up a percentage of the
 overall width.
 
-## 📚 Examples
-
-If you're looking for more examples on how to use `@carbon/grid`, we
-have some examples that you can check out:
-
-- [Basic](./examples/basic)
-
 ## 🙌 Contributing
 
 We're always looking for contributors to help us fix bugs, build new

packages/grid/examples/basic/package.json → packages/grid/examples/preview/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "export PATH_PREFIX=\"/grid/examples/basic\" && parcel build -d build --public-url $PATH_PREFIX index.html",
+    "build": "export PATH_PREFIX=\"/grid/examples/preview\" && parcel build -d build --public-url $PATH_PREFIX index.html",
     "develop": "parcel index.html --no-cache"
   },
   "devDependencies": {

packages/icons/README.md

@@ -18,13 +18,6 @@ command instead:
 yarn add @carbon/icons
 ```
 
-## 📚 Examples
-
-If you're looking for more examples on how to use `@carbon/icons`, we
-have some examples that you can check out:
-
-- [Esm](./examples/esm)
-
 ## 🙌 Contributing
 
 We're always looking for contributors to help us fix bugs, build new

packages/icons/examples/esm/package.json → packages/icons/examples/preview/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "parcel build -d build --public-url \"/icons/examples/esm\" index.html",
+    "build": "parcel build -d build --public-url \"/icons/examples/preview\" index.html",
     "develop": "parcel index.html --no-cache"
   },
   "devDependencies": {

packages/layout/README.md

@@ -47,7 +47,6 @@ feel free to file an issue proposing the new addition!
 If you're looking for more examples on how to use `@carbon/layout`, we
 have some examples that you can check out:
 
-- [Basic](./examples/basic)
 - [Styled-components](./examples/styled-components)
 
 ## 🙌 Contributing

packages/layout/examples/basic/package.json → packages/layout/examples/preview/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "parcel build -d build --public-url \"/layout/examples/basic\" index.html",
+    "build": "parcel build -d build --public-url \"/layout/examples/preview\" index.html",
     "develop": "parcel index.html --no-cache"
   },
   "devDependencies": {

packages/motion/README.md

@@ -27,10 +27,10 @@ curves using either Sass or JavaScript.
 
 ### Sass
 
-`@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin that
-you can use to access the value of a motion curve or include that
-curve as the `transition-property` for a selector. To use these
-helpers, you can do the following in your project:
+`@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin that you can use to access the value of a motion
+curve or include that curve as the `transition-property` for a
+selector. To use these helpers, you can do the following in your
+project:
 
 ```scss
 @import '@carbon/motion/scss/motion.scss';

tasks/ci-check.js

@@ -10,7 +10,7 @@ async function main() {
     cwd: process.cwd(),
   };
   const tasks = [
-    'yarn toolkit format:diff',
+    'yarn format:diff',
     `yarn bundler check --ignore '**/@(node_modules|examples)/**' 'packages/**/*.scss'`,
     `yarn test --ci --reporters=default --reporters=jest-junit --testPathIgnorePatterns='examples'`,
   ];