booksbirdcomponents

Dependencies

Use yarn to install all dependencies and prepare husky (used to run scripts in git steps).

Folder Structure

• lib: files that will be compiled and published in the wpcomponents package
• src: local development

How to Create a New Component in the Package

• Create a new folder in lib/packages, with your component name. Example: MyComponent;
• Create a .tsx file inside this new folder and export a component from there. Example:

// lib/packages/MyComponent/MyComponent.tsx

export const MyComponent = () => {
  return <h1>My Component</h1>
}

• Export the new component in lib/main.ts. Example:

// lib/main.ts

export { MyComponent } from './packages/MyComponent/MyComponent'

• Create a new file called <component-name>Example.tsx in src/examples and import your component. Example:

// src/examples/MyComponentExample.tsx

import { MyComponent } from '../../lib/main'

export const MyComponentExample = () => {
  return (
    <div className="my-component-example-container">
      <MyComponent />
    </div>
  )
}

• Export the new example component in src/index.ts. Example:

// src/examples/index.ts

export { MyComponentExample } from './MyComponentExample'

• Run yarn dev;
• Open the localhost link in the terminal;
• Choose your component in the sidebar. Now, you can develop your component and test it with fast refresh.

import { MyComponent } from 'wpcomponents'
import 'wpcomponents/dist/styles/my-component.global.css' // If you are using css