@rettangoli/ui 0.1.0

package/src/primitives/svg.js

@@ -0,0 +1,95 @@
+import { css, dimensionWithUnit } from "../common.js";
+import flexChildStyles from "../styles/flexChildStyles.js";
+import paddingSvgStyles from "../styles/paddingSvgStyles.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import textColorStyles from "../styles/textColorStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliSvgElement extends HTMLElement {
+  static styleSheet = null;
+  static _icons = {};
+
+  static initializeStyleSheet() {
+    if (!RettangoliSvgElement.styleSheet) {
+      RettangoliSvgElement.styleSheet = new CSSStyleSheet();
+      RettangoliSvgElement.styleSheet.replaceSync(css`
+        :host {
+          color: var(--foreground);
+        }
+        ${textColorStyles}
+        ${paddingSvgStyles}
+        ${flexChildStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliSvgElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliSvgElement.styleSheet];
+  }
+
+  static get observedAttributes() {
+    return ["key", "svg", "w", "h", "wh"];
+  }
+
+  static get icons() {
+    return RettangoliSvgElement._icons;
+  }
+
+  static addIcon(iconName, icon) {
+    RettangoliSvgElement._icons[iconName] = icon;
+  }
+
+  connectedCallback() {
+    this._updateSizing();
+    this._render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateSizing();
+    this._render();
+  }
+
+  _updateSizing() {
+    const wh = this.getAttribute("wh");
+    const width = dimensionWithUnit(
+      wh === null ? this.getAttribute("w") : wh
+    );
+    const height = dimensionWithUnit(
+      wh === null ? this.getAttribute("h") : wh
+    );
+
+    if (width) {
+      this.style.width = width;
+    }
+    if (height) {
+      this.style.height = height;
+    }
+  }
+
+  _render() {
+    try {
+      const iconName = this.getAttribute("svg");
+      const svgStringContent =
+        RettangoliSvgElement._icons[iconName] ||
+        (window["rtglIcons"] || {})[iconName];
+      if (svgStringContent) {
+        this.shadow.innerHTML = svgStringContent;
+        return;
+      }
+    } catch (error) {
+      console.log("error in rtgl-svg render", error);
+    }
+    this.shadow.innerHTML = "";
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliSvgElement;
+};

package/src/primitives/text.js

@@ -0,0 +1,141 @@
+import { css, dimensionWithUnit } from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import textStyles from "../styles/textStyles.js";
+import textColorStyles from "../styles/textColorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliTextElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliTextElement.styleSheet) {
+      RettangoliTextElement.styleSheet = new CSSStyleSheet();
+      RettangoliTextElement.styleSheet.replaceSync(css`
+        :host {
+          display: block;
+          font-size: var(--md-font-size);
+          font-weight: var(--md-font-weight);
+          line-height: var(--md-line-height);
+          letter-spacing: var(--md-letter-spacing);
+        }
+        slot {
+          display: contents;
+        }
+        :host ::slotted(a) {
+          text-decoration: var(--anchor-text-decoration);
+          color: var(--anchor-color);
+        }
+        :host ::slotted(a:hover) {
+          text-decoration: var(--anchor-text-decoration-hover);
+          color: var(--anchor-color-hover);
+        }
+        :host([href]) {
+          cursor: pointer;
+          position: relative;
+        }
+        :host([href]) a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 1;
+        }
+        ${textStyles}
+        ${textColorStyles}
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliTextElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliTextElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._slotElement = document.createElement('slot');
+    this._linkElement = null;
+    this._updateDOM();
+  }
+
+  static get observedAttributes() {
+    return ["key", "w", "ellipsis", "href", "target"];
+  }
+
+  connectedCallback() {
+    this._updateStyling();
+    this._updateDOM();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+    } else {
+      this._updateStyling();
+    }
+  }
+
+  _updateStyling() {
+    const width = dimensionWithUnit(this.getAttribute("w"));
+    const ellipsis = this.hasAttribute("ellipsis");
+
+    if (ellipsis) {
+      this.style.overflow = "hidden";
+      this.style.textOverflow = "ellipsis";
+      this.style.whiteSpace = "nowrap";
+    } else {
+      this.style.overflow = "";
+      this.style.textOverflow = "";
+      this.style.whiteSpace = "";
+    }
+
+    if (width === "f") {
+      this.style.width = "var(--width-stretch)";
+    } else if (width !== undefined) {
+      this.style.width = width;
+    } else {
+      this.style.width = "";
+    }
+  }
+
+  _updateDOM() {
+    const href = this.getAttribute("href");
+    const target = this.getAttribute("target");
+
+    // Ensure slot is always in the shadow DOM
+    if (this._slotElement.parentNode !== this.shadow) {
+      this.shadow.appendChild(this._slotElement);
+    }
+
+    if (href) {
+      if (!this._linkElement) {
+        // Create link overlay only if it doesn't exist
+        this._linkElement = document.createElement("a");
+        this.shadow.appendChild(this._linkElement);
+      }
+
+      // Update link attributes
+      this._linkElement.href = href;
+      if (target) {
+        this._linkElement.target = target;
+      } else {
+        this._linkElement.removeAttribute("target");
+      }
+    } else if (this._linkElement) {
+      // Remove link overlay
+      this.shadow.removeChild(this._linkElement);
+      this._linkElement = null;
+    }
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliTextElement;
+};

package/src/primitives/textarea.js

@@ -0,0 +1,103 @@
+import { css, dimensionWithUnit } from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliTextAreaElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliTextAreaElement.styleSheet) {
+      RettangoliTextAreaElement.styleSheet = new CSSStyleSheet();
+      RettangoliTextAreaElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        textarea {
+          font-family: inherit;
+          background-color: var(--background);
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+          border: 1px solid var(--ring);
+          border-radius: var(--border-radius-lg);
+          padding-top: var(--spacing-md);
+          padding-bottom: var(--spacing-md);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          color: var(--foreground);
+          outline: none;
+        }
+        textarea:focus {
+          border-color: var(--foreground);
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliTextAreaElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliTextAreaElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._textareaElement = document.createElement('textarea');
+    this._textareaElement.setAttribute('type', 'text');
+    this.shadow.appendChild(this._textareaElement);
+  }
+
+  static get observedAttributes() {
+    return ["key", "w", "ellipsis", "cols", "rows", "placeholder"];
+  }
+
+  get value() {
+    return this._textareaElement.value;
+  }
+
+  set value(val) {
+    this._textareaElement.value = val;
+  }
+
+  connectedCallback() {
+    this._updateTextareaAttributes();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateTextareaAttributes();
+  }
+
+  _updateTextareaAttributes() {
+    const cols = this.getAttribute("cols");
+    const rows = this.getAttribute("rows");
+    const placeholder = this.getAttribute("placeholder");
+
+    if (cols !== null) {
+      this._textareaElement.setAttribute("cols", cols);
+    } else {
+      this._textareaElement.removeAttribute("cols");
+    }
+
+    if (rows !== null) {
+      this._textareaElement.setAttribute("rows", rows);
+    } else {
+      this._textareaElement.removeAttribute("rows");
+    }
+
+    if (placeholder !== null) {
+      this._textareaElement.setAttribute("placeholder", placeholder);
+    } else {
+      this._textareaElement.removeAttribute("placeholder");
+    }
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliTextAreaElement;
+};

package/src/primitives/view.js

@@ -0,0 +1,217 @@
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} from "../common.js";
+import flexDirectionStyles from "../styles/flexDirectionStyles.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import scrollStyle from "../styles/scrollStyles.js";
+import stylesGenerator from "../styles/viewStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+import flexChildStyles from "../styles/flexChildStyles.js";
+import anchorStyles from "../styles/anchorStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliViewElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliViewElement.styleSheet) {
+      RettangoliViewElement.styleSheet = new CSSStyleSheet();
+      RettangoliViewElement.styleSheet.replaceSync(css`
+        slot {
+          display: contents;
+        }
+        :host {
+          display: flex;
+          flex-direction: column;
+          align-self: auto;
+          align-content: flex-start;
+          border-style: solid;
+          border-width: 0;
+          box-sizing: border-box;
+          border-color: var(--border);
+        }
+
+        :host([fw="w"]) {
+          flex-wrap: wrap;
+        }
+
+        ${flexChildStyles}
+        ${scrollStyle}
+        ${flexDirectionStyles}
+        ${marginStyles}
+        ${cursorStyles}
+        ${stylesGenerator}
+        ${anchorStyles}
+
+        :host([href]) {
+          cursor: pointer;
+          position: relative;
+        }
+
+        :host([href]) a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 1;
+        }
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliViewElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliViewElement.styleSheet];
+
+    // Create initial DOM structure
+    this._styleElement = document.createElement("style");
+    this._slotElement = document.createElement("slot");
+    this._linkElement = null;
+
+    this.shadow.appendChild(this._styleElement);
+    this._updateDOM();
+  }
+
+  static get observedAttributes() {
+    return [
+      "href",
+      "target",
+      "op",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hidden",
+        "sh",
+        "sv",
+      ]),
+    ];
+  }
+
+  _styles = {
+    default: {},
+    sm: {},
+    md: {},
+    lg: {},
+    xl: {},
+  };
+
+  _lastStyleString = "";
+
+  _updateDOM() {
+    const href = this.getAttribute("href");
+    const target = this.getAttribute("target");
+
+    // Ensure slot is always in the shadow DOM
+    if (this._slotElement.parentNode !== this.shadow) {
+      this.shadow.appendChild(this._slotElement);
+    }
+
+    if (href) {
+      if (!this._linkElement) {
+        // Create link overlay only if it doesn't exist
+        this._linkElement = document.createElement("a");
+        this.shadow.appendChild(this._linkElement);
+      }
+
+      // Update link attributes
+      this._linkElement.href = href;
+      if (target) {
+        this._linkElement.target = target;
+      } else {
+        this._linkElement.removeAttribute("target");
+      }
+    } else if (this._linkElement) {
+      // Remove link overlay
+      this.shadow.removeChild(this._linkElement);
+      this._linkElement = null;
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle href and target changes
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+      return;
+    }
+    
+    // Reset styles for fresh calculation
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+
+    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+      const addSizePrefix = (tag) => {
+        return `${size === "default" ? "" : `${size}-`}${tag}`;
+      };
+
+      const wh = this.getAttribute(addSizePrefix("wh"));
+      const width = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
+      );
+      const height = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("h")) : wh,
+      );
+      const opacity = this.getAttribute(addSizePrefix("op"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        this._styles[size].opacity = opacity;
+      }
+
+      if (width === "f") {
+        this._styles[size].width = "var(--width-stretch)";
+      } else if (width !== undefined) {
+        this._styles[size].width = width;
+        this._styles[size]["min-width"] = width;
+        this._styles[size]["max-width"] = width;
+      }
+
+      if (height === "f") {
+        this._styles[size].height = "100%";
+      } else if (height !== undefined) {
+        this._styles[size].height = height;
+        this._styles[size]["min-height"] = height;
+        this._styles[size]["max-height"] = height;
+      }
+
+      if (this.hasAttribute(addSizePrefix("hidden"))) {
+        this._styles[size].display = "none !important";
+      }
+
+      if (this.hasAttribute(addSizePrefix("visible"))) {
+        this._styles[size].display = "flex !important";
+      }
+    });
+
+    // Update styles only if changed
+    const newStyleString = convertObjectToCssString(this._styles);
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliViewElement;
+};

package/src/setup.js

@@ -0,0 +1,16 @@
+import { createWebPatch } from 'rettangoli-fe';
+import { h } from 'snabbdom/build/h';
+
+const componentDependencies = {}
+
+const deps = {
+  components: componentDependencies,
+}
+
+const patch = createWebPatch();
+
+export {
+  h,
+  patch,
+  deps,
+}

package/src/styles/anchorStyles.js

@@ -0,0 +1,13 @@
+import { css } from "../common.js";
+
+export default css`
+  a, a:link, a:visited, a:hover, a:active {
+    color: inherit;
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+  }
+`;

package/src/styles/buttonMarginStyles.js

@@ -0,0 +1,84 @@
+import { generateCSS, spacing } from "../common.js";
+
+const styles = {
+  mt: spacing,
+  mr: spacing,
+  mb: spacing,
+  ml: spacing,
+  m: spacing,
+  mh: spacing,
+  mv: spacing,
+  s: {
+    sm: `
+    height: 28px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-radius: 4px;
+    font-size: var(--xs-font-size);
+    font-weight: var(--xs-font-weight);
+    line-height: var(--xs-line-height);
+    letter-spacing: var(--xs-letter-spacing);
+    `,
+    md: `
+    height: 32px;
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 4px;
+    font-size: var(--sm-font-size);
+    font-weight: var(--sm-font-weight);
+    line-height: var(--sm-line-height);
+    letter-spacing: var(--sm-letter-spacing);
+    `,
+    lg: `
+    height: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 4px;
+    font-size: var(--md-font-size);
+    font-weight: var(--md-font-weight);
+    line-height: var(--md-line-height);
+    letter-spacing: var(--md-letter-spacing);
+    `,
+  },
+  v: {
+    pr: `
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+    `,
+    se: `
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+    `,
+    de: `
+      background-color: var(--destructive);
+      color: var(--primary-foreground);
+    `,
+    ol: `
+      background-color: transparent;
+      color: var(--foreground);
+      border-width: 1px;
+    `,
+    gh: `
+      background-color: transparent;
+      color: var(--foreground);
+    `,
+    lk: `
+      background-color: transparent;
+      color: var(--foreground);
+    `,
+  },
+};
+
+const descendants = {
+  mt: "button",
+  mr: "button",
+  mb: "button",
+  ml: "button",
+  m: "button",
+  mh: "button",
+  mv: "button",
+  s: "button",
+  v: "button",
+};
+
+export default generateCSS(styles, descendants);

package/src/styles/cursorStyles.js

@@ -0,0 +1,12 @@
+import { generateCSS } from '../common.js'
+
+const styles = {
+    "cur": {
+        "p": "pointer",
+        "m": "move",
+        "grab": "grab",
+        "grabbing": "grabbing",
+    },
+};
+
+export default generateCSS(styles);