@marigold/system 0.0.1 → 0.2.0

package/src/Element.test.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useStyles } from './useStyles';
+import { ThemeProvider } from './useTheme';
+import { Element } from './Element';
+
+const theme = {
+  text: {
+    body: {
+      fontSize: 1,
+      color: 'black',
+      marginTop: '2px',
+    },
+    heading: {
+      fontSize: 3,
+      color: 'primary',
+    },
+    padding: {
+      paddingTop: '2px',
+    },
+  },
+};
+
+test('renders a <div> by default', () => {
+  render(<Element>Text</Element>);
+  const testelem = screen.getByText('Text');
+
+  expect(testelem instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('supports as prop', () => {
+  render(<Element as="p">Text</Element>);
+  const testelem = screen.getByText('Text');
+
+  expect(testelem instanceof HTMLParagraphElement).toBeTruthy();
+});
+
+test('supports HTML className attribute', () => {
+  render(<Element className="my-custom-class">Text</Element>);
+  const element = screen.getByText('Text');
+
+  expect(element.getAttribute('class')).toMatch('my-custom-class');
+});
+
+test('passes down HTML attributes', () => {
+  render(
+    <Element className="my-custom-class" id="element-id" disabled>
+      Text
+    </Element>
+  );
+  const element = screen.getByText('Text');
+
+  expect(element.getAttribute('id')).toEqual('element-id');
+  expect(element.getAttribute('disabled')).toMatch('');
+  expect(element.getAttribute('class')).toMatch('my-custom-class');
+});
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLButtonElement>();
+  render(
+    <Element as="button" ref={ref}>
+      button
+    </Element>
+  );
+
+  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
+});
+
+test('base styles first', () => {
+  const { getByText } = render(<Element as="p">Text</Element>);
+  const testelem = getByText('Text');
+  const style = getComputedStyle(testelem);
+
+  expect(style.marginTop).toEqual('0px'); // 0px come from base
+});
+
+test('variant styles second', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    return (
+      <Element as="p" variant={`text.${variant}`} {...props}>
+        {children}
+      </Element>
+    );
+  };
+
+  const { getByText } = render(
+    <ThemeProvider theme={theme}>
+      <TestComponent>Text</TestComponent>
+    </ThemeProvider>
+  );
+  const testelem = getByText('Text');
+  const style = getComputedStyle(testelem);
+
+  expect(style.marginTop).not.toEqual('0px'); // 0px come from base
+  expect(style.marginBottom).toEqual('0px'); // 0px still come from base
+  expect(style.marginTop).toEqual('2px'); // 2px come from variant
+});
+
+test('array of variant styles', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    return (
+      <Element as="p" variant={[`text.${variant}`, `text.padding`]} {...props}>
+        {children}
+      </Element>
+    );
+  };
+
+  const { getByText } = render(
+    <ThemeProvider theme={theme}>
+      <TestComponent>Text</TestComponent>
+    </ThemeProvider>
+  );
+  const testelem = getByText('Text');
+  const style = getComputedStyle(testelem);
+
+  expect(style.marginTop).not.toEqual('0px'); // 0px come from base
+  expect(style.marginBottom).toEqual('0px'); // 0px still come from base
+  expect(style.marginTop).toEqual('2px'); // 2px marginTop come from variant
+  expect(style.paddingTop).toEqual('2px'); // 2px paddingTop come from variant
+});
+
+test('custom styles with css prop third', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    return (
+      <Element
+        as="p"
+        variant={`text.${variant}`}
+        css={{ marginTop: '4px' }}
+        {...props}
+      >
+        {children}
+      </Element>
+    );
+  };
+
+  const { getByText } = render(
+    <ThemeProvider theme={theme}>
+      <TestComponent>Text</TestComponent>
+    </ThemeProvider>
+  );
+  const testelem = getByText('Text');
+  const style = getComputedStyle(testelem);
+
+  expect(style.marginTop).not.toEqual('0px'); // do not apply 0px from base
+  expect(style.marginTop).not.toEqual('2px'); // do not apply 2px from variant
+  expect(style.marginTop).toEqual('4px'); // apply 4px from custom styles
+});
+
+test("don't apply the same reset multiple times", () => {
+  const Button = ({ className }: { className?: string }) => {
+    const classNames = useStyles({ element: 'button', className });
+    return (
+      <Element as="button" title="button" className={classNames}>
+        Click me!
+      </Element>
+    );
+  };
+  const Wrapper = () => <Button />;
+
+  render(<Wrapper />);
+  const button = screen.getByTitle('button');
+  const classNames = button.className.split(' ').filter(i => i.length);
+
+  // Test if applied classnames are unique
+  expect(classNames.length).toEqual([...new Set(classNames)].length);
+});
+
+test('normalize tag name <a>', () => {
+  const TestComponent: React.FC<{ variant?: 'body' }> = ({
+    variant = 'body',
+    children,
+    ...props
+  }) => {
+    return (
+      <Element as="a" variant={`text.${variant}`} {...props}>
+        {children}
+      </Element>
+    );
+  };
+
+  const { getByText } = render(
+    <ThemeProvider theme={theme}>
+      <TestComponent>Link</TestComponent>
+    </ThemeProvider>
+  );
+  const testelem = getByText('Link');
+  const style = getComputedStyle(testelem);
+
+  expect(style.boxSizing).toEqual('border-box'); // from base
+  expect(style.textDecoration).toEqual('none'); // from a
+});

