@marigold/system 0.0.3 → 0.3.1

package/dist/theme.d.ts

@@ -0,0 +1,136 @@
+import * as CSS from 'csstype';
+import { NestedScaleDict } from '@theme-ui/css';
+/**
+ * Value used to define a scale.
+ *
+ * Can be nested to support a default value.
+ *
+ * @example
+ * Given a theme
+ * ```
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * ```
+ * `css{{ color: 'primary' }}` resolves to `color: #00f`.
+ */
+export declare type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
+/**
+ * Scales are a set of named, pre-defined CSS values which are used
+ * to create consitency in sizing across visual elements. They give
+ * plain values semantics meaning.
+ *
+ * Marigold uses a plain object to define scales, where the key should be a
+ * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
+ * and the value is the CSS value.
+ */
+export declare type Scale<T> = {
+    [key: string]: ScaleValue<T>;
+};
+/**
+ * Predefined {@link Scale} scale which uses size values.
+ */
+export declare type SizeScale<T> = {
+    xxsmall?: ScaleValue<T>;
+    xsmall?: ScaleValue<T>;
+    small?: ScaleValue<T>;
+    medium?: ScaleValue<T>;
+    large?: ScaleValue<T>;
+    xlarge?: ScaleValue<T>;
+    xxlarge?: ScaleValue<T>;
+};
+/**
+ * A {@link SizeScale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+export declare type ZeroScale<T> = {
+    none: ScaleValue<T>;
+} & Scale<T>;
+/**
+ * Base theme with typings for available scales properties.
+ */
+export interface Theme {
+    /**
+     * To configure the default breakpoints used in responsive array values,
+     * add a breakpoints array to your theme.
+     *
+     * Each breakpoint should be a string  with a CSS length unit included or a
+     * string including a CSS media query. String values with a CSS length unit
+     * will be used to generate a mobile-first (i.e. min-width) media query.
+     *
+     * @example
+     * ```ts
+     * {
+     *   breakpoints: [
+     *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+     *   ],
+     * }
+     * ```
+     */
+    breakpoints?: Array<string>;
+    colors?: Scale<CSS.Property.Color | NestedScaleDict<CSS.Property.Color>>;
+    /**
+     * Used to define a scale for whitspace values,
+     * like `padding`, `margin`, `gap`, etc.
+     */
+    space?: ZeroScale<CSS.Property.Margin<number | string>>;
+    /**
+     * Used to define a `font-size` scale.
+     */
+    fontSizes?: Scale<CSS.Property.FontSize<number>>;
+    /**
+     * Used to define a `font-family` scale.
+     */
+    fonts?: Scale<CSS.Property.FontFamily>;
+    /**
+     * Used to define a `font-weight` scale.
+     */
+    fontWeights?: Scale<CSS.Property.FontWeight>;
+    /**
+     * Used to define a `line-height` scale.
+     */
+    lineHeights?: Scale<CSS.Property.LineHeight<string | 0 | number>>;
+    /**
+     * Used to define a `letter-spacing` scale.
+     */
+    letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+    /**
+     * Used to define a scale for size values,
+     * like `height`, `width`, `flexBasis`, etc.
+     */
+    sizes?: ZeroScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+    /**
+     * Used to define different `border` styles.
+     */
+    borders?: ZeroScale<CSS.Property.Border<{}>>;
+    /**
+     * Used to define `border-style` styles.
+     */
+    borderStyles?: Scale<CSS.Property.Border<{}>>;
+    /**
+     * Used to define `border-width` styles.
+     */
+    borderWidths?: ZeroScale<CSS.Property.BorderWidth<string | 0 | number>>;
+    /**
+     * Used to define `border-radius` styles.
+     */
+    radii?: ZeroScale<CSS.Property.BorderRadius<string | 0 | number>>;
+    /**
+     * Used to define `Shadow` styles.
+     */
+    shadows?: ZeroScale<CSS.Property.BoxShadow>;
+    /**
+     * Used to define a `z-index` scake.
+     */
+    zIndices?: Scale<CSS.Property.ZIndex>;
+    /**
+     * Used to define a `opacity` scale.
+     */
+    opacities?: Scale<CSS.Property.Opacity>;
+    /**
+     * Used to define a `transition` styles.
+     */
+    transitions?: ZeroScale<CSS.Property.Transition>;
+}

