@prioticket/design-system-web 1.0.0

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 (93) hide show
  1. package/COMPONENT-DOCUMENTATION.md +608 -0
  2. package/README.md +229 -0
  3. package/component-documentation.json +1681 -0
  4. package/dist/components/pd-button.cjs.js +99 -0
  5. package/dist/components/pd-button.es.js +156 -0
  6. package/dist/components/pd-card.cjs.js +59 -0
  7. package/dist/components/pd-card.es.js +93 -0
  8. package/dist/components/pd-checkbox.cjs.js +85 -0
  9. package/dist/components/pd-checkbox.es.js +154 -0
  10. package/dist/components/pd-chip.cjs.js +118 -0
  11. package/dist/components/pd-chip.es.js +220 -0
  12. package/dist/components/pd-dialog.cjs.js +195 -0
  13. package/dist/components/pd-dialog.es.js +285 -0
  14. package/dist/components/pd-expandable-card.cjs.js +134 -0
  15. package/dist/components/pd-expandable-card.es.js +205 -0
  16. package/dist/components/pd-fab.cjs.js +119 -0
  17. package/dist/components/pd-fab.es.js +179 -0
  18. package/dist/components/pd-icon-button.cjs.js +159 -0
  19. package/dist/components/pd-icon-button.es.js +268 -0
  20. package/dist/components/pd-icon.cjs.js +71 -0
  21. package/dist/components/pd-icon.es.js +102 -0
  22. package/dist/components/pd-list.cjs.js +108 -0
  23. package/dist/components/pd-list.es.js +229 -0
  24. package/dist/components/pd-menu-item.cjs.js +85 -0
  25. package/dist/components/pd-menu-item.es.js +156 -0
  26. package/dist/components/pd-menu.cjs.js +42 -0
  27. package/dist/components/pd-menu.es.js +122 -0
  28. package/dist/components/pd-progress.cjs.js +72 -0
  29. package/dist/components/pd-progress.es.js +119 -0
  30. package/dist/components/pd-radio.cjs.js +38 -0
  31. package/dist/components/pd-radio.es.js +153 -0
  32. package/dist/components/pd-segmented-button.cjs.js +135 -0
  33. package/dist/components/pd-segmented-button.es.js +234 -0
  34. package/dist/components/pd-segmented-stepper.cjs.js +191 -0
  35. package/dist/components/pd-segmented-stepper.es.js +333 -0
  36. package/dist/components/pd-select.cjs.js +59 -0
  37. package/dist/components/pd-select.es.js +136 -0
  38. package/dist/components/pd-slider.cjs.js +42 -0
  39. package/dist/components/pd-slider.es.js +123 -0
  40. package/dist/components/pd-stepper.cjs.js +279 -0
  41. package/dist/components/pd-stepper.es.js +375 -0
  42. package/dist/components/pd-switch.cjs.js +57 -0
  43. package/dist/components/pd-switch.es.js +126 -0
  44. package/dist/components/pd-tabs.cjs.js +32 -0
  45. package/dist/components/pd-tabs.es.js +139 -0
  46. package/dist/components/pd-text-field.cjs.js +86 -0
  47. package/dist/components/pd-text-field.es.js +202 -0
  48. package/dist/design-system-web.css +1 -0
  49. package/dist/fonts/ProximaNova-Bold.woff2 +0 -0
  50. package/dist/fonts/ProximaNova-Extrabld.woff2 +0 -0
  51. package/dist/fonts/ProximaNova-Light.woff2 +0 -0
  52. package/dist/fonts/ProximaNova-Medium.woff2 +0 -0
  53. package/dist/fonts/ProximaNova-Regular.woff2 +0 -0
  54. package/dist/fonts/ProximaNova-Semibold.woff2 +0 -0
  55. package/dist/fonts/ProximaNovaCond-Semibold.woff2 +0 -0
  56. package/dist/fonts-only.css +59 -0
  57. package/dist/fonts.cjs.js +1 -0
  58. package/dist/fonts.es.js +1 -0
  59. package/dist/prioticket-design-system-web.cjs.js +1 -0
  60. package/dist/prioticket-design-system-web.es.js +52 -0
  61. package/dist/theme-only.css +311 -0
  62. package/dist/theme-with-fonts.cjs.js +1 -0
  63. package/dist/theme-with-fonts.css +372 -0
  64. package/dist/theme-with-fonts.es.js +2 -0
  65. package/dist/theme.cjs.js +1 -0
  66. package/dist/theme.es.js +1 -0
  67. package/dist/types/components/pd-button.d.ts +30 -0
  68. package/dist/types/components/pd-card.d.ts +8 -0
  69. package/dist/types/components/pd-checkbox.d.ts +16 -0
  70. package/dist/types/components/pd-chip.d.ts +26 -0
  71. package/dist/types/components/pd-dialog.d.ts +49 -0
  72. package/dist/types/components/pd-expandable-card.d.ts +39 -0
  73. package/dist/types/components/pd-fab.d.ts +17 -0
  74. package/dist/types/components/pd-icon-button.d.ts +24 -0
  75. package/dist/types/components/pd-icon.d.ts +9 -0
  76. package/dist/types/components/pd-list.d.ts +36 -0
  77. package/dist/types/components/pd-menu-item.d.ts +38 -0
  78. package/dist/types/components/pd-menu.d.ts +58 -0
  79. package/dist/types/components/pd-progress.d.ts +30 -0
  80. package/dist/types/components/pd-radio.d.ts +54 -0
  81. package/dist/types/components/pd-segmented-button.d.ts +53 -0
  82. package/dist/types/components/pd-segmented-stepper.d.ts +65 -0
  83. package/dist/types/components/pd-select.d.ts +46 -0
  84. package/dist/types/components/pd-slider.d.ts +43 -0
  85. package/dist/types/components/pd-stepper.d.ts +47 -0
  86. package/dist/types/components/pd-switch.d.ts +37 -0
  87. package/dist/types/components/pd-tabs.d.ts +54 -0
  88. package/dist/types/components/pd-text-field.d.ts +30 -0
  89. package/dist/types/fonts.d.ts +1 -0
  90. package/dist/types/index.d.ts +22 -0
  91. package/dist/types/theme-with-fonts.d.ts +2 -0
  92. package/dist/types/theme.d.ts +1 -0
  93. package/package.json +93 -0
