app-tutor-ai-consumer 1.0.1

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript']
+}

package/catalog-info.yaml

@@ -0,0 +1,21 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  namespace: hotmart-org
+  name: app-tutor-ai-consumer
+  description: Consumer components library for Hotmart Tutor Widget
+  tags: []
+  annotations:
+    github.com/project-slug: Hotmart-Org/app-tutor-ai-consumer
+    backstage.io/techdocs-ref: dir:.
+spec:
+  type: microfront
+  lifecycle: experimental
+  owner: learning-experience
+  system: club
+  heimdall:
+    reportable: false
+    pci: false
+    impact: >
+      Tutor App widget will be offiline
+    squads: []

package/commitlint.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  ignores: [(message) => /^Bumps \\[.+]\\(.+\\) from .+ to .+\\.$/m.test(message)],
+  rules: {
+    'body-max-line-length': [0],
+    'footer-max-line-length': [0]
+  }
+}

package/config/certs/ssl-generate.sh

@@ -0,0 +1,12 @@
+# Step: 1
+# Install mkcert tool - macOS; you can see the mkcert repo for details
+brew install mkcert
+# Step: 2
+# Install nss (only needed if you use Firefox)
+brew install nss
+# Step: 3
+# Setup mkcert on your machine (creates a CA)
+mkcert -install
+# Step: 4 (Final)
+# at the project root directory run the following command
+mkcert local.buildstaging.com localhost 127.0.0.1 ::1

package/config/rspack/rspack.config.js

@@ -0,0 +1,176 @@
+const path = require('path')
+const rspack = require('@rspack/core')
+const packageJSON = require('../../package.json')
+const { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin')
+const paths = require('./utils/paths')
+const alias = require('./utils/alias')
+const { getEnvironmentPlugins } = require('./utils/plugins')
+
+require('dotenv').config({
+  path: path.resolve(__dirname, `../../environments/.env.${process.env.NODE_ENV}`)
+})
+
+module.exports = async function (env) {
+  const productionMode = env?.production || env?.staging
+  const releaseFullName = `app-tutor-ai-consumer_v${packageJSON.version}`
+  const fileVersion = `${productionMode ? 'prod' : 'dev'}-${packageJSON?.version}`
+  const bundlePath = !productionMode
+    ? `${process?.env?.BUNDLE_PATH}/`
+    : `${process?.env?.BUNDLE_PATH}/${process.env.APP_NAME}/_current/`
+
+  /**
+   * @type {import('@rspack/cli').Configuration}
+   */
+  const config = {
+    mode: productionMode ? 'production' : 'development',
+    entry: productionMode ? paths.INDEX : paths.DEV_BOOTSTRAP,
+    ...(productionMode ? {} : require('./utils/devserver.config')),
+    optimization: {
+      usedExports: true,
+      ...(productionMode
+        ? {
+            minimize: true,
+            minimizer: [
+              new rspack.SwcJsMinimizerRspackPlugin({
+                minimizerOptions: {
+                  compress: { passes: 4 }
+                },
+                extractComments: false
+              }),
+              new rspack.LightningCssMinimizerRspackPlugin()
+            ]
+          }
+        : {})
+    },
+    output: {
+      path: paths.DIST,
+      publicPath: bundlePath,
+      pathinfo: !productionMode,
+      filename: `[name].[fullhash].${fileVersion}.js`,
+      chunkFilename: `[name].[fullhash].chunk.${fileVersion}.js`,
+      sourceMapFilename: `[name].[fullhash].${fileVersion}.js.map`,
+      clean: true
+    },
+    devtool: productionMode ? false : 'cheap-module-source-map',
+    resolve: {
+      symlinks: !productionMode,
+      extensions: ['.tsx', '.ts', '.js', '.json'],
+      fallback: { 'process/browser': require.resolve('process/browser') },
+      alias
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|tsx?)$/,
+          use: [
+            {
+              loader: 'builtin:swc-loader',
+              options: {
+                sourceMaps: !productionMode,
+                jsc: {
+                  parser: {
+                    syntax: 'typescript',
+                    tsx: true
+                  },
+                  transform: {
+                    react: {
+                      runtime: 'automatic',
+                      development: !productionMode,
+                      refresh: !productionMode
+                    }
+                  }
+                },
+                env: {
+                  targets: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all']
+                }
+              }
+            }
+          ]
+        },
+        {
+          test: /\.css$/,
+          resourceQuery: { not: [/inline/] },
+          use: [
+            {
+              loader: !productionMode ? 'style-loader' : rspack.CssExtractRspackPlugin.loader,
+              options: {
+                attributes: {
+                  [`mfe-${process.env.APP_NAME}-root`]: true
+                }
+              }
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMaps: !productionMode,
+                modules: {
+                  auto: true,
+                  namedExport: false,
+                  localIdentName: `[path][name]__[local]--[hash:base64:5]`
+                }
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  config: path.resolve(paths.ROOT, 'postcss.config.js')
+                }
+              }
+            }
+          ]
+        },
+        {
+          test: /\.svg$/,
+          resourceQuery: { not: [/url/] },
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                svgo: false,
+                titleProp: true,
+                ref: true
+              }
+            }
+          ],
+          type: 'javascript/auto'
+        },
+        {
+          test: /\.svg$/,
+          type: 'asset/resource',
+          resourceQuery: /url/, // *.svg?url
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[name].[ext]'
+              }
+            }
+          ],
+          type: 'javascript/auto'
+        },
+        { test: /\.(png|jpe?g|gif|ico)$/, type: 'asset' }
+      ]
+    },
+    plugins: [
+      new rspack.ProvidePlugin({
+        process: 'process/browser'
+      }),
+      new rspack.DefinePlugin({
+        'process.env.PROJECT_VERSION': JSON.stringify(packageJSON.version),
+        'process.env.TARGET_ENV': JSON.stringify(process.env.NODE_ENV)
+      }),
+      new rspack.ProgressPlugin(),
+      new TsCheckerRspackPlugin(),
+      new rspack.HtmlRspackPlugin({
+        template: path.resolve(paths.PUBLIC, 'index.html'),
+        favicon: path.resolve(paths.PUBLIC, 'favicon.ico')
+      })
+    ].concat(await getEnvironmentPlugins(!productionMode)),
+    watchOptions: {
+      ignored: /node_modules/
+    }
+  }
+
+  return config
+}

