@industry-theme/theme-editor-panel 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+# Industry Theme Editor Panel
+
+A panel extension for customizing the Industry theme colors and appearance in real-time. This panel is built with the `@principal-ade/panel-framework-core` and follows the [Panel Extension Store Specification V2](https://github.com/principal-ade/panel-framework/blob/main/PANEL_EXTENSION_STORE_SPECIFICATION_V2.md).
+
+## Features
+
+- **Live Color Customization**: Modify theme colors across different categories in real-time
+- **Interactive Color Picker**: Visual hex color picker with manual input support
+- **Organized by Category**: Colors grouped into Primary, Background, Text, UI, and Status categories
+- **Reset Functionality**: Individual color reset buttons to revert to defaults
+- **Industry Theme Integration**: Seamlessly integrates with `@principal-ade/industry-theme`
+
+## Installation
+
+```bash
+# Install dependencies
+bun install
+
+# Build the panel
+bun run build
+
+# Development mode (watch for changes)
+bun run dev
+```
+
+## Development
+
+### Project Structure
+
+```
+src/
+├── panels/
+│   └── ThemeEditorPanel.tsx       # Main theme editor component
+├── components/
+│   └── ColorPickerInput.tsx       # Color picker input component
+├── types/
+│   └── index.ts                   # TypeScript type definitions
+└── index.tsx                      # Panel exports and lifecycle hooks
+```
+
+### Color Categories
+
+The theme editor organizes colors into the following categories:
+
+- **Primary Colors**: Primary, Secondary, Accent
+- **Background Colors**: Background, Background Light/Dark, Secondary, Tertiary
+- **Text Colors**: Text, Text Secondary, Text Tertiary
+- **UI Colors**: Border, Border Light/Dark
+- **Status Colors**: Success, Warning, Error, Info
+
+### Running Storybook
+
+```bash
+# Start Storybook for interactive development
+bun run storybook
+
+# Build Storybook for deployment
+bun run build-storybook
+```
+
+## Usage
+
+Once installed in a host application, the Theme Editor panel will be available with:
+
+- **Panel ID**: `industry-theme.theme-editor`
+- **Display Name**: Theme Editor
+- **Icon**: 🎨
+
+## Dependencies
+
+- **react-colorful**: Hex color picker component
+- **lucide-react**: Icon library
+- **@principal-ade/industry-theme**: Industry theme package
+- **@principal-ade/panel-framework-core**: Panel framework integration
+
+## Building
+
+```bash
+# Clean and build
+bun run build
+
+# Type checking
+bun run typecheck
+
+# Linting
+bun run lint
+bun run lint:fix
+
+# Formatting
+bun run format
+bun run format:check
+```
+
+## Publishing
+
+```bash
+# Build the package
+bun run build
+
+# Publish to NPM
+npm publish --access public
+```
+
+## License
+
+MIT © Principal ADE
+
+## Contributing
+
+Contributions welcome! Please read the contributing guidelines first.

package/dist/components/ColorPickerInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ColorPickerInputProps {
+    label: string;
+    value: string;
+    onChange: (color: string) => void;
+    onReset?: () => void;
+    defaultValue?: string;
+}
+export declare const ColorPickerInput: React.FC<ColorPickerInputProps>;
+export {};
+//# sourceMappingURL=ColorPickerInput.d.ts.map

package/dist/components/ColorPickerInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput.d.ts","sourceRoot":"","sources":["../../src/components/ColorPickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8K5D,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import type { PanelDefinition } from './types';
+/**
+ * Export array of panel definitions.
+ * This is the required export for panel extensions.
+ */
+export declare const panels: PanelDefinition[];
+/**
+ * Optional: Called once when the entire package is loaded.
+ * Use this for package-level initialization.
+ */
+export declare const onPackageLoad: () => Promise<void>;
+/**
+ * Optional: Called once when the package is unloaded.
+ * Use this for package-level cleanup.
+ */
+export declare const onPackageUnload: () => Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA4BnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC"}

package/dist/mocks/panelContext.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { PanelComponentProps, PanelContextValue, PanelActions, PanelEventEmitter } from '../types';
+/**
+ * Mock Panel Context for Storybook
+ */
+export declare const createMockContext: (overrides?: Partial<PanelContextValue>) => PanelContextValue;
+/**
+ * Mock Panel Actions for Storybook
+ */
+export declare const createMockActions: (overrides?: Partial<PanelActions>) => PanelActions;
+/**
+ * Mock Event Emitter for Storybook
+ */
+export declare const createMockEvents: () => PanelEventEmitter;
+/**
+ * Mock Panel Props Provider
+ * Wraps components with mock context for Storybook
+ */
+export declare const MockPanelProvider: React.FC<{
+    children: (props: PanelComponentProps) => React.ReactNode;
+    contextOverrides?: Partial<PanelContextValue>;
+    actionsOverrides?: Partial<PanelActions>;
+}>;
+//# sourceMappingURL=panelContext.d.ts.map

package/dist/mocks/panelContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelContext.d.ts","sourceRoot":"","sources":["../../src/mocks/panelContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EAIlB,MAAM,UAAU,CAAC;AA+BlB;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,iBAAiB,CAAC,KACrC,iBAiHF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,YAAY,CAAC,KAChC,YAkBD,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,iBAwCnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC1C,CAMA,CAAC"}

package/dist/panels/ThemeEditorPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PanelComponentProps } from '../types';
+/**
+ * ThemeEditorPanel - A panel for customizing the Industry theme colors.
+ *
+ * This panel allows users to:
+ * - Customize theme colors across different categories
+ * - Preview changes in real-time
+ * - Reset individual colors to defaults
+ * - Save theme customizations
+ */
+export declare const ThemeEditorPanel: React.FC<PanelComponentProps>;
+//# sourceMappingURL=ThemeEditorPanel.d.ts.map

