refactor: remove nanostores, refactor to load.js and hooks.js

Author: chrisrzhou

cypress/tests/system/api/use-css.js renamed to cypress/tests/system/hooks/use-css.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useCss} from '../../../../lib/system/api.js';
+import {useCss} from '../../../../lib/system/hooks.js';
 import {mount} from '../../../utils/index.js';
 
 const style1 = {

cypress/tests/system/api/use-icon.js renamed to cypress/tests/system/hooks/use-icon.js

@@ -1,6 +1,7 @@
 import {createElement as h} from 'react';
 
-import {load, useH} from '../../../../lib/system/api.js';
+import {useH} from '../../../../lib/system/hooks.js';
+import {load} from '../../../../lib/system/load.js';
 
 describe('useH', () => {
   it('should throw if system is not loaded', () => {

cypress/tests/system/api/use-styles.js renamed to cypress/tests/system/hooks/use-styles.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {Element, Icon, Layout, Text} from '../../../../index.js';
-import {mount} from '../../../utils/index.js';
+import {Element, Icon, Layout, Text} from '../../../../../index.js';
+import {mount} from '../../../../utils/index.js';
 
 describe('config.elementShorthandPropsMapping', () => {
   it('should not apply shorthand props style if not configured', () => {

cypress/tests/system/api/use-system.js renamed to cypress/tests/system/hooks/use-system.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {Element, Icon, Layout, Text} from '../../../../index.js';
-import {mount} from '../../../utils/index.js';
+import {Element, Icon, Layout, Text} from '../../../../../index.js';
+import {mount} from '../../../../utils/index.js';
 
 const system = {
   config: {

cypress/tests/system/api/use-theme.js renamed to cypress/tests/system/hooks/use-theme.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {Element} from '../../../../index.js';
-import {mount} from '../../../utils/index.js';
+import {Element} from '../../../../../index.js';
+import {mount} from '../../../../utils/index.js';
 
 const styles = [
   {backgroundColor: 'rgb(225, 225, 225)', padding: '42px'},

cypress/tests/system/api/use-variant.js renamed to cypress/tests/system/hooks/use-variant.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {Element, Icon, Layout, Text} from '../../../../index.js';
-import {mount} from '../../../utils/index.js';
+import {Element, Icon, Layout, Text} from '../../../../../index.js';
+import {mount} from '../../../../utils/index.js';
 
 const responsiveStyles = {
   color: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'],

cypress/tests/system/api/use.h.js renamed to cypress/tests/system/hooks/use.h.js

@@ -6,13 +6,13 @@ export {Text} from './lib/components/text.js';
 
 // System
 export {
-  load,
   useIcon,
   useStyles,
   useSystem,
   useTheme,
   useVariant,
-} from './lib/system/api.js';
+} from './lib/system/hooks.js';
+export {load} from './lib/system/load.js';
 export {
   createConfig,
   createIcons,
@@ -22,4 +22,4 @@ export {
 } from './lib/system/create.js';
 
 // Utils
-export {merge} from 'uinix-fp';
+export {merge, props} from 'uinix-fp';

cypress/tests/system/config/element-shorthand-props-mapping.js renamed to cypress/tests/system/load/config/element-shorthand-props-mapping.js

@@ -1,4 +1,4 @@
-import {useCss, useH, useSystem, useVariant} from '../system/api.js';
+import {useCss, useH, useSystem, useVariant} from '../system/hooks.js';
 import {mergeClassNames} from '../util/merge-class-names.js';
 import {mergeStyles} from '../util/merge-styles.js';
 import {resolveShorthandProps} from '../util/resolve-shorthand-props.js';

cypress/tests/system/config/element-styles.js renamed to cypress/tests/system/load/config/element-styles.js

@@ -3,7 +3,7 @@ import parse from 'rehype-parse';
 import {filter} from 'uinix-fp';
 import unified from 'unified';
 
-import {useH, useIcon} from '../system/api.js';
+import {useH, useIcon} from '../system/hooks.js';
 import {mergeStyles} from '../util/merge-styles.js';
 import {Element} from './element.js';
 

cypress/tests/system/config/enable-atomic-css.js renamed to cypress/tests/system/load/config/enable-atomic-css.js

@@ -1,6 +1,6 @@
 import {filter} from 'uinix-fp';
 
-import {useTypographyVariant} from '../system/api.js';
+import {useTypographyVariant} from '../system/hooks.js';
 import {mergeStyles} from '../util/merge-styles.js';
 import {Element} from './element.js';
 

cypress/tests/system/config/responsive-css-properties.js renamed to cypress/tests/system/load/config/responsive-css-properties.js

@@ -0,0 +1,32 @@
+import {props} from 'uinix-fp';
+
+import {getStore} from './load.js';
+
+export {
+  useCss,
+  useH,
+  useIcon,
+  useStyles,
+  useSystem,
+  useTheme,
+  useTypographyVariant,
+  useVariant,
+};
+
+const useCss = (props) => getStore().css(props);
+
+const useH = () => getStore().h;
+
+const useIcon = (icon) => useSystem().icons[icon];
+
+const useStyles = () => useSystem().styles;
+
+const useSystem = () => getStore().system;
+
+const useTheme = () => useSystem().theme;
+
+const useTypographyVariant = (variant) =>
+  props(`typography.variants.${variant}`)(useSystem().styles);
+
+const useVariant = (variant) =>
+  props(`variants.${variant}`)(useSystem().styles);

cypress/tests/system/api/h/htm.js renamed to cypress/tests/system/load/h/htm.js

@@ -0,0 +1,27 @@
+import {combineRules} from 'fela';
+import {render} from 'fela-dom';
+
+import {createRenderer} from '../renderer/create-renderer.js';
+import {createSystem} from './create.js';
+
+export {load, getStore};
+
+let store;
+
+const getStore = () => store;
+
+const load = (h, providedSystem) => {
+  const system = createSystem(providedSystem);
+  const renderer = createRenderer(system);
+  const css =
+    (props = {}) =>
+    (...rules) =>
+      renderer.renderRule(combineRules(...rules), {
+        ...props,
+        theme: system.theme,
+      });
+
+  render(renderer);
+
+  store = {css, h, system};
+};

cypress/tests/system/api/h/hyperscript.js renamed to cypress/tests/system/load/h/hyperscript.js

@@ -35,7 +35,6 @@
     "fela-plugin-responsive-value": "^11.6.1",
     "fela-preset-web": "^11.6.1",
     "hast-to-hyperscript": "^10.0.0",
-    "nanostores": "^0.3.3",
     "rehype-parse": "^7.0.1",
     "uinix-theme": "^0.2.2",
     "unified": "^9.2.1"
@@ -67,7 +66,7 @@
     "solid-js": "^0.26.5",
     "tape": "^5.2.2",
     "type-coverage": "^2.17.5",
-    "typescript": "^4.3.2",
+    "typescript": "^4.3.4",
     "uinix-scripts": "^0.1.2",
     "webpack": "^5.39.1",
     "webpack-dev-server": "^3.11.2",