WIP

box · Jun 25, 2024 · 1bfe089 · 1bfe089
1 parent 90bc804
commit 1bfe089
Show file tree

Hide file tree

Showing 24 changed files with 892 additions and 1,285 deletions.
diff --git a/i18n/en-US.properties b/i18n/en-US.properties
@@ -34,6 +34,12 @@ be.activitySidebarFilter.status.tasks = Tasks
 be.add = Add
 # Text to display when app is disabled by applied access policy
 be.additionalTab.blockedByShieldAccessPolicy = Use of this app is blocked due to a security policy.
+# Error message when an annotation deletion fails
+be.annotationThread.errorDeleteAnnotation = There was an error deleting this item.
+# Error message when an annotation update fails
+be.annotationThread.errorEditAnnotation = This annotation could not be modified.
+# Error message when an annotation fetch fails
+be.annotattionThread.errorFetchAnnotation = The annotation could not be fetched.
 # Error message when an app activity deletion fails
 be.api.appActivityDeleteErrorMessage = There was an error deleting this item.
 # Error message when a comment creation fails due to a conflict

diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
         "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 --max_old_space_size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config scripts/webpack.config.js --mode development",
-        "start:examples": "EXAMPLES=true LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js server --config scripts/styleguide.config.js --mode development",
+        "start:examples": "EXAMPLES=true LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/react-styleguidist/lib/bin/styleguidist.js server --config scripts/styleguide.config.js --mode development",
         "start:npm": "yarn setup; yarn build:dev:es",
         "start:storybook": "LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development storybook dev -p 6061",
         "start:storybook:ci": "yarn start:storybook --ci",
@@ -288,7 +288,7 @@
         "react-responsive": "8.2.0",
         "react-router-dom": "^5.0.0",
         "react-scrollbars-custom": "^4.0.21",
-        "react-styleguidist": "^8.0.6",
+        "react-styleguidist": "12.0.1",
         "react-test-renderer": "^16.13.1",
         "react-tether": "1.0.5",
         "react-textarea-autosize": "^8.5.3",

