Convert plugin examples to codesandbox (#1316)

* Migrate plugin examples to codesandbox

* Fix examples

* Add links to plugin examples

Author: m4theushw

docs/jss-plugin-camel-case.md

@@ -19,3 +19,7 @@ Compiles to:
   font-size: 12px;
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-camel-case?fontsize=14)

docs/jss-plugin-compose.md

@@ -179,3 +179,7 @@ It renders to:
 - It doesn't work within [global Style Sheets](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global).
 - It does not work inside of [nested rules](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested).
 - When composing local rules, they need to be defined first. Otherwise, you get wrong CSS selector order and specificity.
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-compose?fontsize=14)

docs/jss-plugin-default-unit.md

@@ -60,3 +60,7 @@ Compiles to:
   z-index: 1;
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-default-unit?fontsize=14)

docs/jss-plugin-expand.md

@@ -400,3 +400,7 @@ const styles = {
   }
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-expand?fontsize=14)

docs/jss-plugin-extend.md

@@ -76,5 +76,4 @@ const styles = {
 
 ### Demo
 
-[Simple demo](http://cssinjs.github.io/examples/plugins/jss-extend/simple/)
-[Multi objects demo](http://cssinjs.github.io/examples/plugins/jss-extend/multi/)
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-extend?fontsize=14)

docs/jss-plugin-global.md

@@ -73,3 +73,7 @@ Compiles to:
   color: red;
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-global?fontsize=14)

docs/jss-plugin-isolate.md

@@ -183,7 +183,7 @@ jss.use(
 
 ### Demo
 
-[Simple](http://cssinjs.github.io/examples/plugins/jss-plugin-isolate/simple/index.html)
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-isolate?fontsize=14)
 
 ### Reseted properties
 

docs/jss-plugin-nested.md

@@ -142,3 +142,7 @@ Compiles to:
   background: red;
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-nested?fontsize=14)

docs/jss-plugin-props-sort.md

@@ -19,3 +19,7 @@ Compiles to:
   border-left: 1px solid red;
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-props-sort?fontsize=14)

docs/jss-plugin-rule-value-function.md

@@ -66,3 +66,7 @@ const sheet = jss
 
 sheet.update({color: 'red'})
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-rule-value-function?fontsize=14)

docs/jss-plugin-rule-value-observable.md

@@ -71,3 +71,7 @@ jss.setup(
   })
 )
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-rule-value-observable?fontsize=14)

docs/jss-plugin-template.md

@@ -24,3 +24,7 @@ const styles = {
   }
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-template?fontsize=14)

docs/jss-plugin-vendor-prefixer.md

