@qwickapps/react-framework 1.3.2 → 1.3.3

package/src/stories/ErrorBoundary.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ErrorBoundary, withErrorBoundary } from '../components/ErrorBoundary';
+import React from 'react';
+
+// Test component that throws an error
+const ThrowError = ({ shouldThrow = false }: { shouldThrow?: boolean }) => {
+  if (shouldThrow) {
+    throw new Error('Intentional error for testing ErrorBoundary');
+  }
+  return <div>This component is working fine!</div>;
+};
+
+const meta: Meta<typeof ErrorBoundary> = {
+  title: 'Framework/ErrorBoundary',
+  component: ErrorBoundary,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A React Error Boundary component that catches JavaScript errors and displays a user-friendly fallback UI with recovery options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    fallback: {
+      description: 'Custom fallback UI to display when an error occurs',
+    },
+    onError: {
+      description: 'Callback function called when an error is caught',
+      action: 'onError',
+    },
+    showErrorDetails: {
+      description: 'Whether to show error details (overrides development mode detection)',
+      control: 'boolean',
+    },
+    children: {
+      description: 'Child components to wrap with error boundary',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with working component
+export const Default: Story = {
+  args: {
+    children: <div>This is a working component wrapped in ErrorBoundary</div>,
+  },
+};
+
+// Story that demonstrates error handling
+export const WithError: Story = {
+  args: {
+    children: <ThrowError shouldThrow={true} />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates ErrorBoundary catching an error and displaying the fallback UI.',
+      },
+    },
+  },
+};
+
+// Story with custom fallback UI
+export const CustomFallback: Story = {
+  args: {
+    children: <ThrowError shouldThrow={true} />,
+    fallback: (
+      <div style={{ 
+        padding: '2rem', 
+        textAlign: 'center', 
+        background: '#ffe6e6',
+        border: '2px solid #ff9999',
+        borderRadius: '8px',
+        color: '#cc0000'
+      }}>
+        <h3>🚨 Custom Error UI</h3>
+        <p>Something went wrong, but we have a custom fallback!</p>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows how to provide a custom fallback UI instead of the default error message.',
+      },
+    },
+  },
+};
+
+// Story showing error details in development mode
+export const WithErrorDetails: Story = {
+  args: {
+    children: <ThrowError shouldThrow={true} />,
+    showErrorDetails: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows error details including stack trace (normally only shown in development mode).',
+      },
+    },
+  },
+};
+
+// Story demonstrating the HOC
+const TestComponent = () => <div>Component enhanced with ErrorBoundary HOC</div>;
+const EnhancedComponent = withErrorBoundary(TestComponent);
+
+export const HigherOrderComponent: Story = {
+  render: () => <EnhancedComponent />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates using the withErrorBoundary Higher-Order Component to wrap any component with error handling.',
+      },
+    },
+  },
+};
+
+// Interactive story for testing retry functionality
+export const Interactive: Story = {
+  render: () => {
+    const [shouldThrow, setShouldThrow] = React.useState(false);
+    
+    return (
+      <div style={{ padding: '2rem' }}>
+        <button 
+          onClick={() => setShouldThrow(!shouldThrow)}
+          style={{ 
+            marginBottom: '1rem', 
+            padding: '0.5rem 1rem',
+            background: shouldThrow ? '#ff4444' : '#44aa44',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+        >
+          {shouldThrow ? 'Fix Component' : 'Break Component'}
+        </button>
+        
+        <ErrorBoundary>
+          <ThrowError shouldThrow={shouldThrow} />
+        </ErrorBoundary>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive demo where you can break and fix the component to see ErrorBoundary in action.',
+      },
+    },
+  },
+};

package/dist/schemas/Builders.d.ts

@@ -1,7 +0,0 @@
-/**
- * Schema builders - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { FieldBuilder, SchemaBuilder, ModelBuilder, createSchema, field, model, Fields } from '@qwickapps/schema';
-//# sourceMappingURL=Builders.d.ts.map

package/dist/schemas/Builders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Builders.d.ts","sourceRoot":"","sources":["../../src/schemas/Builders.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,MAAM,EACP,MAAM,mBAAmB,CAAC"}

package/dist/schemas/types.d.ts

@@ -1,7 +0,0 @@
-/**
- * Schema types - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { Schema, Model, FieldDefinition, DataType, FieldType, ValidationRules, EditorConfig } from '@qwickapps/schema';
-//# sourceMappingURL=types.d.ts.map

package/dist/schemas/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/schemas/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,MAAM,EACN,KAAK,EACL,eAAe,EACf,QAAQ,EACR,SAAS,EACT,eAAe,EACf,YAAY,EACb,MAAM,mBAAmB,CAAC"}

package/dist/types/DataBinding.d.ts

@@ -1,7 +0,0 @@
-/**
- * Data binding types - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { DataBindingProps, DataBindingMeta, DataBindingOptions, WithDataBinding, DataBindingResult } from '@qwickapps/schema';
-//# sourceMappingURL=DataBinding.d.ts.map

package/dist/types/DataBinding.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataBinding.d.ts","sourceRoot":"","sources":["../../src/types/DataBinding.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EAClB,MAAM,mBAAmB,CAAC"}

package/dist/types/DataProvider.d.ts

@@ -1,7 +0,0 @@
-/**
- * Data provider interface - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { IDataProvider, DataResponse, ModelInstance, SelectOptions } from '@qwickapps/schema';
-//# sourceMappingURL=DataProvider.d.ts.map

package/dist/types/DataProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataProvider.d.ts","sourceRoot":"","sources":["../../src/types/DataProvider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}