feat(Storybook): extend storybook for developer focused demo - #315 #382

98lenvi · 2020-04-13T19:37:25Z

Issue #315 #376

Complete support added for Cicero-UI components in Storybook.

Preview available here

Changes

Extended webpackconfig of storybook's default configuartion
- Added sass loader
- Excluding jsdom
- Added config to ignore core Node APIs (fs,net,tls) during build.
Moved storybook and related dependencies to dev-dependencies.
Added netlify.toml to netlify to storybook build

Previously added, now removed-

Added CleanWebpackPlugin()
Added HtmlWebpackPlugin
Added MiniCssExtractPlugin

Flags

Need to add the following (DONE)

Related Issues

Issue Developer Focused Demo #315
Issue Netlify Build of Storybook Demo #356
Issue Storybook packaged as a dependency #376
Pull Request feat(*): add storybook for developer focused demo - I315 #353
Pull Request [WIP]feat(*): developer focused demo using StoryBook - I315 #335
Pull Request fix(*): add netlify.toml to show storybook build in netlify - #356 #358

Signed-off-by: lenvi <lenvin@oykuapp.com>

98lenvi · 2020-04-14T11:55:22Z

@irmerk, I hope it's complete now. Can you please go through it and let me know if anything needs to be added / modified

Signed-off-by: lenvi <lenvin@oykuapp.com>

DianaLease

Added a few comments. Also, is there a way to see the netlify build of storybook for this PR?

DianaLease · 2020-04-14T17:23:01Z

.storybook/main.js

+        template: "demo/src/index.html",
+        mountId: "demo",
+        title: "YES"


Can we make the title something like "Cicero UI Components Demo"?

Sure, Will do it right away!

DianaLease · 2020-04-14T17:25:47Z

demo/src/index.js

@@ -203,3 +203,6 @@ function Demo() {
 }

 render(<Demo/>, document.querySelector('#root'));
+
+//For usage with Storybook (temporary)


What does this comment mean? Is it temporary because we will make a new "Demo" component for storybook instead of using the existing one?

I had added lines 207 & 208 in this commit. It was added to export the Demo component to be used with storybook for testing.

I have now reverted the changes (i.e. I have now removed line 207 & 208) now as Demo is no longer needed in Storybook.

Signed-off-by: lenvi <lenvin@oykuapp.com>

98lenvi · 2020-04-15T11:05:11Z

Added a few comments. Also, is there a way to see the netlify build of storybook for this PR?

@DianaLease I will be adding a netlify.toml file for that in a commit.

Signed-off-by: lenvi <lenvin@oykuapp.com>

…build - i315 Signed-off-by: lenvi <lenvin@oykuapp.com>

jolanglinais · 2020-04-15T13:10:49Z

This is super exciting @98lenvi, great work. Looking into the code now.

jolanglinais · 2020-04-15T13:35:13Z

In the Notes tab for most of these, we'll want to make sure to format some things to make it consistent with the .md format here in the GitHub repo. Example is the main Demo which has the README.md from the main repo here, and the table for Ecosystem > Core libraries is a bit off.

dselman · 2020-04-15T13:54:59Z

In the Notes tab for most of these, we'll want to make sure to format some things to make it consistent with the .md format here in the GitHub repo. Example is the main Demo which has the README.md from the main repo here, and the table for Ecosystem > Core libraries is a bit off.

Let's try to avoid duplication as much as possible to keep things maintainable. E.g. link to the existing README.md.

jeromesimeon

LGTM. Question about the netlify configuration.

jeromesimeon · 2020-04-15T17:02:33Z

netlify.toml

@@ -0,0 +1,43 @@
+# Settings in the [build] context are global and are applied to all contexts


Do we need a netlify configuration? We don't do that on any of our projects -- should it be instead done within netlify itself.

Yes, it can be done in Netlify instead.

Signed-off-by: lenvi <lenvin@oykuapp.com>

98lenvi · 2020-04-15T20:00:11Z

