strivui 0.0.5

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers", "ms-vscode.extension-test-runner"]
+}

package/.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

package/.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off",
+      // 🔧 Enable snippet suggestions inside JSX strings
+  "editor.quickSuggestions": {
+    "other": true,
+    "comments": false,
+    "strings": true
+  }
+}p

package/.vscode/tasks.json

@@ -0,0 +1,85 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "watch",
+            "dependsOn": [
+                "npm: watch:tsc",
+                "npm: watch:esbuild"
+            ],
+            "presentation": {
+                "reveal": "never"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        },
+        {
+            "type": "npm",
+            "script": "watch:esbuild",
+            "group": "build",
+            // INLINE THE PROBLEM MATCHER HERE
+            "problemMatcher": { // <--- Changed from "$esbuild-watch" to the direct definition
+                "base": "$tsc-watch", // You can try with or without this 'base' property.
+                                      // If the error persists with 'base', remove this line again.
+                "fileLocation": ["relative", "${workspaceFolder}"],
+                "pattern": [
+                    {
+                        "regexp": "\\[([^\\s]+)\\]\\s+(ERROR|WARNING):\\s+([^\\n]+)",
+                        "file": 1,
+                        "severity": 2,
+                        "message": 3
+                    },
+                    {
+                        "regexp": "\\s+at\\s+(.+):(\\d+):(\\d+)",
+                        "file": 1,
+                        "line": 2,
+                        "column": 3,
+                        "loop": true
+                    }
+                ]
+            },
+            "isBackground": true,
+            "label": "npm: watch:esbuild",
+            "presentation": {
+                "group": "watch",
+                "reveal": "never"
+            }
+        },
+        {
+            "type": "npm",
+            "script": "watch:tsc",
+            "group": "build",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "label": "npm: watch:tsc",
+            "presentation": {
+                "group": "watch",
+                "reveal": "never"
+            }
+        },
+        {
+            "type": "npm",
+            "script": "watch-tests",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never",
+                "group": "watchers"
+            },
+            "group": "build"
+        },
+        {
+            "label": "tasks: watch-tests",
+            "dependsOn": [
+                "npm: watch",
+                "npm: watch-tests"
+            ],
+            "problemMatcher": []
+        }
+    ]
+    // REMOVED: No top-level "problemMatchers" array needed when defined inline
+}

package/.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

package/.vscodeignore

@@ -0,0 +1,15 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+esbuild.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/eslint.config.mjs
+**/*.map
+**/*.ts
+**/.vscode-test.*
+rollup.config.js

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "strivui" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

package/README.md

