@marigold/system 0.0.2 → 0.3.0

package/src/useStyles.test.tsx

@@ -1,313 +0,0 @@
-import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { useStyles } from './useStyles';
-import { ThemeProvider } from './useTheme';
-import { render } from '@testing-library/react';
-
-// 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'], 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`],
-      components: 'body',
-    });
-    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}`,
-      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 classNames = useStyles(
-      {
-        element: ['p'],
-        variant: `text.${variant}`,
-        marginTop: '4px',
-      },
-      useStyles({ element: ['p'], marginTop: '8px' })
-    );
-    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('normalize base without element prop', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'normal',
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles({
-      // element: [],
-      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 base with empty element prop', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles({
-      element: [],
-      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
-});
-
-test('normalize tag names <a> and <p>', () => {
-  const TestComponent: React.FC<{ variant?: 'body' }> = ({
-    variant = 'body',
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles({
-      element: ['a', 'p'],
-      variant: `text.${variant}`,
-    });
-    return (
-      <p>
-        <a className={classNames} {...props}>
-          {children}
-        </a>
-      </p>
-    );
-  };
-
-  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
-  expect(style.listStyle).toEqual('none'); // from p
-});

package/src/useStyles.ts

@@ -1,56 +0,0 @@
-import { useClassname } from './useClassname';
-
-import * as resetStyleRefs from './normalize';
-import { ElementType } from 'react';
-
-export type StylesProps = {
-  element?: ElementType[];
-  variant?: string | string[];
-  [key: string]: any;
-};
-
-/**
- * Hook function that can add base styles, normalization, variant and custom styles
- */
-export const useStyles = (
-  { element, variant, ...styles }: StylesProps,
-  classNames?: string
-) => {
-  /**
-   * Normalization styles looked up by html tag name(s). Base normalization
-   * is always applied.
-   */
-  var elementArray: ElementType[] = [];
-  if (element) {
-    element.push('base'); // always apply base styles
-    elementArray = element;
-  } else {
-    elementArray = ['base'];
-  }
-  const resetStyles = resetStyleRefs.el;
-  const elements: { [key: string]: any }[] = elementArray.map(
-    styleObject => resetStyles[styleObject as keyof typeof resetStyleRefs.el]
-  );
-
-  const elementObject = Object.assign({}, ...elements);
-
-  const basedOnNormalize = useClassname(elementObject);
-
-  /**
-   * Variants are retrieved from the theme.
-   */
-  const variants = Array.isArray(variant)
-    ? variant.map(v => ({ variant: v }))
-    : [{ variant }];
-
-  const basedOnVariants = useClassname(...variants);
-
-  /**
-   * Custom styles are applied "on runtime". They are usually controlled via component
-   * props and can change between component instances. They are more or less the `css`
-   * prop of `emotion`.
-   */
-  const custom = useClassname(styles);
-
-  return [basedOnNormalize, basedOnVariants, custom, classNames].join(' ');
-};

package/src/writeComponent.stories.mdx

@@ -1,126 +0,0 @@
-import { Meta, Story, Preview } 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(s) 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', 'span'],
-        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
-```