hazo_config 1.0.0

package/.cursor/rules/general.mdc

@@ -0,0 +1,51 @@
+---
+description: General rules always to be used
+globs: *
+alwaysApply: true
+---
+
+[General]
+- Start all chats wtih 🐸
+- End all chats with 🦊
+- Only implement if you're 90% sure of requirement or the fix.  Otherwise ask questions or things for me to check.
+- after making a change, for the pages that had both direct and indirect impact, make a curl request to ensrue there are no errors. Check the terminal as well for errors. Also make sure to test any API endpoints and fix appropriately.  If after 3 attempts you cannot fix, provide a summary of the issue and advice on next steps.
+
+[Style]
+- Always use snake_case
+- Include a description of purpose of file at top of each new file
+- Include comments at the top of each function or major section of code
+- Add comments for each file and also major section
+- Add a class name identifier for div tags prefixed with "cls_" so that they can be easily identified and searched.  Reused divs should have the same name.
+
+[UI_Behaviour]
+- All data input fields (not interaction fields), it should be non-editable but there is a lucide pencil icon next to it.  When pressed, it'll allow to edit the inptu field, and a lucide circle-check-big will be used for the "Submit"/"save"/"update" button, and a lucide circle-x will be used for the cancel button.
+
+
+[Technology]
+- use the following tech stack:
+  - React
+  - Next.js
+  - TailwindCSS
+  - TypeScript
+  - Shadcn/UI
+- use npm shadcn@latest add * to add components. Do not use shadcn-ui
+
+[Architecture]
+- store all configuration values in config.ini file.  Always put hard coded values that have chance to change in config.ini
+- store any sensitive data in .env file (to be excluded in git)
+- create reusable components to prevent having redundant code and to improve maintainability
+- Ensure you have a minimum of one file per route
+- Group pages into directories for maintainability
+
+[Database]
+- database schema can be gound on .cursor/rules/db_schema.md
+
+[Logging]
+- use winston as the logging service for backend logging under a filename from config.ini logging.logfile.  Hvae a log file per day.
+-  When there's an error that happens, always log on the serverside.
+- Use the config.
+- In the logging, always include the filename, line number, message and relevant data to help troubleshoot in future in the json log entry
+- When error messages are shown to the user, they should always be logged verbatem in the serverside log file as well
+- pretty print the json output
+- don't import the logger in the client side code
+- whenever there's any actions on the database, or any API calls, please add details of the payload and update as well as the resulsts in the log file to help debug issues.  For API calls, don't save any base64 data as it is too large.

package/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import { mergeConfig } from 'vite'
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '../src'),
+        },
+      },
+      optimizeDeps: {
+        include: ['@storybook/react'],
+      },
+    })
+  },
+}
+export default config
+

package/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react'
+
+// Import global styles
+import '../src/styles/globals.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview
+

package/CODE_REVIEW.md

@@ -0,0 +1,81 @@
+# Code Review Summary
+
+## Overview
+The HazoConfig library has been reviewed and integrated into the component library with Storybook testing support.
+
+## Components Created
+
+### 1. MockConfigProvider (`src/lib/mock_config_provider.ts`)
+- **Purpose**: In-memory config provider for browser/Storybook testing
+- **Features**:
+  - Implements `ConfigProvider` interface
+  - Stores configuration in memory (no file system dependency)
+  - Supports all CRUD operations
+  - Includes `getAllSections()` and `reset()` methods for testing
+
+### 2. ConfigViewer (`src/components/config_viewer.tsx`)
+- **Purpose**: Display and edit configuration values with inline editing
+- **Features**:
+  - Displays all configuration sections
+  - Inline editing with pencil icon (following UI_Behaviour rules)
+  - Save/cancel buttons (circle-check-big and circle-x icons)
+  - Non-editable display by default
+  - Auto-refresh after updates
+
+### 3. ConfigEditor (`src/components/config_editor.tsx`)
+- **Purpose**: Advanced configuration editor with section navigation
+- **Features**:
+  - Section sidebar navigation
+  - Direct editing of all values
+  - Add new key-value pairs
+  - Refresh and Save buttons
+  - Full-screen layout
+
+## Storybook Stories
+
+### ConfigViewer Stories
+- `Default` - Full sample configuration
+- `DatabaseConfig` - Database section only
+- `LoggingConfig` - Logging section only
+- `ApiConfig` - API section only
+- `EmptyConfig` - Empty configuration
+- `MultipleSections` - Multiple sections example
+
+### ConfigEditor Stories
+- `Default` - Full configuration with all sections
+- `MinimalConfig` - Simple configuration
+- `EmptyConfig` - Empty state
+- `ComplexConfig` - Complex multi-section configuration
+
+## Code Quality
+
+### ✅ Strengths
+1. **Type Safety**: Full TypeScript support with proper interfaces
+2. **Code Style**: Follows snake_case convention
+3. **Documentation**: All files include purpose descriptions and function comments
+4. **UI Compliance**: Follows UI_Behaviour rules (pencil icon, non-editable by default)
+5. **Class Naming**: Uses `cls_` prefix for div class names
+6. **Separation of Concerns**: Mock provider separate from real implementation
+
+### ⚠️ Notes
+1. **Node.js Dependencies**: The `HazoConfig` class uses Node.js `fs` module and cannot run in browser. This is expected and correct for a Node.js library.
+2. **Type Definitions**: Added `@types/node` and `@types/ini` to devDependencies for proper TypeScript support.
+3. **Unused Variable**: `originalContent` in `HazoConfig` is set but not read - this is intentional for future formatting preservation features.
+
+## Dependencies Added
+- `ini` - For INI file parsing
+- `@types/node` - Node.js type definitions
+- `@types/ini` - INI package type definitions
+
+## Testing
+All components are testable in Storybook:
+- Run `npm run storybook` to view and test components
+- All stories use `MockConfigProvider` for browser compatibility
+- Components can be tested with different configuration scenarios
+
+## Next Steps
+1. Install dependencies: `npm install`
+2. Run Storybook: `npm run storybook`
+3. Test components in Storybook interface
+4. Add more components as needed for config management UI
+

