@marigold/system 0.0.2 → 0.3.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/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/useClassname.test.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { useClassname } from './useClassname';
-import { ThemeProvider } from './useTheme';
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    primary: 'hotpink',
-    black: '#000',
-  },
-  sizes: [0, 1, 2],
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-    },
-    heading: {
-      fontSize: 3,
-      color: 'primary',
-    },
-  },
-};
-
-const wrapper: React.FC = ({ children }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-);
-
-test('create a string classname', () => {
-  const { result } = renderHook(() => useClassname({ color: 'primary' }), {
-    wrapper,
-  });
-  expect(result.current).toEqual(expect.any(String));
-});
-
-test('create classnames from multiple intpus', () => {
-  const { result } = renderHook(
-    () => useClassname({ color: 'primary' }, { p: 2 }),
-    {
-      wrapper,
-    }
-  );
-  expect(result.current).toEqual(expect.any(String));
-});
-
-test('create a unique classnames', () => {
-  const { result: first } = renderHook(
-    () => useClassname({ color: 'primary' }),
-    {
-      wrapper,
-    }
-  );
-  const { result: second } = renderHook(
-    () => useClassname({ color: 'black' }),
-    {
-      wrapper,
-    }
-  );
-  expect(first.current).not.toEqual(second.current);
-});

package/src/useClassname.ts

@@ -1,8 +0,0 @@
-import { css as emotion } from 'emotion';
-import { css, ThemeUIStyleObject } from '@theme-ui/css';
-import { useTheme } from './useTheme';
-
-export const useClassname = (...styles: ThemeUIStyleObject[]) => {
-  const theme = useTheme();
-  return styles.map(style => emotion(css(style)(theme))).join(' ');
-};