!refactor: rename load to loadSystem

Author: chrisrzhou

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

@@ -1,6 +1,6 @@
 import {createElement as h} from 'react';
 
-import {load} from '../../../../index.js';
+import {loadSystem} from '../../../../index.js';
 import {useConfig} from '../../../../lib/system/hooks.js';
 import defaultConfig from '../../../fixtures/default-config.js';
 import config from '../../../fixtures/test-config.js';
@@ -11,12 +11,12 @@ describe('useConfig', () => {
   });
 
   it('should return the default config for a default system', () => {
-    load({h});
+    loadSystem({h});
     expect(useConfig()).deep.equal(defaultConfig);
   });
 
   it('should return the provided config', () => {
-    load({h, config});
+    loadSystem({h, config});
     expect(useConfig()).deep.equal(config);
   });
 });

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

@@ -1,7 +1,7 @@
 import {mount} from '@cypress/react';
 import React, {createElement as h} from 'react';
 
-import {load} from '../../../../index.js';
+import {loadSystem} from '../../../../index.js';
 import {useCss} from '../../../../lib/system/hooks.js';
 import system from '../../../fixtures/test-system.js';
 
@@ -30,7 +30,7 @@ describe('useCss', () => {
   });
 
   it('should retrieve a css function that can be used to apply and compose styles', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(
       <CustomElement
         id="test"

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

@@ -1,6 +1,6 @@
 import {createElement as h} from 'react';
 
-import {load} from '../../../../index.js';
+import {loadSystem} from '../../../../index.js';
 import {useH} from '../../../../lib/system/hooks.js';
 
 describe('useH', () => {
@@ -9,7 +9,7 @@ describe('useH', () => {
   });
 
   it('should retrieve the provided h (React.createElement) function', () => {
-    load({h});
+    loadSystem({h});
     expect(useH()).equal(h);
   });
 });

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

@@ -2,7 +2,7 @@ import {mount} from '@cypress/react';
 import React, {createElement as h} from 'react';
 import {renderToStaticMarkup} from 'react-dom/server.js';
 
-import {load, useIcon} from '../../../../index.js';
+import {loadSystem, useIcon} from '../../../../index.js';
 import {parseSvgElement} from '../../../../lib/util/parse-svg-element.js';
 import system from '../../../fixtures/test-system.js';
 
@@ -18,15 +18,15 @@ describe('useIcon', () => {
   });
 
   it('should return null if icon is not found in the system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement icon="invalid icon" />);
 
     cy.get('@iconSvg').should('equal', null);
   });
 
   it('should return an SVG element for the specified icon from the system', () => {
     const icon = 'x';
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement icon={icon} />);
 
     const svg = system.icons[icon];
@@ -39,7 +39,7 @@ describe('useIcon', () => {
   });
 
   it('should return an SVG element for the specified nested icon from the system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement icon="nested.x" />);
     const svg = system.icons.nested.x;
     const svgElement = parseSvgElement({h, svg});
@@ -51,7 +51,7 @@ describe('useIcon', () => {
   });
 
   it('should return an SVG element for the specified direct icon from the system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement icon="a.b.c" />);
     const svg = system.icons['a.b.c'];
     const svgElement = parseSvgElement({h, svg});

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

@@ -1,7 +1,7 @@
 import {mount} from '@cypress/react';
 import React, {createElement as h} from 'react';
 
-import {load, useStyles} from '../../../../index.js';
+import {loadSystem, useStyles} from '../../../../index.js';
 import system from '../../../fixtures/test-system.js';
 
 function CustomElement() {
@@ -16,7 +16,7 @@ describe('useStyles', () => {
   });
 
   it('should return styles from the system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement />);
 
     cy.get('@styles').should('deep.equal', system.styles);

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

@@ -1,7 +1,7 @@
 import {mount} from '@cypress/react';
 import React, {createElement as h} from 'react';
 
-import {createSystem, load, useSystem} from '../../../../index.js';
+import {createSystem, loadSystem, useSystem} from '../../../../index.js';
 import system from '../../../fixtures/test-system.js';
 
 function CustomElement() {
@@ -16,7 +16,7 @@ describe('useSystem', () => {
   });
 
   it('should retrieve the entire system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement />);
 
     cy.get('@system').should('deep.equal', createSystem(system));

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

@@ -1,7 +1,7 @@
 import {mount} from '@cypress/react';
 import React, {createElement as h} from 'react';
 
-import {load, useVariant} from '../../../../index.js';
+import {loadSystem, useVariant} from '../../../../index.js';
 import system from '../../../fixtures/test-system.js';
 
 function CustomElement({variant}) {
@@ -16,14 +16,14 @@ describe('useVariant', () => {
   });
 
   it('should return undefined if variant style is not found in the system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement variant="invalid.variant" />);
 
     cy.get('@variantStyle').should('equal', undefined);
   });
 
   it('should return the variant style from the system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement variant="Button.primary" />);
 
     cy.get('@variantStyle').should(

cypress/tests/system/load/h/utils.js

@@ -1,10 +1,10 @@
-import {Element, Icon, Layout, Text, load} from '../../../../../index.js';
+import {Element, Icon, Layout, Text, loadSystem} from '../../../../../index.js';
 import system from '../../../../fixtures/test-system.js';
 
 export {assert, createCustomElement};
 
 const createCustomElement = (h) => {
-  load({h, system});
+  loadSystem({h, system});
 
   const CustomElement = ({x, ...rest}) =>
     h('blockquote', rest, `Custom Element: ${x}`);

cypress/tests/system/load/load.js

@@ -1,7 +1,7 @@
 import {mount} from '@cypress/react';
 import React, {createElement as h} from 'react';
 
-import {createSystem, load, useSystem} from '../../../../index.js';
+import {createSystem, loadSystem, useSystem} from '../../../../index.js';
 import system from '../../../fixtures/test-system.js';
 
 function CustomElement() {
@@ -10,21 +10,21 @@ function CustomElement() {
   return <pre>{JSON.stringify(system, null, 2)}</pre>;
 }
 
-describe('load', () => {
+describe('loadSystem', () => {
   // Skipping because of : https://github.com/cypress-io/cypress/issues/16635
   it.skip('should throw if system is not loaded when using system components', () => {
     expect(() => mount(<CustomElement />)).to.throw();
   });
 
   it('should load the default system if no system is provided', () => {
-    load({h});
+    loadSystem({h});
     mount(<CustomElement />);
 
     cy.get('@system').should('deep.equal', createSystem());
   });
 
   it('should load the provided system', () => {
-    load({h, system});
+    loadSystem({h, system});
     mount(<CustomElement />);
 
     cy.get('@system').should('deep.equal', createSystem(system));

cypress/utils/mount-with-system.js

@@ -2,7 +2,7 @@ import {mount as cypressMount} from '@cypress/react';
 import {createElement as h} from 'react';
 import themeSpec from 'uinix-theme-spec';
 
-import {load, merge} from '../../index.js';
+import {loadSystem, merge} from '../../index.js';
 
 export {mountWithSystem};
 
@@ -11,6 +11,6 @@ const defaultSystem = {
 };
 
 const mountWithSystem = (element, system = defaultSystem, config = {}) => {
-  load({h, config, system: merge(defaultSystem)(system)});
+  loadSystem({h, config, system: merge(defaultSystem)(system)});
   cypressMount(element);
 };

index.js

@@ -12,8 +12,8 @@ export {
   useTheme,
   useVariant,
 } from './lib/system/hooks.js';
-export {load} from './lib/system/load.js';
-export {createSystem} from './lib/system/create.js';
+export {loadSystem} from './lib/system/load-system.js';
+export {createSystem} from './lib/system/create-system.js';
 
 // Utils
 export {merge} from 'uinix-fp';

lib/system/create.js renamed to lib/system/create-system.js

@@ -1,7 +1,7 @@
 import {props} from 'uinix-fp';
 
 import {parseSvgElement} from '../util/parse-svg-element.js';
-import {getStore} from './load.js';
+import {getStore} from './load-system.js';
 
 export {
   useConfig,

lib/system/hooks.js

@@ -1,13 +1,11 @@
 import {merge} from 'uinix-fp';
 import {combineStyles, createThemeRenderer} from 'uinix-theme';
 
-import {createSystem} from './create.js';
-
-export {load, getStore};
+import {createSystem} from './create-system.js';
 
 let store;
 
-const getStore = () => store;
+export const getStore = () => store;
 
 const defaultConfig = {
   elementShorthandPropsMapping: {},
@@ -19,7 +17,7 @@ const defaultConfig = {
   responsiveCssProperties: [],
 };
 
-const load = ({
+export const loadSystem = ({
   config: initialConfig = defaultConfig,
   h,
   system: initialSystem,