@algolia/satellite/README.md

Algolia design system React components

# Satellite

![Nothing to see here](https://algolia-satellite.s3-eu-west-1.amazonaws.com/nothing-to-see-here.gif)

[Library documentation](https://satellite.algolia.com/) | [NPM](https://www.npmjs.com/package/@algolia/satellite) | [Storybook](https://satellite-storybook.algolia.com/) | [Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components)

## Installation

```sh
yarn add @algolia/satellite
```

## Quick start

```js
import React from "react";
import ReactDOM from "react-dom";

import "@algolia/satellite/satellite.min.css";

import { Satellite, Button } from "@algolia/satellite";

const App = () => (
  <Satellite>
    <Button>Hurray!</Button>
  </Satellite>
);

ReactDOM.render(<App />, document.getElementById("root"));
```

## Usage

### Integrating it on an existing project

You can import `@algolia/satellite/satellite.min.css` before the rest of your styles. It contains a slightly modified version of `normalize.css` as well as the style for the library's components.

If you use scss and want to reuse the colors to build custom components, they are available in `@algolia/satellite/styles/scss/colors.scss`.

If you use some form of css-in-js library and want to reuse the colors to build custom components, they are available in `@algolia/satellite/styles/scss/colors.scss`

### I want to build a quick prototype

You can import `@algolia/satellite/satellite.css` before the rest of your styles. It contains all the classes generated by the library's tailwind config, unpurged. The classes are prefixed with `stl-`. It is recommended to use the `stl` tag template function available in `@algolia/satellite;`

Please refer to the official documentation to see which classes are available
https://tailwindcss.com/

<!-- TODO: quick description of the custom theme (colors, opacities etc) -->

```jsx
import React from "react";
import ReactDOM from "react-dom";

import "@algolia/satellite/satellite.min.css";

import { Satellite, Button, stl } from "@algolia/satellite";

const loading = true;

const App = () => (
  <Satellite>
    <div
      className={stl`
        flex flex-col m-4
        ${loading && "hidden"}
      `}
    >
      <Button className={stl`mb-2`}>Clap your hands!</Button>
      <Button>Hurray!</Button>
    </div>
  </Satellite>
);

ReactDOM.render(<App />, document.getElementById("root"));
```

### [ADVANCED] I want to use tailwind directly

First install tailwindcss

```sh
yarn add -D tailwindcss
```

Example `main.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* your custom components */
}
```

Example `postcss.config.js`

```js
// ...

const plugins = [
  require("postcss-import"),
  require("tailwindcss")(tailwindConfig),
  require("autoprefixer"),
  cssnano({ preset: "default" }),
];

module.exports = { plugins };
```

Example `tailwind.config.js`

```js
const { makePurgeCssExtractor } = require('@algolia/satellite');
const satelliteConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");

module.exports = {
  presets: [satelliteConfig],
  content: [
    files: [
      `node_modules/@algolia/satellite/**/*.js`,
      `node_modules/react-day-picker/lib/style.css`,
      `node_modules/react-day-picker/src/**/*.js`,

      `src/**/*.{ts,tsx,js,jsx}`,
      // Any other sources files
    ],
    extract: makePurgeCssExtractor(prefix),
  ],
  theme: {
    extend: {
      // any colors, fonts... you want to add
    }
  },
  plugins: [
    // extra plugins you want to add
  ]
};
```

Example `index.jsx`

```jsx
import React from "react";
import ReactDOM from "react-dom";

import "./main.css";

import { Satellite, Button, stl } from "@algolia/satellite";

const loading = true;

const App = () => (
  <Satellite>
    <div
      className={stl`
        flex items-center justify-center
        ${loading && "hidden"}
      `}
    >
      <Button>Hurray!</Button>
    </div>
  </Satellite>
);

ReactDOM.render(<App />, document.getElementById("root"));
```