@bookklik/senangstart-icons 1.0.7 → 1.0.8

package/.github/workflows/deploy-docs.yml

@@ -0,0 +1,61 @@
+name: Deploy VitePress to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build icons
+        run: npm run build
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build docs
+        run: npm run docs:build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/docs/.vitepress/config.mjs

@@ -0,0 +1,171 @@
+import { defineConfig } from 'vitepress'
+import { createRequire } from 'module'
+import fs from 'fs'
+import path from 'path'
+
+const require = createRequire(import.meta.url)
+const pkg = require('../../package.json')
+
+// Load icons from icons.json to generate sidebar
+const iconsPath = path.resolve(__dirname, '../../src/icons.json')
+const icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'))
+const iconSidebarItems = icons.map(icon => ({
+  text: icon.name,
+  link: `/icons/${icon.slug}`
+}))
+
+// Shared theme config
+const sharedThemeConfig = {
+  logo: 'https://senangstart.com/img/ss_logo_typo.svg',
+  siteTitle: false,
+  socialLinks: [
+    { icon: 'github', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+  ],
+  footer: {
+    message: 'Released under the MIT License.',
+    copyright: 'Copyright © 2025 Bookklik Technologies'
+  }
+}
+
+// Generate Malay icon sidebar items
+const iconSidebarItemsMs = icons.map(icon => ({
+  text: icon.name,
+  link: `/ms/icons/${icon.slug}`
+}))
+
+export default defineConfig({
+  title: 'SenangStart Icons',
+  description: 'Curated Starter icons designed for web projects',
+  base: '/senangstart-icons/',
+  
+  head: [
+    ['link', { rel: 'icon', type: 'image/png', href: 'https://senangstart.com/img/ss_icon_accent.svg' }],
+    ['script', { type: 'senangstart/config' }, '{ "darkMode": "selector" }'],
+  ],
+
+  locales: {
+    root: {
+      label: 'English',
+      lang: 'en'
+    },
+    ms: {
+      label: 'Bahasa Melayu',
+      lang: 'ms',
+      title: 'SenangStart Icons',
+      description: 'Ikon permulaan terkurasi untuk projek web',
+      themeConfig: {
+        nav: [
+          { text: 'Utama', link: '/ms/' },
+          { text: 'Panduan', link: '/ms/guide/getting-started' },
+          { text: 'Ikon', link: '/ms/icons/' },
+          {
+            text: `v${pkg.version}`,
+            items: [
+              { text: 'Changelog', link: '/changelog' },
+              { text: 'GitHub', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+            ]
+          }
+        ],
+        sidebar: {
+          '/ms/guide/': [
+            {
+              text: 'Pengenalan',
+              items: [
+                { text: 'Bermula', link: '/ms/guide/getting-started' },
+                { text: 'Pemasangan', link: '/ms/guide/installation' },
+                { text: 'Penggunaan', link: '/ms/guide/usage' }
+              ]
+            },
+            {
+              text: 'Penyesuaian',
+              items: [
+                { text: 'Penggayaan', link: '/ms/guide/styling' },
+                { text: 'Konfigurasi', link: '/ms/guide/configuration' }
+              ]
+            }
+          ],
+          '/ms/icons/': [
+            {
+              text: 'Pustaka Ikon',
+              items: [
+                { text: 'Semua Ikon', link: '/ms/icons/' }
+              ]
+            },
+            {
+              text: 'Ikon',
+              collapsed: false,
+              items: iconSidebarItemsMs
+            }
+          ]
+        },
+        footer: {
+          message: 'Dikeluarkan di bawah Lesen MIT.',
+          copyright: 'Hakcipta © 2025 Bookklik Technologies'
+        }
+      }
+    }
+  },
+
+  themeConfig: {
+    ...sharedThemeConfig,
+    
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/getting-started' },
+      { text: 'Icons', link: '/icons/' },
+      {
+        text: `v${pkg.version}`,
+        items: [
+          { text: 'Changelog', link: '/changelog' },
+          { text: 'GitHub', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+        ]
+      }
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Introduction',
+          items: [
+            { text: 'Getting Started', link: '/guide/getting-started' },
+            { text: 'Installation', link: '/guide/installation' },
+            { text: 'Usage', link: '/guide/usage' }
+          ]
+        },
+        {
+          text: 'Customization',
+          items: [
+            { text: 'Styling', link: '/guide/styling' },
+            { text: 'Configuration', link: '/guide/configuration' }
+          ]
+        }
+      ],
+      '/icons/': [
+        {
+          text: 'Icon Library',
+          items: [
+            { text: 'All Icons', link: '/icons/' }
+          ]
+        },
+        {
+          text: 'Icons',
+          collapsed: false,
+          items: iconSidebarItems
+        }
+      ]
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/bookklik-technologies/senangstart-icons' }
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2025 Bookklik Technologies'
+    },
+
+    search: {
+      provider: 'local'
+    }
+  }
+})

