Wantable Headless Components

Technologies

Rollup

The components are processed and bundled by rollup. There is a script defined in the package.json file that runs the rollup -c command. This command uses the configuration set within the rollup.config.js file located in the root of the project repository.

TypeScript / React

The components are bundled with their respective type definition files index.d.ts. This allows the component user to use TypeScript if they so choose. Additionally, defining typed props within the components enforces the component prop requirements at development. The TypeScript definition settings are configured within tsconfig.json then bundled within the package using the settings configured in rollup.config.js.

TailwindCSS

The wantable-headless repository does not bundle any css within the packaged components. That said, TailwindCSS classes are present in the jsx of each component which allows their styles to be processed by the hh-wantable-theme Shopify Theme repository. All the TailwindCSS processing configuration is placed in the hh-wantable-theme repository's tailwind.config.js file.

Directories

• ./src - the main src directory for this component library
• ./src/components - the component folder will house all the component folders
• ./src/components/[ComponentName] - the respective component folders where each component will be housed, please use CapitalizedCamel case for the naming convention for these folders

Getting Started

1. Start by installing all the dependencies within this repository

yarn
# or
npm i

2. Once installed, you can start building out the components within their respective folders ./src/components/[ComponentName]

Building Components

1. Create a component directory

Create a directory within ./src/components using CapitalizedCamel case in the naming convention. For example: ./src/components/ExampleComponent

cd ./src & mkdir ExampleComponent

2. Create an index.ts file

Create an index.ts file inside the folder you've created. Within the file, export default and target the component folder.

export { default } from './ExampleComponent'

3. Create a corresponding component .tsx file

In the same folder, create a .tsx file of the same name as the directory. For example: ./src/components/ExampleComponent/ExampleComponent.tsx

Inside the new TypeScript file, create the functionality and logic for your component.

import React from "react";

// Declare types for your props
interface ExampleComponentProps {
    class: string;
    label: string;
}

const ExampleComponent = (props: ExampleComponentProps) => {
    // Ensure to use all props you've declared
    return <button className={props.class}>{props.label}</button>;
}

// Export the component appropriately using the same naming convention
export default ExampleComponent;

Connect your NPM account

For documentation on how to connect your npm account with the repository, please read: Half Helix - Wantable / Technical Documentation / wantable-headless / Connect your NPM Account

Governance

Please do not update or modify the following files:

• rollup.config.js - configuration file for rollup, used to bundle the component appropriately
• tsconfig.json - configuration file for TypeScript, this contains logic for parsing types and bundling type declarations with the compiled component code