@admin-layout/tailwind-design-pro 10.0.9-alpha.9 → 10.1.1-alpha.2

package/README.md

@@ -1 +1,345 @@
-# Tailwind UI
+# Tailwind Design Pro
+
+A universal tailwind design system for use across all projects.
+
+## Features
+
+-   Unified theme system with light and dark mode support
+-   Consistent styling across all projects
+-   Easy to customize and extend
+-   Built-in typography, forms, and aspect ratio support
+
+## Usage in Servers
+
+To use this package in your server project, follow these steps:
+
+### 1. Install the package
+
+```bash
+npm install @admin-layout/tailwind-design-pro
+```
+
+### 2. Use the Universal Tailwind Config
+
+Create a `tailwind.config.js` or `tailwind.config.ts` file in your server project and import the universal config:
+
+```typescript
+// tailwind.config.ts or tailwind.config.js
+import { themeConfig } from '@admin-layout/tailwind-design-pro';
+
+export default {
+    // Override content paths to include server-specific paths
+    content: [
+        './src/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        './app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        '../../packages/**/*.{js,jsx,ts,tsx}',
+        '../../packages-modules/**/*.{js,jsx,ts,tsx}',
+    ],
+
+    // You can add server-specific overrides here if needed
+    theme: {
+        extend: {
+            // Any server-specific extensions would go here
+            ...themeConfig,
+        },
+    },
+    darkMode: 'class',
+    variants: {
+        typography: ['dark'],
+    },
+    plugins: [typography, forms, aspectRatio],
+};
+```
+
+# Theme System Documentation
+
+## Overview
+
+The theme system provides a flexible and powerful way to manage the visual appearance of your application. It supports multiple pre-built themes (default, Airbnb, Slack, GitHub, and Spotify) and includes dark mode functionality.
+
+## Available Themes
+
+The system comes with several pre-built themes:
+
+-   `default`: A neutral theme with standard components
+-   `airbnb`: Inspired by Airbnb's design system
+-   `slack`: Based on Slack's color scheme and components
+-   `github`: Following GitHub's design patterns
+-   `spotify`: Matching Spotify's visual identity
+
+## Theme Structure
+
+Each theme follows a consistent structure defined by the `DefaultTheme` interface:
+
+```typescript
+interface DefaultTheme {
+    name: string;
+    colors: {
+        primary: ColorRamp;
+        secondary: ColorRamp;
+        accent: ColorRamp;
+        success: ColorRamp;
+        warning: ColorRamp;
+        error: ColorRamp;
+        neutral: ColorRamp;
+        background: {
+            light: string;
+            dark: string;
+        };
+        text: {
+            light: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+            dark: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+    };
+    borderRadius: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    fontFamily: {
+        sans: string[];
+        serif: string[];
+        mono: string[];
+    };
+    boxShadow: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    components: {
+        buttons: {
+            primary: ButtonStyle;
+            secondary: ButtonStyle;
+        };
+        cards: {
+            borderRadius: string;
+            padding: string;
+            shadow: string;
+            border: string;
+        };
+        inputs: {
+            borderRadius: string;
+            borderColor: string;
+            focusBorderColor: string;
+            padding: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+}
+```
+
+## Setting Up the Theme Provider
+
+To use the theme system, wrap your application with the `ThemeProviderTailwind` component:
+
+```tsx
+import { ThemeProviderTailwind } from 'packages/tailwind-design-pro/src/components/ThemeProvider';
+
+const App = () => {
+    const settings = {
+        theme: 'default', // or 'airbnb', 'slack', 'github', 'spotify'
+        themeType: 'light',
+        primaryColor: '#your-color',
+        fontFamily: 'your-font-family',
+        navTheme: 'light', // or 'dark'
+    };
+
+    return <ThemeProviderTailwind settings={settings}>{/* Your app components */}</ThemeProviderTailwind>;
+};
+```
+
+## Using the useTheme Hook
+
+The `useTheme` hook provides access to the current theme and theme-related functionality. Here's how to use it:
+
+```tsx
+import { useTheme } from 'packages/tailwind-design-pro/src/components/ThemeProvider';
+
+const YourComponent = () => {
+    const { themeName, theme, isDarkMode, toggleDarkMode } = useTheme();
+
+    return (
+        <div>
+            {/* Access theme colors */}
+            <div style={{ color: theme.colors.primary[500] }}>Primary Color</div>
+
+            {/* Use theme-specific styles */}
+            <button
+                style={{
+                    borderRadius: theme.borderRadius.DEFAULT,
+                    fontFamily: theme.fontFamily.sans.join(', '),
+                }}
+            >
+                Themed Button
+            </button>
+
+            {/* Toggle dark mode */}
+            <button onClick={toggleDarkMode}>Toggle {isDarkMode ? 'Light' : 'Dark'} Mode</button>
+        </div>
+    );
+};
+```
+
+### Available Properties from useTheme
+
+1. `themeName`: The current theme name ('default', 'airbnb', 'slack', 'github', or 'spotify')
+2. `theme`: The complete theme object containing all styling properties
+3. `isDarkMode`: Boolean indicating if dark mode is active
+4. `toggleDarkMode`: Function to toggle between light and dark modes
+
+## Theme Features
+
+### 1. Dark Mode Support
+
+-   Automatically handles dark mode through the `isDarkMode` state
+-   Persists dark mode preference in localStorage
+-   Applies appropriate dark mode classes to the document
+
+### 2. Dynamic Theme Switching
+
+-   Themes can be changed dynamically through the settings prop
+-   All theme properties are immediately applied when changed
+
+### 3. Component-Specific Styling
+
+Each theme includes specific styling for common components:
+
+-   Buttons (primary and secondary variants)
+-   Cards
+-   Input fields
+
+### 4. Color System
+
+-   Each theme includes a comprehensive color system with:
+    -   Primary colors
+    -   Secondary colors
+    -   Accent colors
+    -   Semantic colors (success, warning, error)
+    -   Neutral colors
+    -   Background colors
+    -   Text colors
+
+### 5. Typography
+
+-   Customizable font families for different text styles
+-   Consistent typography settings across themes
+
+## Best Practices
+
+1. **Theme Access**
+
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme properties directly
+    const primaryColor = theme.colors.primary[500];
+    ```
+
+2. **Dark Mode Handling**
+
+    ```tsx
+    const { isDarkMode, toggleDarkMode } = useTheme();
+    // Use isDarkMode to conditionally render styles
+    const backgroundColor = isDarkMode ? theme.colors.background.dark : theme.colors.background.light;
+    ```
+
+3. **Component Styling**
+
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme component styles
+    const buttonStyle = {
+        ...theme.components.buttons.primary,
+        // Add custom styles as needed
+    };
+    ```
+
+4. **Responsive Design**
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme's responsive values
+    const cardStyle = {
+        borderRadius: theme.borderRadius.md,
+        boxShadow: theme.boxShadow.DEFAULT,
+    };
+    ```
+
+## Theme Customization
+
+### Creating a Custom Theme
+
+You can create your own theme by following the `DefaultTheme` interface structure:
+
+```typescript
+const customTheme: DefaultTheme = {
+    name: 'custom',
+    colors: {
+        // Define your color palette
+    },
+    // Define other theme properties
+};
+```
+
+### Extending Existing Themes
+
+You can extend existing themes by importing them and modifying specific properties:
+
+```typescript
+import { defaultTheme } from './themes/default';
+
+const extendedTheme: DefaultTheme = {
+    ...defaultTheme,
+    name: 'extended',
+    colors: {
+        ...defaultTheme.colors,
+        primary: {
+            // Override primary colors
+        },
+    },
+};
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Theme Not Applying**
+
+    - Ensure the `ThemeProviderTailwind` is properly wrapped around your application
+    - Check if the theme name matches one of the available themes
+    - Verify that the settings prop is correctly configured
+
+2. **Dark Mode Not Working**
+
+    - Check if `navTheme` is properly set in the settings
+    - Verify that the dark mode classes are being applied to the document
+    - Ensure localStorage is accessible in your environment
+
+3. **Custom Styles Not Taking Effect**
+    - Verify that your custom theme follows the `DefaultTheme` interface
+    - Check if the theme is properly registered in the themes object
+    - Ensure the theme name is correctly referenced in the settings
+
+## Contributing
+
+When contributing to the theme system:
+
+1. Follow the existing theme structure
+2. Maintain consistency with other themes
+3. Include both light and dark mode variants
+4. Document any new theme properties or features
+5. Test the theme across different components and scenarios