package/config/rspack/utils/alias.js

@@ -0,0 +1,12 @@
+const paths = require('./paths')
+
+module.exports = {
+  '@/app': paths.APP,
+  '@/assets': paths.ASSETS,
+  '@/config': paths.SRC_CONFIG,
+  '@/global_config': paths.CONFIG,
+  '@/lib': paths.LIB,
+  '@/public': paths.PUBLIC,
+  '@/root': paths.ROOT,
+  '@/src': paths.SRC
+}

package/config/rspack/utils/devserver.config.js

@@ -0,0 +1,34 @@
+const path = require('path')
+const { readFileSync } = require('fs')
+const paths = require('./paths')
+
+/**
+ * @type {import('@rspack/cli').Configuration['devServer']}
+ */
+module.exports = {
+  devServer: {
+    host: process.env.APP_HOST,
+    port: process.env.APP_PORT,
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': 'X-Requested-With'
+    },
+    static: {
+      directory: paths.DIST
+    },
+    server: {
+      type: 'https',
+      options: {
+        key: readFileSync(
+          path.resolve(__dirname, '..', '..', 'certs', `${process.env.APP_HOST}+3-key.pem`)
+        ),
+        cert: readFileSync(
+          path.resolve(__dirname, '..', '..', 'certs', `${process.env.APP_HOST}+3.pem`)
+        )
+      }
+    }
+  }
+}

package/config/rspack/utils/envs.js

@@ -0,0 +1,39 @@
+const envs = [
+  'ENVIRONMENT',
+  'CAS_CLIENT_ID',
+  'IS_CAS',
+  'APP_HOST',
+  'APP_PORT',
+  'APP_NAME',
+  'API_CONTENT_PLATFORM_SPACE',
+  'API_HOTMART_TUTOR',
+  'OPTIMIZELY_SDK_KEY',
+  'FIREBASE_API_KEY',
+  'FIREBASE_AUTH_DOMAIN',
+  'FIREBASE_DATABASE_URL',
+  'FIREBASE_MESSAGING_SENDER_ID',
+  'FIREBASE_PROJECT_ID',
+  'FIREBASE_STORAGE_BUCKET',
+  'API_CONVERSATION_URL',
+  'API_AUTH_URL',
+  'USER_VLC',
+  'VLC_PASSWORD',
+  'SECURITY_BASE_URL',
+  'AUTH_CLIENT_SECRET',
+  'BUNDLE_PATH'
+]
+
+const localEnvs = ['MEMBERSHIP_SLUG']
+
+const prodEnvs = ['APP_HOST_MF']
+
+const devEnvs = [...envs, ...localEnvs]
+
+const allEnvs = [...envs, ...prodEnvs]
+
+module.exports = {
+  envs,
+  prodEnvs,
+  devEnvs,
+  allEnvs
+}

