@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/README.md

@@ -2,10 +2,12 @@
 
 ![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 react-feather
+yarn add @algolia/satellite
 ```
 
 ## Quick start
@@ -16,7 +18,7 @@ import ReactDOM from "react-dom";
 
 import "@algolia/satellite/satellite.min.css";
 
-import Button from "@algolia/satellite/Button";
+import { Button } from "@algolia/satellite";
 
 const App = () => (
   <div>
@@ -39,7 +41,7 @@ If you use some form of css-in-js library and want to reuse the colors to build
 
 ### 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 tag template function available in `@algolia/satellite/styles/helpers/satellitePrefixer;`
+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/
@@ -52,8 +54,7 @@ import ReactDOM from "react-dom";
 
 import "@algolia/satellite/satellite.min.css";
 
-import stl from "@algolia/satellite/styles/helpers/satellitePrefixer";
-import Button from "@algolia/satellite/Button";
+import { Button, stl } from "@algolia/satellite/Button";
 
 const loading = true;
 
@@ -83,43 +84,60 @@ yarn add -D tailwindcss
 Example `main.css`
 
 ```css
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@import "tailwindcss/utilities";
+@layer components {
+  /* your custom components */
+}
 ```
 
 Example `postcss.config.js`
 
 ```js
-const purgecss = require("@fullhuman/postcss-purgecss");
-const cssnano = require("cssnano");
-
-// Feel free to customize it
-const tailwindConfig = require("@algolia/satellite/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/styles/helpers/makePurgeCssExtractor.js");
-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
-    whitelistPatterns: [/^ais-/]
-  }),
-  cssnano({ preset: "default" })
+  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
@@ -128,15 +146,14 @@ import ReactDOM from "react-dom";
 
 import "./main.css";
 
-import stl from "@algolia/satellite/styles/helpers/satellitePrefixer";
-import Button from "@algolia/satellite/Button";
+import { Button, stl } from "@algolia/satellite";
 
 const loading = true;
 
 const App = () => (
   <div
     className={stl`
-    flex items-center justify-center 
+    flex items-center justify-center
     ${loading && "hidden"}
   `}
   >

package/dist/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+export declare type AnnouncementBadgeSizes = "default" | "small";
+export declare type AnnouncementBadgeTexts = "new" | "beta" | "internal" | "pilot";
+export declare type AnnouncementBadgeLocale = {
+    [key in AnnouncementBadgeTexts]?: string;
+};
+export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** @default default */
+    size?: AnnouncementBadgeSizes;
+    /**
+     * Define which text to display in the `AnnouncementBadge`
+     * @default new
+     */
+    text?: AnnouncementBadgeTexts;
+    /** @default accent */
+    variant?: "accent" | "red";
+    locale?: AnnouncementBadgeLocale;
+    children?: never;
+}
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
+export declare const AnnouncementBadge: import("react").ForwardRefExoticComponent<AnnouncementBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnouncementBadge = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["size", "text", "variant", "className", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_LOCALE = {
+  beta: "beta",
+  internal: "internal",
+  "new": "new",
+  pilot: "pilot"
+};
+var DEFAULT_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["capitalize inline-block rounded-full text-white select-none"])));
+var SIZE_CLASSNAMES = {
+  "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]))),
+  small: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption px-1"])))
+};
+
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
+var AnnouncementBadge = exports.AnnouncementBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "new" : _ref$text,
+    variantProp = _ref.variant,
+    className = _ref.className,
+    propsLocale = _ref.locale,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("announcementBadge");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    className: (0, _clsx["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
+    children: locale[text]
+  }));
+});
+AnnouncementBadge.displayName = "AnnouncementBadge";

package/dist/cjs/AnnouncementBadge/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnnouncementBadge";

package/dist/cjs/AnnouncementBadge/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AnnouncementBadge = require("./AnnouncementBadge");
+Object.keys(_AnnouncementBadge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnnouncementBadge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AnnouncementBadge[key];
+    }
+  });
+});

package/dist/cjs/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AutoCompleteProps, Option } from "./types";
+/**
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
+ *
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
+ */
+export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, labelId, "aria-label": ariaLabel, name, placeholder, autoFocus, inputValue: inputValueProp, onTextChange, onFocus, onBlur, disabled, clearable, renderValueTemplate, noWrap, separatorKeys, multiple, value, selectOnBlur, onChange, options, optionItemComponent, creatable, createFromInputValue, emptyState, maxResults: maxItems, menuFooter, menuSize, variant, icon: Icon, endItem, className, menuClassName, valuesClassName, internalsRef, }: AutoCompleteProps<O>) => JSX.Element;