Timeling user interfaces (UI).

Install

Install the library

npm i @timeling/ui

And import GlobalStyles and tailwind.css in your index file:

// ... imports ...
+import { GlobalStyles } from 'twin.macro';
+import '@timeling/ui/dist/tailwind.css'

// ... some code ...
root.render(
  <React.StrictMode>
+    <GlobalStyles />
    <App />
  </React.StrictMode>
);

Relevant scripts

# install libraries
npm install

# start Storybook
npm run sb:start

# compile a static version of Storybook into the "storybook-static" folder
npm run sb:build

# check the project for syntax errors
npm run lint

# compile the library into the "dist" folder
npm run build

# publish the library to npmjs.com
npm publish

Notes:

1. We don’t need to install TailwindCSS in order to use @timeling-ui. Simply import the CSS file from your app:

   import '@timeling/ui/dist/tailwind.css'

2. The library uses a CDN server to load images and assets. Add the following variable to the .env file (or .env.[local|production|etc] file):

   REACT_APP_CDN=https://cdn.jsdelivr.net/gh/Timeling-LTD/timeling-assets

About the point 1. If you have already installed TailwindCSS in your project, there will probably be conflicts. To prevent this from happening replace your tailwind.config.js file by this one. (edited)