Feat/showcases (#18)

* chore: removed separated vue projects

* refactor: cleanup examples

* refactor: cleanup pt2

Author: guynikan

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).