@marigold/system 0.2.0 → 0.3.0

package/src/useTheme.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { render, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
@@ -48,22 +49,22 @@ test('transpile style object to css object', () => {
   const css = result.current.css;
 
   expect(css({ p: 'small' })).toMatchInlineSnapshot(`
-Object {
-  "padding": 16,
-}
-`);
+    {
+      "padding": 16,
+    }
+  `);
   expect(css({ color: 'primary', p: 'large' })).toMatchInlineSnapshot(`
-Object {
-  "color": "hotpink",
-  "padding": 32,
-}
-`);
+    {
+      "color": "hotpink",
+      "padding": 32,
+    }
+  `);
   expect(css({ variant: 'text.body' })).toMatchInlineSnapshot(`
-Object {
-  "color": "#000",
-  "fontSize": 14,
-}
-`);
+    {
+      "color": "#000",
+      "fontSize": 14,
+    }
+  `);
 });
 
 test('themes can be cascaded', () => {
@@ -113,3 +114,10 @@ test('themes can be cascaded', () => {
     }"
   `);
 });
+
+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,22 +1,50 @@
-import React, { createContext, useCallback, useContext } from 'react';
-import { css as themeUi } from '@theme-ui/css';
-import { Theme } from '@marigold/system';
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+} from 'react';
+import { css as transformStyleObject } from '@theme-ui/css';
+import { ThemeProvider as EmotionProvider } from '@emotion/react';
 
+import { Theme } from './theme';
 import { StyleObject } from './types';
 
-const Context = createContext<Theme>({});
+/**
+ * @internal
+ */
+export const __defaultTheme: Theme = {};
+
+const InternalContext = createContext<Theme>(__defaultTheme);
 
 export const useTheme = () => {
-  const theme = useContext(Context);
+  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) => themeUi(style)(theme),
+    (style: StyleObject) => transformStyleObject(style)(theme as any),
     [theme]
   );
   return { theme, css };
 };
 
-export type ThemeProviderProps = { theme: any };
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+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/Element.d.ts

@@ -1,8 +0,0 @@
-import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
-import { CSSObject } from './types';
-export declare type ElementOwnProps = {
-    css?: CSSObject;
-    variant?: string | string[];
-};
-export declare type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;
-export declare const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'>;

package/dist/cache.d.ts

@@ -1,4 +0,0 @@
-/**
- * Expose cache from emotion so we can use the same cache when doing SSR.
- */
-export { cache } from '@emotion/css';

package/dist/reset.d.ts

@@ -1,24 +0,0 @@
-export declare const reset: {
-    readonly article: string;
-    readonly aside: string;
-    readonly details: string;
-    readonly figcaption: string;
-    readonly figure: string;
-    readonly footer: string;
-    readonly header: string;
-    readonly hgroup: string;
-    readonly menu: string;
-    readonly nav: string;
-    readonly section: string;
-    readonly ul: string;
-    readonly ol: string;
-    readonly blockquote: string;
-    readonly q: string;
-    readonly a: string;
-    readonly base: string;
-    readonly table: string;
-    readonly select: string;
-    readonly button: string;
-    readonly textarea: string;
-    readonly input: string;
-};

package/dist/useClassname.d.ts

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

package/dist/useStyles.d.ts

@@ -1,15 +0,0 @@
-import { ElementType } from 'react';
-import { CSSObject } from './types';
-export declare type UseStyleInput = {
-    element?: ElementType;
-    css?: Omit<CSSObject, 'variant' | 'element'> & {
-        variant?: never;
-        element?: never;
-    };
-    variant?: string | string[];
-    className?: string;
-};
-/**
- * Hook that can adds base styles, reset for certain elements, variants and custom styles
- */
-export declare const useStyles: ({ element, css: styles, variant, className, }: UseStyleInput) => string;

package/src/Element.test.tsx

