feat(react-icons): Added Initial Icons Package (patternfly#453)

affects: @patternfly/react-icons, @patternfly/react-docs

Added Icons package.

ISSUES CLOSED: patternfly#442

.eslintignore

@@ -2,3 +2,5 @@ node_modules
 dist
 public
 scripts/generators/*/templates/*
+packages/react-icons/src/icons/
+packages/react-icons/src/index.js

.eslintrc.js

@@ -22,7 +22,13 @@ module.exports = {
             modules: [
               path.resolve(__dirname, './'),
               path.resolve(__dirname, './node_modules')
-            ]
+            ],
+            alias: {
+              '@patternfly/react-icons': path.resolve(
+                __dirname,
+                './packages/react-icons/src'
+              )
+            }
           }
         }
       }

.gitignore

@@ -5,6 +5,9 @@ dist
 coverage
 public/
 .cache
+packages/react-icons/src/icons/
+packages/react-icons/src/index.js
+packages/react-icons/src/index.d.ts
 
 # package managers
 yarn-error.log

README.md

@@ -22,7 +22,7 @@ Alternatively, if you use npm:
 npm install --save patternfly-react
 ```
 
-Then import Patternfly React UI modules as ES6 modules:
+Then import PatternFly React UI modules as ES6 modules:
 
 ```
 import { Alert } from 'patternfly-react'
@@ -80,4 +80,4 @@ yarn storybook:deploy --branch=feature-branch-storybook
 
 ## Meeting Notes
 
-You can find all Patternfly React Community Meeting notes [here](http://www.patternfly.org/community/monthly-community-meeting/).
+You can find all PatternFly React Community Meeting notes [here](http://www.patternfly.org/community/monthly-community-meeting/).

package.json

@@ -110,6 +110,7 @@
     "build:babel:esm": "cross-env BABEL_ENV=production:esm lerna exec --stream --ignore \"$(node ./scripts/getGlobPackages.js babel)\" -- babel src --out-dir dist/esm",
     "build:docs": "yarn build && lerna run build --scope=@patternfly/react-docs --stream",
     "build:tokens": "lerna run build --scope=@patternfly/react-tokens --stream",
+    "build:icons": "lerna run prebuild --scope=@patternfly/react-icons --stream",
     "build:ts": "node ./scripts/copyTS.js",
     "clean": "yarn clean:build",
     "clean:build": "rm -rf packages/*/dist",

packages/react-core/README.md

@@ -19,7 +19,7 @@ npm install @patternfly/react-core --save
 
 #### Pre-requisites
 
-It's strongly advised to use the Patternfly Base CSS in your whole project, or some components may diverge in appearance:
+It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
 
 ```javascript
 import '@patternfly/react-core/dist/styles/base.css'

packages/react-docs/README.md

@@ -1,4 +1,4 @@
-# Patternfly React Docs
+# PatternFly React Docs
 This site uses gatsby.
 
 For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).

packages/react-docs/gatsby-config.js

@@ -2,7 +2,7 @@ const { resolve } = require('path');
 
 module.exports = {
   siteMetadata: {
-    title: 'Patternfly React'
+    title: 'PatternFly React'
   },
   plugins: [
     'gatsby-plugin-react-helmet',

packages/react-docs/gatsby-node.js

@@ -31,6 +31,10 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
     resolve: {
       alias: {
         '@patternfly/react-core': path.resolve(__dirname, '../react-core/src'),
+        '@patternfly/react-icons': path.resolve(
+          __dirname,
+          '../react-icons/src'
+        ),
         '@patternfly/react-styles': path.resolve(
           __dirname,
           '../react-styles/src'

packages/react-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-docs",
-  "description": "Patternfly React Docs",
+  "description": "PatternFly React Docs",
   "version": "3.0.0",
   "author": "Red Hat",
   "license": "Apache-2.0",
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@patternfly/react-core": "^0.x",
+    "@patternfly/react-icons": "*",
     "@patternfly/react-styles": "^2.0.0",
     "@patternfly/react-tokens": "^1.0.0",
     "gatsby": "^1.9.247",

packages/react-docs/src/components/navigation/navigation.js

@@ -55,7 +55,7 @@ class Navigation extends React.Component {
         <div className={css(styles.navigationContent)}>
           <div className={css(styles.logo)}>
             <Link to="/">
-              <img src={logo} alt="Patternfly Logo" />
+              <img src={logo} alt="PatternFly Logo" />
             </Link>
           </div>
           <div className={css(styles.search)}>
@@ -75,6 +75,7 @@ class Navigation extends React.Component {
                 title="Style"
               >
                 <NavigationItem to="/styles/tokens">Tokens</NavigationItem>
+                <NavigationItem to="/styles/icons">Icons</NavigationItem>
               </NavigationItemGroup>
             )}
           </ValueToggle>

packages/react-docs/src/components/page/page.js

@@ -11,7 +11,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-  title: 'Patternfly',
+  title: 'PatternFly',
   children: null,
   navigation: null
 };

packages/react-docs/src/pages/styles/icons.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Content from '../../components/content';
+import { Title } from '@patternfly/react-core';
+import { iconMap } from '@patternfly/react-icons/icons';
+import { css, StyleSheet } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/layouts/Grid/styles.css'; //eslint-disable-line
+import {
+  global_spacer_md as spacerMd,
+  global_FontSize_sm as labelFontSize
+} from '@patternfly/react-tokens';
+
+const allIcons = Array.from(iconMap.entries());
+
+const extraStyles = StyleSheet.create({
+  iconCell: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: spacerMd.var
+  },
+  label: {
+    textAlign: 'center',
+    fontSize: labelFontSize.var
+  }
+});
+
+function Icons() {
+  return (
+    <Content>
+      <Title size="3xl" withMargins>
+        Icons
+      </Title>
+      <div className={css(styles.grid)}>
+        {allIcons.map(([id, Icon]) => (
+          <div
+            key={id}
+            className={css(
+              styles.gridItem,
+              styles.modifiers['2ColOnLg'],
+              styles.modifiers['4ColOnMd'],
+              styles.modifiers['6ColOnSm'],
+              extraStyles.iconCell
+            )}
+          >
+            <Icon size="xl" key={id} title={id} />
+            <div className={css(extraStyles.label)}>{id}</div>
+          </div>
+        ))}
+      </div>
+    </Content>
+  );
+}
+
+export default Icons;

packages/react-icons/README.md

@@ -0,0 +1,33 @@
+# @patternfly/react-icons
+
+PatternFly 4 Icons as React Components.
+
+## Usage
+
+### Option 1 - Icon Component
+
+As a convenience `@patternfly/react-icons` exports an `Icon` component that can render any of the provided icons by providing it a name prop. This option does remove the ability for treeshaking so this should only be used in environments where that is not a concern.
+
+```jsx
+import React from 'react';
+import { Icon } from '@patternfly/react-icons';
+
+const closeIcon = <Icon name="times" />;
+```
+
+For a list of the available icons please refer to the [PatternFly React Docs](https://patternfly-react.netlify.com/styles/icons)
+
+### Option 2 - Use icons directly.
+
+This is the best option use if you desire icons to be treeshaken.
+
+```jsx
+import React from 'react';
+import { Times } from '@patternfly/react-icons';
+
+const closeIcon = <Times />;
+```
+
+## Adding Icons
+
+Icons for this package are generated from the `@fortawesome/free-solid-svg-icons` package. To add more to what is generated, modify the [icons.js](./build/icons.js) file in the build folder.

packages/react-icons/build/generateIcons.js

@@ -0,0 +1,27 @@
+const icons = require('./icons');
+const path = require('path');
+const nodePlop = require('node-plop');
+
+const plop = nodePlop(path.resolve(__dirname, './generatorConfig.js'));
+const pascalCase = plop.getHelper('pascalCase');
+const camelCase = plop.getHelper('camelCase');
+
+const allIcons = icons.fontAwesome.map(getFontAwesomeIcon);
+
+plop
+  .getGenerator('icons')
+  .runActions({ icons: allIcons })
+  .catch(console.log); // eslint-disable-line
+
+function getFontAwesomeIcon(name) {
+  const faIconName = camelCase(`fa-${name}`);
+  const faIconDef = require(`@fortawesome/free-solid-svg-icons/${faIconName}`); // eslint-disable-line
+
+  return {
+    id: name,
+    name: pascalCase(name),
+    width: faIconDef.width,
+    height: faIconDef.height,
+    svgPath: faIconDef.svgPathData
+  };
+}

packages/react-icons/build/generatorConfig.js

@@ -0,0 +1,61 @@
+const path = require('path');
+
+const templatesDir = path.resolve(__dirname, './templates');
+const srcDir = path.resolve(__dirname, '../src');
+const iconsDir = path.join(srcDir, './icons');
+
+module.exports = plop => {
+  plop.setGenerator('icons', {
+    prompts: [],
+    actions(data) {
+      const actions = [];
+      data.icons.forEach(icon => {
+        actions.push({
+          type: 'add',
+          force: true,
+          data: icon,
+          path: path.join(iconsDir, './{{id}}.js'),
+          templateFile: path.join(templatesDir, 'iconFile.hbs')
+        });
+
+        actions.push({
+          type: 'add',
+          force: true,
+          data: icon,
+          path: path.join(iconsDir, './{{id}}.d.ts'),
+          templateFile: path.join(templatesDir, 'iconFileTS.hbs')
+        });
+      });
+
+      actions.push({
+        type: 'add',
+        force: true,
+        path: path.join(iconsDir, './index.js'),
+        templateFile: path.join(templatesDir, 'iconBarrelFile.hbs')
+      });
+
+      actions.push({
+        type: 'add',
+        force: true,
+        path: path.join(iconsDir, './index.d.ts'),
+        templateFile: path.join(templatesDir, 'iconBarrelFileTS.hbs')
+      });
+
+      actions.push({
+        type: 'add',
+        force: true,
+        path: path.join(srcDir, './index.js'),
+        templateFile: path.join(templatesDir, 'mainBarrelFile.hbs')
+      });
+
+      actions.push({
+        type: 'add',
+        force: true,
+        path: path.join(srcDir, './index.d.ts'),
+        templateFile: path.join(templatesDir, 'mainBarrelFileTS.hbs')
+      });
+
+      return actions;
+    }
+  });
+};

packages/react-icons/build/icons.js

@@ -0,0 +1,74 @@
+module.exports = {
+  fontAwesome: [
+    'angle-double-left',
+    'angle-double-right',
+    'angle-down',
+    'angle-left',
+    'angle-right',
+    'angle-up',
+    'arrow-circle-down',
+    'arrow-circle-up',
+    'balance-scale',
+    'ban',
+    'bell',
+    'bug',
+    'caret-down',
+    'caret-left',
+    'caret-right',
+    'caret-up',
+    'check-circle',
+    'check',
+    'clipboard-check',
+    'clock',
+    'columns',
+    'cube',
+    'cubes',
+    'ellipsis-v',
+    'exclamation-circle',
+    'exclamation-triangle',
+    'external-link-alt',
+    'external-link-square-alt',
+    'filter',
+    'flag',
+    'folder-open',
+    'folder',
+    'hdd',
+    'history',
+    'info-circle',
+    'key',
+    'list',
+    'lock-open',
+    'lock',
+    'map-marker',
+    'memory',
+    'minus',
+    'pause-circle',
+    'pencil-alt',
+    'plus-circle',
+    'plus-square',
+    'plus',
+    'print',
+    'question-circle',
+    'redo',
+    'search',
+    'sliders-h',
+    'sort-alpha-down',
+    'sort-alpha-up',
+    'sort-numeric-down',
+    'sort-numeric-up',
+    'sort',
+    'sync-alt',
+    'table',
+    'tachometer-alt',
+    'th-large',
+    'th',
+    'thumbtack',
+    'times-circle',
+    'times',
+    'trash',
+    'user-friends',
+    'user',
+    'window-restore',
+    'wrench'
+  ]
+};