@@ -19,3 +19,7 @@ Compiles to:
   transform: -webkit-translateX(100px);
 }
 ```
+
+### Demo
+
+[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-vendor-prefixer?fontsize=14)

examples/plugins/jss-plugin-camel-case/app.js

@@ -0,0 +1,18 @@
+import jss from 'jss'
+import jssPluginCamelCase from 'jss-plugin-camel-case'
+
+const styles = {
+  button: {
+    fontSize: '50px',
+    zIndex: 1,
+    lineHeight: 1.2
+  }
+}
+
+// JSS Setup
+jss.use(jssPluginCamelCase())
+const {classes} = jss.createStyleSheet(styles).attach()
+
+// Application logic.
+const div = document.body.appendChild(document.createElement('div'))
+div.innerHTML = `<button class="${classes.button}">Button</button>`

examples/plugins/jss-plugin-camel-case/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - jss-plugin-camel-case</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="app.js"></script>
+  </body>
+</html>

examples/plugins/jss-plugin-camel-case/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jss-plugin-camel-case-example",
+  "license": "ISC",
+  "dependencies": {
+    "jss": "^10.0.3",
+    "jss-plugin-camel-case": "10.1.1"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}

examples/plugins/jss-plugin-compose/app.js

@@ -0,0 +1,29 @@
+import jss from 'jss'
+import jssPluginCompose from 'jss-plugin-compose'
+
+const styles = {
+  button: {
+    composes: 'btn btn-primary',
+    color: 'red'
+  },
+  buttonActive: {
+    composes: ['btn', 'btn-primary'],
+    color: 'blue'
+  },
+  buttonActiveDisabled: {
+    composes: '$buttonActive',
+    opacity: 0.5
+  }
+}
+
+// JSS Setup
+jss.use(jssPluginCompose())
+const {classes} = jss.createStyleSheet(styles).attach()
+
+// Application logic.
+const div = document.body.appendChild(document.createElement('div'))
+div.innerHTML = `
+  <button class="${classes.button}">Button</button>
+  <button class="${classes.buttonActive}">Active Button</button>
+  <button class="${classes.buttonActiveDisabled}">Disabled Active Button</button>
+`

examples/plugins/jss-plugin-compose/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - jss-plugin-compose</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="app.js"></script>
+  </body>
+</html>

examples/plugins/jss-plugin-compose/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jss-plugin-compose-example",
+  "license": "ISC",
+  "dependencies": {
+    "jss": "^10.0.3",
+    "jss-plugin-compose": "10.1.1"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}

examples/plugins/jss-plugin-default-unit/app.js

@@ -0,0 +1,18 @@
+import jss from 'jss'
+import jssPluginDefaultUnit from 'jss-plugin-default-unit'
+
+const styles = {
+  button: {
+    'font-size': 20,
+    'z-index': 1,
+    'line-height': 2
+  }
+}
+
+// JSS Setup
+jss.use(jssPluginDefaultUnit())
+const {classes} = jss.createStyleSheet(styles).attach()
+
+// Application logic.
+const div = document.body.appendChild(document.createElement('div'))
+div.innerHTML = `<button class="${classes.button}">Button</button>`

examples/plugins/jss-plugin-default-unit/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - jss-plugin-default-unit</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="app.js"></script>
+  </body>
+</html>

examples/plugins/jss-plugin-default-unit/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jss-plugin-default-unit-example",
+  "license": "ISC",
+  "dependencies": {
+    "jss": "^10.0.3",
+    "jss-plugin-default-unit": "10.1.1"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}

examples/plugins/jss-plugin-expand/app.js

@@ -0,0 +1,20 @@
+import jss from 'jss'
+import jssPluginExpand from 'jss-plugin-expand'
+
+const styles = {
+  button: {
+    border: {
+      color: 'black',
+      width: 1,
+      style: 'solid'
+    }
+  }
+}
+
+// JSS Setup
+jss.use(jssPluginExpand())
+const {classes} = jss.createStyleSheet(styles).attach()
+
+// Application logic.
+const div = document.body.appendChild(document.createElement('div'))
+div.innerHTML = `<button class="${classes.button}">Button</button>`

examples/plugins/jss-plugin-expand/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - jss-plugin-expand</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="app.js"></script>
+  </body>
+</html>

examples/plugins/jss-plugin-expand/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jss-plugin-expand-example",
+  "license": "ISC",
+  "dependencies": {
+    "jss": "^10.0.3",
+    "jss-plugin-expand": "10.1.1"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}

examples/plugins/jss-plugin-extend/app.js

@@ -0,0 +1,30 @@
+import jss from 'jss'
+import jssPluginExtend from 'jss-plugin-extend'
+
+const button0 = {
+  padding: '20px',
+  background: 'blue'
+}
+
+const redButton = {
+  background: 'red'
+}
+
+const styles = {
+  button0,
+  button1: {
+    extend: [button0, redButton],
+    'font-size': '20px'
+  }
+}
+
+// JSS Setup
+jss.use(jssPluginExtend())
+const {classes} = jss.createStyleSheet(styles).attach()
+
+// Application logic.
+const div = document.body.appendChild(document.createElement('div'))
+div.innerHTML = `\
+  <button class="${classes.button0}">Button 1</button>\
+  <button class="${classes.button1}">Button 2</button>\
+`

examples/plugins/jss-plugin-extend/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - jss-plugin-extend</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="app.js"></script>
+  </body>
+</html>

examples/plugins/jss-plugin-extend/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jss-plugin-extend-example",
+  "license": "ISC",
+  "dependencies": {
+    "jss": "^10.0.3",
+    "jss-plugin-extend": "10.1.1"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}

examples/plugins/jss-plugin-global/app.js

@@ -0,0 +1,21 @@
+import jss from 'jss'
+import jssPluginGlobal from 'jss-plugin-global'
+
+const styles = {
+  '@global': {
+    body: {
+      background: 'green'
+    },
+    button: {
+      background: 'yellow'
+    }
+  }
+}
+
+// JSS Setup
+jss.use(jssPluginGlobal())
+jss.createStyleSheet(styles).attach()
+
+// Application logic.
+const div = document.body.appendChild(document.createElement('div'))
+div.innerHTML = `<button>Button</button>`

examples/plugins/jss-plugin-global/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - jss-plugin-global</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="app.js"></script>
+  </body>
+</html>

examples/plugins/jss-plugin-global/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "jss-plugin-global-example",
+  "license": "ISC",
+  "dependencies": {
+    "jss": "^10.0.3",
+    "jss-plugin-global": "10.1.1"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}