@marigold/system 0.3.3 → 0.4.0

package/src/SVG.test.tsx

@@ -1,82 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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,8 +0,0 @@
-export * from './Box';
-export * from './Global';
-export * from './normalize';
-export * from './SVG';
-export * from './theme';
-export * from './types';
-export * from './useTheme';
-export * from './variant';

package/src/normalize.test.tsx

@@ -1,15 +0,0 @@
-import { normalize, getNormalizedStyles } from './normalize';
-
-test.each(Object.entries(normalize))('base is included in %p', (_, value) => {
-  expect(value).toMatchObject(normalize.base);
-});
-
-test('get normalized styles', () => {
-  expect(getNormalizedStyles('a')).toMatchObject(normalize.a);
-  expect(getNormalizedStyles('p')).toMatchObject(normalize.p);
-});
-
-test('return base normalzation for arbitrary components', () => {
-  const Component = () => null;
-  expect(getNormalizedStyles(Component)).toMatchObject(normalize.base);
-});

package/src/normalize.ts

@@ -1,100 +0,0 @@
-/**
- * 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,
-  minWidth: 0,
-} as const;
-
-const a = {
-  ...base,
-  textDecoration: 'none',
-} as const;
-
-const text = {
-  ...base,
-  overflowWrap: 'break-word',
-} as const;
-
-const media = {
-  ...base,
-  display: 'block',
-  maxWidth: '100%',
-} as const;
-
-const button = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  background: 'transparent',
-  textAlign: 'center',
-} as const;
-
-const input = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  '&::-ms-clear': {
-    display: 'none',
-  },
-  '&::-webkit-search-cancel-button': {
-    WebkitAppearance: 'none',
-  },
-} as const;
-
-const select = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  '&::-ms-expand': {
-    display: 'none',
-  },
-} as const;
-
-const textarea = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-} as const;
-
-// Normalize
-// ---------------
-export const normalize = {
-  base,
-  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 normalize;
-
-/**
- * Type-safe helper to get normalization. If no normalization is found,
- * returns the *base* normalization.
- */
-export const getNormalizedStyles = (val?: ElementType) =>
-  typeof val === 'string' && val in normalize
-    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly
-    : normalize.base;

package/src/theme.ts

@@ -1,157 +0,0 @@
-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 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 type Scale<T> = {
-  [key: string]: ScaleValue<T>;
-};
-
-/**
- * Predefined {@link Scale} scale which uses size values.
- */
-export 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 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/src/types.ts

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

package/src/useTheme.test.tsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
-import { render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
-
-import { ThemeProvider, useTheme } from './useTheme';
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    primary: 'hotpink',
-    black: '#000',
-  },
-  space: {
-    none: 0,
-    small: 16,
-    medium: 24,
-    large: 32,
-  },
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-    },
-    heading: {
-      fontSize: 3,
-      color: 'primary',
-    },
-  },
-};
-
-const wrapper: React.FC = ({ children }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-);
-
-test('returns the theme', () => {
-  const { result } = renderHook(() => useTheme(), { wrapper });
-  expect(result.current.theme).toEqual(theme);
-});
-
-test('returns a "css" function', () => {
-  const { result } = renderHook(() => useTheme(), { wrapper });
-  expect(result.current.css).toEqual(expect.any(Function));
-});
-
-test('transpile style object to css object', () => {
-  const { result } = renderHook(() => useTheme(), { wrapper });
-  const css = result.current.css;
-
-  expect(css({ p: 'small' })).toMatchInlineSnapshot(`
-    {
-      "padding": 16,
-    }
-  `);
-  expect(css({ color: 'primary', p: 'large' })).toMatchInlineSnapshot(`
-    {
-      "color": "hotpink",
-      "padding": 32,
-    }
-  `);
-  expect(css({ variant: 'text.body' })).toMatchInlineSnapshot(`
-    {
-      "color": "#000",
-      "fontSize": 14,
-    }
-  `);
-});
-
-test('themes can be cascaded', () => {
-  const outerTheme = {
-    colors: {
-      primary: 'coral',
-    },
-  };
-
-  const innerTheme = {
-    colors: {
-      primary: 'gainsboro',
-    },
-  };
-
-  const Theme = ({ testId }: { testId: string }) => {
-    const { theme } = useTheme();
-    return <div data-testid={testId}>{JSON.stringify(theme, null, 2)}</div>;
-  };
-
-  render(
-    <ThemeProvider theme={outerTheme}>
-      <>
-        <Theme testId="outer" />
-        <ThemeProvider theme={innerTheme}>
-          <Theme testId="inner" />
-        </ThemeProvider>
-      </>
-    </ThemeProvider>
-  );
-
-  const outer = screen.getByTestId('outer');
-  const inner = screen.getByTestId('inner');
-
-  expect(outer.innerHTML).toMatchInlineSnapshot(`
-    "{
-      \\"colors\\": {
-        \\"primary\\": \\"coral\\"
-      }
-    }"
-  `);
-  expect(inner.innerHTML).toMatchInlineSnapshot(`
-    "{
-      \\"colors\\": {
-        \\"primary\\": \\"gainsboro\\"
-      }
-    }"
-  `);
-});
-
-test('theme is passed down to emotion', () => {
-  const css = jest.fn().mockReturnValue({});
-  render(<ThemeProvider theme={theme}>{jsx('div', { css })}</ThemeProvider>);
-
-  expect(css).toHaveBeenCalledWith(theme);
-});

