customize

.vscode/settings.json

@@ -5,6 +5,6 @@
     "javascript.validate.enable": false,
     "typescript.validate.enable": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     }
 }

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18-alpine3.15
+
+RUN apk add --no-cache --virtual .gyp python2 make g++
+
+RUN yarn config set python $(which python2)
+
+RUN mkdir -p /usr/src/node-app && chown -R node:node /usr/src/node-app
+
+WORKDIR /usr/src/node-app
+
+COPY package.json yarn.lock ./
+
+COPY --chown=node:node . .
+
+USER node
+
+RUN rm -rf node_modules && yarn install --pure-lockfile
+
+EXPOSE 6060
+
+CMD ["yarn", "start"]

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3'
+
+services:
+  box-ui-elements:
+    container_name: box-ui-elements
+    build: .
+    environment:
+      - TOKEN=${TOKEN}
+      - FOLDERID=${FOLDERID}
+      - FILEID=${FILEID}
+    ports:
+      - "6060:6060"
+    volumes:
+      - .:/usr/src/node-app
+      - /usr/src/node-app/node_modules

i18n/ja-JP.properties

@@ -138,6 +138,8 @@ be.contentSharing.noAccessError = この項目へのアクセス権限があり
 be.contentSharing.notFoundError = この項目の共有リンクが見つかりませんでした。
 # Message that appears when collaborators cannot be added to the shared link in the ContentSharing Element.
 be.contentSharing.sendInvitesError = 招待を送信できませんでした。
+# Message that appears when external collaborators cannot be added to the shared link in the ContentSharing Element.
+be.contentSharing.sendExternalCollaborationInvitesError = 適用されているセキュリティポリシーにより外部コラボレーションが制限されているため、招待を送信できませんでした。
 # Message that appears when collaborators were added to the shared link in the ContentSharing Element.
 be.contentSharing.sendInvitesSuccess = コラボレータを招待しました。
 # Message that appears when the shared link in the ContentSharing Element was removed.
@@ -146,6 +148,8 @@ be.contentSharing.sharedLinkRemovalSuccess = この項目の共有リンクを
 be.contentSharing.sharedLinkSettingsUpdateSuccess = この項目の共有リンクを更新しました。
 # Message that appears when the shared link in the ContentSharing Element cannot be updated.
 be.contentSharing.sharedLinkUpdateError = この項目の共有リンクを更新できませんでした。
+# collaborationInviteRestricted 
+be.contentSharing.collaborationInviteRestricted = このフォルダにコラボレータを招待できるのは所有者と共同所有者のみです。
 # Text to show on menu item to delete the annotation comment
 be.contentSidebar.activityFeed.annotationActivity.annotationActivityDeleteMenuItem = 削除
 # Confirmation prompt text to delete the annotation comment
@@ -400,6 +404,16 @@ be.descriptionPlaceholder = 説明を入力
 be.download = ダウンロード
 # Message to the user to enter into drawing annotation mode
 be.drawAnnotation = 注釈描画モード
+# Label for an add to favorites action
+be.addToFavoritesLabel = お気に入りに追加
+# Message for an add to favorites action
+be.addToFavoritesMessage = お気に入りに追加しました。
+# Label for an remove favorites action
+be.removeFavoritesLabel = お気に入り解除
+# Message for an remove favorites action
+be.removeFavoritesMessage = お気に入りから削除しました。
+# This file is locked so I created a new one.
+be.createNewFile = ファイルがロックされているため新規作成しました。
 # Label for an edit action
 be.editLabel = 編集
 # Message to the user when there are no Open With integrations
@@ -538,6 +552,8 @@ be.personalFolder = 個人用フォルダ
 be.pointAnnotation = ポイント注釈モード
 # Label for preview action.
 be.preview = プレビュー
+# Label for preview in new tab action.
+be.previewInNewTab = 新しいタブでプレビュー
 # Error message when Preview fails due to the files call.
 be.previewError = プレビューを読み込めませんでした。ページを更新してください。
 # Error message when Preview fails due to the files call which is blocked by an access policy.
@@ -760,6 +776,8 @@ be.uploadEmptyWithFolderUploadEnabled = ファイルとフォルダをドラッ
 be.uploadError = アップロード中にネットワークエラーが発生しました。
 # Message shown when too many files are uploaded at once
 be.uploadErrorTooManyFiles = アップロードできるファイル数は最大{fileLimit}件です。
