Using Web Components in React Framework

[gkamlesh21]

Discussed in #18191

^{Originally posted by gkamlesh21 May 11, 2022}
Hello Team, We have created a library using web components framework in storybook UI. Our purpose is to server that library in React and Angular. Is that possible to use cross framework in storybook UI.

Example.
AtomicButton.js

import { html } from 'lit-html';
import { styleMap } from 'lit-html/directives/style-map.js';
import './button.scss';

/**
 * Primary UI component for user interaction
 */
export const AtomicButton = ({ backgroundColor = null, type, label, onClick, disabled = false, fullWidth}) => {
  const mode = `storybook-button--${type || "primary"}`;
  return html`
    <button
      type="button"
      class="storybook-button ${mode} ${mode}${disabled ? `--disabled` : ''} ${fullWidth ? `fullWidth` :''}"
      style=${styleMap({ backgroundColor })}
      @click=${onClick}
    >
      ${label}
    </button>
  `;
};

export default AtomicButton;

---

//AtomicButton.stories.js
import { AtomicButton } from './AtomicButton'

// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
export default {
  title: 'Atoms/Button',
  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
    onClick: { action: 'onClick' },
    type: {
      control: { type: 'select' },
      options: ['primary', 'primarySecondary', 'secondary'],
    },
  },
};

// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
const Template = (args) => AtomicButton(args);

export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
Primary.args = {
  type: "primary",
  disabled: false,
  fullWidth:false,
  label: 'Primary Action',
};

---

//In React Framework - App.js
import logo from './logo.svg';
import './App.css';
import AtomicButton from "@ui-practice/atomic-ui-components";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <AtomicButton label="Click Me" backgroundColor="#ac3620"  primary />
      </header>
    </div>
  );
}

export default App;
</div>

[ndelangen]

If you choose the react framework, then wrap your web-components in react components, this should be do-able in storybook.

I guess you could do something similar for angular components as well?

It's not something we actively support.