refactor(ui) & feat(blockly): Rework UI and add dynamic inputs

.eslintignore

@@ -11,3 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Ignore the shadcn components
+src/lib/components/ui

.eslintrc.cjs

@@ -4,37 +4,37 @@ module.exports = {
 		"eslint:recommended",
 		"plugin:@typescript-eslint/recommended",
 		"plugin:svelte/recommended",
-		"prettier"
+		"prettier",
 	],
 	parser: "@typescript-eslint/parser",
 	plugins: ["@typescript-eslint"],
 	parserOptions: {
 		sourceType: "module",
 		ecmaVersion: 2020,
-		extraFileExtensions: [".svelte"]
+		extraFileExtensions: [".svelte"],
 	},
 	env: {
 		browser: true,
 		es2017: true,
-		node: true
+		node: true,
 	},
 	overrides: [
 		{
 			files: ["*.svelte"],
 			parser: "svelte-eslint-parser",
 			parserOptions: {
-				parser: "@typescript-eslint/parser"
-			}
-		}
+				parser: "@typescript-eslint/parser",
+			},
+		},
 	],
 	rules: {
 		semi: [1, "always"],
 		quotes: [1, "double", "avoid-escape"],
 		curly: [1, "multi-line"],
-		"space-before-function-paren": [2, "never"],
+		"space-before-function-paren": "off",
 		"@typescript-eslint/semi": [1, "always"],
 		"@typescript-eslint/quotes": [1, "double", "avoid-escape"],
-		"@typescript-eslint/space-before-function-paren": [2, "never"],
+		"@typescript-eslint/space-before-function-paren": "off",
 		"no-use-before-define": 0,
 		"no-unused-vars": 0,
 		"@typescript-eslint/no-use-before-define": 2,
@@ -47,6 +47,6 @@ module.exports = {
 		"@typescript-eslint/no-non-null-assertion": 0,
 		"@typescript-eslint/no-unsafe-argument": 0,
 		"spaced-comment": 0,
-		"eol-last": ["error", "always"]
-	}
+		"eol-last": ["error", "always"],
+	},
 };

.github/workflows/pr-block-rules.yml

@@ -9,12 +9,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v2
 
-    - name: Display block rules
-      run: |
-        RULES=$(cat ./block_creation_rules.md)
-        gh pr comment ${{ github.event.pull_request.number }} --body "$RULES"
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Display block rules
+        run: |
+          RULES=$(cat ./block_creation_rules.md)
+          gh pr comment ${{ github.event.pull_request.number }} --body "$RULES"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -8,15 +8,28 @@ on:
 
 jobs:
   lint:
-    name: Run eslint
+    name: Run ESLint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install NodeJS
+        uses: actions/setup-node@v3
         with:
           node-version: 20
-      - run: yarn
-      - run: yarn lint --fix
+
+      - name: Install PNPM
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check Prettier format
+        run: pnpm format:check
+
+      - name: Run ESLint
+        run: pnpm lint:noformat
   # tests are not testing 😭
   # test:
   #   name: Run test

.prettierrc

@@ -1,9 +1,9 @@
 {
 	"useTabs": true,
 	"singleQuote": false,
-	"trailingComma": "none",
+	"trailingComma": "es5",
 	"printWidth": 100,
 	"semi": true,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "eslint-plugin-prettier"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

block_creation_rules.md

@@ -6,28 +6,32 @@ Before merging, please ensure that each modified or newly created block meets th
 **Concise List:**
 
 ##### 1. The block does one thing.
+
 - For example, the `create_embed` block should only create an embed and not create a variable.
 
 ##### 2. The block has warnings for crucial inputs.
+
 - For example, in the `get_user_by_id` block, the `id` field must include a warning, as it is crucial for the block to function as intended.
 
 ##### 3. Each block has maximum customizability.
 
 ##### 4. Inputs are error-proofed.
+
 - **DO NOT CREATE INPUTS WHERE YOU CAN TYPE CODE** (with the exception of the insert JS block).
 - Inputs should not cause errors, even when left empty.
 
 ##### 5. Consistent design patterns.
+
 - Every block should be created in the same style.
 
 ##### 6. Clear and descriptive titles.
 
 ##### 7. Block modularity and reusability.
+
 - Ensure that blocks can connect with each other in various scenarios. For example, if two blocks have the `user` type, they should be usable in all user inputs.
 
 ##### 8. Performance.
 
 ##### 9. Consider user feedback.
 
 These rules will make app development easier, help eliminate pesky bugs, and simplify refactoring.
-

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/app.pcss",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

docs/blocks/BlockCreation.md

@@ -124,8 +124,8 @@ const blocks: BlockDefinition[] = [
 		helpUrl: "https://wiki.discodes.xyz/",
 		code: (args) => {
 			return `console.log("Hello World")`;
-		}
-	}
+		},
+	},
 ];
 ```
 
@@ -185,7 +185,7 @@ import TextInput from "$lib/utils/BlockGen/Inputs/TextInput";
 
 const blocks: BlockDefinition[] = {
 	// All the properties
-	args: [new TextInput("TEXT", "Hello World")]
+	args: [new TextInput("TEXT", "Hello World")],
 };
 ```
 
@@ -228,8 +228,8 @@ const blocks: BlockDefinition[] = [
 		inline: true,
 		colour: "#5ba58c",
 		tooltip: "This block prints Hello World.",
-		helpUrl: "https://wiki.discodes.xyz/"
-	}
+		helpUrl: "https://wiki.discodes.xyz/",
+	},
 ];
 ```