feat(React Incubation): React Playground Proof of Concept (#2059)

Co-authored-by: John Joyce <jjoyce0510@gmail.com>

datahub-web-react/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+    extends: [
+        'react-app',
+        'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+        'plugin:jest/recommended',
+        'airbnb-typescript',
+        'airbnb/hooks',
+        'prettier',
+        'prettier/react',
+        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+        'plugin:prettier/recommended',
+    ],
+    parserOptions: {
+        ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+        sourceType: 'module', // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true, // Allows for the parsing of JSX
+        },
+        project: './tsconfig.json',
+    },
+    rules: {
+        eqeqeq: ['error', 'always'],
+        'no-console': 'warn',
+        'no-debugger': 'warn',
+        'require-await': 'warn',
+        'import/prefer-default-export': 'off', // TODO: remove this lint rule
+        'react/jsx-props-no-spreading': 'off',
+        '@typescript-eslint/no-unused-vars': ['error', {
+            varsIgnorePattern: '^_',
+            argsIgnorePattern: '^_' }],
+    },
+    settings: {
+        react: {
+            version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+        },
+    },
+};

datahub-web-react/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+.eslintcache
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# gql codegen
+*.generated.ts

datahub-web-react/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: 'all',
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4,
+};

datahub-web-react/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+};

datahub-web-react/.storybook/preview.js

@@ -0,0 +1,5 @@
+import '../src/App.css';
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+};

datahub-web-react/README.md

@@ -0,0 +1,3 @@
+This module contains an incubating React App. Please note that this is *not* production-ready and is still in beta. Our initial milestone is to achieve functional parity with the Ember web client. 
+
+Feel free to explore & contribute! 

datahub-web-react/build.gradle

@@ -0,0 +1,75 @@
+apply plugin: 'distribution'
+apply plugin: 'com.github.node-gradle.node'
+
+node {
+
+  // If true, it will download node using above parameters.
+  // If false, it will try to use globally installed node.
+  download = true
+
+  // Version of node to use.
+  version = '14.15.3'
+
+  // Version of Yarn to use.
+  yarnVersion = '1.22.0'
+
+  // Base URL for fetching node distributions (change if you have a mirror).
+  distBaseUrl = 'https://nodejs.org/dist'
+
+  // Set the work directory for unpacking node
+  workDir = file("${project.projectDir}/.gradle/nodejs")
+
+  // Set the work directory for NPM
+  yarnWorkDir = file("${project.projectDir}/.gradle/yarn")
+
+  // Set the work directory where node_modules should be located
+  nodeModulesDir = file("${project.projectDir}")
+
+}
+
+/*
+  Wrappers around Yarn Tasks.
+ */
+task yarnInstall(type: YarnTask) {
+  args = ['install']
+}
+
+task yarnGenerate(type: YarnTask, dependsOn: yarnInstall) {
+  args = ['run', 'generate']
+}
+
+task yarnServe(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate]) {
+  args = ['run', 'start',  '--proxy', 'http://localhost:9001']
+}
+
+task yarnTest(type: YarnTask, dependsOn: [yarnInstall, yarnGenerate]) {
+  args = ['run', 'test', '--watchAll', 'false']
+}
+
+task yarnBuild(type: YarnTask, dependsOn: yarnTest) {
+  args = ['run', 'build']
+}
+
+clean {
+  delete 'node_modules'
+  delete 'dist'
+  delete 'tmp'
+  delete 'build'
+  delete 'just'
+}
+
+configurations {
+  assets
+}
+
+distZip {
+  dependsOn yarnBuild
+  baseName 'datahub-web-react'
+  from 'dist'
+}
+
+if (!gradle.startParameter.taskNames.any { it in ["idea"] }) {
+  artifacts {
+    assets distZip
+  }
+}

datahub-web-react/codegen.yml

@@ -0,0 +1,24 @@
+overwrite: true
+schema: './datahub-frontend.graphql' # TEMPORARY: This should live in `../datahub-frontend/`
+config:
+    scalars:
+        Long: number
+documents:
+    - 'src/**/*.graphql'
+generates:
+    src/types.generated.ts:
+        plugins:
+            - 'typescript'
+    src/:
+        preset: near-operation-file
+        presetConfig:
+            extension: '.generated.ts'
+            baseTypesPath: types.generated.ts
+        plugins:
+            - 'typescript-operations'
+            - 'typescript-react-apollo'
+            - add:
+                  content: '/* eslint-disable */'
+hooks:
+    afterAllFileWrite:
+        - prettier --write