@marigold/system 0.1.0 → 0.3.2

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.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(' ');
-};

package/src/writeComponent.stories.mdx

@@ -1,126 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Guides/How to Write and Use Components" />
-
-# How to Write and Use Components
-
-Small guidance for creating components in Marigold.
-
-## API
-
-### Use the base HTML element
-
-Create your basic component by using the HTML tagname with its own props. Specify the HTML element you want to render.
-The `system` helper infers a forwardRef (and will soon be abolished).
-
-```tsx
-export const Button = system<ButtonProps, 'button'>(({ ...props }) => {
-  return <button {...props}>{children}</button>;
-});
-```
-
-### Add Styling via Classnames
-
-In order to add styles to your component, you can work with classNames. ClassNames are automatically generated via the `useStyles` hook.
-There are three levels of styles to be applied: `useStyles` takes the HTML element type used in the component to normalize the styles according to those HTML elements.
-A base normalization is automatically added to this list and always applies in order to have the same defaults cross-browser.
-Next, `useStyles` takes a `variant` which is retrieved from the theme (which is given in the `<ThemeProvider>`). Additionally, you can insert custom styles
-which are applied on runtime and override normalization and theme styles. Lastly, you can use custom classnames and pass them to your component in the `useStyles` hook.
-
-```tsx
-const classNames = useStyles(
-  {
-    element: 'button',
-    variant: `button.${variant}`,
-  },
-  className
-);
-```
-
-### Put it together
-
-Don't forget imports, defaults and (optional) logic needed for your component as seen in the following example.
-
-```tsx
-import React from 'react';
-import { ThemeProvider, system } from '@marigold/system';
-import { render } from '@testing-library/react';
-
-const theme = {
-  ...anyTheme,
-  button: {
-    outlined: { // variant
-      border: '1px solid orange',
-      mx: 2,
-    },
-  },
-};
-// Define custom properties for your component
-type ButtonProps = {
-  kind?: 'basic' | 'other';
-  size?: 'small' | 'medium' | 'large';
-};
-
-// Specify the HTML element you want to render and merge its properties with the custom component props
-const Button = system<ButtonProps, 'button'>(
-  // Set default values for extra props
-  ({
-    kind = 'basic',
-    size = 'medium',
-    className
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles(
-      // add normalization and variant
-      {
-        element: 'button',
-        variant: `button.${variant}`,
-      },
-      className
-    )
-    // Place logic here like toggle states, calculations, mappings etc.
-    return (
-      <button
-        className={classNames}
-        {...props}
-      >
-        <span
-          className={useStyles({ // use custom styles only
-            display: 'inline-flex',
-            alignItems: 'center',
-          })}
-        >
-          {children}
-        </span>
-      </button>
-    );
-  }
-);
-// Use the component; don't forget the imports
-render(
-  <ThemeProvider theme={theme}>
-    <Button /> // Default Button component instance
-  </ThemeProvider>
-);
-```
-
-### Folder Structure
-
-As we want to keep an organized file structure, we use a script to create new component templates. Navigate to the root folder and use it with `yarn create:component COMPONENTNAME`. The new component
-is generated with all files needed and already added to the component exports.
-
-```
-packages
-└─── system
-|
-└─── components
-      |    index.ts
-      |    theme.ts
-      └─── src
-            └─── Button
-                  |    index.ts
-                  |    Button.tsx
-                  |    Button.test.tsx
-                  |    Button.stories.mdx
-```