package/config/rspack/utils/paths.js

@@ -0,0 +1,29 @@
+const path = require('path')
+
+const resolve = (pathname) => path.resolve(__dirname, pathname)
+const root = '../../..'
+
+module.exports = {
+  APP: resolve(`${root}/src/main`),
+  ASSETS: resolve(`${root}/src/assets`),
+  CONFIG: resolve(`${root}/config`),
+  DIST: resolve(`${root}/dist`),
+  ENV: {
+    development: resolve(`${root}/environments/.env.development`),
+    production: resolve(`${root}/environments/.env.production`),
+    staging: resolve(`${root}/environments/.env.staging`)
+  },
+  INDEX: resolve(`${root}/src/index`),
+  DEV_BOOTSTRAP: resolve(`${root}/src/development-bootstrap`),
+  LIB: resolve(`${root}/src/lib`),
+  NODE_MODULES: resolve(`${root}/node_modules`),
+  PUBLIC: resolve(`${root}/public`),
+  ROOT: resolve(root),
+  SRC: resolve(`${root}/src`),
+  SRC_CONFIG: resolve(`${root}/src/config`),
+  TS_CONFIG: {
+    development: resolve(`${root}/tsconfig.json`),
+    production: resolve(`${root}/tsconfig.production.json`),
+    staging: resolve(`${root}/tsconfig.production.json`)
+  }
+}

package/config/rspack/utils/plugins.js

@@ -0,0 +1,41 @@
+const refreshPlugin = require('@rspack/plugin-react-refresh')
+const rspack = require('@rspack/core')
+const { devEnvs, allEnvs } = require('./envs')
+const CompressionPlugin = require('compression-webpack-plugin')
+
+async function getEnvironmentPlugins(isDevelopment) {
+  if (isDevelopment) {
+    const res = await fetch(
+      `${process.env.SECURITY_BASE_URL}/security/oauth/token?grant_type=password&username=${process.env.USER_VLC}&password=${process.env.VLC_PASSWORD}`,
+      {
+        method: 'POST',
+        headers: { Authorization: process.env.AUTH_CLIENT_SECRET ?? '' }
+      }
+    )
+
+    const response = await res.json()
+
+    return [
+      new rspack.EnvironmentPlugin(devEnvs),
+      new rspack.DefinePlugin({
+        'process.env.TOKEN': JSON.stringify(response.access_token)
+      }),
+      new refreshPlugin()
+    ]
+  }
+
+  return [
+    new rspack.EnvironmentPlugin(allEnvs),
+    new rspack.CssExtractRspackPlugin({
+      filename: '[name].[contenthash].css',
+      chunkFilename: '[id]-app-tutor-ai-consumer.css'
+    }),
+    new CompressionPlugin({
+      algorithm: 'gzip'
+    })
+  ]
+}
+
+module.exports = {
+  getEnvironmentPlugins
+}

package/config/vitest/__mocks__/i18n.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { changeLanguage: () => new Promise(() => {}) },
+    ready: true
+  }),
+  Trans: ({ children }: PropsWithChildren) => children
+}))
+
+vi.mock('@/src/config/i18n', async () => ({
+  ...(await vi.importActual('@/src/config/i18n')),
+  useAppLang: vi.fn()
+}))

package/config/vitest/index.ts

@@ -0,0 +1 @@
+export * from '../../src/config/tests'

package/config/vitest/polyfills/global.js

@@ -0,0 +1,19 @@
+import { Blob, File } from 'node:buffer'
+import { TextDecoder, TextEncoder } from 'node:util'
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder }
+})
+
+import { fetch, FormData, Headers, Request, Response } from 'undici'
+
+Object.defineProperties(globalThis, {
+  fetch: { value: fetch, writable: true },
+  Blob: { value: Blob },
+  File: { value: File },
+  Headers: { value: Headers },
+  FormData: { value: FormData },
+  Request: { value: Request },
+  Response: { value: Response }
+})

