@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/scss/colors.scss

@@ -0,0 +1,139 @@
+$stl-black: #000000;
+$stl-white: #ffffff;
+$stl-grey-50: #fcfcfd;
+$stl-grey-100: #f5f5fa;
+$stl-grey-200: #d6d6e7;
+$stl-grey-300: #b6b7d5;
+$stl-grey-400: #9698c3;
+$stl-grey-500: #777aaf;
+$stl-grey-600: #5a5e9a;
+$stl-grey-700: #484c7a;
+$stl-grey-800: #36395a;
+$stl-grey-900: #23263b;
+$stl-grey-950: #111432;
+$stl-pink-50: #fff5fb;
+$stl-pink-100: #ffeaf6;
+$stl-pink-200: #feb9e2;
+$stl-pink-300: #fd89ce;
+$stl-pink-400: #fb5abc;
+$stl-pink-500: #f82caa;
+$stl-pink-600: #e90a96;
+$stl-pink-700: #b80979;
+$stl-pink-800: #88085c;
+$stl-pink-900: #59063d;
+$stl-nebula-100: #f2f3ff;
+$stl-nebula-200: #cacfff;
+$stl-nebula-300: #a3acff;
+$stl-nebula-400: #7c8aff;
+$stl-nebula-500: #5468ff;
+$stl-nebula-600: #3c4fe0;
+$stl-nebula-700: #2b3cbb;
+$stl-nebula-800: #1e2b8f;
+$stl-nebula-900: #141d61;
+$stl-xenon-50: #f9f9ff;
+$stl-xenon-100: #f2f4ff;
+$stl-xenon-200: #bbd1ff;
+$stl-xenon-300: #76a0ff;
+$stl-xenon-400: #457aff;
+$stl-xenon-500: #1e59ff;
+$stl-xenon-600: #003dff;
+$stl-xenon-700: #022eb9;
+$stl-xenon-800: #042077;
+$stl-xenon-900: #000033;
+$stl-blue-50: #f3fdff;
+$stl-blue-100: #e8faff;
+$stl-blue-200: #b9efff;
+$stl-blue-300: #89e5ff;
+$stl-blue-400: #5adaff;
+$stl-blue-500: #2cc8f7;
+$stl-blue-600: #0db7eb;
+$stl-blue-700: #009bcb;
+$stl-blue-800: #00769b;
+$stl-blue-900: #00526c;
+$stl-green-50: #f2fef1;
+$stl-green-100: #e5fde4;
+$stl-green-200: #bffbc2;
+$stl-green-300: #86f195;
+$stl-green-400: #4ade6d;
+$stl-green-500: #00c241;
+$stl-green-600: #00a648;
+$stl-green-700: #008b4a;
+$stl-green-800: #007046;
+$stl-green-900: #005d43;
+$stl-orange-50: #fffcf5;
+$stl-orange-100: #fff9ec;
+$stl-orange-200: #ffe9c3;
+$stl-orange-300: #fed59a;
+$stl-orange-400: #fcbc73;
+$stl-orange-500: #faa04b;
+$stl-orange-600: #f78125;
+$stl-orange-700: #e8600a;
+$stl-orange-800: #bf470a;
+$stl-orange-900: #963209;
+$stl-red-50: #fff3f4;
+$stl-red-100: #ffe6e9;
+$stl-red-200: #febdc5;
+$stl-red-300: #fc95a1;
+$stl-red-400: #f86e7e;
+$stl-red-500: #f4495d;
+$stl-red-600: #e9122c;
+$stl-red-700: #d4142a;
+$stl-red-800: #ab1325;
+$stl-red-900: #83111e;
+$stl-purple-50: #fdf9ff;
+$stl-purple-100: #fcf4ff;
+$stl-purple-200: #f2d3ff;
+$stl-purple-300: #e2a7ff;
+$stl-purple-400: #cc7bff;
+$stl-purple-500: #b75aff;
+$stl-purple-600: #9524ff;
+$stl-purple-700: #731adb;
+$stl-purple-800: #5612b7;
+$stl-purple-900: #3c0b93;
+$stl-accent-50: #f9f9ff;
+$stl-accent-100: #f2f4ff;
+$stl-accent-200: #bbd1ff;
+$stl-accent-300: #76a0ff;
+$stl-accent-400: #457aff;
+$stl-accent-500: #1e59ff;
+$stl-accent-600: #003dff;
+$stl-accent-700: #022eb9;
+$stl-accent-800: #042077;
+$stl-accent-900: #000033;
+$stl-inherit: inherit;
+$stl-transparent: transparent;
+$stl-current: currentColor;
+$stl-shadow-5: rgba(35, 38, 59, 0.05);
+$stl-shadow-10: rgba(35, 38, 59, 0.1);
+$stl-shadow-15: rgba(35, 38, 59, 0.15);
+$stl-shadow-25: rgba(35, 38, 59, 0.25);
+$stl-neptune-1: #3a46a1;
+$stl-neptune-2: #5560b5;
+$stl-neptune-3: #707bcc;
+$stl-neptune-4: #8d97e3;
+$stl-neptune-5: #a6b0f9;
+$stl-mercury-1: #008fba;
+$stl-mercury-2: #2da7cb;
+$stl-mercury-3: #5bbfdd;
+$stl-mercury-4: #88d6ee;
+$stl-mercury-5: #b5eeff;
+$stl-jupiter-1: #3ab2bd;
+$stl-jupiter-2: #61c5c8;
+$stl-jupiter-3: #89d9d3;
+$stl-jupiter-4: #b0ecde;
+$stl-jupiter-5: #d7ffe9;
+$stl-saturn-1: #ec8b63;
+$stl-saturn-2: #f3a57e;
+$stl-saturn-3: #f8be9a;
+$stl-saturn-4: #fcd7b7;
+$stl-saturn-5: #fdf1d4;
+$stl-mars-1: #ed5a6a;
+$stl-mars-2: #f27885;
+$stl-mars-3: #f695a0;
+$stl-mars-4: #fbb3ba;
+$stl-mars-5: #ffd0d5;
+$stl-venus-1: #ae3e88;
+$stl-venus-2: #d44fa4;
+$stl-venus-3: #ea71bc;
+$stl-venus-4: #f89ad3;
+$stl-venus-5: #ffcae9;

