From 9c0ee9831bfaed00ecd2a6edf750fdf7b24f0cbc Mon Sep 17 00:00:00 2001 From: guynikan Date: Thu, 12 Feb 2026 11:47:28 -0300 Subject: [PATCH 1/4] Update dependencies and enhance documentation for showcases - Updated pnpm-lock.yaml to include new dependencies for Chakra UI, Emotion, MUI, Formik, and React Hook Form, ensuring compatibility with the latest versions. - Removed the showcases directory from pnpm workspace configuration to streamline the project structure. - Revised README to reflect the new organization of showcases, including interactive examples for React, Vue, and Vanilla JS. - Added new components and forms to the React showcases, demonstrating integration with Formik and React Hook Form. - Enhanced the VitePress configuration to support the updated showcases structure and improve navigation. --- README.md | 15 +-- docs/.vitepress/components.ts | 30 ----- docs/.vitepress/config.ts | 82 +++++++++---- .../showcases/react/ReactShowcase.tsx | 29 +++++ .../showcases/react/ReactShowcaseWrapper.vue | 55 +++++++++ .../basic}/components/ComponentRegistry.tsx | 0 .../components/Forms/FormWithFormik.tsx | 0 .../basic}/components/Forms/FormWithRHF.tsx | 0 .../basic}/components/Forms/ModalForm.tsx | 0 .../components/Forms/NativeComplexForm.tsx | 0 .../basic}/components/Forms/NativeForm.tsx | 0 .../basic}/components/Inputs/InputText.tsx | 0 .../components/formik/FormikFieldRenderer.tsx | 0 .../components/formik/FormikFormContainer.tsx | 0 .../components/rhf/RHFFieldRenderer.tsx | 0 .../components/rhf/RHFFormContainer.tsx | 0 .../react/basic}/pages/BasicFormPage.tsx | 9 +- .../components/ComponentRegistry.tsx | 0 .../components/Containers/FormContainer.tsx | 0 .../components/Containers/FormField.tsx | 0 .../Containers/FormSectionContainer.tsx | 0 .../Containers/FormSectionGroup.tsx | 0 .../Containers/FormSectionGroupContainer.tsx | 0 .../Containers/FormSectionTitle.tsx | 0 .../react/chakra-ui/components/Form.tsx | 0 .../components/Inputs/InputCheckbox.tsx | 0 .../chakra-ui/components/Inputs/InputDate.tsx | 0 .../components/Inputs/InputNumber.tsx | 0 .../components/Inputs/InputPhone.tsx | 0 .../components/Inputs/InputSelect.tsx | 0 .../chakra-ui/components/Inputs/InputText.tsx | 0 .../components/Inputs/InputTextarea.tsx | 0 .../chakra-ui/components/SubmitButton.tsx | 0 .../react/chakra-ui/pages/ChakraFormPage.tsx | 0 .../components/ComponentRegistry.tsx | 0 .../components/Containers/FormContainer.tsx | 0 .../components/Containers/FormField.tsx | 0 .../Containers/FormSectionContainer.tsx | 0 .../Containers/FormSectionGroup.tsx | 0 .../Containers/FormSectionGroupContainer.tsx | 0 .../Containers/FormSectionTitle.tsx | 0 .../react/material-ui/components/Form.tsx | 0 .../components/Inputs/InputCheckbox.tsx | 0 .../components/Inputs/InputDate.tsx | 0 .../components/Inputs/InputNumber.tsx | 0 .../components/Inputs/InputPhone.tsx | 0 .../components/Inputs/InputSelect.tsx | 0 .../components/Inputs/InputText.tsx | 0 .../components/Inputs/InputTextarea.tsx | 0 .../material-ui/components/SubmitButton.tsx | 0 .../material-ui/pages/MaterialFormPage.tsx | 0 .../showcases/vanilla/VanillaShowcase.ts | 25 ++++ .../vanilla/VanillaShowcaseWrapper.vue | 27 +++++ .../.vitepress/showcases}/vanilla/app.ts | 4 +- .../vanilla/components/NativeComplexForm.ts | 0 .../vanilla/components/NativeForm.ts | 0 .../vanilla/components/SocialNameInput.ts | 0 .../vanilla/components/SubmitButton.ts | 0 .../.vitepress/showcases}/vanilla/index.ts | 0 .../showcases}/vanilla/singleSpaVanilla.ts | 0 .../.vitepress/showcases}/vanilla/styles.ts | 0 .../.vitepress/showcases}/vanilla/tabs.ts | 0 docs/.vitepress/showcases/vue/VueShowcase.vue | 15 +++ .../showcases/vue/VuetifyShowcaseWrapper.vue | 32 ++++++ .../basic}/components/NativeComplexForm.vue | 0 .../vue/basic}/components/NativeForm.vue | 0 .../vue/basic}/components/SocialNameInput.vue | 0 .../vue/basic}/components/VueFormPage.vue | 10 +- .../.vitepress/showcases/vue}/vuetify.ts | 0 .../vuetify/components/ComponentRegistry.ts | 0 .../components/Containers/FormContainer.ts | 0 .../components/Containers/FormField.ts | 0 .../Containers/FormSectionContainer.ts | 0 .../components/Containers/FormSectionGroup.ts | 0 .../Containers/FormSectionGroupContainer.ts | 0 .../components/Containers/FormSectionTitle.ts | 0 .../vue/vuetify/components/Form.vue | 0 .../components/Inputs/InputCheckbox.ts | 0 .../vuetify/components/Inputs/InputDate.ts | 0 .../vuetify/components/Inputs/InputNumber.ts | 0 .../vuetify/components/Inputs/InputSelect.ts | 0 .../vuetify/components/Inputs/InputText.ts | 0 .../components/Inputs/InputTextarea.ts | 0 .../vue/vuetify/components/SubmitButton.ts | 0 .../vue/vuetify/pages/VuetifyFormPage.vue | 0 docs/.vitepress/theme/index.ts | 27 +++++ docs/en-US/showcases/chakra-ui.md | 20 ++++ docs/en-US/showcases/material-ui.md | 20 ++++ docs/en-US/showcases/react.md | 24 ++++ docs/en-US/showcases/vanilla.md | 21 ++++ docs/en-US/showcases/vue.md | 23 ++++ docs/en-US/showcases/vuetify.md | 19 +++ docs/es-ES/showcases/chakra-ui.md | 20 ++++ docs/es-ES/showcases/material-ui.md | 20 ++++ docs/es-ES/showcases/react.md | 25 ++++ docs/es-ES/showcases/vanilla.md | 21 ++++ docs/es-ES/showcases/vue.md | 23 ++++ docs/es-ES/showcases/vuetify.md | 19 +++ docs/package.json | 13 ++- docs/pt-BR/showcases/chakra-ui.md | 20 ++++ docs/pt-BR/showcases/material-ui.md | 20 ++++ docs/pt-BR/showcases/react.md | 25 ++++ docs/pt-BR/showcases/vanilla.md | 21 ++++ docs/pt-BR/showcases/vue.md | 23 ++++ docs/pt-BR/showcases/vuetify.md | 19 +++ pnpm-lock.yaml | 48 ++++++-- pnpm-workspace.yaml | 1 - showcases/index.html | 27 ----- showcases/package.json | 46 -------- showcases/src/frameworks/react/App.tsx | 9 -- showcases/src/frameworks/react/RootLayout.tsx | 34 ------ .../frameworks/react/components/Header.tsx | 108 ------------------ .../react/components/ReactHeader.tsx | 75 ------------ showcases/src/frameworks/react/index.css | 18 --- showcases/src/frameworks/react/index.tsx | 34 ------ .../src/frameworks/react/pages/HomePage.tsx | 96 ---------------- .../frameworks/react/pages/ReactFormPage.tsx | 60 ---------- showcases/src/frameworks/react/router.tsx | 65 ----------- showcases/src/frameworks/vue/index.ts | 16 --- showcases/src/main.ts | 55 --------- showcases/tsconfig.json | 11 -- showcases/vercel.json | 3 - showcases/vite.config.ts | 47 -------- tests/e2e/react.spec.ts | 6 +- tests/playwright.config.ts | 11 +- 125 files changed, 738 insertions(+), 788 deletions(-) delete mode 100644 docs/.vitepress/components.ts create mode 100644 docs/.vitepress/showcases/react/ReactShowcase.tsx create mode 100644 docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/ComponentRegistry.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/Forms/FormWithFormik.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/Forms/FormWithRHF.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/Forms/ModalForm.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/Forms/NativeComplexForm.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/Forms/NativeForm.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/Inputs/InputText.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/formik/FormikFieldRenderer.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/formik/FormikFormContainer.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/rhf/RHFFieldRenderer.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/components/rhf/RHFFormContainer.tsx (100%) rename {showcases/src/frameworks/react/basic-ui => docs/.vitepress/showcases/react/basic}/pages/BasicFormPage.tsx (90%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/ComponentRegistry.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Containers/FormContainer.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Containers/FormField.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Containers/FormSectionContainer.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Containers/FormSectionGroup.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Containers/FormSectionGroupContainer.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Containers/FormSectionTitle.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Form.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputCheckbox.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputDate.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputNumber.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputPhone.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputSelect.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputText.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/Inputs/InputTextarea.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/components/SubmitButton.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/chakra-ui/pages/ChakraFormPage.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/ComponentRegistry.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Containers/FormContainer.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Containers/FormField.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Containers/FormSectionContainer.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Containers/FormSectionGroup.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Containers/FormSectionGroupContainer.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Containers/FormSectionTitle.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Form.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputCheckbox.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputDate.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputNumber.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputPhone.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputSelect.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputText.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/Inputs/InputTextarea.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/components/SubmitButton.tsx (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/react/material-ui/pages/MaterialFormPage.tsx (100%) create mode 100644 docs/.vitepress/showcases/vanilla/VanillaShowcase.ts create mode 100644 docs/.vitepress/showcases/vanilla/VanillaShowcaseWrapper.vue rename {showcases/src => docs/.vitepress/showcases}/vanilla/app.ts (97%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/components/NativeComplexForm.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/components/NativeForm.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/components/SocialNameInput.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/components/SubmitButton.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/index.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/singleSpaVanilla.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/styles.ts (100%) rename {showcases/src => docs/.vitepress/showcases}/vanilla/tabs.ts (100%) create mode 100644 docs/.vitepress/showcases/vue/VueShowcase.vue create mode 100644 docs/.vitepress/showcases/vue/VuetifyShowcaseWrapper.vue rename {showcases/src/frameworks/vue => docs/.vitepress/showcases/vue/basic}/components/NativeComplexForm.vue (100%) rename {showcases/src/frameworks/vue => docs/.vitepress/showcases/vue/basic}/components/NativeForm.vue (100%) rename {showcases/src/frameworks/vue => docs/.vitepress/showcases/vue/basic}/components/SocialNameInput.vue (100%) rename {showcases/src/frameworks/vue => docs/.vitepress/showcases/vue/basic}/components/VueFormPage.vue (87%) rename {showcases/src/frameworks/vue/plugins => docs/.vitepress/showcases/vue}/vuetify.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/ComponentRegistry.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Containers/FormContainer.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Containers/FormField.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Containers/FormSectionContainer.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Containers/FormSectionGroup.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Containers/FormSectionGroupContainer.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Containers/FormSectionTitle.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Form.vue (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Inputs/InputCheckbox.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Inputs/InputDate.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Inputs/InputNumber.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Inputs/InputSelect.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Inputs/InputText.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/Inputs/InputTextarea.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/components/SubmitButton.ts (100%) rename {showcases/src/frameworks => docs/.vitepress/showcases}/vue/vuetify/pages/VuetifyFormPage.vue (100%) create mode 100644 docs/en-US/showcases/chakra-ui.md create mode 100644 docs/en-US/showcases/material-ui.md create mode 100644 docs/en-US/showcases/react.md create mode 100644 docs/en-US/showcases/vanilla.md create mode 100644 docs/en-US/showcases/vue.md create mode 100644 docs/en-US/showcases/vuetify.md create mode 100644 docs/es-ES/showcases/chakra-ui.md create mode 100644 docs/es-ES/showcases/material-ui.md create mode 100644 docs/es-ES/showcases/react.md create mode 100644 docs/es-ES/showcases/vanilla.md create mode 100644 docs/es-ES/showcases/vue.md create mode 100644 docs/es-ES/showcases/vuetify.md create mode 100644 docs/pt-BR/showcases/chakra-ui.md create mode 100644 docs/pt-BR/showcases/material-ui.md create mode 100644 docs/pt-BR/showcases/react.md create mode 100644 docs/pt-BR/showcases/vanilla.md create mode 100644 docs/pt-BR/showcases/vue.md create mode 100644 docs/pt-BR/showcases/vuetify.md delete mode 100644 showcases/index.html delete mode 100644 showcases/package.json delete mode 100644 showcases/src/frameworks/react/App.tsx delete mode 100644 showcases/src/frameworks/react/RootLayout.tsx delete mode 100644 showcases/src/frameworks/react/components/Header.tsx delete mode 100644 showcases/src/frameworks/react/components/ReactHeader.tsx delete mode 100644 showcases/src/frameworks/react/index.css delete mode 100644 showcases/src/frameworks/react/index.tsx delete mode 100644 showcases/src/frameworks/react/pages/HomePage.tsx delete mode 100644 showcases/src/frameworks/react/pages/ReactFormPage.tsx delete mode 100644 showcases/src/frameworks/react/router.tsx delete mode 100644 showcases/src/frameworks/vue/index.ts delete mode 100644 showcases/src/main.ts delete mode 100644 showcases/tsconfig.json delete mode 100644 showcases/vercel.json delete mode 100644 showcases/vite.config.ts diff --git a/README.md b/README.md index 721e195..0e39b6a 100644 --- a/README.md +++ b/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 ``` diff --git a/docs/.vitepress/components.ts b/docs/.vitepress/components.ts deleted file mode 100644 index 5a31702..0000000 --- a/docs/.vitepress/components.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { defineAsyncComponent, h } from 'vue'; -import { createRoot } from 'react-dom/client'; -import React from 'react'; - -// React components need to be rendered differently -const ReactWrapper = (Component: any) => { - return defineAsyncComponent({ - loader: () => Promise.resolve(Component), - loadingComponent: { - setup() { - return () => h('div', { style: { padding: '20px' } }, 'Loading...'); - }, - }, - errorComponent: { - setup() { - return () => h('div', { style: { padding: '20px', color: 'red' } }, 'Error loading component'); - }, - }, - }); -}; - -export default { - 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')), -}; - diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 9ce3ac9..014d4c9 100644 --- a/docs/.vitepress/config.ts +++ b/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: { diff --git a/docs/.vitepress/showcases/react/ReactShowcase.tsx b/docs/.vitepress/showcases/react/ReactShowcase.tsx new file mode 100644 index 0000000..84fe82b --- /dev/null +++ b/docs/.vitepress/showcases/react/ReactShowcase.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +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'; + +interface ReactShowcaseProps { + variant?: 'basic' | 'material-ui' | 'chakra-ui'; +} + +export function ReactShowcase({ variant = 'basic' }: ReactShowcaseProps) { + const components = { + basic: BasicFormPage, + 'material-ui': MaterialFormPage, + 'chakra-ui': ChakraFormPage, + }; + + const Component = components[variant]; + + return ( + +
+ +
+ + ); +} diff --git a/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue b/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue new file mode 100644 index 0000000..6773589 --- /dev/null +++ b/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/showcases/src/frameworks/react/basic-ui/components/ComponentRegistry.tsx b/docs/.vitepress/showcases/react/basic/components/ComponentRegistry.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/ComponentRegistry.tsx rename to docs/.vitepress/showcases/react/basic/components/ComponentRegistry.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/Forms/FormWithFormik.tsx b/docs/.vitepress/showcases/react/basic/components/Forms/FormWithFormik.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/Forms/FormWithFormik.tsx rename to docs/.vitepress/showcases/react/basic/components/Forms/FormWithFormik.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/Forms/FormWithRHF.tsx b/docs/.vitepress/showcases/react/basic/components/Forms/FormWithRHF.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/Forms/FormWithRHF.tsx rename to docs/.vitepress/showcases/react/basic/components/Forms/FormWithRHF.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/Forms/ModalForm.tsx b/docs/.vitepress/showcases/react/basic/components/Forms/ModalForm.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/Forms/ModalForm.tsx rename to docs/.vitepress/showcases/react/basic/components/Forms/ModalForm.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/Forms/NativeComplexForm.tsx b/docs/.vitepress/showcases/react/basic/components/Forms/NativeComplexForm.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/Forms/NativeComplexForm.tsx rename to docs/.vitepress/showcases/react/basic/components/Forms/NativeComplexForm.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/Forms/NativeForm.tsx b/docs/.vitepress/showcases/react/basic/components/Forms/NativeForm.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/Forms/NativeForm.tsx rename to docs/.vitepress/showcases/react/basic/components/Forms/NativeForm.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/Inputs/InputText.tsx b/docs/.vitepress/showcases/react/basic/components/Inputs/InputText.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/Inputs/InputText.tsx rename to docs/.vitepress/showcases/react/basic/components/Inputs/InputText.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/formik/FormikFieldRenderer.tsx b/docs/.vitepress/showcases/react/basic/components/formik/FormikFieldRenderer.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/formik/FormikFieldRenderer.tsx rename to docs/.vitepress/showcases/react/basic/components/formik/FormikFieldRenderer.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/formik/FormikFormContainer.tsx b/docs/.vitepress/showcases/react/basic/components/formik/FormikFormContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/formik/FormikFormContainer.tsx rename to docs/.vitepress/showcases/react/basic/components/formik/FormikFormContainer.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/rhf/RHFFieldRenderer.tsx b/docs/.vitepress/showcases/react/basic/components/rhf/RHFFieldRenderer.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/rhf/RHFFieldRenderer.tsx rename to docs/.vitepress/showcases/react/basic/components/rhf/RHFFieldRenderer.tsx diff --git a/showcases/src/frameworks/react/basic-ui/components/rhf/RHFFormContainer.tsx b/docs/.vitepress/showcases/react/basic/components/rhf/RHFFormContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/basic-ui/components/rhf/RHFFormContainer.tsx rename to docs/.vitepress/showcases/react/basic/components/rhf/RHFFormContainer.tsx diff --git a/showcases/src/frameworks/react/basic-ui/pages/BasicFormPage.tsx b/docs/.vitepress/showcases/react/basic/pages/BasicFormPage.tsx similarity index 90% rename from showcases/src/frameworks/react/basic-ui/pages/BasicFormPage.tsx rename to docs/.vitepress/showcases/react/basic/pages/BasicFormPage.tsx index ccc1ca4..c8e0f38 100644 --- a/showcases/src/frameworks/react/basic-ui/pages/BasicFormPage.tsx +++ b/docs/.vitepress/showcases/react/basic/pages/BasicFormPage.tsx @@ -23,7 +23,14 @@ export function BasicFormPage() { return ( <> - + diff --git a/showcases/src/frameworks/react/chakra-ui/components/ComponentRegistry.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/ComponentRegistry.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/ComponentRegistry.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/ComponentRegistry.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Containers/FormContainer.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Containers/FormContainer.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormContainer.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Containers/FormField.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormField.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Containers/FormField.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormField.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionContainer.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionContainer.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionContainer.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionGroup.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionGroup.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionGroup.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionGroup.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionGroupContainer.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionGroupContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionGroupContainer.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionGroupContainer.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionTitle.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionTitle.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Containers/FormSectionTitle.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Containers/FormSectionTitle.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Form.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Form.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Form.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Form.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputCheckbox.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputCheckbox.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputCheckbox.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputCheckbox.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputDate.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputDate.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputDate.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputDate.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputNumber.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputNumber.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputNumber.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputNumber.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputPhone.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputPhone.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputPhone.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputPhone.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputSelect.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputSelect.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputSelect.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputSelect.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputText.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputText.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputText.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputText.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/Inputs/InputTextarea.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputTextarea.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/Inputs/InputTextarea.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/Inputs/InputTextarea.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/components/SubmitButton.tsx b/docs/.vitepress/showcases/react/chakra-ui/components/SubmitButton.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/components/SubmitButton.tsx rename to docs/.vitepress/showcases/react/chakra-ui/components/SubmitButton.tsx diff --git a/showcases/src/frameworks/react/chakra-ui/pages/ChakraFormPage.tsx b/docs/.vitepress/showcases/react/chakra-ui/pages/ChakraFormPage.tsx similarity index 100% rename from showcases/src/frameworks/react/chakra-ui/pages/ChakraFormPage.tsx rename to docs/.vitepress/showcases/react/chakra-ui/pages/ChakraFormPage.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/ComponentRegistry.tsx b/docs/.vitepress/showcases/react/material-ui/components/ComponentRegistry.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/ComponentRegistry.tsx rename to docs/.vitepress/showcases/react/material-ui/components/ComponentRegistry.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Containers/FormContainer.tsx b/docs/.vitepress/showcases/react/material-ui/components/Containers/FormContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Containers/FormContainer.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Containers/FormContainer.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Containers/FormField.tsx b/docs/.vitepress/showcases/react/material-ui/components/Containers/FormField.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Containers/FormField.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Containers/FormField.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Containers/FormSectionContainer.tsx b/docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Containers/FormSectionContainer.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionContainer.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Containers/FormSectionGroup.tsx b/docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionGroup.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Containers/FormSectionGroup.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionGroup.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Containers/FormSectionGroupContainer.tsx b/docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionGroupContainer.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Containers/FormSectionGroupContainer.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionGroupContainer.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Containers/FormSectionTitle.tsx b/docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionTitle.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Containers/FormSectionTitle.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Containers/FormSectionTitle.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Form.tsx b/docs/.vitepress/showcases/react/material-ui/components/Form.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Form.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Form.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputCheckbox.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputCheckbox.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputCheckbox.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputCheckbox.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputDate.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputDate.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputDate.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputDate.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputNumber.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputNumber.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputNumber.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputNumber.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputPhone.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputPhone.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputPhone.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputPhone.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputSelect.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputSelect.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputSelect.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputSelect.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputText.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputText.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputText.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputText.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/Inputs/InputTextarea.tsx b/docs/.vitepress/showcases/react/material-ui/components/Inputs/InputTextarea.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/Inputs/InputTextarea.tsx rename to docs/.vitepress/showcases/react/material-ui/components/Inputs/InputTextarea.tsx diff --git a/showcases/src/frameworks/react/material-ui/components/SubmitButton.tsx b/docs/.vitepress/showcases/react/material-ui/components/SubmitButton.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/components/SubmitButton.tsx rename to docs/.vitepress/showcases/react/material-ui/components/SubmitButton.tsx diff --git a/showcases/src/frameworks/react/material-ui/pages/MaterialFormPage.tsx b/docs/.vitepress/showcases/react/material-ui/pages/MaterialFormPage.tsx similarity index 100% rename from showcases/src/frameworks/react/material-ui/pages/MaterialFormPage.tsx rename to docs/.vitepress/showcases/react/material-ui/pages/MaterialFormPage.tsx diff --git a/docs/.vitepress/showcases/vanilla/VanillaShowcase.ts b/docs/.vitepress/showcases/vanilla/VanillaShowcase.ts new file mode 100644 index 0000000..7c57e2a --- /dev/null +++ b/docs/.vitepress/showcases/vanilla/VanillaShowcase.ts @@ -0,0 +1,25 @@ +import { createAppRoot } from './app'; + +export function mountVanillaShowcase(containerId: string = 'vanilla-showcase-root'): void { + const container = document.getElementById(containerId); + + if (!container) { + console.error(`Container with id "${containerId}" not found`); + return; + } + + // Clear any existing content + container.innerHTML = ''; + + // Create and mount the vanilla app + const appRoot = createAppRoot(); + container.appendChild(appRoot); +} + +export function unmountVanillaShowcase(containerId: string = 'vanilla-showcase-root'): void { + const container = document.getElementById(containerId); + + if (container) { + container.innerHTML = ''; + } +} diff --git a/docs/.vitepress/showcases/vanilla/VanillaShowcaseWrapper.vue b/docs/.vitepress/showcases/vanilla/VanillaShowcaseWrapper.vue new file mode 100644 index 0000000..a3db218 --- /dev/null +++ b/docs/.vitepress/showcases/vanilla/VanillaShowcaseWrapper.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/showcases/src/vanilla/app.ts b/docs/.vitepress/showcases/vanilla/app.ts similarity index 97% rename from showcases/src/vanilla/app.ts rename to docs/.vitepress/showcases/vanilla/app.ts index 798a9e1..cfa69b0 100644 --- a/showcases/src/vanilla/app.ts +++ b/docs/.vitepress/showcases/vanilla/app.ts @@ -5,8 +5,8 @@ import type { FormSchema } from '@schepta/core'; import { createNativeForm } from './components/NativeForm'; import { createNativeComplexForm } from './components/NativeComplexForm'; -import simpleFormSchema from '../../../instances/form/simple-form.json'; -import complexFormSchema from '../../../instances/form/complex-form.json'; +import simpleFormSchema from '../../../../instances/form/simple-form.json'; +import complexFormSchema from '../../../../instances/form/complex-form.json'; export function createAppRoot(): HTMLElement { const container = document.createElement('div'); diff --git a/showcases/src/vanilla/components/NativeComplexForm.ts b/docs/.vitepress/showcases/vanilla/components/NativeComplexForm.ts similarity index 100% rename from showcases/src/vanilla/components/NativeComplexForm.ts rename to docs/.vitepress/showcases/vanilla/components/NativeComplexForm.ts diff --git a/showcases/src/vanilla/components/NativeForm.ts b/docs/.vitepress/showcases/vanilla/components/NativeForm.ts similarity index 100% rename from showcases/src/vanilla/components/NativeForm.ts rename to docs/.vitepress/showcases/vanilla/components/NativeForm.ts diff --git a/showcases/src/vanilla/components/SocialNameInput.ts b/docs/.vitepress/showcases/vanilla/components/SocialNameInput.ts similarity index 100% rename from showcases/src/vanilla/components/SocialNameInput.ts rename to docs/.vitepress/showcases/vanilla/components/SocialNameInput.ts diff --git a/showcases/src/vanilla/components/SubmitButton.ts b/docs/.vitepress/showcases/vanilla/components/SubmitButton.ts similarity index 100% rename from showcases/src/vanilla/components/SubmitButton.ts rename to docs/.vitepress/showcases/vanilla/components/SubmitButton.ts diff --git a/showcases/src/vanilla/index.ts b/docs/.vitepress/showcases/vanilla/index.ts similarity index 100% rename from showcases/src/vanilla/index.ts rename to docs/.vitepress/showcases/vanilla/index.ts diff --git a/showcases/src/vanilla/singleSpaVanilla.ts b/docs/.vitepress/showcases/vanilla/singleSpaVanilla.ts similarity index 100% rename from showcases/src/vanilla/singleSpaVanilla.ts rename to docs/.vitepress/showcases/vanilla/singleSpaVanilla.ts diff --git a/showcases/src/vanilla/styles.ts b/docs/.vitepress/showcases/vanilla/styles.ts similarity index 100% rename from showcases/src/vanilla/styles.ts rename to docs/.vitepress/showcases/vanilla/styles.ts diff --git a/showcases/src/vanilla/tabs.ts b/docs/.vitepress/showcases/vanilla/tabs.ts similarity index 100% rename from showcases/src/vanilla/tabs.ts rename to docs/.vitepress/showcases/vanilla/tabs.ts diff --git a/docs/.vitepress/showcases/vue/VueShowcase.vue b/docs/.vitepress/showcases/vue/VueShowcase.vue new file mode 100644 index 0000000..61b380d --- /dev/null +++ b/docs/.vitepress/showcases/vue/VueShowcase.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/docs/.vitepress/showcases/vue/VuetifyShowcaseWrapper.vue b/docs/.vitepress/showcases/vue/VuetifyShowcaseWrapper.vue new file mode 100644 index 0000000..47c9946 --- /dev/null +++ b/docs/.vitepress/showcases/vue/VuetifyShowcaseWrapper.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/showcases/src/frameworks/vue/components/NativeComplexForm.vue b/docs/.vitepress/showcases/vue/basic/components/NativeComplexForm.vue similarity index 100% rename from showcases/src/frameworks/vue/components/NativeComplexForm.vue rename to docs/.vitepress/showcases/vue/basic/components/NativeComplexForm.vue diff --git a/showcases/src/frameworks/vue/components/NativeForm.vue b/docs/.vitepress/showcases/vue/basic/components/NativeForm.vue similarity index 100% rename from showcases/src/frameworks/vue/components/NativeForm.vue rename to docs/.vitepress/showcases/vue/basic/components/NativeForm.vue diff --git a/showcases/src/frameworks/vue/components/SocialNameInput.vue b/docs/.vitepress/showcases/vue/basic/components/SocialNameInput.vue similarity index 100% rename from showcases/src/frameworks/vue/components/SocialNameInput.vue rename to docs/.vitepress/showcases/vue/basic/components/SocialNameInput.vue diff --git a/showcases/src/frameworks/vue/components/VueFormPage.vue b/docs/.vitepress/showcases/vue/basic/components/VueFormPage.vue similarity index 87% rename from showcases/src/frameworks/vue/components/VueFormPage.vue rename to docs/.vitepress/showcases/vue/basic/components/VueFormPage.vue index 68b900e..d632b5b 100644 --- a/showcases/src/frameworks/vue/components/VueFormPage.vue +++ b/docs/.vitepress/showcases/vue/basic/components/VueFormPage.vue @@ -28,10 +28,6 @@
- -
- -
@@ -41,9 +37,8 @@ import { ref } from 'vue'; import NativeForm from './NativeForm.vue'; import NativeComplexForm from './NativeComplexForm.vue'; -import VuetifyFormPage from '../vuetify/pages/VuetifyFormPage.vue'; -import simpleFormSchema from '../../../../../instances/form/simple-form.json'; -import complexFormSchema from '../../../../../instances/form/complex-form.json'; +import simpleFormSchema from '../../../../../../instances/form/simple-form.json'; +import complexFormSchema from '../../../../../../instances/form/complex-form.json'; import type { FormSchema } from '@schepta/core'; const activeTab = ref(0); @@ -54,7 +49,6 @@ const complexSchema = complexFormSchema as FormSchema; const tabs = [ { id: 'simple', label: 'Simple Form', testId: 'simple-form-tab' }, { id: 'complex', label: 'Complex Form', testId: 'complex-form-tab' }, - { id: 'vuetify', label: 'Vuetify UI', testId: 'vuetify-form-tab' }, ]; diff --git a/showcases/src/frameworks/vue/plugins/vuetify.ts b/docs/.vitepress/showcases/vue/vuetify.ts similarity index 100% rename from showcases/src/frameworks/vue/plugins/vuetify.ts rename to docs/.vitepress/showcases/vue/vuetify.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/ComponentRegistry.ts b/docs/.vitepress/showcases/vue/vuetify/components/ComponentRegistry.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/ComponentRegistry.ts rename to docs/.vitepress/showcases/vue/vuetify/components/ComponentRegistry.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Containers/FormContainer.ts b/docs/.vitepress/showcases/vue/vuetify/components/Containers/FormContainer.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Containers/FormContainer.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Containers/FormContainer.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Containers/FormField.ts b/docs/.vitepress/showcases/vue/vuetify/components/Containers/FormField.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Containers/FormField.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Containers/FormField.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionContainer.ts b/docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionContainer.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionContainer.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionContainer.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionGroup.ts b/docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionGroup.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionGroup.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionGroup.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionGroupContainer.ts b/docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionGroupContainer.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionGroupContainer.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionGroupContainer.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionTitle.ts b/docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionTitle.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Containers/FormSectionTitle.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Containers/FormSectionTitle.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Form.vue b/docs/.vitepress/showcases/vue/vuetify/components/Form.vue similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Form.vue rename to docs/.vitepress/showcases/vue/vuetify/components/Form.vue diff --git a/showcases/src/frameworks/vue/vuetify/components/Inputs/InputCheckbox.ts b/docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputCheckbox.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Inputs/InputCheckbox.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputCheckbox.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Inputs/InputDate.ts b/docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputDate.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Inputs/InputDate.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputDate.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Inputs/InputNumber.ts b/docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputNumber.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Inputs/InputNumber.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputNumber.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Inputs/InputSelect.ts b/docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputSelect.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Inputs/InputSelect.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputSelect.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Inputs/InputText.ts b/docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputText.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Inputs/InputText.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputText.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/Inputs/InputTextarea.ts b/docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputTextarea.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/Inputs/InputTextarea.ts rename to docs/.vitepress/showcases/vue/vuetify/components/Inputs/InputTextarea.ts diff --git a/showcases/src/frameworks/vue/vuetify/components/SubmitButton.ts b/docs/.vitepress/showcases/vue/vuetify/components/SubmitButton.ts similarity index 100% rename from showcases/src/frameworks/vue/vuetify/components/SubmitButton.ts rename to docs/.vitepress/showcases/vue/vuetify/components/SubmitButton.ts diff --git a/showcases/src/frameworks/vue/vuetify/pages/VuetifyFormPage.vue b/docs/.vitepress/showcases/vue/vuetify/pages/VuetifyFormPage.vue similarity index 100% rename from showcases/src/frameworks/vue/vuetify/pages/VuetifyFormPage.vue rename to docs/.vitepress/showcases/vue/vuetify/pages/VuetifyFormPage.vue diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index c7ef144..ef80e34 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -13,6 +13,33 @@ export default { app.use(MotionPlugin); + // Force full page reload when navigating to/from showcase pages. + // This avoids framework conflicts between React and Vue runtimes. + // VitePress onBeforeRouteChange only receives `to` (not `from`). + if (typeof window !== 'undefined') { + const showcasePattern = /\/showcases\/(react|material-ui|chakra-ui|vue|vuetify|vanilla)/; + + router.onBeforeRouteChange = (to: string) => { + const currentPath = window.location.pathname; + + // Normalize: remove trailing .html + const normalizedTo = to.replace(/\.html$/, ''); + const normalizedFrom = currentPath.replace(/\.html$/, ''); + + const isFromShowcase = showcasePattern.test(normalizedFrom); + const isToShowcase = showcasePattern.test(normalizedTo); + + // If navigating between showcases or to/from a showcase, do a full reload + if (isFromShowcase || isToShowcase) { + // Avoid infinite reload loop: if already on target, do nothing + if (normalizedFrom === normalizedTo) return; + + window.location.href = normalizedTo; + return false; // Cancel SPA navigation + } + }; + } + if (typeof window !== 'undefined') { const handleLanguageClick = (e: MouseEvent) => { const target = e.target as HTMLElement; diff --git a/docs/en-US/showcases/chakra-ui.md b/docs/en-US/showcases/chakra-ui.md new file mode 100644 index 0000000..87f08e3 --- /dev/null +++ b/docs/en-US/showcases/chakra-ui.md @@ -0,0 +1,20 @@ +--- +title: React Chakra UI Showcase +description: React forms with Chakra UI components +aside: false +--- + + + +# React + Chakra UI + +Form implementation using React with Chakra UI component library. + +Chakra UI is a simple, modular and accessible component library. This showcase demonstrates how Schepta works with Chakra UI's theming system and components. + + + + diff --git a/docs/en-US/showcases/material-ui.md b/docs/en-US/showcases/material-ui.md new file mode 100644 index 0000000..f17eea3 --- /dev/null +++ b/docs/en-US/showcases/material-ui.md @@ -0,0 +1,20 @@ +--- +title: React Material UI Showcase +description: React forms with Material UI components +aside: false +--- + + + +# React + Material UI + +Form implementation using React with Material UI component library. + +Material UI provides a comprehensive set of pre-styled components following Material Design guidelines. This showcase demonstrates how Schepta integrates seamlessly with Material UI components. + + + + diff --git a/docs/en-US/showcases/react.md b/docs/en-US/showcases/react.md new file mode 100644 index 0000000..3ef9349 --- /dev/null +++ b/docs/en-US/showcases/react.md @@ -0,0 +1,24 @@ +--- +title: React Showcase +description: Interactive React form examples with Schepta +aside: false +--- + + + +# React Showcase + +Basic form implementation using native React components with various form libraries. + +Explore different tabs to see: +- **Simple Form**: Basic form with native components +- **Complex Form**: Advanced form with conditional fields +- **Modal Form**: Form within a modal dialog +- **React Hook Form**: Integration with React Hook Form library +- **Formik**: Integration with Formik library + + + + diff --git a/docs/en-US/showcases/vanilla.md b/docs/en-US/showcases/vanilla.md new file mode 100644 index 0000000..e4bd0cd --- /dev/null +++ b/docs/en-US/showcases/vanilla.md @@ -0,0 +1,21 @@ +--- +title: Vanilla JS Showcase +description: Interactive Vanilla JavaScript form examples with Schepta +aside: false +--- + + + +# Vanilla JS Showcase + +Form implementation using pure Vanilla JavaScript with no framework dependencies. + +Explore different tabs to see: +- **Simple Form**: Basic form with native JavaScript +- **Complex Form**: Advanced form with conditional fields and validation + + + + diff --git a/docs/en-US/showcases/vue.md b/docs/en-US/showcases/vue.md new file mode 100644 index 0000000..189cd21 --- /dev/null +++ b/docs/en-US/showcases/vue.md @@ -0,0 +1,23 @@ +--- +title: Vue Showcase +description: Interactive Vue 3 form examples with Schepta +aside: false +--- + + + +# Vue Showcase + +Form implementation using Vue 3 Composition API with native components. + +Explore different tabs to see: +- **Simple Form**: Basic form with native Vue components +- **Complex Form**: Advanced form with conditional fields and validation + +> For Vuetify UI integration, check the [Vuetify showcase](./vuetify) in the sidebar. + + + + diff --git a/docs/en-US/showcases/vuetify.md b/docs/en-US/showcases/vuetify.md new file mode 100644 index 0000000..f07b106 --- /dev/null +++ b/docs/en-US/showcases/vuetify.md @@ -0,0 +1,19 @@ +--- +title: Vue Vuetify Showcase +description: Vue 3 forms with Vuetify components +aside: false +--- + + + +# Vue + Vuetify + +Form implementation using Vue 3 with Vuetify component library. + +Vuetify is a Vue UI library with beautifully handcrafted Material Design components. This showcase demonstrates how Schepta integrates with Vuetify's comprehensive component ecosystem. + + + + diff --git a/docs/es-ES/showcases/chakra-ui.md b/docs/es-ES/showcases/chakra-ui.md new file mode 100644 index 0000000..6332210 --- /dev/null +++ b/docs/es-ES/showcases/chakra-ui.md @@ -0,0 +1,20 @@ +--- +title: Showcase React Chakra UI +description: Formularios React con componentes Chakra UI +aside: false +--- + + + +# React + Chakra UI + +Implementación de formularios usando React con la biblioteca de componentes Chakra UI. + +Chakra UI es una biblioteca de componentes simple, modular y accesible. Este showcase demuestra cómo Schepta funciona con el sistema de temas y componentes de Chakra UI. + + + + diff --git a/docs/es-ES/showcases/material-ui.md b/docs/es-ES/showcases/material-ui.md new file mode 100644 index 0000000..dc70601 --- /dev/null +++ b/docs/es-ES/showcases/material-ui.md @@ -0,0 +1,20 @@ +--- +title: Showcase React Material UI +description: Formularios React con componentes Material UI +aside: false +--- + + + +# React + Material UI + +Implementación de formularios usando React con la biblioteca de componentes Material UI. + +Material UI proporciona un conjunto completo de componentes pre-estilizados siguiendo las directrices de Material Design. Este showcase demuestra cómo Schepta se integra perfectamente con los componentes de Material UI. + + + + diff --git a/docs/es-ES/showcases/react.md b/docs/es-ES/showcases/react.md new file mode 100644 index 0000000..2d50065 --- /dev/null +++ b/docs/es-ES/showcases/react.md @@ -0,0 +1,25 @@ +--- +title: Showcase React +description: Ejemplos interactivos de formularios React con Schepta +aside: false +--- + + + +# Showcase React + +Implementación de formularios usando componentes nativos de React con varias bibliotecas de formularios. + +Explora las diferentes pestañas para ver: +- **Formulario Simple**: Formulario básico con componentes nativos +- **Formulario Complejo**: Formulario avanzado con campos condicionales +- **Formulario Modal**: Formulario dentro de un diálogo modal +- **React Hook Form**: Integración con la biblioteca React Hook Form +- **Formik**: Integración con la biblioteca Formik + + + + diff --git a/docs/es-ES/showcases/vanilla.md b/docs/es-ES/showcases/vanilla.md new file mode 100644 index 0000000..c3148e3 --- /dev/null +++ b/docs/es-ES/showcases/vanilla.md @@ -0,0 +1,21 @@ +--- +title: Showcase Vanilla JS +description: Ejemplos interactivos de formularios en JavaScript puro con Schepta +aside: false +--- + + + +# Showcase Vanilla JS + +Implementación de formularios usando JavaScript puro sin dependencias de frameworks. + +Explora las diferentes pestañas para ver: +- **Formulario Simple**: Formulario básico con JavaScript nativo +- **Formulario Complejo**: Formulario avanzado con campos condicionales y validación + + + + diff --git a/docs/es-ES/showcases/vue.md b/docs/es-ES/showcases/vue.md new file mode 100644 index 0000000..fa09bed --- /dev/null +++ b/docs/es-ES/showcases/vue.md @@ -0,0 +1,23 @@ +--- +title: Showcase Vue +description: Ejemplos interactivos de formularios Vue 3 con Schepta +aside: false +--- + + + +# Showcase Vue + +Implementación de formularios usando Vue 3 Composition API con componentes nativos. + +Explora las diferentes pestañas para ver: +- **Formulario Simple**: Formulario básico con componentes Vue nativos +- **Formulario Complejo**: Formulario avanzado con campos condicionales y validación + +> Para la integración con Vuetify UI, consulta el [showcase de Vuetify](./vuetify) en el menú lateral. + + + + diff --git a/docs/es-ES/showcases/vuetify.md b/docs/es-ES/showcases/vuetify.md new file mode 100644 index 0000000..88ee2a7 --- /dev/null +++ b/docs/es-ES/showcases/vuetify.md @@ -0,0 +1,19 @@ +--- +title: Showcase Vue Vuetify +description: Formularios Vue 3 con componentes Vuetify +aside: false +--- + + + +# Vue + Vuetify + +Implementación de formularios usando Vue 3 con la biblioteca de componentes Vuetify. + +Vuetify es una biblioteca de UI Vue con componentes Material Design bellamente elaborados. Este showcase demuestra cómo Schepta se integra con el completo ecosistema de componentes de Vuetify. + + + + diff --git a/docs/package.json b/docs/package.json index 22d7d7a..57016b1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -9,17 +9,28 @@ "preview": "vitepress preview" }, "dependencies": { + "@chakra-ui/react": "^2.8.2", + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@hookform/resolvers": "^3.9.0", "@mdi/font": "^7.4.47", + "@mui/material": "^5.15.0", "@schepta/adapter-react": "workspace:*", + "@schepta/adapter-vanilla": "workspace:*", "@schepta/adapter-vue": "workspace:*", "@schepta/core": "workspace:*", "@schepta/factory-react": "workspace:*", + "@schepta/factory-vanilla": "workspace:*", "@schepta/factory-vue": "workspace:*", + "@tanstack/react-router": "^1.159.5", "@vueuse/motion": "^3.0.3", + "formik": "^2.4.6", + "framer-motion": "^10.16.16", "lucide-vue-next": "^0.561.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.49.0", + "react-hook-form": "^7.52.2", + "react-icons": "^5.0.0", "react-router-dom": "^6.20.0", "vue": "^3.4.0", "vue-router": "^4.2.5", diff --git a/docs/pt-BR/showcases/chakra-ui.md b/docs/pt-BR/showcases/chakra-ui.md new file mode 100644 index 0000000..f248a05 --- /dev/null +++ b/docs/pt-BR/showcases/chakra-ui.md @@ -0,0 +1,20 @@ +--- +title: Showcase React Chakra UI +description: Formulários React com componentes Chakra UI +aside: false +--- + + + +# React + Chakra UI + +Implementação de formulários usando React com a biblioteca de componentes Chakra UI. + +Chakra UI é uma biblioteca de componentes simples, modular e acessível. Este showcase demonstra como o Schepta funciona com o sistema de temas e componentes do Chakra UI. + + + + diff --git a/docs/pt-BR/showcases/material-ui.md b/docs/pt-BR/showcases/material-ui.md new file mode 100644 index 0000000..3b33770 --- /dev/null +++ b/docs/pt-BR/showcases/material-ui.md @@ -0,0 +1,20 @@ +--- +title: Showcase React Material UI +description: Formulários React com componentes Material UI +aside: false +--- + + + +# React + Material UI + +Implementação de formulários usando React com a biblioteca de componentes Material UI. + +Material UI fornece um conjunto abrangente de componentes pré-estilizados seguindo as diretrizes do Material Design. Este showcase demonstra como o Schepta se integra perfeitamente com os componentes Material UI. + + + + diff --git a/docs/pt-BR/showcases/react.md b/docs/pt-BR/showcases/react.md new file mode 100644 index 0000000..f2727b9 --- /dev/null +++ b/docs/pt-BR/showcases/react.md @@ -0,0 +1,25 @@ +--- +title: Showcase React +description: Exemplos interativos de formulários React com Schepta +aside: false +--- + + + +# Showcase React + +Implementação de formulários usando componentes nativos do React com várias bibliotecas de formulários. + +Explore as diferentes abas para ver: +- **Formulário Simples**: Formulário básico com componentes nativos +- **Formulário Complexo**: Formulário avançado com campos condicionais +- **Formulário Modal**: Formulário dentro de um diálogo modal +- **React Hook Form**: Integração com a biblioteca React Hook Form +- **Formik**: Integração com a biblioteca Formik + + + + diff --git a/docs/pt-BR/showcases/vanilla.md b/docs/pt-BR/showcases/vanilla.md new file mode 100644 index 0000000..411e231 --- /dev/null +++ b/docs/pt-BR/showcases/vanilla.md @@ -0,0 +1,21 @@ +--- +title: Showcase Vanilla JS +description: Exemplos interativos de formulários em JavaScript puro com Schepta +aside: false +--- + + + +# Showcase Vanilla JS + +Implementação de formulários usando JavaScript puro sem dependências de frameworks. + +Explore as diferentes abas para ver: +- **Formulário Simples**: Formulário básico com JavaScript nativo +- **Formulário Complexo**: Formulário avançado com campos condicionais e validação + + + + diff --git a/docs/pt-BR/showcases/vue.md b/docs/pt-BR/showcases/vue.md new file mode 100644 index 0000000..ea4ee20 --- /dev/null +++ b/docs/pt-BR/showcases/vue.md @@ -0,0 +1,23 @@ +--- +title: Showcase Vue +description: Exemplos interativos de formulários Vue 3 com Schepta +aside: false +--- + + + +# Showcase Vue + +Implementação de formulários usando Vue 3 Composition API com componentes nativos. + +Explore as diferentes abas para ver: +- **Formulário Simples**: Formulário básico com componentes Vue nativos +- **Formulário Complexo**: Formulário avançado com campos condicionais e validação + +> Para integração com Vuetify UI, confira o [showcase Vuetify](./vuetify) no menu lateral. + + + + diff --git a/docs/pt-BR/showcases/vuetify.md b/docs/pt-BR/showcases/vuetify.md new file mode 100644 index 0000000..44e59b9 --- /dev/null +++ b/docs/pt-BR/showcases/vuetify.md @@ -0,0 +1,19 @@ +--- +title: Showcase Vue Vuetify +description: Formulários Vue 3 com componentes Vuetify +aside: false +--- + + + +# Vue + Vuetify + +Implementação de formulários usando Vue 3 com a biblioteca de componentes Vuetify. + +Vuetify é uma biblioteca de UI Vue com componentes Material Design lindamente elaborados. Este showcase demonstra como o Schepta se integra com o abrangente ecossistema de componentes do Vuetify. + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7277be5..1afad6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,12 +26,30 @@ importers: docs: dependencies: + '@chakra-ui/react': + specifier: ^2.8.2 + version: 2.10.9(@emotion/react@11.14.0)(@emotion/styled@11.14.1)(@types/react@18.3.27)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1) + '@emotion/react': + specifier: ^11.11.0 + version: 11.14.0(@types/react@18.3.27)(react@18.3.1) + '@emotion/styled': + specifier: ^11.11.0 + version: 11.14.1(@emotion/react@11.14.0)(@types/react@18.3.27)(react@18.3.1) + '@hookform/resolvers': + specifier: ^3.9.0 + version: 3.10.0(react-hook-form@7.68.0) '@mdi/font': specifier: ^7.4.47 version: 7.4.47 + '@mui/material': + specifier: ^5.15.0 + version: 5.18.0(@emotion/react@11.14.0)(@emotion/styled@11.14.1)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1) '@schepta/adapter-react': specifier: workspace:* version: link:../packages/adapters/react + '@schepta/adapter-vanilla': + specifier: workspace:* + version: link:../packages/adapters/vanilla '@schepta/adapter-vue': specifier: workspace:* version: link:../packages/adapters/vue @@ -41,12 +59,24 @@ importers: '@schepta/factory-react': specifier: workspace:* version: link:../packages/factories/react + '@schepta/factory-vanilla': + specifier: workspace:* + version: link:../packages/factories/vanilla '@schepta/factory-vue': specifier: workspace:* version: link:../packages/factories/vue + '@tanstack/react-router': + specifier: ^1.159.5 + version: 1.159.5(react-dom@18.3.1)(react@18.3.1) '@vueuse/motion': specifier: ^3.0.3 version: 3.0.3(vue@3.5.25) + formik: + specifier: ^2.4.6 + version: 2.4.9(@types/react@18.3.27)(react@18.3.1) + framer-motion: + specifier: ^10.16.16 + version: 10.18.0(react-dom@18.3.1)(react@18.3.1) lucide-vue-next: specifier: ^0.561.0 version: 0.561.0(vue@3.5.25) @@ -57,8 +87,11 @@ importers: specifier: ^18.2.0 version: 18.3.1(react@18.3.1) react-hook-form: - specifier: ^7.49.0 + specifier: ^7.52.2 version: 7.68.0(react@18.3.1) + react-icons: + specifier: ^5.0.0 + version: 5.5.0(react@18.3.1) react-router-dom: specifier: ^6.20.0 version: 6.30.2(react-dom@18.3.1)(react@18.3.1) @@ -92,7 +125,7 @@ importers: version: 2.1.2(vite@5.4.21)(vue@3.5.25)(vuetify@3.11.2) vitepress: specifier: ^1.0.0 - version: 1.6.4(@algolia/client-search@5.46.0)(@types/node@20.19.25)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3) + version: 1.6.4(@algolia/client-search@5.46.0)(@types/node@20.19.25)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3) packages/adapters/react: dependencies: @@ -899,10 +932,10 @@ packages: resolution: {integrity: sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ==} dev: true - /@docsearch/js@3.8.2(@algolia/client-search@5.46.0)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3): + /@docsearch/js@3.8.2(@algolia/client-search@5.46.0)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3): resolution: {integrity: sha512-Q5wY66qHn0SwA7Taa0aDbHiJvaFJLOJyHmooQ7y8hlwwQLQ/5WwCcoX0g7ii04Qi2DJlHsd0XXzJ8Ypw9+9YmQ==} dependencies: - '@docsearch/react': 3.8.2(@algolia/client-search@5.46.0)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3) + '@docsearch/react': 3.8.2(@algolia/client-search@5.46.0)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3) preact: 10.28.0 transitivePeerDependencies: - '@algolia/client-search' @@ -912,7 +945,7 @@ packages: - search-insights dev: true - /@docsearch/react@3.8.2(@algolia/client-search@5.46.0)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3): + /@docsearch/react@3.8.2(@algolia/client-search@5.46.0)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3): resolution: {integrity: sha512-xCRrJQlTt8N9GU0DG4ptwHRkfnSnD/YpdeaXe02iKfqs97TkZJv60yE+1eq/tjPcVnTW8dP5qLP7itifFVV5eg==} peerDependencies: '@types/react': '>= 16.8.0 < 19.0.0' @@ -932,6 +965,7 @@ packages: '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.46.0)(algoliasearch@5.46.0)(search-insights@2.17.3) '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.46.0)(algoliasearch@5.46.0) '@docsearch/css': 3.8.2 + '@types/react': 18.3.27 algoliasearch: 5.46.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -5632,7 +5666,7 @@ packages: optionalDependencies: fsevents: 2.3.3 - /vitepress@1.6.4(@algolia/client-search@5.46.0)(@types/node@20.19.25)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3): + /vitepress@1.6.4(@algolia/client-search@5.46.0)(@types/node@20.19.25)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3): resolution: {integrity: sha512-+2ym1/+0VVrbhNyRoFFesVvBvHAVMZMK0rw60E3X/5349M1GuVdKeazuksqopEdvkKwKGs21Q729jX81/bkBJg==} hasBin: true peerDependencies: @@ -5645,7 +5679,7 @@ packages: optional: true dependencies: '@docsearch/css': 3.8.2 - '@docsearch/js': 3.8.2(@algolia/client-search@5.46.0)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3) + '@docsearch/js': 3.8.2(@algolia/client-search@5.46.0)(@types/react@18.3.27)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.17.3) '@iconify-json/simple-icons': 1.2.61 '@shikijs/core': 2.5.0 '@shikijs/transformers': 2.5.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index e34b522..465806e 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,6 +1,5 @@ packages: - 'packages/**' - - 'showcases/**' - 'tests' - 'docs' diff --git a/showcases/index.html b/showcases/index.html deleted file mode 100644 index 6834e2e..0000000 --- a/showcases/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Single-SPA + Vite Experiment - - - - -
- - - diff --git a/showcases/package.json b/showcases/package.json deleted file mode 100644 index 035fb6e..0000000 --- a/showcases/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "showcases", - "version": "0.1.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@chakra-ui/react": "^2.8.2", - "@emotion/react": "^11.11.0", - "@emotion/styled": "^11.11.0", - "@hookform/resolvers": "^3.9.0", - "@mdi/font": "^7.4.47", - "@mui/material": "^5.15.0", - "@schepta/adapter-react": "workspace:*", - "@schepta/adapter-vanilla": "workspace:*", - "@schepta/adapter-vue": "workspace:*", - "@schepta/core": "workspace:*", - "@schepta/factory-react": "workspace:*", - "@schepta/factory-vanilla": "workspace:*", - "@schepta/factory-vue": "workspace:*", - "@tanstack/react-router": "^1.159.5", - "formik": "^2.4.6", - "framer-motion": "^10.16.16", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-hook-form": "^7.52.2", - "react-icons": "^5.0.0", - "single-spa": "^6.0.1", - "single-spa-react": "^6.0.0", - "single-spa-vue": "^3.0.1", - "vue": "^3.4.0", - "vuetify": "^3.11.2" - }, - "devDependencies": { - "@types/react": "^18.2.47", - "@types/react-dom": "^18.2.18", - "@vitejs/plugin-react": "^4.2.1", - "@vitejs/plugin-vue": "^5.0.0", - "typescript": "^5.3.3", - "vite": "^5.0.8", - "vite-plugin-single-spa": "^1.1.0" - } -} \ No newline at end of file diff --git a/showcases/src/frameworks/react/App.tsx b/showcases/src/frameworks/react/App.tsx deleted file mode 100644 index cbafa07..0000000 --- a/showcases/src/frameworks/react/App.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import { router } from "./router"; -import { RouterProvider } from "@tanstack/react-router"; - -function App() { - return ; -} - -export default App; diff --git a/showcases/src/frameworks/react/RootLayout.tsx b/showcases/src/frameworks/react/RootLayout.tsx deleted file mode 100644 index ad4b357..0000000 --- a/showcases/src/frameworks/react/RootLayout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -// react/RootLayout.tsx -import React from 'react'; -import { Outlet } from '@tanstack/react-router'; -import { ScheptaProvider } from '@schepta/adapter-react'; -import { components } from './basic-ui/components/ComponentRegistry'; -import { Box, Container } from '@mui/material'; -import { ReactHeader } from './components/ReactHeader'; - -export function RootLayout() { - const labelMiddleware = (props: any) => { - if (props.label) { - return { ...props, label: `[Provider] ${props.label}` }; - } - return props; - }; - - return ( - - - - - - - - - ); -} \ No newline at end of file diff --git a/showcases/src/frameworks/react/components/Header.tsx b/showcases/src/frameworks/react/components/Header.tsx deleted file mode 100644 index 86db2dc..0000000 --- a/showcases/src/frameworks/react/components/Header.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { - AppBar, - Box, - Container, - Link, - Toolbar, - Typography, -} from "@mui/material"; - -export function Header() { - return ( - - - - - Single-SPA + Vite Experiment - - - - - Home - - - React - - - Vue - - - Vanilla - - - - - - ); -} diff --git a/showcases/src/frameworks/react/components/ReactHeader.tsx b/showcases/src/frameworks/react/components/ReactHeader.tsx deleted file mode 100644 index 00aaa70..0000000 --- a/showcases/src/frameworks/react/components/ReactHeader.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import { Link, useRouterState } from '@tanstack/react-router'; -import { - AppBar, - Toolbar, - Typography, - Box, - Container, - Tabs, - Tab, -} from '@mui/material'; -import { FaReact } from 'react-icons/fa'; -import { SiChakraui, SiMui } from 'react-icons/si'; - -const base = '/react'; -const navigationItems = [ - { path: `${base}/basic`, label: 'Basic UI', icon: }, - { path: `${base}/chakra-ui`, label: 'Chakra UI', icon: }, - { path: `${base}/material-ui`, label: 'Material UI', icon: }, -]; - -export function ReactHeader() { - const router = useRouterState(); - const currentPath = router.location.pathname; - - return ( - - - - - Schepta React Showcases - - - - {navigationItems.map((item) => ( - - {item.label} - {item.icon} - - } - value={item.path} - component={Link} - to={item.path} - /> - ))} - - - - - - ); -} \ No newline at end of file diff --git a/showcases/src/frameworks/react/index.css b/showcases/src/frameworks/react/index.css deleted file mode 100644 index 83bfa71..0000000 --- a/showcases/src/frameworks/react/index.css +++ /dev/null @@ -1,18 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -*, *::before, *::after { - box-sizing: border-box; -} - diff --git a/showcases/src/frameworks/react/index.tsx b/showcases/src/frameworks/react/index.tsx deleted file mode 100644 index 49a246a..0000000 --- a/showcases/src/frameworks/react/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import ReactDOMClient from "react-dom/client"; -import App from "./App"; -import './index.css'; -import singleSpaReact from "single-spa-react"; -import { HomePage } from "./pages/HomePage"; - -export const lifecycles = singleSpaReact({ - React, - ReactDOMClient, - rootComponent: App, - errorBoundary(err, info, props) { - return ( -
-

Something went wrong

- 
{err?.message}
-
- ); - }, -}); - -export const homeLifecycles = singleSpaReact({ - React, - ReactDOMClient, - rootComponent: HomePage, - errorBoundary(err, info, props) { - return ( -
-

Something went wrong

- 
{err?.message}
-
- ); - }, -}); \ No newline at end of file diff --git a/showcases/src/frameworks/react/pages/HomePage.tsx b/showcases/src/frameworks/react/pages/HomePage.tsx deleted file mode 100644 index e350df5..0000000 --- a/showcases/src/frameworks/react/pages/HomePage.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from "react"; - -export function HomePage() { - return ( -
-
-

Bem-vindo ao Single-SPA + Vite Experiment

-
-

Escolha um framework para ver a demonstração do Schepta:

- -
- (e.currentTarget.style.transform = "translateY(-4px)")} - onMouseOut={(e) => (e.currentTarget.style.transform = "translateY(0)")} - > -

React

-

Demonstração com React + Material-UI

- - (e.currentTarget.style.transform = "translateY(-4px)")} - onMouseOut={(e) => (e.currentTarget.style.transform = "translateY(0)")} - > -

Vue

-

Demonstração com Vue 3 Composition API

- - (e.currentTarget.style.transform = "translateY(-4px)")} - onMouseOut={(e) => (e.currentTarget.style.transform = "translateY(0)")} - > -

- Vanilla JS -

-

Demonstração com JavaScript puro

- -
-
- ); -} diff --git a/showcases/src/frameworks/react/pages/ReactFormPage.tsx b/showcases/src/frameworks/react/pages/ReactFormPage.tsx deleted file mode 100644 index 4427d15..0000000 --- a/showcases/src/frameworks/react/pages/ReactFormPage.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useState } from "react"; -import { Tab, Tabs, Paper } from "@mui/material"; -import { FaReact } from "react-icons/fa"; - -interface TabPanelProps { - children?: React.ReactNode; - index: number; - value: number; -} - -function TabPanel({ children, value, index }: TabPanelProps) { - return ( - - ); -} - -export function ReactFormPage() { - const [tabValue, setTabValue] = useState(0); - - const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { - setTabValue(newValue); - }; - - return ( -
-
- -

React Microfrontend - Schepta Forms

-
- -
- - - - - - - -

Simple React Form

-

Esta é uma demonstração básica do Schepta no React (monorepo unificado)

-
-

✅ Funcionando! Este microfrontend React está rodando dentro do shell principal.

-
- - - -

Complex React Form

-

Aqui seria um formulário mais complexo com Schepta

- - -
-
- ); -} \ No newline at end of file diff --git a/showcases/src/frameworks/react/router.tsx b/showcases/src/frameworks/react/router.tsx deleted file mode 100644 index ff5301e..0000000 --- a/showcases/src/frameworks/react/router.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// react/router.tsx -import { - createRouter, - createRoute, - createRootRoute, - Outlet, - redirect, -} from '@tanstack/react-router'; -import { BasicFormPage } from './basic-ui/pages/BasicFormPage'; -import { ChakraFormPage } from './chakra-ui/pages/ChakraFormPage'; -import { MaterialFormPage } from './material-ui/pages/MaterialFormPage'; -import { RootLayout } from './RootLayout'; - -const rootRoute = createRootRoute({ - component: () => , -}); - -const reactRoute = createRoute({ - getParentRoute: () => rootRoute, - path: 'react', - component: RootLayout, -}); - -const reactIndexRoute = createRoute({ - getParentRoute: () => reactRoute, - path: '/', - beforeLoad: () => { - throw redirect({ to: '/react/basic' }); - }, -}); - -const basicRoute = createRoute({ - getParentRoute: () => reactRoute, - path: 'basic', - component: BasicFormPage, -}); - -const chakraRoute = createRoute({ - getParentRoute: () => reactRoute, - path: 'chakra-ui', - component: ChakraFormPage, -}); - -const materialRoute = createRoute({ - getParentRoute: () => reactRoute, - path: 'material-ui', - component: MaterialFormPage, -}); - -const routeTree = rootRoute.addChildren([ - reactRoute.addChildren([ - reactIndexRoute, - basicRoute, - chakraRoute, - materialRoute, - ]), -]); - -export const router = createRouter({ routeTree }); - -declare module '@tanstack/react-router' { - interface Register { - router: typeof router; - } -} diff --git a/showcases/src/frameworks/vue/index.ts b/showcases/src/frameworks/vue/index.ts deleted file mode 100644 index 36f5955..0000000 --- a/showcases/src/frameworks/vue/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { createApp, h } from 'vue'; -import VueFormPage from './components/VueFormPage.vue'; -import singleSpaVue from 'single-spa-vue'; -import { vuetify } from './plugins/vuetify'; - -const lifecycles = singleSpaVue({ - createApp, - appOptions: { - render: () => h(VueFormPage), - }, - handleInstance: (app) => { - app.use(vuetify); - }, -}); - -export const { bootstrap, mount, unmount } = lifecycles; \ No newline at end of file diff --git a/showcases/src/main.ts b/showcases/src/main.ts deleted file mode 100644 index 1fd2399..0000000 --- a/showcases/src/main.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { registerApplication, start } from 'single-spa'; -import ReactDOM from "react-dom/client"; -import { lifecycles as reactApp, homeLifecycles } from './frameworks/react'; -import React from 'react'; -import { Header } from './frameworks/react/components/Header'; - - -registerApplication({ - name: 'header', - app: () => Promise.resolve({ - bootstrap: () => Promise.resolve(), - mount: () => { - const root = ReactDOM.createRoot( - document.getElementById("header")!, - ); - root.render(React.createElement(Header)); - return Promise.resolve(); - }, - unmount: () => { - const container = document.getElementById('header'); - if (container) container.innerHTML = ''; - return Promise.resolve(); - } - }), - activeWhen: '/' -}); - -registerApplication({ - name: 'home', - app: () => Promise.resolve(homeLifecycles), - activeWhen: (location) => location.pathname === '/' -}); - -registerApplication({ - name: 'react', - app: () => Promise.resolve(reactApp), - activeWhen: (location) => location.pathname.startsWith('/react') -}); - -registerApplication({ - name: 'vue', - app: () => import('./frameworks/vue'), - activeWhen: (location) => location.pathname === '/vue' -}); - -registerApplication({ - name: 'vanilla', - app: () => import('./vanilla'), - activeWhen: (location) => location.pathname === '/vanilla', - customProps: { - domElementGetter: () => document.getElementById('vanilla')!, - }, -}); - -start(); \ No newline at end of file diff --git a/showcases/tsconfig.json b/showcases/tsconfig.json deleted file mode 100644 index e6a6f82..0000000 --- a/showcases/tsconfig.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../tsconfig.base.json", - "compilerOptions": { - "outDir": "./dist", - "rootDir": "./src", - "jsx": "preserve", - "paths": {} - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] -} diff --git a/showcases/vercel.json b/showcases/vercel.json deleted file mode 100644 index 0f32683..0000000 --- a/showcases/vercel.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] -} diff --git a/showcases/vite.config.ts b/showcases/vite.config.ts deleted file mode 100644 index 7aa675f..0000000 --- a/showcases/vite.config.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { defineConfig } from 'vite'; -import vitePluginSingleSpa from 'vite-plugin-single-spa'; -import react from '@vitejs/plugin-react'; -import vue from '@vitejs/plugin-vue'; - -export default defineConfig({ - plugins: [ - react(), - vue(), - vitePluginSingleSpa({ - type: 'root', - imo: '3.1.1' - }) - ], - server: { - port: 3000 - }, - build: { - rollupOptions: { - output: { - manualChunks(id) { - // React core - if (id.includes('node_modules/react/') || id.includes('node_modules/react-dom/')) { - return 'react-vendor'; - } - // Vue - if (id.includes('node_modules/vue/') || id.includes('node_modules/@vue/')) { - return 'vue-vendor'; - } - // TanStack Router - if (id.includes('node_modules/@tanstack/router')) { - return 'router-vendor'; - } - // single-spa - if (id.includes('node_modules/single-spa')) { - return 'single-spa-vendor'; - } - // React Hook Form + @hookform (separate chunk avoids circular init; Formik stays in app bundle so React is available) - if (id.includes('node_modules/react-hook-form') || id.includes('node_modules/@hookform')) { - return 'rhf-vendor'; - } - } - } - }, - chunkSizeWarningLimit: 700 - } -}); \ No newline at end of file diff --git a/tests/e2e/react.spec.ts b/tests/e2e/react.spec.ts index 2611e6c..94199b2 100644 --- a/tests/e2e/react.spec.ts +++ b/tests/e2e/react.spec.ts @@ -6,7 +6,7 @@ import { extractFieldsFromSchema, FormSchema } from '@schepta/core'; test.describe('React Form Factory', () => { test.beforeEach(async ({ page, baseURL }) => { - await page.goto(`${baseURL}/basic`); + await page.goto(`${baseURL}`); }); test('should render simple form', async ({ page }) => { @@ -165,7 +165,7 @@ test.describe('React Form Factory', () => { test.describe('React Hook Form Integration', () => { test.beforeEach(async ({ page, baseURL }) => { - await page.goto(`${baseURL}/basic`); + await page.goto(`${baseURL}`); // Navigate to RHF form tab await page.click('[data-test-id*="rhf-form-tab"]'); await page.waitForSelector('[data-test-id^="FormContainer"]', { timeout: 10000 }); @@ -200,7 +200,7 @@ test.describe('React Hook Form Integration', () => { test.describe('Formik Integration', () => { test.beforeEach(async ({ page, baseURL }) => { - await page.goto(`${baseURL}/basic`); + await page.goto(`${baseURL}`); // Navigate to Formik form tab await page.click('[data-test-id*="formik-form-tab"]'); await page.waitForSelector('[data-test-id^="FormContainer"]', { timeout: 10000 }); diff --git a/tests/playwright.config.ts b/tests/playwright.config.ts index ad1ad77..91c13cf 100644 --- a/tests/playwright.config.ts +++ b/tests/playwright.config.ts @@ -18,13 +18,18 @@ export default defineConfig({ // Output folders for test artifacts outputDir: '../test-results', snapshotDir: '../test-screenshots', + webServer: { + command: 'cd ../docs && pnpm dev', + port: 5173, + reuseExistingServer: true, + }, projects: [ { name: 'react', testMatch: '**/*react.spec.ts', use: { ...devices['Desktop Chrome'], - baseURL: 'https://show.schepta.org/react', + baseURL: 'http://localhost:5173/en-US/showcases/react', }, }, { @@ -32,7 +37,7 @@ export default defineConfig({ testMatch: '**/*vue.spec.ts', use: { ...devices['Desktop Chrome'], - baseURL: 'https://show.schepta.org/vue', + baseURL: 'http://localhost:5173/en-US/showcases/vue', }, }, { @@ -40,7 +45,7 @@ export default defineConfig({ testMatch: '**/*vanilla.spec.ts', use: { ...devices['Desktop Chrome'], - baseURL: 'https://show.schepta.org/vanilla', + baseURL: 'http://localhost:5173/en-US/showcases/vanilla', }, }, ], From c3ecfef9244c081e76c9f36868b198bde3dd827b Mon Sep 17 00:00:00 2001 From: guynikan Date: Thu, 12 Feb 2026 17:17:40 -0300 Subject: [PATCH 2/4] Refactor React showcases to support dark mode and improve styling - Updated ReactShowcase component to accept an `isDark` prop for theme customization. - Enhanced BasicFormPage and MaterialFormPage to utilize MUI's theming capabilities based on the `isDark` prop. - Introduced a utility function `getToken` to retrieve CSS variable values for consistent theming across components. - Refactored various form components to use CSS variables for colors and borders, ensuring a cohesive design. - Improved ChakraFormPage to extend the theme based on the `isDark` prop, enhancing user experience in dark mode. - Updated styles in Vanilla JS components to align with the new theming approach, ensuring consistency across frameworks. --- .../showcases/react/ReactShowcase.tsx | 58 +++++++++++++------ .../showcases/react/ReactShowcaseWrapper.vue | 23 ++++++-- .../basic/components/Forms/FormWithFormik.tsx | 10 ++-- .../basic/components/Forms/FormWithRHF.tsx | 10 ++-- .../basic/components/Forms/ModalForm.tsx | 28 ++++----- .../components/Forms/NativeComplexForm.tsx | 18 +++--- .../basic/components/Forms/NativeForm.tsx | 8 +-- .../basic/components/Inputs/InputText.tsx | 2 +- .../components/formik/FormikFormContainer.tsx | 4 +- .../basic/components/rhf/RHFFormContainer.tsx | 4 +- .../react/basic/pages/BasicFormPage.tsx | 34 +++++++++-- .../react/chakra-ui/components/Form.tsx | 2 +- .../react/chakra-ui/pages/ChakraFormPage.tsx | 40 ++++++++++++- .../react/material-ui/components/Form.tsx | 6 +- .../material-ui/pages/MaterialFormPage.tsx | 40 ++++++++++--- docs/.vitepress/showcases/vanilla/app.ts | 22 +++---- .../vanilla/components/NativeComplexForm.ts | 16 ++--- .../vanilla/components/NativeForm.ts | 10 ++-- .../vanilla/components/SocialNameInput.ts | 4 +- .../vanilla/components/SubmitButton.ts | 4 +- .../showcases/vue/VuetifyShowcaseWrapper.vue | 18 +++++- .../basic/components/NativeComplexForm.vue | 16 ++--- .../vue/basic/components/NativeForm.vue | 8 +-- .../vue/basic/components/SocialNameInput.vue | 4 +- .../vue/basic/components/VueFormPage.vue | 20 ++++--- docs/.vitepress/showcases/vue/vuetify.ts | 12 ++++ .../showcases/vue/vuetify/components/Form.vue | 6 +- .../vue/vuetify/pages/VuetifyFormPage.vue | 2 +- docs/.vitepress/theme/custom.css | 12 ++++ docs/.vitepress/utils/getToken.ts | 4 ++ .../components/DefaultFormSectionTitle.tsx | 20 +++++-- .../components/DefaultInputAutocomplete.tsx | 2 +- .../react/src/components/DefaultInputDate.tsx | 2 +- .../src/components/DefaultInputNumber.tsx | 2 +- .../src/components/DefaultInputPhone.tsx | 2 +- .../src/components/DefaultInputSelect.tsx | 2 +- .../react/src/components/DefaultInputText.tsx | 2 +- .../src/components/DefaultInputTextarea.tsx | 2 +- .../src/components/DefaultSubmitButton.tsx | 4 +- packages/factories/react/src/form-factory.tsx | 11 ++-- .../factories/react/src/schepta-tokens.ts | 53 +++++++++++++++++ .../src/components/DefaultSubmitButton.ts | 4 +- .../src/components/FormSectionContainer.ts | 4 +- .../src/components/FormSectionTitle.ts | 2 +- .../src/components/InputAutocomplete.ts | 2 +- .../vanilla/src/components/InputDate.ts | 2 +- .../vanilla/src/components/InputNumber.ts | 2 +- .../vanilla/src/components/InputPhone.ts | 2 +- .../vanilla/src/components/InputSelect.ts | 2 +- .../vanilla/src/components/InputText.ts | 2 +- .../vanilla/src/components/InputTextarea.ts | 2 +- .../factories/vanilla/src/form-factory.ts | 9 ++- .../factories/vanilla/src/schepta-tokens.ts | 53 +++++++++++++++++ .../src/components/DefaultFormSectionTitle.ts | 2 +- .../components/DefaultInputAutocomplete.ts | 2 +- .../vue/src/components/DefaultInputDate.ts | 2 +- .../vue/src/components/DefaultInputNumber.ts | 2 +- .../vue/src/components/DefaultInputPhone.ts | 2 +- .../vue/src/components/DefaultInputSelect.ts | 2 +- .../vue/src/components/DefaultInputText.ts | 2 +- .../src/components/DefaultInputTextarea.ts | 2 +- .../vue/src/components/DefaultSubmitButton.ts | 4 +- packages/factories/vue/src/form-factory.ts | 11 ++-- packages/factories/vue/src/schepta-tokens.ts | 53 +++++++++++++++++ 64 files changed, 528 insertions(+), 189 deletions(-) create mode 100644 docs/.vitepress/utils/getToken.ts create mode 100644 packages/factories/react/src/schepta-tokens.ts create mode 100644 packages/factories/vanilla/src/schepta-tokens.ts create mode 100644 packages/factories/vue/src/schepta-tokens.ts diff --git a/docs/.vitepress/showcases/react/ReactShowcase.tsx b/docs/.vitepress/showcases/react/ReactShowcase.tsx index 84fe82b..295c8d6 100644 --- a/docs/.vitepress/showcases/react/ReactShowcase.tsx +++ b/docs/.vitepress/showcases/react/ReactShowcase.tsx @@ -1,29 +1,51 @@ -import React from 'react'; -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 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'; + variant?: "basic" | "material-ui" | "chakra-ui"; + isDark?: boolean; } -export function ReactShowcase({ variant = 'basic' }: ReactShowcaseProps) { - const components = { - basic: BasicFormPage, - 'material-ui': MaterialFormPage, - 'chakra-ui': ChakraFormPage, +export function ReactShowcase({ + variant = "basic", + isDark = false, +}: ReactShowcaseProps) { + const labelMiddleware = (props: any) => { + if (props.label) { + return { ...props, label: `[Provider] ${props.label}` }; + } + return props; }; - const Component = components[variant]; + const content = (() => { + switch (variant) { + case "chakra-ui": + return ; + case "material-ui": + return ; + default: + return ; + } + })(); return ( - -
- -
+ + {content} ); } diff --git a/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue b/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue index 6773589..aa881fb 100644 --- a/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue +++ b/docs/.vitepress/showcases/react/ReactShowcaseWrapper.vue @@ -1,9 +1,10 @@