@marigold/system 0.0.1 → 0.2.0

package/src/categories.ts

@@ -1,203 +0,0 @@
-import { PropertiesFallback } from 'csstype';
-
-/**
- * System categories are based on https://primer.style/components/docs/system-props
- */
-
-// Spacing
-// ---------------
-export const SPACE_PROPS = [
-  'm',
-  'margin',
-  'mt',
-  'marginTop',
-  'mr',
-  'marginRight',
-  'mb',
-  'marginBottom',
-  'ml',
-  'marginLeft',
-  'mx',
-  'marginX',
-  'my',
-  'marginY',
-  'p',
-  'padding',
-  'pt',
-  'paddingTop',
-  'pr',
-  'paddingRight',
-  'pb',
-  'paddingBottom',
-  'pl',
-  'paddingLeft',
-  'px',
-  'paddingX',
-  'py',
-  'paddingY',
-];
-
-type StandardCSSProperties = PropertiesFallback<number | string>;
-
-export 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'];
-};

package/src/emotion.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-
-/**
- * Fix until the global JSX augmentation is not included in
- * `@emotion/core`. See https://github.com/emotion-js/emotion/issues/1257
- * for more information.
- *
- * *Why is this a problem?*
- *
- * (1) Every JSX element accepts a `css` prop, but we don't parse that.
- * (2) Every JSX element only accepts a type that is compatible with emotion's
- *     css prop, which we don't care, since we first pass the `css` prop
- *     to styled-system.
- *
- * *The fix consist of two parts:*
- *
- * (1) using `.yarnclean` to remove the `emotion/core` typings completly.
- * (2) having this sink file to re-apply the typings and tell TS to ignore
- *     the untyped import.
- */
-import {
-  css as cssEmotion,
-  jsx as createElement,
-  Global as EmotionGlobal,
-  ThemeContext as EmotionContext,
-  // @ts-ignore
-} from '@emotion/core';
-
-// Emotion API
-// ---------------
-export const jsx = createElement as typeof React.createElement;
-export const css = cssEmotion as (
-  template: TemplateStringsArray,
-  ...args: any[]
-) => object;
-export const ThemeContext = EmotionContext as React.Context<any>;
-export const Global = EmotionGlobal as (
-  props: React.PropsWithChildren<{ styles: any }>
-) => React.ReactElement;

package/src/system.test.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { system } from './system';
-
-test('did we break React.forwardRef?', () => {
-  const myRef = React.createRef<HTMLElement>();
-  const Component = system<{}, 'div'>(props => <div {...props} />);
-  render(<Component ref={myRef}>I have a ref!</Component>);
-
-  expect(myRef.current).toBeInstanceOf(HTMLDivElement);
-});
-
-/**
- * The following tests are not actually testing anything, rather
- * make sure that the typings work as intended.
- *
- * If we mess something up, the typechecking will not work.
- */
-test('usage with `as` prop', () => {
-  type ComponentProps = {
-    extra: string;
-    children?: React.ReactNode | ((value?: number) => JSX.Element);
-  };
-  const Component = system<ComponentProps, 'button'>(
-    ({ as: Comp = 'button', extra, className, children, ...props }) => {
-      return (
-        <Comp {...props}>
-          {typeof children === 'function' ? children(56) : children}
-        </Comp>
-      );
-    }
-  );
-
-  /**
-   * Prop `extra` is required and button attributes allowed.
-   */
-  expect(() => {
-    render(<Component extra="prop" type="button" />);
-  }).not.toThrow();
-
-  /**
-   * Yay, the `href` attribute is allowed because we're rendering
-   * an anchor tag!
-   */
-  expect(() => {
-    render(<Component as="a" extra="required" href="example.com" />);
-  }).not.toThrow();
-
-  /**
-   * Render another component and adhere to its props. In this case
-   * the `to` prop is required by `<Link />`. Also, the `extra` prop
-   * from our original component is still required.
-   */
-  expect(() => {
-    const Link: React.FC<{ to: string; optional?: boolean }> = ({
-      to,
-      children,
-      ...props
-    }) => (
-      <a href={to} {...props}>
-        {children}
-      </a>
-    );
-
-    render(<Component as={Link} extra="extra" to="adticket.de" />);
-  }).not.toThrow();
-});
-
-test('usage of the `variant` prop', () => {
-  type ComponentProps = {};
-  const Component = system<ComponentProps, 'div'>(
-    ({ as: Comp = 'div', variant = 'basic', children, ...props }) => (
-      <Comp {...props} />
-    )
-  );
-
-  expect(() => {
-    render(<Component />);
-  }).not.toThrow();
-
-  expect(() => {
-    render(<Component variant="advanced" />);
-  }).not.toThrow();
-});

