@parts-js/p-test

test

From small to very large React components. Build an application in no time.

Installation

// with yarn
yarn add @partsjs/test

//with npm
npm install @partsjs/test

If you don't already have peer dependencies installed, also run:

// with yarn
yarn add react react-dom

// with npm
npm install react react-dom

Usage

Use or create your own design system or use the default one with Tailwind.

Example with a default theme

First, install the default theme, based on the CSS classes from Tailwind.

// with yarn
yarn add @partsjs/test/tailwind-theme

// with npm
npm install @partsjs/test/tailwind-theme

Then use it in the app:

import React from 'react';
import PartsTypography from 'partjs/test/PartsTypography';
import { typographyCN } from 'partsjs/test/theme';

const Text = () => {
  // some logic

  return (
    <div className="text">
      <PartsTypography {...{ element: h2, className: typographyCN.h1 }} />
    </div>
  );
};

Example with your own configuration (you can use Tailwind but don't have to):

// theme/typography.js
const typographyCN = {
  h1: 'h1',
  h2: 'h2',
};

export default typographyCN;

// theme/index.js
export { typographyCN, buttonsCN } from '.';

import React from 'react';
import PartsTypography from 'partjs/test/PartsTypography';
import { typographyCN } from 'core/theme'; // import from your app

const Text = () => {
  // some logic

  return (
    <div className="text">
      <PartsTypography
        {...{ element: h2, size: h1, className: typographyCN.h1 }}
      />
    </div>
  );
};

Do you want to style each component yourself according to classes describing each component? You can use the default CSS classes or specify their names yourself.

import React from 'react';
import Typography from 'partjs/test/Typography';
import theme from '

const typography
const Text = () => {
    // some logic

    return (
        <div className="text">
            <Typography {...{ element: h2, size: h1, hasDefaultClasses: true  }} />
        </div>
    );
};