Satellite

Installation

yarn add @algolia/satellite react-feather

Quick start

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

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

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

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

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 { Button, stl } from "@algolia/satellite/Button";

const loading = true;

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

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

[ADVANCED] I want to use tailwind directly

First install tailwindcss

yarn add -D tailwindcss

Example main.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Example postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss");
const cssnano = require("cssnano");

// Feel free to customize it
const tailwindConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");

// If you're gonna use purge css, you need to configure a custom extractor to avoid removing classes used in the Satellite components.
const { makePurgeCssExtractor } = require("@algolia/satellite");
const PurgeCssExtractor = makePurgeCssExtractor(tailwindConfig.prefix);

const plugins = [
  require("postcss-import"),
  require("tailwindcss")(tailwindConfig),
  require("autoprefixer"),
  purgecss({
    content: ["./dist/**/*.{js,html}"],
    defaultExtractor: PurgeCssExtractor,
    // This entry will allow you to safelist some prefix in order to avoid some classnames to be wiped out.
    // Here, it will keep all the classnames starting with:
    // - 'ais-*' to preserve the instant-search widgets style
    // - 'DayPicker*' to preserve all the DatePicker styles (used in the DatePicker and DateRangePicker)
    whitelistPatterns: [/^ais-/, /^DayPicker/],
  }),
  cssnano({ preset: "default" }),
];

module.exports = { plugins };

Example tailwind.config.js

const config = require("@algolia/satellite/cjs/styles/tailwind.config.js");

config.variants.backgroundColor = ["responsive", "hover", "focus", "active"];

module.exports = config;

Example index.jsx

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

import "./main.css";

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

const loading = true;

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

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

Release

In order to release a new version, simply use the following command:

yarn release prerelease

This will automatically create a new version and push it to the NPM registry. Easy as that