package/docs/.vitepress/theme/custom.css

@@ -0,0 +1,64 @@
+/**
+ * SenangStart CSS - VitePress Theme Customization
+ * Brand colors: primary #2563EB, secondary #DBEAFE, dark #3E4A5D
+ */
+
+/* Font family - Outfit (must be first) */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
+
+:root {
+  /* Brand Colors */
+  --vp-c-brand-1: #2563EB;
+  --vp-c-brand-2: #3B82F6;
+  --vp-c-brand-3: #DBEAFE;
+  
+  /* Override default colors */
+  --vp-c-default-1: #3E4A5D;
+  --vp-c-default-2: #4B5563;
+  --vp-c-default-3: #6B7280;
+  
+  /* Button colors */
+  --vp-button-brand-bg: #2563EB;
+  --vp-button-brand-hover-bg: #1D4ED8;
+  --vp-button-brand-active-bg: #1E40AF;
+  
+  /* Font family */
+  --vp-font-family-base: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --vp-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+/* Code blocks with brand accent */
+.vp-doc div[class*='language-'] {
+  border-left: 3px solid #2563EB;
+}
+
+/* Sidebar active link */
+.VPSidebarItem.is-active > .item > .link > .text {
+  color: #2563EB;
+}
+
+/* Custom container styling */
+.custom-block.tip {
+  border-color: #2563EB;
+}
+
+.custom-block.warning {
+  border-color: #F59E0B;
+}
+
+.custom-block.danger {
+  border-color: #EF4444;
+}
+
+/* Hero alt button - white background for better visibility */
+.VPButton.alt {
+  background-color: #F1F5F9 !important;
+  color: #3E4A5D !important;
+  border-color: #F1F5F9 !important;
+}
+
+.VPButton.alt:hover {
+  background-color: #DBEAFE !important;
+  color: #2563EB !important;
+  border-color: #DBEAFE !important;
+}

package/docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme

package/docs/guide/configuration.md

@@ -0,0 +1,125 @@
+# Configuration
+
+Configure SenangStart Icons for your project needs.
+
+## Default Settings
+
+Set global defaults for all icons:
+
+```js
+// Set default size for all icons
+SSIcon.defaults = {
+  size: 24,
+  color: 'currentColor',
+  strokeWidth: 2
+};
+```
+
+## Custom Icon Path
+
+If you're self-hosting the icons, configure the base path:
+
+```js
+// Set custom path to icons
+SSIcon.config({
+  basePath: '/assets/icons/'
+});
+```
+
+## Preloading Icons
+
+Preload commonly used icons for better performance:
+
+```js
+// Preload specific icons
+SSIcon.preload(['home', 'user', 'settings', 'menu']);
+```
+
+## TypeScript Support
+
+SenangStart Icons includes TypeScript definitions:
+
+```ts
+import '@bookklik/senangstart-icons';
+
+// Icon element is typed
+const icon: HTMLElement = document.querySelector('ss-icon')!;
+icon.setAttribute('name', 'home');
+```
+
+## Framework Integration
+
+### Vue.js
+
+```vue
+<template>
+  <ss-icon :name="iconName" :size="iconSize"></ss-icon>
+</template>
+
+<script setup>
+import '@bookklik/senangstart-icons';
+
+const iconName = 'home';
+const iconSize = 24;
+</script>
+```
+
+### React
+
+```jsx
+import '@bookklik/senangstart-icons';
+
+function App() {
+  return (
+    <ss-icon name="home" size="24"></ss-icon>
+  );
+}
+```
+
+### Angular
+
+```ts
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import '@bookklik/senangstart-icons';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule { }
+```
+
+```html
+<!-- component.html -->
+<ss-icon name="home" size="24"></ss-icon>
+```
+
+## Build Configuration
+
+### Webpack
+
+No additional configuration needed. Import directly:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+### Vite
+
+Works out of the box:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+### Rollup
+
+Add to your input:
+
+```js
+// rollup.config.js
+export default {
+  input: 'src/main.js',
+  // ... rest of config
+};
+```

package/docs/guide/getting-started.md

@@ -0,0 +1,34 @@
+# Getting Started
+
+SenangStart Icons is a curated icon library designed for web projects. It provides a simple, consistent API for using icons across your applications.
+
+## What is SenangStart Icons?
+
+SenangStart Icons offers:
+
+- **Web Component-based** - Use icons as custom HTML elements
+- **Consistent Design** - All icons follow a unified design language
+- **Easy Customization** - Control size, color, and stroke width
+- **Lightweight** - Optimized SVG icons for fast loading
+
+## Quick Example
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+</head>
+<body>
+  <ss-icon name="home"></ss-icon>
+  <ss-icon name="user" size="32"></ss-icon>
+  <ss-icon name="settings" color="#3498db"></ss-icon>
+</body>
+</html>
+```
+
+## Next Steps
+
+- [Installation](/guide/installation) - Learn different ways to install
+- [Usage](/guide/usage) - Detailed usage instructions
+- [Styling](/guide/styling) - Customize icon appearance

package/docs/guide/installation.md

@@ -0,0 +1,54 @@
+# Installation
+
+There are multiple ways to install and use SenangStart Icons in your project.
+
+## CDN
+
+The quickest way to get started is using the CDN:
+
+```html
+<script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart-icon.min.js"></script>
+```
+
+Or with a specific version:
+
+```html
+<script src="https://unpkg.com/@bookklik/senangstart-icons@1.0.7/dist/senangstart-icon.min.js"></script>
+```
+
+## npm
+
+Install via npm for use in bundled applications:
+
+```bash
+npm install @bookklik/senangstart-icons
+```
+
+Then import in your JavaScript:
+
+```js
+import '@bookklik/senangstart-icons';
+```
+
+## Yarn
+
+```bash
+yarn add @bookklik/senangstart-icons
+```
+
+## pnpm
+
+```bash
+pnpm add @bookklik/senangstart-icons
+```
+
+## Browser Support
+
+SenangStart Icons uses Web Components and supports all modern browsers:
+
+| Browser | Version |
+|---------|---------|
+| Chrome  | 67+     |
+| Firefox | 63+     |
+| Safari  | 10.1+   |
+| Edge    | 79+     |

package/docs/guide/styling.md

@@ -0,0 +1,156 @@
+# Styling
+
+Customize the appearance of SenangStart Icons using CSS.
+
+## CSS Custom Properties
+
+Icons can be styled using CSS custom properties:
+
+```css
+ss-icon {
+  --ss-icon-color: #333;
+  --ss-icon-size: 24px;
+}
+```
+
+## Inline Styles
+
+Apply styles directly to icon elements:
+
+```html
+<ss-icon name="home" style="color: blue;"></ss-icon>
+```
+
+## CSS Classes
+
+Create reusable icon styles:
+
+```css
+.icon-primary {
+  color: #3498db;
+}
+
+.icon-danger {
+  color: #e74c3c;
+}
+
+.icon-success {
+  color: #2ecc71;
+}
+
+.icon-lg {
+  font-size: 32px;
+}
+
+.icon-sm {
+  font-size: 16px;
+}
+```
+
+```html
+<ss-icon name="info" class="icon-primary"></ss-icon>
+<ss-icon name="x-circle" class="icon-danger"></ss-icon>
+<ss-icon name="check-circle" class="icon-success"></ss-icon>
+```
+
+## Hover Effects
+
+Add interactive hover effects:
+
+```css
+ss-icon {
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+
+ss-icon:hover {
+  color: #3498db;
+  transform: scale(1.1);
+}
+```
+
+## Animation
+
+Animate icons with CSS:
+
+```css
+/* Spin animation */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.icon-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Pulse animation */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.icon-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+```
+
+```html
+<ss-icon name="loader" class="icon-spin"></ss-icon>
+<ss-icon name="heart" class="icon-pulse"></ss-icon>
+```
+
+## Dark Mode
+
+Support dark mode with CSS:
+
+```css
+ss-icon {
+  color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  ss-icon {
+    color: #fff;
+  }
+}
+
+/* Or with class-based dark mode */
+.dark ss-icon {
+  color: #fff;
+}
+```
+
+## Icon in Buttons
+
+Style icons within buttons:
+
+```css
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn ss-icon {
+  flex-shrink: 0;
+}
+
+.btn-icon-only {
+  padding: 0.5rem;
+}
+```
+
+```html
+<button class="btn">
+  <ss-icon name="plus" size="16"></ss-icon>
+  Add Item
+</button>
+
+<button class="btn btn-icon-only">
+  <ss-icon name="menu"></ss-icon>
+</button>
+```