package/dist/panels/ThemeEditorPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ThemeEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAgQpD;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAM1D,CAAC"}

package/dist/panels/ThemeEditorPanel.stories.d.ts

@@ -0,0 +1,60 @@
+import type { StoryObj } from '@storybook/react';
+/**
+ * ThemeEditorPanel allows users to customize the Industry theme colors.
+ * It provides an interactive interface for modifying theme colors across
+ * different categories including primary, background, text, UI, and status colors.
+ */
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("@principal-ade/panel-framework-core").PanelComponentProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        context: import("@principal-ade/panel-framework-core").PanelContextValue;
+        actions: import("@principal-ade/panel-framework-core").PanelActions;
+        events: import("@principal-ade/panel-framework-core").PanelEventEmitter;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    args: {
+        context: import("@principal-ade/panel-framework-core").PanelContextValue;
+        actions: import("@principal-ade/panel-framework-core").PanelActions;
+        events: import("@principal-ade/panel-framework-core").PanelEventEmitter;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default theme editor view with all color categories
+ */
+export declare const Default: Story;
+/**
+ * Theme editor in a light theme context
+ */
+export declare const LightTheme: Story;
+/**
+ * Compact view - ideal for smaller viewports
+ */
+export declare const CompactView: Story;
+/**
+ * Full height view - typical panel layout
+ */
+export declare const FullHeight: Story;
+/**
+ * Theme editor with custom repository context
+ */
+export declare const WithRepository: Story;
+/**
+ * Workspace-only context (no repository)
+ */
+export declare const WorkspaceOnly: Story;
+/**
+ * Interactive demo with custom action handlers
+ */
+export declare const Interactive: Story;
+//# sourceMappingURL=ThemeEditorPanel.stories.d.ts.map

package/dist/panels/ThemeEditorPanel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeEditorPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/ThemeEditorPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD;;;;GAIG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAyB+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC"}