[Bug]: Boolean controls break when attributes names use hyphens(-) in Lit about storybook

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To address the issue with hyphenated attribute names in Lit components, follow these steps:

1. Update Boolean Control:

   • Modify /code/lib/blocks/src/controls/Boolean.tsx to handle hyphenated attribute names.
   • Ensure the control correctly parses and maps hyphenated names to their corresponding properties.

2. Update Object Control:

   • Modify /code/lib/blocks/src/controls/Object.tsx similarly to handle hyphenated attribute names.
   • Ensure the control correctly parses and maps hyphenated names to their corresponding properties.

3. Test Changes:

   • Add test cases in /code/lib/blocks/src/controls/Boolean.stories.tsx and /code/lib/blocks/src/controls/Object.stories.tsx to verify the controls work with hyphenated attribute names.

Example modification in Boolean.tsx:

const parseAttributeName = (name) => name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());

const BooleanControl = ({ name, ...props }) => {
  const parsedName = parseAttributeName(name);
  // existing logic
};

References

/code/lib/blocks/src/controls/Boolean.stories.tsx
/code/lib/blocks/src/controls/Object.stories.tsx
/code/addons/controls
/code/addons/controls/src

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings