@marigold/system 0.0.1 → 0.2.0

package/src/useStyles.test.tsx

@@ -0,0 +1,286 @@
+import React, { ElementType } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { render, screen } from '@testing-library/react';
+import { useStyles } from './useStyles';
+import { ThemeProvider } from './useTheme';
+
+// Setup
+// ---------------
+const theme = {
+  text: {
+    body: {
+      fontSize: 1,
+      color: 'black',
+      marginTop: '2px',
+    },
+    heading: {
+      fontSize: 3,
+      color: 'primary',
+    },
+    padding: {
+      paddingTop: '2px',
+    },
+  },
+};
+
+const wrapper: React.FC = ({ children }) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+);
+
+test('create a string classname', () => {
+  const { result } = renderHook(
+    () => useStyles({ element: 'a', css: { color: 'primary' } }),
+    {
+      wrapper,
+    }
+  );
+  expect(result.current).toEqual(expect.any(String));
+});
+
+// Tests
+// ---------------
+
+test('base styles first', () => {
+  const TestComponent: React.FC<{}> = ({ children, ...props }) => {
+    const classNames = useStyles({ element: 'p' });
+    return (
+      <p className={classNames} {...props}>
+        {children}
+      </p>
+    );
+  };
+
+  const { getByText } = render(
+    <ThemeProvider theme={theme}>
+      <TestComponent>Text</TestComponent>
+    </ThemeProvider>
+  );
+  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
+  }) => {
+    const classNames = useStyles({
+      element: 'p',
+      variant: `text.${variant}`,
+    });
+    return (
+      <p className={classNames} {...props}>
+        {children}
+      </p>
+    );
+  };
+
+  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
+  }) => {
+    const classNames = useStyles({
+      element: 'p',
+      variant: [`text.${variant}`, `text.padding`],
+    });
+    return (
+      <p className={classNames} {...props}>
+        {children}
+      </p>
+    );
+  };
+
+  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 third', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    const classNames = useStyles({
+      element: 'p',
+      variant: `text.${variant}`,
+      css: {
+        marginTop: '4px',
+      },
+    });
+    return (
+      <p className={classNames} {...props}>
+        {children}
+      </p>
+    );
+  };
+
+  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('customClassName styles fourth', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    const custom = useStyles({ element: 'p', css: { marginTop: '8px' } });
+    const classNames = useStyles({
+      element: 'p',
+      variant: `text.${variant}`,
+      css: {
+        marginTop: '4px',
+      },
+      className: custom,
+    });
+    return (
+      <p className={classNames} {...props}>
+        {children}
+      </p>
+    );
+  };
+
+  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).not.toEqual('4px'); // do not apply 4px from custom styles
+  expect(style.marginTop).toEqual('8px'); // apply 8px from customClassNames styles
+});
+
+test("don't apply the same reset multiple times", () => {
+  const Button = ({ className }: { className?: string }) => {
+    const classNames = useStyles({ element: 'button', className });
+    return (
+      <button title="button" className={classNames}>
+        Click me!
+      </button>
+    );
+  };
+  const Wrapper = () => <Button className={useStyles({ element: '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('element resets are applied dynamically', () => {
+  const Component = ({ element }: { element?: ElementType }) => (
+    <div title="element" className={useStyles({ element })}>
+      div
+    </div>
+  );
+
+  const { rerender } = render(<Component element="input" />);
+  const inputClassName = screen.getByTitle('element').className;
+
+  rerender(<Component element="table" />);
+  const tableClassName = screen.getByTitle('element').className;
+
+  expect(inputClassName).not.toEqual(tableClassName);
+});
+
+test('normalize base without element prop', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'normal',
+    children,
+    ...props
+  }) => {
+    const classNames = useStyles({
+      variant: `text.${variant}`,
+    });
+    return (
+      <a className={classNames} {...props}>
+        {children}
+      </a>
+    );
+  };
+
+  const { getByText } = render(
+    <ThemeProvider theme={theme}>
+      <TestComponent>Link</TestComponent>
+    </ThemeProvider>
+  );
+  const testelem = getByText('Link');
+  const style = getComputedStyle(testelem);
+
+  expect(style.boxSizing).toEqual('border-box');
+  expect(style.margin).toEqual('0px');
+  expect(style.padding).toEqual('0px');
+  expect(style.minWidth).toEqual('0');
+});
+
+test('normalize tag name <a>', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    const classNames = useStyles({
+      element: 'a',
+      variant: `text.${variant}`,
+    });
+    return (
+      <a className={classNames} {...props}>
+        {children}
+      </a>
+    );
+  };
+
+  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/useStyles.ts

