cludo-search-components

Contributing to the Library

For detailed contribution guidelines, please see our Confluence documentation.

Important Notes

• @cludosearch vs @cludo: For new features on the @cludosearch version (the version published on npm), base your branch off npm-migration-updates. The main branch is for the older @cludo version.
• Upgrading your project from @cludo to @cludosearch? See the migration guide for important information and best practices.

Local Development

Working with React Search Controller

Prerequisites

• A local project in the Cludo.CustomerTemplates repository
• Yalc installed globally: npm i yalc -g

Setup Steps

1. Clone and create a branch

   • Clone the cludo-search-components repository
   • Create a new feature branch following the naming convention: [f|h]/[JIRA-ID]-description
     • f/ for features, h/ for hotfixes
     • Example: f/REACT-32-new-categorized-serp-component

2. Prepare the library for local development

   cd cludo-search-components
   npm install
   npm i yalc -g
   yalc publish

3. Link to your local project

   cd /path/to/your/customer-template
   yalc link @cludosearch/cludo-search-components
   cludosearch dev

4. Develop and test

   • Make changes in the cludo-search-components directory
   • When ready to test changes:

     npm run build
     yalc publish --push

   • Your linked project will automatically recompile with the changes
   • Refresh your browser to see the updates

5. Cleanup when done

   yalc remove @cludosearch/cludo-search-components
   npm install @cludosearch/cludo-search-components

Working with React Search Core (Vite Projects)

1. Create a Vite project

   npm create vite@latest .

   Select React + TypeScript when prompted

2. Initialize React Search Core Follow the documentation to set up React Search Core

3. Link with Yalc Follow steps 2-4 from the React Search Controller section above

4. Configure Vite for local development Add to your vite.config.ts:

   optimizeDeps: {
     include: ["@cludosearch/cludo-search-components"],
   }

5. Clear Vite cache if needed If changes aren't appearing:

   rm -rf node_modules/.vite && rm -rf node_modules/.cache/vite

Publishing a New Version

Version Bumping

Update the version number before merging:

npm version [major|minor|patch]

Documentation: npm version

Automatic Publishing to NPM

When a pull request is merged into the npm-migration-updates branch, the package is automatically published to the public npm registry using GitHub Actions.

Important: The version in package.json must be updated before merging. If the version is not updated, the merge will be blocked by a GitHub Actions check.

Beta Versions

To publish a beta version for testing (manual):

1. Append -beta.0 to the version (e.g., 1.0.75-beta.0)
2. Publish with: npm publish --tag beta
3. Install in consuming project: npm install @cludosearch/[email protected]

Running Storybook Locally

Versions 0.18.3+ include Storybook documentation:

npm install
npm run storybook