@@ -1,203 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { useStyles } from './useStyles';
-import { ThemeProvider } from './useTheme';
-import { Element } from './Element';
-
-const theme = {
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-      marginTop: '2px',
-    },
-    heading: {
-      fontSize: 3,
-      color: 'primary',
-    },
-    padding: {
-      paddingTop: '2px',
-    },
-  },
-};
-
-test('renders a <div> by default', () => {
-  render(<Element>Text</Element>);
-  const testelem = screen.getByText('Text');
-
-  expect(testelem instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('supports as prop', () => {
-  render(<Element as="p">Text</Element>);
-  const testelem = screen.getByText('Text');
-
-  expect(testelem instanceof HTMLParagraphElement).toBeTruthy();
-});
-
-test('supports HTML className attribute', () => {
-  render(<Element className="my-custom-class">Text</Element>);
-  const element = screen.getByText('Text');
-
-  expect(element.getAttribute('class')).toMatch('my-custom-class');
-});
-
-test('passes down HTML attributes', () => {
-  render(
-    <Element className="my-custom-class" id="element-id" disabled>
-      Text
-    </Element>
-  );
-  const element = screen.getByText('Text');
-
-  expect(element.getAttribute('id')).toEqual('element-id');
-  expect(element.getAttribute('disabled')).toMatch('');
-  expect(element.getAttribute('class')).toMatch('my-custom-class');
-});
-
-test('forwards ref', () => {
-  const ref = React.createRef<HTMLButtonElement>();
-  render(
-    <Element as="button" ref={ref}>
-      button
-    </Element>
-  );
-
-  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
-});
-
-test('base styles first', () => {
-  const { getByText } = render(<Element as="p">Text</Element>);
-  const testelem = getByText('Text');
-  const style = getComputedStyle(testelem);
-
-  expect(style.marginTop).toEqual('0px'); // 0px come from base
-});
-
-test('variant styles second', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    return (
-      <Element as="p" variant={`text.${variant}`} {...props}>
-        {children}
-      </Element>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestComponent>Text</TestComponent>
-    </ThemeProvider>
-  );
-  const testelem = getByText('Text');
-  const style = getComputedStyle(testelem);
-
-  expect(style.marginTop).not.toEqual('0px'); // 0px come from base
-  expect(style.marginBottom).toEqual('0px'); // 0px still come from base
-  expect(style.marginTop).toEqual('2px'); // 2px come from variant
-});
-
-test('array of variant styles', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    return (
-      <Element as="p" variant={[`text.${variant}`, `text.padding`]} {...props}>
-        {children}
-      </Element>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestComponent>Text</TestComponent>
-    </ThemeProvider>
-  );
-  const testelem = getByText('Text');
-  const style = getComputedStyle(testelem);
-
-  expect(style.marginTop).not.toEqual('0px'); // 0px come from base
-  expect(style.marginBottom).toEqual('0px'); // 0px still come from base
-  expect(style.marginTop).toEqual('2px'); // 2px marginTop come from variant
-  expect(style.paddingTop).toEqual('2px'); // 2px paddingTop come from variant
-});
-
-test('custom styles with css prop third', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    return (
-      <Element
-        as="p"
-        variant={`text.${variant}`}
-        css={{ marginTop: '4px' }}
-        {...props}
-      >
-        {children}
-      </Element>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestComponent>Text</TestComponent>
-    </ThemeProvider>
-  );
-  const testelem = getByText('Text');
-  const style = getComputedStyle(testelem);
-
-  expect(style.marginTop).not.toEqual('0px'); // do not apply 0px from base
-  expect(style.marginTop).not.toEqual('2px'); // do not apply 2px from variant
-  expect(style.marginTop).toEqual('4px'); // apply 4px from custom styles
-});
-
-test("don't apply the same reset multiple times", () => {
-  const Button = ({ className }: { className?: string }) => {
-    const classNames = useStyles({ element: 'button', className });
-    return (
-      <Element as="button" title="button" className={classNames}>
-        Click me!
-      </Element>
-    );
-  };
-  const Wrapper = () => <Button />;
-
-  render(<Wrapper />);
-  const button = screen.getByTitle('button');
-  const classNames = button.className.split(' ').filter(i => i.length);
-
-  // Test if applied classnames are unique
-  expect(classNames.length).toEqual([...new Set(classNames)].length);
-});
-
-test('normalize tag name <a>', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    return (
-      <Element as="a" variant={`text.${variant}`} {...props}>
-        {children}
-      </Element>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestComponent>Link</TestComponent>
-    </ThemeProvider>
-  );
-  const testelem = getByText('Link');
-  const style = getComputedStyle(testelem);
-
-  expect(style.boxSizing).toEqual('border-box'); // from base
-  expect(style.textDecoration).toEqual('none'); // from a
-});

package/src/Element.tsx

@@ -1,59 +0,0 @@
-import { jsx } from '@emotion/react';
-import { forwardRef } from 'react';
-import {
-  PolymorphicPropsWithRef,
-  PolymorphicComponentWithRef,
-} from '@marigold/types';
-
-import { getNormalizedStyles } from './normalize';
-import { CSSObject } from './types';
-import { useTheme } from './useTheme';
-
-export type ElementOwnProps = {
-  css?: CSSObject;
-  variant?: string | string[];
-};
-
-export type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;
-
-/**
- * Function expression to check if there is any falsy value or empty object
- */
-const isNotEmpty = (val: any) =>
-  !(val && Object.keys(val).length === 0 && val.constructor === Object);
-
-/**
- * Get the normalized base styles
- */
-const baseStyles = getNormalizedStyles('base');
-
-export const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'> =
-  forwardRef(
-    ({ as = 'div', css: styles = {}, variant, children, ...props }, ref) => {
-      const { css } = useTheme();
-
-      /**
-       * Transform variant input for `@theme-ui/css`
-       */
-      const variants = Array.isArray(variant)
-        ? variant.map(v => ({ variant: v }))
-        : [{ variant }];
-
-      return jsx(
-        as,
-        {
-          ...props,
-          ...{
-            css: [
-              baseStyles,
-              getNormalizedStyles(as),
-              ...variants.map(v => css(v)),
-              css(styles),
-            ].filter(isNotEmpty),
-          },
-          ref,
-        },
-        children
-      );
-    }
-  );

package/src/cache.ts

@@ -1,4 +0,0 @@
-/**
- * Expose cache from emotion so we can use the same cache when doing SSR.
- */
-export { cache } from '@emotion/css';

package/src/reset.ts

@@ -1,108 +0,0 @@
-import { css } from '@emotion/css';
-
-const base = css({
-  boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
-  minWidth: 0,
-  fontSize: '100%',
-  font: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent',
-});
-
-// Content
-// ---------------
-const block = css({
-  display: 'block',
-});
-
-const list = css({
-  // empty
-});
-
-const table = css({
-  borderCollapse: 'collapse',
-  borderSpacing: 0,
-});
-
-// Typography
-// ---------------
-const a = css({
-  textDecoration: 'none',
-  touchAction: 'manipulation',
-});
-
-const quote = css({
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''",
-    },
-  },
-});
-
-// Form Elements
-// ---------------
-const button = css({
-  display: 'block',
-  appearance: 'none',
-  background: 'transparent',
-  textAlign: 'center',
-  touchAction: 'manipulation',
-});
-
-const input = css({
-  display: 'block',
-  appearance: 'none',
-  selectors: {
-    '&::-ms-clear': {
-      display: 'none',
-    },
-    '&::-webkit-search-cancel-button': {
-      WebkitAppearance: 'none',
-    },
-  },
-});
-
-const select = css({
-  display: 'block',
-  appearance: 'none',
-  selectors: {
-    '&::-ms-expand': {
-      display: 'none',
-    },
-  },
-});
-
-const textarea = css({
-  display: 'block',
-  appearance: 'none',
-});
-
-// Reset
-// ---------------
-export const reset = {
-  article: block,
-  aside: block,
-  details: block,
-  figcaption: block,
-  figure: block,
-  footer: block,
-  header: block,
-  hgroup: block,
-  menu: block,
-  nav: block,
-  section: block,
-  ul: list,
-  ol: list,
-  blockquote: quote,
-  q: quote,
-  a,
-  base,
-  table,
-  select,
-  button,
-  textarea,
-  input,
-} as const;