package/src/Element.tsx

@@ -0,0 +1,59 @@
+import { jsx } from '@emotion/react';
+import { forwardRef } from 'react';
+import {
+  PolymorphicPropsWithRef,
+  PolymorphicComponentWithRef,
+} from '@marigold/types';
+
+import { getNormalizedStyles } from './normalize';
+import { CSSObject } from './types';
+import { useTheme } from './useTheme';
+
+export type ElementOwnProps = {
+  css?: CSSObject;
+  variant?: string | string[];
+};
+
+export type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;
+
+/**
+ * Function expression to check if there is any falsy value or empty object
+ */
+const isNotEmpty = (val: any) =>
+  !(val && Object.keys(val).length === 0 && val.constructor === Object);
+
+/**
+ * Get the normalized base styles
+ */
+const baseStyles = getNormalizedStyles('base');
+
+export const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'> =
+  forwardRef(
+    ({ as = 'div', css: styles = {}, variant, children, ...props }, ref) => {
+      const { css } = useTheme();
+
+      /**
+       * Transform variant input for `@theme-ui/css`
+       */
+      const variants = Array.isArray(variant)
+        ? variant.map(v => ({ variant: v }))
+        : [{ variant }];
+
+      return jsx(
+        as,
+        {
+          ...props,
+          ...{
+            css: [
+              baseStyles,
+              getNormalizedStyles(as),
+              ...variants.map(v => css(v)),
+              css(styles),
+            ].filter(isNotEmpty),
+          },
+          ref,
+        },
+        children
+      );
+    }
+  );

package/src/cache.ts

@@ -0,0 +1,4 @@
+/**
+ * Expose cache from emotion so we can use the same cache when doing SSR.
+ */
+export { cache } from '@emotion/css';

package/src/concepts-principles.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Guides/Concepts & Principles" />
 

package/src/index.ts

@@ -1,4 +1,6 @@
-export * from './Box';
-export * from './categories';
-export * from './MarigoldProvider';
-export * from './system';
+export * from './Element';
+export * from './cache';
+export * from './types';
+export * from './useClassname';
+export * from './useStyles';
+export * from './useTheme';

package/src/normalize.test.tsx

@@ -0,0 +1,42 @@
+import { getNormalizedStyles } from './normalize';
+
+test('get base styles', () => {
+  const baseStyles = getNormalizedStyles('base');
+  expect(baseStyles).toEqual({
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    minWidth: 0,
+    fontSize: '100%',
+    fontFamily: 'inherit',
+    verticalAlign: 'baseline',
+    WebkitTapHighlightColor: 'transparent',
+  });
+});
+
+test('get reset style by element', () => {
+  const baseStyles = getNormalizedStyles('a');
+  expect(baseStyles).toEqual({
+    textDecoration: 'none',
+    touchAction: 'manipulation',
+  });
+});
+
+test('getNormalizedStyles returns base if input is not a string', () => {
+  const baseStyles = getNormalizedStyles(undefined);
+  expect(baseStyles).toEqual({
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    minWidth: 0,
+    fontSize: '100%',
+    fontFamily: 'inherit',
+    verticalAlign: 'baseline',
+    WebkitTapHighlightColor: 'transparent',
+  });
+});
+
+test('getNormalizedStyles returns empty object if input is unknown', () => {
+  const baseStyles = getNormalizedStyles('p');
+  expect(baseStyles).toEqual({});
+});

package/src/normalize.ts

