CLI: Add Ember stories and components #12304

tooppaaa · 2020-08-28T21:49:19Z

What I did

Add Ember components
Create Ember stories based on templates
Update CLI generator to allow raw copy

How to test

E2E

yarn build cli
yarn test:e2e-framework ember --use-local-sb-cli

I only did not manage to have components using the .css, I include them directly in *.stories.js with a comment
I have a feeling this is a fragile implementation as we rely on a folder structure with ember-cli, it may be acceptable.
@gossi I'll do whatever feedback you might have on this :)

gossi · 2020-08-28T22:28:42Z

Just looked roughly at the code. The code you used is one of the oldest ones in ember nowadays and nobody would do that any more. Please search for "Ember Octane" or go through the super rentals tutorial, you wanna use glimmer components with regular javascript classes. Please don't prefix components with storybook- - just do it without, it's a <Header>, a <Button> and whatever else :)

Also there is this one PR to link here: chromaui/learnstorybook.com#306 which kinda does something similar to here.
See the code for it: https://github.com/jonniebigodes/intro-to-storybook-with-ember

I think this enough for you to move into the right direction. Sorry if this is not more and precise. Atm my time just allows you to point at resources.

lib/cli/src/frameworks/ember/app/templates/components/storybook-button.hbs

lib/cli/src/frameworks/ember/stories/Button.stories.js

lib/cli/src/frameworks/ember/stories/Header.stories.js

lib/cli/src/frameworks/ember/stories/Page.stories.js

dbendaou · 2020-09-10T09:37:45Z

If you need to, I will be happy to help you on this merge request, either by doing the requested changes or while pairing on it! Let me know :)

tooppaaa · 2020-09-10T14:34:02Z

Hey !

Sorry, quite busy at work at the moment, if you can help that would be awesome !! Feel free to commit on this branch, I'm available on Discord if needed :)

I can't say when I'll be able to spend some time on this :(

dbendaou · 2020-09-10T15:14:36Z

Ok I'll try to work on this by the end of next week :) I'll keep you posted

dbendaou · 2020-09-16T07:53:17Z

FYI I've started to work on this I should be able to have a PR ready by Friday hopefully

dbendaou · 2020-09-16T16:14:08Z

Hey @tooppaaa, I've the PR in draft, how can I test/see that I didn't break anything of thoses files has it's not related to the ember-cli example ? Only E2E tests ?

tooppaaa · 2020-09-17T06:16:48Z

@dbendaou Hey ! Thanks for your PR.
You can run

yarn build cli
yarn test:e2e-framework ember --use-local-sb-cli

That will build your CLI and use it to create a sample project in a siblings folder to your storybook folder.
That will also launch cypress.

The idea is for you to initialize the project using this command, do your changes and test them using cypress with re-running the above command, it's smart enough to skip initialization.

Last bit is for you to check that the components are good looking :)

yannbf · 2020-10-12T21:50:38Z

Adding a comment here so stalebot stops bothering. Any updates on this?

dbendaou · 2020-10-13T09:28:03Z

Yes I'll finish my MR to update this one in the following days I didn't have any time so far unfortunately

tooppaaa · 2020-10-15T16:48:45Z

I know the feeling @dbendaou... Thanks for taking this one !

stale · 2020-12-25T13:55:21Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

github-actions · 2021-04-09T01:05:28Z

	Fails
🚫	PR is marked with "in progress" label.

Generated by 🚫 dangerJS against 4b7ec9f

gabrielcsapo · 2021-04-09T01:08:58Z

Working on this today @dbendaou!

…and cleans up addon examples.

gabrielcsapo · 2021-04-09T03:27:39Z

@dbendaou updated the example app and the shipped default code. How do I test the changes located in cli/src/frameworks? Running;

yarn build cli
yarn test:e2e-framework ember --use-local-sb-cli

fails with a typescript error.

dbendaou · 2021-04-09T08:03:39Z

examples/ember-cli/package.json

    "storybook": "yarn build && start-storybook -p 9009 -s ember-output",
    "storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
-    "storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
+    "storybook:dev": "echo 'run `yarn dev` in another terminal' && start-storybook -p 9009 -s ember-output"


Should be first ember to start then running start-storybook in another terminal WDYT? To avoid concurrency issues btw ember not ready and storybook consuming ember output

dbendaou · 2021-04-09T08:09:29Z

@gabrielcsapo I didn't achieve to run e2e neither with