package/config/vitest/setupTests.ts

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, configure } from '@testing-library/react'
+
+import { serviceWorker } from '@/src/config/tests/worker'
+
+configure({ testIdAttribute: 'data-test' })
+
+beforeEach(() => {
+  cleanup()
+})
+
+// Start worker before all tests
+beforeAll(() => {
+  serviceWorker.listen()
+})
+
+//  Close serviceWorker after all tests
+afterAll(() => {
+  serviceWorker.close()
+})
+
+// Reset handlers after each test `important for test isolation`
+afterEach(() => {
+  serviceWorker.resetHandlers()
+})

package/config/vitest/vitest.config.mts

@@ -0,0 +1,47 @@
+import react from '@vitejs/plugin-react'
+import { config } from 'dotenv'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: [
+      './config/vitest/setupTests.ts',
+      './config/vitest/__mocks__/i18n.tsx',
+      './config/vitest/polyfills/global.js',
+    ],
+    coverage: {
+      include: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+      exclude: [
+        '**/*.d.ts',
+        '**/@types/**/*',
+        'node_modules/**/*',
+        'src/config/**/*',
+        'src/**/__tests__/**/*',
+        'src/**/*.test.ts*',
+        'src/**/*.spec.ts*',
+        'src/**/*.mock.ts*',
+        'src/**/*.builder.ts*',
+        'src/app-injector.tsx',
+        'src/bootstrap.tsx',
+        'src/index.ts',
+      ],
+      reporter: ['text', 'html'],
+      provider: 'istanbul',
+      thresholds: {
+        branches: 3,
+        lines: 3,
+        functions: 3,
+        statements: 3,
+      },
+    },
+    env: {
+      ...config({
+        path: './environments/.env.test',
+      }).parsed,
+    },
+  },
+})

package/docs/README.md

@@ -0,0 +1,15 @@
+# app-tutor-ai-consumer
+
+Consumer components library for Hotmart Tutor Widget
+
+---
+## Components
+
+### component 1
+
+Description of component 1
+
+Example of usage:
+```
+...put a code example here
+```

package/docs/architecture/decisions/templates/template.md

@@ -0,0 +1,82 @@
+# TITLE
+
+Data: DATE
+
+## Status
+
+STATUS <!-- proposto, aceito, substituído -->
+
+## Responsáveis <!-- opcional -->
+
+[Listar todo mundo envolvido na decisão]
+
+## Estória Técnica <!-- opcional -->
+
+[Descrição | URL do ticket/issue]
+
+## Contexto e Descrição do Problema
+
+[Descreva o contexto e a descrição do problema, por exemplo, de forma livre usando duas a três frases. Você pode querer articular o problema na forma de uma pergunta.]
+
+## Critérios de Decisão <!-- opcional -->
+
+* [critério 1, por exemplo, uma característica, problema a ser resolvido, ...]
+* [critério 2, por exemplo, uma característica, problema a ser resolvido, ...]
+* … <!-- número de critérios pode variar -->
+
+## Opções Consideradas
+
+* [opção 1]
+* [opção 2]
+* [opção 3]
+* … <!-- número de opções pode variar -->
+
+## Resultado da Decisão
+
+Opção escolhida: "[opção 1]",
+porque [justificativa. por exemplo, única opção, que atende os critérios de decisão | que resolve força | … | sai melhor (veja abaixo)]
+.
+
+### Consequências Positivas <!-- opcional -->
+
+* [ex. melhoria dos atributos de qualidade, necessário acompanhamento de decisões, …]
+* …
+
+### Consequências Negativas <!-- opcional -->
+
+* [ex. comprometimento dos atributos de qualidade, necessário acompanhamento de decisões, …]
+* …
+
+## Prós e Contras das Opções <!-- opcional -->
+
+### [opção 1]
+
+[exemplo | descrição | apontamento para mais informações | …] <!-- opcional -->
+
+* Bom, porque [argumento a]
+* Bom, porque [argumento b]
+* Ruim, porque [argumento c]
+* … <!-- número de prós e contras pode variar -->
+
+### [opção 2]
+
+[exemplo | descrição | apontamento para mais informações | …] <!-- opcional -->
+
+* Bom, porque [argumento a]
+* Bom, porque [argumento b]
+* Ruim, porque [argumento c]
+* … <!-- número de prós e contras pode variar -->
+
+### [opção 3]
+
+[exemplo | descrição | apontamento para mais informações | …] <!-- opcional -->
+
+* Bom, porque [argumento a]
+* Bom, porque [argumento b]
+* Ruim, porque [argumento c]
+* … <!-- número de prós e contras pode variar -->
+
+## Links <!-- optional -->
+
+* [Tipo de Link] [Link para o ADR] <!-- exemplo: Refinado por [ADR-0005](0005-exemplo.md) -->
+* … <!-- número de links pode variar -->

