@stack-spot/portal-layout 0.0.1

package/src/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/src/toaster.tsx

@@ -0,0 +1,72 @@
+import { IconBox } from '@citric/core'
+import { OneOfColorSchemesWithVariants } from '@citric/core/utils/theme.types'
+import { CheckCircleFill, ExclamationTriangleFill, InfoCircleFill, TimesCircleFill } from '@citric/icons'
+import { toast } from 'react-toastify'
+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
+
+const icons: Record<ToastType, { element: React.ReactElement, color: string }> = {
+  error: {
+    element: <TimesCircleFill />,
+    color: 'danger',
+  },
+  success: {
+    element: <CheckCircleFill />,
+    color: 'success',
+  },
+  warning: {
+    element: <ExclamationTriangleFill />,
+    color: 'warning',
+  },
+  info: {
+    element: <InfoCircleFill />,
+    color: 'inverse',
+  },
+}
+
+export function showToaster({ type = 'info', autoClose = 10, ...props }: 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
+      ? <div onClick={props.onClick}><h1 style={{ textTransform: 'capitalize' }}>{props.title ?? type}</h1><p>{props.message}</p></div>
+      : 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 ? () => (
+        <IconBox colorScheme={fg as OneOfColorSchemesWithVariants}>
+          {icon.element}
+        </IconBox>
+      ) : undefined,
+    },
+  )
+}

package/src/utils.ts

@@ -0,0 +1,7 @@
+import { valueOf } from '@stack-spot/portal-theme'
+
+export function valueOfLayoutVar(varname: string): string {
+  const layout = document.getElementById('layout')
+  if (!layout) return ''
+  return valueOf(varname, layout)
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}