package/dist/scss/variables.scss

@@ -0,0 +1,8 @@
+$stl-sidebar: 200;
+$stl-full-page-layout: 250;
+$stl-modal-overlay: 300;
+$stl-modal: 400;
+$stl-popover: 450;
+$stl-dropdown: 500;
+$stl-notification: 550;
+$stl-tooltip: 600;

package/package.json

@@ -1,8 +1,50 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-v3.99",
+  "version": "1.1.0",
   "description": "Algolia design system React components",
-  "main": "index.js",
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "cross-env NODE_ENV=production run-p build:types build:js build:css build:scss",
+    "build:_js": "babel src --extensions \".ts,.tsx,.js\" --ignore \"src/**/*.d.ts,src/**/*.stories.tsx,src/**/*.test.ts,src/**/*.test.tsx\"",
+    "build:esm": "cross-env BABEL_MODULE_TYPE=ESM yarn build:_js --out-dir dist/esm",
+    "build:cjs": "cross-env BABEL_MODULE_TYPE=CJS yarn build:_js --out-dir dist/cjs",
+    "build:js": "run-p build:esm build:cjs",
+    "build:css": "cross-env NODE_ENV=production postcss -o dist/satellite.min.css src/styles/satellite.css",
+    "build:scss": "node ./scripts/build-scss-variables.js",
+    "build:types": "node ./scripts/build-types.js",
+    "build:storybook": "storybook build -o .storybook-static",
+    "serve:storybook": "http-server .storybook-static -s -p 6060",
+    "dev": "storybook dev -p 6060",
+    "quality": "run-s test type-check lint",
+    "lint": "eslint --rulesdir ./.eslint_rules/ 'src/**/*.{ts,tsx}'",
+    "type-check": "tsc --noEmit",
+    "test": "jest --config jest.config.js --runInBand",
+    "accessibility": "yarn build:storybook && run-p -r serve:storybook test-storybook",
+    "test-storybook": "wait-on tcp:6060 && test-storybook --url http://localhost:6060 --no-stories-json --maxWorkers=2 && yarn test-storybook-combine-reports",
+    "test-storybook-combine-reports": "node ./scripts/combine-reports.js",
+    "chromatic": "cross-env NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master --exit-once-uploaded"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./satellite.min.css": "./dist/satellite.min.css",
+    "./scss/colors.scss": "./dist/scss/colors.scss",
+    "./scss/variables.scss": "./dist/scss/variables.scss",
+    "./tailwind.config.js": "./dist/cjs/styles/tailwind.config.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/algolia/satellite.git"
@@ -12,33 +54,151 @@
     "react",
     "design"
   ],
