Feat/showcases

README.md

@@ -12,23 +12,23 @@ Framework-agnostic rendering engine for server-driven UI. Build dynamic forms an
 - ⚡ **Reactive System**: Handle declarative and imperative reactions
 - 🧩 **Type Safe**: Full TypeScript support
 
-## Examples
+## Showcases
 
 ### React (Vanilla)
 ```bash
-pnpm --filter examples-react dev
+pnpm --filter showcases-react dev
 # http://localhost:3000
 ```
 
 ### React with Material UI
 ```bash
-pnpm --filter examples-react-material-ui dev
+pnpm --filter showcases-react-material-ui dev
 # http://localhost:3001
 ```
 
 ### React with Chakra UI
 ```bash
-pnpm --filter examples-react-chakra-ui dev
+pnpm --filter showcases-react-chakra-ui dev
 # http://localhost:3002
 ```
 
@@ -52,7 +52,7 @@ schepta/
 │   ├── core/              # Framework-agnostic core logic
 │   ├── adapters/          # Framework adapters (react, vue, vanilla)
 │   └── factories/         # Framework factories (react, vue, vanilla)
-├── examples/              # Example applications
+├── showcases/              # Example applications
 │   ├── react/             # React vanilla example
 │   ├── react-material-ui/ # React with Material UI
 │   └── react-chakra-ui/   # React with Chakra UI

docs/.vitepress/components.ts

@@ -20,11 +20,11 @@ const ReactWrapper = (Component: any) => {
 };
 
 export default {
-  SimpleFormReact: defineAsyncComponent(() => import('../components/examples/SimpleFormReact.vue')),
-  ComplexFormReact: defineAsyncComponent(() => import('../components/examples/ComplexFormReact.vue')),
-  SimpleFormVue: defineAsyncComponent(() => import('../components/examples/SimpleFormVue.vue')),
-  ComplexFormVue: defineAsyncComponent(() => import('../components/examples/ComplexFormVue.vue')),
-  SimpleFormVuetify: defineAsyncComponent(() => import('../components/examples/SimpleFormVuetify.vue')),
-  ComplexFormVuetify: defineAsyncComponent(() => import('../components/examples/ComplexFormVuetify.vue')),
+  SimpleFormReact: defineAsyncComponent(() => import('../components/showcases/SimpleFormReact.vue')),
+  ComplexFormReact: defineAsyncComponent(() => import('../components/showcases/ComplexFormReact.vue')),
+  SimpleFormVue: defineAsyncComponent(() => import('../components/showcases/SimpleFormVue.vue')),
+  ComplexFormVue: defineAsyncComponent(() => import('../components/showcases/ComplexFormVue.vue')),
+  SimpleFormVuetify: defineAsyncComponent(() => import('../components/showcases/SimpleFormVuetify.vue')),
+  ComplexFormVuetify: defineAsyncComponent(() => import('../components/showcases/ComplexFormVuetify.vue')),
 };
 

docs/.vitepress/config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
           { text: 'Home', link: '/en-US/' },
           { text: 'Guide', link: '/en-US/guide/quick-start' },
           { text: 'Concepts', link: '/en-US/concepts/01-factories' },