package/dist/types.d.ts

@@ -1,9 +1,8 @@
 /**
  * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
  */
-import { Theme as ThemeUITheme, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties } from '@theme-ui/css';
-export { ResponsiveStyleValue } from '@theme-ui/css';
+import { ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, ResponsiveStyleValue as RSV } from '@theme-ui/css';
+export declare type ResponsiveStyleValue<T> = RSV<T>;
 export declare type StyleObject = ThemeUIStyleObject;
 export declare type CSSObject = ThemeUICSSObject;
 export declare type CSSProperties = ThemeUICSSProperties;
-export declare type Theme = ThemeUITheme;

package/dist/useTheme.d.ts

@@ -1,6 +1,16 @@
-import React from 'react';
-export declare const useTheme: () => any;
-export declare type ThemeProviderProps = {
-    theme: any;
+import { ReactNode } from 'react';
+import { Theme } from './theme';
+import { StyleObject } from './types';
+/**
+ * @internal
+ */
+export declare const __defaultTheme: Theme;
+export declare const useTheme: () => {
+    theme: Theme;
+    css: (style: StyleObject) => import("@theme-ui/css").CSSObject;
 };
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare type ThemeProviderProps<T extends Theme> = {
+    theme: T;
+    children: ReactNode;
+};
+export declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;

package/dist/variant.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+export declare const ensureArray: <T>(val?: T | T[] | undefined) => T[];
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+export declare const ensureVariantDefault: (val: string) => string;
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+export declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
+export declare type State = {
+    checked?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+};
+/**
+ * Appends given `state` to a `variant`.
+ */
+export declare const appendVariantState: (variant: string, state: keyof State) => string;
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+export declare const conditional: (variant: string, { disabled, ...states }: State) => string[];

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@marigold/system",
-  "version": "0.0.3",
+  "version": "0.3.1",
   "description": "Marigold System Library",
   "main": "dist/index.js",
   "module": "dist/system.esm.js",
   "typings": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@emotion/css": "11.1.3",
-    "@theme-ui/css": "0.9.1"
+    "@emotion/react": "11.7.1",
+    "@theme-ui/css": "0.13.1",
+    "csstype": "3.0.10"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.0.0",
     "react-dom": "^16.x || ^17.0.0"
   },
