@hashtagcms/web-ui-kit 1.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 HashtagCMS
+
+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.

package/README.md

@@ -0,0 +1,164 @@
+# @hashtagcms/web-ui-kit (Laravel/Blade)
+
+> Frontend Themes and UI components for the HashtagCMS ecosystem
+
+[![npm version](https://img.shields.io/npm/v/@hashtagcms/web-ui-kit.svg)](https://www.npmjs.com/package/@hashtagcms/web-ui-kit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+This package contains frontend themes specifically designed for the **Blade/PHP (Laravel)** ecosystem of HashtagCMS. It uses the core functionality provided by `@hashtagcms/web-sdk` to share underlying logic across different designs.
+
+> **Target Platform**: PHP / Laravel
+
+## Other Platforms
+If you are looking for other implementations, please check:
+*   **Node.js**: [`@hashtagcms/web-ui-kit-nodejs`](https://github.com/hashtagcms/web-ui-kit-nodejs)
+*   **Java**: [`@hashtagcms/web-ui-kit-java`](https://github.com/hashtagcms/web-ui-kit-java) (Coming Soon)
+*   **Core SDK**: `@hashtagcms/web-sdk` (Shared JS Logic)
+
+## ✨ Features
+
+- 🎨 **Multiple Themes** - Includes `basic` and `elegant` themes out of the box
+- 🛠️ **Customizable** - Built with SCSS variables for easy branding
+- 📦 **Modular** - Use source files or pre-compiled assets
+- 🚀 **Framework Agnostic** - Works with any JavaScript framework
+- 📱 **Responsive** - Mobile-first design
+- ♿ **Accessible** - WCAG compliant
+
+## 📦 Installation
+
+### Installation
+
+```bash
+npm install @hashtagcms/web-ui-kit
+```
+
+### Basic Usage
+
+**Import in your SCSS:**
+```scss
+@import "~@hashtagcms/web-ui-kit/src/themes/basic/sass/app";
+```
+
+**In JavaScript:**
+```javascript
+import '@hashtagcms/web-ui-kit/src/themes/basic/js/app';
+```
+
+**In HTML:**
+```html
+<link rel="stylesheet" href="node_modules/@hashtagcms/web-ui-kit/dist/themes/basic/app.css">
+<script src="node_modules/@hashtagcms/web-ui-kit/dist/themes/basic/app.js"></script>
+```
+
+### 💻 CLI Usage
+
+You can interactive copy assets (fonts, images, vendor files) from a theme to your project using the CLI.
+
+```bash
+# Run the interactive setup
+npx @hashtagcms/web-ui-kit init
+```
+
+The CLI will ask you:
+1. Which theme you want to install
+2. Where to copy the assets (default: `./resources/assets/fe`)
+
+The assets will be copied to `<destination>/<theme-name>/`.
+
+## 🎨 Available Themes
+
+### Basic Theme
+Clean, traditional design perfect for content-focused websites.
+- ✅ FontAwesome icons
+- ✅ Bootstrap 5 styling
+- ✅ Neutral color palette
+- ✅ Subscribe form component
+
+### Elegant Theme
+Modern, sophisticated design with smooth animations.
+- ✅ Glass morphism effects
+- ✅ Parallax scrolling
+- ✅ Gradient text and buttons
+- ✅ Card animations
+- ✅ Dark color scheme
+
+## 📚 Documentation
+
+- **[Getting Started](./docs/01-getting-started.md)** - Installation and basic usage
+- **[Creating Themes](./docs/02-creating-themes.md)** - Step-by-step guide to create custom themes
+- **[Theme Structure](./docs/03-theme-structure.md)** - Package organization and architecture
+- **[API Reference](./docs/07-api-reference.md)** - Complete API documentation
+- **[FAQ](./docs/08-faq.md)** - Frequently asked questions
+
+## 🚀 Creating a Custom Theme
+
+```bash
+# 1. Create theme directory
+mkdir -p src/themes/my-theme/{js,sass,img}
+
+# 2. Create entry files
+touch src/themes/my-theme/js/app.js
+touch src/themes/my-theme/sass/app.scss
+
+# 3. Build
+npm run build
+```
+
+See the [Creating Themes Guide](./docs/02-creating-themes.md) for detailed instructions.
+
+## 🛠️ Development
+
+### Build Commands
+
+```bash
+# Development build
+npm run dev
+
+# Production build
+npm run build
+
+# Watch mode
+npm run watch
+```
+
+### Project Structure
+
+```
+@hashtagcms/web-ui-kit/
+├── src/
+│   ├── themes/        # Individual themes
+│   │   ├── basic/     # Basic theme using @hashtagcms/web-sdk
+│   │   └── elegant/   # Elegant theme using @hashtagcms/web-sdk
+├── dist/              # Compiled assets
+├── docs/              # Documentation
+└── package.json
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+
+### How to Contribute
+
+1. Fork the repository
+2. Create your theme or feature
+3. Test thoroughly
+4. Submit a pull request
+
+## 📄 License
+
+[MIT](LICENSE) © HashtagCMS
+
+## 🆘 Support
+
+- 📖 [Documentation](./docs/01-getting-started.md)
+- 💬 [GitHub Discussions](https://github.com/hashtagcms/web-ui-kit/discussions)
+- 🐛 [Report Issues](https://github.com/hashtagcms/web-ui-kit/issues)
+
+## 🌟 Showcase
+
+Using @hashtagcms/web-ui-kit in your project? We'd love to feature it! Open an issue to share your work.
+
+---
+
+Made with ❤️ by the HashtagCMS team

package/bin/cli.js

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+
+const inquirer = require('inquirer');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+
+async function run() {
+    try {
+        // Resolve the source path (the themes folder inside this package)
+        const sourcePath = path.resolve(__dirname, '../src/themes');
+
+        if (!fs.existsSync(sourcePath)) {
+            console.error(chalk.red(`Error: Source themes directory not found at ${sourcePath}`));
+            process.exit(1);
+        }
+
+        // Get all available themes
+        const themes = await fs.readdir(sourcePath);
+        const validThemes = [];
+
+        for (const theme of themes) {
+            if ((await fs.stat(path.join(sourcePath, theme))).isDirectory()) {
+                validThemes.push(theme);
+            }
+        }
+
+        if (validThemes.length === 0) {
+            console.error(chalk.red('Error: No themes found in the package.'));
+            process.exit(1);
+        }
+
+        const questions = [
+            {
+                type: 'list',
+                name: 'theme',
+                message: 'Which theme would you like to install?',
+                choices: validThemes,
+            },
+            {
+                type: 'input',
+                name: 'destination',
+                message: 'Where would you like to copy the assets?',
+                default: './resources/assets/fe',
+            },
+        ];
+
+        const answers = await inquirer.prompt(questions);
+
+        // Resolve the destination path based on the user's input (relative to their project root)
+        const destinationPath = path.resolve(process.cwd(), answers.destination);
+
+        // Selected theme path
+        const selectedThemePath = path.join(sourcePath, answers.theme);
+
+        console.log(chalk.blue(`Copying assets for theme '${answers.theme}'...`));
+
+        // Copy only specific asset folders
+        const assets = ['img', 'fonts', 'images', 'vendor'];
+        let copiedCount = 0;
+
+        for (const asset of assets) {
+            const assetSrc = path.join(selectedThemePath, asset);
+            // Destination structure: destination/themeName/assetFolder
+            // Example: ./resources/assets/fe/basic/img
+            const assetDest = path.join(destinationPath, answers.theme, asset);
+
+            if (await fs.pathExists(assetSrc)) {
+                // Copy the files recursively
+                await fs.copy(assetSrc, assetDest);
+                console.log(chalk.gray(`✓ Copied ${answers.theme}/${asset}`));
+                copiedCount++;
+            }
+        }
+
+        if (copiedCount === 0) {
+            console.warn(chalk.yellow(`No assets (${assets.join(', ')}) were found to copy for theme '${answers.theme}'.`));
+        } else {
+            // Log a success message in green
+            console.log(chalk.green(`\nSuccess! Assets for '${answers.theme}' copied to ${answers.destination}/${answers.theme}`));
+        }
+
+        // Ask about copying views
+        const viewQuestions = [
+            {
+                type: 'confirm',
+                name: 'copyViews',
+                message: 'Do you also want to publish the theme templates (views)?',
+                default: false,
+            },
+            {
+                type: 'input',
+                name: 'viewDestination',
+                message: 'Where should the views be stored?',
+                default: './resources/views/fe',
+                when: (answers) => answers.copyViews,
+            },
+        ];
+
+        const viewAnswers = await inquirer.prompt(viewQuestions);
+
+        if (viewAnswers.copyViews) {
+            const viewsSrc = path.join(selectedThemePath, 'views');
+            const viewsDest = path.resolve(process.cwd(), viewAnswers.viewDestination, answers.theme);
+
+            if (await fs.pathExists(viewsSrc)) {
+
+                // Check for overwrite
+                let shouldCopy = true;
+                if (await fs.pathExists(viewsDest)) {
+                    const overwriteAnswer = await inquirer.prompt([{
+                        type: 'confirm',
+                        name: 'overwrite',
+                        message: `Views folder already exists at ${viewsDest}. Overwrite?`,
+                        default: false,
+                    }]);
+                    shouldCopy = overwriteAnswer.overwrite;
+                }
+
+                if (shouldCopy) {
+                    console.log(chalk.blue(`Copying views...`));
+                    await fs.copy(viewsSrc, viewsDest);
+                    console.log(chalk.green(`\nSuccess! Views copied to ${viewAnswers.viewDestination}/${answers.theme}`));
+                } else {
+                    console.log(chalk.yellow('Skipped copying views.'));
+                }
+
+            } else {
+                console.warn(chalk.yellow(`No 'views' folder found in theme '${answers.theme}'.`));
+            }
+        }
+
+    } catch (error) {
+        console.error(chalk.red('Error copying assets:'), error);
+        process.exit(1);
+    }
+}
+
+run();

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@hashtagcms/web-ui-kit",
+  "version": "1.0.5",
+  "author": {
+    "name": "HashtagCMS",
+    "url": "https://github.com/hashtagcms"
+  },
+  "description": "Laravel Frontend Themes and Core Logic for HashtagCMS",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashtagcms/web-ui-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hashtagcms/web-ui-kit/issues"
+  },
+  "homepage": "https://github.com/hashtagcms/web-ui-kit#readme",
+  "bin": {
+    "web-ui-kit": "bin/cli.js"
+  },
+  "files": [
+    "src",
+    "bin"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development --progress --color",
+    "prod": "webpack --mode production --progress --color",
+    "build": "npm run prod",
+    "watch": "webpack --mode development --watch --progress --color"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "babel-loader": "^9.1.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.0",
+    "mini-css-extract-plugin": "^2.7.0",
+    "sass": "^1.69.0",
+    "sass-loader": "^13.3.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.0"
+  },
+  "dependencies": {
+    "axios": "^1.8.0",
+    "bootstrap": "^5.3.3",
+    "chalk": "^4.1.2",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^8.2.7",
+    "@hashtagcms/web-sdk": "^1.0.0"
+  }
+}