foliage-ui / foliage

🍃 Style your components with performance

foliage 🍃

GitHub dev.to

Usage with React

Work in progress. Most of this examples are just concept

import { css, component } from 'foliage-react';

const button = css`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  border: 2px solid white;
`;

export const Button = component('a', button, {
  defaults: { color: 'default' },
  variants: {
    color: {
      primary: css`
        background: white;
        color: black;
      `,
      default: css`
        background: transparent;
        color: white;
      `,
    },
  },
});

Extending styles

import { css, component } from 'foliage-react';

const button = css`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export const Button = component('button', button);

const tomato = css`
  color: tomato;
  border-color: tomato;
`;

export const TomatoButton = component('button', [button, tomato]);

Pseudoelement, pseudoselectors, and nesting

import { css, component } from 'foliage-react';

const thing = css`
  color: blue;

  &:hover {
    color: red; // <Thing> when hovered
  }

  & ~ & {
    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
  }

  & + & {
    background: lime; // <Thing> next to <Thing>
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`;

export const Thing = component('div', thing, { attrs: { tabIndex: 0 } });

const Example = () => (
  <>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">The sun is shining...</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </>
);

Animations

import { css, keyframes, component } from 'foliage-react';

const rotate = keyframes`
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
`;

const block = css`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

export const Block = component('div', block);

Theming

import { css, keyframes, createGlobalStyle, Global } from 'foliage-react';
const theme = {
  main: '--theme-main',
};

const button = css`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: var(${theme.main});
  border: 2px solid var(${theme.main});
`;

const Button = component('button', button);

const primaryTheme = createGlobalStyle`
  :root {
    ${theme.main}: palevioletred;
  }
`;

const secondaryTheme = createGlobalStyle`
  :root {
    ${theme.main}: mediumseagreen;
  }
`;

const Example = () => (
  <>
    <Global styles={primaryTheme} />
    <Button />
  </>
);

Composable components

import { css, component } from 'foliage-react';

const baseStyles = css`
  color: white;
  background-color: mediumseagreen;
  border-radius: 4px;
`;

export const Button = component('button', baseStyles, {
  variants: {
    color: {
      gray: css`
        background-color: gainsboro;
      `,
      blue: css`
        background-color: dodgerblue;
      `,
    },
    size: {
      md: css`
        height: 26px;
      `,
      lg: css`
        height: 36px;
      `,
    },
  },
  compound: [
    {
      color: 'blue',
      size: 'lg',
      css: css`
        background-color: purple;
      `,
    },
  ],
  defaults: {
    color: 'gray',
    size: 'md',
  },
});

Release process

1. Check out the draft release.
2. All PRs should have correct labels and useful titles. You can review available labels here.
3. Update labels for PRs and titles, next manually run the release drafter action to regenerate the draft release.
4. Review the new version and press "Publish"
5. If required check "Create discussion for this release"

foliage's Issues

Support for stores

In React we could use components props and context to create dynamic styles

const Text = styled.div`
  color: ${props => props.color}
`

In Forest we can do something with stores. Simple use case - theming

const Text = styled.div`
  color: ${theme.map(theme => theme.colors.primary)}
`

Now it sets color to [object Object]

Tailwind integration

Would be also cool to see tw utility

import { tw } from 'foliage-tailwind'
import { component } from 'foliage-react'

const Button = component("button", {
  defaults: { size: "normal" },
  variants: {
    size: {
      large: tw`px-4 py-2`,
      normal: tw`px-2 py-1`
    }
  }
})

`merge` utility

It would be useful to have some utility to merge configs, so we could create common colors, roundness, padding configs for UI-kit and then combine them in components:

Example:

// ./config/index,ts
export const colors = {
  variants: {
    color: {
      primary: css`
        background: white;
        color: black;
      `,
      default: css`
        background: transparent;
        color: white;
      `,
    },
  },
}

export const sizes = {
  variants: {
    size: {
      large: css`
        padding: 20px 30px;
      `,
      normal: css`
        padding: 10px 20px;
      `
    }
  }
}

// ./components/Button.tsx
import { merge } from 'foliage'
import { component } from 'foliage-react'

import { colors, sizes } from '../config'

export const Button = component("button", merge(colors, sizes), {
  defaults: { color: 'primary', size: 'normal' }
})

HTML and SVG tags from specialized packages

https://github.com/sergeysova/foliage/blob/5fcf4081057f8b50236a7e23b27a8c2d681809b0/src/elements.ts#L1

Here is like they do it in reshadow:
https://github.com/lttb/reshadow/blob/master/packages/utils/tags/index.js

Add presets

export const Button = component('button', baseStyles, {
  variants: {
    color: {
      gray: css`
        background-color: gainsboro;
      `,
      blue: css`
        background-color: dodgerblue;
      `,
    },
    size: {
      md: css`
        height: 26px;
      `,
      lg: css`
        height: 36px;
      `,
    },
  },
  compound: [
    {
      color: 'blue',
      size: 'lg',
      css: css`
        background-color: purple;
      `,
    },
  ],
  defaults: {
    color: 'gray',
    size: 'md',
  },
  presets: {
    primary: {
      color: "blue",
      css: css` @apply p-4;`
    },
  },
});

1. Preset applies via preset prop.
2. Preset can apply just css or just variants
3. Variants passed as props applied over preset
4. Compound applied after all variants is calculated

Create comparison table and essau

https://pustelto.com/blog/css-vs-css-in-js-perf/

Compile styles on build time

Remove stylis from runtime dependencies

Add property `as` to change tag

const Button = component('div', baseStyles)

<Button as="button" />

Allow to pass custom component and infer props from:

<Button as={MyButton} myProp={1} />

Add support for default props

const Button = styled('button', { data: { enabled: $enabled, theme: $theme } })`
  color: red;
`

What about redefining?

Button({
  data: { enabled: $another }
})

What props should win?

Debug mode

When debug is on:

• Add name and location to asserts (assertKeyframe, assertVariable, assertSelector)
• Asserts should show informative errors when used in incorrect way (ex.: keyframe used as a selector)
• Do not minify CSS (if not forced)

When debug is off:

• Do not add names (if not forced)
• Replace asserts with getters without informative errors, that should help end-users to report problem