@marigold/system 0.0.1 → 0.2.0

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/src/Box/Box.stories.mdx

@@ -1,148 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Box } from './Box';
-import { Label, Button } from '@marigold/components';
-
-<Meta title="Components/Box Component" />
-
-# Box-Component
-
-## Description
-
-`Box` is the most abstract component on top of which all other Marigold components are build.
-The `Box` allows us to apply styling via a dedicated prop (`css`) while respecting the rules and constraints of our design system.
-Instead of exposing the underlying tools that will create CSS, the `Box` component wraps them and exposes a more React-like API to style components.
-
-### Style components
-
-The style of components is defined by three different layers that are structured hierarchically. A layer can overwrite the attributes of the previous layer.
-
-**Default styles, theme styles and style props**
-
-- **default styles**
-
-  - add default styling to a component, even without a theme
-  - should be used to achieve minimal level of consistency between browsers
-
-<Preview>
-  <Story name="label">
-    <Label variant="" htmlFor="labelId">
-      A simple Label
-    </Label>
-  </Story>
-  <Story name="button">
-    <Button>Click me!</Button>
-  </Story>
-</Preview>
-
-- **theme styles**
-
-  - style values from a specific theme can be easily used with the box
-  - the theme can overwrite the default styles
-  - in this way you can stay inside the boundaries of the design system.
-
-<Preview>
-  <Story name="label-theme-styled">
-    <Label htmlFor="labelId">A simple Label</Label>
-  </Story>
-  <Story name="button-theme-styled">
-    <Button variant="primary.large">Click me!</Button>
-  </Story>
-</Preview>
-
-- **style props**
-
-  - style props can be used to add and modify component styles beyond the boundaries of the design system
-
-<Preview>
-  <Story name="label-css-styled">
-    <Label
-      htmlFor="labelId"
-      css={{ px: 64, fontSize: '24px', letterSpacing: '8px' }}
-    >
-      A simple Label
-    </Label>
-  </Story>
-  <Story name="button-css-styled">
-    <Button variant="primary.large" css={{ letterSpacing: '8px' }}>
-      Click me!
-    </Button>
-  </Story>
-</Preview>
-
-> Staying inside the boundaries of the design system and its contraints should be the norm. But limiting styling only to allowed values defined by the system can be very restrictive up to a point where the design system becomes an obstacle. This is why there is a an escape hatch for when it is absolutely necessary to apply styling from a third party or style it in a way that is non-compliant with the design system.
-
-## Properties
-
-| Property       | Type                         | Default |
-| :------------- | :--------------------------- | :------ |
-| `as`           | `HTMLTag`, `ComponentType`   | `'div'` |
-| `css`          | [`css props`](#cssProps)     |         |
-| `themeSection` | `string`                     |         |
-| `variant`      | `string`                     |         |
-| `SpacingProps` | [`space props`](#spaceProps) |         |
-
-### as-Property
-
-The HTML element used for the root node. Either a string to use a DOM element or a component. By default the `Box` component will render a `<div/>`. And while this might be fine most of the time, sometimes you would rather render a `<button/>` or an `<input/>`. To allow this, the `Box` component has a special prop called `as`, which accepts an HTML tag as input.
-
-### css-Properties <a id="cssProps"></a>
-
-The `css` props let you style elements inline, using values from your theme. The css prop allows all CSS properties and the below shorthands.
-
-| Category | Prop                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `css`    | `fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color, backgroundColor, bg, margin, m, marginTop, mt, marginRight, mr, marginBottom, mb, marginLeft, ml, marginX, mx, marginY, my, padding, p, paddingTop, pt, paddingRight, pr, paddingBottom, pb, paddingLeft, pl, paddingX, px, paddingY, py, top, bottom, left, right, border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, textShadow, zIndex, width, minWidth, maxWidth, height, minHeight, maxHeight, size` |
-
-### themeSection
-
-With the `themeSection` proberty, users can define as a `string` the section from a theme which should be used. E.g. you defined in your theme explicitly colors, text or buttons with seperate styles for these elements.
-
-### variant
-
-The `variant` proberty is the next layer under themeSection. In a section like e.g. buttons there are two varaints: primary and secondary. With the variant prop you can define as a `string` a button with primary or secondary style from a theme.
-
-### Spacing Props <a id="spaceProps"></a>
-
-The `SpacingProps` are part of the style props which can be used to give your component custom css style. The values are usable with shortcuts which you can see in the Prop column. For more information click the space Doc link to Theme-Ui in the following table.
-
-| Category       | Prop                                                                                                                                                                                                                  |
-| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `SpacingProps` | `margin, m, marginTop, mt, marginRight, mr, marginBottom, mb, marginLeft, ml, marginX, mx, marginY, my, padding, p, paddingTop, pt, paddingRight, pr, paddingBottom, pb, paddingLeft, pl, paddingX, px, paddingY, py` |
-
-## Import
-
-```js
-import { Box } from '@marigold/system';
-```
-
-## Usage
-
-<Preview>
-  <Story name="div-box">
-    <Box>I am a div box!</Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="text-box">
-    <Box as="span" css={{ color: 'orange' }}>
-      I am a text box!
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="button-box">
-    <Box as="button" css={{ border: '1px solid black' }}>
-      I am a simple button!
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="h1-box">
-    <Box as="h1" css={{ color: 'blue' }}>
-      I am a blue headline!
-    </Box>
-  </Story>
-</Preview>

package/src/Box/Box.test.tsx

@@ -1,215 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeContext } from '../emotion';
-import { SpacingProps } from '../categories';
-
-import { Box } from './Box';
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    primary: 'hotpink',
-    black: '#000',
-    white: '#FFF',
-    blue: '#2980b9',
-  },
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-    },
-    heading: {
-      fontSize: 3,
-      color: 'primary',
-    },
-  },
-  buttons: {
-    primary: {
-      color: 'white',
-      bg: 'blue',
-    },
-    secondary: {
-      color: 'black',
-      bg: 'white',
-    },
-  },
-};
-
-// Tests
-// ---------------
-test('renders a <div> by default', () => {
-  render(<Box>box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('changes rendered element via as prop', () => {
-  render(<Box as="span">box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('passes down all HTML attributes', () => {
-  render(
-    <Box id="box-id" disabled>
-      box
-    </Box>
-  );
-  const box = screen.getByText(/box/);
-
-  expect(box.getAttribute('id')).toEqual('box-id');
-  expect(box.getAttribute('disabled')).toMatch('');
-});
-
-test('apply some base css styling for normalization', () => {
-  render(<Box>box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box).toHaveStyle(`box-sizing: border-box`);
-});
-
-test('forward ref', () => {
-  const ref = React.createRef<HTMLButtonElement>();
-  render(
-    <Box as="button" ref={ref}>
-      button
-    </Box>
-  );
-
-  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
-});
-
-test('apply default styling via css prop', () => {
-  const Button: React.FC = ({ children }) => (
-    <Box as="button" css={{ border: '1px solid black' }}>
-      {children}
-    </Box>
-  );
-  render(<Button>button</Button>);
-  const button = screen.getByText(/button/);
-
-  expect(button).toHaveStyle(`border: 1px solid black`);
-});
-
-test('use design tokens for scale values', () => {
-  render(<Box css={{ px: 1 }}>box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box).toHaveStyle(`padding-left: 4px`);
-  expect(box).toHaveStyle(`padding-right: 4px`);
-});
-
-test('interpolate responsive values', () => {
-  render(<Box css={{ px: [1, 2] }}>box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box).toHaveStyle(`padding-left: 4px`);
-  expect(box).toHaveStyle(`padding-right: 4px`);
-});
-
-test('support style props for spacing', () => {
-  const Button: React.FC = ({ children }) => (
-    <Box as="button" my="2">
-      {children}
-    </Box>
-  );
-  render(<Button>button</Button>);
-  const button = screen.getByText(/button/);
-
-  expect(button).toHaveStyle(`margin-top: 8px`);
-  expect(button).toHaveStyle(`margin-bottom: 8px`);
-});
-
-test('supports variants from theme', () => {
-  const Text: React.FC<{ variant?: keyof typeof theme.text }> = ({
-    variant = 'body',
-    children,
-  }) => (
-    <Box themeSection="text" variant={variant}>
-      {children}
-    </Box>
-  );
-
-  // Body Text
-  render(
-    <ThemeContext.Provider value={theme}>
-      <Text>body</Text>
-    </ThemeContext.Provider>
-  );
-  const body = screen.getByText(/body/);
-
-  expect(body).toHaveStyle(`font-size: 14px`);
-  expect(body).toHaveStyle(`color: ${theme.colors.black}`);
-
-  // Heading Text
-  render(
-    <ThemeContext.Provider value={theme}>
-      <Text variant="heading">heading</Text>
-    </ThemeContext.Provider>
-  );
-  const heading = screen.getByText(/heading/);
-
-  expect(heading).toHaveStyle(`font-size: 20px`);
-  expect(heading).toHaveStyle(`color: ${theme.colors.primary}`);
-});
-
-test('order of application: base < theme < style props', () => {
-  const Button: React.FC<
-    {
-      variant?: keyof typeof theme.buttons;
-    } & SpacingProps
-  > = ({ children, variant = 'secondary', ...props }) => (
-    <Box
-      {...props}
-      as="button"
-      themeSection="buttons"
-      variant={variant}
-      css={{
-        display: 'inline-block',
-        color: 'hotpink',
-        border: 0,
-        px: 2,
-        py: 1,
-      }}
-    >
-      {children}
-    </Box>
-  );
-
-  render(
-    <ThemeContext.Provider value={theme}>
-      <Button>button</Button>
-    </ThemeContext.Provider>
-  );
-  const button = screen.getByText(/button/);
-
-  // Added via css prop
-  expect(button).toHaveStyle(`display: inline-block`);
-  expect(button).toHaveStyle(`border: 0`);
-  expect(button).toHaveStyle(`padding-left: 8px`);
-  expect(button).toHaveStyle(`padding-right: 8px`);
-  expect(button).toHaveStyle(`padding-top: 4px`);
-  expect(button).toHaveStyle(`padding-bottom: 4px`);
-
-  // Added via variant
-  expect(button).toHaveStyle(`color: ${theme.colors.black}`); // overrides "hotpink"
-  expect(button).toHaveStyle(`background-color: ${theme.colors.white}`);
-
-  render(
-    <ThemeContext.Provider value={theme}>
-      <Button px="3" py="4">
-        variantbutton
-      </Button>
-    </ThemeContext.Provider>
-  );
-  const variantbutton = screen.getByText(/variantbutton/);
-
-  expect(variantbutton).toHaveStyle(`padding: 32px 16px 32px 16px`);
-  expect(variantbutton).not.toHaveStyle(`padding-left: 8px`);
-  expect(variantbutton).not.toHaveStyle(`padding-right: 8px`);
-  expect(variantbutton).not.toHaveStyle(`padding-top: 4px`);
-  expect(variantbutton).not.toHaveStyle(`padding-bottom: 4px`);
-});

package/src/Box/Box.tsx

@@ -1,58 +0,0 @@
-// @ts-ignore
-import { css } from '@theme-ui/css';
-import pick from 'lodash.pick';
-import { SPACE_PROPS, SpacingProps } from '../categories';
-import { jsx } from '../emotion';
-import { system } from '../system';
-
-export type BoxProps = {
-  css?: Object;
-  themeSection?: string;
-} & SpacingProps;
-
-/**
- * Props that we have to remove (because they are not valid HTML attributes)
- * and want to process (for styling the component).
- */
-const SKIP_PROPS = ['css', 'variant', 'themeSection', ...SPACE_PROPS];
-
-/**
- * Gather styling related props (css, variant, space props, ...) and put them in a
- * single `css` prop for emotion. All gathered props will be passed to `@theme-ui/css`
- * before emotion will process them. This way CSS properties will interpolated based on
- * the given theme.
- */
-const parseProps = (props: { [key: string]: any }) => {
-  const next: any = {};
-
-  // TODO: optimize loop such that the style props are picked
-  //       within the loop (and remove lodash.pick!)
-  for (let key in props) {
-    if (SKIP_PROPS.includes(key)) continue;
-    next[key] = props[key];
-  }
-
-  const styles = {
-    ...props.css,
-    ...pick(props, SPACE_PROPS),
-  };
-
-  const variant =
-    props.themeSection &&
-    props.variant &&
-    `${props.themeSection}.${props.variant}`;
-
-  next.css = (theme: any) => {
-    return [
-      { boxSizing: 'border-box', margin: 0, minWidth: 0 },
-      css(styles)(theme),
-      css({ variant })(theme),
-    ];
-  };
-
-  return next;
-};
-
-export const Box = system<BoxProps, 'div'>(
-  ({ as = 'div', children, ...props }) => jsx(as, parseProps(props), children)
-);

package/src/Box/index.ts

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

package/src/MarigoldProvider.test.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Global } from './emotion';
-import { Box } from './Box';
-import { MarigoldProvider } from './MarigoldProvider';
-
-// Mock
-// ---------------
-/**
- * We're mocking emotion's `<Global/>` here even though this will make us test
- * implementation details. This is currently the only way to test CSS and
- * media queries.
- */
-jest.mock('@emotion/core', () => {
-  const original = jest.requireActual('@emotion/core');
-  return {
-    ...original,
-    Global: jest.fn(() => null),
-  };
-});
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    black: '#111',
-  },
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-    },
-  },
-};
-
-// Tests
-// ---------------
-test('set theme context', () => {
-  const Text: React.FC<{
-    variant?: keyof typeof theme.text;
-  }> = ({ children }) => (
-    <Box themeSection="text" variant="body">
-      {children}
-    </Box>
-  );
-
-  const { getByText } = render(
-    <MarigoldProvider theme={theme}>
-      <Text>I am a body text!</Text>
-    </MarigoldProvider>
-  );
-  const element = getByText('I am a body text!');
-
-  expect(element).toHaveStyle(`color: ${theme.colors.black}`);
-  expect(element).toHaveStyle(`font-size: 14px`);
-});
-
-test('removes animation when "reduce-motion" media query is set', () => {
-  const spy = Global as jest.Mock;
-  spy.mockClear();
-
-  render(<MarigoldProvider theme={theme} />);
-  expect((Global as jest.Mock).mock.calls[0]).toMatchInlineSnapshot(`
-    Array [
-      Object {
-        "styles": Object {
-          "@media screen and (prefers-reduced-motion: reduce), (update: slow)": Object {
-            "*": Object {
-              "animationDuration": "0.001ms !important",
-              "animationIterationCount": "1 !important",
-              "transitionDuration": "0.001ms !important",
-            },
-          },
-        },
-      },
-      Object {},
-    ]
-  `);
-});

package/src/MarigoldProvider.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Global, ThemeContext } from './emotion';
-
-/**
- * CSS snippet and idea from:
- * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
- */
-const ReduceMotion = () => (
-  <Global
-    styles={{
-      '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
-        '*': {
-          animationDuration: '0.001ms !important',
-          animationIterationCount: '1 !important',
-          transitionDuration: '0.001ms !important',
-        },
-      },
-    }}
-  />
-);
-
-// TODO: change any to theme when theme component exists
-export type MarigoldProviderProps<T extends any> = React.PropsWithChildren<{
-  theme: T;
-}>;
-
-export const MarigoldProvider = <T extends any>({
-  theme,
-  children,
-}: MarigoldProviderProps<T>) => (
-  <ThemeContext.Provider value={theme}>
-    <>
-      <ReduceMotion />
-      {children}
-    </>
-  </ThemeContext.Provider>
-);