@uxf/cms 10.0.0-beta.6 → 10.0.0-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/cms",
-  "version": "10.0.0-beta.6",
+  "version": "10.0.0-beta.60",
   "description": "UXF Cms",
   "author": "UXFans <dev@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -40,52 +40,29 @@
     "@types/qs": "^6.9.7",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
-    "@uxf/core": "^4.5.1",
-    "@uxf/data-grid": "10.0.0-beta.4",
-    "@uxf/eslint-config": "^1.3.0",
-    "@uxf/form": "10.0.0-beta.4",
-    "@uxf/icons-generator": "^1.3.0",
-    "@uxf/router": "10.0.0-beta.3",
-    "@uxf/ui": "10.0.0-beta.4",
-    "@uxf/wysiwyg": "2.0.0-beta.28",
-    "autoprefixer": "^10.4.14",
+    "@uxf/core": "10.0.0-beta.37",
+    "@uxf/data-grid": "10.0.0-beta.60",
+    "@uxf/form": "10.0.0-beta.60",
+    "@uxf/icons-generator": "10.0.0-beta.19",
+    "@uxf/router": "10.0.0-beta.15",
+    "@uxf/ui": "10.0.0-beta.60",
+    "@uxf/wysiwyg": "10.0.0-beta.60",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
-    "concurrently": "^8.1.0",
-    "coordinate-parser": "^1.0.7",
+    "coordinate-parser": "1.0.7",
     "dayjs": "^1.11.7",
-    "eslint": "^8.41.0",
-    "eslint-plugin-tailwindcss": "3.12.1",
-    "express": "^4.18.2",
-    "express-http-proxy": "^1.6.3",
-    "http-proxy-middleware": "^2.0.6",
     "next": "^13.4.4",
     "path": "^0.12.7",
-    "postcss": "^8.4.24",
-    "postcss-focus-visible": "^8.0.2",
-    "postcss-import": "^15.1.0",
-    "postcss-pxtorem": "^6.0.0",
-    "postcss-syntax": "^0.36.2",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.3.0",
     "qs": "^6.11.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "redux-devtools-extension": "^2.13.9",
-    "stylelint": "^15.6.2",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-tailwindcss": "^0.0.7",
-    "stylelint-use-nesting": "^4.1.0",
-    "tailwindcss": "^3.3.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.0.4"
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@uxf/core": ">= 4.5.1",
-    "@uxf/data-grid": "10.0.0-beta.6",
-    "@uxf/form": "10.0.0-beta.6",
-    "@uxf/ui": "10.0.0-beta.6",
-    "@uxf/wysiwyg": "2.0.0-beta.28",
+    "@uxf/core": "10.0.0-beta.37",
+    "@uxf/data-grid": "10.0.0-beta.60",
+    "@uxf/form": "10.0.0-beta.60",
+    "@uxf/ui": "10.0.0-beta.60",
+    "@uxf/wysiwyg": "10.0.0-beta.60",
     "axios": "^1.4.0",
     "axios-hooks": "^4.0.0",
     "dayjs": "^1.11.7",

package/pages/grid-page/grid-page.js

