Skip to content

Commit 5d05117

Browse files
maximilianimaximiliani
authored
Merge pull request #333 from kit-data-manager/289-add-dark-mode
289 add dark mode
2 parents 5c058b8 + 47c2200 commit 5d05117

37 files changed

+1514
-518
lines changed

‎packages/react-library/lib/components/stencil-generated/components.server.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,19 +78,24 @@ export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEven
7878
tagName: 'pid-actions',
7979
properties: {
8080
actions: 'actions',
81-
actionsId: 'actions-id'
81+
actionsId: 'actions-id',
82+
darkMode: 'dark-mode'
8283
},
8384
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
8485
serializeShadowRoot
8586
});
8687

87-
export type PidCollapsibleEvents = { onCollapsibleToggle: EventName<CustomEvent<boolean>> };
88+
export type PidCollapsibleEvents = {
89+
onCollapsibleToggle: EventName<CustomEvent<boolean>>,
90+
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
91+
};
8892

8993
export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCollapsibleEvents> = /*@__PURE__*/ createComponent<PidCollapsibleElement, PidCollapsibleEvents>({
9094
tagName: 'pid-collapsible',
9195
properties: {
9296
open: 'open',
9397
emphasize: 'emphasize',
98+
darkMode: 'dark-mode',
9499
expanded: 'expanded',
95100
initialWidth: 'initial-width',
96101
initialHeight: 'initial-height',
@@ -117,7 +122,8 @@ export const PidComponent: StencilReactComponent<PidComponentElement, PidCompone
117122
showTopLevelCopy: 'show-top-level-copy',
118123
defaultTTL: 'default-t-t-l',
119124
width: 'width',
120-
height: 'height'
125+
height: 'height',
126+
darkMode: 'dark-mode'
121127
},
122128
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
123129
serializeShadowRoot
@@ -139,7 +145,8 @@ export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTab
139145
hideSubcomponents: 'hide-subcomponents',
140146
currentLevelOfSubcomponents: 'current-level-of-subcomponents',
141147
levelOfSubcomponents: 'level-of-subcomponents',
142-
settings: 'settings'
148+
settings: 'settings',
149+
darkMode: 'dark-mode'
143150
},
144151
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
145152
serializeShadowRoot
@@ -157,8 +164,8 @@ export const PidPagination: StencilReactComponent<PidPaginationElement, PidPagin
157164
totalItems: 'total-items',
158165
itemsPerPage: 'items-per-page',
159166
pageSizes: 'page-sizes',
160-
adaptivePagination: 'adaptive-pagination',
161-
showItemsPerPageControl: 'show-items-per-page-control'
167+
showItemsPerPageControl: 'show-items-per-page-control',
168+
darkMode: 'dark-mode'
162169
},
163170
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
164171
serializeShadowRoot

‎packages/react-library/lib/components/stencil-generated/components.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,20 @@ export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEven
7676
defineCustomElement: definePidActions
7777
});
7878

79-
export type PidCollapsibleEvents = { onCollapsibleToggle: EventName<CustomEvent<boolean>> };
79+
export type PidCollapsibleEvents = {
80+
onCollapsibleToggle: EventName<CustomEvent<boolean>>,
81+
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
82+
};
8083

8184
export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCollapsibleEvents> = /*@__PURE__*/ createComponent<PidCollapsibleElement, PidCollapsibleEvents>({
8285
tagName: 'pid-collapsible',
8386
elementClass: PidCollapsibleElement,
8487
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
8588
react: React,
86-
events: { onCollapsibleToggle: 'collapsibleToggle' } as PidCollapsibleEvents,
89+
events: {
90+
onCollapsibleToggle: 'collapsibleToggle',
91+
onContentHeightChange: 'contentHeightChange'
92+
} as PidCollapsibleEvents,
8793
defineCustomElement: definePidCollapsible
8894
});
8995

‎packages/stencil-library/src/components.d.ts‎