package/src/system.tsx

@@ -1,55 +0,0 @@
-/**
- * Typings are based on [Reach UI](https://github.com/reach/reach-ui/blob/4cb497f530b0f83f80c6f6f2da46ab55b1160cb6/packages/utils/src/types.tsx).
- */
-import {
-  forwardRef,
-  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 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 function system<P, T extends ElementType>(
-  render: (props: SystemProps<P, T>) => ReactElement | null
-) {
-  return forwardRef((props: any, ref) =>
-    render({ ...props, ref })
-  ) as SystemComponent<P, T>;
-}

package/src/writeComponent.stories.mdx

@@ -1,114 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-
-<Meta title="Guides/How to Write and Use Components" />
-
-# How to Write and Use Components
-
-Small guidance for creating components using the `<Box>` primitive.
-
-## API
-
-### Use the Box
-
-Use the `<Box>` primitive as a basic structure to apply styling to the element you wish to build.
-With the `as` prop you define the rendered HTML element like in the example where a `<button>` element is rendered:
-
-```tsx
-import React from 'react';
-import { Box } from '@marigold/system';
-
-<Box as="button" themeSection="buttons" variant="outlined" />;
-```
-
-### Add theme
-
-In order to add styles to your component, you have two levels to work on. The first one is using theme styles which are defined in a globally accessible theme file.
-When using the component, those styles are accessed via the `themeSection` and `variant` props.
-The theme is indicated in the `<MarigoldProvider>` in which you wrap the component when you use it. See the render method in the example below.
-In the theme, you define theme specific stylings like colors and spacings.
-
-### Add styling
-
-Add more styling to the component with style props using the `css` prop. Those styles are applied independently of your theme to all instances of the component.
-While using the component, you can override all spacing styles.
-
-### Example
-
-```tsx
-import React from 'react';
-import { Box, MarigoldProvider, system } from '@marigold/system';
-import { render } from '@testing-library/react';
-
-const theme = {
-  ...anyTheme,
-  buttons: {
-    // themeSection
-    outlined: {
-      // variant
-      border: '1px solid orange',
-      mx: 2,
-    },
-  },
-};
-// Define custom properties for your component
-type ButtonProps = {
-  kind?: 'basic' | 'other';
-  size?: 'small' | 'medium' | 'large';
-};
-
-// Specify the HTML element you want to render and merge its properties with the custom component props
-const Button = system<ButtonProps, 'button'>(
-  // Set default values for extra props
-  ({
-    as: Button = 'button',
-    kind = 'basic',
-    size = 'medium',
-    children,
-    ...props
-  }) => {
-    // Place logic here like toggle states, calculations, mappings etc.
-    return (
-      // Use theme styles and specify additional styling using the `css` prop
-      <Box
-        as={as}
-        css={{ bg: 'white' }}
-        themeSection="buttons"
-        variant="outlined"
-        {...props}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
-// Use the component: don't forget the imports!
-render(
-  <MarigoldProvider theme={theme}>
-    <Button /> // Default Button component instance
-    <Button mx={3} /> // Button component instance with custom margin that overrides
-    theme and given styles
-  </MarigoldProvider>
-);
-```
-
-A default base for all browsers is applied to all components built with the `<Box>` primitive so that all instances of the component look the same in every browser.
-
-### Folder Structure
-
-Place the file with the component in a separate folder under `packages/components/src`. Create an `index.ts` file to export the component. Write tests to show your component works as intended.
-Add documentation, usage instructions and examples in a stories file (naming convention: `Component.stories.mdx`).
-
-```
-packages
-└─── system
-|
-└─── components
-      |    index.ts
-      |    theme.ts
-      └─── src
-            └─── Button
-                  |    index.ts
-                  |    Button.tsx
-                  |    Button.test.tsx
-                  |    Button.stories.mdx
-```