cloudmr-ux 0.0.1

package/README.md

@@ -0,0 +1,30 @@
+# eros-p
+
+> Made with create-react-library
+
+[![NPM](https://img.shields.io/npm/v/eros-p.svg)](https://www.npmjs.com/package/eros-p) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save eros-p
+```
+
+## Usage
+
+```jsx
+import React, { Component } from 'react'
+
+import MyComponent from 'eros-p'
+import 'eros-p/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## License
+
+MIT © [erosmontin](https://github.com/erosmontin)

package/dist/index.css

@@ -0,0 +1,17 @@
+
+
+
+._3RkVB {
+  margin-bottom: 4px;
+}
+._2hbQU {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 15px;
+  text-align: justify;
+  color: #707683;
+}
+._3vu54 {
+  margin-bottom: 4px;
+}

package/dist/index.js

@@ -0,0 +1,174 @@
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var material = require('@mui/material');
+var antd = require('antd');
+require('antd/lib/config-provider/SizeContext');
+require('antd/lib/_util/type');
+require('antd/lib/avatar/SizeContext');
+require('antd/es/checkbox');
+require('antd/es/collapse/CollapsePanel');
+require('antd/es/collapse/Collapse');
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+const CmrButton = props => {
+  const {
+    children,
+    onClick,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(material.Button, _extends({
+    onClick: onClick
+  }, rest, {
+    style: {
+      ...props.style,
+      textTransform: 'none'
+    }
+  }), children);
+};
+
+const CmrInput = props => {
+  const {
+    defaultValue,
+    id,
+    maxLength,
+    size,
+    value,
+    type,
+    prefix,
+    bordered,
+    onChange,
+    onPressEnter,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(antd.Input, _extends({
+    defaultValue: defaultValue,
+    id: id,
+    maxLength: maxLength,
+    size: size,
+    value: value,
+    type: type,
+    prefix: prefix,
+    bordered: bordered,
+    onChange: onChange,
+    onPressEnter: onPressEnter
+  }, rest));
+};
+
+const CmrAvatar = props => {
+  const {
+    icon,
+    shape,
+    size,
+    gap,
+    src,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(antd.Avatar, _extends({
+    icon: icon,
+    shape: shape,
+    size: size,
+    gap: gap,
+    src: src
+  }, rest), children);
+};
+
+const CmrCheckbox = props => {
+  const {
+    defaultChecked,
+    onChange,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(material.FormControlLabel, {
+    disabled: props.disabled,
+    style: props.style,
+    className: props.className,
+    control: /*#__PURE__*/React__default.createElement(material.Checkbox, {
+      style: props.style,
+      checked: props.checked,
+      defaultChecked: defaultChecked,
+      onChange: onChange
+    }),
+    label: /*#__PURE__*/React__default.createElement("span", {
+      className: "cmr-label",
+      style: {
+        paddingRight: 0,
+        color: 'var(--bs-card-color)'
+      }
+    }, props.children),
+    labelPlacement: "start"
+  });
+};
+
+const CmrCollapse = props => {
+  let {
+    activeKey,
+    defaultActiveKey,
+    onChange,
+    children
+  } = props;
+  defaultActiveKey = defaultActiveKey ? defaultActiveKey : [];
+  let [activeKeys, setActiveKeys] = React__default.useState(defaultActiveKey);
+  if (activeKey != undefined && activeKey != activeKeys) {
+    console.log(activeKey);
+    if (activeKey instanceof Array) setActiveKeys(activeKey);else setActiveKeys([activeKey]);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "cmr-collapse"
+  }, /*#__PURE__*/React__default.createElement("div", null, children && Array.isArray(children) ? children.map((child, index) => {
+    let props = {
+      expanded: activeKeys.indexOf(index) >= 0,
+      panelKey: index,
+      onToggle: key => {
+        let i = activeKeys.indexOf(key);
+        if (i < 0) {
+          let newKeys = [...activeKeys];
+          newKeys.push(index);
+          setActiveKeys(newKeys);
+          if (onChange != undefined) onChange(newKeys);
+        } else {
+          let newKeys = [...activeKeys];
+          newKeys.splice(i, 1);
+          setActiveKeys(newKeys);
+          if (onChange != undefined) onChange(newKeys);
+        }
+      }
+    };
+    return React.cloneElement(child, props);
+  }) : children ? React.cloneElement(children, {
+    expanded: activeKeys.indexOf(0) >= 0,
+    panelKey: 0,
+    onToggle: key => {
+      let i = activeKeys.indexOf(key);
+      if (i < 0) {
+        let newKeys = [...activeKeys];
+        newKeys.push(0);
+        setActiveKeys(newKeys);
+      } else {
+        let newKeys = [...activeKeys];
+        newKeys.splice(i, 1);
+        setActiveKeys(newKeys);
+      }
+      if (onChange != undefined) onChange([0]);
+    }
+  }) : undefined));
+};
+
+exports.CmrAvatar = CmrAvatar;
+exports.CmrButton = CmrButton;
+exports.CmrCheckbox = CmrCheckbox;
+exports.CmrCollapse = CmrCollapse;
+exports.CmrInput = CmrInput;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/common/components/Cmr-components/button/Button.tsx","../src/common/components/Cmr-components/input/Input.tsx","../src/common/components/Cmr-components/avatar/Avatar.tsx","../src/common/components/Cmr-components/checkbox/Checkbox.tsx","../src/common/components/Cmr-components/collapse/Collapse.tsx"],"sourcesContent":["import React from 'react';\nimport '../button/Button.scss';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport const CmrButton = (props: ButtonProps) => {\n    const { children, onClick, ...rest } = props;\n\n    return (\n        <Button onClick={onClick} {...rest} style={{...props.style, textTransform:'none'}}>\n            {children}\n        </Button>\n    );\n};\n\n","import React from 'react';\nimport './Input.scss';\nimport { Input } from 'antd';\nimport { SizeType } from 'antd/lib/config-provider/SizeContext';\nimport { LiteralUnion } from 'antd/lib/_util/type';\n\ninterface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {\n    defaultValue?: string;\n    id?: string;\n    maxLength?: number;\n    size?: SizeType;\n    value?: string;\n    type?: any;\n    prefix?: React.ReactNode;\n    bordered?: boolean;\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nexport const CmrInput = (props: CmrInputProps) => {\n    const { defaultValue, id, maxLength, size, value, type, prefix, bordered, onChange, onPressEnter, ...rest } = props;\n\n    return (\n        <Input\n            defaultValue={defaultValue}\n            id={id}\n            maxLength={maxLength}\n            size={size}\n            value={value}\n            type={type}\n            prefix={prefix}\n            bordered={bordered}\n            onChange={onChange}\n            onPressEnter={onPressEnter}\n            {...rest}\n        />\n    );\n};\n\n","import React from 'react';\nimport './Avatar.scss';\nimport { Avatar } from 'antd';\n//@ts-ignore\nimport { AvatarSize } from 'antd/lib/avatar/SizeContext';\n\ninterface CmrAvatarProps {\n    icon?: React.ReactNode;\n    shape?: 'circle' | 'square';\n    size?: AvatarSize;\n    gap?: number;\n    src?: React.ReactNode;\n    children?: React.ReactNode;\n}\n\nexport const CmrAvatar = (props: CmrAvatarProps) => {\n    const { icon, shape, size, gap, src, children, ...rest } = props;\n\n    return (\n        <Avatar icon={icon} shape={shape} size={size} gap={gap} src={src} {...rest}>\n            {children}\n        </Avatar>\n    );\n};\n\n","import React, {ChangeEvent} from 'react';\nimport { Checkbox } from '@mui/material';\nimport './Checkbox.scss';\nimport { CheckboxChangeEvent } from 'antd/es/checkbox';\nimport { FormControlLabel } from '@mui/material';\n\ninterface CmrCheckboxProps  extends React.HTMLAttributes<HTMLDivElement>{\n    autoFocus?: boolean;\n    checked?: boolean;\n    defaultChecked?: boolean;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    children?: any;\n    style?: any;\n}\n\nexport const CmrCheckbox = (props: CmrCheckboxProps) => {\n    const { defaultChecked, onChange, children, ...rest } = props;\n\n    return (\n        <FormControlLabel disabled={props.disabled} style={props.style} className={props.className} control={<Checkbox style={props.style} checked={props.checked} defaultChecked={defaultChecked} onChange={onChange}/>}\n                          label={<span className='cmr-label' style={{paddingRight:0, color:'var(--bs-card-color)'}}>\n                                {props.children}\n                          </span>}\n                          labelPlacement=\"start\"/>\n    );\n};\n\n","import React, {cloneElement} from 'react';\nimport { Collapse } from 'antd';\nimport { CollapsibleType } from 'antd/es/collapse/CollapsePanel';\nimport { ExpandIconPosition } from 'antd/es/collapse/Collapse';\nimport './Collapse.scss';\n\ninterface CmrCollapseProps {\n    accordion?: boolean;\n    activeKey?: Array<string | number>|number;\n    bordered?: boolean;\n    collapsible?: CollapsibleType;\n    defaultActiveKey?: Array<string | number>;\n    destroyInactivePanel?: boolean;\n    expandIconPosition?: ExpandIconPosition;\n    ghost?: boolean;\n    onChange?: (key:Array<string | number>|number) => void;\n    children?: JSX.Element[]|JSX.Element;\n}\n\nexport const CmrCollapse = (props: CmrCollapseProps) => {\n    let {activeKey, defaultActiveKey, onChange, children}=props;\n    defaultActiveKey = (defaultActiveKey)?defaultActiveKey:[];\n    let [activeKeys, setActiveKeys] = React.useState(defaultActiveKey);\n    if(activeKey!=undefined&&activeKey!=activeKeys){\n        console.log(activeKey);\n        if(activeKey instanceof Array)\n            setActiveKeys(activeKey);\n        else setActiveKeys([activeKey]);\n    }\n    return (\n        <div className=\"cmr-collapse\">\n            <div>\n                {(children&&Array.isArray(children))?children.map((child,index)=>{\n                    let props = {expanded:activeKeys.indexOf(index)>=0,\n                                panelKey: index,\n                                onToggle: (key:number)=>{\n                                    let i = activeKeys.indexOf(key);\n                                    if(i<0) {\n                                        let newKeys = [...activeKeys];\n                                        newKeys.push(index);\n                                        setActiveKeys(newKeys);\n                                        if(onChange!=undefined)\n                                            onChange(newKeys);\n                                    }\n                                    else {\n                                        let newKeys = [...activeKeys];\n                                        newKeys.splice(i,1);\n                                        setActiveKeys(newKeys);\n                                        if(onChange!=undefined)\n                                            onChange(newKeys);\n                                    }\n                                }};\n                    return cloneElement(child, props)\n                }):((children?cloneElement(children,{expanded:activeKeys.indexOf(0)>=0,\n                    panelKey: 0,\n                    onToggle: (key:number)=>{\n                        let i = activeKeys.indexOf(key);\n                        if(i<0) {\n                            let newKeys = [...activeKeys];\n                            newKeys.push(0);\n                            setActiveKeys(newKeys);\n                        }\n                        else {\n                            let newKeys = [...activeKeys];\n                            newKeys.splice(i,1);\n                            setActiveKeys(newKeys);\n                        }\n                        if(onChange!=undefined)\n                            onChange([0]);\n                    }}):undefined))}\n            </div>\n        </div>\n    );\n};\n\n"],"names":["CmrButton","props","children","onClick","rest","React","createElement","Button","_extends","style","textTransform","CmrInput","defaultValue","id","maxLength","size","value","type","prefix","bordered","onChange","onPressEnter","Input","CmrAvatar","icon","shape","gap","src","Avatar","CmrCheckbox","defaultChecked","FormControlLabel","disabled","className","control","Checkbox","checked","label","paddingRight","color","labelPlacement","CmrCollapse","activeKey","defaultActiveKey","activeKeys","setActiveKeys","useState","undefined","console","log","Array","isArray","map","child","index","expanded","indexOf","panelKey","onToggle","key","i","newKeys","push","splice","cloneElement"],"mappings":"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"}

package/dist/index.modern.js

@@ -0,0 +1,167 @@
+import React, { cloneElement } from 'react';
+import { Button, FormControlLabel, Checkbox } from '@mui/material';
+import { Input, Avatar } from 'antd';
+import 'antd/lib/config-provider/SizeContext';
+import 'antd/lib/_util/type';
+import 'antd/lib/avatar/SizeContext';
+import 'antd/es/checkbox';
+import 'antd/es/collapse/CollapsePanel';
+import 'antd/es/collapse/Collapse';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+const CmrButton = props => {
+  const {
+    children,
+    onClick,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: onClick
+  }, rest, {
+    style: {
+      ...props.style,
+      textTransform: 'none'
+    }
+  }), children);
+};
+
+const CmrInput = props => {
+  const {
+    defaultValue,
+    id,
+    maxLength,
+    size,
+    value,
+    type,
+    prefix,
+    bordered,
+    onChange,
+    onPressEnter,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    defaultValue: defaultValue,
+    id: id,
+    maxLength: maxLength,
+    size: size,
+    value: value,
+    type: type,
+    prefix: prefix,
+    bordered: bordered,
+    onChange: onChange,
+    onPressEnter: onPressEnter
+  }, rest));
+};
+
+const CmrAvatar = props => {
+  const {
+    icon,
+    shape,
+    size,
+    gap,
+    src,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Avatar, _extends({
+    icon: icon,
+    shape: shape,
+    size: size,
+    gap: gap,
+    src: src
+  }, rest), children);
+};
+
+const CmrCheckbox = props => {
+  const {
+    defaultChecked,
+    onChange,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(FormControlLabel, {
+    disabled: props.disabled,
+    style: props.style,
+    className: props.className,
+    control: /*#__PURE__*/React.createElement(Checkbox, {
+      style: props.style,
+      checked: props.checked,
+      defaultChecked: defaultChecked,
+      onChange: onChange
+    }),
+    label: /*#__PURE__*/React.createElement("span", {
+      className: "cmr-label",
+      style: {
+        paddingRight: 0,
+        color: 'var(--bs-card-color)'
+      }
+    }, props.children),
+    labelPlacement: "start"
+  });
+};
+
+const CmrCollapse = props => {
+  let {
+    activeKey,
+    defaultActiveKey,
+    onChange,
+    children
+  } = props;
+  defaultActiveKey = defaultActiveKey ? defaultActiveKey : [];
+  let [activeKeys, setActiveKeys] = React.useState(defaultActiveKey);
+  if (activeKey != undefined && activeKey != activeKeys) {
+    console.log(activeKey);
+    if (activeKey instanceof Array) setActiveKeys(activeKey);else setActiveKeys([activeKey]);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmr-collapse"
+  }, /*#__PURE__*/React.createElement("div", null, children && Array.isArray(children) ? children.map((child, index) => {
+    let props = {
+      expanded: activeKeys.indexOf(index) >= 0,
+      panelKey: index,
+      onToggle: key => {
+        let i = activeKeys.indexOf(key);
+        if (i < 0) {
+          let newKeys = [...activeKeys];
+          newKeys.push(index);
+          setActiveKeys(newKeys);
+          if (onChange != undefined) onChange(newKeys);
+        } else {
+          let newKeys = [...activeKeys];
+          newKeys.splice(i, 1);
+          setActiveKeys(newKeys);
+          if (onChange != undefined) onChange(newKeys);
+        }
+      }
+    };
+    return cloneElement(child, props);
+  }) : children ? cloneElement(children, {
+    expanded: activeKeys.indexOf(0) >= 0,
+    panelKey: 0,
+    onToggle: key => {
+      let i = activeKeys.indexOf(key);
+      if (i < 0) {
+        let newKeys = [...activeKeys];
+        newKeys.push(0);
+        setActiveKeys(newKeys);
+      } else {
+        let newKeys = [...activeKeys];
+        newKeys.splice(i, 1);
+        setActiveKeys(newKeys);
+      }
+      if (onChange != undefined) onChange([0]);
+    }
+  }) : undefined));
+};
+
+export { CmrAvatar, CmrButton, CmrCheckbox, CmrCollapse, CmrInput };
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/common/components/Cmr-components/button/Button.tsx","../src/common/components/Cmr-components/input/Input.tsx","../src/common/components/Cmr-components/avatar/Avatar.tsx","../src/common/components/Cmr-components/checkbox/Checkbox.tsx","../src/common/components/Cmr-components/collapse/Collapse.tsx"],"sourcesContent":["import React from 'react';\nimport '../button/Button.scss';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport const CmrButton = (props: ButtonProps) => {\n    const { children, onClick, ...rest } = props;\n\n    return (\n        <Button onClick={onClick} {...rest} style={{...props.style, textTransform:'none'}}>\n            {children}\n        </Button>\n    );\n};\n\n","import React from 'react';\nimport './Input.scss';\nimport { Input } from 'antd';\nimport { SizeType } from 'antd/lib/config-provider/SizeContext';\nimport { LiteralUnion } from 'antd/lib/_util/type';\n\ninterface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {\n    defaultValue?: string;\n    id?: string;\n    maxLength?: number;\n    size?: SizeType;\n    value?: string;\n    type?: any;\n    prefix?: React.ReactNode;\n    bordered?: boolean;\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nexport const CmrInput = (props: CmrInputProps) => {\n    const { defaultValue, id, maxLength, size, value, type, prefix, bordered, onChange, onPressEnter, ...rest } = props;\n\n    return (\n        <Input\n            defaultValue={defaultValue}\n            id={id}\n            maxLength={maxLength}\n            size={size}\n            value={value}\n            type={type}\n            prefix={prefix}\n            bordered={bordered}\n            onChange={onChange}\n            onPressEnter={onPressEnter}\n            {...rest}\n        />\n    );\n};\n\n","import React from 'react';\nimport './Avatar.scss';\nimport { Avatar } from 'antd';\n//@ts-ignore\nimport { AvatarSize } from 'antd/lib/avatar/SizeContext';\n\ninterface CmrAvatarProps {\n    icon?: React.ReactNode;\n    shape?: 'circle' | 'square';\n    size?: AvatarSize;\n    gap?: number;\n    src?: React.ReactNode;\n    children?: React.ReactNode;\n}\n\nexport const CmrAvatar = (props: CmrAvatarProps) => {\n    const { icon, shape, size, gap, src, children, ...rest } = props;\n\n    return (\n        <Avatar icon={icon} shape={shape} size={size} gap={gap} src={src} {...rest}>\n            {children}\n        </Avatar>\n    );\n};\n\n","import React, {ChangeEvent} from 'react';\nimport { Checkbox } from '@mui/material';\nimport './Checkbox.scss';\nimport { CheckboxChangeEvent } from 'antd/es/checkbox';\nimport { FormControlLabel } from '@mui/material';\n\ninterface CmrCheckboxProps  extends React.HTMLAttributes<HTMLDivElement>{\n    autoFocus?: boolean;\n    checked?: boolean;\n    defaultChecked?: boolean;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    children?: any;\n    style?: any;\n}\n\nexport const CmrCheckbox = (props: CmrCheckboxProps) => {\n    const { defaultChecked, onChange, children, ...rest } = props;\n\n    return (\n        <FormControlLabel disabled={props.disabled} style={props.style} className={props.className} control={<Checkbox style={props.style} checked={props.checked} defaultChecked={defaultChecked} onChange={onChange}/>}\n                          label={<span className='cmr-label' style={{paddingRight:0, color:'var(--bs-card-color)'}}>\n                                {props.children}\n                          </span>}\n                          labelPlacement=\"start\"/>\n    );\n};\n\n","import React, {cloneElement} from 'react';\nimport { Collapse } from 'antd';\nimport { CollapsibleType } from 'antd/es/collapse/CollapsePanel';\nimport { ExpandIconPosition } from 'antd/es/collapse/Collapse';\nimport './Collapse.scss';\n\ninterface CmrCollapseProps {\n    accordion?: boolean;\n    activeKey?: Array<string | number>|number;\n    bordered?: boolean;\n    collapsible?: CollapsibleType;\n    defaultActiveKey?: Array<string | number>;\n    destroyInactivePanel?: boolean;\n    expandIconPosition?: ExpandIconPosition;\n    ghost?: boolean;\n    onChange?: (key:Array<string | number>|number) => void;\n    children?: JSX.Element[]|JSX.Element;\n}\n\nexport const CmrCollapse = (props: CmrCollapseProps) => {\n    let {activeKey, defaultActiveKey, onChange, children}=props;\n    defaultActiveKey = (defaultActiveKey)?defaultActiveKey:[];\n    let [activeKeys, setActiveKeys] = React.useState(defaultActiveKey);\n    if(activeKey!=undefined&&activeKey!=activeKeys){\n        console.log(activeKey);\n        if(activeKey instanceof Array)\n            setActiveKeys(activeKey);\n        else setActiveKeys([activeKey]);\n    }\n    return (\n        <div className=\"cmr-collapse\">\n            <div>\n                {(children&&Array.isArray(children))?children.map((child,index)=>{\n                    let props = {expanded:activeKeys.indexOf(index)>=0,\n                                panelKey: index,\n                                onToggle: (key:number)=>{\n                                    let i = activeKeys.indexOf(key);\n                                    if(i<0) {\n                                        let newKeys = [...activeKeys];\n                                        newKeys.push(index);\n                                        setActiveKeys(newKeys);\n                                        if(onChange!=undefined)\n                                            onChange(newKeys);\n                                    }\n                                    else {\n                                        let newKeys = [...activeKeys];\n                                        newKeys.splice(i,1);\n                                        setActiveKeys(newKeys);\n                                        if(onChange!=undefined)\n                                            onChange(newKeys);\n                                    }\n                                }};\n                    return cloneElement(child, props)\n                }):((children?cloneElement(children,{expanded:activeKeys.indexOf(0)>=0,\n                    panelKey: 0,\n                    onToggle: (key:number)=>{\n                        let i = activeKeys.indexOf(key);\n                        if(i<0) {\n                            let newKeys = [...activeKeys];\n                            newKeys.push(0);\n                            setActiveKeys(newKeys);\n                        }\n                        else {\n                            let newKeys = [...activeKeys];\n                            newKeys.splice(i,1);\n                            setActiveKeys(newKeys);\n                        }\n                        if(onChange!=undefined)\n                            onChange([0]);\n                    }}):undefined))}\n            </div>\n        </div>\n    );\n};\n\n"],"names":["CmrButton","props","children","onClick","rest","React","createElement","Button","_extends","style","textTransform","CmrInput","defaultValue","id","maxLength","size","value","type","prefix","bordered","onChange","onPressEnter","Input","CmrAvatar","icon","shape","gap","src","Avatar","CmrCheckbox","defaultChecked","FormControlLabel","disabled","className","control","Checkbox","checked","label","paddingRight","color","labelPlacement","CmrCollapse","activeKey","defaultActiveKey","activeKeys","setActiveKeys","useState","undefined","console","log","Array","isArray","map","child","index","expanded","indexOf","panelKey","onToggle","key","i","newKeys","push","splice","cloneElement"],"mappings":"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"}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "cloudmr-ux",
+  "version": "0.0.1",
+  "description": "Made with create-react-library",
+  "author": "erosmontin",
+  "license": "MIT",
+  "repository": "erosmontin/eros-p",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.js",
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && npm install && npm run build",
+    "deploy": "gh-pages -d example/build"
+  },
+"dependencies": {
+    "@ant-design/cssinjs": "^1.16.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.1",
+    "@mui/material": "^5.14.2",
+    "@mui/x-data-grid": "^6.10.1",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.0",
+    "antd": "^5.7.3",
+    "axios": "^1.4.0",
+    "bootstrap": "^5.3.1",
+    "gl-matrix": "^3.4.3",
+    "https-browserify": "^1.0.0",
+    "jszip": "^3.10.1",
+    "lil-gui": "^0.19.1",
+    "mathjax": "^3.2.2",
+    "mathjs": "^11.9.1",
+    "moment": "^2.29.4",
+    "plotly.js-dist-min": "^2.27.0",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "^6.14.2",
+    "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
+    "sass": "^1.64.1",
+    "web-vitals": "^2.1.0",
+    "babel-eslint": "^10.0.3",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4"
+  },
+  "files": [
+    "dist",
+    "src/**"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+
+}

package/src/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

package/src/common/components/Cmr-components/avatar/Avatar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Avatar.scss';
+import { Avatar } from 'antd';
+//@ts-ignore
+import { AvatarSize } from 'antd/lib/avatar/SizeContext';
+
+interface CmrAvatarProps {
+    icon?: React.ReactNode;
+    shape?: 'circle' | 'square';
+    size?: AvatarSize;
+    gap?: number;
+    src?: React.ReactNode;
+    children?: React.ReactNode;
+}
+
+export const CmrAvatar = (props: CmrAvatarProps) => {
+    const { icon, shape, size, gap, src, children, ...rest } = props;
+
+    return (
+        <Avatar icon={icon} shape={shape} size={size} gap={gap} src={src} {...rest}>
+            {children}
+        </Avatar>
+    );
+};
+

package/src/common/components/Cmr-components/button/Button.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import '../button/Button.scss';
+import { Button, ButtonProps } from '@mui/material';
+
+export const CmrButton = (props: ButtonProps) => {
+    const { children, onClick, ...rest } = props;
+
+    return (
+        <Button onClick={onClick} {...rest} style={{...props.style, textTransform:'none'}}>
+            {children}
+        </Button>
+    );
+};
+

package/src/common/components/Cmr-components/checkbox/Checkbox.scss

@@ -0,0 +1,11 @@
+.cmr-checkbox {
+    margin-bottom: 4px;
+    &__text {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 15px;
+        text-align: justify;
+        color: #707683;
+    }
+}

package/src/common/components/Cmr-components/checkbox/Checkbox.tsx

@@ -0,0 +1,29 @@
+import React, {ChangeEvent} from 'react';
+import { Checkbox } from '@mui/material';
+import './Checkbox.scss';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { FormControlLabel } from '@mui/material';
+
+interface CmrCheckboxProps  extends React.HTMLAttributes<HTMLDivElement>{
+    autoFocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    children?: any;
+    style?: any;
+}
+
+export const CmrCheckbox = (props: CmrCheckboxProps) => {
+    const { defaultChecked, onChange, children, ...rest } = props;
+
+    return (
+        <FormControlLabel disabled={props.disabled} style={props.style} className={props.className} control={<Checkbox style={props.style} checked={props.checked} defaultChecked={defaultChecked} onChange={onChange}/>}
+                          label={<span className='cmr-label' style={{paddingRight:0, color:'var(--bs-card-color)'}}>
+                                {props.children}
+                          </span>}
+                          labelPlacement="start"/>
+    );
+};
+

package/src/common/components/Cmr-components/collapse/Collapse.scss

@@ -0,0 +1,3 @@
+.collapse-bar {
+  margin-bottom: 4px;
+}