Rewrite Components Using React

index.js

@@ -53,4 +53,3 @@ export * from './src/components/RangeField';
 export * from './src/components/Icon';
 export * from './src/components/Expander';
 export * from './src/components/Label';
-export * from './src/provider';

package.json

@@ -4,15 +4,13 @@
   "description": "OS.js GUI",
   "module": "dist/esm.js",
   "main": "dist/main.js",
-  "style": "dist/main.css",
   "scripts": {
-    "test": "npm run eslint && npm run stylelint",
+    "test": "npm run eslint",
     "eslint": "eslint index.js 'src/**/*.js'",
     "build": "webpack",
     "build:esm": "rollup -c",
     "watch": "webpack --watch",
     "watch:esm": "rollup -c --watch",
-    "stylelint": "stylelint index.scss src/**/*.scss",
     "prepublishOnly": "npm run test && rm ./dist/* && NODE_ENV=production npm run build && npm run build:esm"
   },
   "repository": {
@@ -27,17 +25,16 @@
     "dist/esm.js.map",
     "dist/main.js",
     "dist/main.js.map",
-    "dist/main.css",
-    "dist/main.css.map",
     "CHANGELOG.md",
     "README.md",
     "LICENSE"
   ],
   "dependencies": {
-    "hyperapp": "^1.2.10",
-    "hyperapp-nestable": "^1.0.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.12.1",
     "@osjs/dev-meta": "^1.0.2",
     "rollup": "^1.31.0",
     "rollup-plugin-babel": "^4.3.3",
@@ -67,6 +64,7 @@
   },
   "babel": {
     "presets": [
+      "@babel/preset-react",
       [
         "@babel/preset-env",
         {

src/components/Box.js

@@ -28,18 +28,17 @@
  * @licence Simplified BSD License
  */
 
-import {h} from 'hyperapp';
-import {Element} from './Element';
+import { Element } from './Element';
 
 /**
  * A flexbox
  * @param {BoxProperties} props Properties
  * @param {string} [props.orientation='horizontal'] Box orientation
- * @param {h[]} children Children
  */
-export const Box = (props, children) =>
-  h(Element, Object.assign({
-    orientation: 'horizontal'
-  }, props, {
-    class: ['osjs-gui-box', props.class],
-  }), children);
+export const Box = props => (
+  <Element
+    orientation="horizontal"
+    {...props}
+    className={['osjs-gui-box', props.className]}
+  />
+);

src/components/BoxContainer.js

@@ -28,16 +28,13 @@
  * @licence Simplified BSD License
  */
 
-import {h} from 'hyperapp';
-import {Element} from './Element';
+import { Element } from './Element';
 
 /**
  * A flexbox container
  * @param {BoxProperties} props Properties
  * @param {string} [props.orientation='vertical'] Box orientation
- * @param {h[]} children Children
  */
-export const BoxContainer = (props, children) =>
-  h(Element, Object.assign({}, props, {
-    class: ['osjs-gui-box-container', props.class]
-  }), children);
+export const BoxContainer = props => (
+  <Element {...props} className={['osjs-gui-box-container', props.className]} />
+);

src/components/BoxStyled.js

@@ -28,15 +28,12 @@
  * @licence Simplified BSD License
  */
 
-import {h} from 'hyperapp';
-import {Element} from './Element';
+import { Element } from './Element';
 
 /**
  * A styled flexbox container
  * @param {BoxProperties} props Properties
- * @param {h[]} children Children
  */
-export const BoxStyled = (props, children) =>
-  h(Element, Object.assign({}, props, {
-    class: ['osjs-gui-box-styled', props.class]
-  }), children);
+export const BoxStyled = props => (
+  <Element {...props} className={['osjs-gui-box-styled', props.className]} />
+);

src/components/Button.js

@@ -28,32 +28,25 @@
  * @licence Simplified BSD License
  */
 
-import {h} from 'hyperapp';
-import {Icon} from './Icon';
-import {createField} from '../element';
+import { Icon } from './Icon';
+import { createField } from '../element';
 
 /**
  * A button
  * @param {Object} props Properties
  * @param {string} [props.icon] Icon source
  * @param {string} [props.label] Use this as label instead of children
  * @param {BoxProperties} [props.box] Box Properties
- * @param {h[]} children Children
  */
-export const Button = (props = {}, children = []) =>
-  createField('button', props, {
-  }, (fieldProps) => {
-    const inner = [];
-    if (props.icon) {
-      inner.push(h(Icon, props.icon));
-    }
-
-    if (typeof props.label === 'string') {
-      inner.push(h('span', {class: 'osjs-label'}, props.label));
-    }
-
-    return h('button', fieldProps, [
-      ...inner,
-      ...children
-    ]);
+export const Button = ({ children, ...props }) =>
+  createField('button', props, {}, fieldProps => {
+    return (
+      <button {...fieldProps}>
+        {props.icon ? <Icon {...props.icon} /> : null}
+        {typeof props.label === 'string' ? (
+          <span className="osjs-label">{props.label}</span>
+        ) : null}
+        {children}
+      </button>
+    );
   });

src/components/Element.js

@@ -28,61 +28,49 @@
  * @licence Simplified BSD License
  */
 
-import {h} from 'hyperapp';
-
 /**
  * Elemet Box definition
- * @property {string} [class] Container class name
+ * @property {string} [className] Container className
  * @property {number} [grow] Flexbox grow value
  * @property {number} [shrink] Flexbox shrink value
  * @property {number|string} [basis] Flexbox basis value
  * @property {string} [align] Flexbox alignItems value
  * @property {string} [justify] Flexbox justifyContent value
  * @property {number|string} [padding] Margin
  * @property {number|string} [margin] Margin
- * @property {string} [key] Hyperapp element key
- * @property {Function} [oncreate] Hyperapp oncreate function
- * @property {Function} [onupdate] Hyperapp onupdate function
- * @property {Function} [ondestroy] Hyperapp ondestroy function
+ * @property {string} [key] element key
  * @typedef BoxProperties
  */
 
-const unitValue = (value, unset) => typeof value === 'number'
-  ? `${value}px`
-  : (value === false ? unset : value);
+const unitValue = (value, unset) =>
+  typeof value === 'number' ? `${value}px` : value === false ? unset : value;
 
 const boxPropNames = {
-  grow: value => ({flexGrow: value}),
-  shrink: value => ({flexShrink: value}),
-  basis: value => ({flexBasis: unitValue(value, 'auto')}),
-  align: value => ({alignItems: value}),
-  justify: value => ({justifyContent: value}),
-  padding: value => ({margin: unitValue(value, '0')}),
-  margin: value => ({margin: unitValue(value, '0')})
+  grow: value => ({ flexGrow: value }),
+  shrink: value => ({ flexShrink: value }),
+  basis: value => ({ flexBasis: unitValue(value, 'auto') }),
+  align: value => ({ alignItems: value }),
+  justify: value => ({ justifyContent: value }),
+  padding: value => ({ margin: unitValue(value, '0') }),
+  margin: value => ({ margin: unitValue(value, '0') }),
 };
 
 /**
  * A generic OS.js GUI container
  * @param {Object} props Properties
- * @param {h[]} children Children
  */
-export const Element = (props, children = []) => {
-  const givenClassNames = props.class instanceof Array
-    ? props.class
-    : [props.class];
+export const Element = ({children, ...props}) => {
+  const givenClassNames =
+    props.className instanceof Array ? props.className : [props.className];
 
-  const classNames = [
-    'osjs-gui',
-    ...givenClassNames
-  ];
+  const classNames = ['osjs-gui', ...givenClassNames];
 
   if (props.orientation) {
     classNames.push('osjs-gui-' + props.orientation);
   }
 
-  const defaultStyle = typeof props.style === 'string'
-    ? {}
-    : Object.assign({}, props.style || {});
+  const defaultStyle =
+    typeof props.style === 'string' ? {} : Object.assign({}, props.style || {});
 
   const style = Object.keys(props).reduce((result, prop) => {
     const value = boxPropNames[prop]
@@ -92,10 +80,11 @@ export const Element = (props, children = []) => {
     return Object.assign({}, result, value);
   }, defaultStyle);
 
-  return h('div', {
-    oncreate: props.oncreate,
-    ondestroy: props.ondestroy,
-    class: classNames.filter(s => !!s).join(' '),
-    style
-  }, children);
+  return (
+    <div
+      className={classNames.filter(s => !!s).join(' ')}
+      style={style}>
+      {children}
+    </div>
+  );
 };