package/environments/.env.development

@@ -0,0 +1,42 @@
+# APP
+ENVIRONMENT=staging
+APP_HOST=local.buildstaging.com
+APP_PORT=4223
+APP_NAME=app-tutor-ai-consumer
+
+# CAS Hotmart
+CAS_CLIENT_ID=b432cdd3-eb60-46bd-892b-5b450a65153e
+IS_CAS=true
+
+# IT SHOULD ONLY BE FILLED IN the .env.local file
+MEMBERSHIP_SLUG=
+
+# API
+API_CONTENT_PLATFORM_SPACE=https://api-content-platform-space-gateway.buildstaging.com
+API_HOTMART_TUTOR=https://api-smart-search-content.buildstaging.com
+
+# OPTIMIZELY
+
+OPTIMIZELY_SDK_KEY=B9rwquwdhY7XfEzaqZH94
+
+# FIREBASE
+FIREBASE_API_KEY=AIzaSyAq3KtkkTsJC5maHM_A9YJ-roI2IbvI5fM
+FIREBASE_AUTH_DOMAIN=omnichat-cad8c.firebaseapp.com
+FIREBASE_DATABASE_URL=https://omnichat-cad8c.firebaseio.com
+FIREBASE_MESSAGING_SENDER_ID=78513709264
+FIREBASE_PROJECT_ID=omnichat-cad8c
+FIREBASE_STORAGE_BUCKET=omnichat-cad8c.appspot.com
+
+# C3PO
+API_CONVERSATION_URL=https://c3po-api-conversations.buildstaging.com
+API_AUTH_URL=https://c3po-api-auth.buildstaging.com/v1
+
+# VLC
+USER_VLC=jonathan.braga@hotmart.com
+VLC_PASSWORD=jonathan03
+SECURITY_BASE_URL=https://api-security.buildstaging.com
+AUTH_CLIENT_SECRET=Basic OWRiYThiNTYtMWE5OC0xMWU5LWFiMTQtZDY2M2JkODczZDkzOmFiZmRiODVhLTFhOTgtMTFlOS1hYjE0LWQ2NjNiZDg3M2Q5Mw==
+
+# BUNDLE
+BUNDLE_PATH=https://local.buildstaging.com:4223
+

package/environments/.env.production

@@ -0,0 +1,41 @@
+# APP
+ENVIRONMENT=staging
+APP_HOST=local.buildstaging.com
+APP_PORT=4223
+APP_NAME=app-tutor-ai-consumer
+
+# CAS Hotmart
+CAS_CLIENT_ID=b432cdd3-eb60-46bd-892b-5b450a65153e
+IS_CAS=false
+
+APP_HOST_MF=
+
+# API
+API_CONTENT_PLATFORM_SPACE=https://api-content-platform-space-gateway.cp.hotmart.com
+API_HOTMART_TUTOR=https://api-smart-search-content.cp.hotmart.com
+
+# OPTIMIZELY
+
+OPTIMIZELY_SDK_KEY=GQb1vccBnQhjtEkXqAonY
+
+# FIREBASE
+FIREBASE_API_KEY=AIzaSyAq3KtkkTsJC5maHM_A9YJ-roI2IbvI5fM
+FIREBASE_AUTH_DOMAIN=omnichat-cad8c.firebaseapp.com
+FIREBASE_DATABASE_URL=https://omnichat-cad8c.firebaseio.com
+FIREBASE_MESSAGING_SENDER_ID=78513709264
+FIREBASE_PROJECT_ID=omnichat-cad8c
+FIREBASE_STORAGE_BUCKET=omnichat-cad8c.appspot.com
+
+# C3PO
+API_CONVERSATION_URL=
+API_AUTH_URL=
+
+# VLC
+USER_VLC=
+VLC_PASSWORD=
+SECURITY_BASE_URL=
+AUTH_CLIENT_SECRET=
+
+# BUNDLE
+BUNDLE_PATH=https://app-club-microfrontends-prod.cp.hotmart.com
+