diff --git a/.github/workflows/deploy-showcases.yml b/.github/workflows/deploy-showcases.yml new file mode 100644 index 0000000..adb6678 --- /dev/null +++ b/.github/workflows/deploy-showcases.yml @@ -0,0 +1,74 @@ +name: Deploy Showcases + +on: + push: + branches: [main] + paths: + - 'showcases/**' + - '.github/workflows/deploy-showcases.yml' + - 'package.json' + - 'pnpm-lock.yaml' + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: showcases-pages + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 8 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 18 + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Build showcase packages + run: pnpm build --filter='./packages/*' + + - name: Build React showcase + run: pnpm --filter showcases-react build + + - name: Create showcase directory + run: | + mkdir -p showcase-dist + + # Copy React showcase directly as root + cp -r showcases/react/dist/* showcase-dist/ + + # Create CNAME for custom domain + echo "show.schepta.org" > showcase-dist/CNAME + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: showcase-dist + + deploy: + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages (Showcases) + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: showcase-dist + publish_branch: gh-pages-showcases + cname: show.schepta.org \ No newline at end of file diff --git a/README.md b/README.md index f81d500..6c51e32 100644 --- a/README.md +++ b/README.md @@ -12,25 +12,14 @@ Framework-agnostic rendering engine for server-driven UI. Build dynamic forms an - ⚡ **Reactive System**: Handle declarative and imperative reactions - 🧩 **Type Safe**: Full TypeScript support -## Examples +## Showcases ### React (Vanilla) ```bash -pnpm --filter examples-react dev +pnpm --filter showcases-react dev # http://localhost:3000 ``` -### React with Material UI -```bash -pnpm --filter examples-react-material-ui dev -# http://localhost:3001 -``` - -### React with Chakra UI -```bash -pnpm --filter examples-react-chakra-ui dev -# http://localhost:3002 -``` ## Running Tests @@ -52,10 +41,10 @@ schepta/ │ ├── core/ # Framework-agnostic core logic │ ├── adapters/ # Framework adapters (react, vue, vanilla) │ └── factories/ # Framework factories (react, vue, vanilla) -├── examples/ # Example applications -│ ├── react/ # React vanilla example -│ ├── react-material-ui/ # React with Material UI -│ └── react-chakra-ui/ # React with Chakra UI +├── showcases/ # Showcase applications +│ ├── react/ # React showcase +│ ├── vue/ # Vue showcase +│ └── vue-vuetify/ # Vue with Vuetify showcase └── tests/ # E2E tests with Playwright ``` diff --git a/docs/en-US/index.md b/docs/en-US/index.md index ed60e90..08c9271 100644 --- a/docs/en-US/index.md +++ b/docs/en-US/index.md @@ -48,7 +48,7 @@ concepts: description: Transforming props and behavior - title: Debug System description: Development tools -examples: +showcases: title: Examples description: Examples of how to use schepta items: diff --git a/docs/es-ES/index.md b/docs/es-ES/index.md index 75a0da1..023d71a 100644 --- a/docs/es-ES/index.md +++ b/docs/es-ES/index.md @@ -55,24 +55,24 @@ concepts: - title: Debug System link: /concepts/07-debug-system description: Herramientas de desarrollo -examples: +showcases: title: Ejemplos description: Ve schepta en acción con ejemplos interactivos items: - title: Ejemplos React - link: /examples/react + link: /showcases/react description: React con react-hook-form - title: React Material UI - link: /examples/material-ui + link: /showcases/material-ui description: React con Material UI - title: React Chakra UI - link: /examples/chakra-ui + link: /showcases/chakra-ui description: React con Chakra UI - title: Ejemplos Vue - link: /examples/vue + link: /showcases/vue description: Vue con adaptador de formulario personalizado - title: Vue Vuetify - link: /examples/vuetify + link: /showcases/vuetify description: Vue con Vuetify Material Design --- diff --git a/docs/pt-BR/index.md b/docs/pt-BR/index.md index ea2997b..9050584 100644 --- a/docs/pt-BR/index.md +++ b/docs/pt-BR/index.md @@ -55,24 +55,24 @@ concepts: - title: Debug System link: /concepts/07-debug-system description: Ferramentas de desenvolvimento -examples: +showcases: title: Exemplos description: Veja o schepta em ação com exemplos interativos items: - title: Exemplos React - link: /examples/react + link: /showcases/react description: React com react-hook-form - title: React Material UI - link: /examples/material-ui + link: /showcases/material-ui description: React com Material UI - title: React Chakra UI - link: /examples/chakra-ui + link: /showcases/chakra-ui description: React com Chakra UI - title: Exemplos Vue - link: /examples/vue + link: /showcases/vue description: Vue com adaptador de formulário customizado - title: Vue Vuetify - link: /examples/vuetify + link: /showcases/vuetify description: Vue com Vuetify Material Design --- diff --git a/docs/vercel.json b/docs/vercel.json new file mode 100644 index 0000000..40256b2 --- /dev/null +++ b/docs/vercel.json @@ -0,0 +1,6 @@ +{ + "buildCommand": "cd .. && pnpm install && pnpm docs:build", + "outputDirectory": ".vitepress/dist", + "framework": "vite", + "installCommand": "cd .. && pnpm install" +} \ No newline at end of file diff --git a/examples/react/index.html b/examples/react/index.html deleted file mode 100644 index 1918fbc..0000000 --- a/examples/react/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - schepta React Example - - -
- - - - diff --git a/examples/vue-vuetify/index.html b/examples/vue-vuetify/index.html deleted file mode 100644 index b248edb..0000000 --- a/examples/vue-vuetify/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - schepta - Vue Vuetify Example - - -
- - - - diff --git a/examples/vue-vuetify/package.json b/examples/vue-vuetify/package.json deleted file mode 100644 index 5401291..0000000 --- a/examples/vue-vuetify/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "examples-vue-vuetify", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@schepta/core": "workspace:*", - "@schepta/adapter-vue": "workspace:*", - "@schepta/factory-vue": "workspace:*", - "vue": "^3.4.0", - "vue-router": "^4.2.5", - "vuetify": "^3.5.0", - "@mdi/font": "^7.4.47" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^5.0.0", - "vite-plugin-vuetify": "^2.0.1", - "typescript": "^5.3.3", - "vite": "^5.0.8" - } -} - diff --git a/examples/vue-vuetify/src/App.vue b/examples/vue-vuetify/src/App.vue deleted file mode 100644 index fc7d5dd..0000000 --- a/examples/vue-vuetify/src/App.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - diff --git a/examples/vue-vuetify/src/components/InputComponents.ts b/examples/vue-vuetify/src/components/InputComponents.ts deleted file mode 100644 index ddc0b11..0000000 --- a/examples/vue-vuetify/src/components/InputComponents.ts +++ /dev/null @@ -1,398 +0,0 @@ -import { defineComponent, h } from 'vue'; -import { createComponentSpec } from '@schepta/core'; -import { - VTextField, - VSelect, - VCheckbox, - VTextarea, - VBtn, - VContainer, - VRow, - VCol, -} from 'vuetify/components'; - -// Input Text Component using Vuetify -export const InputText = defineComponent({ - name: 'InputText', - props: { - label: String, - name: String, - value: [String, Number], - placeholder: String, - modelValue: [String, Number], - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextField, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Select Component using Vuetify -export const InputSelect = defineComponent({ - name: 'InputSelect', - props: { - label: String, - name: String, - value: String, - placeholder: String, - options: Array, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const items = (props.options as any[]) || []; - - return () => h(VSelect, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - items: items.map((opt: any) => ({ title: opt.label, value: opt.value })), - placeholder: props.placeholder, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Checkbox Component using Vuetify -export const InputCheckbox = defineComponent({ - name: 'InputCheckbox', - props: { - label: String, - name: String, - checked: Boolean, - modelValue: Boolean, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VCheckbox, { - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.checked || false), - label: props.label, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - }); - } -}); - -// Input Textarea Component using Vuetify -export const InputTextarea = defineComponent({ - name: 'InputTextarea', - props: { - label: String, - name: String, - value: String, - placeholder: String, - rows: Number, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextarea, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - rows: props.rows || 4, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Number Component using Vuetify -export const InputNumber = defineComponent({ - name: 'InputNumber', - props: { - label: String, - name: String, - value: Number, - placeholder: String, - min: Number, - max: Number, - step: Number, - modelValue: Number, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextField, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - type: 'number', - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - min: props.min, - max: props.max, - step: props.step, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value ? Number(value) : ''); - if (props.onChange) { - props.onChange(value ? Number(value) : ''); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Date Component using Vuetify -export const InputDate = defineComponent({ - name: 'InputDate', - props: { - label: String, - name: String, - value: String, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextField, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - type: 'date', - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Phone Component -export const InputPhone = defineComponent({ - name: 'InputPhone', - setup(props: any, { emit }) { - return () => h(InputText, { ...props, type: 'tel' }); - } -}); - -// Container Components -export const FormField = defineComponent({ - name: 'FormField', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionContainer = defineComponent({ - name: 'FormSectionContainer', - setup(props, { slots }) { - return () => h('div', { ...props, style: { marginBottom: '24px', ...props.style } }, slots.default?.()); - } -}); - -export const FormSectionTitle = defineComponent({ - name: 'FormSectionTitle', - props: { - 'x-content': String, - }, - setup(props, { slots }) { - return () => h('h2', { - class: 'text-h5 mb-4', - style: { fontWeight: '600' } - }, props['x-content'] || slots.default?.()); - } -}); - -export const FormSectionGroupContainer = defineComponent({ - name: 'FormSectionGroupContainer', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionGroup = defineComponent({ - name: 'FormSectionGroup', - props: { - 'x-component-props': Object, - columns: String, - children: Array, - }, - setup(props, { slots }) { - const columns = props.columns || (props['x-component-props'] as any)?.columns || '1fr 1fr'; - const gridColumns = columns === '1fr' ? 12 : 6; - - return () => { - // Get children from props or slots - const children = props.children || slots.default?.(); - - // VRow and VCol need children as function for slots - return h(VRow, { - props: { dense: false } - }, () => - (Array.isArray(children) ? children : [children]).map((child: any, index: number) => - h(VCol, { key: index, cols: 12, sm: gridColumns }, () => [child]) - ) - ); - }; - } -}); - -export const FormContainer = defineComponent({ - name: 'FormContainer', - props: { - externalContext: Object, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - return () => h('form', { - onSubmit: (e: Event) => { - e.preventDefault(); - if (onSubmit) { - onSubmit(); - } - } - }, slots.default?.()); - } -}); - -export const SubmitButton = defineComponent({ - name: 'SubmitButton', - props: { - 'x-content': String, - externalContext: Object, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - const handleClick = () => { - if (onSubmit) { - onSubmit(); - } - }; - - return () => h('div', { - class: 'mt-6 d-flex justify-end' - }, [ - h(VBtn, { - color: 'primary', - size: 'large', - onClick: handleClick, - }, () => props['x-content'] || slots.default?.() || 'Submit') - ]); - } -}); - -// Create component specs -export const components = { - 'FormContainer': createComponentSpec({ - id: 'FormContainer', - type: 'FormContainer', - factory: () => FormContainer, - }), - InputText: createComponentSpec({ - id: 'InputText', - type: 'field', - factory: () => InputText, - }), - InputSelect: createComponentSpec({ - id: 'InputSelect', - type: 'field', - factory: () => InputSelect, - }), - InputCheckbox: createComponentSpec({ - id: 'InputCheckbox', - type: 'field', - factory: () => InputCheckbox, - }), - InputPhone: createComponentSpec({ - id: 'InputPhone', - type: 'field', - factory: () => InputPhone, - }), - InputTextarea: createComponentSpec({ - id: 'InputTextarea', - type: 'field', - factory: () => InputTextarea, - }), - InputNumber: createComponentSpec({ - id: 'InputNumber', - type: 'field', - factory: () => InputNumber, - }), - InputDate: createComponentSpec({ - id: 'InputDate', - type: 'field', - factory: () => InputDate, - }), - SubmitButton: createComponentSpec({ - id: 'SubmitButton', - type: 'content', - factory: () => SubmitButton, - }), - FormField: createComponentSpec({ - id: 'FormField', - type: 'container', - factory: () => FormField, - }), - FormSectionContainer: createComponentSpec({ - id: 'FormSectionContainer', - type: 'container', - factory: () => FormSectionContainer, - }), - FormSectionTitle: createComponentSpec({ - id: 'FormSectionTitle', - type: 'content', - factory: () => FormSectionTitle, - }), - FormSectionGroupContainer: createComponentSpec({ - id: 'FormSectionGroupContainer', - type: 'container', - factory: () => FormSectionGroupContainer, - }), - FormSectionGroup: createComponentSpec({ - id: 'FormSectionGroup', - type: 'container', - factory: () => FormSectionGroup, - }), -}; - diff --git a/examples/vue-vuetify/src/main.ts b/examples/vue-vuetify/src/main.ts deleted file mode 100644 index b8b9967..0000000 --- a/examples/vue-vuetify/src/main.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { createApp } from 'vue'; -import { createRouter, createWebHistory } from 'vue-router'; -import { createVuetify } from 'vuetify'; -import * as components from 'vuetify/components'; -import * as directives from 'vuetify/directives'; -import 'vuetify/styles'; -import '@mdi/font/css/materialdesignicons.css'; -import App from './App.vue'; -import SimpleForm from './pages/SimpleForm.vue'; -import ComplexForm from './pages/ComplexForm.vue'; - -const routes = [ - { path: '/', component: SimpleForm }, - { path: '/complex', component: ComplexForm }, -]; - -const router = createRouter({ - history: createWebHistory(), - routes, -}); - -const vuetify = createVuetify({ - components, - directives, -}); - -const app = createApp(App); -app.use(router); -app.use(vuetify); -app.mount('#root'); - diff --git a/examples/vue-vuetify/src/pages/ComplexForm.vue b/examples/vue-vuetify/src/pages/ComplexForm.vue deleted file mode 100644 index bc9a89a..0000000 --- a/examples/vue-vuetify/src/pages/ComplexForm.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - - diff --git a/examples/vue-vuetify/src/pages/SimpleForm.vue b/examples/vue-vuetify/src/pages/SimpleForm.vue deleted file mode 100644 index 585944d..0000000 --- a/examples/vue-vuetify/src/pages/SimpleForm.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - - diff --git a/examples/vue-vuetify/tsconfig.json b/examples/vue-vuetify/tsconfig.json deleted file mode 100644 index 39c69f6..0000000 --- a/examples/vue-vuetify/tsconfig.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./dist", - "rootDir": "./src", - "jsx": "preserve" - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] -} - diff --git a/examples/vue-vuetify/vite.config.ts b/examples/vue-vuetify/vite.config.ts deleted file mode 100644 index 37fdec6..0000000 --- a/examples/vue-vuetify/vite.config.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { defineConfig } from 'vite'; -import vue from '@vitejs/plugin-vue'; -import vuetify from 'vite-plugin-vuetify'; - -export default defineConfig({ - plugins: [ - vue(), - vuetify({ autoImport: true }), - ], - server: { - port: 3011, - }, -}); - diff --git a/examples/vue/index.html b/examples/vue/index.html deleted file mode 100644 index 4095262..0000000 --- a/examples/vue/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - schepta - Vue Example - - -
- - - - diff --git a/examples/vue/package.json b/examples/vue/package.json deleted file mode 100644 index b3ba2f7..0000000 --- a/examples/vue/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "examples-vue", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@schepta/core": "workspace:*", - "@schepta/adapter-vue": "workspace:*", - "@schepta/factory-vue": "workspace:*", - "vue": "^3.4.0", - "vue-router": "^4.2.5" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^5.0.0", - "typescript": "^5.3.3", - "vite": "^5.0.8" - } -} - diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue deleted file mode 100644 index 0efacd1..0000000 --- a/examples/vue/src/App.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - - diff --git a/examples/vue/src/components/InputComponents.ts b/examples/vue/src/components/InputComponents.ts deleted file mode 100644 index 8ad7031..0000000 --- a/examples/vue/src/components/InputComponents.ts +++ /dev/null @@ -1,449 +0,0 @@ -import { defineComponent, h } from 'vue'; -import { createComponentSpec } from '@schepta/core'; - -// Input Text Component -export const InputText = defineComponent({ - name: 'InputText', - props: { - label: String, - name: String, - value: [String, Number], - placeholder: String, - modelValue: [String, Number], - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleInput = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('input', { - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - onInput: handleInput, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }) - ]); - } -}); - -// Input Select Component -export const InputSelect = defineComponent({ - name: 'InputSelect', - props: { - label: String, - name: String, - value: String, - placeholder: String, - options: Array, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleChange = (e: Event) => { - const target = e.target as HTMLSelectElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('select', { - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - onChange: handleChange, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }, [ - h('option', { value: '' }, props.placeholder || 'Select...'), - ...((props.options as any[]) || []).map((opt: any) => - h('option', { key: opt.value, value: opt.value }, opt.label) - ) - ]) - ]); - } -}); - -// Input Checkbox Component -export const InputCheckbox = defineComponent({ - name: 'InputCheckbox', - props: { - label: String, - name: String, - checked: Boolean, - modelValue: Boolean, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleChange = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.checked; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - h('label', { - style: { display: 'flex', alignItems: 'center', gap: '8px' } - }, [ - h('input', { - type: 'checkbox', - name: props.name, - 'data-test-id': props.name, - checked: props.modelValue !== undefined ? props.modelValue : (props.checked || false), - onChange: handleChange - }), - props.label - ]) - ]); - } -}); - -// Input Textarea Component -export const InputTextarea = defineComponent({ - name: 'InputTextarea', - props: { - label: String, - name: String, - value: String, - placeholder: String, - rows: Number, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleInput = (e: Event) => { - const target = e.target as HTMLTextAreaElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('textarea', { - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - rows: props.rows || 4, - onInput: handleInput, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px', fontFamily: 'inherit' } - }) - ]); - } -}); - -// Input Number Component -export const InputNumber = defineComponent({ - name: 'InputNumber', - props: { - label: String, - name: String, - value: Number, - placeholder: String, - min: Number, - max: Number, - step: Number, - modelValue: Number, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleInput = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.value ? Number(target.value) : ''; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('input', { - type: 'number', - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - min: props.min, - max: props.max, - step: props.step, - onInput: handleInput, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }) - ]); - } -}); - -// Input Date Component -export const InputDate = defineComponent({ - name: 'InputDate', - props: { - label: String, - name: String, - value: String, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleChange = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('input', { - type: 'date', - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - onChange: handleChange, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }) - ]); - } -}); - -// Input Phone Component -export const InputPhone = defineComponent({ - name: 'InputPhone', - setup(props: any, { emit }) { - return () => h(InputText, { ...props, type: 'tel' }); - } -}); - -// Container Components -export const FormField = defineComponent({ - name: 'FormField', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionContainer = defineComponent({ - name: 'FormSectionContainer', - setup(props, { slots }) { - return () => h('div', { ...props, style: { marginBottom: '24px', ...props.style } }, slots.default?.()); - } -}); - -export const FormSectionTitle = defineComponent({ - name: 'FormSectionTitle', - props: { - 'x-content': String, - }, - setup(props, { slots }) { - return () => h('h2', { - style: { marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333' } - }, props['x-content'] || slots.default?.()); - } -}); - -export const FormSectionGroupContainer = defineComponent({ - name: 'FormSectionGroupContainer', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionGroup = defineComponent({ - name: 'FormSectionGroup', - props: { - 'x-component-props': Object, - columns: String, - }, - setup(props, { slots }) { - // Get columns from x-component-props or direct prop - const columns = props.columns || (props['x-component-props'] as any)?.columns || '1fr 1fr'; - return () => h('div', { - style: { - display: 'grid', - gridTemplateColumns: columns, - gap: '16px' - } - }, slots.default?.()); - } -}); - -export const FormContainer = defineComponent({ - name: 'FormContainer', - props: { - externalContext: Object, - children: Array, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - return () => { - // Use children prop if provided, otherwise use slots - const children = props.children || slots.default?.(); - - return h('form', { - onSubmit: (e: Event) => { - e.preventDefault(); - if (onSubmit) { - onSubmit(); - } - } - }, children); - }; - } -}); - -export const SubmitButton = defineComponent({ - name: 'SubmitButton', - props: { - 'x-content': String, - externalContext: Object, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - const handleClick = () => { - if (onSubmit) { - onSubmit(); - } - }; - - return () => h('div', { - style: { marginTop: '24px', textAlign: 'right' } - }, [ - h('button', { - type: 'button', - onClick: handleClick, - style: { - padding: '12px 24px', - backgroundColor: '#007bff', - color: 'white', - border: 'none', - borderRadius: '4px', - cursor: 'pointer', - fontSize: '16px', - fontWeight: '500', - } - }, props['x-content'] || slots.default?.() || 'Submit') - ]); - } -}); - -// Create component specs -export const components = { - 'FormContainer': createComponentSpec({ - id: 'FormContainer', - type: 'FormContainer', - factory: () => FormContainer, - }), - InputText: createComponentSpec({ - id: 'InputText', - type: 'field', - factory: () => InputText, - }), - InputSelect: createComponentSpec({ - id: 'InputSelect', - type: 'field', - factory: () => InputSelect, - }), - InputCheckbox: createComponentSpec({ - id: 'InputCheckbox', - type: 'field', - factory: () => InputCheckbox, - }), - InputPhone: createComponentSpec({ - id: 'InputPhone', - type: 'field', - factory: () => InputPhone, - }), - InputTextarea: createComponentSpec({ - id: 'InputTextarea', - type: 'field', - factory: () => InputTextarea, - }), - InputNumber: createComponentSpec({ - id: 'InputNumber', - type: 'field', - factory: () => InputNumber, - }), - InputDate: createComponentSpec({ - id: 'InputDate', - type: 'field', - factory: () => InputDate, - }), - SubmitButton: createComponentSpec({ - id: 'SubmitButton', - type: 'content', - factory: () => SubmitButton, - }), - FormField: createComponentSpec({ - id: 'FormField', - type: 'container', - factory: () => FormField, - }), - FormSectionContainer: createComponentSpec({ - id: 'FormSectionContainer', - type: 'container', - factory: () => FormSectionContainer, - }), - FormSectionTitle: createComponentSpec({ - id: 'FormSectionTitle', - type: 'content', - factory: () => FormSectionTitle, - }), - FormSectionGroupContainer: createComponentSpec({ - id: 'FormSectionGroupContainer', - type: 'container', - factory: () => FormSectionGroupContainer, - }), - FormSectionGroup: createComponentSpec({ - id: 'FormSectionGroup', - type: 'container', - factory: () => FormSectionGroup, - }), -}; diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts deleted file mode 100644 index b3c3aa2..0000000 --- a/examples/vue/src/main.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createApp } from 'vue'; -import { createRouter, createWebHistory } from 'vue-router'; -import App from './App.vue'; -import SimpleForm from './pages/SimpleForm.vue'; -import ComplexForm from './pages/ComplexForm.vue'; - -const routes = [ - { path: '/', component: SimpleForm }, - { path: '/complex', component: ComplexForm }, -]; - -const router = createRouter({ - history: createWebHistory(), - routes, -}); - -const app = createApp(App); -app.use(router); -app.mount('#root'); - diff --git a/examples/vue/src/pages/ComplexForm.vue b/examples/vue/src/pages/ComplexForm.vue deleted file mode 100644 index 95bb268..0000000 --- a/examples/vue/src/pages/ComplexForm.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - diff --git a/examples/vue/src/pages/SimpleForm.vue b/examples/vue/src/pages/SimpleForm.vue deleted file mode 100644 index 14d60b9..0000000 --- a/examples/vue/src/pages/SimpleForm.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json deleted file mode 100644 index 39c69f6..0000000 --- a/examples/vue/tsconfig.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./dist", - "rootDir": "./src", - "jsx": "preserve" - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] -} - diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts deleted file mode 100644 index 7e4699e..0000000 --- a/examples/vue/vite.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { defineConfig } from 'vite'; -import vue from '@vitejs/plugin-vue'; - -export default defineConfig({ - plugins: [vue()], - server: { - port: 3010, - }, -}); - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ebfc10..2a1f6ff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -94,135 +94,6 @@ importers: 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) - examples/react: - 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.1 - 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) - '@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/core': - specifier: workspace:* - version: link:../../packages/core - '@schepta/factory-react': - specifier: workspace:* - version: link:../../packages/factories/react - 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) - react: - specifier: ^18.2.0 - version: 18.3.1 - react-dom: - specifier: ^18.2.0 - version: 18.3.1(react@18.3.1) - react-hook-form: - specifier: ^7.52.2 - version: 7.68.0(react@18.3.1) - react-icons: - specifier: ^5.5.0 - version: 5.5.0(react@18.3.1) - react-router-dom: - specifier: ^6.21.0 - version: 6.30.2(react-dom@18.3.1)(react@18.3.1) - devDependencies: - '@types/react': - specifier: ^18.2.47 - version: 18.3.27 - '@types/react-dom': - specifier: ^18.2.18 - version: 18.3.7(@types/react@18.3.27) - '@vitejs/plugin-react': - specifier: ^4.2.1 - version: 4.7.0(vite@5.4.21) - typescript: - specifier: ^5.3.3 - version: 5.9.3 - vite: - specifier: ^5.0.8 - version: 5.4.21 - - examples/vue: - dependencies: - '@schepta/adapter-vue': - specifier: workspace:* - version: link:../../packages/adapters/vue - '@schepta/core': - specifier: workspace:* - version: link:../../packages/core - '@schepta/factory-vue': - specifier: workspace:* - version: link:../../packages/factories/vue - vue: - specifier: ^3.4.0 - version: 3.5.25(typescript@5.9.3) - vue-router: - specifier: ^4.2.5 - version: 4.6.3(vue@3.5.25) - devDependencies: - '@vitejs/plugin-vue': - specifier: ^5.0.0 - version: 5.2.4(vite@5.4.21)(vue@3.5.25) - typescript: - specifier: ^5.3.3 - version: 5.9.3 - vite: - specifier: ^5.0.8 - version: 5.4.21(@types/node@20.19.25) - - examples/vue-vuetify: - dependencies: - '@mdi/font': - specifier: ^7.4.47 - version: 7.4.47 - '@schepta/adapter-vue': - specifier: workspace:* - version: link:../../packages/adapters/vue - '@schepta/core': - specifier: workspace:* - version: link:../../packages/core - '@schepta/factory-vue': - specifier: workspace:* - version: link:../../packages/factories/vue - vue: - specifier: ^3.4.0 - version: 3.5.25(typescript@5.9.3) - vue-router: - specifier: ^4.2.5 - version: 4.6.3(vue@3.5.25) - vuetify: - specifier: ^3.5.0 - version: 3.11.2(typescript@5.9.3)(vite-plugin-vuetify@2.1.2)(vue@3.5.25) - devDependencies: - '@vitejs/plugin-vue': - specifier: ^5.0.0 - version: 5.2.4(vite@5.4.21)(vue@3.5.25) - typescript: - specifier: ^5.3.3 - version: 5.9.3 - vite: - specifier: ^5.0.8 - version: 5.4.21(@types/node@20.19.25) - vite-plugin-vuetify: - specifier: ^2.0.1 - version: 2.1.2(vite@5.4.21)(vue@3.5.25)(vuetify@3.11.2) - packages/adapters/react: dependencies: '@schepta/core': @@ -416,6 +287,70 @@ importers: specifier: ^3.4.0 version: 3.5.25(typescript@5.9.3) + showcases/react: + 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.1 + 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) + '@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/core': + specifier: workspace:* + version: link:../../packages/core + '@schepta/factory-react': + specifier: workspace:* + version: link:../../packages/factories/react + 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) + react: + specifier: ^18.2.0 + version: 18.3.1 + react-dom: + specifier: ^18.2.0 + version: 18.3.1(react@18.3.1) + react-hook-form: + specifier: ^7.52.2 + version: 7.68.0(react@18.3.1) + react-icons: + specifier: ^5.5.0 + version: 5.5.0(react@18.3.1) + react-router-dom: + specifier: ^6.21.0 + version: 6.30.2(react-dom@18.3.1)(react@18.3.1) + devDependencies: + '@types/react': + specifier: ^18.2.47 + version: 18.3.27 + '@types/react-dom': + specifier: ^18.2.18 + version: 18.3.7(@types/react@18.3.27) + '@vitejs/plugin-react': + specifier: ^4.2.1 + version: 4.7.0(vite@5.4.21) + typescript: + specifier: ^5.3.3 + version: 5.9.3 + vite: + specifier: ^5.0.8 + version: 5.4.21(@types/node@20.19.25) + tests: devDependencies: '@playwright/test': @@ -2208,7 +2143,7 @@ packages: '@rolldown/pluginutils': 1.0.0-beta.27 '@types/babel__core': 7.20.5 react-refresh: 0.17.0 - vite: 5.4.21 + vite: 5.4.21(@types/node@20.19.25) transitivePeerDependencies: - supports-color dev: true @@ -5500,44 +5435,6 @@ packages: transitivePeerDependencies: - supports-color - /vite@5.4.21: - resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==} - engines: {node: ^18.0.0 || >=20.0.0} - hasBin: true - peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 - less: '*' - lightningcss: ^1.21.0 - sass: '*' - sass-embedded: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - sass-embedded: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - esbuild: 0.21.5 - postcss: 8.5.6 - rollup: 4.53.3 - optionalDependencies: - fsevents: 2.3.3 - dev: true - /vite@5.4.21(@types/node@20.19.25): resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==} engines: {node: ^18.0.0 || >=20.0.0} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 31b1e76..e34b522 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,6 +1,6 @@ packages: - 'packages/**' - - 'examples/**' + - 'showcases/**' - 'tests' - 'docs' diff --git a/showcases/react/index.html b/showcases/react/index.html new file mode 100644 index 0000000..97fad29 --- /dev/null +++ b/showcases/react/index.html @@ -0,0 +1,18 @@ + + + + + + Schepta React Showcases + + + + + + + +
+ + + + diff --git a/examples/react/package.json b/showcases/react/package.json similarity index 96% rename from examples/react/package.json rename to showcases/react/package.json index c48eff8..26e929e 100644 --- a/examples/react/package.json +++ b/showcases/react/package.json @@ -1,5 +1,5 @@ { - "name": "examples-react", + "name": "showcases-react", "version": "0.1.0", "private": true, "scripts": { diff --git a/examples/react/src/App.tsx b/showcases/react/src/App.tsx similarity index 93% rename from examples/react/src/App.tsx rename to showcases/react/src/App.tsx index b5ba75a..fe03ef7 100644 --- a/examples/react/src/App.tsx +++ b/showcases/react/src/App.tsx @@ -24,9 +24,9 @@ import { ScheptaProvider } from "@schepta/adapter-react"; import { components } from "./basic-ui/components/ComponentRegistry"; const navigationItems = [ - { path: "/basic", label: "Basic Examples", icon: }, - { path: "/chakra-ui", label: "Chakra UI Examples", icon: }, - { path: "/material-ui", label: "Material UI Examples", icon: }, + { path: "/basic", label: "Basic Showcase", icon: }, + { path: "/chakra-ui", label: "Chakra UI Showcase", icon: }, + { path: "/material-ui", label: "Material UI Showcase", icon: }, ]; function Header() { @@ -49,7 +49,7 @@ function Header() { fontWeight: 700, }} > - Schepta React Examples + Schepta React Showcases diff --git a/examples/react/src/ExpressionExample.tsx b/showcases/react/src/ExpressionExample.tsx similarity index 100% rename from examples/react/src/ExpressionExample.tsx rename to showcases/react/src/ExpressionExample.tsx diff --git a/examples/react/src/basic-ui/components/ComponentRegistry.tsx b/showcases/react/src/basic-ui/components/ComponentRegistry.tsx similarity index 100% rename from examples/react/src/basic-ui/components/ComponentRegistry.tsx rename to showcases/react/src/basic-ui/components/ComponentRegistry.tsx diff --git a/examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx b/showcases/react/src/basic-ui/components/Forms/FormWithFormik.tsx similarity index 100% rename from examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx rename to showcases/react/src/basic-ui/components/Forms/FormWithFormik.tsx diff --git a/examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx b/showcases/react/src/basic-ui/components/Forms/FormWithRHF.tsx similarity index 100% rename from examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx rename to showcases/react/src/basic-ui/components/Forms/FormWithRHF.tsx diff --git a/examples/react/src/basic-ui/components/Forms/ModalForm.tsx b/showcases/react/src/basic-ui/components/Forms/ModalForm.tsx similarity index 100% rename from examples/react/src/basic-ui/components/Forms/ModalForm.tsx rename to showcases/react/src/basic-ui/components/Forms/ModalForm.tsx diff --git a/examples/react/src/basic-ui/components/Forms/NativeComplexForm.tsx b/showcases/react/src/basic-ui/components/Forms/NativeComplexForm.tsx similarity index 100% rename from examples/react/src/basic-ui/components/Forms/NativeComplexForm.tsx rename to showcases/react/src/basic-ui/components/Forms/NativeComplexForm.tsx diff --git a/examples/react/src/basic-ui/components/Forms/NativeForm.tsx b/showcases/react/src/basic-ui/components/Forms/NativeForm.tsx similarity index 100% rename from examples/react/src/basic-ui/components/Forms/NativeForm.tsx rename to showcases/react/src/basic-ui/components/Forms/NativeForm.tsx diff --git a/examples/react/src/basic-ui/components/Inputs/InputText.tsx b/showcases/react/src/basic-ui/components/Inputs/InputText.tsx similarity index 100% rename from examples/react/src/basic-ui/components/Inputs/InputText.tsx rename to showcases/react/src/basic-ui/components/Inputs/InputText.tsx diff --git a/examples/react/src/basic-ui/components/formik/FormikFieldWrapper.tsx b/showcases/react/src/basic-ui/components/formik/FormikFieldWrapper.tsx similarity index 100% rename from examples/react/src/basic-ui/components/formik/FormikFieldWrapper.tsx rename to showcases/react/src/basic-ui/components/formik/FormikFieldWrapper.tsx diff --git a/examples/react/src/basic-ui/components/formik/FormikFormContainer.tsx b/showcases/react/src/basic-ui/components/formik/FormikFormContainer.tsx similarity index 100% rename from examples/react/src/basic-ui/components/formik/FormikFormContainer.tsx rename to showcases/react/src/basic-ui/components/formik/FormikFormContainer.tsx diff --git a/examples/react/src/basic-ui/components/rhf/RHFFieldWrapper.tsx b/showcases/react/src/basic-ui/components/rhf/RHFFieldWrapper.tsx similarity index 100% rename from examples/react/src/basic-ui/components/rhf/RHFFieldWrapper.tsx rename to showcases/react/src/basic-ui/components/rhf/RHFFieldWrapper.tsx diff --git a/examples/react/src/basic-ui/components/rhf/RHFFormContainer.tsx b/showcases/react/src/basic-ui/components/rhf/RHFFormContainer.tsx similarity index 100% rename from examples/react/src/basic-ui/components/rhf/RHFFormContainer.tsx rename to showcases/react/src/basic-ui/components/rhf/RHFFormContainer.tsx diff --git a/examples/react/src/basic-ui/pages/BasicFormPage.tsx b/showcases/react/src/basic-ui/pages/BasicFormPage.tsx similarity index 100% rename from examples/react/src/basic-ui/pages/BasicFormPage.tsx rename to showcases/react/src/basic-ui/pages/BasicFormPage.tsx diff --git a/examples/react/src/chakra-ui/components/ComponentRegistry.tsx b/showcases/react/src/chakra-ui/components/ComponentRegistry.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/ComponentRegistry.tsx rename to showcases/react/src/chakra-ui/components/ComponentRegistry.tsx diff --git a/examples/react/src/chakra-ui/components/Containers/FormContainer.tsx b/showcases/react/src/chakra-ui/components/Containers/FormContainer.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Containers/FormContainer.tsx rename to showcases/react/src/chakra-ui/components/Containers/FormContainer.tsx diff --git a/examples/react/src/chakra-ui/components/Containers/FormField.tsx b/showcases/react/src/chakra-ui/components/Containers/FormField.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Containers/FormField.tsx rename to showcases/react/src/chakra-ui/components/Containers/FormField.tsx diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx b/showcases/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx rename to showcases/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx b/showcases/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx rename to showcases/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx b/showcases/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx rename to showcases/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx b/showcases/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx rename to showcases/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx diff --git a/examples/react/src/chakra-ui/components/Form.tsx b/showcases/react/src/chakra-ui/components/Form.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Form.tsx rename to showcases/react/src/chakra-ui/components/Form.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputDate.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputDate.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputDate.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputDate.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputNumber.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputNumber.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputNumber.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputNumber.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputPhone.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputPhone.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputPhone.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputPhone.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputSelect.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputSelect.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputSelect.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputSelect.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputText.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputText.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputText.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputText.tsx diff --git a/examples/react/src/chakra-ui/components/Inputs/InputTextarea.tsx b/showcases/react/src/chakra-ui/components/Inputs/InputTextarea.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/Inputs/InputTextarea.tsx rename to showcases/react/src/chakra-ui/components/Inputs/InputTextarea.tsx diff --git a/examples/react/src/chakra-ui/components/SubmitButton.tsx b/showcases/react/src/chakra-ui/components/SubmitButton.tsx similarity index 100% rename from examples/react/src/chakra-ui/components/SubmitButton.tsx rename to showcases/react/src/chakra-ui/components/SubmitButton.tsx diff --git a/examples/react/src/chakra-ui/pages/ChakraFormPage.tsx b/showcases/react/src/chakra-ui/pages/ChakraFormPage.tsx similarity index 100% rename from examples/react/src/chakra-ui/pages/ChakraFormPage.tsx rename to showcases/react/src/chakra-ui/pages/ChakraFormPage.tsx diff --git a/examples/react/src/components/ProviderComponents.tsx b/showcases/react/src/components/ProviderComponents.tsx similarity index 100% rename from examples/react/src/components/ProviderComponents.tsx rename to showcases/react/src/components/ProviderComponents.tsx diff --git a/examples/react/src/components/ProviderFeatures.tsx b/showcases/react/src/components/ProviderFeatures.tsx similarity index 100% rename from examples/react/src/components/ProviderFeatures.tsx rename to showcases/react/src/components/ProviderFeatures.tsx diff --git a/examples/react/src/components/SubmittedValuesDisplay.tsx b/showcases/react/src/components/SubmittedValuesDisplay.tsx similarity index 100% rename from examples/react/src/components/SubmittedValuesDisplay.tsx rename to showcases/react/src/components/SubmittedValuesDisplay.tsx diff --git a/examples/react/src/index.css b/showcases/react/src/index.css similarity index 100% rename from examples/react/src/index.css rename to showcases/react/src/index.css diff --git a/examples/react/src/main.tsx b/showcases/react/src/main.tsx similarity index 100% rename from examples/react/src/main.tsx rename to showcases/react/src/main.tsx diff --git a/examples/react/src/material-ui/components/ComponentRegistry.tsx b/showcases/react/src/material-ui/components/ComponentRegistry.tsx similarity index 100% rename from examples/react/src/material-ui/components/ComponentRegistry.tsx rename to showcases/react/src/material-ui/components/ComponentRegistry.tsx diff --git a/examples/react/src/material-ui/components/Containers/FormContainer.tsx b/showcases/react/src/material-ui/components/Containers/FormContainer.tsx similarity index 100% rename from examples/react/src/material-ui/components/Containers/FormContainer.tsx rename to showcases/react/src/material-ui/components/Containers/FormContainer.tsx diff --git a/examples/react/src/material-ui/components/Containers/FormField.tsx b/showcases/react/src/material-ui/components/Containers/FormField.tsx similarity index 100% rename from examples/react/src/material-ui/components/Containers/FormField.tsx rename to showcases/react/src/material-ui/components/Containers/FormField.tsx diff --git a/examples/react/src/material-ui/components/Containers/FormSectionContainer.tsx b/showcases/react/src/material-ui/components/Containers/FormSectionContainer.tsx similarity index 100% rename from examples/react/src/material-ui/components/Containers/FormSectionContainer.tsx rename to showcases/react/src/material-ui/components/Containers/FormSectionContainer.tsx diff --git a/examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx b/showcases/react/src/material-ui/components/Containers/FormSectionGroup.tsx similarity index 100% rename from examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx rename to showcases/react/src/material-ui/components/Containers/FormSectionGroup.tsx diff --git a/examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx b/showcases/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx similarity index 100% rename from examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx rename to showcases/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx diff --git a/examples/react/src/material-ui/components/Containers/FormSectionTitle.tsx b/showcases/react/src/material-ui/components/Containers/FormSectionTitle.tsx similarity index 100% rename from examples/react/src/material-ui/components/Containers/FormSectionTitle.tsx rename to showcases/react/src/material-ui/components/Containers/FormSectionTitle.tsx diff --git a/examples/react/src/material-ui/components/Form.tsx b/showcases/react/src/material-ui/components/Form.tsx similarity index 100% rename from examples/react/src/material-ui/components/Form.tsx rename to showcases/react/src/material-ui/components/Form.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx b/showcases/react/src/material-ui/components/Inputs/InputCheckbox.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx rename to showcases/react/src/material-ui/components/Inputs/InputCheckbox.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputDate.tsx b/showcases/react/src/material-ui/components/Inputs/InputDate.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputDate.tsx rename to showcases/react/src/material-ui/components/Inputs/InputDate.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputNumber.tsx b/showcases/react/src/material-ui/components/Inputs/InputNumber.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputNumber.tsx rename to showcases/react/src/material-ui/components/Inputs/InputNumber.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputPhone.tsx b/showcases/react/src/material-ui/components/Inputs/InputPhone.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputPhone.tsx rename to showcases/react/src/material-ui/components/Inputs/InputPhone.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputSelect.tsx b/showcases/react/src/material-ui/components/Inputs/InputSelect.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputSelect.tsx rename to showcases/react/src/material-ui/components/Inputs/InputSelect.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputText.tsx b/showcases/react/src/material-ui/components/Inputs/InputText.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputText.tsx rename to showcases/react/src/material-ui/components/Inputs/InputText.tsx diff --git a/examples/react/src/material-ui/components/Inputs/InputTextarea.tsx b/showcases/react/src/material-ui/components/Inputs/InputTextarea.tsx similarity index 100% rename from examples/react/src/material-ui/components/Inputs/InputTextarea.tsx rename to showcases/react/src/material-ui/components/Inputs/InputTextarea.tsx diff --git a/examples/react/src/material-ui/components/SubmitButton.tsx b/showcases/react/src/material-ui/components/SubmitButton.tsx similarity index 100% rename from examples/react/src/material-ui/components/SubmitButton.tsx rename to showcases/react/src/material-ui/components/SubmitButton.tsx diff --git a/examples/react/src/material-ui/pages/MaterialFormPage.tsx b/showcases/react/src/material-ui/pages/MaterialFormPage.tsx similarity index 100% rename from examples/react/src/material-ui/pages/MaterialFormPage.tsx rename to showcases/react/src/material-ui/pages/MaterialFormPage.tsx diff --git a/examples/react/tsconfig.json b/showcases/react/tsconfig.json similarity index 100% rename from examples/react/tsconfig.json rename to showcases/react/tsconfig.json diff --git a/examples/react/vite.config.ts b/showcases/react/vite.config.ts similarity index 70% rename from examples/react/vite.config.ts rename to showcases/react/vite.config.ts index 071fa49..95eb181 100644 --- a/examples/react/vite.config.ts +++ b/showcases/react/vite.config.ts @@ -3,8 +3,13 @@ import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], + base: '/', server: { port: 3000, }, + build: { + outDir: 'dist', + sourcemap: true, + }, }); diff --git a/showcases/vercel.json b/showcases/vercel.json new file mode 100644 index 0000000..2dfd8dc --- /dev/null +++ b/showcases/vercel.json @@ -0,0 +1,6 @@ +{ + "buildCommand": "cd ../.. && pnpm install && pnpm build --filter='./packages/*' && pnpm --filter showcases-react build", + "outputDirectory": "react/dist", + "framework": "vite", + "installCommand": "cd ../.. && pnpm install" +} \ No newline at end of file diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..12dc0a6 --- /dev/null +++ b/vercel.json @@ -0,0 +1,3 @@ +{ + "version": 2 +} \ No newline at end of file