@imposium-hub/components 2.16.0-0 → 3.0.0-0

package/less/components/header.less

@@ -72,7 +72,7 @@
 }
 
 .anchor {
-    .font-style();
+    .font-style;
     cursor: pointer;
     font-size: @fontSizeDefault;
     text-decoration: none;
@@ -87,7 +87,7 @@
 }
 
 .circle-style {
-    .no-select();
+    .no-select;
     border-radius: 50%;
     width: 28px;
     height: 28px;
@@ -105,12 +105,12 @@
     cursor: pointer;
     outline: none;
     box-sizing: border-box;
-    .no-select();
-    .font-style();
+    .no-select;
+    .font-style;
 }
 
 .faux-select {
-    .btn-reset();
+    .btn-reset;
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -128,7 +128,7 @@
 }
 
 .imposium-header {
-    .flex-row();
+    .flex-row;
     z-index: 100000;
     position: absolute;
     top: 0px;
@@ -141,17 +141,17 @@
     line-height: 1.5;
 
     .inner-content {
-        .flex-row();
+        .flex-row;
         width: 100%;
         max-width: @defaultMaxWidth;
         justify-content: space-between;
         margin: 0px 15px;
 
         .inner-left {
-            .flex-row();
+            .flex-row;
 
             .title {
-                .flex-row();
+                .flex-row;
                 margin-right: 20px;
                 text-decoration: none;
 
@@ -174,7 +174,7 @@
                 }
 
                 .heading {
-                    .font-style();
+                    .font-style;
                     margin: 0;
                     font-size: 20px;
                     font-weight: normal;
@@ -182,44 +182,43 @@
             }
 
             .btn-toggle-services {
-                .faux-select();
+                .faux-select;
             }
         }
 
         .inner-right {
-            .flex-row();
+            .flex-row;
 
             a{
                 border:none;
             }
 
-            .creativeMgrBtn {
-                position: relative;
-                top: 1px;
-                margin-right:10px;
-            }
-
             .additional-buttons{
                 margin-right:10px;
+
+                .creativeMgrBtn {
+                    position: relative;
+                    top: 1px;
+                }
             }
             
             .btn-help {
-                .circle-style();
+                .circle-style;
                 margin-left: 15px;
                 font-size:28px;
             }
             
             .btn-toggle-orgs {
-                .btn-reset();
-                .circle-style();
+                .btn-reset;
+                .circle-style;
                 margin-left: 15px;
             }
             
             .btn-toggle-story {
-                .faux-select();
+                .faux-select;
 
                 .story-name {
-                    .ellipsis();
+                    .ellipsis;
                     text-transform: none;
                     font-size: 17px;
                     max-width: 220px;
@@ -227,7 +226,7 @@
             }
 
             .btn-logout {
-                .btn-reset();
+                .btn-reset;
                 padding: 10px 0px;
                 font-size: 14px;
             }
@@ -248,7 +247,7 @@
             box-sizing: border-box;
 
             .service-menu-heading {
-                .secondary-font-style();
+                .secondary-font-style;
                 font-size: @fontSizeDefault;
                 text-transform: uppercase;
                 color: #b1b1b1;
@@ -273,7 +272,7 @@
                     }
 
                     a {
-                        .anchor();
+                        .anchor;
                         display: flex;
                         align-items: center;
                         color: white;
@@ -334,14 +333,14 @@
             color: white
         }
         .orgs-menu-active-org {
-            .font-style();
-            .flex-row();
+            .font-style;
+            .flex-row;
             padding: 10px;
             border-bottom: 1px solid @defaultBorderColor;
             background-color: @defaultBorderColor;
 
             .active-first-char {
-                .circle-style();
+                .circle-style;
                 width: 40px;
                 height: 40px;
                 font-size: 18px;
@@ -353,7 +352,7 @@
             color: white;
         }
         .menu-item, .react-select__option {
-            .btn-reset();
+            .btn-reset;
             width: 100%;
             padding: 10px;
             font-size: 12px;
@@ -363,12 +362,12 @@
                 background-color: #494949
             }
             .inactive-first-char {
-               .circle-style();
+               .circle-style;
                margin-right: 10px;
             }
 
             &.inactive-org-button {
-                .flex-row();
+                .flex-row;
                 box-sizing: border-box;
                 padding: 10px;
             }
@@ -379,13 +378,13 @@
         }
 
         .orgs-menu-footer {
-            .flex-row();
+            .flex-row;
             justify-content: space-between;
             border-top: 1px solid @defaultBorderColor;
 
             .email {
-                .secondary-font-style();
-                .ellipsis();
+                .secondary-font-style;
+                .ellipsis;
                 color: #b1b1b1;
                 font-size: 12px;
                 text-transform: lowercase;
@@ -393,7 +392,7 @@
             }
 
             .btn-logout {
-                .btn-reset();
+                .btn-reset;
                 font-size: 12px;
                 padding: 10px 15px;
             }

package/less/components/modal.less

@@ -4,10 +4,10 @@
 .modal{
 	
 	z-index:10000;
-	.layer();
+	.layer;
 
 	.modal-bg{
-		.layer();
+		.layer;
 		background: fadeout(@backgroundDark, 20%);
 	}
 

package/less/components/player.less

@@ -1,6 +1,6 @@
 .media-player{
 
-	.layer();
+	.layer;
 
 	.inner-viewer{
 		position:absolute;
@@ -9,7 +9,7 @@
 			width:100%;
 			height:100%;
 			outline:1px solid darken(@backgroundDark, 10%);
-			.chess()
+			.chess
 		}
 
 		video{

package/less/components/publish-wizard.less

@@ -1,32 +1,7 @@
 
 .publish-wizard{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-top: 30px;
-    box-sizing: border-box;
-    overflow: hidden;
-
-    > div:last-of-type {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
 
-    .publish-wizard-step--review {
-        flex: 1;
-        overflow-y: auto;
-        min-height: 0;
-    }
-
-    .lower-buttons {
-        flex-shrink: 0;
-        padding-bottom: 5px;
-        padding-top: 5px;
-        width: 100%;
-        text-align: center;
-    }
+    padding-top:30px;
 
     .missingColumns{
         margin: 15px;
@@ -99,46 +74,16 @@
         background-color: @backgroundLight;
     }
 
-    .link-wrapper{
-        display: flex;
-        flex-wrap: wrap;
+    .lower-buttons{
+        margin-top:10px;
+        left:0px;
+        width:100%;
+        text-align: center;
     }
 
-    .publish-notes-wrapper {
+    .link-wrapper{
         display: flex;
-        flex-direction: column;
-        gap: 6px;
-        margin-top: 14px;
-        width: 100%;
-    }
-
-    .publish-notes-label {
-        font-size: @sectionFontSize;
-        color: white;
-        font-weight: 600;
-    }
-
-    .publish-notes-textarea {
-        width: 100%;
-        min-height: 72px;
-        box-sizing: border-box;
-        padding: 8px 10px;
-        background: @backgroundDark;
-        color: white;
-        border: 1px solid @backgroundHighlight;
-        border-radius: 3px;
-        font-family: inherit;
-        font-size: @sectionFontSize;
-        resize: vertical;
-
-        &::placeholder {
-            color: @backgroundHighlight;
-        }
-
-        &:focus {
-            outline: none;
-            border-color: @primary;
-        }
+        flex-wrap: wrap;
     }
 
     .big-link{
@@ -234,14 +179,4 @@
       font-weight: bold;
       font-size:14px;
     }
-}
-
-.crm-publish-name{
-    background: @backgroundDark;
-    width: 100%;
-    padding-left: 5px;
-
-    &.disabled{
-       opacity: 0.5;
-    }
 }

package/less/components/section.less

@@ -6,7 +6,7 @@
 @headerPadding:2px;
 
 .section{
-	.layer();
+	.layer;
 
 	.section-header{
 		background:lighten(@backgroundLight, 10%);
@@ -65,7 +65,7 @@
 	}
 
 	.section-content{
-		.layer();
+		.layer;
 		top:@sectionHeaderHeight;
 		height:calc(100% - @sectionHeaderHeight);
 		padding:@sectionPadding;

package/less/components/shortcut-menu.less

@@ -1,26 +1,21 @@
-.shortcuts-dropdown {
-  overflow: auto;
-  height: 90%;
-  .shortcuts-menu {
+.shortcuts-menu {
     padding: 5px;
     box-sizing: border-box;
     background: @background;
     width: 235px;
-
     table {
-      tr {
-        td {
-          font-size: 12px;
-          padding: 0.2em;
+    tr {
+      td {
+        font-size: 12px;
+        padding: 0.2em;
 
-          &.hotkey-cell {
-            font-weight: 600;
-            text-align: right;
-          }
+        &.hotkey-cell {
+          font-weight: 600;
+          text-align: right;
+        }
 
-          &.shortcut-desc {
-            padding: 0.2em 0.2em 0.2em 1.2em;
-          }
+        &.shortcut-desc {
+          padding: 0.2em 0.2em 0.2em 1.2em;
         }
       }
     }

package/less/components/static-composition-editor.less

@@ -3,7 +3,7 @@
 
 .static-composition-editor{
 
-	.layer();
+	.layer;
 
 	.composition-config{
 		position: absolute;
@@ -18,14 +18,14 @@
 	}
 
 	.composition-preview{
-		.layer();
+		.layer;
 		left:@compConfigWidth;
 		width:calc(100% - @compConfigWidth);
 	}
 }
 
 .static-composition-renderer{
-	.layer();
+	.layer;
 	font-family:'Arial';
 	border:2px solid @backgroundLight;
 }
@@ -37,7 +37,7 @@
 
 .composition-text-layer{
 	will-change:transform;
-	.layer();
+	.layer;
 
 	.inner-text{
 		display: inline-block;

package/less/components/story-previewer.less

@@ -160,7 +160,7 @@
 
 .story-viewer{
     
-    .layer();
+    .layer;
     
     background:@backgroundDark;
 
@@ -176,7 +176,7 @@
     }
     
     .log{
-        .layer();
+        .layer;
         overflow-y: scroll;
         padding:10px;
         box-sizing:border-box;
@@ -216,7 +216,7 @@
         width:calc(100% - @storyViewerVarWidth);
 
         .content-header{
-            .layer();
+            .layer;
             box-sizing: border-box;
             padding-top:4px;
             padding-left:4px;
@@ -252,7 +252,7 @@
         }
 
         .content-wrapper{
-            .layer();
+            .layer;
             background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);

package/less/components/tabs.less

@@ -3,7 +3,7 @@
 @tabWidth:80px;
 
 .tabs{
-    .layer();
+    .layer;
     .tab-header{
         white-space: nowrap;
         position: absolute;
@@ -49,12 +49,12 @@
     }
     .tab-content{
         overflow-y: auto;
-        .layer();
+        .layer;
         top:@tabHeight;
         height:calc(100% - @tabHeight);
 
         .tab-content-wrapper{
-            .layer();
+            .layer;
         }
     }
 }

package/less/entry.less

@@ -23,7 +23,6 @@
 @import (inline) "components/preview-not-available.less";
 @import (inline) "components/publish-status-indicator.less";
 @import (inline) "components/publish-wizard.less";
-@import (inline) "components/change-report.less";
 @import (inline) "components/section.less";
 @import (inline) "components/shortcut-menu.less";
 @import (inline) "components/spinner.less";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.16.0-0",
+    "version": "3.0.0-0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -19,7 +19,6 @@
         "lint-fix": "npm run lint -- --fix",
         "deploy": "npx np --no-tests --any-branch --message 'v%s'",
         "release": "npm run check-formatting && npm run lint && npm run build && npm run deploy",
-        "release-as": "bash scripts/release-as.sh",
         "format": "prettier --write \"**/*.{,js,json,jsx,ts,tsx,md}\"",
         "check-formatting": "prettier --check \"**/*.{,js,json,jsx,ts,tsx,md}\"",
         "storybook": "npm run build && start-storybook -p 6066"
@@ -36,16 +35,13 @@
     "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
     "dependencies": {
         "@imposium-hub/react-color": "^2.19.4",
-        "@innovid/feature-flags-react": "^1.1.0-6",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "ansi_up": "^5.1.0",
         "cogo-toast": "^4.2.3",
         "export-to-csv": "^0.2.1",
         "file-saver": "^2.0.5",
-        "imposium-js-sdk": "^3.5.6",
+        "imposium-js-sdk": "^2.3.1",
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.21",
-        "moize": "^6.1.0",
         "moment": "^2.29.1",
         "react-hotkeys-hook": "^4.4.1",
         "react-merge-refs": "^1.1.0",
@@ -55,24 +51,23 @@
     },
     "peerDependencies": {
         "@auth0/auth0-react": "^2.3.0",
-        "@fortawesome/fontawesome-svg-core": "^6.7.1",
-        "@fortawesome/free-brands-svg-icons": "^6.7.1",
-        "@fortawesome/free-solid-svg-icons": "^6.7.1",
-        "@fortawesome/pro-light-svg-icons": "^6.7.1",
-        "@fortawesome/pro-regular-svg-icons": "^6.7.1",
-        "@fortawesome/pro-solid-svg-icons": "^6.7.1",
-        "@fortawesome/react-fontawesome": "^0.2.2",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/pro-light-svg-icons": "^6.1.1",
+        "@fortawesome/pro-solid-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
         "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "axios": "^1.9.0",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
-        "react": "^18.0.0",
-        "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^18.0.0",
+        "react": "^17.0.1",
+        "react-dnd": "^14.0.2",
+        "react-dnd-html5-backend": "^14.0.0",
+        "react-dom": "^17.0.2",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
-        "react-resize-detector": "^12.0.0",
+        "react-resize-detector": "^6.7.1",
         "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
@@ -80,7 +75,7 @@
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
-        "@auth0/auth0-react": "^2.4.0",
+        "@auth0/auth0-react": "^2.3.0",
         "@fortawesome/fontawesome-svg-core": "^6.7.1",
         "@fortawesome/free-brands-svg-icons": "^6.7.1",
         "@fortawesome/free-solid-svg-icons": "^6.7.1",
@@ -91,23 +86,22 @@
         "@imposium-hub/eslint-config": "^1.1.0",
         "@imposium-hub/prettier-config": "^2.1.0",
         "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
-        "@storybook/addon-actions": "^8.6.14",
-        "@storybook/addon-docs": "^8.6.14",
-        "@storybook/addon-essentials": "^8.6.14",
-        "@storybook/addon-interactions": "^8.6.14",
-        "@storybook/addon-links": "^8.6.14",
-        "@storybook/addon-storysource": "^8.6.14",
-        "@storybook/react": "^8.6.14",
-        "@storybook/testing-library": "^0.2.1",
+        "@storybook/addon-actions": "^6.4.22",
+        "@storybook/addon-docs": "^6.4.22",
+        "@storybook/addon-essentials": "^6.4.22",
+        "@storybook/addon-interactions": "^6.4.22",
+        "@storybook/addon-links": "^6.4.22",
+        "@storybook/addon-storysource": "^6.4.22",
+        "@storybook/react": "^7.0.7",
+        "@storybook/testing-library": "^0.0.11",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/offscreencanvas": "^2019.6.4",
-        "@types/react": "^18.0.0",
+        "@types/react": "^17.0.37",
         "@types/resize-observer-browser": "^0.1.5",
         "@typescript-eslint/eslint-plugin": "^5.26.0",
         "@typescript-eslint/parser": "^5.26.0",
         "axios": "^1.9.0",
         "concurrently": "^7.1.0",
-        "dpop": "^2.1.1",
         "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
@@ -117,38 +111,31 @@
         "less": "^4.1.2",
         "less-plugin-clean-css": "^1.5.1",
         "localforage": "^1.7.3",
-        "np": "^10.2.0",
+        "np": "^7.6.1",
         "onchange": "^7.1.0",
         "prettier": "^2.6.2",
-        "react": "^18.0.0",
-        "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^18.0.0",
+        "react": "^17.0.1",
+        "react-dnd": "^14.0.2",
+        "react-dnd-html5-backend": "^14.0.0",
+        "react-dom": "^17.0.2",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
-        "react-resize-detector": "^12.0.0",
+        "react-resize-detector": "^6.7.1",
         "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
         "react-tooltip": "^5.27.1",
         "run-sequence": "^2.2.1",
-        "sb": "^8.6.14",
+        "sb": "^6.4.22",
         "smpte-timecode": "^1.2.3",
-        "storybook-dark-mode": "^3.0.3",
+        "storybook-dark-mode": "^1.1.0",
         "typescript": "^5.3.3"
     },
     "eslintConfig": {
         "root": true,
         "extends": [
             "@imposium-hub/eslint-config/typescript-react"
-        ],
-        "ignorePatterns": [
-            "**/*.test.tsx",
-            "src/test/**"
         ]
     },
-    "prettier": "@imposium-hub/prettier-config",
-    "overrides": {
-        "tmp": "^0.2.5"
-    }
+    "prettier": "@imposium-hub/prettier-config"
 }