@owcs/ui 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +164 -0
  2. package/dist/index.d.ts +131 -0
  3. package/dist/index.js +50692 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/js-yaml-BBnY0952.js +1349 -0
  6. package/dist/js-yaml-BBnY0952.js.map +1 -0
  7. package/package.json +42 -0
package/README.md ADDED
@@ -0,0 +1,164 @@
1
+ # @owcs/ui
2
+
3
+ A web component library for rendering OWCS (Open Web Component Specification) YAML files in a user-friendly, interactive format.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Beautiful UI**: Professional, modern design with smooth animations
8
+ - 🔍 **Search & Filter**: Quickly find components by tag name
9
+ - 📝 **TypeScript Code Generation**: Automatically displays props and events as TypeScript code
10
+ - ✅ **Schema Validation**: Built-in OWCS schema validation
11
+ - 🌐 **URL Support**: Load YAML from URLs or inline strings
12
+ - 📱 **Responsive**: Works on all screen sizes
13
+ - ⚡ **Fast**: Built with Lit for optimal performance
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ pnpm add @owcs/ui
19
+ ```
20
+
21
+ Or with npm:
22
+
23
+ ```bash
24
+ npm install @owcs/ui
25
+ ```
26
+
27
+ ## Usage
28
+
29
+ ### Basic Usage
30
+
31
+ ```html
32
+ <!DOCTYPE html>
33
+ <html>
34
+ <head>
35
+ <script type="module" src="node_modules/@owcs/ui/dist/owcs-viewer.js"></script>
36
+ </head>
37
+ <body>
38
+ <owcs-viewer
39
+ yaml="owcs: 1.0.0
40
+ info:
41
+ title: My Components
42
+ version: 1.0.0
43
+ components:
44
+ webComponents:
45
+ my-button:
46
+ tagName: my-button
47
+ props:
48
+ schema:
49
+ type: object
50
+ properties:
51
+ label:
52
+ type: string
53
+ required:
54
+ - label
55
+ events:
56
+ click:
57
+ type: CustomEvent"
58
+ ></owcs-viewer>
59
+ </body>
60
+ </html>
61
+ ```
62
+
63
+ ### Load from URL
64
+
65
+ ```html
66
+ <owcs-viewer yaml-url="/path/to/owcs.yaml"></owcs-viewer>
67
+ ```
68
+
69
+ ### Dynamic Updates
70
+
71
+ ```javascript
72
+ import '@owcs/ui';
73
+
74
+ const viewer = document.querySelector('owcs-viewer');
75
+
76
+ // Update YAML content
77
+ viewer.yaml = `owcs: 1.0.0
78
+ info:
79
+ title: Updated Components
80
+ ...`;
81
+
82
+ // Or load from URL
83
+ viewer.yamlUrl = 'https://example.com/owcs.yaml';
84
+ ```
85
+
86
+ ## API
87
+
88
+ ### Properties
89
+
90
+ | Property | Type | Description |
91
+ | ---------- | -------- | ----------------------------- |
92
+ | `yaml` | `string` | OWCS YAML content as a string |
93
+ | `yaml-url` | `string` | URL to fetch OWCS YAML from |
94
+
95
+ ### Display Features
96
+
97
+ #### Header Section
98
+
99
+ - Shows title and description from the YAML
100
+ - Displays OWCS version as a popover badge
101
+ - Gradient background for visual appeal
102
+
103
+ #### Extensions
104
+
105
+ - Displays all custom extensions (properties starting with `x-`)
106
+ - Shown as key-value pairs in a grid layout
107
+
108
+ #### Search Bar
109
+
110
+ - Real-time filtering of components by tag name
111
+ - Sticky positioning for easy access
112
+
113
+ #### Components List
114
+
115
+ - Accordion-style display for each web component
116
+ - Tag name as the accordion header
117
+ - Props displayed as TypeScript interface code
118
+ - Events displayed as TypeScript type code
119
+ - Syntax-highlighted code blocks
120
+
121
+ ## Tech Stack
122
+
123
+ - **Lit**: Fast, lightweight web components
124
+ - **TypeScript**: Type-safe development
125
+ - **Vite**: Fast build tooling (library mode)
126
+ - **@owcs/api**: OWCS parsing and validation
127
+ - **@owcs/schemas**: OWCS JSON Schema
128
+
129
+ ## Development
130
+
131
+ ### Install Dependencies
132
+
133
+ ```bash
134
+ pnpm install
135
+ ```
136
+
137
+ ### Build
138
+
139
+ ```bash
140
+ pnpm run build
141
+ ```
142
+
143
+ ### Run Demo
144
+
145
+ ```bash
146
+ cd apps/owcs-viewer-demo
147
+ pnpm run dev
148
+ ```
149
+
150
+ ## Example Output
151
+
152
+ When rendering an OWCS specification, the viewer displays:
153
+
154
+ 1. **Header**: Title, description, and OWCS version
155
+ 2. **Extensions**: Any custom extensions defined in the spec
156
+ 3. **Search Bar**: Filter components by tag name
157
+ 4. **Components**: Expandable accordion for each component showing:
158
+ - Component tag name
159
+ - Props as TypeScript interface
160
+ - Events as TypeScript type definition
161
+
162
+ ## License
163
+
164
+ MIT - see [LICENSE](../../LICENSE) for details.
package/dist/index.d.ts ADDED
@@ -0,0 +1,131 @@
1
+ import { CSSResult } from 'lit';
2
+ import { LitElement } from 'lit';
3
+ import { OWCSValidator } from '../../api/src/index.ts';
4
+ import { TemplateResult } from 'lit';
5
+
6
+ /**
7
+ * Fetch YAML content from a URL
8
+ */
9
+ export declare function fetchYamlFromUrl(url: string): Promise<string>;
10
+
11
+ /**
12
+ * Filter components by search query (tag name)
13
+ */
14
+ export declare function filterComponentsByTagName(components: Record<string, any>, searchQuery: string): Record<string, any>;
15
+
16
+ export declare class OWCSViewer extends LitElement {
17
+ static styles: CSSResult;
18
+ /**
19
+ * OWCS YAML content as a string
20
+ */
21
+ yaml: string;
22
+ /**
23
+ * URL to fetch OWCS YAML from
24
+ */
25
+ yamlUrl: string;
26
+ /**
27
+ * Parsed and validated OWCS specification
28
+ */
29
+ private spec;
30
+ /**
31
+ * Loading state
32
+ */
33
+ private loading;
34
+ /**
35
+ * Error message
36
+ */
37
+ private error;
38
+ /**
39
+ * Search query for filtering components
40
+ */
41
+ private searchQuery;
42
+ /**
43
+ * Validator instance
44
+ */
45
+ private validator;
46
+ /**
47
+ * Load and validate OWCS spec when properties change
48
+ */
49
+ updated(changedProperties: Map<string, any>): Promise<void>;
50
+ /**
51
+ * Load and validate the OWCS specification
52
+ */
53
+ private loadSpec;
54
+ /**
55
+ * Handle search input
56
+ */
57
+ private handleSearch;
58
+ /**
59
+ * Render loading state
60
+ */
61
+ private renderLoading;
62
+ /**
63
+ * Render error state
64
+ */
65
+ private renderError;
66
+ /**
67
+ * Render header section
68
+ */
69
+ private renderHeader;
70
+ /**
71
+ * Render runtime section
72
+ */
73
+ private renderRuntime;
74
+ /**
75
+ * Render metadata section (extensions)
76
+ */
77
+ private renderExtensions;
78
+ /**
79
+ * Render search bar
80
+ */
81
+ private renderSearchBar;
82
+ /**
83
+ * Render components section with search bar and components list
84
+ */
85
+ private renderComponentsSection;
86
+ /**
87
+ * Generate TypeScript code for props
88
+ */
89
+ private generatePropsCode;
90
+ /**
91
+ * Generate TypeScript code for events
92
+ */
93
+ private generateEventsCode;
94
+ /**
95
+ * Highlight code with Highlight.js
96
+ */
97
+ private highlightCode;
98
+ /**
99
+ * Convert to PascalCase
100
+ */
101
+ private toPascalCase;
102
+ /**
103
+ * Get exposed module name for a component based on tag name
104
+ * Returns the full module name (e.g., './user-card') if found, or null
105
+ */
106
+ private getExposedModuleForComponent;
107
+ /**
108
+ * Render component card item
109
+ */
110
+ private renderComponent;
111
+ /**
112
+ * Render components list
113
+ */
114
+ private renderComponents;
115
+ /**
116
+ * Render the component
117
+ */
118
+ render(): TemplateResult<1>;
119
+ }
120
+
121
+ /**
122
+ * Parse YAML string to object
123
+ */
124
+ export declare function parseYaml(yamlString: string): Promise<any>;
125
+
126
+ /**
127
+ * Validate OWCS specification
128
+ */
129
+ export declare function validateOwcsSpec(spec: any, validator: OWCSValidator): Promise<void>;
130
+
131
+ export { }