add pf react seed

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.snap]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,53 @@
+{
+  // tells eslint to use the TypeScript parser
+  "parser": "@typescript-eslint/parser",
+  // tell the TypeScript parser that we want to use JSX syntax
+  "parserOptions": {
+    "tsx": true,
+    "jsx": true,
+    "js": true,
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": "."
+  },
+  // we want to use the recommended rules provided from the typescript plugin
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "globals": {
+    "window": "readonly",
+    "describe": "readonly",
+    "test": "readonly",
+    "expect": "readonly",
+    "it": "readonly",
+    "process": "readonly",
+    "document": "readonly"
+  },
+  "settings": {
+    "react": {
+      "version": "^16.11.0"
+    }
+  },
+  // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+    "eslint-plugin-react-hooks"
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "prettier/prettier": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "react/prop-types": "off"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

.gitignore

@@ -0,0 +1,9 @@
+**/node_modules
+dist
+yarn-error.log
+stats.json
+coverage
+storybook-static
+.DS_Store
+.idea
+.env

.prettierignore

@@ -0,0 +1 @@
+package.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 120
+}

.storybook/config.ts

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react';
+import '@patternfly/react-core/dist/styles/base.css';
+
+// automatically import all files ending in *.stories.tsx
+const req = require.context('../stories', true, /\.stories\.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

.storybook/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

.storybook/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const appConfig = require('../webpack.common');
+
+module.exports = ({ config }) => {
+  config.module.rules = [];
+  config.module.rules.push(...appConfig.module.rules);
+  config.module.rules.push({
+    test: /\.css$/,
+    include: [
+      path.resolve(__dirname, '../src'),
+      path.resolve(__dirname, '../node_modules/@storybook'),
+      path.resolve(__dirname, '../node_modules/patternfly'),
+      path.resolve(__dirname, '../node_modules/@patternfly/patternfly'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-styles/css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-core/dist/styles/base.css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+    ],
+    use: ["style-loader", "css-loader"]
+  });
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    include: path.resolve(__dirname, '../src'),
+    use: [
+      require.resolve('react-docgen-typescript-loader'),
+    ],
+  })
+  config.resolve.plugins = [
+    new TsconfigPathsPlugin({
+      configFile: path.resolve(__dirname, "../tsconfig.json")
+    })
+  ];
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Red Hat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README copy.md

@@ -0,0 +1,102 @@
+# Patternfly Seed
+
+Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly, webpack, react, typescript, etc.
+
+Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.
+
+<img width="1058" alt="Out of box dashboard view of patternfly seed" src="https://user-images.githubusercontent.com/5942899/62715686-fa954980-b9ce-11e9-9fc2-217b7a4d1d81.png">
+
+## Quick-start
+```bash
+git clone https://github.com/patternfly/patternfly-react-seed # clone the project
+cd patternfly-react-seed # navigate into the project directory
+npm install # install patternfly-react-seed dependencies
+npm run start:dev # start the development server
+```
+## Development Scripts
+
+Install development/build dependencies
+`npm install`
+
+Start the development server
+`npm run start:dev`
+
+Run a production build (outputs to "dist" dir)
+`npm run build`
+
+Run the test suite
+`npm run test`
+
+Run the linter
+`npm run lint`
+
+Run the code formatter
+`npm run format`
+
+Launch a tool to inspect the bundle size
+`npm run bundle-profile:analyze`
+
+Start the express server (run a production build first)
+`npm run start`
+
+Start storybook component explorer
+`npm run storybook`
+
+Build storybook component explorer as standalone app (outputs to "storybook-static" dir)
+`npm run build:storybook`
+
+## Configurations
+* [TypeScript Config](./tsconfig.json)
+* [Webpack Config](./webpack.common.js)
+* [Jest Config](./jest.config.js)
+* [Editor Config](./.editorconfig)
+
+## Raster Image Support
+
+To use an image asset that's shipped with patternfly core, you'll prefix the paths with "@assets". `@assets` is an alias for the patternfly assets directory in node_modules.
+
+For example:
+```js
+import imgSrc from '@assets/images/g_sizing.png';
+<img src={imgSrc} alt="Some image" />
+```
+
+You can use a similar technique to import assets from your local app, just prefix the paths with "@app". `@app` is an alias for the main src/app directory.
+
+```js
+import loader from '@app/assets/images/loader.gif';
+<img src={loader} alt="Content loading />
+```
+
+## Vector Image Support
+Inlining SVG in the app's markup is also possible.
+
+```js
+import logo from '@app/assets/images/logo.svg';
+<span dangerouslySetInnerHTML={{__html: logo}} />
+```
+
+You can also use SVG when applying background images with CSS. To do this, your SVG's must live under a `bgimages` directory (this directory name is configurable in [webpack.common.js](./webpack.common.js#L5)). This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.
+```css
+body {
+  background: url(./assets/bgimages/img_avatar.svg);
+}
+```
+
+## Code Quality Tools
+* For accessibility compliance, we use [react-axe](https://github.com/dequelabs/react-axe)
+* To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
+* To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)
+* To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)
+* To ensure code styles remain consistent, we use [eslint](https://eslint.org/)
+* To provide a place to showcase custom components, we integrate with [storybook](https://storybook.js.org/)
+
+## Multi environment configuration
+This project uses [dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) for exposing environment variables to your code. Either export them at the system level like `export MY_ENV_VAR=http://dev.myendpoint.com && npm run start:dev` or simply drop a `.env` file in the root that contains your key-value pairs like below:
+
+```sh
+ENV_1=http://1.myendpoint.com
+ENV_2=http://2.myendpoint.com
+```
+
+With that in place, you can use the values in your code like `console.log(process.env.ENV_1);`

README.md

@@ -1 +1,9 @@
 # data-virtualization-training-demo
+
+This repo uses [PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed)
+
+To start application
+```
+npm install # install patternfly-react-seed dependencies
+npm run start:dev # start the development server
+```

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

dr-surge.js

@@ -0,0 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+const indexPath = path.resolve(__dirname, 'dist/index.html');
+const targetFilePath = path.resolve(__dirname, 'dist/200.html');
+// ensure we have bookmarkable url's when publishing to surge
+// https://surge.sh/help/adding-a-200-page-for-client-side-routing
+fs.createReadStream(indexPath).pipe(fs.createWriteStream(targetFilePath));

jest.config.js

@@ -0,0 +1,39 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  moduleDirectories: [
+    "node_modules",
+    "<rootDir>/src"
+  ],
+
+  // A map from regular expressions to module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+    "@app/(.*)": '<rootDir>/src/app/$1'
+  },
+
+  // A preset that is used as a base for Jest's configuration
+  preset: "ts-jest/presets/js-with-ts",
+
+  // The path to a module that runs some code to configure or set up the testing framework before each test
+  setupFilesAfterEnv: ['<rootDir>/test-setup.js'],
+
+  // The test environment that will be used for testing.
+  testEnvironment: "jsdom",
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+
+};