@marigold/system 0.2.0 → 0.3.0

package/src/useClassname.test.tsx

@@ -1,70 +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);
-});
-
-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

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

@@ -1,24 +0,0 @@
-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
-})
-```

package/src/useStyles.test.tsx

@@ -1,286 +0,0 @@
-import React, { ElementType } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { render, screen } from '@testing-library/react';
-import { useStyles } from './useStyles';
-import { ThemeProvider } from './useTheme';
-
-// Setup
-// ---------------
-const theme = {
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-      marginTop: '2px',
-    },
-    heading: {
-      fontSize: 3,
-      color: 'primary',
-    },
-    padding: {
-      paddingTop: '2px',
-    },
-  },
-};
-
-const wrapper: React.FC = ({ children }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-);
-
-test('create a string classname', () => {
-  const { result } = renderHook(
-    () => useStyles({ element: 'a', css: { color: 'primary' } }),
-    {
-      wrapper,
-    }
-  );
-  expect(result.current).toEqual(expect.any(String));
-});
-
-// Tests
-// ---------------
-
-test('base styles first', () => {
-  const TestComponent: React.FC<{}> = ({ children, ...props }) => {
-    const classNames = useStyles({ element: 'p' });
-    return (
-      <p className={classNames} {...props}>
-        {children}
-      </p>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestComponent>Text</TestComponent>
-    </ThemeProvider>
-  );
-  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
-  }) => {
-    const classNames = useStyles({
-      element: 'p',
-      variant: `text.${variant}`,
-    });
-    return (
-      <p className={classNames} {...props}>
-        {children}
-      </p>
-    );
-  };
-
-  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
-  }) => {
-    const classNames = useStyles({
-      element: 'p',
-      variant: [`text.${variant}`, `text.padding`],
-    });
-    return (
-      <p className={classNames} {...props}>
-        {children}
-      </p>
-    );
-  };
-
-  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 third', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles({
-      element: 'p',
-      variant: `text.${variant}`,
-      css: {
-        marginTop: '4px',
-      },
-    });
-    return (
-      <p className={classNames} {...props}>
-        {children}
-      </p>
-    );
-  };
-
-  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('customClassName styles fourth', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    const custom = useStyles({ element: 'p', css: { marginTop: '8px' } });
-    const classNames = useStyles({
-      element: 'p',
-      variant: `text.${variant}`,
-      css: {
-        marginTop: '4px',
-      },
-      className: custom,
-    });
-    return (
-      <p className={classNames} {...props}>
-        {children}
-      </p>
-    );
-  };
-
-  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).not.toEqual('4px'); // do not apply 4px from custom styles
-  expect(style.marginTop).toEqual('8px'); // apply 8px from customClassNames styles
-});
-
-test("don't apply the same reset multiple times", () => {
-  const Button = ({ className }: { className?: string }) => {
-    const classNames = useStyles({ element: 'button', className });
-    return (
-      <button title="button" className={classNames}>
-        Click me!
-      </button>
-    );
-  };
-  const Wrapper = () => <Button className={useStyles({ element: '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('element resets are applied dynamically', () => {
-  const Component = ({ element }: { element?: ElementType }) => (
-    <div title="element" className={useStyles({ element })}>
-      div
-    </div>
-  );
-
-  const { rerender } = render(<Component element="input" />);
-  const inputClassName = screen.getByTitle('element').className;
-
-  rerender(<Component element="table" />);
-  const tableClassName = screen.getByTitle('element').className;
-
-  expect(inputClassName).not.toEqual(tableClassName);
-});
-
-test('normalize base without element prop', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'normal',
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles({
-      variant: `text.${variant}`,
-    });
-    return (
-      <a className={classNames} {...props}>
-        {children}
-      </a>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestComponent>Link</TestComponent>
-    </ThemeProvider>
-  );
-  const testelem = getByText('Link');
-  const style = getComputedStyle(testelem);
-
-  expect(style.boxSizing).toEqual('border-box');
-  expect(style.margin).toEqual('0px');
-  expect(style.padding).toEqual('0px');
-  expect(style.minWidth).toEqual('0');
-});
-
-test('normalize tag name <a>', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles({
-      element: 'a',
-      variant: `text.${variant}`,
-    });
-    return (
-      <a className={classNames} {...props}>
-        {children}
-      </a>
-    );
-  };
-
-  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/useStyles.ts

@@ -1,63 +0,0 @@
-import { ElementType } from 'react';
-import { reset } from './reset';
-import { CSSObject } from './types';
-import { useClassname } from './useClassname';
-
-export type UseStyleInput = {
-  element?: ElementType;
-  css?: Omit<CSSObject, 'variant' | 'element'> & {
-    variant?: never;
-    element?: never;
-  };
-  variant?: string | string[];
-  className?: string;
-};
-
-/**
- * Hook that can adds base styles, reset for certain elements, variants and custom styles
- */
-export const useStyles = ({
-  element,
-  css: styles = {},
-  variant,
-  className = '',
-}: UseStyleInput) => {
-  /**
-   * Get reset styles. Base is always applied. An additional reset maybe applied
-   * based on the passed element.
-   *
-   * We check the passed className if it already includes the reset styles so no
-   * duplicates are applied.
-   */
-  const baseClassName = className.includes(reset.base) ? '' : reset.base;
-  const resetClassName =
-    typeof element === 'string'
-      ? className.includes((reset as { [key: string]: string })[element])
-        ? ''
-        : (reset as { [key: string]: string })[element]
-      : '';
-
-  /**
-   * Get variant styles (from theme).
-   */
-  const variants = Array.isArray(variant)
-    ? variant.map(v => ({ variant: v }))
-    : [{ variant }];
-  const variantsClassName = useClassname(...variants);
-
-  /**
-   * Custom styles are applied "on runtime". They are usually controlled via component
-   * props and can change between component instances.
-   */
-  const customClassName = useClassname(styles);
-
-  return [
-    baseClassName,
-    resetClassName,
-    variantsClassName,
-    customClassName,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-};