@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Slider/utils.js

@@ -0,0 +1,25 @@
+/**
+ * Number of digits after the point, e.g. 2 for 0.05
+ */
+const countDecimals = (value) => {
+    if (Number.isInteger(value)) {
+        return 0;
+    }
+    const [mantissa, exponent] = String(value).split('e-');
+    const fraction = (mantissa.split('.')[1] || '').length;
+    return exponent ? fraction + Number(exponent) : fraction;
+};
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * Snaps the value to the nearest step counted from `min`.
+ * The result is rounded to the precision of `step` and `min`: 0.1 + 0.2 gives 0.3, not 0.30000000000000004
+ */
+export const snapToStep = (value, min, step) => {
+    const snapped = Math.round((value - min) / step) * step + min;
+    const decimals = Math.max(countDecimals(step), countDecimals(min));
+    return Number(snapped.toFixed(decimals));
+};
+/**
+ * The position of the value on the rail, from 0 to 100
+ */
+export const valueToPercent = (value, min, max) => max === min ? 0 : ((value - min) * 100) / (max - min);

package/esm/Stack/index.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { resolveSpacing } from '../utils/spacing';
+/**
+ * The lists are the rows of the elements here: no default margins and markers
+ */
+const LIST_TAGS = ['ul', 'ol', 'dl'];
+const StyledStack = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  flex-direction: ${({ $direction }) => $direction};
+  flex-wrap: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};
+  align-items: ${({ $align, $direction }) => $align !== null && $align !== void 0 ? $align : ($direction === 'row' ? 'center' : 'stretch')};
+  justify-content: ${({ $justify }) => $justify !== null && $justify !== void 0 ? $justify : 'flex-start'};
+  gap: ${({ theme, $gap }) => resolveSpacing(theme, $gap)};
+  /* A flex child shrinks below its content only with min-width: 0 */
+  min-width: 0;
+  ${({ $isList }) => ($isList ? 'margin: 0; padding: 0; list-style: none;' : '')}
+`;
+/**
+ * The elements in a column or in a row with the same gap between them.
+ * The children stay the plain elements: no wrappers for the items
+ */
+const Stack = (props, ref) => {
+    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false, as } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline", "as"]);
+    return (React.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, "$isList": Boolean(as && LIST_TAGS.includes(as)), as: as, ref: ref }), children));
+};
+export default React.forwardRef(Stack);

package/esm/Surface/SurfaceContainer.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { elevation } from '../ThemeProvider/tokens';
+const StyledSurfaceContainer = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  box-sizing: border-box;
+  flex-direction: column;
+  background: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => elevation(theme, 'surface')};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 1em;
+
+  ${({ $rounded }) => $rounded &&
+    css `
+      border-radius: 100%;
+    `}
+
+  ${({ $noPadding }) => $noPadding &&
+    css `
+      /* The content reaches the edges, so it must follow the rounded corners */
+      overflow: hidden;
+    `}
+`;
+const SurfaceContainer = (props, ref) => {
+    const { inline, children, rounded, noPadding } = props, nativeProps = __rest(props, ["inline", "children", "rounded", "noPadding"]);
+    return (React.createElement(StyledSurfaceContainer, Object.assign({ "$inline": inline, "$rounded": rounded, "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceContainer);

package/esm/Surface/SurfaceContent.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { themePadding } from '../ThemeProvider/tokens';
+const StyledContent = styled.div `
+  flex: 1;
+  ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return (!$noPadding &&
+        css `
+        padding: calc(${y} * 1.4) ${x} ${y} ${x};
+      `);
+}}
+
+  ${({ $rounded, $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return ($rounded &&
+        css `
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: ${$noPadding ? '0' : `${y} ${x}`};
+      `);
+}}
+`;
+const SurfaceContent = (props, ref) => {
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (React.createElement(StyledContent, Object.assign({ "$noPadding": noPadding, "$rounded": rounded }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceContent);

package/esm/Surface/SurfaceFooter.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { themePadding } from '../ThemeProvider/tokens';
+const StyledFooter = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return $noPadding ? '0' : `${y} ${x}`;
+}};
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+`;
+const SurfaceFooter = (props, ref) => {
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (React.createElement(StyledFooter, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceFooter);

package/esm/Surface/SurfaceHeader.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { themePadding } from '../ThemeProvider/tokens';
+const StyledHeader = styled.div `
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container', 1.3);
+    return $noPadding ? '0' : `${y} ${x} 0 ${x}`;
+}};
+  font-size: 1.3em;
+  font-weight: 600;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+`;
+const SurfaceHeader = (props, ref) => {
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (React.createElement(StyledHeader, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceHeader);

package/esm/Surface/SurfaceSubheader.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { themePadding } from '../ThemeProvider/tokens';
+const StyledHeader = styled.div `
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container', 0.9);
+    return $noPadding ? '0' : `calc(${y} / 2) ${x} 0 ${x}`;
+}};
+  font-size: 0.9em;
+  font-weight: 200;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const SurfaceSubheader = (props, ref) => {
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (React.createElement(StyledHeader, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceSubheader);

package/esm/Surface/index.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import Container from './SurfaceContainer';
+import Header from './SurfaceHeader';
+import Subheader from './SurfaceSubheader';
+import Content from './SurfaceContent';
+import Footer from './SurfaceFooter';
+const Surface = (props, ref) => {
+    const { children, header, subheader, footer, inline, noPadding, rounded, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "noPadding", "rounded", "overrides"]);
+    const hasFooter = typeof footer !== 'undefined' && footer !== null;
+    const hasHeader = typeof header !== 'undefined' && header !== null;
+    const hasSubheader = typeof subheader !== 'undefined' && subheader !== null;
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Subheader: (overrides === null || overrides === void 0 ? void 0 : overrides.Subheader) || Subheader,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+    }), [overrides]);
+    // Warn once when the combination appears, not on every render
+    const isSubheaderWithoutHeader = !hasHeader && hasSubheader;
+    React.useEffect(() => {
+        if (isSubheaderWithoutHeader) {
+            console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
+        }
+    }, [isSubheaderWithoutHeader]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, rounded: rounded, ref: ref }),
+        hasHeader && (React.createElement(overridesMap.Header, { noPadding: noPadding, rounded: rounded }, header)),
+        hasSubheader && (React.createElement(overridesMap.Subheader, { noPadding: noPadding, rounded: rounded }, subheader)),
+        React.createElement(overridesMap.Content, { noPadding: noPadding, rounded: rounded }, children),
+        hasFooter && (React.createElement(overridesMap.Footer, { noPadding: noPadding, rounded: rounded }, footer))));
+};
+export default React.forwardRef(Surface);