Feature/integrate showcases

README.md

@@ -359,19 +359,20 @@ schepta/
 │       ├── react/              # React form factory
 │       ├── vue/                # Vue form factory
 │       └── vanilla/            # Vanilla JS form factory
-├── showcases/                   # Example applications
-│   ├── src/
-│   │   ├── frameworks/         # React & Vue showcases
-│   │   │   ├── react/         # React examples (basic, MUI, Chakra, RHF, Formik)
-│   │   │   └── vue/           # Vue examples (basic, Vuetify)
-│   │   └── vanilla/           # Vanilla JS examples
-│   └── public/                # Static assets
 ├── tests/                      # E2E tests with Playwright
 │   ├── e2e/                   # Test specs
 │   └── playwright.config.ts   # Playwright configuration
 ├── instances/                  # Shared schema instances
 │   └── form/                  # Form schemas
 ├── docs/                       # Documentation site (VitePress)
+│   ├── .vitepress/
+│   │   └── showcases/         # Interactive showcases (React, Vue, Vanilla)
+│   │       ├── react/         # React examples (basic, MUI, Chakra, RHF, Formik)
+│   │       ├── vue/           # Vue examples (basic, Vuetify)
+│   │       └── vanilla/       # Vanilla JS examples
+│   ├── en-US/showcases/       # Showcase pages (English)
+│   ├── pt-BR/showcases/       # Showcase pages (Portuguese)
+│   └── es-ES/showcases/       # Showcase pages (Spanish)
 └── scripts/                    # Build and publish scripts
 ```
 

docs/.vitepress/config.ts

@@ -56,11 +56,24 @@ export default defineConfig({
             {
               text: 'Showcases',
               items: [
-                { text: 'React', link: '/en-US/showcases/react' },
-                { text: 'React Material UI', link: '/en-US/showcases/material-ui' },
-                { text: 'React Chakra UI', link: '/en-US/showcases/chakra-ui' },
-                { text: 'Vue', link: '/en-US/showcases/vue' },
-                { text: 'Vue Vuetify', link: '/en-US/showcases/vuetify' },
+                {
+                  text: 'React',
+                  collapsed: false,
+                  items: [
+                    { text: 'Basic', link: '/en-US/showcases/react' },
+                    { text: 'Material UI', link: '/en-US/showcases/material-ui' },
+                    { text: 'Chakra UI', link: '/en-US/showcases/chakra-ui' },
+                  ],
+                },
+                {
+                  text: 'Vue',
+                  collapsed: false,
+                  items: [
+                    { text: 'Basic', link: '/en-US/showcases/vue' },
+                    { text: 'Vuetify', link: '/en-US/showcases/vuetify' },
+                  ],
+                },
+                { text: 'Vanilla JS', link: '/en-US/showcases/vanilla' },
               ],
             },
           ],
@@ -110,11 +123,24 @@ export default defineConfig({
             {
               text: 'Exemplos',
               items: [
-                { text: 'React', link: '/pt-BR/showcases/react' },
-                { text: 'React Material UI', link: '/pt-BR/showcases/material-ui' },
-                { text: 'React Chakra UI', link: '/pt-BR/showcases/chakra-ui' },
-                { text: 'Vue', link: '/pt-BR/showcases/vue' },
-                { text: 'Vue Vuetify', link: '/pt-BR/showcases/vuetify' },
+                {
+                  text: 'React',
+                  collapsed: false,
+                  items: [
+                    { text: 'Básico', link: '/pt-BR/showcases/react' },
+                    { text: 'Material UI', link: '/pt-BR/showcases/material-ui' },
+                    { text: 'Chakra UI', link: '/pt-BR/showcases/chakra-ui' },
+                  ],
+                },
+                {
+                  text: 'Vue',
+                  collapsed: false,
+                  items: [
+                    { text: 'Básico', link: '/pt-BR/showcases/vue' },
+                    { text: 'Vuetify', link: '/pt-BR/showcases/vuetify' },
+                  ],
+                },
+                { text: 'Vanilla JS', link: '/pt-BR/showcases/vanilla' },
               ],
             },
           ],
@@ -164,11 +190,24 @@ export default defineConfig({
             {
               text: 'Ejemplos',
               items: [
-                { text: 'React', link: '/es-ES/showcases/react' },
-                { text: 'React Material UI', link: '/es-ES/showcases/material-ui' },
-                { text: 'React Chakra UI', link: '/es-ES/showcases/chakra-ui' },
-                { text: 'Vue', link: '/es-ES/showcases/vue' },
-                { text: 'Vue Vuetify', link: '/es-ES/showcases/vuetify' },
+                {
+                  text: 'React',
+                  collapsed: false,
+                  items: [
+                    { text: 'Básico', link: '/es-ES/showcases/react' },
+                    { text: 'Material UI', link: '/es-ES/showcases/material-ui' },
+                    { text: 'Chakra UI', link: '/es-ES/showcases/chakra-ui' },
+                  ],
+                },
+                {
+                  text: 'Vue',
+                  collapsed: false,
+                  items: [
+                    { text: 'Básico', link: '/es-ES/showcases/vue' },
+                    { text: 'Vuetify', link: '/es-ES/showcases/vuetify' },
+                  ],
+                },
+                { text: 'Vanilla JS', link: '/es-ES/showcases/vanilla' },
               ],
             },
           ],
@@ -196,16 +235,17 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@schepta/core': resolve(__dirname, '../packages/core/src'),
-        '@schepta/factory-react': resolve(__dirname, '../packages/factories/react/src'),
-        '@schepta/factory-vue': resolve(__dirname, '../packages/factories/vue/src'),
-        '@schepta/adapter-react': resolve(__dirname, '../packages/adapters/react/src'),
-        '@schepta/adapter-vue': resolve(__dirname, '../packages/adapters/vue/src'),
+        '@schepta/core': resolve(__dirname, '../../packages/core/src'),
+        '@schepta/factory-react': resolve(__dirname, '../../packages/factories/react/src'),
+        '@schepta/factory-vue': resolve(__dirname, '../../packages/factories/vue/src'),
+        '@schepta/factory-vanilla': resolve(__dirname, '../../packages/factories/vanilla/src'),
+        '@schepta/adapter-react': resolve(__dirname, '../../packages/adapters/react/src'),
+        '@schepta/adapter-vue': resolve(__dirname, '../../packages/adapters/vue/src'),
+        '@schepta/adapter-vanilla': resolve(__dirname, '../../packages/adapters/vanilla/src'),
       },
     },
     optimizeDeps: {
       include: ['react', 'react-dom', 'vue', 'vuetify'],
-      exclude: ['vitepress'],
     },
     server: {
       hmr: {

docs/.vitepress/showcases/react/ReactShowcase.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { ScheptaProvider } from "@schepta/adapter-react";
+import { BasicFormPage } from "./basic/pages/BasicFormPage";
+import { MaterialFormPage } from "./material-ui/pages/MaterialFormPage";
+import { ChakraFormPage } from "./chakra-ui/pages/ChakraFormPage";
+import simpleFormSchema from "../../../../instances/form/simple-form.json";
+import { FormSchema } from "@schepta/core";
+import { getToken } from "../../utils/getToken";
+import { components } from "./basic/components/ComponentRegistry";
+
+interface ReactShowcaseProps {
+  variant?: "basic" | "material-ui" | "chakra-ui";
+  isDark?: boolean;
+}
+
+export function ReactShowcase({
+  variant = "basic",
+  isDark = false,
+}: ReactShowcaseProps) {
+  const labelMiddleware = (props: any) => {
+    if (props.label) {
+      return { ...props, label: `[Provider] ${props.label}` };
+    }
+    return props;
+  };
+
+  const content = (() => {
+    switch (variant) {
+      case "chakra-ui":
+        return <ChakraFormPage isDark={isDark} />;
+      case "material-ui":
+        return <MaterialFormPage isDark={isDark} />;
+      default:
+        return <BasicFormPage isDark={isDark} />;
+    }
+  })();
+
+  return (
+    <ScheptaProvider
+      components={components}
+      middlewares={[labelMiddleware]}
+      externalContext={{
+        user: { id: 1, name: "Provider User" },
+        api: "https://api.example.com",
+      }}
+    >
+      {content}
+    </ScheptaProvider>
+  );
+}

docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue

@@ -0,0 +1,68 @@
+<template>
+  <div ref="containerRef"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { useData } from 'vitepress';
+
+interface Props {
+  variant?: 'basic' | 'material-ui' | 'chakra-ui';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'basic',
+});
+
+const { isDark } = useData();
+const containerRef = ref<HTMLElement | null>(null);
+let root: any = null;
+let _createElement: typeof import('react').createElement;
+let _ReactShowcase: any;
+
+function renderReact() {
+  if (!root || !_createElement || !_ReactShowcase) return;
+  root.render(_createElement(_ReactShowcase, { variant: props.variant, isDark: isDark.value }));
+}
+
+onMounted(async () => {
+  if (containerRef.value) {
+    try {
+      const [{ createRoot }, react, showcase] = await Promise.all([
+        import('react-dom/client'),
+        import('react'),
+        import('./ReactShowcase')
+      ]);
+      _createElement = react.createElement;
+      _ReactShowcase = showcase.ReactShowcase;
+
+      root = createRoot(containerRef.value);
+      renderReact();
+
+      watch(isDark, renderReact);
+    } catch (error) {
+      console.error('Failed to load React showcase:', error);
+      if (containerRef.value) {
+        containerRef.value.innerHTML = '<div style="padding: 20px; color: red;">Error loading React showcase</div>';
+      }
+    }
+  }
+});
+
+onUnmounted(() => {
+  if (root) {
+    try {
+      root.unmount();
+    } catch (error) {
+      console.error('Failed to unmount React:', error);
+    }
+    root = null;
+  }
+});
+</script>
+
+<style scoped>
+.react-showcase-wrapper {
+  width: 100%;
+}
+</style>

showcases/src/frameworks/react/basic-ui/components/Forms/FormWithFormik.tsx → docs/.vitepress/showcases/react/basic/components/Forms/FormWithFormik.tsx

@@ -56,15 +56,15 @@ export const FormWithFormik: React.FC<FormWithFormikProps> = ({ schema }) => {
     <>
       <div
         style={{
-          border: '1px solid #ddd',
+          border: '1px solid var(--schepta-border)',
           padding: '24px',
           borderRadius: '8px',
         }}
       >
         <div style={{ 
           marginBottom: '16px', 
           padding: '8px 12px', 
-          backgroundColor: '#d4edda', 
+          backgroundColor: 'var(--schepta-bg-soft)', 
           borderRadius: '4px',
           fontSize: '14px',
         }}>
@@ -83,13 +83,13 @@ export const FormWithFormik: React.FC<FormWithFormikProps> = ({ schema }) => {
         <div style={{
           marginTop: '24px',
           padding: '16px',
-          background: '#f9fafb',
-          border: '1px solid #e5e7eb',
+          background: 'var(--schepta-bg-soft)',
+          border: '1px solid var(--schepta-border)',
           borderRadius: '8px',
         }}>
           <h3 style={{ marginTop: 0 }}>Submitted Values (Formik):</h3>
           <pre style={{
-            background: 'white',
+            background: 'var(--schepta-bg)',
             padding: '12px',
             borderRadius: '4px',
             overflow: 'auto',

showcases/src/frameworks/react/basic-ui/components/Forms/FormWithRHF.tsx → docs/.vitepress/showcases/react/basic/components/Forms/FormWithRHF.tsx

@@ -52,15 +52,15 @@ export const FormWithRHF: React.FC<FormWithRHFProps> = ({ schema }) => {
     <>
       <div
         style={{
-          border: '1px solid #ddd',
+          border: '1px solid var(--schepta-border)',
           padding: '24px',
           borderRadius: '8px',
         }}
       >
         <div style={{ 
           marginBottom: '16px', 
           padding: '8px 12px', 
-          backgroundColor: '#e7f3ff', 
+          backgroundColor: 'var(--schepta-bg-soft)', 
           borderRadius: '4px',
           fontSize: '14px',
         }}>
@@ -79,13 +79,13 @@ export const FormWithRHF: React.FC<FormWithRHFProps> = ({ schema }) => {
         <div style={{
           marginTop: '24px',
           padding: '16px',
-          background: '#f9fafb',
-          border: '1px solid #e5e7eb',
+          background: 'var(--schepta-bg-soft)',
+          border: '1px solid var(--schepta-border)',
           borderRadius: '8px',
         }}>
           <h3 style={{ marginTop: 0 }}>Submitted Values (RHF):</h3>
           <pre style={{
-            background: 'white',
+            background: 'var(--schepta-bg)',
             padding: '12px',
             borderRadius: '4px',
             overflow: 'auto',