@muume/design-blocks

An amazing collection of over 170 ready to use design blocks based on tailwindcss.

Usage no npm install needed!

<script type="module">
  import muumeDesignBlocks from 'https://cdn.skypack.dev/@muume/design-blocks';
</script>

README

Muume Design Blocks

Clone the repository

git clone git@bitbucket.org:muumerepos/muume-design-blocks.git
cd muume-design-blocks

Install dependencies

yarn install

Start storybook

yarn start

Starting using a hostname

Some blocks use hCaptcha, and for them (hCaptcha) to work we need to serve them on a real domain

For that you need to edit your hosts file and add a custom route. Add this to your hosts file. Sudo permissions a required to edit the file.

127.0.0.1 design-blocks.muume.com

In unix systems this file is located at /etc/hosts
For Windows is located at C:\Windows\System32\drivers\etc\hosts

Start storybook. Will start using http://design-blocks.muume.com

yarn start-with-host

Note: If start using custom host, you will need to change WEBSITE of used merchant identifier in the ERP, otherwise you will get CORS errors for ERP requests

Generate screenshots of blocks

Once the application is running on http://design-blocks.muume.com.

yarn screenshots

Note: Generating screenshots takes around 5-10 minutes with no console feedback until the job finishes.

Building

After generating new screenshots you need to build the blocks dist folder.

yarn dist

Publishing

To publish to NPM you need to do the following:

Update version number

Update the version in package.json using semantic versioning.

Tag the branch

# use version changed in package.json
git commit -am "v3.0.1"

Publish to NPM

TODO

  • Explain yarn link stuff
  • Add info how everything is working
  • Add some conventions