README

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

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

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

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:

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

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

have a look at the auto-generated CHANGELOG.md. Update some information manually if needed, commit and push it
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).

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 V4 releases

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

bump the package.json version (last number)
run npm run version-beta. This will automatically:

checkout beta-v4
commit any change
tag a new version
push it to GitHub
publish it to NPM

Usage no npm install needed!