refactor: internal cleanup of /lib

Author: chrisrzhou

cypress/tests/system/create-system.js

@@ -4,22 +4,24 @@ import {renderToStaticMarkup} from 'react-dom/server.js';
 import {parseSvgElement} from '../../../lib/util/parse-svg-element.js';
 
 describe('parseSvgElement', () => {
-  const h = () => '<svg>parsed</svg>';
+  const createElement = () => '<svg>parsed</svg>';
 
   it('should return null if svg is empty', () => {
-    expect(parseSvgElement('', {h})).to.equal(null);
-    expect(parseSvgElement(null, {h})).to.equal(null);
-    expect(parseSvgElement(undefined, {h})).to.equal(null);
+    expect(parseSvgElement('', {createElement})).to.equal(null);
+    expect(parseSvgElement(null, {createElement})).to.equal(null);
+    expect(parseSvgElement(undefined, {createElement})).to.equal(null);
   });
 
   it('should return null if svg fails to parse', () => {
-    expect(parseSvgElement('bad svg', {h})).to.equal(null);
+    expect(parseSvgElement('bad svg', {createElement})).to.equal(null);
   });
 
   it('should return svg element (react.createElement)', () => {
     const svg = '<svg><g><path></path></g></svg>';
     expect(
-      renderToStaticMarkup(parseSvgElement(svg, {h: React.createElement})),
+      renderToStaticMarkup(
+        parseSvgElement(svg, {createElement: React.createElement}),
+      ),
     ).to.equal(svg);
   });
 });

cypress/tests/system/hooks/use-config.js

@@ -1,8 +1,5 @@
-// Components
 export {Element} from './lib/components/element.js';
 export {Icon} from './lib/components/icon.js';
 export {Layout} from './lib/components/layout.js';
 export {Text} from './lib/components/text.js';
-
-// System
 export {createSystem} from './lib/system/create-system.js';

cypress/tests/system/hooks/use-css.js

@@ -1,4 +1,6 @@
-import {useConfig, useCss, useH, useStyleVariant} from '../system/hooks.js';
+import {props as p} from 'uinix-fp';
+
+import {getStore} from '../system/store.js';
 import {mergeClassNames} from '../util/merge-class-names.js';
 import {resolveShorthandProps} from '../util/resolve-shorthand-props.js';
 
@@ -7,36 +9,32 @@ export const Element = (props) => {
     as = 'div',
     children,
     className = '',
-    styleProps,
     styles,
+    styleProps,
     styleVariant = '',
-    ...rest
+    ...restProps
   } = props;
 
-  const config = useConfig();
-  const elementCss = useCss(props);
-  const styleCss = useCss(styleProps);
-  const h = useH();
-  const variantStyle = useStyleVariant(styleVariant);
+  const store = getStore();
+  const {config, css, system} = store;
+  const {createElement, elementShorthandPropsMapping, elementStyles} = config;
+
+  const variantStyle = p(styleVariant)(system.styles);
 
-  const {elementShorthandPropsMapping, elementStyles} = config;
-  const [restProps, shorthandStyle] = resolveShorthandProps(
+  const [rest, shorthandStyle] = resolveShorthandProps(
     elementShorthandPropsMapping,
-  )(rest);
+  )(restProps);
 
-  const mergedStyles = [variantStyle, styles, shorthandStyle].flat();
+  const mergedStyles = [variantStyle, styles, shorthandStyle].flat(); // order matters
   const mergedClassNames = mergeClassNames([
-    elementCss(elementStyles),
-    styleCss(mergedStyles),
+    css(props)(elementStyles),
+    css(styleProps)(mergedStyles),
     className,
   ]);
 
-  const elementProps = {
-    ...restProps,
-    className: mergedClassNames,
-  };
+  const elementProps = {...rest, className: mergedClassNames};
 
   return typeof as === 'string'
-    ? h(as, elementProps, children)
+    ? createElement(as, elementProps, children)
     : as(elementProps, children);
 };

cypress/tests/system/hooks/use-h.js

@@ -1,6 +1,8 @@
-import {filterEntries} from 'uinix-fp';
+import {props as p} from 'uinix-fp';
 
-import {useIcon} from '../system/hooks.js';
+import {getStore} from '../system/store.js';
+import {filterStyle} from '../util/filter-style.js';
+import {parseSvgElement} from '../util/parse-svg-element.js';
 import {Element} from './element.js';
 
 export const Icon = (props) => {
@@ -9,15 +11,20 @@ export const Icon = (props) => {
     height,
     icon = '',
     size,
-    styleProps,
     styles,
+    styleProps,
     width,
     ...restProps
   } = props;
 
-  const iconSvg = useIcon(icon);
+  const {config, system} = getStore();
+
+  const {createElement} = config;
 
-  const style = filterEntries(([_k, v]) => v !== undefined)({
+  const svg = p(icon)(system.icons);
+  const svgElement = parseSvgElement(svg, {createElement});
+
+  const style = filterStyle({
     color,
     display: 'inline-flex',
     flex: 'none',
@@ -29,8 +36,8 @@ export const Icon = (props) => {
 
   return Element({
     ...restProps,
-    children: iconSvg,
-    styleProps,
+    children: svgElement,
     styles: [style, styles],
+    styleProps,
   });
 };