cleanplate 0.0.4 → 0.0.6

package/README.md

@@ -2,16 +2,91 @@
 
 CleanPlate - Headless React UI Framework
 
-### Components
+### Installation
 
-- Button
-- Typography
-- Badge
-- AppShell
-- Form Controls
-- Icon
-- Modal
+```
+npm install cleanplate
+```
+
+Check all versions at [NPM](https://www.npmjs.com/package/cleanplate).
+
+### Usage
+
+All components can be consumed by `import` using their respective names from `cleanplate` package.
+
+#### Button
+
+```
+import { Button } from "cleanplate";
+
+<Button variant="primary" onClick={() => {}}>Save</Button>
+<Button variant="secondary" onClick={() => {}}>Save</Button>
+<Button variant="nude" onClick={() => {}}>Save</Button>
+<Button variant="special" onClick={() => {}}>Save</Button>
+```
+
+#### Typography
+
+```
+import { Typography } from "cleanplate";
+
+<Typography variant="h1">Hello World!</Typography>
+<Typography variant="h2">Hello World!</Typography>
+<Typography variant="h3">Hello World!</Typography>
+<Typography variant="h4">Hello World!</Typography>
+<Typography variant="h5">Hello World!</Typography>
+<Typography variant="h6">Hello World!</Typography>
+<Typography variant="p">Hello World!</Typography>
+<Typography variant="small">Hello World!</Typography>
+
+```
+
+#### Badge
+
+```
+import { Badge } from "cleanplate";
+
+<Badge label="New" />
+```
+
+#### AppShell
+
+```
+import { AppShell } from "cleanplate";
+
+<AppShell />
+```
+
+#### Form Controls
+
+```
+import { FormControl } from "cleanplate";
+
+<FormControl.Input
+    name="email"
+    onChange={(e) => handleChange(e)}
+    value={values.email}
+/>
+
+<FormControl.TextArea
+    name="bio"
+    onChange={(e) => handleChange(e)}
+    value={values.bio}
+/>
+```
+
+#### Icon
+
+```
+import { Icon } from "cleanplate";
+```
+
+#### Modal
+
+```
+import { Modal } from "cleanplate";
+```
 
 ### Documentation & Demo
 
-Storybook playground is available at [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in)
+Storybook playground is available for all components at [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in).

package/dist/index.css

@@ -1 +1 @@
-.cp-typography{color:red}.cp-app-shell,.cp-typography{font-family:inherit;font-size:inherit;line-height:1.5}.cp-app-shell{color:orange}.cp-badge,.cp-modal{color:red;line-height:1.5}.cp-badge,.cp-form-field,.cp-modal{font-family:inherit;font-size:inherit}.cp-form-field{margin-bottom:16px}.cp-form-label{color:#999;display:block;margin-bottom:8px}.cp-form-control{border:1px solid #ccc;border-radius:8px;height:44px;padding:0 16px}.cp-textarea-field textarea{min-height:88px;padding:16px}.cp-button{border:1px solid #ccc;border-radius:8px;cursor:pointer;height:44px;padding:0 16px}.cp-button,.cp-icon{font-family:inherit;font-size:inherit}.cp-icon{color:red;line-height:1.5}
+.cp-typography{color:red}.cp-app-shell,.cp-typography{font-family:inherit;font-size:inherit;line-height:1.5}.cp-app-shell{color:orange}.cp-badge,.cp-modal{color:red;line-height:1.5}.cp-badge,.cp-form-field,.cp-modal{font-family:inherit;font-size:inherit}.cp-form-field{margin-bottom:16px}.cp-form-label{color:#999;display:block;margin-bottom:8px}.cp-form-control{border:1px solid #ccc;border-radius:8px;height:44px;padding:0 16px}.cp-textarea-field textarea{min-height:88px;padding:16px}.cp-button{border:1px solid #ccc;border-radius:8px;cursor:pointer;font-family:inherit;font-size:inherit;height:44px;padding:0 16px}.cp-icon{word-wrap:normal;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;direction:ltr;display:inline-block;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}

package/dist/index.es.css

@@ -1 +1 @@
-.cp-typography{color:red}.cp-app-shell,.cp-typography{font-family:inherit;font-size:inherit;line-height:1.5}.cp-app-shell{color:orange}.cp-badge,.cp-modal{color:red;line-height:1.5}.cp-badge,.cp-form-field,.cp-modal{font-family:inherit;font-size:inherit}.cp-form-field{margin-bottom:16px}.cp-form-label{color:#999;display:block;margin-bottom:8px}.cp-form-control{border:1px solid #ccc;border-radius:8px;height:44px;padding:0 16px}.cp-textarea-field textarea{min-height:88px;padding:16px}.cp-button{border:1px solid #ccc;border-radius:8px;cursor:pointer;height:44px;padding:0 16px}.cp-button,.cp-icon{font-family:inherit;font-size:inherit}.cp-icon{color:red;line-height:1.5}
+.cp-typography{color:red}.cp-app-shell,.cp-typography{font-family:inherit;font-size:inherit;line-height:1.5}.cp-app-shell{color:orange}.cp-badge,.cp-modal{color:red;line-height:1.5}.cp-badge,.cp-form-field,.cp-modal{font-family:inherit;font-size:inherit}.cp-form-field{margin-bottom:16px}.cp-form-label{color:#999;display:block;margin-bottom:8px}.cp-form-control{border:1px solid #ccc;border-radius:8px;height:44px;padding:0 16px}.cp-textarea-field textarea{min-height:88px;padding:16px}.cp-button{border:1px solid #ccc;border-radius:8px;cursor:pointer;font-family:inherit;font-size:inherit;height:44px;padding:0 16px}.cp-icon{word-wrap:normal;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;direction:ltr;display:inline-block;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}

package/dist/index.es.js

@@ -1 +1 @@
-import e from"react";const a=({children:a,variant:t})=>{switch(t){case"h1":return e.createElement("h1",{className:"cp-typography"},a);case"h2":return e.createElement("h2",{className:"cp-typography"},a);case"h3":return e.createElement("h3",{className:"cp-typography"},a);case"h4":return e.createElement("h4",{className:"cp-typography"},a);case"h5":return e.createElement("h5",{className:"cp-typography"},a);case"h6":return e.createElement("h6",{className:"cp-typography"},a);default:return e.createElement("p",{className:"cp-typography"},a)}},t=({children:e})=>React.createElement("div",{className:"cp-app-shell"},e),l=({children:a})=>e.createElement("p",{className:"cp-modal"},a),c=({label:a})=>e.createElement("p",{className:"cp-badge"},a);var r={Input:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:m="text",className:p=""})=>{const o=`cp-form-field cp-input-field ${p}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("input",{className:"cp-form-control",type:m,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))},TextArea:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:m="text",className:p=""})=>{const o=`cp-form-field cp-textarea-field ${p}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("textarea",{className:"cp-form-control",type:m,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))}};const s=({children:a})=>e.createElement("button",{className:"cp-button"},a),n=({name:a=""})=>{const t=`cp-icon ${a}`;return e.createElement("i",{className:t})};export{t as AppShell,c as Badge,s as Button,r as FormControls,n as Icon,l as Modal,a as Typography};
+import e from"react";const a=({children:a,variant:t})=>{switch(t){case"h1":return e.createElement("h1",{className:"cp-typography"},a);case"h2":return e.createElement("h2",{className:"cp-typography"},a);case"h3":return e.createElement("h3",{className:"cp-typography"},a);case"h4":return e.createElement("h4",{className:"cp-typography"},a);case"h5":return e.createElement("h5",{className:"cp-typography"},a);case"h6":return e.createElement("h6",{className:"cp-typography"},a);default:return e.createElement("p",{className:"cp-typography"},a)}},t=({children:e})=>React.createElement("div",{className:"cp-app-shell"},e),l=({children:a})=>e.createElement("p",{className:"cp-modal"},a),c=({label:a})=>e.createElement("p",{className:"cp-badge"},a);var r={Input:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:m="text",className:p=""})=>{const o=`cp-form-field cp-input-field ${p}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("input",{className:"cp-form-control",type:m,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))},TextArea:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:m="text",className:p=""})=>{const o=`cp-form-field cp-textarea-field ${p}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("textarea",{className:"cp-form-control",type:m,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))}};const s=({children:a})=>e.createElement("button",{className:"cp-button"},a),n=({name:a=""})=>e.createElement("span",{class:"cp-icon"},a);export{t as AppShell,c as Badge,s as Button,r as FormControls,n as Icon,l as Modal,a as Typography};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("react");var a={Input:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:p="text",className:m=""})=>{const o=`cp-form-field cp-input-field ${m}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("input",{className:"cp-form-control",type:p,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))},TextArea:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:p="text",className:m=""})=>{const o=`cp-form-field cp-textarea-field ${m}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("textarea",{className:"cp-form-control",type:p,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))}};exports.AppShell=({children:e})=>React.createElement("div",{className:"cp-app-shell"},e),exports.Badge=({label:a})=>e.createElement("p",{className:"cp-badge"},a),exports.Button=({children:a})=>e.createElement("button",{className:"cp-button"},a),exports.FormControls=a,exports.Icon=({name:a=""})=>{const t=`cp-icon ${a}`;return e.createElement("i",{className:t})},exports.Modal=({children:a})=>e.createElement("p",{className:"cp-modal"},a),exports.Typography=({children:a,variant:t})=>{switch(t){case"h1":return e.createElement("h1",{className:"cp-typography"},a);case"h2":return e.createElement("h2",{className:"cp-typography"},a);case"h3":return e.createElement("h3",{className:"cp-typography"},a);case"h4":return e.createElement("h4",{className:"cp-typography"},a);case"h5":return e.createElement("h5",{className:"cp-typography"},a);case"h6":return e.createElement("h6",{className:"cp-typography"},a);default:return e.createElement("p",{className:"cp-typography"},a)}};
+"use strict";var e=require("react");var a={Input:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:p="text",className:m=""})=>{const o=`cp-form-field cp-input-field ${m}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("input",{className:"cp-form-control",type:p,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))},TextArea:({name:a,id:t,onChange:l,defaultValue:c,value:r,label:s="",isDisabled:n=!1,type:p="text",className:m=""})=>{const o=`cp-form-field cp-textarea-field ${m}`;return e.createElement("div",{className:o},s&&e.createElement("label",{className:"cp-form-label"},s),e.createElement("textarea",{className:"cp-form-control",type:p,disabled:n,name:a,id:t,defaultValue:c,value:r,onChange:e=>{l&&l(e)}}))}};exports.AppShell=({children:e})=>React.createElement("div",{className:"cp-app-shell"},e),exports.Badge=({label:a})=>e.createElement("p",{className:"cp-badge"},a),exports.Button=({children:a})=>e.createElement("button",{className:"cp-button"},a),exports.FormControls=a,exports.Icon=({name:a=""})=>e.createElement("span",{class:"cp-icon"},a),exports.Modal=({children:a})=>e.createElement("p",{className:"cp-modal"},a),exports.Typography=({children:a,variant:t})=>{switch(t){case"h1":return e.createElement("h1",{className:"cp-typography"},a);case"h2":return e.createElement("h2",{className:"cp-typography"},a);case"h3":return e.createElement("h3",{className:"cp-typography"},a);case"h4":return e.createElement("h4",{className:"cp-typography"},a);case"h5":return e.createElement("h5",{className:"cp-typography"},a);case"h6":return e.createElement("h6",{className:"cp-typography"},a);default:return e.createElement("p",{className:"cp-typography"},a)}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cleanplate",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "CleanPlate - A Headless React UI Framework",
   "main": "dist/index.js",
   "module": "dist/index.es.js",