react-utility-yard

React-utility-yard npm

⚠️ This project is in developement, still you can explore for setting up following features together.

Features

• React
• Tailwind
• vite
• ts
• storybook

Functions const Hello = () => console.log("Jello....);

Additional Settings tobe used in your Project

• Following libraries are must
  • Tailwind
  • material Icons ( google fonts )
• Tailwind Plugins
  • @tailwindcss/forms

Run & Publish Storybook

This storybook is published live

Run storybook locally

npm run storybook

Publish Storybook Online [ Automated by vercel ]

npm run build-storybook-prod

Publish NPM

Push the changes to git and change package version otherwise npm don't accept.

Build the package

npm run build

Publish the package

npm publish

On-Going tasks

• Remove the padding for sidebar content box
• Remove the css file from build if not using it.
• Side bar not scrolling
• sidebar hamberger issue, its reversed.

Issues and Fixes

• Integrating Tailwind with ts. While building the module compiled tailwind must be sent along with build directory.
  • npx tailwind -i src/tailwind.css -o ./build/tailwind.css
  • Currently, Not providing Css with the package.
• Copy assets to the build [ might need to see better way]
• With Tailwind 3, Dynamic Classed dont work. Use this instead : link/Doc.

Source info

• package.json
  • files : list of files to be published along with readme and package.json
• tsconfig.json
  • sourceMap : source map maps the transformed source to the original source for debbuging purpose by the browser.

References/Components/demos

• air-bnb