+# Error message to display when upload failed caused item locked
+be.uploadFailedCausedItemLocked = ロックされているためアップロードできません。
 # Message shown when user drag and drops files onto uploads in progress
 be.uploadInProgress = ドラッグアンドドロップしてファイルを追加する
 # Message shown on a device with no drag and drop support when there are no items to upload

package.json

@@ -39,6 +39,7 @@
         "url": "https://github.com/box/box-ui-elements/issues"
     },
     "scripts": {
+        "docker:release:cdn": "docker compose run --rm box-ui-elements yarn release:cdn && rm -rf ../public/lib/box-ui/18.1.0 && mkdir -p ../public/lib/box-ui/18.1.0 && docker cp box-ui-elements:./usr/src/node-app/dist/0.0.0-semantically-released/. ../public/lib/box-ui/18.1.0",
         "build": "yarn build:dev:dist",
         "build:ci:es": "yarn build:prod:es",
         "build:ci:dist": "LANGUAGE=en-US ENTRY=explorer REACT=true yarn build:prod:dist",
@@ -71,7 +72,7 @@
         "release:hotfix": "DIST=latest HOTFIX=true ./scripts/release.sh",
         "release:latest": "DIST=latest BRANCH=master ./scripts/release.sh",
         "release:next": "DIST=next BRANCH=next ./scripts/release.sh",
-        "release:cdn": "yarn setup; node ./scripts/prod.js",
+        "release:cdn": "yarn setup; LANGUAGE=ja-JP REACT=true yarn build:prod:dist; LANGUAGE=en-US REACT=true yarn build:prod:dist",
         "setup": "yarn install --frozen-lockfile; npm-run-all clean build:i18n",
         "start": "npm-run-all setup start:examples",
         "start:dev": "yarn setup; LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider node --max_old_space_size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config scripts/webpack.config.js --mode development",
@@ -111,13 +112,6 @@
         "*.scss": ["prettier --write --parser=scss", "stylelint --syntax scss --fix", "git add"],
         "*.css": ["prettier --write --parser=css", "stylelint --syntax css --fix", "git add"]
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged",
-            "pre-push": "./scripts/prepush.sh",
-            "commit-msg": "commitlint -e"
-        }
-    },
     "engines": {
         "node": ">=18.x",
         "yarn": ">=1.10.0"

scripts/build_locale.js

@@ -11,7 +11,7 @@ module.exports = (locale, react, callback) => {
     try {
         console.log(`Building ${locale} with react=${react}...`);
         // build assets for a single locale
-        execSync(`time LANGUAGE=${locale} REACT=${react} yarn build:prod:dist`);
+        execSync(`LANGUAGE=${locale} REACT=${react} yarn build:prod:dist`);
         callback();
     } catch (error) {
         console.error(`Error: Failed to build ${locale}`);

scripts/prod.js

@@ -1,12 +1,13 @@
 /* eslint-disable */
 const workerFarm = require('worker-farm');
-const locales = require('@box/languages');
+const locales = ['ja-JP', 'en-US'];
 const numCPUs = require('os').cpus().length;
 const execSync = require('child_process').execSync;
 const path = require('path');
+const {BOX_UI_ELEMENTS_VERSION} = require("../../app/constants/box");
 
 const filename = path.basename(__filename);
-const bundleCount = locales.length * 2; // One with react, and one without
+const bundleCount = locales.length;
 
 let counter = 0;
 const workers = workerFarm(
@@ -17,15 +18,30 @@ const workers = workerFarm(
     require.resolve('./build_locale.js')
 );
 
-[true, false].forEach((react) => {
+let hasError = false;
+let isCompleted = false;
+
+[true].forEach((react) => {
     locales.forEach((locale) => {
         workers(locale, react, (error) => {
             if (++counter === bundleCount || error) {
+
+              isCompleted = counter === bundleCount
+
+              if (!hasError && isCompleted && !error) {
+                  execSync(
+                      `rm -rf ../public/lib/box-ui/${BOX_UI_ELEMENTS_VERSION} && mkdir -p ../public/lib/box-ui/${BOX_UI_ELEMENTS_VERSION}`
+                  )
+
+                  execSync(`cp -r dist/0.0.0-semantically-released/* ../public/lib/box-ui/${BOX_UI_ELEMENTS_VERSION}`)
+              }
+
                 // terminate after all locales have been processed
                 workerFarm.end(workers);
             }
 
             if (error) {
+                hasError = true
                 // kill the node process that spawns the workers as well as all processes been spawned
                 execSync(`ps ax | grep "${filename}" | cut -b1-06 | xargs -t kill`);
             }

scripts/styleguide.setup.js

@@ -2,7 +2,7 @@ import { IntlProvider } from 'react-intl';
 import features from '../examples/src/features';
 // Constants
 global.FEATURES = global.FEATURES || features;
-global.FILE_ID = global.FILE_ID || __FILEID__ || '415542803939'; // eslint-disable-line
+global.FILE_ID = global.FILE_ID || __FILEID__ || '1024911607909'; // eslint-disable-line
 global.FOLDER_ID = global.FOLDER_ID || __FOLDERID__ || '69083462919'; // eslint-disable-line
 // NOTE: The token used is a readonly token accessing public data in a demo enterprise. DO NOT PUT A WRITE TOKEN
 global.TOKEN = global.TOKEN || __TOKEN__ || 'P1n3ID8nYMxHRWvenDatQ9k6JKzWzYrz'; // eslint-disable-line

src/api/APIFactory.js

@@ -35,10 +35,12 @@ import AnnotationsAPI from './Annotations';
 import OpenWithAPI from './OpenWith';
 import MetadataQueryAPI from './MetadataQuery';
 import BoxEditAPI from './box-edit';
+import CollectionsAPI from './Collections';
 import { DEFAULT_HOSTNAME_API, DEFAULT_HOSTNAME_UPLOAD, TYPE_FOLDER, TYPE_FILE, TYPE_WEBLINK } from '../constants';
 import type { ItemType } from '../common/types/core';
 import type { APIOptions } from '../common/types/api';
 import type APICache from '../utils/Cache';
+import FolderListItemsAPI from './FolderListItems';
 
 type ItemAPI = FolderAPI | FileAPI | WebLinkAPI;
 
@@ -459,8 +461,10 @@ class APIFactory {
      *
      * @return {FolderAPI} FolderAPI instance
      */
-    getFolderAPI(): FolderAPI {
-        this.destroy();
+    getFolderAPI(shouldDestroy: boolean = true): FolderAPI {
+        if (shouldDestroy) {
+            this.destroy();
+        }
         this.folderAPI = new FolderAPI(this.options);
         return this.folderAPI;
     }
@@ -830,6 +834,36 @@ class APIFactory {
         this.annotationsAPI = new AnnotationsAPI(this.options);
         return this.annotationsAPI;
     }
+
+    /**
+     * API for the App Colleciton endpoint
+     *
+     * @param {boolean} shouldDestroy - true if the factory should destroy before returning the call
+     * @return {AppIntegrationsAPI} AppIntegrationsAPI instance
+     */
+    getCollectionAPI(shouldDestroy: boolean): CollectionsAPI {
+        if (shouldDestroy) {
+            this.destroy();
+        }
+
+        this.collectionsAPI = new CollectionsAPI(this.options);
+        return this.collectionsAPI;
+    }
+
+    /**
+     * API for the List items in folder endpoint
+     *
+     * @param {boolean} shouldDestroy - true if the factory should destroy before returning the call
+     * @return {AppIntegrationsAPI} AppIntegrationsAPI instance
+     */
+    getFolderListItemsAPI(shouldDestroy: boolean): FolderListItemsAPI {
+        if (shouldDestroy) {
+            this.destroy();
+        }
+
+        this.folderListItemsAPI = new FolderListItemsAPI(this.options);
+        return this.folderListItemsAPI;
+    }
 }
 
 export default APIFactory;

src/api/Collections.js

@@ -0,0 +1,48 @@
+import Base from 'api/Base';
+import { getTypedFileId } from 'utils/file';
+
+class Collections extends Base {
+    /**
+     * API URL for files
+     *
+     * @param {string} [id] - Optional file id
+     * @return {string} base url for files
+     */
+    getUrl(id: string): string {
+        return `${this.getBaseApiUrl()}/collections`;
+    }
+
+    /**
+     * Requests all of a user's collection objects.
+     *
+     * @returns {Promise<Object>} A promise resolving to the collection of collections
+     */
+    async getAll() {
+        const { data } = await this.xhr.get({
+            url: this.getUrl(),
+            id: getTypedFileId(0),
+        });
+
+        return data;
+    }
+
+    async getFavoriteCollection() {
+        const { entries } = await this.getAll();
+
+        if (!entries) {
+            return null;
+        }
+
+        return entries.find(collection => collection.collection_type === 'favorites');
+    }
+
+    async getFavoriteCollectionItems(collectionId) {
+        const { data } = await this.xhr.get({
+            url: `${this.getBaseApiUrl()}/collections/${collectionId}/items`,
+        });
+
+        return data;
+    }
+}
+
+export default Collections;