@edx/frontend-component-ai-translations-edx

frontend-component-ai-translations-edx

AI Translations UI components

Getting Started

• Clone repo into the src folder in edx directory locally

• Make sure you are running node 18 and run npm install

• Follow the readme to set course authoring app locally https://github.com/openedx/frontend-app-course-authoring(this should also include lms+cms). The comment in https://2u-internal.atlassian.net/browse/NOVA-89?focusedCommentId=738274 can also be used as a supplement.

• Right now, we don't have our package in the cloud/npm(this is a work in progress). To install frontend-component-ai-translations-edx in the course-authoring app, you need to make use of npm link.

  • Run npm link in the frontend-component-ai-translations-edx directory and run npm link @edx/frontend-component-ai-translations-edx in the frontend-app-course-authoring directory. This should install the @edx/frontend-component-ai-translations-edx package into node_modules.
  • To use the exported app component, you could import and add it around here https://github.com/openedx/frontend-app-course-authoring/blob/master/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx#L109. Although, there is work been done to achieve that.

• In the course authoring app, follow the guide to use your local verison of frontend-component-ai-translations-edx. The module.config.js in the frontend-app-course-authoring repo will be: ` module.exports = { /* Modules you want to use from local source code. Adding a module here means that when this app runs its build, it'll resolve the source from peer directories of this app.

  moduleName: the name you use to import code from the module. dir: The relative path to the module's source code. dist: The sub-directory of the source code where it puts its build artifact. Often "dist".

  To use a module config:

  1. Copy module.config.js.example and remove the '.example' extension

  2. Uncomment modules below in the localModules array to load them from local source code.

  3. Remember to re-build the production builds of those local modules if they have one. See note below. / localModules: [ /******************************************************************************************** IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build step that populates their 'dist' directories, you must manually run that step. For paragon and frontend-platform, for instance, you need to run npm run build in the repo before module.config.js will work. **********************************************************************************************/

     // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' }, // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' }, // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' }, // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' }, // NOTE: This is the relative path of the frontend-component-ai-translations-edx in the frontend-app-course-authoring container. { moduleName: '@edx/frontend-component-ai-translations-edx', dir: '../src/frontend-component-ai-translations-edx', dist: 'dist' }, ], }; `