@code0-tech/pictor 0.0.0-mvp.2

package/dist/utils/utils.d.ts

@@ -0,0 +1,68 @@
+import { default as React, ReactNode } from 'react';
+export declare const parseUnit: (str: string) => (number | string)[];
+export declare const getChild: (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean, matchingProps?: Object) => React.ReactElement | undefined;
+export declare const getContent: (children: ReactNode | ReactNode[], ...child: React.FC<any>[]) => ReactNode[] | null;
+export interface Positioning {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+export declare const mergeCode0Props: (cn: string, rest: object) => {
+    m?: import('./types').StyleProp<number | `${number}`> | undefined;
+    my?: import('./types').StyleProp<number | `${number}`> | undefined;
+    mx?: import('./types').StyleProp<number | `${number}`> | undefined;
+    mt?: import('./types').StyleProp<number | `${number}`> | undefined;
+    mb?: import('./types').StyleProp<number | `${number}`> | undefined;
+    ml?: import('./types').StyleProp<number | `${number}`> | undefined;
+    mr?: import('./types').StyleProp<number | `${number}`> | undefined;
+    p?: import('./types').StyleProp<number | `${number}`> | undefined;
+    py?: import('./types').StyleProp<number | `${number}`> | undefined;
+    px?: import('./types').StyleProp<number | `${number}`> | undefined;
+    pt?: import('./types').StyleProp<number | `${number}`> | undefined;
+    pb?: import('./types').StyleProp<number | `${number}`> | undefined;
+    pl?: import('./types').StyleProp<number | `${number}`> | undefined;
+    pr?: import('./types').StyleProp<number | `${number}`> | undefined;
+    bg?: import("csstype").Property.BackgroundColor | undefined;
+    c?: import("csstype").Property.Color | undefined;
+    opacity?: import("csstype").Property.Opacity | undefined;
+    ff?: import('./types').StyleProp<"mono" | "text" | "heading" | (string & {})> | undefined;
+    fz?: import('./types').StyleProp<import('./types').Code0FontSizes | number | `${number}`> | undefined;
+    fw?: import("csstype").Property.FontWeight | undefined;
+    lts?: import("csstype").Property.LetterSpacing<string | number> | undefined;
+    ta?: import("csstype").Property.TextAlign | undefined;
+    lh?: import('./types').StyleProp<number | (string & {})> | undefined;
+    fs?: import("csstype").Property.FontStyle | undefined;
+    tt?: import("csstype").Property.TextTransform | undefined;
+    td?: import("csstype").Property.TextDecoration<string | number> | undefined;
+    w?: import("csstype").Property.Width<string | number> | undefined;
+    miw?: import("csstype").Property.MinWidth<string | number> | undefined;
+    maw?: import("csstype").Property.MaxWidth<string | number> | undefined;
+    h?: import("csstype").Property.Height<string | number> | undefined;
+    mih?: import("csstype").Property.MinHeight<string | number> | undefined;
+    mah?: import("csstype").Property.MaxHeight<string | number> | undefined;
+    bgsz?: import("csstype").Property.BackgroundSize<string | number> | undefined;
+    bgp?: import("csstype").Property.BackgroundPosition<string | number> | undefined;
+    bgr?: import("csstype").Property.BackgroundRepeat | undefined;
+    bga?: import("csstype").Property.BackgroundAttachment | undefined;
+    pos?: import("csstype").Property.Position | undefined;
+    top?: import("csstype").Property.Top<string | number> | undefined;
+    left?: import("csstype").Property.Left<string | number> | undefined;
+    bottom?: import("csstype").Property.Bottom<string | number> | undefined;
+    right?: import("csstype").Property.Right<string | number> | undefined;
+    inset?: import("csstype").Property.Inset<string | number> | undefined;
+    display?: import("csstype").Property.Display | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    align?: import("csstype").Property.AlignItems | undefined;
+    justify?: import("csstype").Property.JustifyContent | undefined;
+    tf?: import("csstype").Property.Transform | undefined;
+    style?: React.CSSProperties | undefined;
+    className: string;
+};
+export declare const getWindowPositioning: () => Omit<Omit<Positioning, "x">, "y">;
+export declare const getPositioning: (node: HTMLElement) => Positioning;
+export declare const getPositionAroundTarget: (target: HTMLElement, element: HTMLElement, position?: "top" | "bottom" | "left" | "right") => {
+    position: string;
+    y: number;
+    x: number;
+};

package/dist/utils/utils.js

@@ -0,0 +1,216 @@
+import h from "react";
+import u from "merge-props";
+const l = (i) => {
+  const r = /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/, o = parseFloat(i), n = i.match(r) || [], t = n.length > 0 ? i.substr(n[0]?.length ?? 0).trim() : "";
+  return [o, t];
+}, C = (i, r, o, n) => {
+  let t, a = !1;
+  return h.Children.forEach(i, (m, c) => {
+    let e = !0;
+    if (h.isValidElement(m) && n)
+      for (const g in n) {
+        const p = n[g];
+        if (!m.props[g] || m.props[g] != p) {
+          e = !1;
+          break;
+        }
+      }
+    if (h.isValidElement(m) && m.type == r && e)
+      t = m, a = !0;
+    else if (h.Children.count(i) - 1 == c && !a && !t && o) throw new Error(`${r.name} is required`);
+  }), t;
+}, E = (i, ...r) => {
+  const o = h.Children.toArray(i).filter((n) => h.isValidElement(n) ? !r.find((t) => t == n.type) : !0);
+  return o.length == 0 ? null : o;
+}, b = (i) => ({
+  ...i.m ? {
+    margin: `${i.m}rem`
+  } : {},
+  ...i.my ? {
+    marginTop: `${i.my}rem`,
+    marginBottom: `${i.my}rem`
+  } : {},
+  ...i.mx ? {
+    marginLeft: `${i.mx}rem`,
+    marginRight: `${i.mx}rem`
+  } : {},
+  ...i.mt ? {
+    marginTop: `${i.mt}rem`
+  } : {},
+  ...i.mb ? {
+    marginBottom: `${i.mb}rem`
+  } : {},
+  ...i.ml ? {
+    marginLeft: `${i.ml}rem`
+  } : {},
+  ...i.mr ? {
+    marginRight: `${i.mr}rem`
+  } : {},
+  ...i.p ? {
+    padding: `${i.p}rem`
+  } : {},
+  ...i.py ? {
+    paddingTop: `${i.py}rem`,
+    paddingBottom: `${i.py}rem`
+  } : {},
+  ...i.px ? {
+    paddingLeft: `${i.px}rem`,
+    paddingRight: `${i.px}rem`
+  } : {},
+  ...i.pt ? {
+    paddingTop: `${i.pt}rem`
+  } : {},
+  ...i.pb ? {
+    paddingBottom: `${i.pb}rem`
+  } : {},
+  ...i.pl ? {
+    paddingLeft: `${i.pl}rem`
+  } : {},
+  ...i.pr ? {
+    paddingRight: `${i.pr}rem`
+  } : {},
+  ...i.bg ? {
+    backgroundColor: i.bg
+  } : {},
+  ...i.c ? {
+    color: i.c
+  } : {},
+  ...i.opacity ? {
+    opacity: i.opacity
+  } : {},
+  ...i.ff ? {
+    fontFamily: i.ff
+  } : {},
+  ...i.fz ? {
+    fontSize: `${i.fz}rem`
+  } : {},
+  ...i.ta ? {
+    textAlign: i.ta
+  } : {},
+  ...i.w ? {
+    width: i.w
+  } : {},
+  ...i.miw ? {
+    minWidth: i.miw
+  } : {},
+  ...i.maw ? {
+    maxWidth: i.maw
+  } : {},
+  ...i.h ? {
+    height: i.h
+  } : {},
+  ...i.mih ? {
+    minHeight: i.mih
+  } : {},
+  ...i.mah ? {
+    maxHeight: i.mah
+  } : {},
+  ...i.pos ? {
+    position: i.pos
+  } : {},
+  ...i.top ? {
+    top: i.top
+  } : {},
+  ...i.left ? {
+    left: i.left
+  } : {},
+  ...i.bottom ? {
+    bottom: i.bottom
+  } : {},
+  ...i.right ? {
+    right: i.right
+  } : {},
+  ...i.display ? {
+    display: i.display
+  } : {},
+  ...i.flex ? {
+    flex: i.flex
+  } : {},
+  ...i.align ? {
+    alignItems: i.align
+  } : {},
+  ...i.justify ? {
+    justifyContent: i.justify
+  } : {},
+  ...i.tf ? {
+    transform: i.tf
+  } : {}
+}), R = (i, r) => {
+  const o = b(r), n = {
+    ...r
+  };
+  return ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex", "align", "justify", "tf"].forEach((a) => {
+    delete n[a];
+  }), u(n, {
+    className: i,
+    ...Object.keys(o).length !== 0 ? {
+      style: o
+    } : {}
+  });
+}, w = () => ({
+  height: window.innerHeight,
+  width: window.innerWidth
+}), f = (i) => ({
+  width: i.offsetWidth,
+  height: i.offsetHeight,
+  x: i.getBoundingClientRect().left,
+  y: i.getBoundingClientRect().top
+}), X = (i, r, o = "bottom") => {
+  const t = f(i), a = f(r), m = w(), c = [{
+    name: "bottom",
+    hierarchy: ["top", "left", "right"],
+    calculationY: t.y + t.height + 8,
+    calculationX: t.x,
+    conditionFit: t.y + t.height + 8 + a.height <= m.height
+  }, {
+    name: "top",
+    hierarchy: ["bottom", "left", "right"],
+    calculationY: t.y - 8 - a.height,
+    calculationX: t.x,
+    conditionFit: t.y - 8 - a.height >= 0
+  }, {
+    name: "left",
+    hierarchy: ["right", "bottom", "top"],
+    calculationY: t.y,
+    calculationX: t.x - 8 - a.width,
+    conditionFit: t.x - 8 - a.width >= 0
+  }, {
+    name: "right",
+    hierarchy: ["left", "bottom", "top"],
+    calculationY: t.y,
+    calculationX: t.x + 8 + t.width,
+    conditionFit: t.x + t.width + 8 + a.width <= m.width
+  }], e = c.find((g) => g.name == o);
+  if (!e) return {
+    position: "bottom",
+    y: c[0].calculationY,
+    x: c[0].calculationX
+  };
+  if (e.conditionFit) return {
+    position: o,
+    y: e.calculationY,
+    x: e.calculationX
+  };
+  for (let g = 0; g < e.hierarchy.length; g++) {
+    const p = c.find((d) => d.name == e.hierarchy[g]);
+    if (p?.conditionFit) return {
+      position: p.name,
+      y: p.calculationY,
+      x: p.calculationX
+    };
+  }
+  return {
+    position: "bottom",
+    y: c[0].calculationY,
+    x: c[0].calculationX
+  };
+};
+export {
+  C as getChild,
+  E as getContent,
+  X as getPositionAroundTarget,
+  f as getPositioning,
+  w as getWindowPositioning,
+  R as mergeCode0Props,
+  l as parseUnit
+};

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@code0-tech/pictor",
+  "version": "0.0.0-mvp.2",
+  "type": "module",
+  "description": "A simple template for a custom React component library",
+  "scripts": {
+    "dev": "npm run storybook:dev",
+    "test": "jest --passWithNoTests",
+    "build": "npm run clear && vite build",
+    "clear": "concurrently \"rimraf ./dist\" \"rimraf ./storybook-static\"",
+    "rollup": "rollup -c",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:test": "test-storybook",
+    "storybook:test:all": "test-storybook --browsers chromium firefox webkit",
+    "storybook:test:update": "npm run storybook:test:all -- -u",
+    "docs:preview": "npm run --prefix ../telescopium project:preview pictor"
+  },
+  "author": "CodeZero",
+  "devDependencies": {
+    "@ariakit/react": "^0.4.17",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@code0-tech/sagittarius-graphql-types": "^0.0.0-65144a9920c6a8de3bcf24acdcb8eec4158cef73",
+    "@dagrejs/dagre": "^1.1.5",
+    "@mdx-js/react": "^3.1.1",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-one-time-password-field": "^0.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@rollup/plugin-commonjs": "^28.0.9",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-links": "^10.0.4",
+    "@storybook/addon-onboarding": "^10.0.4",
+    "@storybook/builder-vite": "^10.0.4",
+    "@storybook/cli": "^10.0.4",
+    "@storybook/react": "^10.0.4",
+    "@storybook/react-vite": "^10.0.4",
+    "@storybook/test-runner": "^0.24.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@tabler/icons-react": "3.35.0",
+    "@types/jest-image-snapshot": "^6.4.0",
+    "@types/react": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@xyflow/react": "^12.9.2",
+    "axe-playwright": "^2.2.2",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "^19.1.0-rc.3",
+    "cmdk": "^1.1.1",
+    "concurrently": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-image-snapshot": "^6.5.1",
+    "js-md5": "^0.8.3",
+    "merge-props": "^6.0.0",
+    "overlap-area": "^1.1.0",
+    "playwright": "1.55.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-resizable-panels": "^3.0.6",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "rimraf": "^6.1.0",
+    "sass": "^1.93.3",
+    "sass-loader": "^16.0.6",
+    "storybook": "^10.0.4",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.4.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code0-tech/pictor"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "@ariakit/react": "^0.4.5",
+    "@code0-tech/sagittarius-graphql-types": "^0.0.0-4b2e73eae302fe499001bf42fdb3a6bcc5be78aa",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-one-time-password-field": "^0.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.5.0",
+    "@xyflow/react": "^12.8.2",
+    "cmdk": "^1.1.1",
+    "js-md5": "^0.8.3",
+    "merge-props": "^6.0.0",
+    "overlap-area": "^1.1.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-resizable-panels": "^3.0.3",
+    "react-zoom-pan-pinch": "^3.6.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@code0-tech/definition-reader": "^0.0.16"
+  }
+}