Merge pull request #247 from Capgemini/feature/microbundle-webapck

Feature/microbundle webapck

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.3.2 (18/11/2021)
+
+<a name="0.3.2"></a>
+
+- [support for webapck 5](https://github.com/Capgemini/dcx-react-library/issues/246)
+
 ## 0.3.0 (25/10/2021)
 
 <a name="0.3.0"></a>
@@ -9,8 +15,8 @@
 - [microbuild engine](https://github.com/Capgemini/dcx-react-library/issues/240)
 - [details](https://github.com/Capgemini/dcx-react-library/issues/235)
 
-
 ## 0.2.4 (07/10/2021)
+
 <a name="0.2.4"></a>
 
 - [Add anchor to each tab](https://github.com/Capgemini/dcx-react-library/issues/229)

example/src/components/AutocompleteDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Autocomplete } from 'dcx-react-library';
+import { Autocomplete } from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 

example/src/components/ButtonDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'dcx-react-library';
+import { Button } from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 

example/src/components/CopyToClipboardDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CopyToClipboard } from 'dcx-react-library';
+import { CopyToClipboard } from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
 export const CopyToClipboardDemo = () => {

example/src/components/DetailsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Details, Table } from 'dcx-react-library';
+import { Details, Table } from '@capgeminiuk/dcx-react-library';
 
 interface PeriodicElement {
   id: number;

example/src/components/FormCheckboxDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormCheckbox, FormGroup } from 'dcx-react-library';
+import { FormCheckbox, FormGroup } from '@capgeminiuk/dcx-react-library';
 
 export const FormCheckboxDemo = () => {
   const [value, setValue] = React.useState('');

example/src/components/FormDateDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormDate } from 'dcx-react-library';
+import { FormDate } from '@capgeminiuk/dcx-react-library';
 import { Label } from '../generated-components';
 import './formDate.scss';
 export const FormDateDemo = () => {

example/src/components/FormInputDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormInput, ErrorPosition } from 'dcx-react-library';
+import { FormInput, ErrorPosition } from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 

example/src/components/FormInputMaskedDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormInputMasked } from 'dcx-react-library';
+import { FormInputMasked } from '@capgeminiuk/dcx-react-library';
 export const FormInputMaskedDemo = () => {
   const [value, setValue] = React.useState('');
   const [typedValue, setTypedValue] = React.useState('');

example/src/components/FormRadioDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormRadio, FormGroup } from 'dcx-react-library';
+import { FormRadio, FormGroup } from '@capgeminiuk/dcx-react-library';
 
 export const FormRadioDemo = () => {
   const [selected, setSelected] = React.useState('single-2');

example/src/components/FormSelectDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormSelect } from 'dcx-react-library';
+import { FormSelect } from '@capgeminiuk/dcx-react-library';
 
 export const FormSelectDemo = () => {
   //@ts-ignore

example/src/components/MultiSelectDemo.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 //@ts-ignore
-import { MultiSelect, MultiSelectOption } from 'dcx-react-library';
+import { MultiSelect, MultiSelectOption } from '@capgeminiuk/dcx-react-library';
 
 const multiSelectOptions: MultiSelectOption[] = [
   'Aaliyah',

example/src/components/MultiUploadDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MultiUpload } from 'dcx-react-library';
+import { MultiUpload } from '@capgeminiuk/dcx-react-library';
 
 export const MultiUploadDemo = () => {
   //@ts-ignore

example/src/components/ProgressDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Progress } from 'dcx-react-library';
+import { Progress } from '@capgeminiuk/dcx-react-library';
 
 export const ProgressDemo = () => (
   <Progress label="Progress" max={100} value={80} />

example/src/components/RangeDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Range } from 'dcx-react-library';
+import { Range } from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faVolumeDown, faVolumeUp } from '@fortawesome/free-solid-svg-icons';
 import './range.scss';

example/src/components/TabGroupDemo.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, TabGroup, Tab } from 'dcx-react-library';
+import { Button, TabGroup, Tab } from '@capgeminiuk/dcx-react-library';
 import './tabGroup.scss';
 
 export const TabGroupDemo = () => {

example/src/components/TableDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './table.css';
-import { Table } from 'dcx-react-library';
+import { Table } from '@capgeminiuk/dcx-react-library';
 
 interface PeriodicElement {
   id: number;

example/src/components/ToggleDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Toggle } from 'dcx-react-library';
+import { Toggle } from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faPowerOff } from '@fortawesome/free-solid-svg-icons';
 export const ToggleDemo = () => {
@@ -9,7 +9,7 @@ export const ToggleDemo = () => {
     <div>
       <Toggle
         checked={checked}
-        onChange={e => {
+        onChange={(e) => {
           setChecked(e);
         }}
         onColor="orange"

example/src/components/TooltipDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToolTip } from 'dcx-react-library';
+import { ToolTip } from '@capgeminiuk/dcx-react-library';
 import './tooltip.css';
 
 export const TooltipDemo = () => {

example/src/components/library-candidates/LoginForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FormInput, Button } from 'dcx-react-library';
+import { FormInput, Button } from '@capgeminiuk/dcx-react-library';
 import { Label } from '../../generated-components';
 
 const initialState = {

example/src/generated-components/HeadingOne.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { DynamicComponent, brandedComponentStyle } from 'dcx-react-library';
+import {
+  DynamicComponent,
+  brandedComponentStyle,
+} from '@capgeminiuk/dcx-react-library';
 import jsonStyle from '../component-template/headingOne.json';
 export const HeadingOne = ({ ...props }: any) => {
   const branded: any = brandedComponentStyle(jsonStyle.headingOne);

example/src/generated-components/Label.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { DynamicComponent, brandedComponentStyle } from 'dcx-react-library';
+import {
+  DynamicComponent,
+  brandedComponentStyle,
+} from '@capgeminiuk/dcx-react-library';
 import jsonStyle from '../component-template/label.json';
 export const Label = ({ ...props }: any) => {
   const branded: any = brandedComponentStyle(jsonStyle.label);

example/src/generated-components/Link.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { DynamicComponent, brandedComponentStyle } from 'dcx-react-library';
+import {
+  DynamicComponent,
+  brandedComponentStyle,
+} from '@capgeminiuk/dcx-react-library';
 import jsonStyle from '../component-template/link.json';
 export const Link = ({ href, text, classes, ...props }: any) => {
   const branded: any = brandedComponentStyle(jsonStyle.link);

example/src/pages/Register.tsx

@@ -14,7 +14,7 @@ import {
   FormDate,
   ErrorPosition,
   BUTTON_TYPE,
-} from 'dcx-react-library';
+} from '@capgeminiuk/dcx-react-library';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faSpinner,

package.json

@@ -2,7 +2,7 @@
   "name": "@capgeminiuk/dcx-react-library",
   "author": "Daniele Zurico",
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "source": "src/index.ts",
   "main": "dist/dcx-react-library.js",
   "module": "dist/dcx-react-library.module.js",
@@ -82,7 +82,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.3.1",
     "lint": "^0.7.0",
-    "microbundle": "^0.12.4",
+    "microbundle": "^0.14.2",
     "mock-fs": "^5.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

setup.sh

@@ -28,7 +28,7 @@ rm -rf node_modules/
 echo "installing dependencies..."
 yarn install
 echo "linking library dependencies..."
-yarn link dcx-react-library
-yarn link react
-yarn link react-dom
+yarn link "@capgeminiuk/dcx-react-library"
+yarn link "react"
+yarn link "react-dom"
 yarn start