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
If you want to contribute to this project:
- Clone the repository
- Install all dependencies:
yarn
ornpm install
- Launch Storybook:
yarn storybook
ornpm 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]
intodevelop
(this will update thepackage.json
version) - the other one to merge
[your_version]
intomaster
(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 releases
Once you consider that the beta-vx
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-vx
( x being your version number ) - commit any change
- tag a new version
- push it to GitHub
- publish it to NPM