yarn build cli
yarn test:e2e-framework ember --use-local-sb-cli

Maybe @tooppaaa could help on this

gossi

what's the difference between these folders:

lib/cli/src/frameworks/ember
examples/ember-cli

I only see the PR diff, haven't looked deeply into storybook code for this. Just wondering why there are two similar things in two different folders?

gossi · 2021-04-10T09:42:41Z

examples/ember-cli/app/components/welcome-banner.js

  /**
   * The hex-formatted color code for the background.
   * @argument backgroundColor
   * @type {string}
   * @default null
   */
-  backgroundColor: null,
+  backgroundColor = null;

  /**
   * The hex-formatted color code for the subtitle.
   * @argument subTitleColor
   * @type {string}
   */
-  subTitleColor: null,
+  subTitleColor = null;

  /**
   * The title of the banner.
   * @argument title
   * @type {string}
   */
-  title: null,
+  title = null;

  /**
   * The subtitle of the banner.
   * @argument subtitle
   * @type {string}
   */
-  subtitle: null,
-});
+  subtitle = null;


this is no longer valid code for glimmer components. In typescript you would put this into an WelcomeBannerArgs interface and then do export default class WelcomeBanner extends Component<WelcomeBannerArgs>.

gossi · 2021-04-10T09:44:09Z

examples/ember-cli/package.json

  },
  "dependencies": {
+    "@glimmer/component": "^1.0.0",


Suggested change

"@glimmer/component": "^1.0.0",

"@glimmer/component": "^1.0.4",

as of today we are at 1.0.4

gossi · 2021-04-10T09:46:47Z

examples/ember-cli/stories/addon-knobs.stories.js

-        subtitle=subtitle
-        click=(action onClick)
-      }}
+      <WelcomeBanner


shall we add a "deprecated" text here? With a link to use controls over knobs?

shilman · 2021-04-10T12:21:56Z

@gossi

the CLI folder is the template that gets copied over every time you run sb init on a new project
the examples/ember-cli is an example project that we use for internal testing when developing storybook

tooppaaa · 2021-04-10T21:30:17Z

@gabrielcsapo @dbendaou, the issue in the e2e is related to yarn2. I'll follow up with our expert: @gaetanmaisse

 Configuring Yarn 2
touch yarn.lock && yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6000/" } }' && yar
n config set unsafeHttpWhitelist --json '["localhost"]' && yarn config set pnpFallbackMode none && yarn config set enableGlobal
Cache true && yarn config set "packageExtensions.react-scripts@*.peerDependencies.react" "*" && yarn config set "packageExtensi
ons.react-scripts@*.dependencies.@pmmmwh/react-refresh-webpack-plugin" "*" && yarn config set nodeLinker node-modules
Unknown Syntax Error: Extraneous positional argument ("storybook:").

$ yarn config set [--json] [-H,--home] <name> <value>
� Configuring Yarn 2 failed
� an error occurred:
Error: command exited with code: 1

shilman · 2021-04-10T23:38:37Z

@tooppaaa I've fixed the lockfile:

merge in next
"accept their changes" for yarn.lock
run yarn

gabrielcsapo · 2021-04-17T03:49:40Z

Will update this this weekend. Sorry for the lag, had work priorities.

yannbf · 2021-10-18T15:31:49Z

Will update this this weekend. Sorry for the lag, had work priorities.

Hey @gabrielcsapo! I was wondering if you are still planning to continue with the PR?

MichaelArestad · 2021-11-29T15:28:27Z

Thanks everyone. I am closing this as it has been stale for some time. If you would like to further pursue this, just reopen the PR.

tooppaaa added maintenance User-facing maintenance tasks cli ember labels Aug 28, 2020

tooppaaa added this to the 6.1 essentials milestone Aug 28, 2020

tooppaaa requested review from gossi, shilman, yannbf, ndelangen and gaetanmaisse August 28, 2020 21:49

tooppaaa requested review from igor-dv and stijnkoopal as code owners August 28, 2020 21:49

yannbf mentioned this pull request Aug 29, 2020

CLI: update missing template examples to follow the new standard #12173

Closed

8 tasks

dbendaou requested changes Aug 31, 2020

View reviewed changes

dbendaou mentioned this pull request Sep 16, 2020

Updates syntax for CLI: add Ember stories and components #12496

Merged

stale bot added the inactive label Oct 12, 2020

stale bot removed the inactive label Oct 12, 2020

