@sellmate/design-system-react 0.0.31 → 0.0.33

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.
package/README.md CHANGED
@@ -1,57 +1,57 @@
1
- # Sellmate Design System - React
2
-
3
- React component wrappers for Sellmate Design System built with Stencil web components.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @sellmate/design-system-react
9
- ```
10
-
11
- or
12
-
13
- ```bash
14
- yarn add @sellmate/design-system-react
15
- ```
16
-
17
- ## Quick Start
18
-
19
- ### Basic Setup
20
-
21
- ```tsx
22
- import { SdButton } from '@sellmate/design-system-react';
23
-
24
- export function App() {
25
- return (
26
- <SdButton
27
- label="Click me"
28
- onClick={() => console.log('clicked')}
29
- >
30
- </SdButton>
31
- );
32
- }
33
- ```
34
-
35
- ## Available Components
36
-
37
- - `SdButton` - Button component
38
- - `SdInput` - Input component
39
- - `SdCheckbox` - Checkbox component
40
- - `SdSelect` - Select dropdown component
41
- - `SdTable` - Table component
42
- - `SdTag` - Tag component
43
- - `SdIcon` - Icon component
44
- - `SdTooltip` - Tooltip component
45
- - `SdPopover` - Popover component
46
- - `SdDatePicker` - Date picker component
47
- - `SdDateRangePicker` - Date range picker component
48
- - `SdPagination` - Pagination component
49
-
50
- ## Requirements
51
-
52
- - React 16.8.0 or higher
53
- - React DOM 16.8.0 or higher
54
-
55
- ## License
56
-
57
- MIT
1
+ # Sellmate Design System - React
2
+
3
+ React component wrappers for Sellmate Design System built with Stencil web components.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @sellmate/design-system-react
9
+ ```
10
+
11
+ or
12
+
13
+ ```bash
14
+ yarn add @sellmate/design-system-react
15
+ ```
16
+
17
+ ## Quick Start
18
+
19
+ ### Basic Setup
20
+
21
+ ```tsx
22
+ import { SdButton } from '@sellmate/design-system-react';
23
+
24
+ export function App() {
25
+ return (
26
+ <SdButton
27
+ label="Click me"
28
+ onClick={() => console.log('clicked')}
29
+ >
30
+ </SdButton>
31
+ );
32
+ }
33
+ ```
34
+
35
+ ## Available Components
36
+
37
+ - `SdButton` - Button component
38
+ - `SdInput` - Input component
39
+ - `SdCheckbox` - Checkbox component
40
+ - `SdSelect` - Select dropdown component
41
+ - `SdTable` - Table component
42
+ - `SdTag` - Tag component
43
+ - `SdIcon` - Icon component
44
+ - `SdTooltip` - Tooltip component
45
+ - `SdPopover` - Popover component
46
+ - `SdDatePicker` - Date picker component
47
+ - `SdDateRangePicker` - Date range picker component
48
+ - `SdPagination` - Pagination component
49
+
50
+ ## Requirements
51
+
52
+ - React 16.8.0 or higher
53
+ - React DOM 16.8.0 or higher
54
+
55
+ ## License
56
+
57
+ MIT
@@ -13,6 +13,7 @@ import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-
13
13
  import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/components/sd-guide.js";
14
14
  import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
15
15
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
16
+ import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
16
17
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
17
18
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
18
19
  import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -63,6 +64,8 @@ export type SdInputEvents = {
63
64
  onSdBlur: EventName<SdInputCustomEvent<Event>>;
64
65
  };
65
66
  export declare const SdInput: StencilReactComponent<SdInputElement, SdInputEvents>;
67
+ export type SdLoadingSpinnerEvents = NonNullable<unknown>;
68
+ export declare const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>;
66
69
  export type SdPaginationEvents = {
67
70
  onPageChange: EventName<CustomEvent<number>>;
68
71
  };
@@ -108,6 +111,7 @@ export declare const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGr
108
111
  export type SdTableEvents = {
109
112
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
110
113
  onSdPageChange: EventName<CustomEvent<number>>;
114
+ onSdRowsPerPageChange: EventName<CustomEvent<number>>;
111
115
  };
112
116
  export declare const SdTable: StencilReactComponent<SdTableElement, SdTableEvents>;
113
117
  export type SdTagEvents = NonNullable<unknown>;
