@myop/react 0.0.29 → 0.0.31

package/README.md

@@ -142,8 +142,8 @@ import { MyopComponent } from "@myop/react";
 | `onLoad` | `(component) => void` | Called when the component finishes loading |
 | `onError` | `(error: string) => void` | Called when loading fails |
 | `style` | `CSSProperties` | CSS styles for the container |
-| `loader` | `ReactNode` | Custom loading indicator |
-| `fallback` | `ReactNode` | Custom error fallback UI |
+| `loader` | `ReactNode` | Loading indicator (default: `null` - no loader). Use `loader={<MyopLoader />}` for default Myop loader |
+| `fallback` | `ReactNode` | Error fallback UI (default: `<MyopFallback />`). Override with custom component |
 | `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
 | `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
 | `preview` | `boolean` | Load the unpublished preview version of the component |
@@ -282,7 +282,23 @@ setCloudRepository(customRepo);
 const repo = getCloudRepository();
 ```
 
-## Custom Loading & Error States
+## Loading & Error States
+
+By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.
+
+### Using the Default Myop Loader
+
+```tsx
+import { MyopComponent, MyopLoader } from "@myop/react";
+
+<MyopComponent
+  componentId="my-component"
+  loader={<MyopLoader />}  // Opt-in to default Myop loader
+  fadeDuration={300}
+/>
+```
+
+### Custom Loading State
 
 ```tsx
 <MyopComponent
@@ -293,13 +309,29 @@ const repo = getCloudRepository();
       <p>Loading component...</p>
     </div>
   }
+  fadeDuration={300}
+/>
+```
+
+### Custom Error Fallback
+
+```tsx
+import { MyopComponent, MyopFallback } from "@myop/react";
+
+<MyopComponent
+  componentId="my-component"
   fallback={
     <div className="error-state">
       <p>Failed to load component</p>
       <button onClick={() => window.location.reload()}>Retry</button>
     </div>
   }
-  fadeDuration={300}
+/>
+
+// Or use the default Myop fallback explicitly
+<MyopComponent
+  componentId="my-component"
+  fallback={<MyopFallback />}
 />
 ```
 
@@ -310,6 +342,8 @@ const repo = getCloudRepository();
 | Export | Description |
 |--------|-------------|
 | `MyopComponent` | Main component for embedding Myop components |
+| `MyopLoader` | Default Myop-branded loading indicator (opt-in) |
+| `MyopFallback` | Default Myop-branded error fallback |
 | `preloadComponents` | Preload components for faster rendering |
 | `isPreloaded` | Check if a component is cached |
 | `enableLocalDev` | Enable local development mode |

package/dist/index.d.ts

@@ -39,7 +39,7 @@ declare interface IBasePropTypes<TData = any, TCtaPayloads extends Record<string
     style?: CSSProperties;
     componentId?: string;
     componentConfig?: IComponentInstanceConfig;
-    onLoad?: (myopComponent: IMyopComponent) => void;
+    onLoad?: (myopComponent: ITypedMyopComponent<TData, TCtaPayloads>) => void;
     onError?: (error: string) => void;
     on?: OnCallback<TCtaPayloads>;
     data?: TData;
@@ -86,6 +86,17 @@ export declare interface IComponentInstanceConfig {
 
 export { IMyopComponent }
 
+/**
+ * Typed props interface for accessing component.props with autocomplete.
+ * Contains myop_init_interface and myop_cta_handler with proper types.
+ */
+export declare interface IMyopComponentProps<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> {
+    /** Initialize the component with data */
+    myop_init_interface?: (data: TData) => void;
+    /** Handle CTA events from the component */
+    myop_cta_handler?: <K extends keyof TCtaPayloads>(action: K, payload: TCtaPayloads[K]) => void;
+}
+
 /**
  * Full props type including generated event handlers.
  * Supports both generic `on` callback and individual typed handlers like `onRowClicked`.
@@ -105,6 +116,15 @@ declare interface IPropTypes_2 {
  */
 export declare const isPreloaded: (componentId: string, env?: string, preview?: boolean) => boolean;
 
+/**
+ * Typed Myop component interface with typed props.
+ * Use this type for the component returned in onLoad callback.
+ */
+export declare type ITypedMyopComponent<TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>> = Omit<IMyopComponent, 'props'> & {
+    /** Typed props for the component */
+    props: IMyopComponentProps<TData, TCtaPayloads> | null;
+};
+
 /**
  * Converts kebab-case string to PascalCase
  * e.g., 'column-reordered' -> 'ColumnReordered'
@@ -113,6 +133,20 @@ declare type KebabToPascal<S extends string> = S extends `${infer First}-${infer
 
 export declare const MyopContainer: (props: IPropTypes_2) => JSX.Element;
 
+export declare const MyopFallback: ({ children }: MyopFallbackProps) => JSX.Element;
+
+declare interface MyopFallbackProps {
+    children?: ReactNode;
+}
+
+export declare const MyopLoader: ({ opacity, fadeDuration, children, }: MyopLoaderProps) => JSX.Element;
+
+declare interface MyopLoaderProps {
+    opacity?: number;
+    fadeDuration?: number;
+    children?: ReactNode;
+}
+
 declare const MyopV2ReactComponent: <TData = any, TCtaPayloads extends Record<string, any> = Record<string, any>>(props: IPropTypes<TData, TCtaPayloads>) => JSX.Element;
 export { MyopV2ReactComponent as MyopComponent }
 export { MyopV2ReactComponent as MyopV2Container }