Merge branch 'master' into devin-ai/convert-ts-nav-button-1740441688

Author: tjuanitas

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   default:
     docker:
-      - image: cimg/node:18.18
+      - image: cimg/node:20.18
         user: root
     resource_class: large
     working_directory: ~/buie
@@ -111,6 +111,7 @@ jobs:
    steps:
      - checkout
      - setup-workspace
+     - build-locales
      - run:
          name: Cypress run
          command: yarn --cwd /buie test:e2e

.flowconfig

@@ -1,7 +1,6 @@
 [ignore]
 <PROJECT_ROOT>/scripts/
 <PROJECT_ROOT>/es/
-<PROJECT_ROOT>/.*/dist/.*
 <PROJECT_ROOT>/reports/
 <PROJECT_ROOT>/node_modules/babel-plugin-flow-react-proptypes.*
 <PROJECT_ROOT>/node_modules/conventional-changelog*
@@ -13,12 +12,13 @@
 <PROJECT_ROOT>/node_modules/draft-js*
 <PROJECT_ROOT>/node_modules/findup*
 <PROJECT_ROOT>/node_modules/config-chain*
-<PROJECT_ROOT>/node_modules/puppeteer*
-<PROJECT_ROOT>/node_modules/jest-puppeteer*
-<PROJECT_ROOT>/node_modules/start-server-and-test*
-<PROJECT_ROOT>/node_modules/jest-image-snapshot*
 <PROJECT_ROOT>/node_modules/react-styleguidist*
 <PROJECT_ROOT>/node_modules/immer*
+<PROJECT_ROOT>/node_modules/immutable*
+<PROJECT_ROOT>/node_modules/react-animate-height*
+<PROJECT_ROOT>/node_modules/react-beautiful-dnd*
+<PROJECT_ROOT>/node_modules/raf-sch*
+<PROJECT_ROOT>/node_modules/@box/react-virtualized*
 <PROJECT_ROOT>/.*/__tests__/.*
 <PROJECT_ROOT>/.*/*.stories.*
 # ignoring the flow check for this component specifically because it increased the scope too much when we are planning to switch to typescript anyways

.gitignore

@@ -20,6 +20,7 @@ npm-error.log
 reports
 scripts/rsync.json
 styleguide
+storybook
 test/screenshots
 test/videos
 test/dev.html

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/iron

.storybook/gitignore

@@ -0,0 +1,5 @@
+/*
+!.gitignore
+!LICENSE
+!THIRD_PARTY_LICENSES
+!docs

.storybook/main.ts

@@ -5,13 +5,16 @@ import path from 'path';
 
 const language = process.env.LANGUAGE;
 
+const TranslationsPlugin = require('@box/frontend/webpack/TranslationsPlugin');
+const { translationDependencies } = require('../i18n.config');
+
 const config: {
     stories: string[];
-    addons: (string | { name: string; options: { sass: { implementation: any } } })[],
+    addons: (string | { name: string; options: { sass: { implementation: any } } })[];
     framework: { name: string };
     staticDirs: string[];
     webpackFinal: (config: any) => Promise<any>;
-    typescript: any
+    typescript: any;
 } = {
     stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
@@ -31,7 +34,7 @@ const config: {
         '@storybook/addon-docs',
         '@storybook/addon-webpack5-compiler-babel',
         '@chromatic-com/storybook',
-        'storybook-react-intl'
+        'storybook-react-intl',
     ],
 
     framework: {
@@ -55,11 +58,18 @@ const config: {
             'msw/native': path.resolve('node_modules/msw/lib/native/index.mjs'),
         };
 
+        config.plugins.push(
+            new TranslationsPlugin({
+                generateBundles: true,
+                additionalMessageData: translationDependencies.map(pkg => `${pkg}/i18n/[language]`),
+            }),
+        );
+
         return config;
     },
     typescript: {
-        reactDocgen: 'react-docgen-typescript'
-    }
+        reactDocgen: 'react-docgen-typescript',
+    },
 };
 
 export default config;

.storybook/preview-body.html

@@ -1,26 +1,7 @@
 <style>
-    #root {
-        padding: 16px;
-    }
-
-    .be.bce {
-        height: 500px;
-    }
-
-    .be.bcp {
-        height: 500px;
-    }
-
-    .be.bcu {
-        height: 400px;
-    }
-
-    .be.bcpr {
-        height: 900px;
-    }
-
-    .be.bcs {
-        width: 1000px;
-        height: 900px;
+    html,
+    body,
+    #storybook-root {
+        height: 100%;
     }
 </style>

.storybook/typings.d.ts

@@ -2,7 +2,7 @@
 // @ts-nocheck
 
 declare const global: {
-    FEATURES: Record<string, boolean>;
+    FEATURE_FLAGS: Record<string, boolean>;
     FILE_ID: string;
     FOLDER_ID: string;
     TOKEN: string;
@@ -12,27 +12,3 @@ declare module '*.md' {
     const content: string;
     export = content;
 }
-
-namespace BoxVisualTestUtils {
-    import { Page } from 'puppeteer';
-
-    async function gotoStory(id: string): Promise<Page>;
-
-    async function takeScreenshot(id: string): Promise<Buffer>;
-
-    async function takeScreenshotAfterInput(
-        id: string,
-        selector: string,
-        action?: string,
-        userInput?: string,
-        afterInputSelector?: string,
-    ): Promise<Buffer>;
-
-    async function takeModalScreenshot(id: string, width?: number, height?: number): Promise<Buffer>;
-
-    async function blurInput(selector: string): Promise<void>;
-
-    async function clearInput(selector: string, page: Page): Promise<void>;
-
-    async function sleep(time?: number): Promise<void>;
-}

CODEOWNERS

@@ -8,12 +8,13 @@
 
 # Source
 /src/                                       @box/webapp
-/src/*                                      @box/preview @box/ui-elements
-/src/api/                                   @box/preview @box/ui-elements
+/src/*                                      @box/ui-elements
+/src/api/                                   @box/ui-elements
 /src/api/box-edit/                          @box/partners
 /src/api/Feed.js                            @box/preview
 /src/api/uploads/                           @box/create-communicate
-/src/elements/                              @box/preview @box/ui-elements
+/src/components/                            @box/ui-elements
+/src/elements/                              @box/ui-elements
 /src/elements/content-explorer/             @box/ui-elements
 /src/elements/content-open-with/            @box/partners
 /src/elements/content-picker/               @box/ui-elements

cypress.config.ts

@@ -10,13 +10,7 @@ export default defineConfig({
     viewportHeight: 1260,
     viewportWidth: 1600,
     e2e: {
-        // We've imported your old cypress plugins here.
-        // You may want to clean this up later by importing these.
-        setupNodeEvents(on, config) {
-            // eslint-disable-next-line global-require,@typescript-eslint/no-var-requires
-            return require('./test/plugins/index.js')(on, config);
-        },
-        baseUrl: 'http://localhost:6060/#',
+        baseUrl: 'http://localhost:6061',
         specPattern: 'test/integration/**/*.cy.{js,jsx,ts,tsx}',
         supportFile: 'test/support/index.js',
     },