dutscher / stencil-storybook Goto Github PK

Hello,

Thanks a lot for the setup. Looks great!

I tried starting it but its tying to import something that its not being exported

Hey,
First of all thanks for the great setup.

I'm having issues with HMR and changing the scss variables.
For example changing the $color-primary, the change doesn't affect the component in storybook. Even reloading doesn't help and only after restarting the storybook/stencil combo the change is visible. I did also try this with CSS variables in _variables.scss file (did not work) or in init.scss (showed up in component after refresh). So my guess is it has something to do with the sass plugin and injectGlobalPaths.

I did try to follow how it all works but couldn't figure it out past where Stencil Dev Server Connector 2.0.3 gets injected into the storybook html.
Any idea how to get HRM working for CSS/SCSS variables?

Cheers

Hi :)

Less of an ‘issue’ and more of a question. I was wondering if you had any suggestions on creating multiple dists. I have some ‘extra’ components that i’ve made specifically to have as a sandbox area on storybook, so I want them in the dist for the storybook build, but I don’t want them in the dist-stencil that I am publishing on the npm package. Was wondering if you had any ideas or suggestions.

Thank you

The stencil-to-storybook generation is restrictive and requires the following criteria in order to generate stencil-stories.ts with all the props added:

Props must have jsdoc comments
The comments must be on one line
The prop names must be lowercase

Is there a reason for this or can I submit a PR to allow scenarios like this:

/**
 * Specify size limit in Kb
 * */
@Prop() maxFileSize

and also for props with no comments.

Not sure if any contributors are still active but found this to be a cool project and I was wondering if there were any plans on adding a license. Would be nice to play with but cannot find any license on the repo and this [https://opensource.stackexchange.com/questions/1720/what-can-i-assume-if-a-publicly-published-project-has-no-license] says I'm only really allowed to look, which scares me off a bit. Is this done purposely or are there plans to add an open-source license?

Thanks for the time!

Just change the name of any property in your demo application, for example, replace first ->>> firstR, and that property will not be bound to the DOM properly.

Hello @dutscher and thank you so much for creating this package! ❤️

I see that it supports Stencil v2 but our organization can't quite move to v2 just yet, so we're on the latest version of v1. Would this package work with the latest v1?

Thanks for any information.

Hi there,

First of all, thanks a lot for this setup. It's great!

I am running into a problem where my components can't be resolved when I try to import them in my ionic project.

Some more info:

• I am building my Stencil project with yarn build:stencil
• I ran yarn link in my Stencil project
• I ran yarn link <project-name> in my ionic vue project
• I am importing the web component with

import { MyComponent } from "<project-name>"

When I load the page, I see the following error in the console: Failed to resolve component: MyComponent

Am I missing something here

First of all @dutscher , thanks for this!

Can you tell me how can I print out more info about an event in the Actions section?

Now, no matter I click I get something like this

In the example story there is a section about slots that I don't quite understand:

export const Slots = setupComposition(
  `<slot's />`,
  () => h`
  ${['Slot eins', 'Slot dva'].map((slot) => h`${Story.tplComposition({ slot })}<br>`)}
`,
);

I've played around with it but I don't seem to be able to get it working. The first parameter is supposed to be the name of slot you want to use? Any elaboration would be greatly appreciated.

My component:

<Host
  onClick={this.handleClick}
>
  <TagType
    {...attributes}
    class={this.buttonClasses}
    disabled={disabled}
    onFocus={this.onFocus}
    onBlur={this.onBlur}
    {...inheritedAttributes}
  >
    <slot name="left" />
    <slot name="label">
      <span>{label}</span>
    </slot>
    <slot name="right" />
  </TagType>
</Host>

What would I have to pass to setupComposition in order to render some lit-html in the left slot?

Thanks for this - we're using it for our project.
Having an issue with chromatic though, in that the stencil [app].esm.js and css files are not in dist-storybook
Locally the proxy.js works to replace those urls, but on chromatic we get 404s
We're looking into it but want to ask here to see if this should work and if we're missing something?