-  "devDependencies": {
-    "csstype": "3.0.8"
-  },
   "scripts": {
     "build": "tsdx build --tsconfig tsconfig.build.json --transpileOnly",
     "watch": "tsdx watch --tsconfig tsconfig.build.json --transpileOnly"

package/src/Box.test.tsx

@@ -0,0 +1,308 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from './useTheme';
+import { Box, StyleProps } from './Box';
+import { normalize } from './normalize';
+
+const theme = {
+  colors: {
+    primary: 'black',
+    secondary: 'hotpink',
+    black: '#000',
+    white: '#fff',
+    blue: 'cornflowerblue',
+  },
+  fontSizes: {
+    body: 16,
+    small: 12,
+    large: 24,
+  },
+  space: {
+    none: 0,
+    xsmall: 2,
+    small: 4,
+    medium: 8,
+    large: 16,
+  },
+  sizes: {
+    none: 0,
+    small: 8,
+    medium: 16,
+    large: 32,
+  },
+  borders: { none: 'none', regular: '1px solid black' },
+  radii: { none: 0, small: 2, medium: 4 },
+  opacities: {
+    hidden: 0,
+    faded: 0.5,
+    visible: 1,
+  },
+  transitions: { none: 'none', regular: '1s opacity' },
+  shadows: {
+    none: 'none',
+    regular: '3px 3px 5px 6px #ccc',
+    inset: 'inset 0 0 10px #000000',
+  },
+  text: {
+    body: {
+      fontSize: 'body',
+      color: 'primary',
+      bg: 'white',
+    },
+    headline1: {
+      fontSize: 'large',
+      color: 'secondary',
+    },
+    whitespace: {
+      p: 'medium',
+    },
+  },
+  variant: {
+    spacing: {
+      m: 'large',
+      p: 'large',
+    },
+  },
+};
+
+test('renders a <div> by default', () => {
+  render(<Box>Test</Box>);
+  const testelem = screen.getByText('Test');
+
+  expect(testelem instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('changes rendered element via "as" prop', () => {
+  render(<Box as="p">Test</Box>);
+  const testelem = screen.getByText('Test');
+
+  expect(testelem instanceof HTMLParagraphElement).toBeTruthy();
+});
+
+test('supports custom className', () => {
+  render(<Box className="my-custom-class">Test</Box>);
+  const element = screen.getByText('Test');
+
+  expect(element.getAttribute('class')).toMatch('my-custom-class');
+});
+
+test('passes down HTML attributes', () => {
+  render(
+    <Box className="my-custom-class" id="element-id" disabled>
+      Test
+    </Box>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element.getAttribute('id')).toEqual('element-id');
+  expect(element.getAttribute('disabled')).toMatch('');
+});
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLButtonElement>();
+  render(
+    <Box as="button" ref={ref}>
+      button
+    </Box>
+  );
+
+  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
+});
+
+test('apply normalized styles', () => {
+  render(<Box>Test</Box>);
+  const element = screen.getByText('Test');
+  const { base } = normalize;
+
+  // Smoketest
+  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
+  expect(element).toHaveStyle(`margin: ${base.margin}px`);
+  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
+});
+
+test('base normalization is always applied', () => {
+  render(<Box as="button">Test</Box>);
+  const element = screen.getByText('Test');
+  const { base } = normalize;
+
+  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
+  expect(element).toHaveStyle(`margin: ${base.margin}px`);
+  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
+});
+
+test('apply normalized styles based on element', () => {
+  render(<Box as="h1">Test</Box>);
+  const element = screen.getByText('Test');
+  const { h1 } = normalize;
+
+  expect(element).toHaveStyle(`overflow-wrap: ${h1.overflowWrap}`);
+});
+
+test('accepts default styling via "__baseCSS" prop', () => {
+  render(<Box __baseCSS={{ color: 'hotpink' }}>Test</Box>);
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle('color: hotpink');
+});
+
+test('default styling overrides normalization', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box __baseCSS={{ m: 'medium' }}>Test</Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.medium}px`);
+});
+
+test('variants are applied correctly', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box variant="text.body">Test</Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.body}px`);
+  expect(element).toHaveStyle(`color: ${theme.colors.primary}`);
+});
+
+test('accept an array of variants', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box as="p" variant={['text.headline1', 'text.whitespace']}>
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.large}px`);
+  expect(element).toHaveStyle(`color: ${theme.colors.secondary}`);
+  expect(element).toHaveStyle(`padding: ${theme.space.medium}px`);
+});
+
+test('variants override normalization and default styles', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box __baseCSS={{ p: 'small' }} variant="variant.spacing">
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.large}px`);
+  expect(element).toHaveStyle(`padding: ${theme.space.large}px`);
+});
+
+test.each([
+  [{ display: 'flex' }, 'display: flex'],
+  [{ height: 'small' }, 'height: 8px'],
+  [{ width: 'medium' }, 'width: 16px'],
+  [{ minWidth: 'small' }, 'min-width: 8px'],
+  [{ maxWidth: 'large' }, 'max-width: 32px'],
+  [{ position: 'absolute' }, 'position: absolute'],
+  [{ top: 'none' }, 'top: 0px'],
+  [{ bottom: 'xsmall' }, 'bottom: 2px'],
+  [{ right: 'medium' }, 'right: 8px'],
+  [{ left: 'small' }, 'left: 4px'],
+  [{ zIndex: 1000 }, 'z-index: 1000'],
+  [{ p: 'xsmall' }, 'padding: 2px'],
+  [{ px: 'xsmall' }, 'padding-left: 2px', 'padding-right: 2px'],
+  [{ py: 'small' }, 'padding-top: 4px', 'padding-bottom: 4px'],
+  [{ pt: 'xsmall' }, 'padding-top: 2px'],
+  [{ pb: 'xsmall' }, 'padding-bottom: 2px'],
+  [{ pl: 'xsmall' }, 'padding-left: 2px'],
+  [{ pr: 'xsmall' }, 'padding-right: 2px'],
+  [{ m: 'xsmall' }, 'margin: 2px'],
+  [{ mx: 'xsmall' }, 'margin-left: 2px', 'margin-right: 2px'],
+  [{ my: 'small' }, 'margin-top: 4px', 'margin-bottom: 4px'],
+  [{ mt: 'xsmall' }, 'margin-top: 2px'],
+  [{ mb: 'xsmall' }, 'margin-bottom: 2px'],
+  [{ ml: 'xsmall' }, 'margin-left: 2px'],
+  [{ mr: 'xsmall' }, 'margin-right: 2px'],
+  [{ flexDirection: 'column' }, 'flex-direction: column'],
+  [{ flexWrap: 'wrap' }, 'flex-wrap: wrap'],
+  [{ flexShrink: 5 }, 'flex-shrink: 5'],
+  [{ flexGrow: 1 }, 'flex-grow: 1'],
+  [{ alignItems: 'baseline' }, 'align-items: baseline'],
+  [{ justifyContent: 'space-between' }, 'justify-content: space-between'],
+  [{ bg: 'secondary' }, 'background-color: hotpink'],
+  [{ border: 'regular' }, 'border: 1px solid black'],
+  [{ borderRadius: 'medium' }, 'border-radius: 4px'],
+  [{ boxShadow: 'regular' }, 'box-shadow: 3px 3px 5px 6px #ccc'],
+  [{ opacity: 'faded' }, 'opacity: 0.5'],
+  [{ overflow: 'hidden' }, 'overflow: hidden'],
+  [{ transition: 'regular' }, 'transition: 1s opacity'],
+])('supports style prop (%o)', (...args) => {
+  const props = args.shift() as StyleProps;
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Box {...props}>What's in the box!</Box>
+    </ThemeProvider>
+  );
+
+  const box = screen.getByText(`What's in the box!`);
+  args.forEach((style: any) => {
+    expect(box).toHaveStyle(style);
+  });
+});
+
+test('style props override normalization, defaults and variants', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box
+        __baseCSS={{ p: 'small' }}
+        variant="text.body"
+        bg="blue"
+        m="medium"
+        p="large"
+      >
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.medium}px`); // overrides normalization
+  expect(element).toHaveStyle(`padding: ${theme.space.large}px`); // overrides default
+  expect(element).toHaveStyle(`background: ${theme.colors.blue}`); // overrides variant
+});
+
+test('apply custom styling via css prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box css={{ color: 'secondary', padding: '1rem' }}>Test</Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`padding: 1rem`);
+  expect(element).toHaveStyle(`color: ${theme.colors.secondary}`);
+});
+
+test('custom styling overrides normalization, defaults, variants and style props', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box
+        __baseCSS={{ p: 'small' }}
+        variant="text.body"
+        bg="black"
+        css={{ fontSize: 'large', m: 'small', p: 'large', bg: 'blue' }}
+      >
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.small}px`); // overrides normalization
+  expect(element).toHaveStyle(`padding: ${theme.space.large}px`); // overrides default
+  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.large}px`); // overrides variant
+  expect(element).toHaveStyle(`background: ${theme.colors.blue}`); // overrides style prop
+
+  expect(element).not.toHaveStyle(`color: ${theme.colors.primary}px`); // variant part that is not overriden
+});