@marigold/system 0.2.0 → 0.3.3

package/src/Box.tsx

@@ -0,0 +1,199 @@
+import { jsx, Theme } from '@emotion/react';
+import { css as transformStyleObject } from '@theme-ui/css';
+import { forwardRef } from 'react';
+import {
+  PolymorphicPropsWithRef,
+  PolymorphicComponentWithRef,
+} from '@marigold/types';
+
+import { getNormalizedStyles } from './normalize';
+import { CSSObject } from './types';
+import { ensureArrayVariant } from './variant';
+
+export type StyleProps = Pick<
+  CSSObject,
+  | 'display'
+  | 'height'
+  | 'width'
+  | 'minWidth'
+  | 'maxWidth'
+  | 'position'
+  | 'top'
+  | 'bottom'
+  | 'right'
+  | 'left'
+  | 'zIndex'
+  | 'p'
+  | 'px'
+  | 'py'
+  | 'pt'
+  | 'pb'
+  | 'pl'
+  | 'pr'
+  | 'm'
+  | 'mx'
+  | 'my'
+  | 'mt'
+  | 'mb'
+  | 'ml'
+  | 'mr'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'flexShrink'
+  | 'flexGrow'
+  | 'alignItems'
+  | 'justifyContent'
+  | 'bg'
+  | 'border'
+  | 'borderRadius'
+  | 'boxShadow'
+  | 'opacity'
+  | 'overflow'
+  | 'transition'
+>;
+
+export type BoxOwnProps = {
+  css?: CSSObject;
+  variant?: string | string[];
+  /**
+   * Use to set base styles for the component
+   * @internal Used to set default styles for Marigold components
+   */
+  __baseCSS?: CSSObject;
+} & StyleProps;
+
+export type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
+
+/**
+ * Check if there is any falsy value or empty object
+ */
+const isNotEmpty = (val: any) =>
+  !(val && Object.keys(val).length === 0 && val.constructor === Object);
+
+type CreateStyleProps = {
+  as?: BoxProps['as'];
+  __baseCSS?: BoxOwnProps['__baseCSS'];
+  variant?: BoxOwnProps['variant'];
+  css?: BoxOwnProps['css'];
+  styles?: StyleProps;
+};
+
+const createThemedStyle =
+  ({ as, __baseCSS, variant, styles, css }: CreateStyleProps) =>
+  (theme: Theme) => {
+    return [
+      getNormalizedStyles(as),
+      transformStyleObject(__baseCSS)(theme),
+      ...ensureArrayVariant(variant).map(v =>
+        transformStyleObject({ variant: v })(theme)
+      ),
+      transformStyleObject(styles)(theme),
+      transformStyleObject(css)(theme),
+    ].filter(isNotEmpty);
+  };
+
+export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
+  (
+    {
+      as = 'div',
+      children,
+      __baseCSS,
+      variant,
+      css = {},
+      display,
+      height,
+      width,
+      minWidth,
+      maxWidth,
+      position,
+      top,
+      bottom,
+      right,
+      left,
+      zIndex,
+      p,
+      px,
+      py,
+      pt,
+      pb,
+      pl,
+      pr,
+      m,
+      mx,
+      my,
+      mt,
+      mb,
+      ml,
+      mr,
+      flexDirection,
+      flexWrap,
+      flexShrink,
+      flexGrow,
+      alignItems,
+      justifyContent,
+      bg,
+      border,
+      borderRadius,
+      boxShadow,
+      opacity,
+      overflow,
+      transition,
+      ...props
+    },
+    ref
+  ) =>
+    jsx(
+      as,
+      {
+        ...props,
+        css: createThemedStyle({
+          as,
+          __baseCSS,
+          variant,
+          css,
+          styles: {
+            display,
+            height,
+            width,
+            minWidth,
+            maxWidth,
+            position,
+            top,
+            bottom,
+            right,
+            left,
+            zIndex,
+            p,
+            px,
+            py,
+            pt,
+            pb,
+            pl,
+            pr,
+            m,
+            mx,
+            my,
+            mt,
+            mb,
+            ml,
+            mr,
+            flexDirection,
+            flexWrap,
+            flexShrink,
+            flexGrow,
+            alignItems,
+            justifyContent,
+            bg,
+            border,
+            borderRadius,
+            boxShadow,
+            opacity,
+            overflow,
+            transition,
+          },
+        }),
+        ref,
+      },
+      children
+    )
+);

