@algolia/satellite 1.0.0-beta.15 → 1.0.0-beta.153

package/README.md

@@ -0,0 +1,175 @@
+# 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 react-feather
+```
+
+## Quick start
+
+```js
+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/
+
+<!-- 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 { 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
+
+```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 { Button, stl } from "@algolia/satellite";
+
+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:
+
+```sh
+yarn release prerelease
+```
+
+This will automatically create a new version and push it to the NPM registry. Easy as that

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -0,0 +1,21 @@
+import type { FunctionComponent, 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;
+}
+export declare const AnnouncementBadge: FunctionComponent<AnnouncementBadgeProps>;
+export default AnnouncementBadge;

package/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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"])))
+};
+var AnnouncementBadge = function AnnouncementBadge(_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({}, 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]
+  }));
+};
+exports.AnnouncementBadge = AnnouncementBadge;
+var _default = AnnouncementBadge;
+exports["default"] = _default;

package/cjs/AnnouncementBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AnnouncementBadge";
+export { default } from "./AnnouncementBadge";

package/cjs/AnnouncementBadge/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AnnouncementBadge["default"];
+  }
+});
+var _AnnouncementBadge = _interopRequireWildcard(require("./AnnouncementBadge"));
+Object.keys(_AnnouncementBadge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AnnouncementBadge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AnnouncementBadge[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,66 @@
+import type { A11yStatusMessageOptions, ControllerStateAndHelpers } from "downshift";
+import { Component } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
+import { FieldState } from "../Field/FieldStateContext";
+import type { AutoCompleteLocale, AutoCompleteProps, Option, OptionItemProps } from "./types";
+interface State {
+    inputFocused: boolean;
+    inputValue: string;
+    inputWidth?: number;
+    showAllResults: boolean;
+}
+declare type DefaultOptionProps = OptionItemProps & {
+    optionItemPrefix?: AutoCompleteLocale["optionItemPrefix"];
+};
+/**
+ * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
+ *
+ * Use this component when the user needs to search through a long list of results.
+ *
+ * ## Menu Size Variations
+ * - **Medium (default)**: the standard dropdown menu height for most use cases
+ * - **Large**: when numerous results should be displayed in the dropdown to ease selection
+ *
+ * ## Best practices
+ *
+ * - Provide an empty state if there is no result
+ * - Highlight letters in results matching the query
+ * - Provide matching results quickly
+ * - Style different data
+ */
+export declare class AutoComplete<T extends Option = Option> extends Component<AutoCompleteProps<T>, State> {
+    static contextType: import("react").Context<import("../Satellite").SatelliteContextType>;
+    static defaultProps: {
+        clearable: boolean;
+        creatable: boolean;
+        multiple: boolean;
+        maxResults: number;
+        createFromInputValue: <T_1 extends Option = Option>(options: T_1[] | undefined, inputValue: string) => Option[];
+        options: never[];
+        separatorKeys: never[];
+        optionItemComponent: ({ optionItemPrefix, ...props }: DefaultOptionProps) => JSX.Element;
+        noWrap: boolean;
+    };
+    state: State;
+    inputContainerRef: HTMLDivElement | null;
+    inputRef: HTMLInputElement | null;
+    menuWrapperRef: HTMLDivElement | null;
+    componentDidUpdate(prevProps: AutoCompleteProps<T>): void;
+    handleClearClick: () => void;
+    handleFakeInputClick: () => void | null;
+    handleInputBlur: (state: ControllerStateAndHelpers<T | Option>) => (evt: FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (evt: ChangeEvent<HTMLInputElement>) => void;
+    handleInputContainerRefUpdate: (el: HTMLDivElement | null) => void;
+    updateInputWidth: () => void;
+    handleKeyDown: (state: ControllerStateAndHelpers<T | Option>) => (evt: KeyboardEvent<any>) => void;
+    handleChange: (option: T) => void;
+    handleShowAllResults: (evt: MouseEvent<HTMLButtonElement>) => void;
+    removeValue: (removedOption: T) => void;
+    getA11yStatusMessage: (options: A11yStatusMessageOptions<Option>) => any;
+    renderInput: (autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
+    renderMenu: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>) => JSX.Element;
+    renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
+    private get locale();
+    render(): JSX.Element;
+}
+export default AutoComplete;