first commit

.github/workflows/publish.yml

@@ -0,0 +1,49 @@
+on: [push]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: Publish to Cloudflare Pages
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          always-auth: false
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 'latest'
+          run_install: false
+
+      - name: Set pnpm store
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Build Frontend
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: |
+          pnpm install --no-frozen-lockfile
+          pnpm run build
+
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: 'svelte-form-builder'
+          directory: '.svelte-kit/cloudflare'

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules
+pnpm-lock.yaml
+package-lock.json
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 150,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Mohammed Hassan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,8 @@
+### WIP
+Still under development before publishing to npm
+
+### Todo:
+- [ ] Make component editor dynamic based on defined properties
+- [ ] Changelog and versioning
+- [ ] Ability to inject custom components
+- [ ] Typescript

eslint.config.js

@@ -0,0 +1,17 @@
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default [
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		files: ['**/*.svelte']
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

package.json

@@ -0,0 +1,41 @@
+{
+	"name": "svelte-form-builder",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@iconify/svelte": "^4.0.2",
+		"@playwright/test": "^1.45.2",
+		"@sveltejs/adapter-cloudflare": "^4.7.0",
+		"@sveltejs/kit": "^2.5.18",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@types/eslint": "^9.6.0",
+		"@types/sortablejs": "^1.15.8",
+		"eslint": "^9.8.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.43.0",
+		"highlight.js": "^11.10.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0-next.204",
+		"svelte-check": "^3.8.5",
+		"svelte-highlight": "^7.7.0",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.4",
+		"vite": "^5.3.5"
+	},
+	"type": "module",
+	"dependencies": {
+		"runed": "^0.15.0",
+		"sass": "^1.77.8",
+		"sortablejs": "^1.15.2",
+		"svelte-splitpanes": "^8.0.5",
+		"tailwindcss": "^3.4.7"
+	}
+}

playwright.config.ts

@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;

postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+	plugins: {
+		tailwindcss: {}
+	}
+};

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/ElementEditor.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import ElementSettings from '$lib/editor/ElementSettings.svelte';
+	import { slide } from 'svelte/transition';
+	import Icon from '@iconify/svelte';
+
+	let { activeElement = $bindable() }: { activeElement: any } = $props();
+</script>
+
+<div class="flex flex-col w-full h-full space-y-1">
+	<div class="flex space-x-1 items-center py-1">
+		<Icon icon="fluent:options-20-regular" class="size-0 md:size-4 text-slate-500" />
+		<p class="text-sm md:text-md font-semibold text-slate-800">Editor</p>
+	</div>
+	{#if activeElement}
+		<div transition:slide={{ duration: 100 }} class="pb-2">
+			<ElementSettings {activeElement} />
+		</div>
+	{:else}
+		<div class="flex flex-col items-center justify-center w-full h-full">
+			<p class="text-sm text-slate-700 mx-auto">Select a field to edit</p>
+		</div>
+	{/if}
+</div>

src/lib/ElementsList.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Draggable from '$lib/sortablejs/Dragzone.svelte';
+	import ElementCard from '$lib/elements/ElementCard.svelte';
+	import elements from '$lib/elements';
+	import Icon from '@iconify/svelte';
+	import { ELEMENT_TYPES } from '$lib/utils/enums';
+	import { getByElementTypes } from '$lib/utils/helpers';
+
+	const fields = getByElementTypes(elements, ELEMENT_TYPES.FORMFIELDS);
+	const uiElements = getByElementTypes(elements, ELEMENT_TYPES.UI);
+	const containers = getByElementTypes(elements, ELEMENT_TYPES.CONTAINERS);
+</script>
+
+<div class="flex flex-col w-full h-full space-y-1">
+	<div class="flex space-x-1 items-center py-1">
+		<Icon icon="ci:main-component" class="size-0 md:size-4 text-slate-500" />
+		<p class="text-sm md:text-md font-semibold text-slate-800">Elements</p>
+	</div>
+	<div class="flex flex-col space-y-2">
+		<Draggable elements={fields} title="Form Fields">
+			{#snippet dragComponent(element)}
+				<ElementCard {element} />
+			{/snippet}
+		</Draggable>
+		<Draggable elements={uiElements} title="UI">
+			{#snippet dragComponent(element)}
+				<ElementCard {element} />
+			{/snippet}
+		</Draggable>
+		{#if containers.length > 0}
+			<Draggable elements={containers} title="Containers">
+				{#snippet dragComponent(element)}
+					<ElementCard {element} />
+				{/snippet}
+			</Draggable>
+		{/if}
+	</div>
+</div>

src/lib/components/Button.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	const {
+		text = 'Button',
+		type = 'submit',
+		disabled = false,
+		onclick = () => {}
+	}: { text: string; type?: 'submit' | 'reset' | 'button'; disabled?: boolean; onclick?: () => void } = $props();
+
+	const handleClick = (e: MouseEvent) => {
+		e.preventDefault();
+		onclick();
+	};
+</script>
+
+<button {type} {disabled} onclick={handleClick} class="hover:bg-blue-950 rounded-md bg-blue-900 p-1 text-center text-white outline-none w-20">
+	{text}
+</button>

src/lib/components/JsonModal.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { isJsonModalOpen } from '$lib/utils/flags.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import json from 'svelte-highlight/languages/json';
+	import Highlight from 'svelte-highlight';
+	import Icon from '@iconify/svelte';
+	const { content } = $props();
+</script>
+
+<div
+	class="fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-100 backdrop-blur-sm transition-opacity duration-300"
+>
+	<div class="relative m-4 w-2/5 min-w-[90%] rounded-lg bg-white antialiased shadow-2xl">
+		<div class="flex items-center border-b border-b-slate-400 justify-between p-2 text-md font-semibold">
+			<p class="text-blue-950">Form JSON</p>
+			<button class="p-1 rounded-md hover:bg-slate-300 bg-slate-200" onclick={() => (isJsonModalOpen.state = false)}>
+				<Icon icon="ph:x" class="size-5" />
+			</button>
+		</div>
+		<div class="text-sm relative p-1 antialiased overflow-auto max-h-[65vh] bg-slate-900">
+			<Highlight language={json} code={JSON.stringify(content, null, 2)} />
+		</div>
+		<div class="flex justify-end border-t border-t-slate-400 p-2">
+			<Button text="COPY" onclick={() => navigator.clipboard.writeText(JSON.stringify(content, null, 2))} />
+		</div>
+	</div>
+</div>

src/lib/editor/Checkbox.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	let { activeElement = $bindable(), settingField, section }: { activeElement: any; settingField: any; section: any } = $props();
+
+	function handleValueChange(e: Event): void {
+		activeElement.settings[section][settingField.name] = !activeElement.settings[section][settingField.name];
+	}
+</script>
+
+<button type="button" onclick={handleValueChange} class="flex justify-end outline-none w-full">
+	<Icon
+		icon={activeElement.settings[section][settingField.name] === true ? 'fluent:checkbox-checked-20-regular' : 'fluent:checkbox-unchecked-20-regular'}
+		class="w-5 h-5 {activeElement.settings[section][settingField.name] === true ? 'text-blue-600' : 'text-slate-500'}"
+	/>
+</button>