@@ -9,6 +9,7 @@ import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as d
9
9
  import { SdGuide as SdGuideElement, defineCustomElement as defineSdGuide } from "@sellmate/design-system/dist/components/sd-guide.js";
10
10
  import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@sellmate/design-system/dist/components/sd-icon.js";
11
11
  import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
12
+ import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
12
13
  import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
13
14
  import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
14
15
  import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -112,6 +113,14 @@ export const SdInput = /*@__PURE__*/ createComponent({
112
113
  },
113
114
  defineCustomElement: defineSdInput
114
115
  });
116
+ export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
117
+ tagName: 'sd-loading-spinner',
118
+ elementClass: SdLoadingSpinnerElement,
119
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
120
+ react: React,
121
+ events: {},
122
+ defineCustomElement: defineSdLoadingSpinner
123
+ });
115
124
  export const SdPagination = /*@__PURE__*/ createComponent({
116
125
  tagName: 'sd-pagination',
117
126
  elementClass: SdPaginationElement,
@@ -192,7 +201,8 @@ export const SdTable = /*@__PURE__*/ createComponent({
192
201
  react: React,
193
202
  events: {
194
203
  onSdSelectChange: 'sdSelectChange',
195
- onSdPageChange: 'sdPageChange'
204
+ onSdPageChange: 'sdPageChange',
205
+ onSdRowsPerPageChange: 'sdRowsPerPageChange'
196
206
  },
197
207
  defineCustomElement: defineSdTable
198
208
  });
@@ -13,6 +13,7 @@ import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-
13
13
  import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/components/sd-guide.js";
14
14
  import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
15
15
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
16
+ import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
16
17
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
17
18
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
18
19
  import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -65,6 +66,8 @@ export type SdInputEvents = {
65
66
  onSdBlur: EventName<SdInputCustomEvent<Event>>;
66
67
  };
67
68
  export declare const SdInput: StencilReactComponent<SdInputElement, SdInputEvents>;
69
+ export type SdLoadingSpinnerEvents = NonNullable<unknown>;
70
+ export declare const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>;
68
71
  export type SdPaginationEvents = {
69
72
  onPageChange: EventName<CustomEvent<number>>;
70
73
  };
@@ -110,6 +113,7 @@ export declare const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGr
110
113
  export type SdTableEvents = {
111
114
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
112
115
  onSdPageChange: EventName<CustomEvent<number>>;
116
+ onSdRowsPerPageChange: EventName<CustomEvent<number>>;
113
117
  };
114
118
  export declare const SdTable: StencilReactComponent<SdTableElement, SdTableEvents>;
115
119
  export type SdTagEvents = NonNullable<unknown>;
@@ -143,6 +143,13 @@ export const SdInput = /*@__PURE__*/ createComponent({
143
143
  clientModule: clientComponents.SdInput,
144
144
  serializeShadowRoot,
145
145
  });
146
+ export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
147
+ tagName: 'sd-loading-spinner',
148
+ properties: {},
149
+ hydrateModule: import('@sellmate/design-system/hydrate'),
150
+ clientModule: clientComponents.SdLoadingSpinner,
151
+ serializeShadowRoot,
152
+ });
146
153
  export const SdPagination = /*@__PURE__*/ createComponent({
147
154
  tagName: 'sd-pagination',
148
155
  properties: {
@@ -273,6 +280,7 @@ export const SdTable = /*@__PURE__*/ createComponent({
273
280
  height: 'height',
274
281
  stickyHeader: 'sticky-header',
275
282
  noDataLabel: 'no-data-label',
283
+ isLoading: 'is-loading',
276
284
  useInternalPagination: 'use-internal-pagination',
277
285
  useRowsPerPageSelect: 'use-rows-per-page-select'
278
286
  },
@@ -19,6 +19,7 @@ import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-
19
19
  import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/components/sd-guide.js";
20
20
  import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
21
21
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
22
+ import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
22
23
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
23
24
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
24
25
  import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -211,6 +212,16 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
211
212
  serializeShadowRoot,
212
213
  });
213
214
 
215
+ export type SdLoadingSpinnerEvents = NonNullable<unknown>;
216
+
217
+ export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents> = /*@__PURE__*/ createComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>({
218
+ tagName: 'sd-loading-spinner',
219
+ properties: {},
220
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
221
+ clientModule: clientComponents.SdLoadingSpinner as ReactWebComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>,
222
+ serializeShadowRoot,
223
+ });
224
+
214
225
  export type SdPaginationEvents = { onPageChange: EventName<CustomEvent<number>> };
215
226
 
216
227
  export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents>({
@@ -379,7 +390,8 @@ export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupEleme
379
390
 
380
391
  export type SdTableEvents = {
381
392
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
382
- onSdPageChange: EventName<CustomEvent<number>>
393
+ onSdPageChange: EventName<CustomEvent<number>>,
394
+ onSdRowsPerPageChange: EventName<CustomEvent<number>>
383
395
  };
384
396
 
385
397
  export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
@@ -392,6 +404,7 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@
392
404
  height: 'height',
393
405
  stickyHeader: 'sticky-header',
394
406
  noDataLabel: 'no-data-label',
407
+ isLoading: 'is-loading',
395
408
  useInternalPagination: 'use-internal-pagination',
396
409
  useRowsPerPageSelect: 'use-rows-per-page-select'
397
410
  },
@@ -18,6 +18,7 @@ import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as d
18
18
  import { SdGuide as SdGuideElement, defineCustomElement as defineSdGuide } from "@sellmate/design-system/dist/components/sd-guide.js";
19
19
  import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@sellmate/design-system/dist/components/sd-icon.js";
20
20
  import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
21
+ import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
21
22
  import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
22
23
  import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
23
24
  import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -162,6 +163,17 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
162
163
  defineCustomElement: defineSdInput
163
164
  });
164
165
 
166
+ export type SdLoadingSpinnerEvents = NonNullable<unknown>;
167
+
168
+ export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents> = /*@__PURE__*/ createComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>({
169
+ tagName: 'sd-loading-spinner',
170
+ elementClass: SdLoadingSpinnerElement,
171
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
172
+ react: React,
173
+ events: {} as SdLoadingSpinnerEvents,
174
+ defineCustomElement: defineSdLoadingSpinner
175
+ });
176
+
165
177
  export type SdPaginationEvents = { onPageChange: EventName<CustomEvent<number>> };
166
178
 
167
179
  export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents>({
@@ -283,7 +295,8 @@ export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupEleme
283
295
 
284
296
  export type SdTableEvents = {
285
297
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
286
- onSdPageChange: EventName<CustomEvent<number>>
298
+ onSdPageChange: EventName<CustomEvent<number>>,
299
+ onSdRowsPerPageChange: EventName<CustomEvent<number>>
287
300
  };
288
301
 
289
302
  export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
@@ -293,7 +306,8 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@
293
306
  react: React,
294
307
  events: {
295
308
  onSdSelectChange: 'sdSelectChange',
296
- onSdPageChange: 'sdPageChange'
309
+ onSdPageChange: 'sdPageChange',
310
+ onSdRowsPerPageChange: 'sdRowsPerPageChange'
297
311
  } as SdTableEvents,
298
312
  defineCustomElement: defineSdTable
299
313
  });
package/lib/index.ts CHANGED
@@ -1,11 +1,11 @@
1
- 'use strict';
2
-
3
- export * from './components/components.js';
4
- export { defineCustomElements } from '@sellmate/design-system/loader';
5
-
6
- // Export sd-table types for React usage
7
- export type {
8
- SdTableSortDir,
9
- SdTableColumn,
10
- Row as SdTableRow,
11
- } from '@sellmate/design-system';
1
+ 'use strict';
2
+
3
+ export * from './components/components.js';
4
+ export { defineCustomElements } from '@sellmate/design-system/loader';
5
+
6
+ // Export sd-table types for React usage
7
+ export type {
8
+ SdTableSortDir,
9
+ SdTableColumn,
10
+ Row as SdTableRow,
11
+ } from '@sellmate/design-system';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "0.0.31",
3
+ "version": "0.0.33",
4
4
  "description": "Design System - React Component Wrappers",
5
5
  "keywords": [
6
6
  "react",
@@ -54,7 +54,7 @@
54
54
  "dev": "tsc --watch"
55
55
  },
56
56
  "dependencies": {
57
- "@sellmate/design-system": "^0.0.26",
57
+ "@sellmate/design-system": "^0.0.28",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {
@@ -68,5 +68,5 @@
68
68
  "rimraf": "^6.0.1",
69
69
  "typescript": "^5.9.3"
70
70
  },
71
- "gitHead": "3b74ea0c149475298159d3a4c0924f7f7343b019"
71
+ "gitHead": "829a0b422f0a4f07f7b4f855741d0484be144cf5"
72
72
  }