@marigold/system 0.0.2 → 0.3.0

package/src/useTheme.test.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import { jsx } from '@emotion/react';
+import { render, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
+
 import { ThemeProvider, useTheme } from './useTheme';
 
 // Setup
@@ -9,6 +12,12 @@ const theme = {
     primary: 'hotpink',
     black: '#000',
   },
+  space: {
+    none: 0,
+    small: 16,
+    medium: 24,
+    large: 32,
+  },
   text: {
     body: {
       fontSize: 1,
@@ -25,24 +34,90 @@ const wrapper: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>{children}</ThemeProvider>
 );
 
-test('return theme', () => {
+test('returns the theme', () => {
+  const { result } = renderHook(() => useTheme(), { wrapper });
+  expect(result.current.theme).toEqual(theme);
+});
+
+test('returns a "css" function', () => {
+  const { result } = renderHook(() => useTheme(), { wrapper });
+  expect(result.current.css).toEqual(expect.any(Function));
+});
+
+test('transpile style object to css object', () => {
   const { result } = renderHook(() => useTheme(), { wrapper });
-  expect(result.current).toMatchInlineSnapshot(`
-    Object {
-      "colors": Object {
-        "black": "#000",
-        "primary": "hotpink",
-      },
-      "text": Object {
-        "body": Object {
-          "color": "black",
-          "fontSize": 1,
-        },
-        "heading": Object {
-          "color": "primary",
-          "fontSize": 3,
-        },
-      },
+  const css = result.current.css;
+
+  expect(css({ p: 'small' })).toMatchInlineSnapshot(`
+    {
+      "padding": 16,
+    }
+  `);
+  expect(css({ color: 'primary', p: 'large' })).toMatchInlineSnapshot(`
+    {
+      "color": "hotpink",
+      "padding": 32,
     }
   `);
+  expect(css({ variant: 'text.body' })).toMatchInlineSnapshot(`
+    {
+      "color": "#000",
+      "fontSize": 14,
+    }
+  `);
+});
+
+test('themes can be cascaded', () => {
+  const outerTheme = {
+    colors: {
+      primary: 'coral',
+    },
+  };
+
+  const innerTheme = {
+    colors: {
+      primary: 'gainsboro',
+    },
+  };
+
+  const Theme = ({ testId }: { testId: string }) => {
+    const { theme } = useTheme();
+    return <div data-testid={testId}>{JSON.stringify(theme, null, 2)}</div>;
+  };
+
+  render(
+    <ThemeProvider theme={outerTheme}>
+      <>
+        <Theme testId="outer" />
+        <ThemeProvider theme={innerTheme}>
+          <Theme testId="inner" />
+        </ThemeProvider>
+      </>
+    </ThemeProvider>
+  );
+
+  const outer = screen.getByTestId('outer');
+  const inner = screen.getByTestId('inner');
+
+  expect(outer.innerHTML).toMatchInlineSnapshot(`
+    "{
+      \\"colors\\": {
+        \\"primary\\": \\"coral\\"
+      }
+    }"
+  `);
+  expect(inner.innerHTML).toMatchInlineSnapshot(`
+    "{
+      \\"colors\\": {
+        \\"primary\\": \\"gainsboro\\"
+      }
+    }"
+  `);
+});
+
+test('theme is passed down to emotion', () => {
+  const css = jest.fn().mockReturnValue({});
+  render(<ThemeProvider theme={theme}>{jsx('div', { css })}</ThemeProvider>);
+
+  expect(css).toHaveBeenCalledWith(theme);
 });

package/src/useTheme.tsx

@@ -1,11 +1,50 @@
-import React, { createContext, useContext } from 'react';
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+} from 'react';
+import { css as transformStyleObject } from '@theme-ui/css';
+import { ThemeProvider as EmotionProvider } from '@emotion/react';
 
-const Context = createContext({});
+import { Theme } from './theme';
+import { StyleObject } from './types';
 
-export const useTheme = () => useContext(Context);
+/**
+ * @internal
+ */
+export const __defaultTheme: Theme = {};
 
-export type ThemeProviderProps = { theme: any };
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+const InternalContext = createContext<Theme>(__defaultTheme);
+
+export const useTheme = () => {
+  const theme = useContext(InternalContext);
+  /**
+   * We cast the theme here to `any` since our subset is not
+   * compatible with the typings of `theme-ui`, since they
+   * also support arrays as scale values, while we don't.
+   */
+  const css = useCallback(
+    (style: StyleObject) => transformStyleObject(style)(theme as any),
+    [theme]
+  );
+  return { theme, css };
+};
+
+export type ThemeProviderProps<T extends Theme> = {
+  theme: T;
+  children: ReactNode;
+};
+
+export function ThemeProvider<T extends Theme>({
   theme,
   children,
-}) => <Context.Provider value={theme}>{children}</Context.Provider>;
+}: ThemeProviderProps<T>) {
+  return (
+    <EmotionProvider theme={theme}>
+      <InternalContext.Provider value={theme}>
+        {children}
+      </InternalContext.Provider>
+    </EmotionProvider>
+  );
+}

package/src/variant.test.ts

@@ -0,0 +1,93 @@
+import {
+  appendVariantState,
+  conditional,
+  ensureArray,
+  ensureArrayVariant,
+  ensureVariantDefault,
+} from './variant';
+
+test('ensure array', () => {
+  expect(ensureArray('foo')).toEqual(['foo']);
+  expect(ensureArray(['foo'])).toEqual(['foo']);
+  expect(ensureArray(['foo', 'bar'])).toEqual(['foo', 'bar']);
+  expect(ensureArray(null)).toEqual([]);
+  expect(ensureArray(undefined)).toEqual([]);
+});
+
+test('ensure variant default', () => {
+  expect(ensureVariantDefault('foo.')).toEqual('foo');
+  expect(ensureVariantDefault('foo')).toEqual('foo');
+});
+
+test('ensure array of variants', () => {
+  expect(ensureArrayVariant('foo')).toEqual(['foo']);
+  expect(ensureArrayVariant(['foo'])).toEqual(['foo']);
+  expect(ensureArrayVariant(['foo', 'bar'])).toEqual(['foo', 'bar']);
+  expect(ensureArrayVariant(undefined)).toEqual([]);
+});
+
+test('append variant state', () => {
+  expect(appendVariantState('foo', 'checked')).toEqual('foo.:checked');
+  expect(appendVariantState('foo', 'focus')).toEqual('foo.:focus');
+  expect(appendVariantState('foo', 'disabled')).toEqual('foo.:disabled');
+});
+
+test('conditional variants', () => {
+  expect(
+    conditional('foo', {
+      checked: true,
+    })
+  ).toMatchInlineSnapshot(`
+    [
+      "foo",
+      "foo.:checked",
+    ]
+  `);
+
+  expect(
+    conditional('foo', {
+      checked: true,
+      focus: true,
+      disabled: true,
+    })
+  ).toMatchInlineSnapshot(`
+    [
+      "foo",
+      "foo.:checked",
+      "foo.:focus",
+      "foo.:disabled",
+    ]
+  `);
+
+  expect(
+    conditional('foo', {
+      checked: true,
+      focus: false,
+      disabled: true,
+    })
+  ).toMatchInlineSnapshot(`
+    [
+      "foo",
+      "foo.:checked",
+      "foo.:disabled",
+    ]
+  `);
+});
+
+test('disabled is always last state variant', () => {
+  const one = conditional('foo', {
+    disabled: true,
+    checked: true,
+    focus: true,
+  });
+
+  expect(one[one.length - 1]).toMatchInlineSnapshot(`"foo.:disabled"`);
+
+  const two = conditional('foo', {
+    checked: true,
+    disabled: true,
+    focus: true,
+  });
+
+  expect(two[two.length - 1]).toMatchInlineSnapshot(`"foo.:disabled"`);
+});

package/src/variant.ts

@@ -0,0 +1,54 @@
+const isNil = (value: any): value is null | undefined =>
+  value === null || value === undefined;
+
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+export const ensureArray = <T>(val?: T | T[]) =>
+  isNil(val) ? [] : Array.isArray(val) ? val : [val];
+
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+export const ensureVariantDefault = (val: string) => val.replace(/\.$/, '');
+
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+export const ensureArrayVariant = <T extends string>(variant?: T | T[]) =>
+  ensureArray(variant).map(ensureVariantDefault);
+
+export type State = {
+  checked?: boolean;
+  focus?: boolean;
+  hover?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+};
+
+/**
+ * Appends given `state` to a `variant`.
+ */
+export const appendVariantState = (variant: string, state: keyof State) => {
+  return `${ensureVariantDefault(variant)}.:${state}`;
+};
+
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+export const conditional = (
+  variant: string,
+  { disabled = false, ...states }: State
+) => {
+  const entries = [...Object.entries(states), ['disabled', disabled]] as [
+    keyof State,
+    boolean
+  ][];
+  const stateVariants = entries
+    .filter(([, val]) => Boolean(val))
+    .map(([key]) => appendVariantState(variant, key));
+
+  return [variant, ...stateVariants];
+};

package/dist/categories.d.ts

@@ -1,169 +0,0 @@
-import { PropertiesFallback } from 'csstype';
-/**
- * System categories are based on https://primer.style/components/docs/system-props
- */
-export declare const SPACE_PROPS: string[];
-declare type StandardCSSProperties = PropertiesFallback<number | string>;
-export declare type SpacingProps = {
-    /**
-     * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin
-     */
-    m?: StandardCSSProperties['margin'];
-    /**
-     * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
-     */
-    mt?: StandardCSSProperties['marginTop'];
-    /**
-     * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
-     */
-    mr?: StandardCSSProperties['marginRight'];
-    /**
-     * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
-     */
-    mb?: StandardCSSProperties['marginBottom'];
-    /**
-     * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
-     */
-    ml?: StandardCSSProperties['marginLeft'];
-    /**
-     * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit
-     * farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#margin-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
-     */
-    mx?: StandardCSSProperties['marginLeft'];
-    /**
-     * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value
-     * places it farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#margin-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
-     */
-    marginX?: StandardCSSProperties['marginLeft'];
-    /**
-     * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it
-     * farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#margin-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
-     */
-    my?: StandardCSSProperties['marginTop'];
-    /**
-     * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places
-     * it farther from its neighbors, while a negative value places it closer.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#margin-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
-     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
-     */
-    marginY?: StandardCSSProperties['marginTop'];
-    /**
-     * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding
-     */
-    p?: StandardCSSProperties['padding'];
-    /**
-     * The **`padding-top`** padding area on the top of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
-     */
-    pt?: StandardCSSProperties['paddingTop'];
-    /**
-     * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
-     */
-    pr?: StandardCSSProperties['paddingRight'];
-    /**
-     * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
-     */
-    pb?: StandardCSSProperties['paddingBottom'];
-    /**
-     * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
-     */
-    pl?: StandardCSSProperties['paddingLeft'];
-    /**
-     * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#padding-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
-     */
-    px?: StandardCSSProperties['paddingLeft'];
-    /**
-     * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#padding-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
-     */
-    paddingX?: StandardCSSProperties['paddingLeft'];
-    /**
-     * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#padding-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
-     */
-    py?: StandardCSSProperties['paddingTop'];
-    /**
-     * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
-     *
-     * **Initial value**: `0`
-     *
-     * @see https://styled-system.com/#padding-props
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
-     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
-     */
-    paddingY?: StandardCSSProperties['paddingTop'];
-};
-export {};

package/dist/system.d.ts

@@ -1,37 +0,0 @@
-/**
- * Typings are based on [Reach UI](https://github.com/reach/reach-ui/blob/4cb497f530b0f83f80c6f6f2da46ab55b1160cb6/packages/utils/src/types.tsx).
- */
-import { ComponentPropsWithRef, ElementType, ReactElement, ValidationMap, WeakValidationMap } from 'react';
-/**
- * SystemProps support the `as` and `variant` prop. The former
- * is used to changed the rendered root element of a component.
- *
- * These props also infer additional allowed props based on the
- * value of the `as` prop. For example, setting `as="button"` will
- * allow to use HTMLButtonAttributes on the component.
- */
-export declare type SystemProps<P, T extends ElementType> = P & Omit<ComponentPropsWithRef<T>, 'as' | keyof P> & {
-    as?: T;
-    variant?: string;
-};
-/**
- * Enhanced version of `React.FunctionComponent` that accepts `SystemProps`
- * and infers allowed properties based on the `as` prop.
- */
-export interface SystemComponent<P, T extends ElementType> {
-    /**
-     * These types are a bit of a hack, but cover us in cases where the `as` prop
-     * is not a JSX string type. Makes the compiler happy so 🤷‍♂️
-     */
-    <TT extends ElementType>(props: SystemProps<P, TT>): ReactElement | null;
-    (props: SystemProps<P, T>): ReactElement | null;
-    displayName?: string;
-    propTypes?: WeakValidationMap<SystemProps<P, T>>;
-    contextTypes?: ValidationMap<any>;
-    defaultProps?: Partial<SystemProps<P, T>>;
-}
-/**
- * Helper to write components that adhere to a common design system API,
- * which includes the `as` and `variant` prop.
- */
-export declare function system<P, T extends ElementType>(render: (props: SystemProps<P, T>) => ReactElement | null): SystemComponent<P, T>;

package/dist/useClassname.d.ts

@@ -1,2 +0,0 @@
-import { ThemeUIStyleObject } from '@theme-ui/css';
-export declare const useClassname: (...styles: ThemeUIStyleObject[]) => string;

package/dist/useStyles.d.ts

@@ -1,10 +0,0 @@
-import { ElementType } from 'react';
-export declare type StylesProps = {
-    element?: ElementType[];
-    variant?: string | string[];
-    [key: string]: any;
-};
-/**
- * Hook function that can add base styles, normalization, variant and custom styles
- */
-export declare const useStyles: ({ element, variant, ...styles }: StylesProps, classNames?: string | undefined) => string;