@@ -84,7 +84,7 @@ const GridPageComponent = (props) => {
     ].filter(Boolean);
     return (react_1.default.createElement(Layout, { key: entityAlias, title: (_a = title !== null && title !== void 0 ? title : metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.title) !== null && _a !== void 0 ? _a : "" },
         react_1.default.createElement("div", { className: "mb-10" },
-            react_1.default.createElement(tailwindui_1.DataGrid, { noBorder: true, callbackRef: callbackRef, schema: gridSchema, initialState: query.filter ? (0, router_1.queryParamToString)(query.filter) : undefined, title: title !== null && title !== void 0 ? title : metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.title, gridName: entityAlias, loader: loader !== null && loader !== void 0 ? loader : universalLoader, ...hiddenColumnProps, onOpen: onOpen && ((row) => onOpen(entityAlias, row, actionsBag)), getOpenUrl: getOpenUrl && ((row) => getOpenUrl(entityAlias, row)), onEdit: onEdit && ((row) => onEdit(entityAlias, row, actionsBag)), getEditUrl: getEditUrl && ((row) => getEditUrl(entityAlias, row)), onRemove: onRemove && ((row) => onRemove(entityAlias, row, actionsBag)), rowHeight: rowHeight, defaultConfig: defaultConfig, ui: dataGridUi, selectedRows: selectable ? selectedRows : undefined, onChangeSelectedRows: selectable ? setSelectedRows : undefined, customActions: cActions, mode: (_b = uiContextValues === null || uiContextValues === void 0 ? void 0 : uiContextValues.colorScheme.getUserSettings()) !== null && _b !== void 0 ? _b : "light" }))));
+            react_1.default.createElement(tailwindui_1.DataGrid, { noBorder: true, callbackRef: callbackRef, schema: gridSchema, initialState: query.filter ? (0, router_1.queryParamToString)(query.filter) : undefined, title: title !== null && title !== void 0 ? title : metaSchema === null || metaSchema === void 0 ? void 0 : metaSchema.title, gridName: entityAlias, loader: loader !== null && loader !== void 0 ? loader : universalLoader, ...hiddenColumnProps, onOpen: onOpen && ((row) => onOpen(entityAlias, row, actionsBag)), getOpenUrl: getOpenUrl && ((row) => getOpenUrl(entityAlias, row)), onEdit: onEdit && ((row) => onEdit(entityAlias, row, actionsBag)), getEditUrl: getEditUrl && ((row) => getEditUrl(entityAlias, row)), onRemove: onRemove && ((row) => onRemove(entityAlias, row, actionsBag)), rowHeight: rowHeight, defaultConfig: defaultConfig, ui: dataGridUi, selectedRows: selectable ? selectedRows : undefined, onChangeSelectedRows: selectable ? setSelectedRows : undefined, customActions: cActions, mode: (_b = uiContextValues === null || uiContextValues === void 0 ? void 0 : uiContextValues.colorScheme.getUserSettings()) !== null && _b !== void 0 ? _b : "light", onCsvDownload: (r) => window.open(`/api/cms/datagrid/export/${entityAlias}?${(0, qs_1.stringify)(r)}`) }))));
 };
 GridPageComponent.displayName = "GridPageComponent";
 const GridPage = (config) => {

package/ui/styles/breadcrumbs.css

@@ -0,0 +1,30 @@
+.uxf-cms-breadcrumbs {
+    @apply uxf-typo-body;
+
+    align-items: center;
+    color: theme("colors.lightLow");
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: theme("spacing.4");
+
+    &__item {
+        margin-right: theme("spacing.2");
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__divide-icon {
+        display: inline;
+        margin-right: theme("spacing.2");
+    }
+
+    &__link {
+        @apply transition-colors;
+
+        &:hover {
+            color: theme("colors.lightHigh");
+        }
+    }
+}

package/ui/styles/layout.css

@@ -0,0 +1,132 @@
+.uxf-cms-layout {
+    display: flex;
+
+    &__wrapper {
+        display: flex;
+        width: 100%;
+
+        :root .light & {
+            background-color: theme("colors.gray.100");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.900");
+            color: theme("colors.darkHigh");
+        }
+    }
+
+    &__main {
+        --drawer-width: 264px;
+
+        min-height: 100vh;
+        padding-bottom: theme("spacing.16");
+        width: 100%;
+
+        @screen md {
+            margin-left: var(--drawer-width);
+            padding-bottom: 0;
+            width: calc(100% - var(--drawer-width));
+        }
+    }
+
+    &__loading {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: theme("spacing.96");
+        justify-content: center;
+
+        &-inner {
+            text-align: center;
+        }
+
+        &-text {
+            margin-top: theme("spacing.2");
+        }
+    }
+
+    &__header {
+        :root .light & {
+            background-color: theme("colors.white");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.950");
+        }
+
+        &--sticky {
+            box-shadow: theme("boxShadow.md");
+            position: sticky;
+            top: 0;
+            z-index: 10;
+
+            :root .light & {
+                background-color: theme("colors.white");
+            }
+
+            :root .dark & {
+                background-color: theme("colors.gray.950");
+            }
+        }
+    }
+
+    &__toolbar {
+        align-items: center;
+        background-color: theme("colors.sidebar.background");
+        display: flex;
+        height: theme("spacing.12");
+        justify-content: flex-end;
+        padding: 0 theme("spacing.6");
+
+        :root .light & {
+            color: theme("colors.darkMedium");
+        }
+
+        :root .dark & {
+            color: theme("colors.lightMedium");
+        }
+    }
+
+    &__container {
+        margin: 0 auto;
+        padding: 0 theme("spacing.4");
+
+        @screen md {
+            padding-left: theme("spacing.10");
+            padding-right: theme("spacing.10");
+        }
+
+        &--basic {
+            padding-bottom: theme("spacing.9");
+            padding-top: theme("spacing.12");
+        }
+
+        &--narrow {
+            max-width: 49.25rem;
+        }
+
+        &--wide {
+            max-width: 64rem;
+        }
+    }
+
+    &__title-wrapper {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__avatar-title-wrapper {
+        align-items: center;
+        display: flex;
+        gap: 20px;
+    }
+
+    &__breadcrumbs-title-wrapper {
+        width: 100%;
+    }
+
+    &__title {
+        @apply uxf-typo-h4;
+    }
+}

package/ui/styles/login-layout.css

@@ -0,0 +1,52 @@
+.uxf-cms-login-layout {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100vh;
+    padding: theme("spacing.4");
+
+    :root .light & {
+        background-color: theme("colors.gray.100");
+    }
+
+    :root .dark & {
+        background-color: theme("colors.gray.900");
+        color: theme("colors.darkHigh");
+    }
+
+    &__logo-wrapper {
+        margin-bottom: theme("spacing.8");
+    }
+
+    &__title {
+        @apply uxf-typo-h4;
+
+        &--hidden {
+            @apply sr-only;
+        }
+    }
+
+    &__subtitle {
+        margin-top: theme("spacing.2");
+
+        :root .light & {
+            color: theme("colors.lightMedium");
+        }
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+    }
+
+    &__body {
+        margin-top: theme("spacing.8");
+        max-width: 100%;
+        padding: theme("spacing.6");
+        width: 28rem;
+
+        :root .dark & {
+            background-color: theme("colors.gray.950");
+        }
+    }
+}

package/ui/styles/menu.css

@@ -0,0 +1,213 @@
+.uxf-cms-menu {
+    background-color: theme("colors.sidebar.background");
+    padding: 0 theme("spacing.2") theme("spacing.4");
+
+    &__item-wrapper {
+        &--super {
+            &:first-child {
+                & > .uxf-cms-menu__item--super {
+                    margin-top: 0;
+                }
+            }
+        }
+
+        &--user-menu {
+            @screen md {
+                display: none;
+            }
+        }
+    }
+
+    &__item {
+        &--super {
+            @apply uxf-typo-overline;
+
+            color: theme("colors.darkLow");
+            margin-bottom: theme("spacing.3");
+            margin-top: theme("spacing.6");
+            padding-left: theme("spacing.2");
+            text-transform: uppercase;
+        }
+
+        &--basic {
+            align-items: center;
+            background-color: theme("colors.sidebar.background");
+            border-radius: theme("borderRadius.lg");
+            color: theme("colors.darkMedium");
+            cursor: pointer;
+            display: flex;
+            margin-bottom: theme("spacing[0.5]");
+            padding: theme("spacing[2.5]") theme("spacing.1") theme("spacing[2.5]") theme("spacing[2.5]");
+
+            &:hover {
+                background-color: theme("colors.sidebar.hover");
+            }
+
+            &.is-selected {
+                background-color: theme("colors.sidebar.highlight");
+                color: theme("colors.darkHigh");
+                font-weight: bold;
+            }
+
+            .uxf-cms-menu__icon-wrapper {
+                width: theme("spacing.7");
+
+                &--level-one {
+                    width: theme("spacing.9");
+                }
+            }
+
+            .uxf-cms-menu__caret {
+                margin-left: auto;
+                margin-right: theme("spacing.2");
+
+                &.is-open {
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+    }
+
+    &__icon-wrapper {
+        flex-shrink: 0;
+    }
+
+    &__submenu-button {
+        width: 100%;
+
+        &--initially-closed {
+            @screen md {
+                display: none;
+            }
+        }
+
+        &--initially-open {
+            @screen md {
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+.uxf-cms-user-menu {
+    border-top: 1px solid theme("colors.darkBorder");
+    color: theme("colors.darkMedium");
+    display: none;
+
+    @screen md {
+        display: block;
+    }
+
+    &.is-open {
+        background-color: theme("colors.sidebar.hover");
+
+        .uxf-cms-menu__item {
+            background-color: theme("colors.sidebar.hover");
+
+            &:hover {
+                background-color: theme("colors.sidebar.background");
+            }
+        }
+    }
+
+    &__button {
+        align-items: center;
+        display: flex;
+        padding: theme("spacing.3") theme("spacing.4");
+        text-align: left;
+        width: 100%;
+
+        &:hover {
+            background-color: theme("colors.sidebar.hover");
+        }
+    }
+
+    &__avatar {
+        flex-shrink: 0;
+        height: 32px;
+        margin-right: theme("spacing.3");
+        width: 32px;
+    }
+
+    &__label-wrapper {
+        @apply truncate;
+    }
+
+    &__name {
+        @apply uxf-typo-body2;
+    }
+
+    &__roles {
+        @apply uxf-typo-caption truncate;
+
+        color: theme("colors.darkLow");
+    }
+
+    &__caret-wrapper {
+        margin-left: auto;
+    }
+
+    &__caret {
+        margin-left: theme("spacing.2");
+
+        &.is-open {
+            transform: rotate(-90deg);
+        }
+    }
+
+    &__sub-menu {
+        padding: 0 theme("spacing.3") theme("spacing.4");
+    }
+}
+
+.uxf-cms-sub-menu {
+    display: none;
+
+    @screen md {
+        display: block;
+    }
+
+    &__wrapper {
+        background-color: theme("colors.sidebar.highlight");
+        border-radius: theme("borderRadius.xl");
+        box-shadow: theme("boxShadow.lg");
+        overflow-y: auto;
+        width: 100%;
+        z-index: theme("zIndex.dropdown");
+    }
+
+    &__wrapper-mobile {
+        background-color: theme("colors.sidebar.background");
+        border-radius: theme("borderRadius.xl");
+        box-shadow: theme("boxShadow.lg");
+        left: theme("spacing.4");
+        overflow-y: auto;
+        width: calc(100vw - 32px);
+        z-index: theme("zIndex.dropdown");
+    }
+
+    &__item {
+        @apply md:text-body2;
+
+        background-color: theme("colors.sidebar.highlight");
+        color: theme("colors.darkMedium");
+        font-size: theme("fontSize.body");
+        padding: theme("spacing[3.5]");
+        width: 100%;
+
+        &:hover {
+            background-color: theme("colors.sidebar.background");
+            color: theme("colors.darkLow");
+        }
+    }
+
+    &__title {
+        @apply uxf-typo-body;
+
+        background-color: theme("colors.sidebar.background");
+        color: theme("colors.darkHigh");
+        font-weight: bold;
+        padding: theme("spacing[3.5]") theme("spacing.4");
+        width: 100%;
+    }
+}

package/ui/styles/mobile-bar.css

@@ -0,0 +1,34 @@
+.uxf-cms-mobile-bar {
+    align-items: center;
+    background-color: theme("colors.sidebar.background");
+    bottom: 0;
+    color: theme("colors.darkMedium");
+    display: flex;
+    height: 52px;
+    left: 0;
+    padding: 0 theme("spacing.1");
+    position: fixed;
+    right: 0;
+
+    @screen md {
+        display: none;
+    }
+
+    &__button {
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+        flex-shrink: 0;
+        height: theme("spacing.11");
+        justify-content: center;
+    }
+
+    &__avatar {
+        height: theme("spacing.7");
+        width: theme("spacing.7");
+    }
+
+    &__caret {
+        margin-left: theme("spacing.1");
+    }
+}

package/ui/styles/sidebar.css

@@ -0,0 +1,108 @@
+.uxf-cms-sidebar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    width: 100%;
+    z-index: 15;
+
+    @screen xs {
+        right: 0;
+        width: var(--drawer-width);
+    }
+
+    @screen md {
+        border-bottom: none;
+        left: 0;
+        right: unset;
+        z-index: 1;
+    }
+
+    &__content {
+        --device-height: 100vh;
+
+        background-color: theme("colors.sidebar.background");
+        border-bottom: 1px solid theme("colors.gray.700");
+        flex-direction: column;
+        height: calc(var(--device-height) - 52px);
+        padding-top: theme("spacing.5");
+
+        @screen md {
+            border-bottom: none;
+            height: 100vh;
+        }
+
+        &--open {
+            display: flex;
+        }
+
+        &--closed {
+            display: none;
+
+            @screen md {
+                display: flex;
+            }
+        }
+    }
+
+    &__logo {
+        padding: 0 theme("spacing.4");
+    }
+
+    &__nav {
+        flex-grow: 1;
+        margin-top: theme("spacing.8");
+        overflow: auto;
+        padding: 0 0 theme("spacing.4");
+
+        @screen md {
+            padding: 0;
+        }
+
+        &--super-section {
+            margin-top: theme("spacing.4");
+        }
+
+        /* width */
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        /* Track */
+        &::-webkit-scrollbar-track {
+            background: theme("colors.sidebar.background");
+        }
+
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+            background: theme("colors.sidebar.highlight");
+            border-radius: 999px;
+        }
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover {
+            background: theme("colors.sidebar.hover");
+        }
+    }
+
+    &__scrollbar {
+        --scrollbar-color: theme("colors.darkBorder");
+
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        scrollbar-color: var(--scrollbar-color) transparent;
+        scrollbar-width: thin;
+
+        &::-webkit-scrollbar {
+            width: theme("spacing.2");
+        }
+
+        &::-webkit-scrollbar-track {
+            background: theme("colors.sidebar.highlight");
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-color);
+            border: none;
+            border-radius: 999px;
+        }
+    }
+}

package/utils/icons.config.js

@@ -2,7 +2,7 @@
 module.exports = {
     ...require("@uxf/ui/utils/icons-config"),
     ...require("@uxf/data-grid/icons-config"),
-    ...require("@uxf/wysiwyg/icons"),
+    ...require("@uxf/wysiwyg/utils/icons-config"),
     angleRight: {
         width: 256,
         height: 512,