fix(blueprint): transform SCSS to JSS

- also removes unused schemas

Author: rvsia

packages/blueprint-component-mapper/demo/demo-schemas/miq-schema.js

@@ -1,9 +1,8 @@
 /* eslint-disable */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import FormRenderer from '@data-driven-forms/react-form-renderer';
-import miqSchema from './demo-schemas/miq-schema';
-import { uiArraySchema, arraySchema, array1Schema, schema, uiSchema, conditionalSchema, arraySchemaDDF } from './demo-schemas/widget-schema';
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import { arraySchemaDDF } from './demo-schemas/widget-schema';
 import { componentMapper, FormTemplate } from '../src';
 import { Button } from '@blueprintjs/core';
 import {

packages/blueprint-component-mapper/demo/demo-schemas/widget-schema.js

@@ -60,6 +60,7 @@
   "dependencies": {
     "@data-driven-forms/common": "*",
     "clsx": "^1.1.0",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-jss": "^10.5.0"
   }
 }

packages/blueprint-component-mapper/demo/index.js

@@ -4,27 +4,50 @@ import PropTypes from 'prop-types';
 import DualListSelectCommon from '@data-driven-forms/common/dual-list-select';
 import { Menu, MenuItem, ButtonGroup, Button, ControlGroup, InputGroup } from '@blueprintjs/core';
 import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
 
 import { FormGroupInternal } from '../form-group/form-group';
 
-import './dual-list-select.scss';
+const useStyles = createUseStyles({
+  menu: {
+    height: '80%',
+    overflow: 'auto'
+  },
+  buttonGroup: {
+    justifyContent: 'center'
+  },
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    minHeight: 250
+  },
+  '@media (max-width: 768px)': {
+    wrapper: {
+      flexDirection: 'column'
+    }
+  }
+});
 