package/src/Global.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from './useTheme';
+
+import { Global } from './Global';
+
+test('applies normlaization to html and body', () => {
+  const root = render(<Global />);
+
+  const html = window.getComputedStyle(root.baseElement.parentElement!);
+  expect(html.height).toBe('100%');
+  const body = window.getComputedStyle(root.baseElement);
+  expect(body.height).toBe('100%');
+  expect(body.lineHeight).toBe('1.5');
+});
+
+test('applies global styles for body and html based on `theme.root`', () => {
+  const theme = {
+    colors: {
+      background: '#fff',
+    },
+    fonts: {
+      body: 'Inter',
+    },
+    lineHeights: {
+      body: 2.5,
+    },
+    fontWeights: {
+      body: 500,
+      html: 700,
+    },
+    root: {
+      body: {
+        fontFamily: 'body',
+        lineHeight: 'body',
+        fontWeight: 'body',
+      },
+      html: {
+        bg: 'background',
+      },
+    },
+  };
+
+  const root = render(
+    <ThemeProvider theme={theme}>
+      <Global />
+    </ThemeProvider>
+  );
+
+  const html = root.baseElement.parentElement;
+  expect(html).toHaveStyle(`background: ${theme.colors.background}`);
+
+  const body = root.baseElement;
+  expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
+  expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
+  expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
+});

package/src/Global.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Global as EmotionGlobal } from '@emotion/react';
+import { useTheme } from './useTheme';
+
+/**
+ * CSS snippet and idea from:
+ * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
+ */
+const reduceMotionStyles = {
+  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
+    '*': {
+      animationDuration: '0.001ms !important',
+      animationIterationCount: '1 !important',
+      transitionDuration: '0.001ms !important',
+    },
+  },
+};
+
+export const Global = () => {
+  const { css } = useTheme();
+  const styles = css({
+    html: {
+      height: '100%',
+      variant: 'root.html',
+    },
+    body: {
+      height: '100%',
+      lineHeight: 1.5,
+      WebkitFontSmoothing: 'antialiased',
+      variant: 'root.body',
+    },
+  });
+  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;
+};

package/src/SVG.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { SVG } from './SVG';
+
+export default {
+  title: 'Components/SVG',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'icon',
+        },
+      },
+    },
+    size: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 96,
+        step: 2,
+      },
+      table: {
+        defaultValue: {
+          summary: 24,
+        },
+      },
+    },
+    fill: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'currentColor',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof SVG> = args => (
+  <SVG {...args}>
+    <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
+  </SVG>
+);

package/src/SVG.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SVG } from './SVG';
+
+test('renders svg', () => {
+  render(<SVG data-testid="svg" />);
+  const svg = screen.getByTestId('svg');
+  expect(svg instanceof SVGElement).toBeTruthy();
+});
+
+test('normalizes <svg>', () => {
+  render(<SVG data-testid="svg" />);
+  const svg = screen.getByTestId('svg');
+  expect(svg).toHaveStyle('display: block');
+  expect(svg).toHaveStyle('max-width: 100%');
+});
+
+test('supports default fill color', () => {
+  render(
+    <SVG data-testid="svg">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('fill')).toEqual('currentcolor');
+});
+
+test('supports default size', () => {
+  render(
+    <SVG data-testid="svg">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('width')).toEqual('24');
+});
+
+test('supports size prop', () => {
+  render(
+    <SVG data-testid="svg" size={30}>
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('width')).toEqual('30');
+});
+
+test('supports fill prop', () => {
+  render(
+    <SVG data-testid="svg" fill="#fafafa">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('fill')).toEqual('#fafafa');
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <SVG data-testid="svg" className="custom-class-name">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('class')).toMatch(/custom-class-name/);
+});
+
+test('renders <svg> element', () => {
+  render(
+    <SVG data-testid="svg">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg instanceof SVGElement).toBeTruthy();
+});

package/src/SVG.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ComponentProps } from '@marigold/types';
+import { getNormalizedStyles } from '@marigold/system';
+
+const css = getNormalizedStyles('svg');
+
+export type SVGProps = {
+  size?: number;
+} & ComponentProps<'svg'>;
+
+export const SVG: React.FC<SVGProps> = ({ size = 24, children, ...props }) =>
+  jsx(
+    'svg',
+    {
+      width: size,
+      height: size,
+      viewBox: '0 0 24 24',
+      fill: 'currentcolor',
+      ...props,
+      css,
+    },
+    children
+  );

package/src/index.ts

@@ -1,6 +1,8 @@
-export * from './Element';
-export * from './cache';
+export * from './Box';
+export * from './Global';
+export * from './normalize';
+export * from './SVG';
+export * from './theme';
 export * from './types';
-export * from './useClassname';
-export * from './useStyles';
 export * from './useTheme';
+export * from './variant';

package/src/normalize.test.tsx

@@ -1,42 +1,15 @@
-import { getNormalizedStyles } from './normalize';
+import { normalize, getNormalizedStyles } from './normalize';
 
