@stack-spot/portal-layout 0.0.1

package/dist/index.js

@@ -0,0 +1,11 @@
+export { Layout } from './Layout';
+export { overlay } from './LayoutOverlayManager';
+export { Header } from './components/Header';
+export { StackspotLogo } from './components/Logo';
+export { MenuContent } from './components/Menu/MenuContent';
+export { MenuSections } from './components/Menu/MenuSections';
+export * from './components/Menu/types';
+export { SelectionList } from './components/SelectionList';
+export * from './components/types';
+export * from './errors';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}

package/dist/layout.css

@@ -0,0 +1,383 @@
+/* Scrollbars */
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--light-600);
+}
+
+/* Layout */
+
+html {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background: var(--light-400);
+  font: var(--font);
+  color: var(--light-contrastText);
+}
+
+#root, #layout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+#layout {
+  --header-height: 56px;
+  --menu-sections-width: 87px;
+  --menu-content-width: 233px;
+  --menu-item-height: 74px;
+  --modal-animation-duration: 0.3s;
+  --right-panel-animation-duration: 0.3s;
+  --menu-animation-duration: 0.3s;
+  --toastify-font-family: 'Roboto', sans-serif;
+}
+
+#layout.menu-compact {
+  --menu-sections-width: 56px;
+  --menu-item-height: 56px;
+}
+
+#header {
+  height: var(--header-height);
+  padding: 0 24px;
+  align-items: center;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-color: var(--light-400);
+}
+
+#page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--light-300);
+  border-top-left-radius: 0.5rem;
+  align-items: center;
+  padding: 24px;
+  margin-top: var(--header-height);
+  margin-left: var(--menu-sections-width);
+  transition: margin ease-in-out var(--menu-animation-duration);
+}
+
+#layout.menu-content-visible #page {
+  margin-left: calc(var(--menu-sections-width) + var(--menu-content-width));
+}
+
+#content {
+  width: 100%;
+  max-width: 1144px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Menu */
+
+#menu {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  top: var(--header-height);
+  bottom: 0;
+}
+
+#menu svg {
+  fill: var(--light-contrastText);
+}
+
+#menu .toggle .expand {
+  fill: var(--primary-500);
+}
+
+#menu .toggle .expand,
+#menu .toggle .collapse {
+  position: absolute;
+  transition: opacity 0.3s;
+}
+
+#menu .toggle .expand,
+#layout.menu-content-visible .toggle .collapse {
+  opacity: 1;
+}
+
+#menu .toggle .collapse,
+#layout.menu-content-visible .toggle .expand {
+  opacity: 0;
+}
+
+#menuSections {
+  width: var(--menu-sections-width);
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+  justify-content: space-between;
+  background-color: var(--light-400);
+  z-index: 1;
+}
+
+#layout.menu-compact .section-label {
+  display: none;
+}
+
+#menuSections .toggle,
+#menuSections > ul li a {
+  background: transparent;
+  border: none;
+  outline: none;
+  width: var(--menu-sections-width);
+  height: var(--menu-item-height);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  position: relative;
+}
+
+#menuSections > ul li a:before {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 24px;
+  transform: scaleY(0);
+  transition: transform ease-in 0.2s;
+  background-color: var(--primary-500);
+  border-radius: 50%;
+  left: 0;
+}
+
+#menuSections > ul li.active a {
+  background-color: var(--light-500);
+}
+
+#menuSections > ul li.active a:before {
+  transform: scaleY(1);
+}
+
+#menuSections .toggle:hover,
+#menuSections > ul li a:hover {
+  background: var(--light-500);
+}
+
+#menuSections .toggle i {
+  position: relative;
+}
+
+#menuContentOverlay {
+  width: 232px;
+  position: fixed;
+  top: calc(var(--header-height) + 15px);
+  left: calc(var(--menu-sections-width) + 15px);
+  bottom: 15px;
+  background-color: var(--light-400);
+  box-shadow: 2px 2px 16px #000;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.3s;
+}
+
+#menuContentOverlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#menuContentOverlay > div {
+  flex: 1;
+  overflow: auto;
+}
+
+#menuContentOverlay > .arrow {
+  width: 0; 
+  height: 0; 
+  border-top: 12px solid transparent;
+  border-bottom: 12px solid transparent; 
+  border-right: 12px solid var(--light-400);
+  position: fixed;
+  /* header + menu sections padding + item height / 2 - arrow height / 2 */
+  top: calc(var(--header-height) + 10px + var(--menu-item-height) / 2 - 12px);
+  left: calc(var(--menu-sections-width) + 3px);
+  transition: top ease-out 0.3s;
+}
+
+#menuContent {
+  width: var(--menu-content-width);
+  transition: left ease-out var(--menu-animation-duration);
+  background-color: var(--light-400);
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--menu-sections-width) - var(--menu-content-width) - 2px); /* 2px from border */
+  border-left: 2px solid var(--light-500);
+}
+
+#layout.menu-content-visible #menuContent {
+  left: var(--menu-sections-width);
+}
+
+/* Overlays */
+
+#backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--backdrop-color);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity ease-in-out var(--modal-animation-duration);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#backdrop.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#modal {
+  transform: scale(0);
+  display: flex;
+  flex-direction: column;
+  transition: transform ease-in-out var(--modal-animation-duration);
+  width: calc(100% - 60px);
+}
+
+#modal.fit-content {
+  width: auto;
+}
+
+#modal.large {
+  max-width: 1000px;
+}
+
+#modal.medium {
+  max-width: 800px;
+}
+
+#modal.small {
+  max-width: 600px;
+}
+
+#modal.visible {
+  transform: scale(1);
+}
+
+#rightPanel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: var(--header-height);
+  right: -307px;
+  bottom: 0;
+  width: 307px;
+  transition: right var(--right-panel-animation-duration);
+  background-color: var(--light-400);
+}
+
+#rightPanel.visible {
+  right: 0;
+}
+
+#bottomPanel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  bottom: -420px;
+  left: 20px;
+  height: 400px;
+  transition: transform bottom 0.3s;
+}
+
+#bottomPanel.visible {
+  bottom: 20px;
+}
+
+#bottomDialog {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  bottom: -80px;
+  left: 0;
+  right: 0;
+  height: 80px;
+  transition: transform bottom 0.3s;
+}
+
+#bottomDialog.visible {
+  bottom: 0;
+}
+
+/* Overlay: toaster */
+
+.main-toaster h1 {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.main-toaster p {
+  margin: 0;
+  font-size: 12px;
+}
+
+.main-toaster .toast-body {
+  align-items: start;
+}
+
+.main-toaster .Toastify__toast-icon {
+  margin-top: 2px;
+  width: auto;
+}
+
+/* Other */
+
+svg path.stackspot-text {
+  fill: var(--light-contrastText)
+}
+
+a {
+  color: var(--light-contrastText);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+i {
+  fill: var(--light-contrastText);
+}

package/dist/toaster.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import 'react-toastify/dist/ReactToastify.css';
+type ToastType = 'error' | 'success' | 'warning' | 'info';
+interface BaseProps {
+    type?: ToastType;
+    /**
+     * Seconds until auto-close or false to not auto-close.
+     * @default 10
+     */
+    autoClose?: number | false;
+}
+interface BasicMessageProps extends BaseProps {
+    message: string;
+    title?: string;
+    onClick?: () => void;
+}
+interface RichMessageProps extends BaseProps {
+    content: React.ReactElement;
+}
+type Props = BasicMessageProps | RichMessageProps;
+export declare function showToaster({ type, autoClose, ...props }: Props): void;
+export {};
+//# sourceMappingURL=toaster.d.ts.map

package/dist/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAIA,OAAO,uCAAuC,CAAA;AAE9C,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AAEzD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAqBjD,wBAAgB,WAAW,CAAC,EAAE,IAAa,EAAE,SAAc,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,QAuB7E"}

package/dist/toaster.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox } from '@citric/core';
+import { CheckCircleFill, ExclamationTriangleFill, InfoCircleFill, TimesCircleFill } from '@citric/icons';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+const icons = {
+    error: {
+        element: _jsx(TimesCircleFill, {}),
+        color: 'danger',
+    },
+    success: {
+        element: _jsx(CheckCircleFill, {}),
+        color: 'success',
+    },
+    warning: {
+        element: _jsx(ExclamationTriangleFill, {}),
+        color: 'warning',
+    },
+    info: {
+        element: _jsx(InfoCircleFill, {}),
+        color: 'inverse',
+    },
+};
+export function showToaster({ type = 'info', autoClose = 10, ...props }) {
+    const icon = icons[type];
+    const bg = `var(--${icon.color}-500)`;
+    const bgDark = `var(--${icon.color}-600)`;
+    const fg = `var(--${icon.color}-contrastText)`;
+    toast('message' in props
+        ? _jsxs("div", { onClick: props.onClick, children: [_jsx("h1", { style: { textTransform: 'capitalize' }, children: props.title ?? type }), _jsx("p", { children: props.message })] })
+        : props.content, {
+        type,
+        autoClose: autoClose === false ? false : autoClose * 1000,
+        className: 'main-toaster',
+        style: { backgroundColor: bg, color: fg },
+        progressStyle: { background: bgDark },
+        bodyClassName: 'toast-body',
+        icon: 'message' in props ? () => (_jsx(IconBox, { colorScheme: fg, children: icon.element })) : undefined,
+    });
+}
+//# sourceMappingURL=toaster.js.map

package/dist/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACzG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,uCAAuC,CAAA;AAyB9C,MAAM,KAAK,GAAsE;IAC/E,KAAK,EAAE;QACL,OAAO,EAAE,KAAC,eAAe,KAAG;QAC5B,KAAK,EAAE,QAAQ;KAChB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAC,eAAe,KAAG;QAC5B,KAAK,EAAE,SAAS;KACjB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAC,uBAAuB,KAAG;QACpC,KAAK,EAAE,SAAS;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAC,cAAc,KAAG;QAC3B,KAAK,EAAE,SAAS;KACjB;CACF,CAAA;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAS;IAC5E,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IACxB,MAAM,EAAE,GAAG,SAAS,IAAI,CAAC,KAAK,OAAO,CAAA;IACrC,MAAM,MAAM,GAAG,SAAS,IAAI,CAAC,KAAK,OAAO,CAAA;IACzC,MAAM,EAAE,GAAG,SAAS,IAAI,CAAC,KAAK,gBAAgB,CAAA;IAC9C,KAAK,CACH,SAAS,IAAI,KAAK;QAChB,CAAC,CAAC,eAAK,OAAO,EAAE,KAAK,CAAC,OAAO,aAAE,aAAI,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,YAAG,KAAK,CAAC,KAAK,IAAI,IAAI,GAAM,EAAA,sBAAI,KAAK,CAAC,OAAO,GAAK,IAAM;QACjI,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB;QACE,IAAI;QACJ,SAAS,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI;QACzD,SAAS,EAAC,cAAc;QACxB,KAAK,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACzC,aAAa,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;QACrC,aAAa,EAAE,YAAY;QAC3B,IAAI,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAC/B,KAAC,OAAO,IAAC,WAAW,EAAE,EAAmC,YACtD,IAAI,CAAC,OAAO,GACL,CACX,CAAC,CAAC,CAAC,SAAS;KACd,CACF,CAAA;AACH,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function valueOfLayoutVar(varname: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIxD"}

package/dist/utils.js

@@ -0,0 +1,8 @@
+import { valueOf } from '@stack-spot/portal-theme';
+export function valueOfLayoutVar(varname) {
+    const layout = document.getElementById('layout');
+    if (!layout)
+        return '';
+    return valueOf(varname, layout);
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAElD,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IAChD,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAA;IACtB,OAAO,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AACjC,CAAC"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@stack-spot/portal-layout",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "@citric/core": "^5.2.0",
+    "@citric/icons": "^5.2.0",
+    "@citric/ui": "^5.2.0",
+    "@stack-spot/portal-theme": "0.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "6.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "cpy-cli": "^5.0.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "react-toastify": "^9.1.3"
+  },
+  "scripts": {
+    "build": "tsc && cpy src/layout.css dist --flat",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  }
+}

package/src/Layout.tsx

@@ -0,0 +1,68 @@
+import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
+import '@stack-spot/portal-theme/dist/theme.css'
+import { ReactElement } from 'react'
+import { Header, HeaderProps } from './components/Header'
+import { MenuContent } from './components/Menu/MenuContent'
+import { MenuSections } from './components/Menu/MenuSections'
+import { MenuProps } from './components/Menu/types'
+import { Toaster } from './components/Toaster'
+import './layout.css'
+import { overlay } from './LayoutOverlayManager'
+
+interface Props extends WithStyle {
+  menu: MenuProps,
+  header: HeaderProps,
+  children: ReactElement,
+}
+
+interface RawProps extends WithStyle {
+  menuSections: ReactElement,
+  menuContent?: ReactElement,
+  header: ReactElement,
+  children: ReactElement,
+  compactMenu?: boolean,
+}
+
+export const RawLayout = ({ menuSections, menuContent, header, compactMenu = true, children, className, style }: RawProps) => {
+  // @ts-ignore
+  const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
+  const classes = [
+    menuContent ? 'menu-content-visible' : undefined,
+    compactMenu ? 'menu-compact' : undefined,
+    className,
+  ]
+
+  return (
+    <CSSToCitricAdapter>
+      <div id="layout" className={listToClass(classes)} style={style}>
+        <header id="header">{header}</header>
+        <aside id="menu">
+          <nav id="menuContent">{menuContent}</nav>
+          <nav id="menuSections">{menuSections}</nav>
+        </aside>
+        <div id="page">
+          <article id="content">{children}</article>
+        </div>
+        <div id="rightPanel">{rightPanel}</div>
+        <div id="bottomDialog">{bottomDialog}</div>
+        <div id="backdrop">
+          <div id="modal">{modal}</div>
+        </div>
+        <Toaster />
+      </div>
+    </CSSToCitricAdapter>
+  )
+}
+
+export const Layout = ({ menu, header, children, className, style }: Props) => (
+  <RawLayout
+    header={<Header {...header} />}
+    menuSections={<MenuSections sections={menu.sections} />}
+    menuContent={menu.content ? <MenuContent {...menu.content} /> : undefined}
+    compactMenu={menu.compact}
+    className={className}
+    style={style}
+  >
+    {children}
+  </RawLayout>
+)