shilman modified the milestones: 6.1 essentials, 6.2 essentials Oct 13, 2020

stale bot added the inactive label Dec 25, 2020

tooppaaa requested review from thomasbertet, tmeasday, usulpro and z4o4z as code owners April 9, 2021 01:03

tooppaaa and others added 5 commits April 8, 2021 18:09

CLI: add ember components and stories

6db3ae8

update cli for ember

c54cadf

♻️ migrate component to new octane syntax

ad009f0

♻️ migrate handlebars to new angle bracket syntax

757be6b

♻️ migrate stories to use anglebracket syntax for components

358c3cd

gabrielcsapo force-pushed the feature/emberCli branch from 45b6570 to 358c3cd Compare April 9, 2021 01:12

[Updates] updates main example application to use glimmer components …

2f9f825

…and cleans up addon examples.

dbendaou reviewed Apr 9, 2021

View reviewed changes

gossi reviewed Apr 10, 2021

View reviewed changes

Merge branch 'next' into feature/emberCli

4b7ec9f

shilman assigned shilman and gabrielcsapo and unassigned shilman Nov 1, 2021

shilman added the needs followup label Nov 1, 2021

MichaelArestad closed this Nov 29, 2021

stof deleted the feature/emberCli branch May 25, 2022 09:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Add Ember stories and components #12304

CLI: Add Ember stories and components #12304

tooppaaa commented Aug 28, 2020 •

edited by gabrielcsapo

Loading

gossi commented Aug 28, 2020

dbendaou commented Sep 10, 2020 •

edited

Loading

tooppaaa commented Sep 10, 2020

dbendaou commented Sep 10, 2020

dbendaou commented Sep 16, 2020

dbendaou commented Sep 16, 2020

tooppaaa commented Sep 17, 2020

yannbf commented Oct 12, 2020

dbendaou commented Oct 13, 2020

tooppaaa commented Oct 15, 2020

stale bot commented Dec 25, 2020

github-actions bot commented Apr 9, 2021 •

edited

Loading

gabrielcsapo commented Apr 9, 2021

gabrielcsapo commented Apr 9, 2021

dbendaou Apr 9, 2021

dbendaou commented Apr 9, 2021

gossi left a comment

gossi Apr 10, 2021

gossi Apr 10, 2021

gossi Apr 10, 2021

shilman commented Apr 10, 2021

tooppaaa commented Apr 10, 2021 •

edited

Loading

shilman commented Apr 10, 2021

gabrielcsapo commented Apr 17, 2021

yannbf commented Oct 18, 2021

MichaelArestad commented Nov 29, 2021

	"@glimmer/component": "^1.0.0",
	"@glimmer/component": "^1.0.4",

CLI: Add Ember stories and components #12304

CLI: Add Ember stories and components #12304

Conversation

tooppaaa commented Aug 28, 2020 • edited by gabrielcsapo Loading

What I did

How to test

gossi commented Aug 28, 2020

dbendaou commented Sep 10, 2020 • edited Loading

tooppaaa commented Sep 10, 2020

dbendaou commented Sep 10, 2020

dbendaou commented Sep 16, 2020

dbendaou commented Sep 16, 2020

tooppaaa commented Sep 17, 2020

yannbf commented Oct 12, 2020

dbendaou commented Oct 13, 2020

tooppaaa commented Oct 15, 2020

stale bot commented Dec 25, 2020

github-actions bot commented Apr 9, 2021 • edited Loading

gabrielcsapo commented Apr 9, 2021

gabrielcsapo commented Apr 9, 2021

dbendaou Apr 9, 2021

Choose a reason for hiding this comment

dbendaou commented Apr 9, 2021

gossi left a comment

Choose a reason for hiding this comment

gossi Apr 10, 2021

Choose a reason for hiding this comment

gossi Apr 10, 2021

Choose a reason for hiding this comment

gossi Apr 10, 2021

Choose a reason for hiding this comment

shilman commented Apr 10, 2021

tooppaaa commented Apr 10, 2021 • edited Loading

shilman commented Apr 10, 2021

gabrielcsapo commented Apr 17, 2021

yannbf commented Oct 18, 2021

MichaelArestad commented Nov 29, 2021

tooppaaa commented Aug 28, 2020 •

edited by gabrielcsapo

Loading

dbendaou commented Sep 10, 2020 •

edited

Loading

github-actions bot commented Apr 9, 2021 •

edited

Loading

tooppaaa commented Apr 10, 2021 •

edited

Loading