@@ -0,0 +1,131 @@
+import { ElementType } from 'react';
+
+const base = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  fontFamily: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent',
+} as const;
+
+// Content
+// ---------------
+const block = {
+  display: 'block',
+} as const;
+
+const list = {
+  // empty
+} as const;
+
+const table = {
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+} as const;
+
+// Typography
+// ---------------
+const a = {
+  textDecoration: 'none',
+  touchAction: 'manipulation',
+} as const;
+
+const quote = {
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''",
+    },
+  },
+} as const;
+
+// Form Elements
+// ---------------
+const button = {
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  textAlign: 'center',
+  touchAction: 'manipulation',
+} as const;
+
+const input = {
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-clear': {
+      display: 'none',
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none',
+    },
+  },
+} as const;
+
+const select = {
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none',
+    },
+  },
+} as const;
+
+const textarea = {
+  display: 'block',
+  appearance: 'none',
+} as const;
+
+// Reset
+// ---------------
+const reset = {
+  article: block,
+  aside: block,
+  details: block,
+  figcaption: block,
+  figure: block,
+  footer: block,
+  header: block,
+  hgroup: block,
+  menu: block,
+  nav: block,
+  section: block,
+  ul: list,
+  ol: list,
+  blockquote: quote,
+  q: quote,
+  a,
+  base,
+  table,
+  select,
+  button,
+  textarea,
+  input,
+} as const;
+
+export type NormalizedElement = keyof typeof reset;
+const isKnownElement = (input: string): input is NormalizedElement =>
+  input in reset;
+
+/**
+ * Helper to conveniently get reset styles.
+ */
+export const getNormalizedStyles = (input?: ElementType): object => {
+  /**
+   * If a React component is given, we don't apply any reset styles
+   * and return the base reset.
+   */
+  if (typeof input !== 'string') {
+    return reset.base;
+  }
+
+  /**
+   * Try to find the reset style for a HTML element. If the element
+   * is not included return empty styles.
+   */
+  return isKnownElement(input) ? reset[input] : {};
+};

package/src/reset.ts

@@ -0,0 +1,108 @@
+import { css } from '@emotion/css';
+
+const base = css({
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  font: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent',
+});
+
+// Content
+// ---------------
+const block = css({
+  display: 'block',
+});
+
+const list = css({
+  // empty
+});
+
+const table = css({
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+});
+
+// Typography
+// ---------------
+const a = css({
+  textDecoration: 'none',
+  touchAction: 'manipulation',
+});
+
+const quote = css({
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''",
+    },
+  },
+});
+
+// Form Elements
+// ---------------
+const button = css({
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  textAlign: 'center',
+  touchAction: 'manipulation',
+});
+
+const input = css({
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-clear': {
+      display: 'none',
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none',
+    },
+  },
+});
+
+const select = css({
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none',
+    },
+  },
+});
+
+const textarea = css({
+  display: 'block',
+  appearance: 'none',
+});
+
+// Reset
+// ---------------
+export const reset = {
+  article: block,
+  aside: block,
+  details: block,
+  figcaption: block,
+  figure: block,
+  footer: block,
+  header: block,
+  hgroup: block,
+  menu: block,
+  nav: block,
+  section: block,
+  ul: list,
+  ol: list,
+  blockquote: quote,
+  q: quote,
+  a,
+  base,
+  table,
+  select,
+  button,
+  textarea,
+  input,
+} as const;

package/src/types.ts

@@ -0,0 +1,16 @@
+/**
+ * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
+ */
+import {
+  Theme as ThemeUITheme,
+  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;
+export type Theme = ThemeUITheme;

package/src/useClassname.test.tsx

@@ -0,0 +1,70 @@
+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);
+});
+
+test('handle empty styles', () => {
+  /**
+   * emotion will add a lot of `css-0` classes especially
+   * when a "variant" is not present in the theme.
+   */
+  const { result } = renderHook(() => useClassname({}));
+  expect(result.current).toMatchInlineSnapshot(`""`);
+});

package/src/useClassname.ts

@@ -0,0 +1,23 @@
+import { css as emotion } from '@emotion/css';
+import { StyleObject } from './types';
+import { useTheme } from './useTheme';
+
+// 🤫 https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object
+// lodash.isEmpty is tooo much KBs!
+const isEmpty = (val: any) =>
+  val && Object.keys(val).length === 0 && val.constructor === Object;
+
+export const useClassname = (...styles: StyleObject[]) => {
+  const { css } = useTheme();
+  return styles
+    .map(style => {
+      /**
+       * emotion will create a `css-0` class whenever an empty object is
+       * passed. Since this makes debugging harder we'll do not pass empty
+       * objects to emotion.
+       */
+      const themedStyle = css(style);
+      return isEmpty(themedStyle) ? '' : emotion(themedStyle);
+    })
+    .join(' ');
+};

package/src/useStyles.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { useStyles } from './useStyles';
+import { Text } from '@marigold/components';
+
+<Meta title="Hooks/useStyles" />
+
+# useStyles
+
+<Canvas>
+  <Story name="usestyles">
+    <Text>
+      The useStyles hook generates classnames that style your component:
+    </Text>
+  </Story>
+</Canvas>
+
+```tsx
+useStyles({
+    element: ElementType; // reset styles for the given HTML element
+    css: CSSObject; // custom styles
+    variant: string|string[]; // theme variant(s)
+    className: string; // additional classnames
+})
+```