feat(quark): add support for parent-child slots

packages/quark/src/Slots.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import mergeProps from 'merge-props';
+import { ThemedStyle } from './interpolate';
+
+type Slots = { [slot: string]: ThemedStyle };
+
+const SlotContext = React.createContext<Slots | null>(null);
+
+/**
+ * Consumes slots props from parents.
+ *
+ * @example
+ * const props =  useSlotProps(props, 'title')
+ */
+export function useSlotProps<T>(
+  props: T & { slot?: string },
+  defaultSlot: string,
+) {
+  const slot = props.slot ?? defaultSlot;
+  const { [slot]: slotProps = {} } = React.useContext(SlotContext) || {};
+  return mergeProps(slotProps, props);
+}
+
+/**
+ * Consumes slots styles from parents.
+ *
+ * @example
+ * const styles =  useSlotStyles('title')
+ */
+export function useSlotStyles(slot: string) {
+  const { [slot]: slotStyles = {} } = React.useContext(SlotContext) || {};
+  return slotStyles;
+}
+
+/**
+ * Provides slots for underlying components.
+ *
+ * @example
+ * <SlotProvider slots={{ Title: { color: 'red.5' } }}>
+ *  {children}
+ * </SlotProvider>
+ */
+export function SlotProvider({
+  slots,
+  children,
+}: {
+  slots: Slots;
+  children: React.ReactNode;
+}) {
+  const parentSlots = React.useContext(SlotContext) || {};
+  const value = React.useMemo(() => {
+    return Object.keys(parentSlots)
+      .concat(Object.keys(slots))
+      .reduce((accumulator, current) => {
+        return {
+          ...accumulator,
+          [current]: mergeProps(
+            parentSlots[current] || {},
+            slots[current] || {},
+          ),
+        };
+      }, {});
+  }, [parentSlots, slots]);
+
+  return <SlotContext.Provider value={value}>{children}</SlotContext.Provider>;
+}
+
+/**
+ * Resets/Clears the slots context.
+ *
+ * @example
+ * <ClearSlots>
+ *  {children}
+ * </ClearSlots>
+ */
+export function ClearSlots({ children }: { children: React.ReactNode }) {
+  return <SlotContext.Provider value={{}}>{children}</SlotContext.Provider>;
+}

packages/quark/src/quark.tsx

@@ -1,13 +1,13 @@
+import * as React from 'react';
 import { createComponent, createHook, Component } from 'reakit-system';
 import { As } from 'reakit-utils';
 import cc from 'classcat';
 import { css as toClassname } from 'otion';
-import { PropsOf, Dict, Theme, FirstParameters } from './types';
+import { PropsOf, Dict, Theme } from './types';
 import { domElements, DOMElements, get, merge, objectKeys } from './utils';
 import { interpolate, ThemedStyle } from './interpolate';
 import { useTheme } from './ThemeContext';
-
-type CreateHookOptions = FirstParameters<typeof createHook>;
+import { SlotProvider, useSlotStyles } from './Slots';
 
 type Attrs<T extends As> = PropsOf<T>;
 
@@ -58,11 +58,9 @@ function styled<T extends As, O extends QuarkOptions, P extends QuarkHTMLProps>(
   const baseStyles = getBaseStyles(config);
   const modifierStyle = getModifierStyles(config);
 
-  // const slotStyles = getSlotStyles(options);
-
   const useQuark = createHook<QuarkOptions, QuarkHTMLProps>({
     keys: ['css', '_css', 'variant', 'size'],
-    useProps(options, htmlProps) {
+    useProps(options, { wrapElement: htmlWrapElement, ...htmlProps }) {
       const theme = useTheme();
       const { _css = {}, css = {} } = options;
 
@@ -78,7 +76,7 @@ function styled<T extends As, O extends QuarkOptions, P extends QuarkHTMLProps>(
       const computedStyles: ThemedStyle = {
         ...baseStyles(optionsWithTheme),
         ...modifierStyle(optionsWithTheme),
-        // ...slotStyles(optionsWithTheme),
+        ...useSlotStyles(name),
         ...merge(_css, css),
       };
 
@@ -99,13 +97,33 @@ function styled<T extends As, O extends QuarkOptions, P extends QuarkHTMLProps>(
 
       const { className, ...elementProps } = computedProps;
 
+      const slots = get(
+        theme,
+        `components.${config?.themeKey}.slots`,
+        undefined,
+      );
+
+      const wrapElement = React.useCallback(
+        (element) => {
+          if (htmlWrapElement) {
+            element = htmlWrapElement(element); // eslint-disable-line no-param-reassign
+          }
+          if (slots) {
+            return <SlotProvider slots={slots}>{element}</SlotProvider>;
+          }
+          return element;
+        },
+        [slots, htmlWrapElement],
+      );
+
       return {
         className: cc([
           className,
           toClassname(interpolate(computedStyles)(theme)),
         ]),
         // Better classNames for debugging
         'data-component': name,
+        wrapElement,
         ...elementProps,
       };
     },