Lines changed: 67 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ export namespace Components {
6060
*/
6161
"showLineNumbers": boolean;
6262
/**
63-
* Theme for syntax highlighting. Options: 'light' or 'dark'.
64-
* @default 'light'
63+
* Theme for syntax highlighting. Options: 'light', 'dark', or 'system'. System will use the user's system preference.
64+
* @default 'system'
6565
*/
66-
"theme": 'light' | 'dark';
66+
"theme": 'light' | 'dark' | 'system';
6767
/**
6868
* Initial view mode for the JSON data. Can be 'tree' or 'code'.
6969
* @default 'tree'
@@ -95,12 +95,22 @@ export namespace Components {
9595
* Optional ID for the actions container for ARIA references
9696
*/
9797
"actionsId"?: string;
98+
/**
99+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
100+
* @default 'system'
101+
*/
102+
"darkMode": 'light' | 'dark' | 'system';
98103
}
99104
/**
100105
* Component for creating collapsible/expandable content sections
101106
* with resize capability and cross-browser compatibility
102107
*/
103108
interface PidCollapsible {
109+
/**
110+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
111+
* @default 'system'
112+
*/
113+
"darkMode": 'light' | 'dark' | 'system';
104114
/**
105115
* Whether to emphasize the component with border and shadow
106116
* @default false
@@ -129,6 +139,10 @@ export namespace Components {
129139
* @default false
130140
*/
131141
"open": boolean;
142+
/**
143+
* Public method to recalculate content dimensions Can be called externally, for example when pagination changes Optimized for better performance
144+
*/
145+
"recalculateContentDimensions": () => Promise<any>;
132146
/**
133147
* Whether to show the footer section
134148
* @default false
@@ -148,6 +162,12 @@ export namespace Components {
148162
* @default 0
149163
*/
150164
"currentLevelOfSubcomponents": number;
165+
/**
166+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
167+
* @type {string}
168+
* @default 'system'
169+
*/
170+
"darkMode": 'light' | 'dark' | 'system';
151171
/**
152172
* Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)
153173
* @type {number}
@@ -215,6 +235,11 @@ export namespace Components {
215235
* @default 0
216236
*/
217237
"currentPage": number;
238+
/**
239+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
240+
* @default 'system'
241+
*/
242+
"darkMode": 'light' | 'dark' | 'system';
218243
/**
219244
* Whether to hide subcomponents
220245
* @default false
@@ -252,16 +277,16 @@ export namespace Components {
252277
"settings": string;
253278
}
254279
interface PidPagination {
255-
/**
256-
* Enable adaptive pagination mode
257-
* @default false
258-
*/
259-
"adaptivePagination": boolean;
260280
/**
261281
* Current page (0-based index)
262282
* @default 0
263283
*/
264284
"currentPage": number;
285+
/**
286+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
287+
* @default 'system'
288+
*/
289+
"darkMode": 'light' | 'dark' | 'system';
265290
/**
266291
* Number of items per page
267292
* @default 10
@@ -359,6 +384,7 @@ declare global {
359384
};
360385
interface HTMLPidCollapsibleElementEventMap {
361386
"collapsibleToggle": boolean;
387+
"contentHeightChange": { maxHeight: number };
362388
}
363389
/**
364390
* Component for creating collapsible/expandable content sections
@@ -493,10 +519,10 @@ declare namespace LocalJSX {
493519
*/
494520
"showLineNumbers"?: boolean;
495521
/**
496-
* Theme for syntax highlighting. Options: 'light' or 'dark'.
497-
* @default 'light'
522+
* Theme for syntax highlighting. Options: 'light', 'dark', or 'system'. System will use the user's system preference.
523+
* @default 'system'
498524
*/
499-
"theme"?: 'light' | 'dark';
525+
"theme"?: 'light' | 'dark' | 'system';
500526
/**
501527
* Initial view mode for the JSON data. Can be 'tree' or 'code'.
502528
* @default 'tree'
@@ -528,12 +554,22 @@ declare namespace LocalJSX {
528554
* Optional ID for the actions container for ARIA references
529555
*/
530556
"actionsId"?: string;
557+
/**
558+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
559+
* @default 'system'
560+
*/
561+
"darkMode"?: 'light' | 'dark' | 'system';
531562
}
532563
/**
533564
* Component for creating collapsible/expandable content sections
534565
* with resize capability and cross-browser compatibility
535566
*/
536567
interface PidCollapsible {
568+
/**
569+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
570+
* @default 'system'
571+
*/
572+
"darkMode"?: 'light' | 'dark' | 'system';
537573
/**
538574
* Whether to emphasize the component with border and shadow
539575
* @default false
@@ -561,6 +597,10 @@ declare namespace LocalJSX {
561597
* Event emitted when the collapsible is toggled
562598
*/
563599
"onCollapsibleToggle"?: (event: PidCollapsibleCustomEvent<boolean>) => void;
600+
/**
601+
* Event emitted when content dimensions need to be recalculated Useful for pagination to ensure proper height
602+
*/
603+
"onContentHeightChange"?: (event: PidCollapsibleCustomEvent<{ maxHeight: number }>) => void;
564604
/**
565605
* Whether the collapsible is open by default
566606
* @default false
@@ -585,6 +625,12 @@ declare namespace LocalJSX {
585625
* @default 0
586626
*/
587627
"currentLevelOfSubcomponents"?: number;
628+
/**
629+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
630+
* @type {string}
631+
* @default 'system'
632+
*/
633+
"darkMode"?: 'light' | 'dark' | 'system';
588634
/**
589635
* Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)
590636
* @type {number}
@@ -652,6 +698,11 @@ declare namespace LocalJSX {
652698
* @default 0
653699
*/
654700
"currentPage"?: number;
701+
/**
702+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
703+
* @default 'system'
704+
*/
705+
"darkMode"?: 'light' | 'dark' | 'system';
655706
/**
656707
* Whether to hide subcomponents
657708
* @default false
@@ -697,16 +748,16 @@ declare namespace LocalJSX {
697748
"settings"?: string;
698749
}
699750
interface PidPagination {
700-
/**
701-
* Enable adaptive pagination mode
702-
* @default false
703-
*/
704-
"adaptivePagination"?: boolean;
705751
/**
706752
* Current page (0-based index)
707753
* @default 0
708754
*/
709755
"currentPage"?: number;
756+
/**
757+
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
758+
* @default 'system'
759+
*/
760+
"darkMode"?: 'light' | 'dark' | 'system';
710761
/**
711762
* Number of items per page
712763
* @default 10

‎packages/stencil-library/src/components/copy-button/copy-button.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2-
import { Component, h, Host, Prop, State } from '@stencil/core';
2+
import { Component, Element, h, Host, Prop, State } from '@stencil/core';
33

44
@Component({
55
tag: 'copy-button',
66
shadow: false,
77
})
88
export class CopyButton {
9+
@Element() el: HTMLElement;
910
/**
1011
* Internal state to track if copy was successful
1112
*/
@@ -125,6 +126,10 @@ export class CopyButton {
125126
// Get appropriate aria-label
126127
const ariaLabel = this.getAriaLabel();
127128

129+
// Check if dark mode is active by looking at the closest pid-component
130+
const parentComponent = this.el.closest('pid-component');
131+
const isDarkMode = parentComponent?.classList.contains('bg-gray-800');
132+
128133
return (
129134
<Host class={'inline-block align-baseline text-xs'}>
130135
{/* Hidden live region for screen readers */}
@@ -135,7 +140,11 @@ export class CopyButton {
135140
)}
136141

137142
<button
138-
class={`${this.copied ? 'bg-green-200' : 'bg-white hover:bg-blue-200'} relative z-30 max-h-min flex-none items-center rounded-md border border-slate-500 px-2 py-0.5 font-mono font-medium text-slate-800 transition-colors duration-200 hover:text-slate-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`}
143+
class={`${
144+
this.copied ? (isDarkMode ? 'bg-green-700' : 'bg-green-200') : isDarkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-white hover:bg-blue-200'
145+
} relative z-30 max-h-min flex-none items-center rounded-md border ${
146+
isDarkMode ? 'border-gray-600 text-gray-200 hover:text-white' : 'border-slate-500 text-slate-800 hover:text-slate-900'
147+
} px-2 py-0.5 font-mono font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`}
139148
onClick={e => this.copyValue(e)}
140149
aria-label={ariaLabel}
141150
title={ariaLabel}

0 commit comments

Comments
 (0)