package/lib/cdm-locales/en/settings.json

@@ -5,6 +5,8 @@
     "header": "Header",
     "footer": "Footer",
     "search_bar": "Search Bar",
+    "search_bar_on_scroll": "Show Search Bar on Scroll",
+    "search_bar_overlay": "Show Overlay on Search",
     "menu": "Menu",
     "menu_header": "Menu Header",
     "setting": "Setting",
@@ -15,5 +17,37 @@
     "other_setting": "Other Setting",
     "weak_mode": "Weak Mode",
     "light": "Light",
-    "dark": "Dark"
+    "dark": "Dark",
+    "font_family": "Font Family",
+    "select_theme": "Select Theme",
+    "scroll_threshold": "Searchbar Scroll Threshold",
+    "menu_divider_names": "Menu Divider Names",
+    "upper_menu_divider": "Upper Menu Divider",
+    "middle_menu_divider": "Middle Menu Divider",
+    "lower_menu_divider": "Lower Menu Divider",
+    "header_elements": "Header Elements",
+    "show_logo": "Show Logo",
+    "show_search_slot": "Show Search Slot",
+    "show_right_content": "Show Right Content",
+    "desktop_settings": "Desktop Settings",
+    "mobile_settings": "Mobile Settings",
+    "show_menu_toggle": "Show Menu Toggle",
+    "show_back_button": "Show Back Button",
+    "show_page_title": "Show Page Title",
+    "show_action_buttons": "Show Action Buttons",
+    "show_header": "Show Header",
+    "background_color": "Background Color",
+    "background_type": "Background Type",
+    "background": "Background",
+    "color": "Color",
+    "image": "Image",
+    "video": "Video",
+    "image_url": "Image URL",
+    "video_url": "Video URL",
+    "video_thumbnail": "Video Thumbnail URL",
+    "desktop_background": "Desktop Background",
+    "mobile_background": "Mobile Background",
+    "device_settings": "Device Settings",
+    "desktop_tab": "Desktop",
+    "mobile_tab": "Mobile"
 }