-  "author": "Algolia (contact@algolia.com)",
+  "author": "Algolia <contact@algolia.com>",
+  "contributors": [
+    "Vincent Lemeunier <vincent.lemeunier@algolia.com>",
+    "Kevin Østerkilde <kevin.osterkilde@algolia.com>",
+    "Fabien Motte <fabien.motte@algolia.com>",
+    "Thomas Dalous <thomas.dalous@algolia.com>",
+    "Clément Aupiais <clement.aupiais@algolia.com>",
+    "Mark Messenger <mark.messenger@algolia.com>"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/algolia/satellite/issues"
   },
-  "homepage": "https://github.com/algolia/satellite#readme",
+  "homepage": "https://satellite.algolia.com",
   "jest-junit": {
     "outputDirectory": "./.reports/junit"
   },
   "engines": {
-    "node": ">=12.13.1"
+    "node": ">=16"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-feather": "^2",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-instantsearch-dom": "^6.1.0"
   },
+  "devDependencies": {
+    "@algolia/eslint-plugin-stl": "workspace:*",
+    "@algolia/satellite-analytics": "workspace:*",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@hookform/resolvers": "^3.3.3",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-storysource": "^7.5.3",
+    "@storybook/addon-styling-webpack": "^0.0.5",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^8",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13",
+    "@types/color": "^3.0.3",
+    "@types/diacritics": "^1.3.1",
+    "@types/jest": "^29.5.2",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^16",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
+    "@types/react-instantsearch-dom": "^6.12.0",
+    "@types/react-transition-group": "4.4.5",
+    "@types/storybook__react": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "algoliasearch": "^4.13.1",
+    "autoprefixer": "^10.4.7",
+    "axe-playwright": "^1.2.3",
+    "babel-jest": "^29.5.0",
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-transform-commonjs-es2015-modules": "^4.0.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "chokidar-cli": "^3.0.0",
+    "chromatic": "^7.3.0",
+    "cpy": "^8.1.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.8.1",
+    "cssnano": "^5.1.12",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest-dom": "^5.0.1",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^5.11.0",
+    "execa": "^5",
+    "flat": "^5.0.2",
+    "formik": "^2.4.5",
+    "http-server": "^14.1.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-junit": "^16.0.0",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^10.0.0",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^7.0.0",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.49.2",
+    "react-instantsearch-dom": "^6.29.0",
+    "react-test-renderer": "^17",
+    "rimraf": "^3.0.2",
+    "semver": "^7.3.4",
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.1",
+    "style-loader": "^3.3.3",
+    "timemachine": "^0.3.2",
+    "typescript": "4.8.3",
+    "wait-on": "^7.2.0",
+    "yup": "^1.3.3",
+    "zod": "^3.22.4"
+  },
   "dependencies": {
-    "@babel/runtime": "^7.7.2",
-    "@reach/tabs": "^0.6.1",
-    "classnames": "^2.2.6",
-    "color": "^3.1.2",
-    "downshift": "^2.0.10",
-    "react-popper": "^0.10.x",
-    "react-transition-group": "4.3.0",
-    "react-use": "^13.10.0",
-    "tailwindcss": "^1.2.0"
+    "@babel/runtime": "^7.21.0",
+    "@popperjs/core": "^2.4.4",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "clsx": "^2.0.0",
+    "color": "^4.2.3",
+    "date-fns": "^2.29.3",
+    "diacritics": "^1.3.0",
+    "downshift": "^8",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.312.0",
+    "react-day-picker": "^8.0.7",
+    "react-dropzone": "^11.5.1",
+    "react-popper": "^2.2.5",
+    "react-transition-group": "^4.4.5",
+    "react-use": "^15.3.8",
+    "tailwindcss": "^3.3.5"
   }