-const List = ({ value, optionClick, noOptionsTitle, filterValue, filterValueText, selectedValues, MenuProps, MenuItemProps }) => (
-  <Menu {...MenuProps} className={clsx('bp3-elevation-1', 'ddorg__blueprint_mapper--dls-menu', MenuProps.className)}>
-    {value.length < 1 && <MenuItem text={filterValue ? filterValueText : noOptionsTitle} disabled {...MenuItemProps} />}
-    {value.length > 0 &&
-      value.map(({ value, label, MenuItemProps: ItemMenuItemProps }) => (
-        <MenuItem
-          onClick={(e) => optionClick(e, value)}
-          key={value}
-          active={selectedValues.includes(value)}
-          text={label}
-          {...MenuItemProps}
-          {...ItemMenuItemProps}
-        />
-      ))}
-  </Menu>
-);
+const List = ({ value, optionClick, noOptionsTitle, filterValue, filterValueText, selectedValues, MenuProps, MenuItemProps }) => {
+  const { menu } = useStyles();
+
+  return (
+    <Menu {...MenuProps} className={clsx('bp3-elevation-1', menu, MenuProps.className)}>
+      {value.length < 1 && <MenuItem text={filterValue ? filterValueText : noOptionsTitle} disabled {...MenuItemProps} />}
+      {value.length > 0 &&
+        value.map(({ value, label, MenuItemProps: ItemMenuItemProps }) => (
+          <MenuItem
+            onClick={(e) => optionClick(e, value)}
+            key={value}
+            active={selectedValues.includes(value)}
+            text={label}
+            {...MenuItemProps}
+            {...ItemMenuItemProps}
+          />
+        ))}
+    </Menu>
+  );
+};
 
 List.propTypes = {
   value: PropTypes.arrayOf(
@@ -121,8 +144,10 @@ const DualListInternal = ({
   RightMenuProps,
   RightMenuItemProps
 }) => {
+  const { buttonGroup, wrapper } = useStyles();
+
   return (
-    <div {...WrapperProps} className={clsx('ddorg__blueprint_mapper--dls-wrapper', WrapperProps.className)}>
+    <div {...WrapperProps} className={clsx(wrapper, WrapperProps.className)}>
       <div {...LeftWrapperProps}>
         {leftTitle}
         <Toolbar
@@ -146,12 +171,7 @@ const DualListInternal = ({
           MenuItemProps={LeftMenuItemProps}
         />
       </div>
-      <ButtonGroup
-        vertical
-        alignText="center"
-        {...ButtonGroupProps}
-        className={clsx('ddorg__blueprint_mapper--dls-button-group', ButtonGroupProps.className)}
-      >
+      <ButtonGroup vertical alignText="center" {...ButtonGroupProps} className={clsx(buttonGroup, ButtonGroupProps.className)}>
         <Button
           disabled={state.selectedLeftValues.length === 0}
           onClick={handleMoveRight}

packages/blueprint-component-mapper/package.json

@@ -2,15 +2,26 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer';
+import { createUseStyles } from 'react-jss';
 
 import { Button, Intent, FormGroup } from '@blueprintjs/core';
 
 import BlueprintContext from '../blueprint-context/blueprint-context';
 
-import './field-array.scss';
+const useStyles = createUseStyles({
+  addContainer: {
+    display: 'flex',
+    flexFlow: 'row-reverse',
+    marginBottom: 15
+  },
+  remove: {
+    marginBottom: 15
+  }
+});
 
 const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveButtonProps, disabledRemove }) => {
   const formOptions = useFormApi();
+  const { remove: removeCss } = useStyles();
 
   const editedFields = fields.map((field) => ({
     ...field,
@@ -25,7 +36,7 @@ const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveBu
         intent={Intent.DANGER}
         disabled={disabledRemove}
         {...RemoveButtonProps}
-        className={clsx('ddorg__blueprint_mapper--field-array-remove', RemoveButtonProps && RemoveButtonProps.className)}
+        className={clsx(removeCss, RemoveButtonProps && RemoveButtonProps.className)}
       >
         {removeLabel}
       </Button>
@@ -68,6 +79,8 @@ const FieldArray = (props) => {
 
   const { required } = useContext(BlueprintContext);
 
+  const { addContainer } = useStyles();
+
   const { error, touched, submitError } = meta;
   const showError = (validateOnMount || touched) && (error || submitError);
 
@@ -100,10 +113,7 @@ const FieldArray = (props) => {
                 disabledRemove={fieldArrayProps.fields.length <= minItems}
               />
             ))}
-            <div
-              {...AddContainerProps}
-              className={clsx('ddorg__blueprint_mapper--field-array-add-container', AddContainerProps && AddContainerProps.className)}
-            >
+            <div {...AddContainerProps} className={clsx(addContainer, AddContainerProps && AddContainerProps.className)}>
               <Button
                 onClick={() => fieldArrayProps.fields.push(defaultItem)}
                 intent={Intent.SUCCESS}

packages/blueprint-component-mapper/src/dual-list-select/dual-list-select.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { createUseStyles } from 'react-jss';
 
 import FormTemplate from '@data-driven-forms/common/form-template';
 import { Button, H1, H2 } from '@blueprintjs/core';
 import BlueprintContext from '../blueprint-context/blueprint-context';
 
-import './form-template.scss';
-
 const Form = ({ children, ...props }) => (
   <form noValidate {...props} style={{ display: 'grid' }}>
     {children}
@@ -17,11 +16,25 @@ Form.propTypes = {
   children: PropTypes.node
 };
 
-const ButtonGroup = ({ children, ...props }) => (
-  <div className="ddorg__blueprint_mapper--button-group" {...props}>
-    {children}
-  </div>
-);
+const useStyles = createUseStyles({
+  buttonGroup: {
+    marginTop: 16,
+
+    '& button:not(:first-child)': {
+      marginLeft: 8
+    }
+  }
+});
+
+const ButtonGroup = ({ children, ...props }) => {
+  const { buttonGroup } = useStyles();
+
+  return (
+    <div className={buttonGroup} {...props}>
+      {children}
+    </div>
+  );
+};
 
 ButtonGroup.propTypes = {
   children: PropTypes.node