package/src/useTheme.tsx

@@ -1,50 +0,0 @@
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-} from 'react';
-import { css as transformStyleObject } from '@theme-ui/css';
-import { ThemeProvider as EmotionProvider } from '@emotion/react';
-
-import { Theme } from './theme';
-import { StyleObject } from './types';
-
-/**
- * @internal
- */
-export const __defaultTheme: Theme = {};
-
-const InternalContext = createContext<Theme>(__defaultTheme);
-
-export const useTheme = () => {
-  const theme = useContext(InternalContext);
-  /**
-   * We cast the theme here to `any` since our subset is not
-   * compatible with the typings of `theme-ui`, since they
-   * also support arrays as scale values, while we don't.
-   */
-  const css = useCallback(
-    (style: StyleObject) => transformStyleObject(style)(theme as any),
-    [theme]
-  );
-  return { theme, css };
-};
-
-export type ThemeProviderProps<T extends Theme> = {
-  theme: T;
-  children: ReactNode;
-};
-
-export function ThemeProvider<T extends Theme>({
-  theme,
-  children,
-}: ThemeProviderProps<T>) {
-  return (
-    <EmotionProvider theme={theme}>
-      <InternalContext.Provider value={theme}>
-        {children}
-      </InternalContext.Provider>
-    </EmotionProvider>
-  );
-}

package/src/variant.test.ts

@@ -1,93 +0,0 @@
-import {
-  appendVariantState,
-  conditional,
-  ensureArray,
-  ensureArrayVariant,
-  ensureVariantDefault,
-} from './variant';
-
-test('ensure array', () => {
-  expect(ensureArray('foo')).toEqual(['foo']);
-  expect(ensureArray(['foo'])).toEqual(['foo']);
-  expect(ensureArray(['foo', 'bar'])).toEqual(['foo', 'bar']);
-  expect(ensureArray(null)).toEqual([]);
-  expect(ensureArray(undefined)).toEqual([]);
-});
-
-test('ensure variant default', () => {
-  expect(ensureVariantDefault('foo.')).toEqual('foo');
-  expect(ensureVariantDefault('foo')).toEqual('foo');
-});
-
-test('ensure array of variants', () => {
-  expect(ensureArrayVariant('foo')).toEqual(['foo']);
-  expect(ensureArrayVariant(['foo'])).toEqual(['foo']);
-  expect(ensureArrayVariant(['foo', 'bar'])).toEqual(['foo', 'bar']);
-  expect(ensureArrayVariant(undefined)).toEqual([]);
-});
-
-test('append variant state', () => {
-  expect(appendVariantState('foo', 'checked')).toEqual('foo.:checked');
-  expect(appendVariantState('foo', 'focus')).toEqual('foo.:focus');
-  expect(appendVariantState('foo', 'disabled')).toEqual('foo.:disabled');
-});
-
-test('conditional variants', () => {
-  expect(
-    conditional('foo', {
-      checked: true,
-    })
-  ).toMatchInlineSnapshot(`
-    [
-      "foo",
-      "foo.:checked",
-    ]
-  `);
-
-  expect(
-    conditional('foo', {
-      checked: true,
-      focus: true,
-      disabled: true,
-    })
-  ).toMatchInlineSnapshot(`
-    [
-      "foo",
-      "foo.:checked",
-      "foo.:focus",
-      "foo.:disabled",
-    ]
-  `);
-
-  expect(
-    conditional('foo', {
-      checked: true,
-      focus: false,
-      disabled: true,
-    })
-  ).toMatchInlineSnapshot(`
-    [
-      "foo",
-      "foo.:checked",
-      "foo.:disabled",
-    ]
-  `);
-});
-
-test('disabled is always last state variant', () => {
-  const one = conditional('foo', {
-    disabled: true,
-    checked: true,
-    focus: true,
-  });
-
-  expect(one[one.length - 1]).toMatchInlineSnapshot(`"foo.:disabled"`);
-
-  const two = conditional('foo', {
-    checked: true,
-    disabled: true,
-    focus: true,
-  });
-
-  expect(two[two.length - 1]).toMatchInlineSnapshot(`"foo.:disabled"`);
-});