UOF & codebase refactoring -> dev

.babelrc.json

@@ -0,0 +1,7 @@
+{
+    "sourceType": "unambiguous",
+    "presets": ["@babel/preset-env", "@babel/preset-typescript", [
+        "@babel/preset-react", {"runtime": "automatic"}
+    ]],
+    "plugins": ["@babel/plugin-transform-runtime"]
+}

.circleci/config.yml

@@ -54,6 +54,12 @@ running_yarn_build: &running_yarn_build
       yarn install
       yarn build
 
+running_yarn_sb_build: &running_yarn_sb_build
+    name: Running Yarn Storybook Build
+    command: |
+      source buildenvvar
+      yarn sb:build
+
 running_yarn_test: &running_yarn_test
     name: Running Yarn Test Build
     command: |
@@ -91,6 +97,7 @@ build_steps: &build_steps
     - run: *install_deploysuite
     - run: *build_configuration_fetch
     - run: *running_yarn_build
+    - run: *running_yarn_sb_build
     - persist_to_workspace: *workspace_persist
 
 test_steps: &test_steps
@@ -129,13 +136,13 @@ deploy_steps: &deploy_steps
           ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE
 
 jobs:
-  lint-dev:
-    <<: *defaults
-    environment:
-      DEPLOY_ENV: "DEV"
-      LOGICAL_ENV: "dev"
-      APPNAME: "platform-ui-mvp"
-    steps: *lint_steps
+  # lint-dev:
+  #   <<: *defaults
+  #   environment:
+  #     DEPLOY_ENV: "DEV"
+  #     LOGICAL_ENV: "dev"
+  #     APPNAME: "platform-ui-mvp"
+  #   steps: *lint_steps
 
   # lint-prod:
   #   <<: *defaults
@@ -153,6 +160,14 @@ jobs:
       APPNAME: "platform-ui-mvp"
     steps: *build_steps
 
+  build-qa:
+    <<: *defaults
+    environment:
+      DEPLOY_ENV: "QA"
+      LOGICAL_ENV: "qa"
+      APPNAME: "platform-ui-mvp"
+    steps: *build_steps
+
   build-prod:
     <<: *defaults
     environment:
@@ -179,6 +194,15 @@ jobs:
       APPNAME: "platform-ui-mvp"
     steps: *deploy_steps
 
+  deployQa:
+    <<: *deploy_defaults
+    environment:
+      DEPLOY_ENV: "QA"
+      LOGICAL_ENV: "qa"
+      ENABLE_CACHE: true
+      APPNAME: "platform-ui-mvp"
+    steps: *deploy_steps
+
   deployProd:
     <<: *deploy_defaults
     environment:
@@ -192,12 +216,12 @@ workflows:
   version: 2
   build:
     jobs:
-      - lint-dev:
-          context : org-global
-          filters:
-            branches:
-              ignore:
-                - master
+      # - lint-dev:
+      #     context : org-global
+      #     filters:
+      #       branches:
+      #         ignore:
+      #           - master
 
       # - lint-prod:
       #     context : org-global
@@ -212,6 +236,14 @@ workflows:
             branches:
               ignore:
                 - master
+                - qa
+
+      - build-qa:
+          context : org-global
+          filters:
+            branches:
+              only:
+                - qa
 
       - build-prod:
           context : org-global
@@ -229,6 +261,15 @@ workflows:
               only:
                 - dev
 
+      - deployQa:
+          context : org-global
+          requires:
+            - build-qa
+          filters:
+            branches:
+              only:
+                - qa
+
       - deployProd:
           context : org-global
           requires:

.environments/.env.dev

@@ -0,0 +1,25 @@
+REACT_APP_HOST_ENV=dev
+
+REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
+
+# Stripe configs
+REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz
+REACT_APP_STRIPE_API_VERSION=2020-08-27
+# not really used anywhere
+REACT_APP_STRIPE_ADMIN_TOKEN=
+REACT_APP_STRIPE_CUSTOMER_TOKEN=
+
+# Vanilla Forums
+REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV
+
+# DataDogLogging
+REACT_APP_DATADOG_PUBLIC_TOKEN=puba0825671e469d16f940c5a30dc738f11
+
+REACT_APP_MEMBER_VERIFY_LOOKER=3322
+
+REACT_APP_SPRIG_ENV_ID=bUcousVQ0-yF
+
+# Filestack configuration for uploading Submissions
+REACT_APP_FILESTACK_API_KEY='AzFINuQoqTmqw0QEoaw9az'
+REACT_APP_FILESTACK_REGION='us-east-1'
+REACT_APP_FILESTACK_SUBMISSION_CONTAINER='topcoder-dev-submissions-dmz'

