@evershop/evershop 1.0.0-beta

package/src/modules/cms/pages/admin/all/Meta.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Meta from '../../../../../lib/components/Meta';
+import Title from '../../../../../lib/components/Title';
+
+export default function SeoMeta({ pageInfo: { title, description } }) {
+  return <>
+    <Title title={title} />
+    <Meta name="description" content={description} />
+  </>
+}
+
+SeoMeta.propTypes = {
+  description: PropTypes.any,
+  title: PropTypes.any
+}
+
+export const layout = {
+  areaId: "head",
+  sortOrder: 5
+}
+
+export const query = `
+  query query {
+    pageInfo {
+      title
+      description
+    }
+  }
+`

package/src/modules/cms/pages/admin/all/Navigation.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import './Navigation.scss';
+
+export default function AdminNavigation() {
+  return (
+    <div className="admin-nav-container">
+      <div className="admin-nav">
+        <ul className="list-unstyled">
+          <Area id="adminMenu" noOuter />
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: 'adminNavigation',
+  sortOrder: 10
+}

package/src/modules/cms/pages/admin/all/Navigation.scss

@@ -0,0 +1,84 @@
+.admin-navigation {
+    width: 24rem;
+    float: left;
+    height: 100vh;
+    border-right: 1px solid var(--divider);
+    position: fixed;
+    left: 0;
+    top: 5.6rem;
+    padding-right: 4px;
+    padding-bottom: 15rem;
+    overflow-y: scroll;
+}
+.admin-navigation .top-bar {
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+}
+.admin-navigation .top-bar .logo {
+    width: 70px;
+}
+.admin-navigation .top-bar .logo img {
+    max-width: 100%;
+}
+.admin-navigation .menu-toggle {
+    color: #fff;
+}
+.admin-nav li span,
+.admin-navigation li a {
+    line-height: 35px;
+    font-weight: 600;
+}
+.admin-nav .root-label {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 11px;
+}
+.nav-item {
+    margin-top: 2px;
+}
+.nav-item > a,
+.nav-item .root-label {
+    padding-left: 1rem;
+    margin-left: 1rem;
+}
+.nav-item > a:hover {
+    background-color: #edeeef;
+    border-radius: 4px;
+}
+.nav-item.active::before {
+    content: "";
+    width: 3.5px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    border-radius: 0 4px 4px 0;
+    background-color: var(--primary);
+}
+.nav-item.active {
+    position: relative;
+    a {
+        color: var(--primary);
+        background-color: #edeeef;
+        border-radius: 4px;
+    }
+}
+.admin-nav > ul > li {
+    margin-top: 1rem;
+}
+.admin-navigation::-webkit-scrollbar {
+    width: 5px;
+    height: 8px;
+    background-color: #edeeef;
+}
+
+.admin-navigation::-webkit-scrollbar-thumb {
+    background-color: #058c8c;
+    outline: 1px solid #058c8c;
+    border-radius: 2px;
+}

package/src/modules/cms/pages/admin/all/Notification.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import { get } from '../../../../../lib/util/get';
+import { useAppState } from '../../../../../lib/context/app';
+import './Notification.scss';
+
+export default function Notification() {
+  const notify = (type, message) => {
+    switch (type) {
+      case 'success':
+        toast.success(message);
+        break;
+      case 'error':
+        toast.error(message);
+        break;
+      case 'info':
+        toast.info(message);
+        break;
+      case 'warning':
+        toast.warning(message);
+        break;
+      default:
+        toast(message);
+    }
+  };
+  const context = useAppState();
+
+  React.useEffect(() => {
+    get(context, 'notifications', []).forEach((n) => notify(n.type, n.message));
+  }, []);
+
+  return (
+    <div>
+      <ToastContainer hideProgressBar autoClose={false} />
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: 'body',
+  sortOrder: 10
+}

package/src/modules/cms/pages/admin/all/Notification.scss

@@ -0,0 +1,522 @@
+.Toastify__toast-container {
+    z-index: 9999;
+    -webkit-transform: translate3d(0, 0, 9999px);
+    position: fixed;
+    width: 380px;
+    background-color: #fff;
+}
+.Toastify__toast-container--top-left {
+    top: 1em;
+    left: 1em;
+}
+.Toastify__toast-container--top-center {
+    top: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.Toastify__toast-container--top-right {
+    top: 1em;
+    right: 1em;
+}
+.Toastify__toast-container--bottom-left {
+    bottom: 1em;
+    left: 1em;
+}
+.Toastify__toast-container--bottom-center {
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.Toastify__toast-container--bottom-right {
+    bottom: 1em;
+    right: 1em;
+}
+
+@media only screen and (max-width: 480px) {
+    .Toastify__toast-container {
+        width: 100vw;
+        padding: 0;
+        left: 0;
+        margin: 0;
+    }
+    .Toastify__toast-container--top-left,
+    .Toastify__toast-container--top-center,
+    .Toastify__toast-container--top-right {
+        top: 0;
+        transform: translateX(0);
+    }
+    .Toastify__toast-container--bottom-left,
+    .Toastify__toast-container--bottom-center,
+    .Toastify__toast-container--bottom-right {
+        bottom: 0;
+        transform: translateX(0);
+    }
+    .Toastify__toast-container--rtl {
+        right: 0;
+        left: initial;
+    }
+}
+.Toastify__toast {
+    position: relative;
+    min-height: 64px;
+    box-sizing: border-box;
+    margin-bottom: 1rem;
+    padding: 8px;
+    border-radius: 1px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    max-height: 800px;
+    overflow: hidden;
+    font-family: sans-serif;
+    cursor: pointer;
+    direction: ltr;
+}
+.Toastify__toast--rtl {
+    direction: rtl;
+}
+.Toastify__toast--dark {
+    background: #121212;
+    color: #fff;
+}
+
+.Toastify__toast--info {
+    background: #3498db;
+}
+.Toastify__toast--success {
+    background: #07bc0c;
+}
+.Toastify__toast--warning {
+    background: #f1c40f;
+}
+.Toastify__toast--error {
+    background: #e74c3c;
+}
+.Toastify__toast-body {
+    margin: auto 0;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+@media only screen and (max-width: 480px) {
+    .Toastify__toast {
+        margin-bottom: 0;
+    }
+}
+.Toastify__close-button {
+    color: #fff;
+    background: transparent;
+    outline: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: 0.3s ease;
+    -ms-flex-item-align: start;
+    align-self: flex-start;
+}
+.Toastify__close-button--default {
+    color: #000;
+    opacity: 0.3;
+}
+.Toastify__close-button > svg {
+    fill: currentColor;
+    height: 16px;
+    width: 14px;
+}
+.Toastify__close-button:hover,
+.Toastify__close-button:focus {
+    opacity: 1;
+}
+
+@keyframes Toastify__trackProgress {
+    0% {
+        transform: scaleX(1);
+    }
+    100% {
+        transform: scaleX(0);
+    }
+}
+.Toastify__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    z-index: 9999;
+    opacity: 0.7;
+    background-color: rgba(255, 255, 255, 0.7);
+    transform-origin: left;
+}
+.Toastify__progress-bar--animated {
+    animation: Toastify__trackProgress linear 1 forwards;
+}
+.Toastify__progress-bar--controlled {
+    transition: transform 0.2s;
+}
+.Toastify__progress-bar--rtl {
+    right: 0;
+    left: initial;
+    transform-origin: right;
+}
+.Toastify__progress-bar--default {
+    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
+}
+.Toastify__progress-bar--dark {
+    background: #bb86fc;
+}
+@keyframes Toastify__bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+    }
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+    }
+    75% {
+        transform: translate3d(10px, 0, 0);
+    }
+    90% {
+        transform: translate3d(-5px, 0, 0);
+    }
+    to {
+        transform: none;
+    }
+}
+@keyframes Toastify__bounceOutRight {
+    20% {
+        opacity: 1;
+        transform: translate3d(-20px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+@keyframes Toastify__bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+    }
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+    }
+    75% {
+        transform: translate3d(-10px, 0, 0);
+    }
+    90% {
+        transform: translate3d(5px, 0, 0);
+    }
+    to {
+        transform: none;
+    }
+}
+@keyframes Toastify__bounceOutLeft {
+    20% {
+        opacity: 1;
+        transform: translate3d(20px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+@keyframes Toastify__bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+        opacity: 0;
+        transform: translate3d(0, 3000px, 0);
+    }
+    60% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+    75% {
+        transform: translate3d(0, 10px, 0);
+    }
+    90% {
+        transform: translate3d(0, -5px, 0);
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes Toastify__bounceOutUp {
+    20% {
+        transform: translate3d(0, -10px, 0);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, 20px, 0);
+    }
+    to {
+        opacity: 0;
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+@keyframes Toastify__bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -3000px, 0);
+    }
+    60% {
+        opacity: 1;
+        transform: translate3d(0, 25px, 0);
+    }
+    75% {
+        transform: translate3d(0, -10px, 0);
+    }
+    90% {
+        transform: translate3d(0, 5px, 0);
+    }
+    to {
+        transform: none;
+    }
+}
+@keyframes Toastify__bounceOutDown {
+    20% {
+        transform: translate3d(0, 10px, 0);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+    to {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+.Toastify__bounce-enter--top-left,
+.Toastify__bounce-enter--bottom-left {
+    animation-name: Toastify__bounceInLeft;
+}
+.Toastify__bounce-enter--top-right,
+.Toastify__bounce-enter--bottom-right {
+    animation-name: Toastify__bounceInRight;
+}
+.Toastify__bounce-enter--top-center {
+    animation-name: Toastify__bounceInDown;
+}
+.Toastify__bounce-enter--bottom-center {
+    animation-name: Toastify__bounceInUp;
+}
+
+.Toastify__bounce-exit--top-left,
+.Toastify__bounce-exit--bottom-left {
+    animation-name: Toastify__bounceOutLeft;
+}
+.Toastify__bounce-exit--top-right,
+.Toastify__bounce-exit--bottom-right {
+    animation-name: Toastify__bounceOutRight;
+}
+.Toastify__bounce-exit--top-center {
+    animation-name: Toastify__bounceOutUp;
+}
+.Toastify__bounce-exit--bottom-center {
+    animation-name: Toastify__bounceOutDown;
+}
+
+@keyframes Toastify__zoomIn {
+    from {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    50% {
+        opacity: 1;
+    }
+}
+@keyframes Toastify__zoomOut {
+    from {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    to {
+        opacity: 0;
+    }
+}
+.Toastify__zoom-enter {
+    animation-name: Toastify__zoomIn;
+}
+
+.Toastify__zoom-exit {
+    animation-name: Toastify__zoomOut;
+}
+
+@keyframes Toastify__flipIn {
+    from {
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    40% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        animation-timing-function: ease-in;
+    }
+    60% {
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        opacity: 1;
+    }
+    80% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+    to {
+        transform: perspective(400px);
+    }
+}
+@keyframes Toastify__flipOut {
+    from {
+        transform: perspective(400px);
+    }
+    30% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        opacity: 1;
+    }
+    to {
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        opacity: 0;
+    }
+}
+.Toastify__flip-enter {
+    animation-name: Toastify__flipIn;
+}
+
+.Toastify__flip-exit {
+    animation-name: Toastify__flipOut;
+}
+
+@keyframes Toastify__slideInRight {
+    from {
+        transform: translate3d(110%, 0, 0);
+        visibility: visible;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes Toastify__slideInLeft {
+    from {
+        transform: translate3d(-110%, 0, 0);
+        visibility: visible;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes Toastify__slideInUp {
+    from {
+        transform: translate3d(0, 110%, 0);
+        visibility: visible;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes Toastify__slideInDown {
+    from {
+        transform: translate3d(0, -110%, 0);
+        visibility: visible;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes Toastify__slideOutRight {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        transform: translate3d(110%, 0, 0);
+    }
+}
+@keyframes Toastify__slideOutLeft {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        transform: translate3d(-110%, 0, 0);
+    }
+}
+@keyframes Toastify__slideOutDown {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        transform: translate3d(0, 500px, 0);
+    }
+}
+@keyframes Toastify__slideOutUp {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        transform: translate3d(0, -500px, 0);
+    }
+}
+.Toastify__slide-enter--top-left,
+.Toastify__slide-enter--bottom-left {
+    animation-name: Toastify__slideInLeft;
+}
+.Toastify__slide-enter--top-right,
+.Toastify__slide-enter--bottom-right {
+    animation-name: Toastify__slideInRight;
+}
+.Toastify__slide-enter--top-center {
+    animation-name: Toastify__slideInDown;
+}
+.Toastify__slide-enter--bottom-center {
+    animation-name: Toastify__slideInUp;
+}
+
+.Toastify__slide-exit--top-left,
+.Toastify__slide-exit--bottom-left {
+    animation-name: Toastify__slideOutLeft;
+}
+.Toastify__slide-exit--top-right,
+.Toastify__slide-exit--bottom-right {
+    animation-name: Toastify__slideOutRight;
+}
+.Toastify__slide-exit--top-center {
+    animation-name: Toastify__slideOutUp;
+}
+.Toastify__slide-exit--bottom-center {
+    animation-name: Toastify__slideOutDown;
+}

package/src/modules/cms/pages/admin/all/QuickLinks.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import NavigationItemGroup from '../../../components/admin/NavigationItemGroup';
+import Icon from '@heroicons/react/solid/esm/HomeIcon';
+
+export default function QuickLinks({ dashboard }) {
+  return <NavigationItemGroup
+    id="quickLinks"
+    name="Quick links"
+    items={[
+      {
+        Icon: Icon,
+        url: dashboard,
+        title: "Dashboard"
+      }
+    ]}
+  />
+}
+
+export const layout = {
+  areaId: 'adminMenu',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    dashboard: url(routeId: "dashboard")
+  }
+`