Kluser NPM | npm.io

design needs to be quick and succinct
-- Frederico G K Oliveira

🧰 Features

Convert HTML/CSS to (React, React Native)
Organize style
Generate Jest
Generate Storybook
Realtime conversion mode
Matrix loading animations :P

📈 Advantage

With short and simple html/css code creates a professional structure.

write this:

<body>
  <div id="Home">
    <div id="Header">
      <h1 id="Title">Home Page</h1>
    </div>
  </div>
</body>

receive this:

source
├── components
│   ├── Header
│   │   ├── Header.jsx
│   │   ├── Header.stories.jsx
│   │   ├── Header.styled.js
│   │   ├── Header.test.jsx
│   │   └── index.js
│   └── Title
│       ├── Title.jsx
│       ├── Title.stories.jsx
│       ├── Title.styled.js
│       ├── Title.test.jsx
│       └── index.js
└── pages
    └── Home
        ├── Home.jsx
        ├── Home.stories.jsx
        ├── Home.styled.js
        ├── Home.test.jsx
        └── index.js

🔧 Installation

$ npm install -g kluser

🛠️ Usage

$ kluser

👨‍🏫 Documentation

Complete Guide

Create new project

Alt Text

With the project created the same command will render the project or activate live preview mode

Alt Text

🆘 Roadmap

	🤙 Today	🤞 Future
Generate React.js	✔️
Live Preview	✔️
Config file	✔️
Generate React Native	✔️
Props support	✔️
Support Atomic Design		❌
State support		❌
Generate Flutter		❌
Drag n Drop Tool		❌