.environments/.env.prod

@@ -0,0 +1,25 @@
+REACT_APP_HOST_ENV=prod
+
+REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
+
+# Stripe configs
+REACT_APP_STRIPE_API_KEY=pk_live_m3bCBVSfkfMOEp3unZFRsHXi
+REACT_APP_STRIPE_API_VERSION=2020-08-27
+# not really used anywhere
+REACT_APP_STRIPE_ADMIN_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIiwiYWRtaW5pc3RyYXRvciJdLCJpc3MiOiJodHRwczovL2FwaS50b3Bjb2Rlci1kZXYuY29tIiwiaGFuZGxlIjoidGVzdDEiLCJleHAiOjI1NjMwNzY2ODksInVzZXJJZCI6IjQwMDUxMzMzIiwiaWF0IjoxNDYzMDc2MDg5LCJlbWFpbCI6InRlc3RAdG9wY29kZXIuY29tIiwianRpIjoiYjMzYjc3Y2QtYjUyZS00MGZlLTgzN2UtYmViOGUwYWU2YTRhIn0.wKWUe0-SaiFVN-VR_-GwgFlvWaDkSbc8H55ktb9LAVw
+REACT_APP_STRIPE_CUSTOMER_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg
+
+# Vanilla Forums
+REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV
+
+# DataDogLogging
+REACT_APP_DATADOG_PUBLIC_TOKEN=puba0825671e469d16f940c5a30dc738f11
+
+REACT_APP_MEMBER_VERIFY_LOOKER=3322
+
+REACT_APP_SPRIG_ENV_ID=bUcousVQ0-yF
+
+# Filestack configuration for uploading Submissions
+REACT_APP_FILESTACK_API_KEY=
+REACT_APP_FILESTACK_REGION=
+REACT_APP_FILESTACK_SUBMISSION_CONTAINER=

.environments/.env.qa

@@ -0,0 +1,25 @@
+REACT_APP_HOST_ENV=qa
+
+REACT_APP_ENABLE_TCA_CERT_MONETIZATION=false
+
+# Stripe configs
+REACT_APP_STRIPE_API_KEY=pk_test_rfcS49MHRVUKomQ9JgSH7Xqz
+REACT_APP_STRIPE_API_VERSION=2020-08-27
+# not really used anywhere
+REACT_APP_STRIPE_ADMIN_TOKEN=
+REACT_APP_STRIPE_CUSTOMER_TOKEN=
+
+# Vanilla Forums
+REACT_APP_VANILLA_ACCESS_TOKEN=va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV
+
+# DataDogLogging
+REACT_APP_DATADOG_PUBLIC_TOKEN=puba0825671e469d16f940c5a30dc738f11
+
+REACT_APP_MEMBER_VERIFY_LOOKER=3322
+
+REACT_APP_SPRIG_ENV_ID=bUcousVQ0-yF
+
+# Filestack configuration for uploading Submissions
+REACT_APP_FILESTACK_API_KEY=
+REACT_APP_FILESTACK_REGION=
+REACT_APP_FILESTACK_SUBMISSION_CONTAINER=

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+Related JIRA Ticket:
+https://topcoder.atlassian.net/browse/<!-- JIRA TICKET ID -->
+
+# What's in this PR?
+<!-- Please add a brief description of what this PR accomplishes -->
+
+<!-- SEE [Pull Requests](../README.md#pull-requests) for more details about opening a PR -->

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
@@ -18,11 +18,11 @@
 # misc
 .DS_Store
 .env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*.local
 .env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+storybook-static

.storybook/main.ts

@@ -0,0 +1,38 @@
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import cracoConfig from '../craco.config';
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.docs.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
+
+    if (config.resolve) {
+        config.resolve.plugins = [
+            ...(config.resolve.plugins ?? []),
+            new TsconfigPathsPlugin()
+        ];
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            ...cracoConfig.webpack.alias,
+        };
+    }
+
+    return config;
+  }
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,3 @@
+<style>
+    [data-item-id*='-hidden-']{display: none !important}
+</style>

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+    .innerZoomElementWrapper {
+        display: flex;
+        flex-direction: column;
+    }
+</style>

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;