package/README.md

@@ -0,0 +1,92 @@
+# Hazo Config Component Library
+
+A React component library for managing configuration with Storybook for component testing and documentation.
+
+## Tech Stack
+
+- **React** - UI library
+- **TypeScript** - Type safety
+- **TailwindCSS** - Styling
+- **Shadcn/UI** - Component primitives
+- **Storybook** - Component development and testing
+- **Vite** - Build tool
+
+## Getting Started
+
+### Installation
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Run Storybook to develop and test components:
+
+```bash
+npm run storybook
+```
+
+This will start Storybook on `http://localhost:6006`
+
+### Building
+
+Build the library:
+
+```bash
+npm run build
+```
+
+Build Storybook for static deployment:
+
+```bash
+npm run build-storybook
+```
+
+## Project Structure
+
+```
+hazo_config/
+├── src/
+│   ├── components/          # React components
+│   │   ├── example_component.tsx
+│   │   └── example_component.stories.tsx
+│   ├── lib/                 # Utility functions
+│   │   └── utils.ts
+│   ├── styles/              # Global styles
+│   │   └── globals.css
+│   └── index.ts             # Main entry point
+├── .storybook/              # Storybook configuration
+├── components.json          # Shadcn/UI configuration
+├── tailwind.config.js       # TailwindCSS configuration
+└── tsconfig.json            # TypeScript configuration
+```
+
+## Adding Components
+
+1. Create your component in `src/components/`
+2. Create a corresponding `.stories.tsx` file for Storybook
+3. Export the component from `src/components/index.ts`
+4. Export from `src/index.ts` to make it available in the library
+
+## Adding Shadcn/UI Components
+
+Use the Shadcn CLI to add components:
+
+```bash
+npx shadcn@latest add [component-name]
+```
+
+## Code Style
+
+- Use **snake_case** for file names and variables
+- Include file purpose description at the top of each file
+- Add comments for functions and major code sections
+- Use `cls_` prefix for div class names (e.g., `cls_example_component`)
+
+## License
+
+MIT
+

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "hazo_config",
+  "version": "1.0.0",
+  "description": "Config wrapper with error handling",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "storybook": "npx storybook dev -p 6006",
+    "build-storybook": "npx storybook build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pub12/hazo_config.git"
+  },
+  "keywords": [
+    "config",
+    "manager",
+    "config",
+    "component-library",
+    "react",
+    "typescript"
+  ],
+  "author": "Pubs Abayasiri",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pub12/hazo_config/issues"
+  },
+  "homepage": "https://github.com/pub12/hazo_config#readme",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "lucide-react": "^0.344.0",
+    "ini": "^4.1.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/ini": "^4.1.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "storybook": "^8.0.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

package/src/components/config_editor.stories.tsx

@@ -0,0 +1,116 @@
+// Storybook stories for ConfigEditor component
+// Demonstrates the config editor component with mock config provider
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { ConfigEditor } from './config_editor'
+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',
+    password: 'secret123',
+  },
+  logging: {
+    logfile: 'logs/app.log',
+    level: 'info',
+    max_size: '10MB',
+    format: 'json',
+  },
+  api: {
+    base_url: 'https://api.example.com',
+    timeout: '5000',
+    retry_count: '3',
+    rate_limit: '100',
+  },
+  server: {
+    host: '0.0.0.0',
+    port: '3000',
+    env: 'production',
+    cors_enabled: 'true',
+  },
+}
+
+/**
+ * Meta configuration for ConfigEditor stories
+ */
+const meta: Meta<typeof ConfigEditor> = {
+  title: 'Components/ConfigEditor',
+  component: ConfigEditor,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  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 ConfigEditor>
+
+/**
+ * Default story with full configuration
+ */
+export const Default: Story = {
+  args: {
+    config_provider: new MockConfigProvider(sample_config),
+  },
+}
+
+/**
+ * Story with minimal configuration
+ */
+export const MinimalConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider({
+      app: {
+        name: 'My App',
+        version: '1.0.0',
+      },
+    }),
+  },
+}
+
+/**
+ * Story with empty configuration
+ */
+export const EmptyConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider(),
+  },
+}
+
+/**
+ * Story with complex configuration
+ */
+export const ComplexConfig: Story = {
+  args: {
+    config_provider: new MockConfigProvider({
+      ...sample_config,
+      features: {
+        feature_a: 'enabled',
+        feature_b: 'disabled',
+        feature_c: 'beta',
+      },
+      integrations: {
+        stripe_api_key: 'sk_test_123456',
+        sendgrid_api_key: 'SG.abcdef',
+        aws_region: 'us-east-1',
+      },
+    }),
+  },
+}
+