In the Notes tab for most of these, we'll want to make sure to format some things to make it consistent with the .md format here in the GitHub repo. Example is the main Demo which has the README.md from the main repo here, and the table for Ecosystem > Core libraries is a bit off.

I will look into that, can't understand why the formatting looks off. @irmerk

Let's try to avoid duplication as much as possible to keep things maintainable. E.g. link to the existing README.md.

Done in the latest commit. @dselman

jolanglinais · 2020-04-16T13:56:54Z

I'm thinking we get this in and start iterating on it to stop blocking this PR. Just need to make sure local development of ContractEditor still works as we expect.

98lenvi · 2020-04-16T14:08:46Z

@irmerk Sure! I just need to work on one more commit to add knobs to ContractEditor story ( I missed the lockText and readOnly props)

Signed-off-by: Lenvin Gonsalves <lenvin@oykuapp.com>

98lenvi · 2020-04-16T14:25:16Z

@irmerk, I made the changes, i.e. add readOnly knob. For some reason, lockText doesn't work via a knob. Even if I declare it as a state variable and change its value, there is no effect on the ContractEditor.

DianaLease · 2020-04-16T15:48:05Z

@irmerk, I made the changes, i.e. add readOnly knob. For some reason, lockText doesn't work via a knob. Even if I declare it as a state variable and change its value, there is no effect on the ContractEditor.

This sounds similar to an issue we had with the old version of slate where prop changes wouldn't re-render the editor. It was working for me with the new slate when we had a toggle switch though that updated the value of lockText. Let me try again locally with a toggle and reconfirm.

EDIT: @98lenvi looks like this is a separate issue. I'll look into it!

jolanglinais · 2020-04-16T22:47:25Z

Confirming this works for local development (npm run storybook instead of npm run start)

jolanglinais

I think this is a good first step, second 👀 @DianaLease?

DianaLease

Awesome!

98lenvi added 2 commits April 14, 2020 00:46

feat(storybook): Add webpack config - i315

f86cf62

Signed-off-by: lenvi <lenvin@oykuapp.com>

feat(storybook): Add demo file to ContractEditor story - i315

f08ec5c

Signed-off-by: lenvi <lenvin@oykuapp.com>

jolanglinais assigned 98lenvi Apr 13, 2020

jolanglinais added Difficulty: Challenging Type: Feature Request 🛍️ New feature or request labels Apr 13, 2020

jolanglinais modified the milestone: Testing UI Apr 13, 2020

98lenvi added 5 commits April 14, 2020 15:45

feat(storybook): Add TemplateLibrary story - i315

64c5e34

Signed-off-by: lenvi <lenvin@oykuapp.com>

feat(storybook): Add Navigation story - i315

e6a7f2e

Signed-off-by: lenvi <lenvin@oykuapp.com>

feat(storybook): Add ErrorLogger story - i315

7a283f6

Signed-off-by: lenvi <lenvin@oykuapp.com>

feat(storybook): Add ContractEditor story - i315

6e13998

Signed-off-by: lenvi <lenvin@oykuapp.com>

feat(storybook): Add Demo story - i315

d46734e

Signed-off-by: lenvi <lenvin@oykuapp.com>

98lenvi changed the title ~~[WIP] feat(Storybook): extend storybook for developer focused demo - #315~~ feat(Storybook): extend storybook for developer focused demo - #315 Apr 14, 2020

refactor(package.json): move storybook & related dep. to dev-dep - i376

9b86c59

Signed-off-by: lenvi <lenvin@oykuapp.com>

jolanglinais requested review from jeromesimeon, dselman, jolanglinais, DianaLease, Michael-Grover and mttrbrts April 14, 2020 15:38

DianaLease suggested changes Apr 14, 2020

View reviewed changes

98lenvi added 2 commits April 15, 2020 16:26

fix(storybook): Change title to 'Cicero UI Components Demo' - i315

6139ff0

Signed-off-by: lenvi <lenvin@oykuapp.com>

