3.2. Account-settings app - release

.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
@@ -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:
@@ -212,6 +236,16 @@ workflows:
             branches:
               ignore:
                 - master
+                - qa
+                - profiles-app
+
+      - build-qa:
+          context : org-global
+          filters:
+            branches:
+              only:
+                - qa
+                - profiles-app
 
       - build-prod:
           context : org-global
@@ -228,6 +262,17 @@ workflows:
             branches:
               only:
                 - dev
+                - talent-search
+
+      - deployQa:
+          context : org-global
+          requires:
+            - build-qa
+          filters:
+            branches:
+              only:
+                - qa
+                - profiles-app
 
       - deployProd:
           context : org-global

.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;

.vscode/components.code-snippets

@@ -0,0 +1,91 @@
+{
+    // Place your mfe-customer-work workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix,
+    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+    // Placeholders with the same ids are connected.
+    // Example:
+    // "Print to console": {
+    //   "scope": "javascript,typescript",
+    //   "prefix": "log",
+    //   "body": [
+    //     "console.log('$1');",
+    //     "$2"
+    //   ],
+    //   "description": "Log output to console"
+    // }
+    "[MFE] React component": {
+      "scope": "typescript,typescriptreact",
+      "prefix": "rfc",
+      "body": [
+        "import { FC } from 'react'",
+        "",
+        "import styles from './${1:ComponentName}.module.scss'",
+        "",
+        "interface ${1:ComponentName}Props {",
+        "}",
+        "",
+        "const ${1:ComponentName}: FC<${1:ComponentName}Props> = (props: ${1:ComponentName}Props) => {",
+        "",
+        "  return (",
+        "    <div className={styles['wrap']}>",
+        "    </div>",
+        "  )",
+        "}",
+        "",
+        "export default ${1:ComponentName}",
+        ""
+      ],
+      "description": "Create a react functional component"
+    },
+    "[MFE] export comp": {
+      "scope": "typescript,typescriptreact",
+      "prefix": "exp",
+      "body": [
+        "export { default as ${1:ComponentName} } from './${1:ComponentName}'",
+        ""
+      ],
+      "description": "Export module"
+    },
+    "[MFE] use state": {
+        "scope": "typescript,typescriptreact",
+        "prefix": "usest",
+        "body": [
+            "const [$1, set$2]: [$3, Dispatch<SetStateAction<$3>>] = useState($4)$0",
+        ]
+    },
+    "[MFE] Storybook Template": {
+        "scope": "typescript,typescriptreact",
+        "prefix": "sb",
+        "body": [
+            "/* eslint-disable no-underscore-dangle */",
+            "/* eslint-disable camelcase */",
+            "",
+            "import { Meta, StoryObj } from '@storybook/react'",
+            "",
+            "import '../../styles/index.scss'",
+            "",
+            "import { ${1:ComponentName} } from '.'",
+            "",
+            "const meta: Meta<typeof ${1:ComponentName}> = {",
+            "    argTypes: {",
+            "    },",
+            "    component: ${1:ComponentName},",
+            "    excludeStories: /.*Decorator$/,",
+            "    tags: ['autodocs'],",
+            "    title: 'Components/${1:ComponentName}',",
+            "}",
+            "",
+            "export default meta",
+            "",
+            "type Story = StoryObj<typeof ${1:ComponentName}>;",
+            "",
+            "export const Primary: Story = {",
+            "    args: {",
+            "    },",
+            "}",
+            ""
+        ]
+    }
+  }