Storybook is having trouble with the Stencil camelCase @Prop feature

Question

Storybook is having trouble with the Stencil camelCase @Prop feature

I'm currently working on a story within Storybook for a Stencil component. It appears that all props function as expected when they are in lowercase. However, when a prop is written in camelCase, it doesn't seem to work properly. I've attempted using both camelCase and 'dash-case', but nothing seems to resolve the issue.

The Stencil component code:

import {Component, Prop, h} from '@stencil/core';

@Component({
  tag: 'text-input',
  shadow: true,
})
export class TextInput {
  @Prop() label: string;
  @Prop() inputId: string;

  render() {
    return (
      <div class="text-input">
        <label htmlFor={this.inputId}>{this.label}</label>
        <input type="text" id={this.inputId} />
      </div>
    )
  }
}

The corresponding Storybook story:

export default {
  title: 'Components/Text Input',
  argTypes: {
    label: {control: 'text'},
    inputid : {control: 'text'},
  }
};

const Template = (args) => {
  let tag = `<text-input label="${args.label}" inputId="${args.inputid}"></text-input>`;
  return tag
};

export const Default = Template.bind({});
Default.args = {
  label: 'First name:',
  inputid: 'Input1'
};

In this case, inputId is the problematic prop while label works perfectly fine. Even renaming

inputId="${args.inputid}"

to

input-id="${args.inputid}"

does not resolve the issue. The only solution is to change the Stencil prop to all-lowercase inputid.

Any insights on how to address this challenge? Is there a way to maintain Stencil props in camelCase format and have them function correctly in Storybook?

javascript typescript storybook stenciljs

Answer 1

Answer №1

It could be related to how you're formatting your argTypes and Default arguments, for instance, "inputid" is all in lowercase. You might want to consider trying the following adjustments:

export default {
  title: 'Components/Text Input',
  argTypes: {
    label: {control: 'text'},
    inputId : {control: 'text'},
  }
};

const Template = (args) => {
  let tag = `<text-input label="${args.label}" inputId="${args.inputId}"></text-input>`;
  return tag
};

export const Default = Template.bind({});
Default.args = {
  label: 'First name:',
  inputId: 'Input1'
};

You could also try creating your template without using string concatenation. For example:

const Template = ({ label, inputId }) => {
  const element = document.createElement('text-input');
  element.label = label;
  element.inputId = inputId;
  return rootEl;
};

This approach will simplify things when passing parameters of a different type than string.

Answer 2

It could be related to how you're formatting your argTypes and Default arguments, for instance, "inputid" is all in lowercase. You might want to consider trying the following adjustments:

export default {
  title: 'Components/Text Input',
  argTypes: {
    label: {control: 'text'},
    inputId : {control: 'text'},
  }
};

const Template = (args) => {
  let tag = `<text-input label="${args.label}" inputId="${args.inputId}"></text-input>`;
  return tag
};

export const Default = Template.bind({});
Default.args = {
  label: 'First name:',
  inputId: 'Input1'
};

You could also try creating your template without using string concatenation. For example:

const Template = ({ label, inputId }) => {
  const element = document.createElement('text-input');
  element.label = label;
  element.inputId = inputId;
  return rootEl;
};

This approach will simplify things when passing parameters of a different type than string.

Storybook is having trouble with the Stencil camelCase @Prop feature

Answer №1

Similar questions

Unraveling functions from a JavaScript promise in a web application using ExpressJS and NeDB

The issue of "URLSearchParams not being defined" arises during test execution using jest

Identify the specific button that triggers a JavaScript function

Having trouble updating the DataTable with extra details retrieved from a new URL

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

"Reposition all elements contained within a div that have a specific class

"Vue.js integrates seamlessly with Tracking.js for advanced tracking

How can you exclude selected values in React-select?

404 error occurs when attempting to load SVG files in Webpack 2

Setting a cookie using express.js with a 'j' prefix

What causes the AngularJS variable to receive a null value following an HTTP request?

Using the plus operator in Typescript is not compatible with the type of functions

Tips for checking errors during the process of WRITING data to a stream

In ReactJs, inputs are considered void element tags which means they should not contain any `children` or utilize the `dangerouslySetInnerHTML` attribute

jQuery siblings toggling issue unresolved

React: The difference between exporting components as default anonymously or with a name

Is there a way to apply multiple nested criteria to filter an object effectively?

Issues persist with AJAX call to servlet

Steps for Creating a Private Constructor in a Module while Allowing External Construction

Effortless Route Loading in React Using Typescript's AsyncComponent for Dynamic Loading