feat(docs): Interactive playground component (#140)

* playground component initial commit * named params * Checkbox fix * icon btn fix * revert naming * review comments * Rename to preview * Changes * fix: button variant prop * fix: updated styling * fix: overflow issue Co-authored-by: Shibu Lijack <[email protected]> Co-authored-by: Shibu Lijack <[email protected]>
freshworks · Mar 9, 2020 · 3daf9bf · 3daf9bf
1 parent 3cf8a05
commit 3daf9bf
Show file tree

Hide file tree

Showing 27 changed files with 657 additions and 107 deletions.
diff --git a/packages/@nucleus/app/styles/doc/_icon.scss b/packages/@nucleus/app/styles/doc/_icon.scss
@@ -0,0 +1,21 @@
+// icon tiles
+.icon-container {
+  display: flex;
+  flex-wrap: wrap;
+
+  .icon {
+    text-align: center;
+    padding: 10px 5px 5px;
+    margin: 5px;
+    width: 150px;
+    cursor: pointer;
+
+    &:hover {
+      background: #dae1e7;
+    }
+
+    &--text {
+      padding: 5px 0;
+    }
+  }
+}
diff --git a/packages/@nucleus/app/styles/doc/_playground.scss b/packages/@nucleus/app/styles/doc/_playground.scss
@@ -0,0 +1,52 @@
+$playground-border-color: #dae1e7;
+$padding: 8px;
+
+.playground-container {
+  display: flex;
+  border-bottom: 1px dotted $playground-border-color;
+  justify-content: space-around;
+
+  &--preview {
+    display: flex;
+    align-self: center;
+    width: 75%;
+    justify-content: center;
+    padding: $padding;
+  }
+
+  &--props {
+    padding: $padding;
+    border-left: 1px dotted $playground-border-color;
+    max-height: 25vh;
+    width: 50%;
+    overflow-y: auto;
+
+    .item {
+      margin: 10px;
+
+      &--label {
+        display: block;
+        padding-bottom: $padding;
+        font-weight: 700;
+      }
+
+      .ember-text-field {
+        border: 1px solid $playground-border-color;
+        padding: $padding;
+      }
+    }
+  }
+
+  &--code {
+    position: relative;
+    margin: 8px;
+    padding: $padding 0;
+    overflow-x: hidden;
+  }
+
+  &--code-copy {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+}
diff --git a/packages/@nucleus/app/styles/nucleus-docs.scss b/packages/@nucleus/app/styles/nucleus-docs.scss
@@ -5,3 +5,5 @@
 @import "./doc/custom-addon-theme";
 @import "./doc/custom-syntax-highlight";
 @import "./doc/nucleus-mod";
+@import "./doc/icon";
+@import "./doc/playground";
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground.js b/packages/@nucleus/tests/dummy/app/components/docs-playground.js
@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/code.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/code.js
@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import { action, computed, get } from '@ember/object';
+import { highlightCode } from 'ember-cli-addon-docs/utils/compile-markdown';
+import copyToClipboard from '../../utils/copy-to-clipboard';
+
+
+class Code extends Component {
+  @computed('code')
+  get computedCode() {
+    return highlightCode(get(this, 'code'), 'hbs');
+  }
+
+
+  @action
+  copyCode() {
+    copyToClipboard(get(this, 'code'))
+        .then(this.flashMessages.success(`Code copied.`));
+  }
+}
+
+export default Code;
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+    tagName: ''
+});
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/props.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/props.js
@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { action } from '@ember/object';
+
+class Props extends Component {
+  @action
+  handleChange(property, e) {
+    let value = (property.toggle) ? e.target.checked : e.target.value;
+    this.onchange(property.name, value, e);
+  }
+
+}
+
+export default Props;
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js
@@ -0,0 +1,121 @@
+import Component from '@ember/component';
+import { get, set, action } from "@ember/object";
+import {
+  registerComputedProperties,
+  handlePropertyChange,
+  generateCode
+} from '../../utils/playground';
+
+import icons from '../../constants/icons';
+
+const PROPERTIES = [
+  {
+    name: 'label',
+    input: true,
+    value: 'Click here',
+  },
+  {
+    name: 'variant',
+    select: true,
+    value: 'primary',
+    types: [
+      'primary',
+      'secondary',
+      'danger',
+      'link',
+      'text'
+    ]
+  },
+  {
+    name: 'size',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'small',
+      'mini'
+    ]
+  },
+  {
+    name: 'block',
+    toggle: true,
+    value: false,
+  },
+  {
+    name: 'disabled',
+    toggle: true,
+    value: false,
+  },
+  {
+    name: 'icon',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      ...icons
+    ]
+  },
+  {
+    name: 'iconSize',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'medium',
+      'small',
+      'mini'
+    ]
+  },
+  {
+    name: 'iconOnly',
+    toggle: true,
+    value: false,
+  }
+]
+class Playground extends Component {
+  properties = PROPERTIES;
+
+  code = null;
+
+  init() {
+    super.init(...arguments);
+    registerComputedProperties(this, get(this, 'properties'));
+    this._generateCode();
+  }
+
+  @action
+  onchange(name, value) {
+    let properties = get(this, 'properties');
+
+    if (name === 'iconOnly' && !name.value) {
+      this._handleIconOnly(properties);
+    }
+
+    handlePropertyChange(properties, name, value);
+    this._generateCode();
+  }
+
+
+  _generateCode() {
+    set(this, 'code', generateCode({
+      component:'nucleus-button',
+      properties: get(this, 'properties'),
+      multiline: true
+    }));
+  }
+
+  _handleIconOnly(properties) {
+     let changables = ['label', 'variant', 'icon'];
+      let [
+        label,
+        type,
+        icon
+      ] = properties.filter(prop => changables.includes(prop.name));
+
+      set(label, 'value', '');
+      set(type, 'value', 'text');
+      set(icon, 'value', (icon.value === 'none') ? icon.types[1] : icon.value);
+  }
+}
+
+export default Playground;
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js
@@ -1,23 +1,24 @@
 // BEGIN-SNIPPET nucleus-icon.js
 import Component from '@ember/component';
