How to create a new component.mdx

import { Meta } from '@storybook/blocks';

How to create a new component

To create a new web component follow these steps:

• Create a new folder for the component's source code inside src/components. The folder name should match the element's tag name, using kebab-case (e.g., swc-newcomponent).
• Inside the new folder, create a TypeScript file (swc-newcomponent.ts), a Sass file (swc-newcomponent.scss) and the Storybook file (SwcNewComponent.stories.ts).

swc-newcomponent.ts Use the following code as a starting point for the TypeScript file:

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { styles } from './swc-amount.css.js';

@customElement('swc-newcomponent')
export class SwcNewComponent extends LitElement {
  static styles = styles;

  render() {
    return html`
      <div><slot></slot></div>
    `;
  }
}

swc-newcomponent.scss: Use the following code as a starting point for the Sass file:

@import '../../scss/abstracts/mixins';
@import '../../scss/abstracts/variables';

SwcNewComponent.stories.ts: This file will be used to showcase the examples and variations of the component. Use the following code as a starting point for the Storybook file:

import { Meta, StoryFn } from '@storybook/web-components';
import { html } from 'lit-html';
import { SwcButton } from './swc-button';

export default {
  title: 'Components/NewComponent',
  component: 'swc-newcomponent', //component tag
} as Meta;

const Basic: StoryFn<Partial<SwcNewComponent>> = (args) => {
  return html`<swc-newcomponent label="${args.label || ''}"></swc-newcomponent>`;
};

export const Default = Basic.bind({});
Default.args = {
  label: 'anything',
};

• Add a line to the src/index.ts file to easily export your new component. At the end of the file, add the following line (using the actual component name you used):

export { SwcNewComponent } from './components/swc-newcomponent/swc-newcomponent';

• Finally, run npm run dev and npm run storybook (in another terminal) to start the development server. This will build and watch for changes in your files.

By following these steps, you should be able to create a new web component using the simple-webcomponents stack.