hazo_config 1.0.0

package/src/components/config_editor.tsx

@@ -0,0 +1,214 @@
+// Config editor component for managing configuration
+// Provides a more advanced interface for editing configuration values
+
+import React, { useState, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+import type { ConfigProvider } from '@/lib/types'
+import { RefreshCw, Save } from 'lucide-react'
+
+/**
+ * Config editor component props
+ */
+export interface ConfigEditorProps {
+  /**
+   * The config provider instance
+   */
+  config_provider: ConfigProvider
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+  /**
+   * Callback when config is updated
+   */
+  on_update?: () => void
+}
+
+/**
+ * Config editor component
+ * Provides interface for viewing and editing configuration with refresh and save capabilities
+ * @param props - Component props
+ * @returns React component
+ */
+export const ConfigEditor: React.FC<ConfigEditorProps> = ({
+  config_provider,
+  className,
+  on_update,
+}) => {
+  const [sections, set_sections] = useState<Record<string, Record<string, string>>>({})
+  const [selected_section, set_selected_section] = useState<string | null>(null)
+  const [new_section_name, set_new_section_name] = useState<string>('')
+  const [new_key, set_new_key] = useState<string>('')
+  const [new_value, set_new_value] = useState<string>('')
+
+  /**
+   * Load configuration from provider
+   */
+  const load_config = () => {
+    const all_sections: Record<string, Record<string, string>> = {}
+    
+    if ('getAllSections' in config_provider && typeof config_provider.getAllSections === 'function') {
+      const all = (config_provider as any).getAllSections()
+      Object.assign(all_sections, all)
+    }
+    
+    set_sections(all_sections)
+    if (!selected_section && Object.keys(all_sections).length > 0) {
+      set_selected_section(Object.keys(all_sections)[0])
+    }
+  }
+
+  useEffect(() => {
+    load_config()
+  }, [config_provider])
+
+  /**
+   * Handle refresh button click
+   */
+  const handle_refresh = () => {
+    config_provider.refresh()
+    load_config()
+    if (on_update) {
+      on_update()
+    }
+  }
+
+  /**
+   * Handle save button click
+   */
+  const handle_save = () => {
+    config_provider.save()
+    load_config()
+    if (on_update) {
+      on_update()
+    }
+  }
+
+  /**
+   * Add a new key-value pair to selected section
+   */
+  const handle_add_key = () => {
+    if (selected_section && new_key && new_value) {
+      config_provider.set(selected_section, new_key, new_value)
+      set_new_key('')
+      set_new_value('')
+      load_config()
+      if (on_update) {
+        on_update()
+      }
+    }
+  }
+
+  /**
+   * Update a config value
+   */
+  const handle_update_value = (section: string, key: string, value: string) => {
+    config_provider.set(section, key, value)
+    load_config()
+  }
+
+  const current_section_data = selected_section ? sections[selected_section] : null
+
+  return (
+    <div className={cn('cls_config_editor space-y-4', className)}>
+      <div className="cls_config_editor_header flex items-center justify-between border-b pb-2">
+        <h2 className="text-xl font-semibold">Configuration Editor</h2>
+        <div className="flex gap-2">
+          <button
+            onClick={handle_refresh}
+            className="px-3 py-1 border rounded hover:bg-muted flex items-center gap-2"
+            aria-label="Refresh"
+          >
+            <RefreshCw size={16} />
+            Refresh
+          </button>
+          <button
+            onClick={handle_save}
+            className="px-3 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90 flex items-center gap-2"
+            aria-label="Save"
+          >
+            <Save size={16} />
+            Save
+          </button>
+        </div>
+      </div>
+
+      <div className="cls_config_editor_content grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="cls_config_sections_list border rounded p-4">
+          <h3 className="font-semibold mb-2">Sections</h3>
+          <div className="space-y-1">
+            {Object.keys(sections).map((section_name) => (
+              <button
+                key={section_name}
+                onClick={() => set_selected_section(section_name)}
+                className={cn(
+                  'w-full text-left px-2 py-1 rounded text-sm',
+                  selected_section === section_name
+                    ? 'bg-primary text-primary-foreground'
+                    : 'hover:bg-muted'
+                )}
+              >
+                {section_name}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="cls_config_section_content md:col-span-2 border rounded p-4">
+          {selected_section ? (
+            <>
+              <h3 className="font-semibold mb-4">{selected_section}</h3>
+              <div className="space-y-3">
+                {current_section_data &&
+                  Object.entries(current_section_data).map(([key, value]) => (
+                    <div key={key} className="cls_config_item">
+                      <label className="block text-sm font-medium mb-1">{key}</label>
+                      <input
+                        type="text"
+                        value={value}
+                        onChange={(e) =>
+                          handle_update_value(selected_section, key, e.target.value)
+                        }
+                        className="w-full px-2 py-1 border rounded"
+                      />
+                    </div>
+                  ))}
+                
+                <div className="cls_add_new_key border-t pt-3 mt-3">
+                  <h4 className="text-sm font-medium mb-2">Add New Key</h4>
+                  <div className="space-y-2">
+                    <input
+                      type="text"
+                      placeholder="Key name"
+                      value={new_key}
+                      onChange={(e) => set_new_key(e.target.value)}
+                      className="w-full px-2 py-1 border rounded text-sm"
+                    />
+                    <input
+                      type="text"
+                      placeholder="Value"
+                      value={new_value}
+                      onChange={(e) => set_new_value(e.target.value)}
+                      className="w-full px-2 py-1 border rounded text-sm"
+                    />
+                    <button
+                      onClick={handle_add_key}
+                      className="px-3 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90 text-sm"
+                    >
+                      Add Key
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="text-center text-muted-foreground py-8">
+              Select a section to view/edit
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+

package/src/components/config_viewer.stories.tsx

@@ -0,0 +1,126 @@
+// Storybook stories for ConfigViewer component
+// Demonstrates the config viewer component with mock config provider
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { ConfigViewer } from './config_viewer'
+import { MockConfigProvider } from '@/lib/mock_config_provider'
+
+/**
+ * Sample configuration data for testing
+ */
+const sample_config = {
+  database: {
+    host: 'localhost',
+    port: '5432',
+    name: 'myapp_db',
+    user: 'admin',
+  },
+  logging: {
+    logfile: 'logs/app.log',
+    level: 'info',
+    max_size: '10MB',
+  },
+  api: {
+    base_url: 'https://api.example.com',
+    timeout: '5000',
+    retry_count: '3',
+  },
+}
+
+/**
+ * Meta configuration for ConfigViewer stories
+ */
+const meta: Meta<typeof ConfigViewer> = {
+  title: 'Components/ConfigViewer',
+  component: ConfigViewer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    config_provider: {
+      control: false,
+      description: 'The config provider instance',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ConfigViewer>
+
+/**
+ * Default story with sample configuration
+ */
+export const Default: Story = {
+  args: {
+    config_provider: new MockConfigProvider(sample_config),
+  },
+}
+
+/**
+ * Story with database configuration only
+ */
+export const DatabaseConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider({
+      database: sample_config.database,
+    }),
+  },
+}
+
+/**
+ * Story with logging configuration
+ */
+export const LoggingConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider({
+      logging: sample_config.logging,
+    }),
+  },
+}
+
+/**
+ * Story with API configuration
+ */
+export const ApiConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider({
+      api: sample_config.api,
+    }),
+  },
+}
+
+/**
+ * Story with empty configuration
+ */
+export const EmptyConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider(),
+  },
+}
+
+/**
+ * Story with multiple sections
+ */
+export const MultipleSections: Story = {
+  args: {
+    config_provider: new MockConfigProvider({
+      ...sample_config,
+      server: {
+        host: '0.0.0.0',
+        port: '3000',
+        env: 'production',
+      },
+      app: {
+        name: 'My App',
+        version: '1.0.0',
+        debug: 'false',
+      },
+    }),
+  },
+}
+

package/src/components/config_viewer.tsx

@@ -0,0 +1,170 @@
+// Config viewer component for displaying configuration data
+// Displays configuration sections and values in a readable format
+
+import React, { useState, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+import type { ConfigProvider } from '@/lib/types'
+import { Pencil, CheckCircle2, XCircle } from 'lucide-react'
+
+/**
+ * Config viewer component props
+ */
+export interface ConfigViewerProps {
+  /**
+   * The config provider instance
+   */
+  config_provider: ConfigProvider
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+  /**
+   * Callback when config is updated
+   */
+  on_update?: () => void
+}
+
+/**
+ * Config viewer component
+ * Displays configuration sections and allows viewing/editing values
+ * @param props - Component props
+ * @returns React component
+ */
+export const ConfigViewer: React.FC<ConfigViewerProps> = ({
+  config_provider,
+  className,
+  on_update,
+}) => {
+  const [sections, set_sections] = useState<Record<string, Record<string, string>>>({})
+  const [editing, set_editing] = useState<{ section: string; key: string } | null>(null)
+  const [edit_value, set_edit_value] = useState<string>('')
+
+  /**
+   * Load configuration from provider
+   */
+  const load_config = () => {
+    const all_sections: Record<string, Record<string, string>> = {}
+    
+    // Try to get all sections - if provider has getAllSections, use it
+    if ('getAllSections' in config_provider && typeof config_provider.getAllSections === 'function') {
+      const all = (config_provider as any).getAllSections()
+      Object.assign(all_sections, all)
+    } else {
+      // Fallback: try common section names
+      const common_sections = ['database', 'logging', 'api', 'server', 'app']
+      for (const section of common_sections) {
+        const section_data = config_provider.getSection(section)
+        if (section_data) {
+          all_sections[section] = section_data
+        }
+      }
+    }
+    
+    set_sections(all_sections)
+  }
+
+  useEffect(() => {
+    load_config()
+  }, [config_provider])
+
+  /**
+   * Start editing a config value
+   */
+  const start_edit = (section: string, key: string) => {
+    const value = config_provider.get(section, key) || ''
+    set_editing({ section, key })
+    set_edit_value(value)
+  }
+
+  /**
+   * Cancel editing
+   */
+  const cancel_edit = () => {
+    set_editing(null)
+    set_edit_value('')
+  }
+
+  /**
+   * Save edited value
+   */
+  const save_edit = () => {
+    if (editing) {
+      config_provider.set(editing.section, editing.key, edit_value)
+      config_provider.save()
+      load_config()
+      set_editing(null)
+      set_edit_value('')
+      if (on_update) {
+        on_update()
+      }
+    }
+  }
+
+  return (
+    <div className={cn('cls_config_viewer space-y-4', className)}>
+      {Object.keys(sections).length === 0 ? (
+        <div className="p-4 text-center text-muted-foreground">
+          No configuration sections found
+        </div>
+      ) : (
+        Object.entries(sections).map(([section_name, section_data]) => (
+          <div key={section_name} className="cls_config_section border rounded-lg p-4">
+            <h3 className="text-lg font-semibold mb-3">{section_name}</h3>
+            <div className="space-y-2">
+              {Object.entries(section_data).map(([key, value]) => {
+                const is_editing = editing?.section === section_name && editing?.key === key
+                
+                return (
+                  <div key={key} className="cls_config_item flex items-center gap-2">
+                    <div className="flex-1">
+                      <div className="text-sm font-medium text-muted-foreground">{key}</div>
+                      {is_editing ? (
+                        <div className="flex items-center gap-2 mt-1">
+                          <input
+                            type="text"
+                            value={edit_value}
+                            onChange={(e) => set_edit_value(e.target.value)}
+                            className="flex-1 px-2 py-1 border rounded text-sm"
+                            autoFocus
+                          />
+                          <button
+                            onClick={save_edit}
+                            className="text-green-600 hover:text-green-700"
+                            aria-label="Save"
+                          >
+                            <CheckCircle2 size={20} />
+                          </button>
+                          <button
+                            onClick={cancel_edit}
+                            className="text-red-600 hover:text-red-700"
+                            aria-label="Cancel"
+                          >
+                            <XCircle size={20} />
+                          </button>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2 mt-1">
+                          <div className="flex-1 px-2 py-1 bg-muted rounded text-sm">
+                            {value || '(empty)'}
+                          </div>
+                          <button
+                            onClick={() => start_edit(section_name, key)}
+                            className="text-blue-600 hover:text-blue-700"
+                            aria-label="Edit"
+                          >
+                            <Pencil size={18} />
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}
+

package/src/components/example_component.stories.tsx

@@ -0,0 +1,59 @@
+// Storybook stories for the ExampleComponent
+// Demonstrates how to create stories for components
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { ExampleComponent } from './example_component'
+
+/**
+ * Meta configuration for ExampleComponent stories
+ */
+const meta: Meta<typeof ExampleComponent> = {
+  title: 'Components/ExampleComponent',
+  component: ExampleComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title to display',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ExampleComponent>
+
+/**
+ * Default story for ExampleComponent
+ */
+export const Default: Story = {
+  args: {
+    title: 'Example Component',
+  },
+}
+
+/**
+ * Story with custom title
+ */
+export const CustomTitle: Story = {
+  args: {
+    title: 'Custom Title Example',
+  },
+}
+
+/**
+ * Story with custom styling
+ */
+export const CustomStyling: Story = {
+  args: {
+    title: 'Styled Component',
+    className: 'bg-blue-100 border-blue-500',
+  },
+}
+

package/src/components/example_component.tsx

@@ -0,0 +1,39 @@
+// Example component for the config management library
+// This is a placeholder component to demonstrate the setup
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Example component props interface
+ */
+export interface ExampleComponentProps {
+  /**
+   * The title to display
+   */
+  title?: string
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+}
+
+/**
+ * Example component for demonstrating the component library setup
+ * @param props - Component props
+ * @returns React component
+ */
+export const ExampleComponent: React.FC<ExampleComponentProps> = ({
+  title = 'Example Component',
+  className,
+}) => {
+  return (
+    <div className={cn('cls_example_component p-4 border rounded-lg', className)}>
+      <h2 className="text-xl font-semibold">{title}</h2>
+      <p className="text-muted-foreground mt-2">
+        This is an example component for the config management library.
+      </p>
+    </div>
+  )
+}
+

package/src/components/index.ts

@@ -0,0 +1,9 @@
+// Component exports
+// Export all components from this file for easy importing
+
+export { ExampleComponent } from './example_component'
+export { ConfigViewer } from './config_viewer'
+export { ConfigEditor } from './config_editor'
+export type { ConfigViewerProps } from './config_viewer'
+export type { ConfigEditorProps } from './config_editor'
+

package/src/index.ts

@@ -0,0 +1,7 @@
+// Main entry point for the component library
+// Export all components and utilities from this file
+
+export * from './components'
+export * from './lib/utils'
+export * from './lib'
+