@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/majoo-provider/globalStyles.esm.js

@@ -0,0 +1,242 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.set.difference.v2.js';
+import 'core-js/modules/es.set.intersection.v2.js';
+import 'core-js/modules/es.set.is-disjoint-from.v2.js';
+import 'core-js/modules/es.set.is-subset-of.v2.js';
+import 'core-js/modules/es.set.is-superset-of.v2.js';
+import 'core-js/modules/es.set.symmetric-difference.v2.js';
+import 'core-js/modules/es.set.union.v2.js';
+import { globalCss } from '../config/stitches.config.esm.js';
+import { normalize } from './styles/modern-normalize.esm.js';
+
+// System fonts and fonts not available on Google Fonts - these should not be loaded
+const SYSTEM_FONTS = new Set([
+// Generic font families
+'sans-serif', 'serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-monospace', 'ui-sans-serif', 'ui-serif', 'ui-rounded',
+// CSS keywords
+'inherit', 'initial', 'unset', 'revert',
+// Windows system fonts
+'arial', 'helvetica', 'verdana', 'georgia', 'times new roman', 'times', 'courier new', 'courier', 'segoe ui', 'tahoma', 'trebuchet ms', 'lucida console', 'consolas', 'impact', 'comic sans ms',
+// macOS system fonts
+'-apple-system', 'blinkmacsystemfont', 'helvetica neue', 'san francisco', 'sf pro', 'sf pro display', 'sf pro text', 'sf mono', 'sfmono-regular', '.sfnstext-regular', '.sfns-regular', 'menlo', 'monaco', 'avenir', 'avenir next',
+// Linux system fonts
+'ubuntu', 'cantarell', 'droid sans', 'fira sans', 'oxygen', 'dejavu sans', 'liberation sans', 'liberation mono',
+// Premium/Paid fonts (not on Google Fonts)
+'operator mono', 'fira code retina', 'firacode-retina', 'andale mono', 'source code pro', 'jetbrains mono', 'sf mono']);
+
+// Track fonts that have been loaded or attempted to avoid duplicate requests
+const loadedFonts = new Set();
+
+/**
+ * Extracts font family names from a CSS font-family string.
+ * @param {string} fontFamilyString - CSS font-family value (e.g., 'inter, "Open Sans", Arial')
+ * @returns {string[]} - Array of font family names (lowercase)
+ */
+function parseFontFamilies(fontFamilyString) {
+  return fontFamilyString.split(',').map(font => font.trim().replace(/["']/g, '').toLowerCase()).filter(font => font.length > 0);
+}
+
+/**
+ * Converts a font family name to Google Fonts URL format.
+ * e.g., "nunito sans" -> "Nunito+Sans"
+ * @param {string} fontFamily - Font family name (lowercase)
+ * @returns {string} - URL-formatted font name
+ */
+function toGoogleFontsName(fontFamily) {
+  return fontFamily.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('+');
+}
+
+/**
+ * Loads a single font from Google Fonts if not already loaded.
+ * @param {string} fontFamily - Font family name (lowercase)
+ */
+function loadFont(fontFamily) {
+  if (typeof document === 'undefined') return;
+
+  // Skip system fonts
+  if (SYSTEM_FONTS.has(fontFamily)) return;
+
+  // Skip if already attempted to load
+  if (loadedFonts.has(fontFamily)) return;
+
+  // Convert font name to Google Fonts format
+  const googleFontName = toGoogleFontsName(fontFamily);
+
+  // Check if a similar font URL is already in the document
+  const existingLink = document.querySelector(`link[href*="family=${googleFontName}"]`);
+  if (existingLink) {
+    loadedFonts.add(fontFamily);
+    return;
+  }
+
+  // Mark as attempted before loading (to prevent duplicate requests)
+  loadedFonts.add(fontFamily);
+
+  // Use common weight range for flexibility
+  const fontUrl = `https://fonts.googleapis.com/css2?family=${googleFontName}:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap`;
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = fontUrl;
+  // Silently fail if font doesn't exist on Google Fonts
+  link.onerror = () => {
+    /* noop: font is optional */
+  };
+  document.head.appendChild(link);
+}
+
+/**
+ * Loads missing fonts from Google Fonts.
+ * @param {string[]} requiredFonts - Array of font family names to check and load
+ */
+function loadMissingFonts(requiredFonts) {
+  requiredFonts.forEach(font => loadFont(font));
+}
+
+/**
+ * Scans an element for font-family styles and loads missing fonts.
+ * @param {Element} element - DOM element to scan
+ */
+function scanElementForFonts(element) {
+  if (!element || !element.style) return;
+  const fontFamily = element.style.fontFamily || window.getComputedStyle(element).fontFamily;
+  if (fontFamily) {
+    const fonts = parseFontFamilies(fontFamily);
+    fonts.forEach(font => {
+      if (!loadedFonts.has(font) && !SYSTEM_FONTS.has(font)) {
+        loadFont(font);
+      }
+    });
+  }
+}
+
+/**
+ * Observes the DOM for elements with font-family styles and auto-loads missing fonts.
+ * This enables automatic font loading when content from DB uses fonts not yet loaded.
+ */
+function observeDOMForMissingFonts() {
+  if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return;
+
+  // Initial scan of existing elements
+  const allElements = document.querySelectorAll('*');
+  allElements.forEach(scanElementForFonts);
+
+  // Observe for new elements or style changes
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      // Handle added nodes
+      if (mutation.addedNodes) {
+        mutation.addedNodes.forEach(node => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            scanElementForFonts(node);
+            // Also scan children
+            const children = node.querySelectorAll ? node.querySelectorAll('*') : [];
+            children.forEach(scanElementForFonts);
+          }
+        });
+      }
+      // Handle style attribute changes
+      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+        scanElementForFonts(mutation.target);
+      }
+    });
+  });
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['style']
+  });
+}
+const applyGlobalStyles = (additionaStyles, theme) => {
+  // Auto-load missing fonts used in the main font family
+  const mainFonts = parseFontFamilies(theme?.fonts?.main?.value || 'inter, "Open Sans", Arial, sans-serif');
+  loadMissingFonts(mainFonts);
+  const globalStyles = globalCss({
+    ...normalize
+  }, {
+    // Use raw font value from theme if available, so consumer themes
+    // (created via createTheme) correctly override the default font.
+    // Falling back to '$main' token for the default theme.
+    'html,body,#root': {
+      width: '100%',
+      height: '100%',
+      fontFamily: theme?.fonts?.main?.value || '$main'
+    },
+    'h1,h2,h3,h4,h5,h6,p': {
+      margin: '0'
+    },
+    a: {
+      color: 'inherit',
+      textDecoration: 'none'
+    },
+    img: {
+      display: 'block',
+      maxWidth: '100%'
+    },
+    // '.noscroll': { overflow: 'hidden' },
+    '.noselect': {
+      userSelect: 'none'
+    },
+    '.full-size': {
+      height: '100%',
+      width: '100%'
+    },
+    '.full-size-layout': {
+      height: '100%',
+      minHeight: '100vh',
+      width: '100%'
+    },
+    '.drag-handle': {
+      cursor: 'move',
+      display: 'inline-block',
+      '&::before': {
+        content: "'......'",
+        display: 'inline-block',
+        width: '10px',
+        wordBreak: 'break-word',
+        whiteSpace: 'normal',
+        letterSpacing: '2px',
+        lineHeight: '4.5px',
+        textAlign: 'center',
+        height: '18px'
+      }
+    },
+    '[data-reach-skip-link]': {
+      border: '0',
+      clip: 'rect(0 0 0 0)',
+      height: '1px',
+      width: '1px',
+      margin: '-1px',
+      padding: '0',
+      overflow: 'hidden',
+      position: 'absolute'
+    },
+    '[data-reach-skip-link]:focus': {
+      padding: '1rem',
+      position: 'fixed',
+      top: '10px',
+      left: '10px',
+      background: 'white',
+      zIndex: 100,
+      width: 'auto',
+      height: 'auto',
+      clip: 'auto'
+    }
+  }, {
+    ...additionaStyles
+  });
+  globalStyles();
+
+  // Start observing DOM for missing fonts after styles are applied
+  if (typeof document !== 'undefined' && document.body) {
+    observeDOMForMissingFonts();
+  } else if (typeof document !== 'undefined') {
+    // Wait for DOM to be ready
+    document.addEventListener('DOMContentLoaded', observeDOMForMissingFonts);
+  }
+};
+
+export { applyGlobalStyles };