-}
+}

package/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-export declare type AnnouncementBadgeSizes = "default" | "small";
-export interface AnnouncementBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    size?: AnnouncementBadgeSizes;
-    text?: "new" | "beta";
-    children?: never;
-}
-export declare const AnnouncementBadge: React.FC<AnnouncementBadgeProps>;
-export default AnnouncementBadge;

package/AnnouncementBadge/AnnouncementBadge.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.AnnouncementBadge = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["display-caption px-1"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["capitalize rounded-full text-white bg-accent-600 select-none"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DEFAULT_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject());
-var SIZE_CLASSNAMES = {
-  "default": (0, _satellitePrefixer["default"])(_templateObject2()),
-  small: (0, _satellitePrefixer["default"])(_templateObject3())
-};
-
-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,
-      className = _ref.className,
-      spanProps = (0, _objectWithoutProperties2["default"])(_ref, ["size", "text", "className"]);
-  return _react["default"].createElement("span", (0, _extends2["default"])({}, spanProps, {
-    className: (0, _classnames["default"])(DEFAULT_CLASSNAME, SIZE_CLASSNAMES[size], className)
-  }), text);
-};
-
-exports.AnnouncementBadge = AnnouncementBadge;
-var _default = AnnouncementBadge;
-exports["default"] = _default;

package/AnnouncementBadge/index.d.ts

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

package/AnnouncementBadge/index.js

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _AnnouncementBadge[key];
-    }
-  });
-});

package/AutoComplete/AutoComplete.d.ts

@@ -1,54 +0,0 @@
-import React, { Component } from "react";
-import { ControllerStateAndHelpers } from "downshift";
-import { FieldState } from "../Field/FieldStateContext";
-import { Option, AutoCompleteProps } from "./types";
-interface State {
-    inputFocused: boolean;
-    inputValue: string;
-    inputWidth?: number;
-    showAllResults: boolean;
-}
-/**
- * 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.
- *
- * ## 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> extends Component<AutoCompleteProps, State> {
-    static defaultProps: {
-        clearable: boolean;
-        creatable: boolean;
-        multiple: boolean;
-        maxResults: number;
-        emptyState: JSX.Element;
-        createFromInputValue: import("./types").CreateFromInputValue;
-        options: never[];
-        separatorKeyCodes: never[];
-        optionItemComponent: React.ComponentType<import("./types").OptionItemProps>;
-    };
-    state: State;
-    inputContainerRef: HTMLDivElement | null;
-    inputRef: HTMLInputElement | null;
-    componentDidUpdate(prevProps: AutoCompleteProps): void;
-    handleClearClick: () => void;
-    handleFakeInputClick: () => void | null;
-    handleInputBlur: (state: ControllerStateAndHelpers<Option>) => (evt: React.FocusEvent<HTMLInputElement>) => void;
-    handleInputChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
-    handleInputContainerRefUpdate: (el: HTMLDivElement | null) => void;
-    updateInputWidth: () => void;
-    handleKeyDown: (state: ControllerStateAndHelpers<Option>) => (evt: React.KeyboardEvent<any>) => void;
-    handleChange: (option: Option) => void;
-    handleShowAllResults: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    removeValue: (removedOption: Option) => void;
-    renderInput: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
-    renderMenu: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>) => JSX.Element | null;
-    renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
-    render(): JSX.Element;
-}
-export default AutoComplete;