diff --git a/scripts/styleguide.config.js b/scripts/styleguide.config.js
@@ -13,7 +13,6 @@ const allSections = [
         name: 'Elements',
         components: () => [
             '../src/elements/content-explorer/ContentExplorer.js',
-            '../src/elements/content-open-with/ContentOpenWith.js',
             '../src/elements/content-picker/ContentPicker.js',
             '../src/elements/content-preview/ContentPreview.js',
             '../src/elements/content-sharing/ContentSharing.js',

diff --git a/scripts/styleguide.setup.js b/scripts/styleguide.setup.js
@@ -9,4 +9,33 @@ global.TOKEN = global.TOKEN || __TOKEN__ || 'P1n3ID8nYMxHRWvenDatQ9k6JKzWzYrz';
 global.PROPS = global.PROPS || {}; // eslint-disable-line
 
 // Components
+global.Avatar = require('../src/components/avatar').default;
+global.Button = require('../src/components/button').default;
+global.Flyout = require('../src/components/flyout').Flyout;
+
 global.IntlProvider = IntlProvider;
+global.Label = require('../src/components/label').default;
+global.Link = require('../src/components/link').default;
+global.ModalActions = require('../src/components/modal/ModalActions').default;
+global.ModalDialog = require('../src/components/modal/ModalDialog').default;
+global.Overlay = require('../src/components/flyout').Overlay;
+global.PlainButton = require('../src/components/plain-button').default;
+global.PrimaryButton = require('../src/components/primary-button').default;
+global.SearchForm = require('../src/components/search-form').default;
+global.SelectMenuLinkItem = require('../src/components/menu').SelectMenuLinkItem;
+global.Slide = require('../src/components/slide-carousel').Slide;
+global.Table = require('../src/components/table').Table;
+global.TableBody = require('../src/components/table').TableBody;
+global.TableCell = require('../src/components/table').TableCell;
+global.TableHeader = require('../src/components/table').TableHeader;
+global.TableHeaderCell = require('../src/components/table').TableHeaderCell;
+global.TableRow = require('../src/components/table').TableRow;
+global.TextArea = require('../src/components/text-area').default;
+global.TextInput = require('../src/components/text-input').default;
+
+// Icons
+global.IconHelp = require('../src/icons/general/IconHelp').default;
+
+// Form Elements
+global.TextAreaElement = require('../src/components/form-elements/text-area').default;
+global.TextInputElement = require('../src/components/form-elements/text-input').default;
diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js
@@ -77,7 +77,6 @@ function getConfig(isReactExternalized) {
         },
         devServer: {
             host: '0.0.0.0',
-            stats,
         },
         resolveLoader: {
             modules: [path.resolve('src'), path.resolve('node_modules')],

diff --git a/src/components/breadcrumb/README.md b/src/components/breadcrumb/README.md
@@ -5,7 +5,7 @@ const IconHome = require('box-ui-elements/es/icons/general/IconHome').default;
 
 <Breadcrumb label="Breadcrumb">
     <IconHome />
-    <Link>Box Engineering</Link>
+    <a>Box Engineering</a>
 </Breadcrumb>
 ```
 
@@ -15,10 +15,10 @@ const IconHome = require('box-ui-elements/es/icons/general/IconHome').default;
 
 <Breadcrumb label="Breadcrumb">
     <IconHome />
-    <Link>Box Engineering</Link>
-    <Link>Frameworks</Link>
-    <Link>Front End</Link>
-    <Link>React</Link>
-    <Link>Box React UI</Link>
+    <a>Box Engineering</a>
+    <a>Frameworks</a>
+    <a>Front End</a>
+    <a>React</a>
+    <a>Box React UI</a>
 </Breadcrumb>
 ```
diff --git a/src/components/flyout/Flyout.md b/src/components/flyout/Flyout.md
@@ -7,9 +7,6 @@ which have documentation on parameters used by this component (e.g., `offset`).
 **Bottom Right**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout closeOnClickOutside={ false } className="hellooo">
     <Button>Nothing to see here</Button>
     <Overlay>
@@ -26,9 +23,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Bottom Left**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="bottom-left">
     <Button>Bottom Left</Button>
     <Overlay>
@@ -42,9 +36,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Bottom Center**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="bottom-center">
     <Button>Bottom Center</Button>
     <Overlay>
@@ -58,9 +49,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Top Left**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="top-left">
     <Button>Top Left</Button>
     <Overlay>
@@ -74,9 +62,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Top Right**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="top-right">
     <Button>Top Right</Button>
     <Overlay>
@@ -90,9 +75,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Top Center**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="top-center">
     <Button>Top Center</Button>
     <Overlay>
@@ -106,9 +88,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Middle Right**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="middle-right">
     <Button>Middle Right</Button>
     <Overlay>
@@ -122,9 +101,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Middle Left**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="middle-left">
     <Button>Middle Left</Button>
     <Overlay>
@@ -138,9 +114,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Open on Hover**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout openOnHover>
     <Button>Open on Hover</Button>
     <Overlay>
@@ -157,10 +130,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Complex**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-const IconHelp = require('box-ui-elements/es/icons/general/IconHelp').default;
-
 <Flyout className="amsterdam-survey-overlay" offset="0 0">
     <PlainButton className="amsterdam-survey-button">
         <IconHelp />

diff --git a/src/components/form-elements/text-area/README.md b/src/components/form-elements/text-area/README.md
@@ -1,9 +1,7 @@
 ### Examples
 **Basic**
 ```
-const TextArea = require('box-ui-elements/es/components/form-elements/text-area').default;
-
-<TextArea
+<TextAreaElement
     name="textarea"
     label="Your story"
     placeholder="Once upon a time"
@@ -12,8 +10,6 @@ const TextArea = require('box-ui-elements/es/components/form-elements/text-area'
 
 **Validated Text Area**
 ```
-const TextArea = require('box-ui-elements/es/components/form-elements/text-area').default;
-
 function textAreaValidator(value) {
     if (!value.includes('www')) {
         return {
@@ -23,7 +19,7 @@ function textAreaValidator(value) {
     }
     return null;
 };
-<TextArea
+<TextAreaElement
     name="textarea"
     label="Validated Text Area"
     placeholder="Once upon a time"

diff --git a/src/components/form-elements/text-input/README.md b/src/components/form-elements/text-input/README.md
@@ -1,9 +1,7 @@
 ### Examples
 **Email**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     label="Email Address"
     name="email"
     placeholder="[email protected]"
@@ -13,9 +11,7 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Url**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     label="Url"
     name="url"
     placeholder="https://box.com"
@@ -24,8 +20,6 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Must Say Box**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
 function customFn(value) {
     if (value !== 'box') {
         return {
@@ -36,7 +30,7 @@ function customFn(value) {
     return null;
 };
 
-<TextInput
+<TextInputElement
     label="Must Say Box"
     name="customValidationFunc"
     placeholder="Not Box"
@@ -46,9 +40,7 @@ function customFn(value) {
 ```
 **Minimum length**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     minLength={ 3 }
     name="minlenCheck"
     label="Minimum length"
@@ -58,9 +50,7 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Maximum length**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     maxLength={ 5 }
     name="maxlenCheck"
     label="Maximum length"
@@ -70,9 +60,7 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Tooltip on hover**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     name="tooltipCheck"
     label="Tooltip on hover"
     placeholder="Hover over the label"
@@ -82,9 +70,7 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Label Hidden**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
- <TextInput
+ <TextInputElement
     label="This label text should be hidden"
     name="hidden label"
     placeholder="Hidden (but accessible) label text"
@@ -94,9 +80,7 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Disabled**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     name="disabled"
     isDisabled
     label="Disabled"
@@ -106,9 +90,7 @@ const TextInput = require('box-ui-elements/es/components/form-elements/text-inpu
 ```
 **Loading**
 ```
-const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
-
-<TextInput
+<TextInputElement
     name="loading"
     isDisabled
     isLoading

diff --git a/src/components/menu/Menu.md b/src/components/menu/Menu.md
@@ -14,7 +14,6 @@ Following the following standards: [WAI-ARIA Menu](https://www.w3.org/TR/wai-ari
 **Basic Menu**
 
 ```js
-const Menu = require('box-ui-elements/es/components/menu').Menu;
 const MenuItem = require('box-ui-elements/es/components/menu').MenuItem;
 const MenuSeparator = require('box-ui-elements/es/components/menu')
   .MenuSeparator;
@@ -28,7 +27,7 @@ const MenuSectionHeader = require('box-ui-elements/es/components/menu')
   <MenuSeparator />
   <MenuSectionHeader>Menu Section</MenuSectionHeader>
   <MenuLinkItem>
-    <Link href="/#">Awesome Link</Link>
+    <a href="/#">Awesome Link</a>
   </MenuLinkItem>
 </Menu>;
 ```
@@ -79,25 +78,19 @@ const SubmenuItem = require('box-ui-elements/es/components/menu').SubmenuItem;
 **Select Menu**
 
 ```
-const Menu = require('box-ui-elements/es/components/menu').Menu;
-const MenuItem = require('box-ui-elements/es/components/menu').MenuItem;
-const MenuSeparator = require('box-ui-elements/es/components/menu').MenuSeparator;
-const MenuLinkItem = require('box-ui-elements/es/components/menu').MenuLinkItem;
-
 <Menu>
     <SelectMenuLinkItem isSelected>
-        <Link href="#">View Profile</Link>
+        <a href="#">View Profile</a>
     </SelectMenuLinkItem>
     <SelectMenuLinkItem>
-        <Link href="#">Awesome Link</Link>
+        <a href="#">Awesome Link</a>
     </SelectMenuLinkItem>
 </Menu>
 ```
 
 **Menu with new child when window is resized to < 700px**
 
 ```js
-const Menu = require('box-ui-elements/es/components/menu').Menu;
 const MenuItem = require('box-ui-elements/es/components/menu').MenuItem;
 
 class MenuWithChildOnResize extends React.Component {