@maggioli-design-system/magma-react 1.0.0-beta → 1.0.1

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 (4) hide show
  1. package/README.md +78 -0
  2. package/dist/components.js +0 -9
  3. package/dist/types/components.d.ts +2 -7
  4. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,78 @@
1
+ # MagmaReact
2
+
3
+ Magma React specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.
4
+
5
+
6
+ ## Installation
7
+
8
+ Install package
9
+ ```
10
+ npm i @maggioli-design-system/magma-react
11
+ ```
12
+
13
+ ### Icon
14
+ Set the path where the `mds-icon` component will get the svg icons inside `UseEffect` otherwise window is not defined
15
+
16
+ ```ts
17
+ // app.js
18
+
19
+ export default function App({
20
+ children,
21
+ }) {
22
+ useEffect(() => {
23
+ sessionStorage.setItem("mdsIconSvgPath", `/svg/`);
24
+ }, []);
25
+
26
+ return <>{children}</>;
27
+ }
28
+ ```
29
+
30
+ Example using Nextjs with App Router
31
+
32
+ ```tsx
33
+ // client_globals_wrapper.tsx
34
+ export default function ClientGlobalsWrapper({
35
+ children,
36
+ }: Readonly<{
37
+ children: React.ReactNode;
38
+ }>) {
39
+ useEffect(() => {
40
+ sessionStorage.setItem("mdsIconSvgPath", `/svg/`);
41
+ }, []);
42
+
43
+ return <>{children}</>;
44
+ }
45
+ ```
46
+
47
+ ```ts
48
+ // app/layout.tsx
49
+
50
+ export default function RootLayout({
51
+ children,
52
+ }: Readonly<{ children: React.ReactNode }>) {
53
+ return (
54
+ <html>
55
+ <body>
56
+ <ClientGlobalsWrapper>
57
+ <main>{children}</main>
58
+ </ClientGlobalsWrapper>
59
+ </body>
60
+ </html>
61
+ );
62
+ }
63
+
64
+ ```
65
+
66
+ ## Usage Example
67
+
68
+ ```tsx
69
+ import { MdsText } from '@maggioli-design-system/magma-react'
70
+
71
+
72
+ export default function Component() {
73
+ return (
74
+ <MdsText typography="h3">Hello World</MdsText>
75
+ );
76
+ }
77
+ ```
78
+
package/dist/components.js CHANGED
@@ -54,7 +54,6 @@ import { MdsPrefAnimation as MdsPrefAnimationElement, defineCustomElement as def
54
54
  import { MdsPrefConsumption as MdsPrefConsumptionElement, defineCustomElement as defineMdsPrefConsumption } from "@maggioli-design-system/magma/dist/components/mds-pref-consumption.js";
55
55
  import { MdsPrefContrast as MdsPrefContrastElement, defineCustomElement as defineMdsPrefContrast } from "@maggioli-design-system/magma/dist/components/mds-pref-contrast.js";
56
56
  import { MdsPrefLanguageItem as MdsPrefLanguageItemElement, defineCustomElement as defineMdsPrefLanguageItem } from "@maggioli-design-system/magma/dist/components/mds-pref-language-item.js";
57
- import { MdsPrefLanguageNav as MdsPrefLanguageNavElement, defineCustomElement as defineMdsPrefLanguageNav } from "@maggioli-design-system/magma/dist/components/mds-pref-language-nav.js";
58
57
  import { MdsPrefLanguage as MdsPrefLanguageElement, defineCustomElement as defineMdsPrefLanguage } from "@maggioli-design-system/magma/dist/components/mds-pref-language.js";
59
58
  import { MdsPrefTheme as MdsPrefThemeElement, defineCustomElement as defineMdsPrefTheme } from "@maggioli-design-system/magma/dist/components/mds-pref-theme.js";
60
59
  import { MdsPref as MdsPrefElement, defineCustomElement as defineMdsPref } from "@maggioli-design-system/magma/dist/components/mds-pref.js";
@@ -587,14 +586,6 @@ export const MdsPrefLanguageItem = /*@__PURE__*/ createComponent({
587
586
  events: { onMdsPrefLanguageItemSelect: 'mdsPrefLanguageItemSelect' },
588
587
  defineCustomElement: defineMdsPrefLanguageItem
589
588
  });
590
- export const MdsPrefLanguageNav = /*@__PURE__*/ createComponent({
591
- tagName: 'mds-pref-language-nav',
592
- elementClass: MdsPrefLanguageNavElement,
593
- // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
594
- react: React,
595
- events: { onMdsPrefLanguageNavSelect: 'mdsPrefLanguageNavSelect' },
596
- defineCustomElement: defineMdsPrefLanguageNav
597
- });
598
589
  export const MdsPrefTheme = /*@__PURE__*/ createComponent({
599
590
  tagName: 'mds-pref-theme',
600
591
  elementClass: MdsPrefThemeElement,
package/dist/types/components.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type InputValue, type MdsAccordionCustomEvent, type MdsAccordionEventDetail, type MdsAccordionItemCustomEvent, type MdsAccordionItemEventDetail, type MdsAccordionTimerCustomEvent, type MdsAccordionTimerEventDetail, type MdsAccordionTimerItemCustomEvent, type MdsAccordionTimerItemEventDetail, type MdsBreadcrumbCustomEvent, type MdsBreadcrumbEventDetail, type MdsBreadcrumbItemCustomEvent, type MdsBreadcrumbItemEventDetail, type MdsChipCustomEvent, type MdsChipEvent, type MdsDropdownCustomEvent, type MdsDropdownEventDetail, type MdsFileCustomEvent, type MdsFileEventDetail, type MdsFilePreviewCustomEvent, type MdsFilePreviewEventDetail, type MdsFilterCustomEvent, type MdsFilterEventDetail, type MdsFilterItemCustomEvent, type MdsFilterItemEventDetail, type MdsHeaderCustomEvent, type MdsHeaderEventDetail, type MdsImgCustomEvent, type MdsImgEventDetail, type MdsInputCustomEvent, type MdsInputEventDetail, type MdsInputFieldCustomEvent, type MdsInputSelectCustomEvent, type MdsInputSwitchCustomEvent, type MdsInputSwitchEventDetail, type MdsInputUploadCustomEvent, type MdsPaginatorCustomEvent, type MdsPaginatorEventDetail, type MdsPrefAnimationCustomEvent, type MdsPrefChangeEventDetail, type MdsPrefConsumptionCustomEvent, type MdsPrefContrastCustomEvent, type MdsPrefLanguageCustomEvent, type MdsPrefLanguageEventDetail, type MdsPrefLanguageItemCustomEvent, type MdsPrefLanguageNavCustomEvent, type MdsPrefThemeCustomEvent, type MdsPushNotificationCustomEvent, type MdsPushNotificationEventDetail, type MdsStepperBarCustomEvent, type MdsStepperBarEventDetail, type MdsStepperBarItemCustomEvent, type MdsStepperBarItemEventDetail, type MdsTabBarCustomEvent, type MdsTabBarEventDetail, type MdsTabCustomEvent, type MdsTabEventDetail, type MdsTabItemCustomEvent, type MdsTabItemEventDetail } from "@maggioli-design-system/magma";
5
+ import { type MdsAccordionCustomEvent, type MdsAccordionEventDetail, type MdsAccordionItemCustomEvent, type MdsAccordionItemEventDetail, type MdsAccordionTimerCustomEvent, type MdsAccordionTimerEventDetail, type MdsAccordionTimerItemCustomEvent, type MdsAccordionTimerItemEventDetail, type MdsBreadcrumbCustomEvent, type MdsBreadcrumbEventDetail, type MdsBreadcrumbItemCustomEvent, type MdsBreadcrumbItemEventDetail, type MdsChipCustomEvent, type MdsChipEvent, type MdsDropdownCustomEvent, type MdsDropdownEventDetail, type MdsFileCustomEvent, type MdsFileEventDetail, type MdsFilePreviewCustomEvent, type MdsFilePreviewEventDetail, type MdsFilterCustomEvent, type MdsFilterEventDetail, type MdsFilterItemCustomEvent, type MdsFilterItemEventDetail, type MdsHeaderCustomEvent, type MdsHeaderEventDetail, type MdsImgCustomEvent, type MdsImgEventDetail, type MdsInputCustomEvent, type MdsInputEventDetail, type MdsInputFieldCustomEvent, type MdsInputSelectCustomEvent, type MdsInputSwitchCustomEvent, type MdsInputSwitchEventDetail, type MdsInputUploadCustomEvent, type MdsPaginatorCustomEvent, type MdsPaginatorEventDetail, type MdsPrefAnimationCustomEvent, type MdsPrefChangeEventDetail, type MdsPrefConsumptionCustomEvent, type MdsPrefContrastCustomEvent, type MdsPrefLanguageCustomEvent, type MdsPrefLanguageEventDetail, type MdsPrefLanguageItemCustomEvent, type MdsPrefThemeCustomEvent, type MdsPushNotificationCustomEvent, type MdsPushNotificationEventDetail, type MdsStepperBarCustomEvent, type MdsStepperBarEventDetail, type MdsStepperBarItemCustomEvent, type MdsStepperBarItemEventDetail, type MdsTabBarCustomEvent, type MdsTabBarEventDetail, type MdsTabCustomEvent, type MdsTabEventDetail, type MdsTabItemCustomEvent, type MdsTabItemEventDetail } from "@maggioli-design-system/magma";
6
6
  import { MdsAccordionItem as MdsAccordionItemElement } from "@maggioli-design-system/magma/dist/components/mds-accordion-item.js";
7
7
  import { MdsAccordionTimerItem as MdsAccordionTimerItemElement } from "@maggioli-design-system/magma/dist/components/mds-accordion-timer-item.js";
8
8
  import { MdsAccordionTimer as MdsAccordionTimerElement } from "@maggioli-design-system/magma/dist/components/mds-accordion-timer.js";
@@ -58,7 +58,6 @@ import { MdsPrefAnimation as MdsPrefAnimationElement } from "@maggioli-design-sy
58
58
  import { MdsPrefConsumption as MdsPrefConsumptionElement } from "@maggioli-design-system/magma/dist/components/mds-pref-consumption.js";
59
59
  import { MdsPrefContrast as MdsPrefContrastElement } from "@maggioli-design-system/magma/dist/components/mds-pref-contrast.js";
60
60
  import { MdsPrefLanguageItem as MdsPrefLanguageItemElement } from "@maggioli-design-system/magma/dist/components/mds-pref-language-item.js";
61
- import { MdsPrefLanguageNav as MdsPrefLanguageNavElement } from "@maggioli-design-system/magma/dist/components/mds-pref-language-nav.js";
62
61
  import { MdsPrefLanguage as MdsPrefLanguageElement } from "@maggioli-design-system/magma/dist/components/mds-pref-language.js";
63
62
  import { MdsPrefTheme as MdsPrefThemeElement } from "@maggioli-design-system/magma/dist/components/mds-pref-theme.js";
64
63
  import { MdsPref as MdsPrefElement } from "@maggioli-design-system/magma/dist/components/mds-pref.js";
@@ -225,7 +224,7 @@ type MdsInputRangeEvents = {
225
224
  };
226
225
  export declare const MdsInputRange: StencilReactComponent<MdsInputRangeElement, MdsInputRangeEvents>;
227
226
  type MdsInputSelectEvents = {
228
- onMdsInputSelectChange: EventName<MdsInputSelectCustomEvent<InputValue>>;
227
+ onMdsInputSelectChange: EventName<MdsInputSelectCustomEvent<MdsInputEventDetail>>;
229
228
  };
230
229
  export declare const MdsInputSelect: StencilReactComponent<MdsInputSelectElement, MdsInputSelectEvents>;
231
230
  type MdsInputSwitchEvents = {
@@ -292,10 +291,6 @@ type MdsPrefLanguageItemEvents = {
292
291
  onMdsPrefLanguageItemSelect: EventName<MdsPrefLanguageItemCustomEvent<MdsPrefLanguageEventDetail>>;
293
292
  };
294
293
  export declare const MdsPrefLanguageItem: StencilReactComponent<MdsPrefLanguageItemElement, MdsPrefLanguageItemEvents>;
295
- type MdsPrefLanguageNavEvents = {
296
- onMdsPrefLanguageNavSelect: EventName<MdsPrefLanguageNavCustomEvent<MdsPrefLanguageEventDetail>>;
297
- };
298
- export declare const MdsPrefLanguageNav: StencilReactComponent<MdsPrefLanguageNavElement, MdsPrefLanguageNavEvents>;
299
294
  type MdsPrefThemeEvents = {
300
295
  onMdsPrefChange: EventName<MdsPrefThemeCustomEvent<MdsPrefChangeEventDetail>>;
301
296
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maggioli-design-system/magma-react",
3
- "version": "1.0.0-beta",
3
+ "version": "1.0.1",
4
4
  "main": "dist/components.js",
5
5
  "module": "dist/components.js",
6
6
  "types": "dist/types/components.d.ts",
@@ -15,7 +15,7 @@
15
15
  "access": "public"
16
16
  },
17
17
  "dependencies": {
18
- "@maggioli-design-system/magma": "1.0.0-beta",
18
+ "@maggioli-design-system/magma": "1.0.1",
19
19
  "@stencil/react-output-target": "0.7.4"
20
20
  },
21
21
  "devDependencies": {