-
-const ICON_LIST = [
-  "nucleus-circle-check",
-  "nucleus-circle-cross",
-  "nucleus-circle-help",
-  "nucleus-circle-info",
-  "nucleus-circle-minus",
-  "nucleus-circle-plus",
-  "nucleus-cross-thin",
-  "nucleus-cross"
-];
+import { inject } from '@ember/service';
+import copyToClipboard from '../../utils/copy-to-clipboard';
+import icons from '../../constants/icons';
 
 export default Component.extend({
+  flashMessages: inject(),
+
   icons: null,
 
   init() {
     this._super(...arguments);
-    this.set('icons', ICON_LIST)
+    this.set('icons', icons)
+  },
+
+  actions: {
+    copyIcon(icon) {
+      copyToClipboard(icon)
+        .then(this.flashMessages.success(`Copied '${icon}' to clipboard`));
+    }
   }
 });
 // END-SNIPPET
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js
@@ -0,0 +1,67 @@
+import Component from '@ember/component';
+import { get, set, action } from "@ember/object";
+import {
+  registerComputedProperties,
+  handlePropertyChange,
+  generateCode
+} from '../../utils/playground';
+import icons from '../../constants/icons';
+
+
+const PROPERTIES = [
+  {
+    name: 'name',
+    select: true,
+    value: 'nucleus-circle-check',
+    types: icons
+  },
+  {
+    name: 'size',
+    select: true,
+    value: 'large',
+    types: [
+      'small',
+      'medium',
+      'large'
+    ]
+  },
+  {
+    name: 'variant',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'danger',
+      'success'
+    ]
+  }
+]
+
+class Playground extends Component {
+  properties = PROPERTIES;
+
+  code = null;
+
+  init() {
+    super.init(...arguments);
+    registerComputedProperties(this, get(this, 'properties'));
+    this._generateCode();
+  }
+
+  @action
+  onchange(name, value) {
+    handlePropertyChange(get(this, 'properties'), name, value);
+    this._generateCode();
+  }
+
+
+  _generateCode() {
+    set(this, 'code', generateCode({
+      component: 'nucleus-icon',
+      properties: get(this, 'properties')
+    }));
+  }
+}
+
+export default Playground;
+