@damarkuncoro/landing-page 0.1.4 → 0.1.6

package/README.md

@@ -22,6 +22,119 @@ Config-driven landing page library for building beautiful, responsive landing pa
 npm install @damarkuncoro/landing-page
 ```
 
+## Using "No Skin" (Base UI)
+
+The library supports a "no skin" option that allows you to use the base UI components without any additional styling. This gives you full control over the styling through CSS or inline styles.
+
+### Usage
+
+```typescript
+import { defineLandingPage } from '@damarkuncoro/landing-page'
+
+const landingPage = defineLandingPage({
+  title: 'My Landing Page with Base UI',
+  description: 'A landing page using the base UI components',
+  sections: [
+    {
+      id: 'hero',
+      type: 'hero',
+      config: {
+        title: 'Welcome to Our Platform',
+        subtitle: 'Discover amazing features that will transform your workflow',
+        buttons: [
+          {
+            id: 'primary-button',
+            text: 'Get Started',
+            url: '/signup',
+            variant: 'primary',
+            size: 'md',
+            skin: 'none', // Use base UI without skin
+          },
+          {
+            id: 'secondary-button',
+            text: 'Learn More',
+            url: '/about',
+            variant: 'secondary',
+            size: 'md',
+            skin: 'none', // Use base UI without skin
+          },
+        ],
+        skin: 'none', // Use base UI without skin
+      },
+    },
+    {
+      id: 'features',
+      type: 'features',
+      config: {
+        features: [
+          {
+            id: 'feature-1',
+            title: 'Fast Performance',
+            description: 'Our platform is optimized for speed and efficiency',
+          },
+          {
+            id: 'feature-2',
+            title: 'Modern Design',
+            description: 'Beautiful, responsive interface that works on all devices',
+          },
+          {
+            id: 'feature-3',
+            title: 'Secure & Reliable',
+            description: 'Enterprise-grade security and reliability',
+          },
+        ],
+        skin: 'none', // Use base UI without skin
+      },
+    },
+  ],
+})
+```
+
+### Customizing Base UI
+
+When using `skin: 'none'`, you can customize the components using the `style` and `className` props:
+
+```typescript
+const landingPage = defineLandingPage({
+  title: 'My Customized Landing Page',
+  description: 'A landing page with customized base UI components',
+  sections: [
+    {
+      id: 'hero',
+      type: 'hero',
+      config: {
+        title: 'Welcome to Our Platform',
+        subtitle: 'Discover amazing features that will transform your workflow',
+        buttons: [
+          {
+            id: 'primary-button',
+            text: 'Get Started',
+            url: '/signup',
+            variant: 'primary',
+            size: 'md',
+            skin: 'none',
+            className: 'my-custom-button', // Custom CSS class
+            style: {
+              backgroundColor: '#ff0000',
+              color: '#ffffff',
+              padding: '12px 24px',
+              borderRadius: '8px',
+              fontSize: '16px',
+            },
+          },
+        ],
+        skin: 'none',
+        className: 'my-custom-hero', // Custom CSS class
+        style: {
+          padding: '80px 0',
+          backgroundColor: '#f5f5f5',
+        },
+      },
+    },
+  ],
+})
+```
+
 ## Quick Start
 
 1. Define your landing page configuration:
@@ -102,6 +215,112 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 )
 ```
 