refactor(demo): Revert changes done in f08ec5c - i315

ec08792

Signed-off-by: lenvi <lenvin@oykuapp.com>

98lenvi added 2 commits April 15, 2020 16:37

feat(*): add netlify.toml to show storybook build in netlify - i315

2f4e3ad

Signed-off-by: lenvi <lenvin@oykuapp.com>

fix(storybook): Fix webpack_config that caused issue with production …

9fa29bd

…build - i315 Signed-off-by: lenvi <lenvin@oykuapp.com>

jeromesimeon reviewed Apr 15, 2020

View reviewed changes

refactor(storybook): use docs provided with component - i315

2aaf1f3

Signed-off-by: lenvi <lenvin@oykuapp.com>

fix(storybook): add knobs for props of ContractEditor - i315

437288b

Signed-off-by: Lenvin Gonsalves <lenvin@oykuapp.com>

jolanglinais approved these changes Apr 16, 2020

View reviewed changes

DianaLease approved these changes Apr 17, 2020

View reviewed changes

jolanglinais merged commit 7a58403 into accordproject:master Apr 17, 2020

jolanglinais mentioned this pull request Apr 17, 2020

fix(*): add netlify.toml to show storybook build in netlify - #356 #358

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Storybook): extend storybook for developer focused demo - #315 #382

feat(Storybook): extend storybook for developer focused demo - #315 #382

98lenvi commented Apr 13, 2020 •

edited

Loading

98lenvi commented Apr 14, 2020

DianaLease left a comment

DianaLease Apr 14, 2020

98lenvi Apr 15, 2020

DianaLease Apr 14, 2020

98lenvi Apr 15, 2020

98lenvi commented Apr 15, 2020

jolanglinais commented Apr 15, 2020

jolanglinais commented Apr 15, 2020

dselman commented Apr 15, 2020

jeromesimeon left a comment

jeromesimeon Apr 15, 2020

98lenvi Apr 15, 2020

98lenvi commented Apr 15, 2020

jolanglinais commented Apr 16, 2020

98lenvi commented Apr 16, 2020

98lenvi commented Apr 16, 2020

DianaLease commented Apr 16, 2020 •

edited

Loading

jolanglinais commented Apr 16, 2020

jolanglinais left a comment

DianaLease left a comment

		@@ -0,0 +1,43 @@
		# Settings in the [build] context are global and are applied to all contexts

feat(Storybook): extend storybook for developer focused demo - #315 #382

feat(Storybook): extend storybook for developer focused demo - #315 #382

Conversation

98lenvi commented Apr 13, 2020 • edited Loading

Issue #315 #376

Preview available here

Changes

Flags

Related Issues

98lenvi commented Apr 14, 2020

DianaLease left a comment

Choose a reason for hiding this comment

DianaLease Apr 14, 2020

Choose a reason for hiding this comment

98lenvi Apr 15, 2020

Choose a reason for hiding this comment

DianaLease Apr 14, 2020

Choose a reason for hiding this comment

98lenvi Apr 15, 2020

Choose a reason for hiding this comment

98lenvi commented Apr 15, 2020

jolanglinais commented Apr 15, 2020

jolanglinais commented Apr 15, 2020

dselman commented Apr 15, 2020

jeromesimeon left a comment

Choose a reason for hiding this comment

jeromesimeon Apr 15, 2020

Choose a reason for hiding this comment

98lenvi Apr 15, 2020

Choose a reason for hiding this comment

98lenvi commented Apr 15, 2020

jolanglinais commented Apr 16, 2020

98lenvi commented Apr 16, 2020

98lenvi commented Apr 16, 2020

DianaLease commented Apr 16, 2020 • edited Loading

jolanglinais commented Apr 16, 2020

jolanglinais left a comment

Choose a reason for hiding this comment

DianaLease left a comment

Choose a reason for hiding this comment

98lenvi commented Apr 13, 2020 •

edited

Loading

DianaLease commented Apr 16, 2020 •

edited

Loading