@@ -0,0 +1,63 @@
+import { ElementType } from 'react';
+import { reset } from './reset';
+import { CSSObject } from './types';
+import { useClassname } from './useClassname';
+
+export 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 const useStyles = ({
+  element,
+  css: styles = {},
+  variant,
+  className = '',
+}: UseStyleInput) => {
+  /**
+   * Get reset styles. Base is always applied. An additional reset maybe applied
+   * based on the passed element.
+   *
+   * We check the passed className if it already includes the reset styles so no
+   * duplicates are applied.
+   */
+  const baseClassName = className.includes(reset.base) ? '' : reset.base;
+  const resetClassName =
+    typeof element === 'string'
+      ? className.includes((reset as { [key: string]: string })[element])
+        ? ''
+        : (reset as { [key: string]: string })[element]
+      : '';
+
+  /**
+   * Get variant styles (from theme).
+   */
+  const variants = Array.isArray(variant)
+    ? variant.map(v => ({ variant: v }))
+    : [{ variant }];
+  const variantsClassName = useClassname(...variants);
+
+  /**
+   * Custom styles are applied "on runtime". They are usually controlled via component
+   * props and can change between component instances.
+   */
+  const customClassName = useClassname(styles);
+
+  return [
+    baseClassName,
+    resetClassName,
+    variantsClassName,
+    customClassName,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+};

package/src/useTheme.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { ThemeProvider, useTheme } from './useTheme';
+
+// Setup
+// ---------------
+const theme = {
+  colors: {
+    primary: 'hotpink',
+    black: '#000',
+  },
+  space: {
+    none: 0,
+    small: 16,
+    medium: 24,
+    large: 32,
+  },
+  text: {
+    body: {
+      fontSize: 1,
+      color: 'black',
+    },
+    heading: {
+      fontSize: 3,
+      color: 'primary',
+    },
+  },
+};
+
+const wrapper: React.FC = ({ children }) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+);
+
+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 });
+  const css = result.current.css;
+
+  expect(css({ p: 'small' })).toMatchInlineSnapshot(`
+Object {
+  "padding": 16,
+}
+`);
+  expect(css({ color: 'primary', p: 'large' })).toMatchInlineSnapshot(`
+Object {
+  "color": "hotpink",
+  "padding": 32,
+}
+`);
+  expect(css({ variant: 'text.body' })).toMatchInlineSnapshot(`
+Object {
+  "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\\"
+      }
+    }"
+  `);
+});

package/src/useTheme.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useCallback, useContext } from 'react';
+import { css as themeUi } from '@theme-ui/css';
+import { Theme } from '@marigold/system';
+
+import { StyleObject } from './types';
+
+const Context = createContext<Theme>({});
+
+export const useTheme = () => {
+  const theme = useContext(Context);
+  const css = useCallback(
+    (style: StyleObject) => themeUi(style)(theme),
+    [theme]
+  );
+  return { theme, css };
+};
+
+export type ThemeProviderProps = { theme: any };
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  theme,
+  children,
+}) => <Context.Provider value={theme}>{children}</Context.Provider>;

package/dist/Box/Box.d.ts

@@ -1,6 +0,0 @@
-import { SpacingProps } from '../categories';
-export declare type BoxProps = {
-    css?: Object;
-    themeSection?: string;
-} & SpacingProps;
-export declare const Box: import("../system").SystemComponent<BoxProps, "div">;

package/dist/Box/index.d.ts

@@ -1 +0,0 @@
-export * from './Box';

package/dist/MarigoldProvider.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare type MarigoldProviderProps<T extends any> = React.PropsWithChildren<{
-    theme: T;
-}>;
-export declare const MarigoldProvider: <T extends unknown>({ theme, children, }: React.PropsWithChildren<{
-    theme: T;
-}>) => JSX.Element;

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/emotion.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const jsx: typeof React.createElement;
-export declare const css: (template: TemplateStringsArray, ...args: any[]) => object;
-export declare const ThemeContext: React.Context<any>;
-export declare const Global: (props: React.PropsWithChildren<{
-    styles: any;
-}>) => React.ReactElement;