feat: refactor panel components to use CSS modules and improve class …

…naming

src/designer/panels/Column.jsx

@@ -1,22 +1,23 @@
-import React, {Component} from 'react';
-import _ from 'lodash';
-import Icon from '../Icon';
+import React from 'react';
 
-import styles from './styles';
+import styles from './styles/panel.module.css'
 
 const Column = ({showIf=true, ...props}) => {
   if (!showIf) {
     return <div style={styles.empty} />;
   }
 
   return (
-    <div style={{...styles.column, ...props.style}}>
+    <div className={styles.column} style={{ ...props.style}}>
       {props.children ||
-        <input style={{...styles.input, ...styles.integerInput}} value={props.value}
-               onChange={(e) => props.onChange(e.target.value)} />
+        <input 
+          className={`${styles.input} ${styles.textInput}`}
+          value={props.value}
+          onChange={(e) => props.onChange(e.target.value)} 
+        />
       }
       {props.label &&
-        <div style={styles.inputHelper}>{props.label}</div>}
+        <div className={styles.inputHelper}>{props.label}</div>}
     </div>
   );
 };

src/designer/panels/Columns.jsx

@@ -1,16 +1,13 @@
-import React, {Component} from 'react';
-import _ from 'lodash';
-import Icon from '../Icon';
-
-import styles from './styles';
+import React from 'react';
+import styles from './styles/panel.module.css'
 
 const Columns = ({showIf=true, ...props}) => {
   if (!showIf) {
-    return <div style={styles.empty} />;
+    return <div className={styles.empty} />;
   }
   return (
-    <div style={styles.columns}>
-      <div style={styles.panelTitle}>{props.label}</div>
+    <div className={styles.columns}>
+      <div className={styles.panelTitle}>{props.label}</div>
       {props.children}
     </div>
   )

src/designer/panels/ImagePanel.jsx

@@ -8,7 +8,7 @@ import { GridContainer } from './GridContainer'
 import { NameItem } from './NameItem'
 import { Switch } from './Switch'
 import { useHasProperty } from '../hooks/useHasProperty'
-import styles from './styles'
+import styles from './styles/panel.module.css'
 
 export const ImagePanel = ({ onChange, object }) => {
   const [hasProperty] = useHasProperty(object)
@@ -28,7 +28,7 @@ export const ImagePanel = ({ onChange, object }) => {
   }, [])
 
   return (
-    <PropertyGroup object={object} showIf={_.has(object, 'xlinkHref')}>
+    <PropertyGroup className="react-designer-image-panel" object={object} showIf={_.has(object, 'xlinkHref')}>
       <GridContainer>
         {hasProperty('active') && (
           <RowFlex>
@@ -43,7 +43,7 @@ export const ImagePanel = ({ onChange, object }) => {
         <NameItem>Label:</NameItem>
         <RowFlex>
           <input
-            style={{ ...styles.input, ...styles.textInput }}
+            className={`${styles.input} ${styles.textInput}`}
             onChange={(e) => onChange('label', e.target.value)}
             value={object.label}
           />

src/designer/panels/PanelList.jsx

@@ -1,16 +1,6 @@
 import React, {Component} from 'react';
-import _ from 'lodash';
-import { Portal } from 'react-portal';
-
-import Icon from '../Icon';
-
-import styles from './styles';
 import PropertyGroup from './PropertyGroup';
-import Button from './Button';
-import SwitchState from './SwitchState';
-import Columns from './Columns';
-import Column from './Column';
-import styleCss from './styles/panel.module.css'
+import styles from './styles/panel.module.css'
 import { NameItem } from './NameItem';
 import { RowFlex } from './RowFlex';
 
@@ -19,12 +9,11 @@ class PanelList extends Component {
     let {object, objectComponent, id, showPanels, show = false} = this.props;
 
     return (
-      <div 
+      <div
         style={{
-          ...styles.propertyPanel, 
           display: showPanels || show ? 'block' : 'none'
         }} 
-        className={styleCss.container}
+        className={`${styles.container} react-designer-panel-list`}
       >
         {showPanels && objectComponent.panels.map((Panel, i) => <Panel key={i} id={id} {...this.props} />)}
         {show && !showPanels && (

src/designer/panels/PropertyGroup.jsx

@@ -1,15 +1,12 @@
-import React, {Component} from 'react';
-import _ from 'lodash';
-import Icon from '../Icon';
+import React from 'react';
+import styles from './styles/panel.module.css'
 
-import styles from './styles';
-
-const PropertyGroup = ({showIf=true, ...props}) => {
+const PropertyGroup = ({showIf=true , className, ...props}) => {
   if (!showIf) {
-    return <div style={styles.empty} />;
+    return <div className={styles.empty} />;
   }
   return (
-    <div style={styles.propertyGroup}>
+    <div className={`${styles.group} react-designer-panel-group ${className || ''}`}>
       {props.children}
     </div>
   );

src/designer/panels/RadioGroup/index.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import style from './radioGroup.module.css'
 
+
+
 export const RadioGroup = ({ name, defaultValue, onChange, children }) => {
   return (
-    <div className={style.group}>
+    <div className={`${style.group} react-designer-radio-group`}>
       {React.Children.toArray(children).map((child) => {
         return React.cloneElement(child, { name, defaultValue, onChange })
       })}

src/designer/panels/RadioInput/index.jsx

@@ -5,7 +5,6 @@ export const RadioInput = ({
   value,
   defaultValue,
   onChange,
-  icon,
   label,
 }) => {
   const handleChange = (event) => {
@@ -16,16 +15,15 @@ export const RadioInput = ({
   const checked = value === defaultValue
 
   return (
-    <label className={style.container}>
+    <label className={`${style.container} react-designer-radio-label`}>
       <input
-        className={icon ? style.check : ''}
+        className='react-designer-radio-input'
         name={name}
         type="radio"
         value={value}
         defaultChecked={checked}
         onChange={handleChange}
       />
-      {icon && icon}
       {label && <span>{label}</span>}
     </label>
   )

src/designer/panels/SizePanel.jsx

@@ -1,20 +1,15 @@
 import React, { Component } from 'react'
 import _ from 'lodash'
 
-import Icon from '../Icon'
-
-import styles from './styles'
 import PropertyGroup from './PropertyGroup'
-import Button from './Button'
-import SwitchState from './SwitchState'
 import Columns from './Columns'
 import Column from './Column'
 
 export class SizePanel extends Component {
   render() {
     let { object } = this.props
     return (
-      <PropertyGroup object={object}>
+      <PropertyGroup className="react-designer-size-panel" object={object}>
         {_.has(object, 'width', 'height') && (
           <Columns label="Size">
             <Column

src/designer/panels/StylePanel.jsx

@@ -1,88 +1,85 @@
-import React, { Component } from 'react'
-import _ from 'lodash'
-
-import Icon from '../Icon'
-
-import styles from './styles'
+import React from 'react'
 import PropertyGroup from './PropertyGroup'
-import Button from './Button'
-import SwitchState from './SwitchState'
 import Columns from './Columns'
 import Column from './Column'
 import ColorInput from './ColorInput'
 
-export class StylePanel extends Component {
-  modes = [
-    'normal',
-    'multiply',
-    'screen',
-    'overlay',
-    'darken',
-    'lighten',
-    'color-dodge',
-    'color-burn',
-    'hard-light',
-    'soft-light',
-    'difference',
-    'exclusion',
-    'hue',
-    'saturation',
-    'color',
-    'luminosity',
-  ]
+import styles from './styles/panel.module.css'
+
+const modes = [
+  'normal',
+  'multiply',
+  'screen',
+  'overlay',
+  'darken',
+  'lighten',
+  'color-dodge',
+  'color-burn',
+  'hard-light',
+  'soft-light',
+  'difference',
+  'exclusion',
+  'hue',
+  'saturation',
+  'color',
+  'luminosity',
+]
+
+export const StylePanel = (props) => {
+  const object = props?.object
 
-  render() {
-    let { object } = this.props
-    return (
-      <PropertyGroup>
-        <Columns label="Fill" showIf={_.has(object, 'fill')}>
-          <Column>
-            <ColorInput
-              value={object.fill}
-              onChange={this.props.onChange.bind(this, 'fill')}
-            />
-          </Column>
-        </Columns>
-        <Columns label="Stroke" showIf={_.has(object, 'stroke')}>
-          <Column>
-            <ColorInput
-              value={object.stroke}
-              onChange={this.props.onChange.bind(this, 'stroke')}
-            />
-          </Column>
-          <Column label="width">
-            <input
-              style={{ ...styles.input, ...styles.integerInput, width: 30 }}
-              onChange={(e) =>
-                this.props.onChange('strokeWidth', e.target.value)
-              }
-              value={object.strokeWidth}
-            />
-          </Column>
-          <Column showIf={_.has(object, 'radius')} label="radius">
-            <input
-              style={{ ...styles.input, ...styles.integerInput, width: 30 }}
-              onChange={(e) => this.props.onChange('radius', e.target.value)}
-              value={object.radius}
-            />
-          </Column>
-        </Columns>
-        <Columns label="Blending">
-          <Column>
-            <select
-              style={styles.select}
-              value={object.blendmode}
-              onChange={(e) => this.props.onChange('blendmode', e.target.value)}
-            >
-              {this.modes.map((mode) => (
-                <option key={mode} value={mode}>
-                  {mode}
-                </option>
-              ))}
-            </select>
-          </Column>
-        </Columns>
-      </PropertyGroup>
-    )
-  }
+  return (
+    <PropertyGroup className="react-designer-style-panel">
+      <Columns label="Fill" showIf={object?.hasOwnProperty('fill')}>
+        <Column>
+          <ColorInput
+            value={object.fill}
+            onChange={props?.onChange?.bind?.(this, 'fill')}
+          />
+        </Column>
+      </Columns>
+      <Columns label="Stroke" showIf={object?.hasOwnProperty('stroke')}>
+        <Column>
+          <ColorInput
+            value={object.stroke}
+            onChange={props?.onChange?.bind?.(this, 'stroke')}
+          />
+        </Column>
+        <Column label="width">
+          <input
+            className={`${styles.input} ${styles.integerInput}`}
+            style={{ width: 30 }}
+            onChange={(e) =>
+              props?.onChange?.('strokeWidth', e.target.value)
+            }
+            value={object.strokeWidth}
+          />
+        </Column>
+        <Column showIf={object?.hasOwnProperty('radius')} label="radius">
+          <input
+            className={`${styles.input} ${styles.integerInput}`}
+            style={{ width: 30 }}
+            onChange={(e) => props?.onChange?.('radius', e.target.value)}
+            value={object.radius}
+          />
+        </Column>
+      </Columns>
+      <Columns label="Blending">
+        <Column>
+          <select
+            className={`${styles.select} react-designer-select`}
+            value={object.blendmode}
+            onChange={(e) => props?.onChange?.('blendmode', e.target.value)}
+          >
+            {modes.map((mode) => (
+              <option key={mode} value={mode}>
+                {mode}
+              </option>
+            ))}
+          </select>
+        </Column>
+      </Columns>
+    </PropertyGroup>
+  )
+
 }

src/designer/panels/Switch/index.jsx

@@ -3,7 +3,6 @@ import style from '../styles/check.module.css'
 export const Switch = ({
   text,
   label,
-  icon,
   defaultValue,
   nextValue,
   onChange,
@@ -16,15 +15,14 @@ export const Switch = ({
   }
 
   return (
-    <label htmlFor={label} className={style.container}>
+    <label htmlFor={label} className={`${style.container} react-designer-switch-label`}>
       <input
-        className={icon ? style.check : ''}
+        className='react-designer-switch-input'
         id={label}
         type="checkbox"
         onChange={handleCheck}
         defaultChecked={defaultChecked}
       />
-      {icon && icon}
       {text && <span>{text}</span>}
     </label>
   )