-test('get base styles', () => {
-  const baseStyles = getNormalizedStyles('base');
-  expect(baseStyles).toEqual({
-    boxSizing: 'border-box',
-    margin: 0,
-    padding: 0,
-    minWidth: 0,
-    fontSize: '100%',
-    fontFamily: 'inherit',
-    verticalAlign: 'baseline',
-    WebkitTapHighlightColor: 'transparent',
-  });
+test.each(Object.entries(normalize))('base is included in %p', (_, value) => {
+  expect(value).toMatchObject(normalize.base);
 });
 
-test('get reset style by element', () => {
-  const baseStyles = getNormalizedStyles('a');
-  expect(baseStyles).toEqual({
-    textDecoration: 'none',
-    touchAction: 'manipulation',
-  });
+test('get normalized styles', () => {
+  expect(getNormalizedStyles('a')).toMatchObject(normalize.a);
+  expect(getNormalizedStyles('p')).toMatchObject(normalize.p);
 });
 
-test('getNormalizedStyles returns base if input is not a string', () => {
-  const baseStyles = getNormalizedStyles(undefined);
-  expect(baseStyles).toEqual({
-    boxSizing: 'border-box',
-    margin: 0,
-    padding: 0,
-    minWidth: 0,
-    fontSize: '100%',
-    fontFamily: 'inherit',
-    verticalAlign: 'baseline',
-    WebkitTapHighlightColor: 'transparent',
-  });
-});
-
-test('getNormalizedStyles returns empty object if input is unknown', () => {
-  const baseStyles = getNormalizedStyles('p');
-  expect(baseStyles).toEqual({});
+test('return base normalzation for arbitrary components', () => {
+  const Component = () => null;
+  expect(getNormalizedStyles(Component)).toMatchObject(normalize.base);
 });

package/src/normalize.ts

@@ -1,131 +1,100 @@
+/**
+ * Normalize styling of certain elements between browsers.
+ * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ */
 import { ElementType } from 'react';
 
 const base = {
   boxSizing: 'border-box',
   margin: 0,
-  padding: 0,
   minWidth: 0,
-  fontSize: '100%',
-  fontFamily: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent',
-} as const;
-
-// Content
-// ---------------
-const block = {
-  display: 'block',
-} as const;
-
-const list = {
-  // empty
-} as const;
-
-const table = {
-  borderCollapse: 'collapse',
-  borderSpacing: 0,
 } as const;
 
-// Typography
-// ---------------
 const a = {
+  ...base,
   textDecoration: 'none',
-  touchAction: 'manipulation',
 } as const;
 
-const quote = {
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''",
-    },
-  },
+const text = {
+  ...base,
+  overflowWrap: 'break-word',
+} as const;
+
+const media = {
+  ...base,
+  display: 'block',
+  maxWidth: '100%',
 } as const;
 
-// Form Elements
-// ---------------
 const button = {
+  ...base,
   display: 'block',
   appearance: 'none',
+  font: 'inherit',
   background: 'transparent',
   textAlign: 'center',
-  touchAction: 'manipulation',
 } as const;
 
 const input = {
+  ...base,
   display: 'block',
   appearance: 'none',
-  selectors: {
-    '&::-ms-clear': {
-      display: 'none',
-    },
-    '&::-webkit-search-cancel-button': {
-      WebkitAppearance: 'none',
-    },
+  font: 'inherit',
+  '&::-ms-clear': {
+    display: 'none',
+  },
+  '&::-webkit-search-cancel-button': {
+    WebkitAppearance: 'none',
   },
 } as const;
 
 const select = {
+  ...base,
   display: 'block',
   appearance: 'none',
-  selectors: {
-    '&::-ms-expand': {
-      display: 'none',
-    },
+  font: 'inherit',
+  '&::-ms-expand': {
+    display: 'none',
   },
 } as const;
 
 const textarea = {
+  ...base,
   display: 'block',
   appearance: 'none',
+  font: 'inherit',
 } as const;
 
-// Reset
+// Normalize
 // ---------------
-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,
+export const normalize = {
   base,
-  table,
+  a,
+  p: text,
+  h1: text,
+  h2: text,
+  h3: text,
+  h4: text,
+  h5: text,
+  h6: text,
+  img: media,
+  picture: media,
+  video: media,
+  canvas: media,
+  svg: media,
   select,
   button,
   textarea,
   input,
 } as const;
 
-export type NormalizedElement = keyof typeof reset;
-const isKnownElement = (input: string): input is NormalizedElement =>
-  input in reset;
+export type NormalizedElement = keyof typeof normalize;
 
 /**
- * Helper to conveniently get reset styles.
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
  */
-export const getNormalizedStyles = (input?: ElementType): object => {
-  /**
-   * If a React component is given, we don't apply any reset styles
-   * and return the base reset.
-   */
-  if (typeof input !== 'string') {
-    return reset.base;
-  }
-
-  /**
-   * Try to find the reset style for a HTML element. If the element
-   * is not included return empty styles.
-   */
-  return isKnownElement(input) ? reset[input] : {};
-};
+export const getNormalizedStyles = (val?: ElementType) =>
+  typeof val === 'string' && val in normalize
+    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly
+    : normalize.base;