package/lib/cdm-locales/es/settings.json

@@ -5,15 +5,49 @@
     "header": "Encabezado",
     "footer": "Pie de Página",
     "search_bar": "Barra de Búsqueda",
+    "search_bar_on_scroll": "Mostrar Barra de Búsqueda al Desplazar",
+    "search_bar_overlay": "Mostrar Superposición en Búsqueda",
     "menu": "Menú",
     "menu_header": "Encabezado del Menú",
     "setting": "Configuración",
-    "page_style_settings": "Configuraciones de Estilo de Página",
+    "page_style_settings": "Configuración de Estilo de Página",
     "theme_color": "Color del Tema",
     "navigation_mode": "Modo de Navegación",
-    "regional_rettings": "Configuraciones Regionales",
+    "regional_rettings": "Configuración Regional",
     "other_setting": "Otra Configuración",
     "weak_mode": "Modo Débil",
     "light": "Claro",
-    "dark": "Oscuro"
+    "dark": "Oscuro",
+    "font_family": "Familia de Fuente",
+    "select_theme": "Seleccionar Tema",
+    "scroll_threshold": "Umbral de Desplazamiento de la Barra de Búsqueda",
+    "menu_divider_names": "Nombres de Divisores de Menú",
+    "upper_menu_divider": "Divisor Superior del Menú",
+    "middle_menu_divider": "Divisor Medio del Menú",
+    "lower_menu_divider": "Divisor Inferior del Menú",
+    "header_elements": "Elementos del Encabezado",
+    "show_logo": "Mostrar Logo",
+    "show_search_slot": "Mostrar Espacio de Búsqueda",
+    "show_right_content": "Mostrar Contenido Derecho",
+    "desktop_settings": "Configuración de Escritorio",
+    "mobile_settings": "Configuración Móvil",
+    "show_menu_toggle": "Mostrar Alternador de Menú",
+    "show_back_button": "Mostrar Botón Atrás",
+    "show_page_title": "Mostrar Título de Página",
+    "show_action_buttons": "Mostrar Botones de Acción",
+    "show_header": "Mostrar Encabezado",
+    "background_color": "Color de Fondo",
+    "background_type": "Tipo de Fondo",
+    "background": "Fondo",
+    "color": "Color",
+    "image": "Imagen",
+    "video": "Video",
+    "image_url": "URL de Imagen",
+    "video_url": "URL de Video",
+    "video_thumbnail": "URL de Miniatura de Video",
+    "desktop_background": "Fondo de Escritorio",
+    "mobile_background": "Fondo Móvil",
+    "device_settings": "Configuración de Dispositivo",
+    "desktop_tab": "Escritorio",
+    "mobile_tab": "Móvil"
 }

package/lib/components/Layout/BasicLayout/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BasicLayoutProps, GlobalHeaderProps } from '@admin-layout/client';
-export declare const useHorizontalScroll: ({ scrolled, setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
-    scrolled: any;
+export declare const useHorizontalScroll: ({ setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
     setScrolled: any;
     setSearchOptionsShown: any;
     onScrollReachEnd: any;

package/lib/components/Layout/BasicLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAGpB,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,mBAAmB;;;;;uCA6B/B,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAmI3F,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAIpB,MAAM,sBAAsB,CAAC;AAU9B,eAAO,MAAM,mBAAmB,GAAI;;;;CAAwD,sCAkC3F,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA8Q3F,CAAC"}