+## Using Tailwind CSS
+
+The library supports Tailwind CSS out of the box through Tailwind-based skins. To use Tailwind CSS:
+
+1. Install Tailwind CSS in your project:
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+2. Configure Tailwind CSS:
+```javascript
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#3b82f6',
+        secondary: '#8b5cf6',
+        accent: '#10b981',
+        background: '#ffffff',
+        text: '#1f2937',
+        muted: '#6b7280',
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+3. Import Tailwind CSS in your main stylesheet:
+```css
+/* index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+4. Use Tailwind skins in your configuration:
+```typescript
+import { defineLandingPage } from '@damarkuncoro/landing-page'
+
+const landingPage = defineLandingPage({
+  title: 'My Tailwind Landing Page',
+  description: 'A beautiful landing page using Tailwind CSS',
+  sections: [
+    {
+      id: 'hero',
+      type: 'hero',
+      config: {
+        title: 'Welcome to Our Platform',
+        subtitle: 'Discover amazing features that will transform your workflow',
+        buttons: [
+          {
+            id: 'primary-button',
+            text: 'Get Started',
+            url: '/signup',
+            variant: 'primary',
+            size: 'md',
+            skin: 'tailwind',
+          },
+          {
+            id: 'secondary-button',
+            text: 'Learn More',
+            url: '/about',
+            variant: 'secondary',
+            size: 'md',
+            skin: 'tailwind',
+          },
+        ],
+        skin: 'tailwind',
+      },
+    },
+    {
+      id: 'features',
+      type: 'features',
+      config: {
+        features: [
+          {
+            id: 'feature-1',
+            title: 'Fast Performance',
+            description: 'Our platform is optimized for speed and efficiency',
+          },
+          {
+            id: 'feature-2',
+            title: 'Modern Design',
+            description: 'Beautiful, responsive interface that works on all devices',
+          },
+          {
+            id: 'feature-3',
+            title: 'Secure & Reliable',
+            description: 'Enterprise-grade security and reliability',
+          },
+        ],
+        skin: 'tailwind',
+      },
+    },
+  ],
+})
+```
+
 ## Schema & Validation
 
 The library includes comprehensive JSON schemas for validating landing page configurations. You can use these schemas to:
@@ -177,7 +396,7 @@ interface HeroConfig {
   video?: string
   buttons: ButtonConfig[]
   alignment?: 'left' | 'center' | 'right'
-  skin?: 'default' | 'skin2' | 'skin3' | 'skin4' | 'skin5' | 'skin6' | 'skin7' | 'skin8'
+  skin?: 'default' | 'skin2' | 'skin3' | 'skin4' | 'skin5' | 'skin6' | 'skin7' | 'skin8' | 'none'
 }
 
 ### Hero Skins
@@ -211,6 +430,9 @@ Title, subtitle, dan buttons di atas gambar.
 
 #### Skin 10
 Full screen hero dengan latar belakang gradien dan konten di tengah.
+
+#### Tailwind Skin
+Tailwind-based skin that uses Tailwind CSS classes for styling. Requires Tailwind CSS to be installed in your project.
 ```
 
 #### Features Section

package/lib/cjs/index.d.ts

@@ -4,19 +4,49 @@ interface ButtonConfig extends WithBaseConfig<{
     text: string;
     url: string;
     variant: "primary" | "secondary" | "outline" | "ghost";
-    size: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg";
     target?: "_blank" | "_self";
+    skin?: "default" | "tailwind";
+    padding?: string;
+    fontSize?: string;
 }> {
 }
+interface NavbarLinkConfig {
+    id?: string;
+    text: string;
+    url?: string;
+    target?: "_blank" | "_self";
+    isActive?: boolean;
+    isLoading?: boolean;
+    children?: NavbarLinkConfig[];
+}
+interface LanguageConfig {
+    code: string;
+    name: string;
+}
+interface LanguageSelectorConfig {
+    currentLanguage: string;
+    languages: LanguageConfig[];
+    onLanguageChange?: (code: string) => void;
+}
+interface ThemeSwitcherConfig {
+    currentTheme: "light" | "dark";
+    onThemeChange?: (theme: "light" | "dark") => void;
+}
 interface HeaderConfig extends WithBaseConfig<{
     logo?: string;
     title?: string;
-    links: {
-        id?: string;
-        text: string;
-        url: string;
-        target?: "_blank" | "_self";
-    }[];
+    links: NavbarLinkConfig[];
+    buttons?: ButtonConfig[];
+    fixed?: boolean;
+    scrollEffect?: boolean;
+    skin?: "default" | "tailwind";
+    searchPlaceholder?: string;
+    onSearch?: (query: string) => void;
+    initialSearchValue?: string;
+    showSearchInMobileMenu?: boolean;
+    languageSelector?: LanguageSelectorConfig;
+    themeSwitcher?: ThemeSwitcherConfig;
 }> {
 }
 interface HeroConfig extends WithBaseConfig<{
@@ -28,7 +58,7 @@ interface HeroConfig extends WithBaseConfig<{
     captionsSrc?: string;
     buttons: ButtonConfig[];
     alignment?: "left" | "center" | "right";
-    skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10";
+    skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10" | "tailwind";
 }> {
 }
 interface FeatureConfig extends WithBaseConfig<{
@@ -36,6 +66,7 @@ interface FeatureConfig extends WithBaseConfig<{
     description: string;
     icon?: string;
     image?: string;
+    skin?: "default" | "tailwind";
 }> {
 }
 interface TestimonialConfig extends WithBaseConfig<{
@@ -167,11 +198,15 @@ type SectionConfig = WithBaseConfig<{
     label?: string;
 }> | WithBaseConfig<{
     type: "features";
-    config: FeatureConfig[];
+    config: {
+        features: FeatureConfig[];
+    };
     label?: string;
 }> | WithBaseConfig<{
     type: "testimonials";
-    config: TestimonialConfig[];
+    config: {
+        testimonials: TestimonialConfig[];
+    };
     label?: string;
 }> | WithBaseConfig<{
     type: "pricing";
@@ -187,7 +222,9 @@ type SectionConfig = WithBaseConfig<{
     label?: string;
 }> | WithBaseConfig<{
     type: "stats";
-    config: StatConfig[];
+    config: {
+        stats: StatConfig[];
+    };
     label?: string;
 }> | WithBaseConfig<{
     type: "faq";
@@ -570,6 +607,10 @@ declare const landingPageSchema: {
                     type: string;
                     enum: string[];
                 };
+                skin: {
+                    type: string;
+                    enum: string[];
+                };
             };
             required: string[];
         };
@@ -894,10 +935,81 @@ declare const sectionConfigSchemas: {
                             type: string;
                             enum: string[];
                         };
+                        isActive: {
+                            type: string;
+                        };
+                        isLoading: {
+                            type: string;
+                        };
+                        children: {
+                            type: string;
+                            items: {
+                                $ref: string;
+                            };
+                        };
                     };
                     required: string[];
                 };
             };
+            buttons: {
+                type: string;
+                items: {
+                    $ref: string;
+                };
+            };
+            fixed: {
+                type: string;
+            };
+            scrollEffect: {
+                type: string;
+            };
+            skin: {
+                type: string;
+                enum: string[];
+            };
+            searchPlaceholder: {
+                type: string;
+            };
+            initialSearchValue: {
+                type: string;
+            };
+            showSearchInMobileMenu: {
+                type: string;
+            };
+            languageSelector: {
+                type: string;
+                properties: {
+                    currentLanguage: {
+                        type: string;
+                    };
+                    languages: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                code: {
+                                    type: string;
+                                };
+                                name: {
+                                    type: string;
+                                };
+                            };
+                            required: string[];
+                        };
+                    };
+                };
+                required: string[];
+            };
+            themeSwitcher: {
+                type: string;
+                properties: {
+                    currentTheme: {
+                        type: string;
+                        enum: string[];
+                    };
+                };
+                required: string[];
+            };
         };
         required: string[];
     };