-          { text: 'Examples', link: '/en-US/examples/react' },
+          { text: 'Showcases', link: '/en-US/showcases/react' },
         ],
         sidebar: {
           '/en-US/guide/': [
@@ -52,15 +52,15 @@ export default defineConfig({
               ],
             },
           ],
-          '/en-US/examples/': [
+          '/en-US/showcases/': [
             {
-              text: 'Examples',
+              text: 'Showcases',
               items: [
-                { text: 'React', link: '/en-US/examples/react' },
-                { text: 'React Material UI', link: '/en-US/examples/material-ui' },
-                { text: 'React Chakra UI', link: '/en-US/examples/chakra-ui' },
-                { text: 'Vue', link: '/en-US/examples/vue' },
-                { text: 'Vue Vuetify', link: '/en-US/examples/vuetify' },
+                { 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' },
               ],
             },
           ],
@@ -81,7 +81,7 @@ export default defineConfig({
           { text: 'Início', link: '/pt-BR/' },
           { text: 'Guia', link: '/pt-BR/guide/quick-start' },
           { text: 'Conceitos', link: '/pt-BR/concepts/01-factories' },
-          { text: 'Exemplos', link: '/pt-BR/examples/react' },
+          { text: 'Exemplos', link: '/pt-BR/showcases/react' },
         ],
         sidebar: {
           '/pt-BR/guide/': [
@@ -106,15 +106,15 @@ export default defineConfig({
               ],
             },
           ],
-          '/pt-BR/examples/': [
+          '/pt-BR/showcases/': [
             {
               text: 'Exemplos',
               items: [
-                { text: 'React', link: '/pt-BR/examples/react' },
-                { text: 'React Material UI', link: '/pt-BR/examples/material-ui' },
-                { text: 'React Chakra UI', link: '/pt-BR/examples/chakra-ui' },
-                { text: 'Vue', link: '/pt-BR/examples/vue' },
-                { text: 'Vue Vuetify', link: '/pt-BR/examples/vuetify' },
+                { 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' },
               ],
             },
           ],
@@ -135,7 +135,7 @@ export default defineConfig({
           { text: 'Inicio', link: '/es-ES/' },
           { text: 'Guía', link: '/es-ES/guide/quick-start' },
           { text: 'Conceptos', link: '/es-ES/concepts/01-factories' },
-          { text: 'Ejemplos', link: '/es-ES/examples/react' },
+          { text: 'Ejemplos', link: '/es-ES/showcases/react' },
         ],
         sidebar: {
           '/es-ES/guide/': [
@@ -160,15 +160,15 @@ export default defineConfig({
               ],
             },
           ],
-          '/es-ES/examples/': [
+          '/es-ES/showcases/': [
             {
               text: 'Ejemplos',
               items: [
-                { text: 'React', link: '/es-ES/examples/react' },
-                { text: 'React Material UI', link: '/es-ES/examples/material-ui' },
-                { text: 'React Chakra UI', link: '/es-ES/examples/chakra-ui' },
-                { text: 'Vue', link: '/es-ES/examples/vue' },
-                { text: 'Vue Vuetify', link: '/es-ES/examples/vuetify' },
+                { 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' },
               ],
             },
           ],

docs/.vitepress/theme/index.ts

@@ -7,7 +7,6 @@ import { MotionPlugin } from '@vueuse/motion'
 export default {
   ...DefaultTheme,
   enhanceApp({ app, router }) {
-    app.component('CodeSandboxEmbed', defineAsyncComponent(() => import('../../components/examples/CodeSandboxEmbed.vue')));
     app.component('TerminalIcon', defineAsyncComponent(() => import('lucide-vue-next').then(m => m.Terminal)));
     app.component('CopyIcon', defineAsyncComponent(() => import('lucide-vue-next').then(m => m.Copy)));
     app.component('CheckIcon', defineAsyncComponent(() => import('lucide-vue-next').then(m => m.Check)));

docs/components/home/ConceptsSection.vue

@@ -11,10 +11,10 @@
     </div>
 
     <div class="section-card">
-      <h2>{{ examples.title }}</h2>
-      <p>{{ examples.description }}</p>
+      <h2>{{ showcases.title }}</h2>
+      <p>{{ showcases.description }}</p>
       <ul>
-        <li v-for="item in examples.items" :key="item.title">
+        <li v-for="item in showcases.items" :key="item.title">
           <a :href="`/${locale}${item.link}`">{{ item.title }}</a> - {{ item.description }}
         </li>
       </ul>
@@ -30,7 +30,7 @@ const { frontmatter } = useData();
 
 const locale = computed(() => frontmatter.value.locale || 'en-US');
 const concepts = computed(() => frontmatter.value.concepts || {});
-const examples = computed(() => frontmatter.value.examples || {});
+const showcases = computed(() => frontmatter.value.showcases || {});
 </script>
 
 <style scoped>

docs/components/home/HeroSection.vue

@@ -18,9 +18,9 @@
           </a>
           <a
             class="action-button secondary"
-            :href="`/${locale}/examples/react`"
+            :href="`/${locale}/showcases/react`"
           >
-            {{ hero.viewExamples }}
+            {{ hero.viewShowcases }}
           </a>
         </div>
         <div class="hero-install">

docs/en-US/examples/chakra-ui.md

@@ -1,9 +1,9 @@
-# React Chakra UI Examples
+# React Chakra UI Showcases
 
-Interactive examples of schepta forms using React with Chakra UI components.
+Interactive showcases of schepta forms using React with Chakra UI components.
 
 ::: warning Coming Soon
-The CodeSandbox embed for Chakra UI examples will be available soon. For now, you can view the examples locally.
+The CodeSandbox embed for Chakra UI showcases will be available soon. For now, you can view the showcases locally.
 :::
 
-For local development, see the [Chakra UI examples directory](https://github.com/guynikan/schepta/tree/main/examples/react-chakra-ui).
+For local development, see the [Chakra UI showcases directory](https://github.com/guynikan/schepta/tree/main/showcases/react-chakra-ui).

docs/en-US/examples/material-ui.md

@@ -1,6 +1,6 @@
-# React Material UI Examples
+# React Material UI Showcases
 
-Interactive examples of schepta forms using React with Material UI components.
+Interactive showcases of schepta forms using React with Material UI components.
 
 <iframe 
   src="https://codesandbox.io/embed/5tn7vv?view=split&hidenavigation=1&theme=dark"
@@ -10,6 +10,6 @@ Interactive examples of schepta forms using React with Material UI components.
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
 
-The CodeSandbox above includes both simple and complex form examples. You can switch between them using the navigation in the sandbox.
+The CodeSandbox above includes both simple and complex form showcases. You can switch between them using the navigation in the sandbox.
 
-For local development, see the [Material UI examples directory](https://github.com/guynikan/schepta/tree/main/examples/react-material-ui).
+For local development, see the [Material UI showcases directory](https://github.com/guynikan/schepta/tree/main/showcases/react-material-ui).

docs/en-US/examples/react.md

@@ -1,6 +1,6 @@
-# React Examples
+# React Showcases
 
-Interactive examples of schepta forms using React and `react-hook-form`.
+Interactive showcases of schepta forms using React and `react-hook-form`.
 
 <iframe 
   src="https://codesandbox.io/embed/r9jzdl?view=split&hidenavigation=1&theme=dark"
@@ -10,6 +10,6 @@ Interactive examples of schepta forms using React and `react-hook-form`.
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
 
-The CodeSandbox above includes both simple and complex form examples. You can switch between them using the navigation in the sandbox.
+The CodeSandbox above includes both simple and complex form showcases. You can switch between them using the navigation in the sandbox.
 
-For local development, see the [React examples directory](https://github.com/guynikan/schepta/tree/main/examples/react).
+For local development, see the [React showcases directory](https://github.com/guynikan/schepta/tree/main/showcases/react).

docs/en-US/examples/vue.md

@@ -1,9 +1,9 @@
-# Vue Examples
+# Vue Showcases
 
-Interactive examples of schepta forms using Vue 3.
+Interactive showcases of schepta forms using Vue 3.
 
 ::: warning Coming Soon
-Vue examples are being prepared and will be available soon!
+Vue showcases are being prepared and will be available soon!
 :::
 
-For local development, see the [Vue examples directory](https://github.com/guynikan/schepta/tree/main/examples/vue).
+For local development, see the [Vue showcases directory](https://github.com/guynikan/schepta/tree/main/showcases/vue).

docs/en-US/examples/vuetify.md

@@ -1,9 +1,9 @@
-# Vue Vuetify Examples
+# Vue Vuetify Showcases
 
-Interactive examples of schepta forms using Vue 3 with Vuetify Material Design components.
+Interactive showcases of schepta forms using Vue 3 with Vuetify Material Design components.
 
 ::: warning Coming Soon
-Vuetify examples are being prepared and will be available soon!
+Vuetify showcases are being prepared and will be available soon!
 :::
 
-For local development, see the [Vue Vuetify examples directory](https://github.com/guynikan/schepta/tree/main/examples/vue-vuetify).
+For local development, see the [Vue Vuetify showcases directory](https://github.com/guynikan/schepta/tree/main/showcases/vue-vuetify).

docs/en-US/guide/quick-start.md

@@ -311,16 +311,6 @@ Learn the fundamental concepts that power schepta:
 - **[06. Middleware](/en-US/concepts/06-middleware)** - Transforming props and behavior
 - **[07. Debug System](/en-US/concepts/07-debug-system)** - Development tools
 
-### Examples
-
-See schepta in action with interactive examples:
-
-- **[React Examples](/en-US/examples/react)** - React with react-hook-form
-- **[React Material UI Examples](/en-US/examples/material-ui)** - React with Material UI
-- **[React Chakra UI Examples](/en-US/examples/chakra-ui)** - React with Chakra UI
-- **[Vue Examples](/en-US/examples/vue)** - Vue with custom form adapter
-- **[Vue Vuetify Examples](/en-US/examples/vuetify)** - Vue with Vuetify Material Design
-
 ## Resources
 
 - [GitHub Repository](https://github.com/guynikan/schepta)

docs/en-US/index.md

@@ -7,7 +7,7 @@ homeHero:
   subtitle: Framework-agnostic rendering engine for server-driven UI
   description: Transform JSON schemas into fully functional UI components. Works seamlessly with React, Vue, and vanilla JavaScript.
   getStarted: Get Started
-  viewExamples: View Examples
+  viewShowcases: View Showcases
   installCommandId: install-command
   copyButtonLabel: Copy command
   geckoAlt: Guanche Gecko - schepta mascot
@@ -48,9 +48,9 @@ concepts:
       description: Transforming props and behavior
     - title: Debug System
       description: Development tools
-examples:
-  title: Examples
-  description: Examples of how to use schepta
+showcases:
+  title: Showcases
+  description: Showcases of how to use schepta
   items:
     - title: React
       description: React example

docs/es-ES/examples/chakra-ui.md

@@ -6,5 +6,5 @@ Ejemplos interactivos de formularios schepta usando React con componentes Chakra
 El embed de CodeSandbox para ejemplos de Chakra UI estará disponible pronto. Por ahora, puedes ver los ejemplos localmente.
 :::
 
-Para desarrollo local, consulta el [directorio de ejemplos Chakra UI](https://github.com/guynikan/schepta/tree/main/examples/react-chakra-ui).
+Para desarrollo local, consulta el [directorio de ejemplos Chakra UI](https://github.com/guynikan/schepta/tree/main/showcases/react-chakra-ui).
 

docs/es-ES/examples/material-ui.md

@@ -12,5 +12,5 @@ Ejemplos interactivos de formularios schepta usando React con componentes Materi
 
 El CodeSandbox de arriba incluye ejemplos de formularios simples y complejos. Puedes cambiar entre ellos usando la navegación en el sandbox.
 
-Para desarrollo local, consulta el [directorio de ejemplos Material UI](https://github.com/guynikan/schepta/tree/main/examples/react-material-ui).
+Para desarrollo local, consulta el [directorio de ejemplos Material UI](https://github.com/guynikan/schepta/tree/main/showcases/react-material-ui).
 

docs/es-ES/examples/react.md

@@ -12,5 +12,5 @@ Ejemplos interactivos de formularios schepta usando React y `react-hook-form`.
 
 El CodeSandbox de arriba incluye ejemplos de formularios simples y complejos. Puedes cambiar entre ellos usando la navegación en el sandbox.
 
-Para desarrollo local, consulta el [directorio de ejemplos React](https://github.com/guynikan/schepta/tree/main/examples/react).
+Para desarrollo local, consulta el [directorio de ejemplos React](https://github.com/guynikan/schepta/tree/main/showcases/react).
 

docs/es-ES/examples/vue.md

@@ -6,5 +6,5 @@ Ejemplos interactivos de formularios schepta usando Vue 3.
 Los ejemplos de Vue se están preparando y estarán disponibles pronto.
 :::
 
-Para desarrollo local, consulta el [directorio de ejemplos Vue](https://github.com/guynikan/schepta/tree/main/examples/vue).
+Para desarrollo local, consulta el [directorio de ejemplos Vue](https://github.com/guynikan/schepta/tree/main/showcases/vue).
 

docs/es-ES/examples/vuetify.md

@@ -6,5 +6,5 @@ Ejemplos interactivos de formularios schepta usando Vue 3 con componentes Vuetif
 Los ejemplos de Vuetify se están preparando y estarán disponibles pronto.
 :::
 
-Para desarrollo local, consulta el [directorio de ejemplos Vue Vuetify](https://github.com/guynikan/schepta/tree/main/examples/vue-vuetify).
+Para desarrollo local, consulta el [directorio de ejemplos Vue Vuetify](https://github.com/guynikan/schepta/tree/main/showcases/vue-vuetify).
 

docs/es-ES/guide/quick-start.md

@@ -311,16 +311,6 @@ Aprende los conceptos fundamentales que impulsan schepta:
 - **[06. Middleware](/es-ES/concepts/06-middleware)** - Transformando props y comportamiento
 - **[07. Debug System](/es-ES/concepts/07-debug-system)** - Herramientas de desarrollo
 
-### Ejemplos
-
-Ve schepta en acción con ejemplos interactivos:
-
-- **[Ejemplos React](/es-ES/examples/react)** - React con react-hook-form
-- **[Ejemplos React Material UI](/es-ES/examples/material-ui)** - React con Material UI
-- **[Ejemplos React Chakra UI](/es-ES/examples/chakra-ui)** - React con Chakra UI
-- **[Ejemplos Vue](/es-ES/examples/vue)** - Vue con adaptador de formulario personalizado
-- **[Ejemplos Vue Vuetify](/es-ES/examples/vuetify)** - Vue con Vuetify Material Design
-
 ## Recursos
 
 - [Repositorio GitHub](https://github.com/guynikan/schepta)