package/README.md ADDED
@@ -0,0 +1,229 @@
1
+ # Prioticket Design System Web
2
+
3
+ A comprehensive Web Components library built with **Lit** that provides Material Design components for Prioticket applications. This library is designed to work seamlessly across any frontend framework or in vanilla HTML.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Material Design 3** - Built on Google's official Material Web components
8
+ - 🌐 **Framework Agnostic** - Works with Angular, React, Vue, PHP, or any web technology
9
+ - 📦 **Tree Shakable** - Load only the components you need
10
+ - 🎯 **TypeScript** - Full type safety and excellent developer experience
11
+ - 🔧 **Customizable** - Flexible theming with CSS custom properties
12
+ - ⚡ **Performance Optimized** - Individual component bundles for maximum efficiency
13
+ - 🎪 **Modern Standards** - ES Modules, Web Components, and HTTP/2 friendly
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install @prioticket/design-system-web
19
+ ```
20
+
21
+ ## Usage Guide
22
+
23
+ ### 1. Quick Start with CDN (Recommended for PHP, Vanilla HTML, etc.)
24
+
25
+ This is the fastest way to use the components on any web page.
26
+
27
+ **Instructions:**
28
+ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDelivr CDN. Remember to replace `1.0.6` with the latest version number.
29
+
30
+ ```html
31
+ <!DOCTYPE html>
32
+ <html>
33
+ <head>
34
+ <title>My App</title>
35
+ <!-- 1. Load the theme CSS from the CDN -->
36
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
37
+ </head>
38
+ <body>
39
+ <pd-button>Click Me</pd-button>
40
+
41
+ <!-- 2. Load the required Lit dependency from a public CDN -->
42
+ <script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
43
+
44
+ <!-- 3. Load the components you need from our CDN -->
45
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/components/pd-button.es.js"></script>
46
+ </body>
47
+ </html>
48
+ ```
49
+
50
+ **CSS Options:**
51
+ ```html
52
+ <!-- Option 1: Theme only (recommended - use your existing fonts) -->
53
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
54
+
55
+ <!-- Option 2: Theme + Prioticket fonts -->
56
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-with-fonts.css">
57
+
58
+ <!-- Option 3: Just Prioticket fonts (if you already have the theme) -->
59
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/fonts-only.css">
60
+ ```
61
+
62
+ **PHP Example:**
63
+ ```php
64
+ <!DOCTYPE html>
65
+ <html>
66
+ <head>
67
+ <title><?= htmlspecialchars($pageTitle) ?></title>
68
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
69
+ </head>
70
+ <body>
71
+ <pd-button variant="filled"><?= htmlspecialchars($buttonText) ?></pd-button>
72
+
73
+ <pd-card>
74
+ <h3><?= htmlspecialchars($cardTitle) ?></h3>
75
+ <p><?= htmlspecialchars($cardContent) ?></p>
76
+ </pd-card>
77
+
78
+ <script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
79
+
80
+ <?php if ($showButton): ?>
81
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/components/pd-button.es.js"></script>
82
+ <?php endif; ?>
83
+
84
+ <?php if ($showCard): ?>
85
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/components/pd-card.es.js"></script>
86
+ <?php endif; ?>
87
+ </body>
88
+ </html>
89
+ ```
90
+
91
+ ### 2. Usage with a Bundler (Framework Integration)
92
+
93
+ #### Angular
94
+
95
+ **Step 1: Add CSS to angular.json**
96
+
97
+ This tells the Angular CLI to include the theme styles in your application's global CSS bundle.
98
+
99
+ ```json
100
+ "styles": [
101
+ "src/styles.css",
102
+ "node_modules/@prioticket/design-system-web/dist/theme-only.css"
103
+ ]
104
+ ```
105
+
106
+ **Step 2: Import Components and Add Schema**
107
+
108
+ In your Angular component, import the components to register them and add `CUSTOM_ELEMENTS_SCHEMA`.
109
+
110
+ ```typescript
111
+ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
112
+
113
+ // Import components by their package path
114
+ import '@prioticket/design-system-web/components/pd-button';
115
+
116
+ @Component({
117
+ selector: 'app-example',
118
+ template: `<pd-button>Hello from Angular</pd-button>`,
119
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
120
+ })
121
+ export class ExampleComponent {}
122
+ ```
123
+
124
+ #### React / Vue / Other Frameworks
125
+
126
+ Similar pattern - install via npm, import the CSS file, and import individual components:
127
+
128
+ ```javascript
129
+ // Import the theme CSS (exact method depends on your bundler)
130
+ import '@prioticket/design-system-web/dist/theme-only.css';
131
+
132
+ // Import components
133
+ import '@prioticket/design-system-web/components/pd-button';
134
+
135
+ // Use in JSX/template
136
+ <pd-button>Hello from React</pd-button>
137
+ ```
138
+
139
+ ## Available Components
140
+
141
+ | Component | Description | CDN Import Path |
142
+ |-----------|-------------|-----------------|
143
+ | pd-button | Material Design buttons | `components/pd-button.es.js` |
144
+ | pd-card | Cards for content grouping | `components/pd-card.es.js` |
145
+ | pd-text-field | Text input fields | `components/pd-text-field.es.js` |
146
+ | pd-checkbox | Checkboxes | `components/pd-checkbox.es.js` |
147
+ | pd-switch | Toggle switches | `components/pd-switch.es.js` |
148
+ | pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
149
+ | pd-dialog | Modal dialogs | `components/pd-dialog.es.js` |
150
+ | pd-fab | Floating action buttons | `components/pd-fab.es.js` |
151
+ | pd-progress | Progress indicators | `components/pd-progress.es.js` |
152
+ | pd-menu | Dropdown menus | `components/pd-menu.es.js` |
153
+ | pd-chip | Chips for tags/filters | `components/pd-chip.es.js` |
154
+ | pd-list | Lists with items | `components/pd-list.es.js` |
155
+ | pd-icon | Material Design icons | `components/pd-icon.es.js` |
156
+ | pd-icon-button | Icon buttons | `components/pd-icon-button.es.js` |
157
+ | pd-radio | Radio buttons | `components/pd-radio.es.js` |
158
+ | pd-select | Select dropdowns | `components/pd-select.es.js` |
159
+ | pd-slider | Range sliders | `components/pd-slider.es.js` |
160
+ | pd-stepper | Step indicators | `components/pd-stepper.es.js` |
161
+
162
+ ## Customizing Fonts
163
+
164
+ The design system is built to work with any font stack. The theme CSS uses CSS custom properties:
165
+
166
+ ```css
167
+ /* Override Prioticket fonts with your own */
168
+ :root {
169
+ --md-sys-typescale-body-large-font: "Your Font", Arial, sans-serif;
170
+ --md-sys-typescale-title-medium-font: "Your Font", Arial, sans-serif;
171
+ --md-sys-typescale-headline-small-font: "Your Font", Arial, sans-serif;
172
+ }
173
+ ```
174
+
175
+ ## CSS Architecture
176
+
177
+ - **theme-only.css** (14KB) - All component styles without fonts
178
+ - **fonts-only.css** (1.3KB) - Just Prioticket font declarations
179
+ - **theme-with-fonts.css** (15.7KB) - Complete theme including fonts
180
+ - **fonts/** - Font files (~232KB total)
181
+
182
+ Choose `theme-only.css` to use your existing fonts, or `theme-with-fonts.css` for the complete Prioticket experience.
183
+
184
+ ## Performance Best Practices
185
+
186
+ 1. **Load only what you need** - Import individual components via CDN
187
+ 2. **Use theme-only.css** - If you already have fonts, skip the font files
188
+ 3. **Leverage HTTP/2** - Multiple small files load efficiently on modern servers
189
+ 4. **CDN for Lit** - Load the Lit dependency from a fast CDN
190
+ 5. **Conditional loading** - In server-side apps, only load components used on each page
191
+
192
+ ## Browser Support
193
+
194
+ - Chrome 84+
195
+ - Firefox 90+
196
+ - Safari 14+
197
+ - Edge 84+
198
+
199
+ ## Development
200
+
201
+ ```bash
202
+ # Install dependencies
203
+ npm install
204
+
205
+ # Start development server
206
+ npm run dev
207
+
208
+ # Build the library
209
+ npm run build
210
+
211
+ # Run Storybook
212
+ npm run storybook
213
+ ```
214
+
215
+ ## Source Code
216
+
217
+ The source code for this library is proprietary and maintained in a private repository at Prioticket.
218
+
219
+ ## Support
220
+
221
+ For questions or bug reports, please contact the Prioticket development team internally.
222
+
223
+ ## License
224
+
225
+ MIT License - see [LICENSE](LICENSE) file for details.
226
+
227
+ ---
228
+
229
+ Built with ❤️ by the Prioticket Team