package/majoo-provider/styles/modern-normalize.esm.js

@@ -0,0 +1,95 @@
+const normalize = {
+  '*,::before,::after': {
+    boxSizing: 'border-box'
+  },
+  html: {
+    lineHeight: 1.15,
+    WebkitTextSizeAdjust: '100%',
+    MozTabSize: '4',
+    tabSize: 4
+  },
+  body: {
+    margin: '0',
+    fontFamily: "system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'"
+  },
+  hr: {
+    height: '0',
+    color: 'inherit'
+  },
+  'abbr[title]': {
+    textDecoration: 'underline dotted'
+  },
+  'b,strong': {
+    fontWeight: 'bolder'
+  },
+  'code,kbd,samp,pre': {
+    fontFamily: "ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace",
+    fontSize: '1em'
+  },
+  small: {
+    fontSize: '80%'
+  },
+  'sub,sup': {
+    fontSize: '75%',
+    lineHeight: 0,
+    position: 'relative',
+    verticalAlign: 'baseline'
+  },
+  sub: {
+    bottom: '-0.25em'
+  },
+  sup: {
+    top: '-0.5em'
+  },
+  table: {
+    textIndent: '0',
+    borderColor: 'inherit'
+  },
+  'button,input,optgroup,select,textarea': {
+    fontFamily: 'inherit',
+    fontSize: '100%',
+    lineHeight: 1.15,
+    margin: '0'
+  },
+  'button,select': {
+    textTransform: 'none'
+  },
+  "button,[type='button'],[type='reset'],[type='submit']": {
+    WebkitAppearance: 'button'
+  },
+  '::-moz-focus-inner': {
+    borderStyle: 'none',
+    padding: '0'
+  },
+  ':-moz-focusring': {
+    outline: '1px dotted ButtonText'
+  },
+  ':-moz-ui-invalid': {
+    boxShadow: 'none'
+  },
+  legend: {
+    padding: '0'
+  },
+  progress: {
+    verticalAlign: 'baseline'
+  },
+  '::-webkit-inner-spin-button,::-webkit-outer-spin-button': {
+    height: 'auto'
+  },
+  "[type='search']": {
+    WebkitAppearance: 'textfield',
+    outlineOffset: '-2px'
+  },
+  '::-webkit-search-decoration': {
+    WebkitAppearance: 'none'
+  },
+  '::-webkit-file-upload-button': {
+    WebkitAppearance: 'button',
+    font: 'inherit'
+  },
+  summary: {
+    display: 'list-item'
+  }
+};
+
+export { normalize };