📖 Introduction to React Harmony

Nowadays We have a lot of style libs and Many times we dont need to everything at our packages. It costs to our users, Mobile data usually is poor at any place of the World.

If You try to mixture many sort of style libs You'll get a truly hell into your codebase. (I got you, no worry sometimes times matter 😂)

Why not use something that able us to stylish our components so easily or even setting patterns to style components improving our velocity to delivery.

I mean with @lizzelabs/react-harmony you can:

Set patterns of what you have to style ex:

Live Editor

const TitlePattern = {
  order: 0,
  applyOn: (props: any) => props.kind === 'title',
  style: {
    fontSize: '1rem',
    fontWeight: 'bold',
  },
};

const SubtitlePattern = {
  order: 0,
  applyOn: (props: any) => props.kind === 'subtitle',
  style: {
    fontSize: '0.859rem',
    fontWeight: '500',
  },
};

function Main() {
  return (
    <PieceProvider patterns={[TitlePattern, SubtitlePattern]}>
      <Piece
        as='h2'
        kind='title'
      >
        Title
      </Piece>
      <Piece
        as='h6'
        kind='subtitle'
      >
        Subtitle
      </Piece>
    </PieceProvider>
  );
}

render(<Main />);

Result

Even properties:

Live Editor

const ButtonPattern = {
  order: 0,
  applyOn: (props: any) => props.kind === 'button',
  default: {
    aria: {
      role: 'button',
      'aria-label': 'action',
    },
  },
};

function Main() {
  return (
    <PieceProvider patterns={[ButtonPattern]}>
      <Piece
        as='button'
        kind='button'
      >
        I am accessible.
      </Piece>
      <br />
      <br />
      <Piece
        as='button'
        kind='icon-button'
      >
        I am not.
      </Piece>
    </PieceProvider>
  );
}

render(<Main />);

Result

Set css-styles directly into JSX:

Live Editor

function Main() {
  return (
    <Piece
      as='div'
      display='flex'
      background='red'
      height='50px'
      width='50px'
    />
  );
}

Result

Work with your own theme between your components:

Live Editor

interface MyCustomTheme {
  primary: string;
  secondary: string;
  text: string;
  fontSize: string;
}

const Theme = {
  primary: 'red',
  secondary: 'blue',
  text: '#FFF',
  fontSize: '16px',
} satisfies MyCustomTheme;

const ContainerPattern = {
  order: 0,
  applyOn: (props: any) => props.kind === 'container',
  styles: (theme: MyCustomTheme) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  }),
} satisfies ProviderPattern<Theme, any>;

const LabelPattern = {
  order: 0,
  applyOn: (props: any) => props.kind === 'label',
  styles: (theme: MyCustomTheme) => ({
    color: theme.text,
    fontSize: '0.85rem',
  }),
} satisfies ProviderPattern<Theme, any>;

const Main = () => {
  return (
    <PieceProvider
      theme={Theme}
      patterns={[ContainerPattern, LabelPattern]}
    >
      <Piece
        as='div'
        kind='container'
        fontSize={(theme: MyCustomTheme) => theme.fontSize}
        withStyle={(theme: MyCustomTheme) => ({
          border: `1px solid ${theme.secondary}`,
        })}
      >
        <Piece as='label'>Hello word</Piece>
      </Piece>
    </PieceProvider>
  );
};

render(<Main />);

Result

So while your codebase gets more clear you delivery more faster I mean you don't need to transition between css and js It just one language 🤓.

Now let's get start and see how It's easy to install