5.1.0 • Published 4 months ago

atp-react-ui v5.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

ATP React UI

The component library for fast and accessible development of gorgeous interfaces.

Projects using it: Sales Portal Dashboards

Mission

Be the most accessible it can be out of the box and the fastest way to production.

Go to docs to see complete, live examples

šŸš€ Usage

Install ATP Library

npm i atp-react-ui

Install TailwindCSS

npm install -D tailwindcss
npx tailwindcss init

Install TailwindForms

npm install -D @tailwindcss/forms

Inside tailwind.config.js

const atpLib = require('atp-react-ui/config');
module.exports = atpLib({
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
});

Then place AtpLib at the root of your project (the order doesn't matter, as long as your application is inside).

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AtpLib } from 'atp-react-ui';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <AtpLib>
    <App />
  </AtpLib>
);

Use components inside your project

import { Button } from 'atp-react-ui';

function App() {
  return <Button>Hi there!</Button>;
}

export default App;

Sorting Tailwind Classes

Update your .prettierrc by adding following to it:

"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunctions": ["twSort"],

Improve twSort from atp-react-ui and use it as:

import { twSort, AtpThemeType } from atp-react-ui;

const customTheme: AtpThemeType = {
  helperText: {
    base: twSort`flex-grow-0 relative flex h-5 md:bg-gray-900`,
  },
};

// It will automatically be sorted as
const customTheme: AtpThemeType = {
  helperText: {
    base: twSort`relative flex h-5 flex-grow-0 md:bg-gray-900`,
  },
};

Important: In case auto-sorting doesn't work. Try restarting IDE.

šŸ”Œ Contributing

  • Fork
  • Clone
  • npm install
  • npm run storybook

It will start a local server at localhost:6006 with all components rendered.

⚠ Use npm run cz instead of git commit! It will guide you through some short questions and guarantee that you commit message is standardized.

Commit will also trigger linting

5.1.0

4 months ago

4.0.7

4 months ago

5.0.0

4 months ago

4.0.6

8 months ago

4.0.5

10 months ago

4.0.4

10 months ago

4.0.2

10 months ago

4.0.1

12 months ago

4.0.0

12 months ago

3.4.7

2 years ago

3.4.4

2 years ago

3.4.6

2 years ago

3.4.5

2 years ago

3.4.3

2 years ago

3.4.2

2 years ago

3.2.26

2 years ago

3.2.25

2 years ago

3.2.28

2 years ago

3.2.27

2 years ago

3.4.0

2 years ago

3.4.1

2 years ago

3.3.0

2 years ago

3.2.24

2 years ago

3.2.23

2 years ago

3.2.20

2 years ago

3.2.22

2 years ago

3.2.21

2 years ago

3.2.13

2 years ago

3.2.12

2 years ago

3.2.15

2 years ago

3.2.14

2 years ago

3.2.17

2 years ago

3.2.16

2 years ago

3.2.19

2 years ago

3.2.18

2 years ago

3.2.11

2 years ago

3.2.10

2 years ago

3.2.6

2 years ago

3.2.5

2 years ago

3.2.4

2 years ago

3.2.8

2 years ago

3.2.7

2 years ago

3.2.2

2 years ago

3.1.3

2 years ago

3.2.1

2 years ago

3.2.0

2 years ago

3.1.4

2 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.0.2

2 years ago

3.1.0

2 years ago

3.0.1

2 years ago

2.7.4

2 years ago

2.7.3

2 years ago

2.7.5

2 years ago

3.0.0

2 years ago

2.7.2

2 years ago

2.7.1

2 years ago

2.7.0

2 years ago

2.6.2

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.5.1

2 years ago

2.5.0

2 years ago

2.4.1

3 years ago

2.4.0

3 years ago

2.3.2

3 years ago

2.3.1

3 years ago

2.3.0

3 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.2

3 years ago

2.0.0

3 years ago

1.1.0

3 years ago

0.3.0

3 years ago

0.1.0

3 years ago

1.0.0

3 years ago