feat(hooks): support props path in hooks

Author: chrisrzhou

cypress/fixtures/test-system.js

@@ -1,9 +1,13 @@
+const icon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
+
 const system = {
   icons: {
-    x: '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
+    x: icon,
     nested: {
-      x: '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
+      x: icon,
     },
+    'a.b.c': icon,
   },
   styles: {
     red: {
@@ -104,6 +108,9 @@ const system = {
       m: 16,
       l: 32,
       xl: 64,
+      scale: {
+        4: 16,
+      },
     },
     sizes: {
       icon: {

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

@@ -41,7 +41,6 @@ describe('useIcon', () => {
   it('should return an SVG element for the specified nested icon from the system', () => {
     load({h, system});
     mount(<CustomElement icon="nested.x" />);
-
     const svg = system.icons.nested.x;
     const svgElement = parseSvgElement({h, svg});
     cy.get('@iconSvg').should((iconSvg) => {
@@ -50,4 +49,16 @@ describe('useIcon', () => {
       );
     });
   });
+
+  it('should return an SVG element for the specified direct icon from the system', () => {
+    load({h, system});
+    mount(<CustomElement icon="a.b.c" />);
+    const svg = system.icons['a.b.c'];
+    const svgElement = parseSvgElement({h, svg});
+    cy.get('@iconSvg').should((iconSvg) => {
+      expect(renderToStaticMarkup(iconSvg)).to.equal(
+        renderToStaticMarkup(svgElement),
+      );
+    });
+  });
 });

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

@@ -4,8 +4,8 @@ import React, {createElement as h} from 'react';
 import {createTheme, load, useTheme} from '../../../../index.js';
 import system from '../../../fixtures/test-system.js';
 
-const CustomElement = () => {
-  const theme = useTheme();
+const CustomElement = ({path = ''}) => {
+  const theme = useTheme(path);
   cy.wrap(theme).as('theme');
   return <pre>{JSON.stringify(theme, null, 2)}</pre>;
 };
@@ -18,7 +18,33 @@ describe('useTheme', () => {
   it('should retrieve the theme from the system', () => {
     load({h, system});
     mount(<CustomElement />);
-
     cy.get('@theme').should('deep.equal', createTheme(system.theme));
   });
+
+  it('should retrieve the theme values given a property path', () => {
+    load({h, system});
+    mount(<CustomElement path="keyframes.flicker" />);
+    cy.get('@theme').should(
+      'deep.equal',
+      createTheme(system.theme).keyframes.flicker,
+    );
+
+    mount(<CustomElement path="colors.palette" />);
+    cy.get('@theme').should(
+      'deep.equal',
+      createTheme(system.theme).colors.palette,
+    );
+
+    mount(<CustomElement path="colors.palette.red1" />);
+    cy.get('@theme').should(
+      'deep.equal',
+      createTheme(system.theme).colors.palette.red1,
+    );
+
+    mount(<CustomElement path="spacings.4" />);
+    cy.get('@theme').should(
+      'deep.equal',
+      createTheme(system.theme).spacings[4],
+    );
+  });
 });

lib/system/hooks.js

@@ -79,16 +79,18 @@ const useSystem = () => getStore().system;
 /**
  * Retrieves `system.theme`.
  *
+ * @param {string} [path]
+ *    Theme property path
  * @returns {SystemTheme}
  */
-const useTheme = () => useSystem().theme;
+const useTheme = (path = '') => props(path)(useSystem().theme);
 
 /**
  * Retrieves the typography variant style in
  * `system.styles.typography.variants[variant]`.
  *
  * @param {string} variant
- *    variant property path
+ *    Variant property path
  * @returns {StyleDefinition|void}
  */
 const useTypographyVariant = (variant) =>
@@ -98,7 +100,7 @@ const useTypographyVariant = (variant) =>
  * Retrieves the variant style in `system.styles.variants[variant]`.
  *
  * @param {string} variant
- *    variant property path
+ *    Variant property path
  * @returns {StyleDefinition|void}
  */
 const useVariant = (variant) =>

package.json

@@ -39,6 +39,7 @@
     "fela-preset-web": "^11.7.0",
     "hast-to-hyperscript": "^10.0.1",
     "svg-parser": "^2.0.4",
+    "uinix-fp": "^0.2.4",
     "uinix-theme": "^0.2.3"
   },
   "devDependencies": {
@@ -47,31 +48,31 @@
     "@babel/preset-react": "^7.13.13",
     "@cypress/code-coverage": "^3.9.11",
     "@cypress/react": "^5.10.1",
-    "@cypress/webpack-dev-server": "^1.6.0",
-    "@types/react": "^17.0.27",
+    "@cypress/webpack-dev-server": "^1.7.0",
+    "@types/react": "^17.0.30",
     "@types/svg-parser": "^2.0.2",
     "@types/tape": "^4.13.2",
     "babel-loader": "^8.2.2",
-    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "c8": "^7.10.0",
-    "cypress": "^8.5.0",
+    "cypress": "^8.6.0",
     "eslint-config-xo-react": "^0.25.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "htm": "^3.1.0",
-    "html-webpack-plugin": "^5.3.1",
+    "html-webpack-plugin": "^5.4.0",
     "hyperscript": "^2.0.2",
     "mithril": "^2.0.4",
-    "preact": "^10.5.14",
+    "preact": "^10.5.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "solid-js": "^1.1.6",
     "tape": "^5.3.1",
     "type-coverage": "^2.18.2",
-    "typescript": "^4.4.3",
+    "typescript": "^4.4.4",
     "uinix-scripts": "^0.1.2",
-    "webpack": "^5.58.1",
+    "webpack": "^5.58.2",
     "webpack-dev-server": "^4.3.1",
     "xo": "^0.45.0"
   },