feat(docs): Interactive playground component #140

prakash-chokalingam · 2020-02-27T11:53:47Z

Description

Added interactive playground for components

Sample:

Added icon tiles & copy functionality
Fixed few bugs on button component

packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js

shibulijack-fd · 2020-02-27T13:15:44Z

packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs

+
+  {{!-- code --}}
+  {{playground.codeblock code=code}}
+{{/playground/container}}


Can we restructure (& rename) the contextual components to look something like this:

{{#docs-playground as |p|}} {{!-- component --}} {{#p.container}} {{nucleus-button label=label.value variant=type.value size=size.value block=block.value disabled=disabled.value icon=icon.value iconSize=iconSize.value iconOnly=iconOnly.value }} {{/p.container}} {{!-- props --}} {{p.props onchange=(action 'onchange') properties=properties}} {{!-- code --}} {{p.codeblock code=code}} {{/docs-playground}}

shibulijack-fd · 2020-02-27T13:18:34Z

packages/@nucleus/tests/dummy/app/templates/components/playground/blank.hbs

@@ -0,0 +1 @@
+{{yield}}


This component can be avoided with the contextual components refactoring.

{{#docs-demo as |demo|}} <div class="playground-container"> <div class="playground-container--component"> {{yield (hash container=(component "playground/container"))}} </div> <div class="playground-container--props"> <h3>Properties</h3> {{yield (hash props=(component "playground/props"))}} </div> </div> <div class="playground-container--code"> {{yield (hash codeblock=(component "playground/code"))}} </div> {{/docs-demo}}

shibulijack-fd · 2020-02-27T13:23:02Z

packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs

+    {{/if}}
+
+    {{!-- input --}}
+    {{#if property.input}}


A single property cannot have both select and input flags right? In that case, can we refactor this to something like property.type and switch based on that?

shibulijack-fd · 2020-02-27T13:24:14Z

packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs

+
+    {{!-- input --}}
+    {{#if property.input}}
+      <Input


Also, can we have some basic styling for input to make it appear editable? I know we'll replace this with nucleus-input in the future, but it doesn't look like a text field at all now.

shibulijack-fd · 2020-02-27T13:25:01Z

packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs

+    {{!-- toggle --}}
+    {{#if property.toggle}}
+      <Input
+        @type="checkbox"


+1 for using angle bracket syntax! Looks super neat.

shibulijack-fd · 2020-02-28T18:55:18Z

packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs

+{{#docs-demo as |demo|}}
+  <div class="playground-container">
+    <div class="playground-container--component">
+      {{yield (hash component=(component "docs-playground/component"))}}


Is it just me or does naming a component "component" sounds confusing, especially with component template helper? Perhaps rename it to something like container?

I hope the name preview will provide more context here...

shibulijack-fd · 2020-02-28T18:59:04Z

packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs

+    {{/if}}
+
+    {{!-- input --}}
+    {{#if property.input}}


{{#else if}} to make sure only one component is rendered in case someone misconfigures. Also, the code is self explanatory that way.

shibulijack-fd · 2020-02-28T19:02:17Z

packages/@nucleus/app/styles/doc/_playgroud.scss

+
+      .ember-text-field {
+        border: 1px solid $playground-border-color;
+        padding: 5px;


width: 100%

shibulijack-fd · 2020-02-28T19:11:49Z

packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js

+
+
+  _generateCode() {
+    let attributes = get(this, 'properties').map((prop) => {


Is it possible to move this mapping part into util as well? Seems to be duplicated.

shibulijack-fd · 2020-03-02T08:32:14Z

packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js

+  }
+
+  _handleIconOnly(properties) {
+     let changables = ['label', 'type', 'icon'];


type has been changed to variant. Please change the necessary code.

shibulijack-fd · 2020-03-02T08:36:03Z

packages/@nucleus/app/styles/doc/_playgroud.scss

+  &--component {
+    align-self: center;
+    width: 50%;
+    text-align: center;


This might affect the childrens' text-align and get applied to nucleus-components. Needs some looking into

shibulijack-fd · 2020-03-02T08:38:15Z

packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js

+  }
+
+  _handleIconOnly(properties) {
+     let changables = ['label', 'type', 'icon'];


type has been changed to variant. Can you please refactor?

shibulijack-fd · 2020-03-02T08:39:05Z

packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs

@@ -0,0 +1,16 @@
+{{#docs-demo as |demo|}}
+  <div class="playground-container">
+    <div class="playground-container--component">


Can we rename it to playground-container--preview for better clarity?

* origin/master: feat(docs): Interactive playground component (#140) fix(button): block btn issue (#147) Revert "chore: updated package versioning (#135)" (#144) fix(modal): added submit disabled to confirm-dialog (#146) fix(button): improvised styling (#137) chore: updated package versioning (#135)

prakash-chokalingam added 5 commits February 27, 2020 12:42

playground component initial commit

cd1ecdd

named params

39c6c4e

Checkbox fix

0448692

icon btn fix

d473625

revert naming

4f41ed0

prakash-chokalingam changed the title ~~[Docs] Adding interactive playground component for docs~~ [DOCS] Adding interactive playground component for docs Feb 27, 2020

prakash-chokalingam requested review from shibulijack-fd and rajasegar-c February 27, 2020 11:54

prakash-chokalingam self-assigned this Feb 27, 2020

prakash-chokalingam added the enhancement New feature or request label Feb 27, 2020

shibulijack-fd suggested changes Feb 27, 2020

View reviewed changes

review comments

8be3c9e

shibulijack-fd reviewed Feb 28, 2020

View reviewed changes

prakash-chokalingam added 2 commits February 29, 2020 23:32

Rename to preview

39ccab8

Merge branch 'master' into playground

da75c31

weekly-digest bot mentioned this pull request Mar 1, 2020

Weekly Digest (23 February, 2020 - 1 March, 2020) #142

Closed

shibulijack-fd changed the title ~~[DOCS] Adding interactive playground component for docs~~ feat(docs): Interactive playground component Mar 2, 2020

Changes

2d6d1d8

shibulijack-fd reviewed Mar 2, 2020

View reviewed changes

prakash-chokalingam and others added 6 commits March 4, 2020 13:02

Merge branch 'master' into playground

d3d26e5

Merge branch 'master' into playground

bdb7a48

fix: button variant prop

2630a9b

fix: updated styling

025d6a0

fix: overflow issue

e25f3fa

Merge branch 'master' into playground

31617c4

shibulijack-fd approved these changes Mar 6, 2020

View reviewed changes

rajasegar-c approved these changes Mar 6, 2020

View reviewed changes

shibulijack-fd merged commit 3daf9bf into master Mar 9, 2020

shibulijack-fd deleted the playground branch March 9, 2020 04:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(docs): Interactive playground component #140

feat(docs): Interactive playground component #140

prakash-chokalingam commented Feb 27, 2020

shibulijack-fd Feb 27, 2020

shibulijack-fd Feb 27, 2020

shibulijack-fd Feb 27, 2020

shibulijack-fd Feb 27, 2020

shibulijack-fd Feb 27, 2020

shibulijack-fd Feb 28, 2020

prakash-chokalingam Feb 29, 2020

shibulijack-fd Feb 28, 2020

shibulijack-fd Feb 28, 2020

shibulijack-fd Feb 28, 2020

shibulijack-fd Mar 2, 2020

shibulijack-fd Mar 2, 2020

shibulijack-fd Mar 2, 2020

shibulijack-fd Mar 2, 2020



		_generateCode() {
		let attributes = get(this, 'properties').map((prop) => {

		@@ -0,0 +1 @@
		{{yield}}

feat(docs): Interactive playground component #140

feat(docs): Interactive playground component #140

Conversation

prakash-chokalingam commented Feb 27, 2020

Description

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment