Algolia UI library

A set of shareable, reusable UI components for Algolia interfaces, built in React. Complete list available here: https://algolia-ui-library.netlify.com/.

Migration guide from V2 to V3

Please read the detailed Migration guide for more details.

Purpose

The goal of this library is to provide a set of React UI components that can be easily integrated into any Algolia project.

The design of these components is identical to the design found on algolia.com. The styles are using Algolia's custom version of Fragments.js.

Usage

1. Run one of the following commands in your project, depending on your package manager:

npm install @algolia/ui-library --save

yarn add @algolia/ui-library

2. Use the UI components like this:

import React from 'react';
import { Button, Text } from '@algolia/ui-library';

const MyComponent = () => (
  <div>
    <Text>This is some text</Text>
    <Button>This is a button</Button>
  </div>
);

export default MyComponent;

Specific case: CodeSample component

For the CodeSample component (located at src/components/CodeSample), you'll need to generate static JSON files located at src/components/CodeSample/generatedHtml in order to make it work with the smallest possible footprint: the library that handles syntax highlighting is heavy, that's why generating static JSON files prevents the client build from being too big.

To generate the static files, run:

yarn generate:codesample

Contributing

If you want to contribute to this project:

• Clone the repository
• Install all dependencies: yarn or npm install
• Launch Storybook: yarn storybook or npm run storybook

Releases

Once you consider that the develop branch holds enough changes to release a new version, here are the 5 steps to follow:

1. make sure you're releasing the correct version:

• Breaking change, bump the first number (1.2.3 -> 2.0.0) - Major
• New feature, bump the second number (1.2.3 -> 1.3.0) - Minor
• Bug fixing, bump the third number (1.2.3 -> 1.2.4) - Patch
• Unsure? Check SEMVER

2. run npm version [your_version]. This will automatically:

• checkout develop
• create a branch named with the version number
• update the version number
• push it to GitHub

3. have a look at the auto-generated CHANGELOG.md. Update some information manually if needed, commit and push it

4. create two PRs:

• one to merge [your_version] into develop (this will update the package.json version)
• the other one to merge [your_version] into master (this will update the Storybook).

5. run npm run deploy to push the new release to npm.

Important: don't delete your branch once merged. This will help keeping a clear history of previous changes.

Beta releases

Once you consider that the beta-vx branch holds enough changes to release a new version, here are the 2 steps to follow:

1. bump the package.json version (last number)

2. run npm run version-beta. This will automatically:

• checkout beta-vx ( x being your version number )
• commit any change
• tag a new version
• push it to GitHub
• publish it to NPM