Satellite

Library documentation | NPM | Storybook | Figma

Installation

yarn add @algolia/satellite

Quick start

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/

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

yarn add -D tailwindcss

Example main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

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

Example postcss.config.js

// ...

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

module.exports = { plugins };

Example tailwind.config.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

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"));