@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
81 lines (78 loc) • 3.23 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.getCssVarsForWL = exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");
var _color2k = require("color2k");
var _Provider = _interopRequireDefault(require("./QueryContext/Provider"));
var _Provider2 = _interopRequireDefault(require("./RandomId/Provider"));
var _Provider3 = _interopRequireDefault(require("./ThemeProvider/Provider"));
const getCssVarsForWL = theme => Object.keys(theme).reduce((acc, key) => {
if (key.startsWith("palette") || key.startsWith("buttonPrimary") || key === "borderRadius100") {
try {
if (key === "borderRadius100") {
acc[key] = theme[key];
} else {
// the token is a color
acc[key] = (0, _color2k.parseToRgba)(theme[key]).slice(0, -1).join(", ");
}
} catch (e) {
console.error("OrbitProvider-getCssVarsForWL: couldn't parse palette color, using fallback value from defaultTheme", key, e);
acc[key] = (0, _color2k.parseToRgba)(_orbitDesignTokens.defaultTokens[key]).slice(0, -1).join(", ");
}
}
return acc;
}, {});
/**
* The OrbitProvider component provides theming and other Orbit features to the application.
*/
/**
* @orbit-doc-start
* README
* ----------
* # OrbitProvider
*
* orbit-components has theming support via our own `<OrbitProvider>` which adds you the possibility to add your own theme.
*
* ```jsx
* import OrbitProvider from "@kiwicom/orbit-components/lib/OrbitProvider";
* ```
*
* After adding import please wrap your application into `OrbitProvider` and you can provide your own [`theme`](https://github.com/kiwicom/orbit/blob/master/.github/theming.md).
*
* ```jsx
* <OrbitProvider theme={ownTheme}>
* <App />
* </OrbitProvider>
* ```
*
* ## Props
*
* Table below contains all types of the props available in the OrbitProvider component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------- | :------ | :------------------------------------------------------------------------------- |
* | **children** | `React.Node` | | Your app |
* | theme | `[Object]` | | See [`theming`](https://github.com/kiwicom/orbit/blob/master/.github/theming.md) |
*
*
* @orbit-doc-end
*/
exports.getCssVarsForWL = getCssVarsForWL;
const OrbitProvider = ({
theme,
children
}) => {
return /*#__PURE__*/React.createElement(_Provider2.default, null, /*#__PURE__*/React.createElement("style", {
id: "orbit-theme-css-vars"
}, (0, _orbitDesignTokens.tokensToCssVars)({
tokens: getCssVarsForWL(theme.orbit),
cssClass: ":root"
})), /*#__PURE__*/React.createElement(_Provider3.default, {
theme: theme
}, /*#__PURE__*/React.createElement(_Provider.default, null, children)));
};
var _default = exports.default = OrbitProvider;