nx-extensions icon indicating copy to clipboard operation
nx-extensions copied to clipboard

Stencil Storybook: No render the component

Open pookdeveloper opened this issue 3 years ago • 2 comments

I have built the stencil library, but doesn't render in stroybook

// mpf-button.stories.js

export default {
  title: 'Components/MpfButton',
  parameters: {
    markdown: readme,
  },
};

export const Default = () => `
  <mpf-button color="primary" button-type="solid"></mpf-button>
`;

image

image

pookdeveloper avatar Apr 05 '22 10:04 pookdeveloper

I'm also facing the same issue, any update on this issue ? or any workaround that I can use to fix this issue ?

sandeeppatidar30 avatar Apr 19 '22 11:04 sandeeppatidar30

@sandeeppatidar30 Change the preview like this:

import { getHostRef, registerHost, renderVdom, } from '@stencil/core/internal/client';
import { defineCustomElements } from '../../../dist/libs/lib-ui-web-components/loader';
import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
import docJson from '../../../dist/libs/lib-ui-web-components/path/to/docs.json'
if(docJson) setStencilDocJson(docJson);

defineCustomElements();

export const parameters = {
  //actions: { argTypesRegex: "^on[A-Z].*" },
  actions: { argTypesRegex: '^on.*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
    hideNoControlsWarning: true
  }
}

pookdeveloper avatar Apr 20 '22 15:04 pookdeveloper