@developer_tribe/react-builder 1.2.8 → 1.2.9

package/src/components/AttributesEditorPanel.tsx

@@ -1,4 +1,4 @@
-import AttributesEditor from '../AttributesEditor';
+import { AttributesEditor } from '../AttributesEditor';
 import type { Node } from '../types/Node';
 import type { ProjectColors } from '../types/Project';
 import { useLogRender } from '../utils/useLogRender';
@@ -56,7 +56,7 @@ export function AttributesEditorPanel({
   };
 
   return (
-    <div style={{ padding: 12 }}>
+    <div className="attributes-editor-panel">
       <AttributesEditor
         node={current}
         onChange={handleAttributesChange}

package/src/index.native.ts

@@ -9,7 +9,7 @@
  * This file is meant to be used via the package `react-native` entry (Metro)
  * or explicit `@developer_tribe/react-builder/native` style imports.
  */
-
+//TODO: index's shoudl be reviewed and updated.
 // Types
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
@@ -45,14 +45,9 @@ export { LocalizationParamsProvider } from './components/LocalizationParamsProvi
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
-export { useExtractTextStyle } from './hooks/useExtractTextStyle';
-export { useExtractViewStyle } from './hooks/useExtractViewStyle';
-export { useExtractImageStyle } from './hooks/useExtractImageStyle';
-
-// Native style extractors (RN-friendly style objects)
-export { extractViewStyleNative } from './utils/extractViewStyle';
-export { extractTextStyleNative } from './utils/extractTextStyle';
-export { extractImageStyleNative } from './utils/extractImageStyle';
+export { useExtractTextStyle } from './attribute-analyser/style/native/useExtractTextStyle';
+export { useExtractViewStyle } from './attribute-analyser/style/native/useExtractViewStyle';
+export { useExtractImageStyle } from './attribute-analyser/style/native/useExtractImageStyle';
 
 // Pure utilities (RN-safe)
 export {
@@ -63,6 +58,7 @@ export {
   analyseNode,
   analyseAndProccess,
 } from './utils/analyseNode';
+export { getMeta } from './utils/getMeta';
 export { novaToJson } from './utils/novaToJson';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
 export { querySelector } from './utils/querySelector';
@@ -93,3 +89,4 @@ export {
   getOnboardSamples,
 } from './assets/samples/getSamples';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+export * from './build-components';

package/src/index.ts

@@ -3,7 +3,11 @@ import './styles/index.scss';
 // Web entrypoint trimmed to what the `example/` app uses.
 export { ProjectPage } from './pages/ProjectPage';
 export { getSamples } from './assets/samples/getSamples';
+export { getMeta } from './utils/getMeta';
 export { defaultAppConfig } from './types/PreviewConfig';
+export { useExtractTextStyle } from './attribute-analyser/style/web/useExtractTextStyle';
+export { useExtractViewStyle } from './attribute-analyser/style/web/useExtractViewStyle';
+export { useExtractImageStyle } from './attribute-analyser/style/web/useExtractImageStyle';
 
 export type { AppConfig } from './types/PreviewConfig';
 export type { Project, ProjectColors } from './types/Project';

package/src/migrations/migratePipe.ts

@@ -1,11 +1,15 @@
+import metaJson from '../assets/meta.json';
 import type { Project } from '../types/Project';
 import type { Migration } from './types';
 import { isSemverLess } from './semver';
-import { migration_1_1_0_normalize_style_attributes } from './migrations/1.1.0_normalize_style_attributes';
+import { migration_1_1_2_extract_component_attributes_from_style } from './migrations/1.1.2_extract_component_attributes_from_style';
 
-export const CURRENT_PROJECT_VERSION = '1.1.0';
+// CURRENT_PROJECT_VERSION is sourced from meta.json (written from package.json during prebuild) to avoid reading package.json directly at runtime.
+export const CURRENT_PROJECT_VERSION = metaJson.supportedProjectVersion;
 
-const MIGRATIONS: Migration[] = [migration_1_1_0_normalize_style_attributes];
+const MIGRATIONS: Migration[] = [
+  migration_1_1_2_extract_component_attributes_from_style,
+];
 
 export type MigrationPipe = {
   projectVersion: string;

package/src/migrations/migrations/1.1.2_extract_component_attributes_from_style.ts

@@ -0,0 +1,211 @@
+import type { Project } from '../../types/Project';
+import type { Node, NodeData, NodeDefaultAttribute } from '../../types/Node';
+import {
+  getAttributeSchema,
+  getStyleAttributeKeySet,
+  normalizeComponentType,
+  NON_STYLE_ATTRIBUTE_KEYS,
+} from '../../utils/patterns';
+import {
+  isEmptyObject,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../../utils/nodeGuards';
+import type { Migration } from '../types';
+
+type SchemaCache = Map<
+  string,
+  { moveableKeys: Set<string>; styleKeys: Set<string> }
+>;
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function buildStyleKeySet(): Set<string> {
+  return getStyleAttributeKeySet();
+}
+
+function normalizeStyleAttributes(node: Node, styleKeys: Set<string>): Node {
+  if (
+    isNodeNullOrUndefined(node) ||
+    isNodeString(node) ||
+    isEmptyObject(node)
+  ) {
+    return node;
+  }
+  if (isNodeArray(node)) {
+    return (node as Node[]).map((n) => normalizeStyleAttributes(n, styleKeys));
+  }
+
+  const record = node as NodeData<NodeDefaultAttribute>;
+  const nextChildren = normalizeStyleAttributes(
+    record.children as Node,
+    styleKeys,
+  );
+
+  if (!isPlainObject(record.attributes)) {
+    return { ...record, children: nextChildren };
+  }
+
+  const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
+  const prevStyle = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
+  const nextStyle: Record<string, unknown> = { ...prevStyle };
+
+  for (const [k, v] of Object.entries(nextAttrs)) {
+    if (k === 'style') continue;
+    if (!styleKeys.has(k)) continue;
+
+    // If already set in style, prefer style (drop legacy flat key).
+    if (!(k in nextStyle)) nextStyle[k] = v;
+    delete nextAttrs[k];
+  }
+
+  if (Object.keys(nextStyle).length > 0) {
+    nextAttrs.style = nextStyle;
+  }
+
+  return {
+    ...record,
+    children: nextChildren,
+    attributes: nextAttrs as NodeDefaultAttribute,
+  };
+}
+
+function getStyleSubSchemaKeys(
+  schema: Record<string, unknown> | undefined,
+): Set<string> {
+  if (!schema) return new Set();
+  const style = (schema as any).style;
+  if (!isPlainObject(style)) return new Set();
+  return new Set(Object.keys(style));
+}
+
+function getTopLevelAttributeKeys(
+  schema: Record<string, unknown> | undefined,
+): Set<string> {
+  if (!schema) return new Set();
+  const keys = Object.keys(schema).filter((k) => k !== 'style');
+  return new Set(keys);
+}
+
+function buildKeyInfo(schema: Record<string, unknown> | undefined): {
+  moveableKeys: Set<string>;
+  styleKeys: Set<string>;
+} {
+  const topLevelKeys = getTopLevelAttributeKeys(schema);
+  const moveableKeys = new Set<string>([
+    ...Array.from(topLevelKeys),
+    ...Array.from(NON_STYLE_ATTRIBUTE_KEYS),
+  ]);
+  const styleKeys = getStyleSubSchemaKeys(schema);
+  return { moveableKeys, styleKeys };
+}
+
+function extractAttributesFromStyle(
+  node: Node,
+  schemaCache: SchemaCache,
+): Node {
+  if (
+    isNodeNullOrUndefined(node) ||
+    isNodeString(node) ||
+    isEmptyObject(node)
+  ) {
+    return node;
+  }
+  if (isNodeArray(node)) {
+    return (node as Node[]).map((n) =>
+      extractAttributesFromStyle(n, schemaCache),
+    );
+  }
+
+  const record = node as NodeData<NodeDefaultAttribute>;
+  const nextChildren = extractAttributesFromStyle(
+    record.children as Node,
+    schemaCache,
+  );
+
+  if (!isPlainObject(record.attributes)) {
+    return { ...record, children: nextChildren };
+  }
+
+  const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
+  const style = nextAttrs.style;
+
+  if (!isPlainObject(style)) {
+    return { ...record, children: nextChildren, attributes: nextAttrs };
+  }
+
+  const rawType = typeof record.type === 'string' ? record.type : '';
+  const normalizedType = normalizeComponentType(rawType) ?? rawType;
+  if (!normalizedType) {
+    return { ...record, children: nextChildren, attributes: nextAttrs };
+  }
+
+  if (!schemaCache.has(normalizedType)) {
+    const schema = getAttributeSchema(normalizedType) as unknown as
+      | Record<string, unknown>
+      | undefined;
+    schemaCache.set(normalizedType, buildKeyInfo(schema));
+  }
+
+  const keyInfo = schemaCache.get(normalizedType);
+  const styleKeys = keyInfo?.styleKeys ?? new Set<string>();
+  const moveableKeys = keyInfo?.moveableKeys ?? NON_STYLE_ATTRIBUTE_KEYS;
+
+  const nextStyle: Record<string, unknown> = { ...style };
+  let moved = false;
+
+  for (const k of moveableKeys) {
+    if (!(k in nextStyle)) continue;
+    if (styleKeys.has(k)) continue;
+    // Prefer the direct attribute if already present.
+    if (!(k in nextAttrs)) {
+      nextAttrs[k] = nextStyle[k];
+    }
+    delete nextStyle[k];
+    moved = true;
+  }
+
+  if (!moved) {
+    return { ...record, children: nextChildren, attributes: nextAttrs };
+  }
+
+  if (Object.keys(nextStyle).length === 0) {
+    delete nextAttrs.style;
+  } else {
+    nextAttrs.style = nextStyle;
+  }
+
+  return {
+    ...record,
+    children: nextChildren,
+    attributes: nextAttrs as NodeDefaultAttribute,
+  };
+}
+
+export const migration_1_1_2_extract_component_attributes_from_style: Migration =
+  {
+    id: '1.1.2-extract-attrs-from-style',
+    title:
+      'Normalize style keys then extract non-style + component props out of attributes.style',
+    fromVersion: '0.0.0',
+    toVersion: '1.1.2',
+    run: (project: Project): Project => {
+      const styleKeys = buildStyleKeySet();
+      const normalized = normalizeStyleAttributes(
+        project.data as unknown as Node,
+        styleKeys,
+      );
+
+      const schemaCache: SchemaCache = new Map();
+      const migrated = extractAttributesFromStyle(normalized, schemaCache);
+
+      return {
+        ...project,
+        version: '1.1.2',
+        data: migrated as any,
+      };
+    },
+  };

package/src/mockOS/components/MockOSRouter.tsx

@@ -28,7 +28,9 @@ function OnboardComponent() {
   return (
     <div className="mockos-screen mockos-screen--onboard">
       <div className="mockos-screen__heading">Onboarding</div>
-      <div className="mockos-screen__text">Welcome! Let's get you started.</div>
+      <div className="mockos-screen__text">
+        Welcome! Let&apos;s get you started.
+      </div>
     </div>
   );
 }

package/src/mockOS/components/PermissionModal.tsx

@@ -50,111 +50,40 @@ const getPermissionText = (permission: PermissionType | string) => {
   );
 };
 
-export const PermissionModal: React.FC<PermissionModalProps> = ({
+export function PermissionModal({
   permission,
   onAllow,
   onDeny,
-}) => {
+}: PermissionModalProps) {
   const device = useRenderStore((s) => s.device);
   const isIOS = device.platform === 'ios';
   const { title, message } = getPermissionText(permission);
 
-  // iOS Style
   if (isIOS) {
     return (
       <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          zIndex: 9999,
-          padding: 20,
-        }}
+        className="mockos-modal-overlay mockos-modal-overlay--center mockos-modal-overlay--ios"
         onClick={(e) => {
           if (e.target === e.currentTarget) {
             onDeny();
           }
         }}
       >
-        <div
-          style={{
-            backgroundColor:
-              'hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.95)',
-            borderRadius: 14,
-            width: '100%',
-            maxWidth: 270,
-            overflow: 'hidden',
-            backdropFilter: 'blur(20px)',
-          }}
-        >
-          <div
-            style={{
-              padding: '20px 16px',
-              textAlign: 'center',
-            }}
-          >
-            <div
-              style={{
-                fontSize: 17,
-                fontWeight: 600,
-                color: '#000',
-                marginBottom: 8,
-                lineHeight: 1.3,
-              }}
-            >
-              {title}
-            </div>
-            <div
-              style={{
-                fontSize: 13,
-                color: '#000',
-                lineHeight: 1.4,
-                opacity: 0.6,
-              }}
-            >
-              {message}
-            </div>
+        <div className="mockos-permission-modal mockos-permission-modal--ios">
+          <div className="mockos-permission-modal__content mockos-permission-modal__content--center">
+            <div className="mockos-permission-modal__title">{title}</div>
+            <div className="mockos-permission-modal__message">{message}</div>
           </div>
-          <div
-            style={{
-              borderTop: '0.5px solid rgba(0, 0, 0, 0.2)',
-              display: 'flex',
-            }}
-          >
+          <div className="mockos-permission-modal__actions mockos-permission-modal__actions--ios">
             <button
+              className="mockos-permission-modal__button mockos-permission-modal__button--ios"
               onClick={onDeny}
-              style={{
-                flex: 1,
-                padding: '11px 0',
-                fontSize: 17,
-                fontWeight: 400,
-                color: '#007AFF',
-                background: 'transparent',
-                border: 'none',
-                borderRight: '0.5px solid rgba(0, 0, 0, 0.2)',
-                cursor: 'pointer',
-              }}
             >
-              Don't Allow
+              Don&apos;t Allow
             </button>
             <button
+              className="mockos-permission-modal__button mockos-permission-modal__button--ios mockos-permission-modal__button--bold"
               onClick={onAllow}
-              style={{
-                flex: 1,
-                padding: '11px 0',
-                fontSize: 17,
-                fontWeight: 600,
-                color: '#007AFF',
-                background: 'transparent',
-                border: 'none',
-                cursor: 'pointer',
-              }}
             >
               Allow
             </button>
@@ -164,103 +93,34 @@ export const PermissionModal: React.FC<PermissionModalProps> = ({
     );
   }
 
-  // Android Material Design Style
   return (
     <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 9999,
-        padding: 24,
-      }}
+      className="mockos-modal-overlay mockos-modal-overlay--center mockos-modal-overlay--android"
       onClick={(e) => {
         if (e.target === e.currentTarget) {
           onDeny();
         }
       }}
     >
-      <div
-        style={{
-          backgroundColor: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
-          borderRadius: 4,
-          width: '100%',
-          maxWidth: 280,
-          boxShadow:
-            '0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14)',
-        }}
-      >
-        <div
-          style={{
-            padding: '24px 24px 20px',
-          }}
-        >
-          <div
-            style={{
-              fontSize: 20,
-              fontWeight: 500,
-              color: 'rgba(0, 0, 0, 0.87)',
-              marginBottom: 16,
-              lineHeight: 1.2,
-            }}
-          >
+      <div className="mockos-permission-modal mockos-permission-modal--android">
+        <div className="mockos-permission-modal__content">
+          <div className="mockos-permission-modal__title mockos-permission-modal__title--android">
             {title}
           </div>
-          <div
-            style={{
-              fontSize: 16,
-              color: 'rgba(0, 0, 0, 0.6)',
-              lineHeight: 1.5,
-            }}
-          >
+          <div className="mockos-permission-modal__message mockos-permission-modal__message--android">
             {message}
           </div>
         </div>
-        <div
-          style={{
-            padding: '8px 8px 8px 0',
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: 8,
-          }}
-        >
+        <div className="mockos-permission-modal__actions mockos-permission-modal__actions--android">
           <button
+            className="mockos-permission-modal__button mockos-permission-modal__button--android mockos-permission-modal__button--deny"
             onClick={onDeny}
-            style={{
-              padding: '8px 16px',
-              fontSize: 14,
-              fontWeight: 500,
-              color: '#5F6368',
-              background: 'transparent',
-              border: 'none',
-              borderRadius: 4,
-              cursor: 'pointer',
-              textTransform: 'uppercase',
-              letterSpacing: 0.5,
-            }}
           >
             Deny
           </button>
           <button
+            className="mockos-permission-modal__button mockos-permission-modal__button--android mockos-permission-modal__button--allow"
             onClick={onAllow}
-            style={{
-              padding: '8px 16px',
-              fontSize: 14,
-              fontWeight: 500,
-              color: '#1A73E8',
-              background: 'transparent',
-              border: 'none',
-              borderRadius: 4,
-              cursor: 'pointer',
-              textTransform: 'uppercase',
-              letterSpacing: 0.5,
-            }}
           >
             Allow
           </button>
@@ -268,4 +128,4 @@ export const PermissionModal: React.FC<PermissionModalProps> = ({
       </div>
     </div>
   );
-};
+}