@@ -0,0 +1,81 @@
+# ✨🌈 Strive UI Snippets for VS Code
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue?style=for-the-badge)
+![VS Code](https://img.shields.io/badge/VSCODE-Extension-blueviolet?style=for-the-badge)
+![StrivUi]
+
+Supercharge your **Visual Studio Code** experience with blazing fast utility class snippets   
+Designed for developers who love speed, structure, and style 💻⚡
+
+---
+
+## 🌟 Why Strive UI?
+
+Strive UI gives you **autocomplete magic** 🎩 for commonly used like utility classes. No more typing full class names — just type a prefix and boom 💥 — instant suggestions!
+
+---
+
+## 🔥 Snippet Features
+
+🚀 Rapid access to commonly used utility classes  
+🎯 Autocomplete suggestions as you type  
+🔄 Works seamlessly in **HTML**, **JSX**, **TSX**, and more  
+🧠 Smart placeholders to save your brain-cycles
+
+---
+
+## 📚 Supported Snippets
+
+| 🛠️ Utility        | ⌨️ Prefix     | 💡 Examples                            |
+|-------------------|--------------|----------------------------------------|
+| **Padding**       | `p-`         | `p-4`, `p-8`, `p-16`                   |
+| **Margin**        | `m-`         | `m-2`, `m-6`, `m-auto`                 |
+| **Width**         | `w-`         | `w-full`, `w-64`, `w-screen`          |
+| **Height**        | `h-`         | `h-20`, `h-screen`, `h-full`          |
+| **Flexbox**       | `flex`       | `flex`, `flex-col`, `items-center`    |
+| **Grid**          | `grid`       | `grid`, `grid-cols-2`, `gap-4`        |
+| **Font Size**     | `text-`      | `text-sm`, `text-xl`, `text-4xl`      |
+| **Font Weight**   | `font-`      | `font-light`, `font-semibold`         |
+| **Rounded Corners**| `rounded-`  | `rounded-md`, `rounded-full`          |
+| **Shadow**        | `shadow-`    | `shadow`, `shadow-lg`, `shadow-md`    |
+| **Position**      | `pos-`       | `absolute`, `relative`, `fixed`       |
+| **Z-Index**       | `z-`         | `z-10`, `z-20`, `z-auto`              |
+
+> 💡 These are not just static snippets — they use VS Code's **intelligent placeholder options** to give you dropdowns as you type!
+
+---
+
+## 🚀 How to Use
+
+1. 🔍 **Search** for `Strive UI Snippets` in the **VS Code Marketplace**
+2. 🔧 **Install** the extension
+3. ✨ Start typing any prefix like `p-`, `text-`, `w-`, etc.
+4. 💡 Use `Tab` or `Enter` to auto-insert with suggestions
+
+It’s that simple. Get your **layout built faster** than ever before! ⏱️
+
+---
+
+## 🧬 Snippet Example
+
+```json
+"Padding": {
+  "prefix": "p-",
+  "body": "p-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96|}",
+  "description": "📏 Padding utility"
+}
+🧠 You can choose padding values from the dropdown — no memorization needed!
+
+👨‍💻 Author
+Built with ❤️ by Syed Abdullah Ali
+A creative mind passionate about design systems, developer tooling, and pixel-perfect UIs.
+
+📜 License
+Licensed under the MIT License.
+Free to use, modify, and contribute — just don’t forget to ⭐ the repo!
+
+📣 Final Thoughts
+💥 Whether you're building a dashboard, landing page, or e-commerce UI,
+Strive UI Snippets will save you time and effort — so you can focus on what really matters: building amazing apps 🚀
+
+✨ Happy Coding! 🎯

package/esbuild.js

@@ -0,0 +1,56 @@
+const esbuild = require("esbuild");
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(`    ${location.file}:${location.line}:${location.column}:`);
+			});
+			console.log('[watch] build finished');
+		});
+	},
+};
+
+async function main() {
+	const ctx = await esbuild.context({
+		entryPoints: [
+			'src/extension.ts'
+		],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production,
+		sourcesContent: false,
+		platform: 'node',
+		outfile: 'dist/extension.js',
+		external: ['vscode'],
+		logLevel: 'silent',
+		plugins: [
+			/* add to the end of plugins array */
+			esbuildProblemMatcherPlugin,
+		],
+	});
+	if (watch) {
+		await ctx.watch();
+	} else {
+		await ctx.rebuild();
+		await ctx.dispose();
+	}
+}
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});

package/eslint.config.mjs

@@ -0,0 +1,28 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [{
+    files: ["**/*.ts"],
+}, {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 2022,
+        sourceType: "module",
+    },
+
+    rules: {
+        "@typescript-eslint/naming-convention": ["warn", {
+            selector: "import",
+            format: ["camelCase", "PascalCase"],
+        }],
+
+        curly: "warn",
+        eqeqeq: "warn",
+        "no-throw-literal": "warn",
+        semi: "warn",
+    },
+}];

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "strivui",
+  "publisher": "StriveUi",
+  "displayName": "StrivUi",
+  "icon": "icon.png",
+  "keywords": [
+    "react",
+    "ui-library",
+    "components",
+    "react-components",
+    "strivui",
+    "typescript",
+    "javascript",
+    "styled-components",
+    "design-system",
+    "tailwindcss",
+    "accessibility",
+    "reusable-components",
+    "frontend",
+    "react-ui",
+    "ui-kit"
+  ],
+  "license": "MIT",
+  "repository": {
+  "type": "git",
+  "url": "https://github.com/Syed-Dev-Sphere/StrivUI.git"
+  },
+  "description": "",
+  "version": "0.0.5",
+  "engines": {
+    "vscode": "^1.102.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "strivui.helloWorld",
+        "title": "Hello World"
+      }
+    ],
+     "snippets": [
+      {
+        "language": "html",
+        "path": "./snippets/strivuiClasses.json"
+      },
+      {
+        "language": "javascript",
+        "path": "./snippets/strivuiClasses.json"
+      },
+      {
+        "language": "javascriptreact",
+        "path": "./snippets/strivuiClasses.json"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./snippets/strivuiClasses.json"
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run package",
+    "compile": "npm run check-types && npm run lint && node esbuild.js",
+    "watch": "npm-run-all -p watch:*",
+    "watch:esbuild": "node esbuild.js --watch",
+    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
+    "package": "npm run check-types && npm run lint && node esbuild.js --production",
+    "compile-tests": "tsc -p . --outDir out",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "npm run compile-tests && npm run compile && npm run lint",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vscode-test"
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.102.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "20.x",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
+    "eslint": "^9.25.1",
+    "esbuild": "^0.25.3",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^5.8.3",
+    "@vscode/test-cli": "^0.0.11",
+    "@vscode/test-electron": "^2.5.2"
+  }
+}

package/snippets/strivuiClasses.json

@@ -0,0 +1,85 @@
+{
+  "Padding": {
+    "prefix": "p-",
+    "body": "p-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96|}",
+    "description": "📏 Padding utility"
+  },
+
+  "Margin": {
+    "prefix": "m-",
+    "body": "m-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96|}",
+    "description": "📏 Margin utility"
+  },
+
+  "Width": {
+    "prefix": "w-",
+    "body": "w-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,auto,full,screen|}",
+    "description": "📏 Width utility"
+  },
+
+  "Height": {
+    "prefix": "h-",
+    "body": "h-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,auto,full,screen|}",
+    "description": "📏 Height utility"
+  },
+
+  "Flex": {
+    "prefix": "flex",
+    "body": "flex",
+    "description": "📦 Flex container"
+  },
+
+  "Flex Direction": {
+    "prefix": "flex-",
+    "body": "flex-${1|row,col|}",
+    "description": "↔️ Flex direction"
+  },
+
+  "Grid": {
+    "prefix": "grid",
+    "body": "grid",
+    "description": "📊 Grid container"
+  },
+
+  "Grid Columns": {
+    "prefix": "grid-cols-",
+    "body": "grid-cols-${1|1,2,3,4,5,6,7,8,9,10,11,12|}",
+    "description": "📊 Grid columns"
+  },
+
+  "Font Size": {
+    "prefix": "text-",
+    "body": "text-${1|xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl|}",
+    "description": "🔤 Font size"
+  },
+
+  "Font Weight": {
+    "prefix": "font-",
+    "body": "font-${1|thin,light,normal,medium,semibold,bold,extrabold,black|}",
+    "description": "🔤 Font weight"
+  },
+
+  "Border Radius": {
+    "prefix": "rounded-",
+    "body": "rounded-${1|none,sm,base,md,lg,xl,full|}",
+    "description": "🟢 Border radius"
+  },
+
+  "Shadow": {
+    "prefix": "shadow-",
+    "body": "shadow-${1|sm,base,md,lg,xl,2xl,inner,none|}",
+    "description": "🌑 Shadow utility"
+  },
+
+  "Position": {
+    "prefix": "pos-",
+    "body": "${1|static,relative,absolute,fixed,sticky|}",
+    "description": "📍 Position utility"
+  },
+
+  "Z-Index": {
+    "prefix": "z-",
+    "body": "z-${1|0,10,20,30,40,50,60,70,80,90,100,auto|}",
+    "description": "🔼 Z-index utility"
+  }
+}

package/src/extension.ts

@@ -0,0 +1,26 @@
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from 'vscode';
+
+// This method is called when your extension is activated
+// Your extension is activated the very first time the command is executed
+export function activate(context: vscode.ExtensionContext) {
+
+	// Use the console to output diagnostic information (console.log) and errors (console.error)
+	// This line of code will only be executed once when your extension is activated
+	console.log('Congratulations, your extension "strivui" is now active!');
+
+	// The command has been defined in the package.json file
+	// Now provide the implementation of the command with registerCommand
+	// The commandId parameter must match the command field in package.json
+	const disposable = vscode.commands.registerCommand('strivui.helloWorld', () => {
+		// The code you place here will be executed every time your command is executed
+		// Display a message box to the user
+		vscode.window.showInformationMessage('Hello World from StrivUi!');
+	});
+
+	context.subscriptions.push(disposable);
+}
+
+// This method is called when your extension is deactivated
+export function deactivate() {}

package/src/test/extension.test.ts

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode';
+// import * as myExtension from '../../extension';
+
+suite('Extension Test Suite', () => {
+	vscode.window.showInformationMessage('Start all tests.');
+
+	test('Sample test', () => {
+		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+	});
+});

package/src/test.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Text Input Test</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 2rem;
+    }
+    input, button {
+      padding: 0.5rem;
+      font-size: 1rem;
+    }
+    input {
+      margin-right: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>Text Input Test</h1>
+  <input type="text" id="textInput" placeholder="Type something..." class="grid-cols-8"/>
+  <button onclick="showText()">Show Text</button>
+
+  <script>
+    function showText() {
+      const input = document.getElementById('textInput');
+      if (input) {
+        alert('You typed: ' + input.value);
+      }
+    }
+  </script>
+</body>
+</html>

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"lib": [
+			"ES2022"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true,   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	}
+}

package/vsc-extension-quickstart.md

@@ -0,0 +1,48 @@
+# Welcome to your VS Code Extension
+
+## What's in the folder
+
+* This folder contains all of the files necessary for your extension.
+* `package.json` - this is the manifest file in which you declare your extension and command.
+  * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
+* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
+  * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
+  * We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
+
+## Setup
+
+* install the recommended extensions (amodio.tsl-problem-matcher, ms-vscode.extension-test-runner, and dbaeumer.vscode-eslint)
+
+
+## Get up and running straight away
+
+* Press `F5` to open a new window with your extension loaded.
+* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
+* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
+* Find output from your extension in the debug console.
+
+## Make changes
+
+* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+
+## Explore the API
+
+* You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`.
+
+## Run tests
+
+* Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner)
+* Run the "watch" task via the **Tasks: Run Task** command. Make sure this is running, or tests might not be discovered.
+* Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A`
+* See the output of the test result in the Test Results view.
+* Make changes to `src/test/extension.test.ts` or create new test files inside the `test` folder.
+  * The provided test runner will only consider files matching the name pattern `**.test.ts`.
+  * You can create folders inside the `test` folder to structure your tests any way you want.
+
+## Go further
+
+* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
+* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
+* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).