@marigold/system 0.2.0 → 0.3.3

package/src/Element.test.tsx

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

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

@@ -1,4 +0,0 @@
-/**
- * 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,84 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Guides/Concepts & Principles" />
-
-## Design Tokens
-
-The term _design tokens_ originates from the [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/). They are the "visual design atoms" of a design system. Similar to variables in CSS or Sass, design tokens are used to capture low-level values and then used to create the look and feel of your product. This helps with maintaining a consistent and scalable visual system for UI development.
-
-```css
-/* button.css */
-.button {
-  color: #1f1235;
-  background: #ff6e6c;
-  height: 24px;
-}
-```
-
-```scss
-/* colors.scss */
-$color-primary: #ff6e6c;
-$color-text: #1f1235;
-
-/* sizes.scss */
-$size-6: 24px;
-
-/* button.scss */
-.button {
-  color: $color-text;
-  background: $color-primary;
-  height: $size-6;
-}
-```
-
-_Read more:_
-
-- [Lightning Design System: Design Tokens](https://www.lightningdesignsystem.com/design-tokens/)
-- [CSS Tricks: What are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)
-
-## Rhythm & Harmony
-
-Instead of choosing arbitrary numbers for our typography, we make use of a _modular scale_. "By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers." ([_More Meaningful Typography_](https://alistapart.com/article/more-meaningful-typography/))
-
-Applied to web typography, this means we choose a base font size and apply a ratio to it. The ratio is then squared to generate an ascending scale.
-
-```scss
-/* perfect fifth */
-$ratio: 1.5;
-
-/* browser default */
-$base: 16px;
-
-/**
- * The formular is always "$base * $ratio ** $level", the level is a integer.
- * The resulting value is usually rounded to avoid poor sub-pixel rendering.
- *
- * Note that in the below example the number is not equal to the $level in
- * the formula.
- */
-$fontSize-0: 10px;
-$fontSize-1: 16px;
-$fontSize-2: 24px;
-$fontSize-3: 36px;
-/* etc.  */
-```
-
-A similar concept can be applied to spacing and sizing of elements. To maintain a aesthetically pleasing rhythm between elements, we adopt the _8pt grid_. This means that multiples of 8 are used to define dimensions, paddings and margins. As a result, all of our measurements follow the same rule and we automatically get a more consistent UI.
-
-```scss
-/* 8pt grid */
-$size-0: 0px;
-$size-1: 8px;
-$size-2: 16px;
-$size-3: 32px;
-$size-4: 64px;
-$size-5: 128px;
-$size-6: 256px;
-$size-7: 512px;
-```
-
-Read more:
-
-- [A List Apart: More Meaningful Typography](https://alistapart.com/article/more-meaningful-typography/)
-- [Type Scale Calculator](https://type-scale.com/)
-- [Bryn Jackson's 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

package/src/reset.ts

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