@apify/ui-library 1.99.0 → 1.99.1

package/dist/src/components/spinner.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from 'styled-components';
+import { theme } from '../design_system/theme.js';
+export const spinnerClassNames = {
+    SPINNER: 'spinner',
+};
+const rotate = keyframes `
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+const dash = keyframes `
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+`;
+// styled-components used in order to make 'as' prop work by default
+// span is intentional instead of div, so it can be validly nested in a <p>
+// display: block is used because it was div before and we don't wanna break anything
+const SpinnerWrapper = styled.span `
+    display: block;
+
+    .${spinnerClassNames.SPINNER} {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+
+        width: ${({ $small }) => ($small ? '3rem' : '5rem')};
+        height: ${({ $small }) => ($small ? '3rem' : '5rem')};
+
+        & .path {
+            transform-origin: center;
+            stroke: ${theme.color.primary.text};
+            animation: ${dash} 1.5s ease-in-out infinite, ${rotate} 2s linear infinite;
+        }
+    }
+`;
+/**
+ * Visualize loading state of a component.
+ *
+ * Use this spinner when a page or section is waiting for asynchronous data.
+ * Do not use it for buttons and small components, apply only for bigger sections.
+ *
+ * Keep the spinner centered (eg. by setting position to parent container).
+ */
+export const Spinner = ({ loadingReason, small, ...props }) => {
+    return (_jsx(SpinnerWrapper, { ...props, title: loadingReason, "$small": small, children: _jsx("svg", { className: spinnerClassNames.SPINNER, viewBox: "0 0 50 50", children: _jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5", strokeLinecap: "round" }) }) }));
+};
+/**
+ * Spinner with basic block styling
+ * This styles should probably be in default spinner, but it's dangerous to modify it as it's used on so many places
+ */
+export const BlockSpinner = styled(Spinner) `
+    position: relative; /* "hold" absolutely positioned spinner */
+    width: 100%;
+    min-height: 8rem;
+`;
+/**
+ * Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
+ */
+export const InlineSpinner = styled(Spinner) `
+    display: inline-block;
+    position: relative;
+    height: ${({ size }) => size || theme.space.space12};
+    width: ${({ size }) => size || theme.space.space12};
+    vertical-align: middle;
+
+    .${spinnerClassNames.SPINNER} {
+        width: 100%;
+        height: 100%;
+    }
+`;
+//# sourceMappingURL=spinner.js.map

package/dist/src/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGlD,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;;CAIvB,CAAC;AAEF,MAAM,IAAI,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAarB,CAAC;AAaF,oEAAoE;AACpE,2EAA2E;AAC3E,qFAAqF;AACrF,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAqB;;;OAGhD,iBAAiB,CAAC,OAAO;;;;;;;iBAOf,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;kBACzC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;sBAItC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;yBACrB,IAAI,+BAA+B,MAAM;;;CAGjE,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACxE,OAAO,CACH,KAAC,cAAc,OAAK,KAAK,EAAE,KAAK,EAAE,aAAa,YAAU,KAAK,YAC1D,cAAK,SAAS,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YAC1D,iBACI,SAAS,EAAC,MAAM,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACf,GACR,GACO,CACpB,CAAC;AACN,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;CAI1C,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAiB;;;cAG/C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO;aAC1C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO;;;OAG/C,iBAAiB,CAAC,OAAO;;;;CAI/B,CAAC"}

package/dist/src/components/spinner.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/react-vite';
+import { Spinner, type SpinnerProps } from './spinner.js';
+declare const _default: Meta<typeof Spinner>;
+export default _default;
+export declare const Standalone: (args: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithinContainer: (args: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=spinner.stories.d.ts.map

package/dist/src/components/spinner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAiB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;wBAOpE,IAAI,CAAC,OAAO,OAAO,CAAC;AALzB,wBAK0B;AAI1B,eAAO,MAAM,UAAU,SAFC,YAAY,4CAEO,CAAC;AAE5C,eAAO,MAAM,eAAe,SAAU,YAAY,4CAYjD,CAAC;AAEF,eAAO,MAAM,MAAM,+CAOlB,CAAC"}

package/dist/src/components/spinner.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InlineSpinner, Spinner } from './spinner.js';
+export default {
+    title: 'UI-Library/Spinner',
+    parameters: { layout: 'padded' },
+    component: Spinner,
+    args: {},
+};
+const Template = (args) => _jsx(Spinner, { ...args });
+export const Standalone = Template.bind({});
+export const WithinContainer = (args) => {
+    return (_jsx("div", { style: {
+            minWidth: '100px',
+            minHeight: '200px',
+            border: 'solid 1px lightgray',
+            borderRadius: '1rem',
+            position: 'relative',
+        }, children: _jsx(Spinner, { ...args }) }));
+};
+export const Inline = () => {
+    const elements = ['h1', 'h2', 'h3', 'p'];
+    return (_jsx("div", { style: { width: '100%' }, children: elements.map((Element) => _jsxs(Element, { children: [Element, ": There was a ", _jsx(InlineSpinner, {}), " in New Orleans."] }, Element)) }));
+};
+//# sourceMappingURL=spinner.stories.js.map

package/dist/src/components/spinner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAqB,MAAM,cAAc,CAAC;AAEzE,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;IAChC,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,EAAE;CACa,CAAC;AAE1B,MAAM,QAAQ,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,KAAC,OAAO,OAAK,IAAI,GAAI,CAAC;AAE/D,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAkB,EAAE,EAAE;IAClD,OAAO,CACH,cAAK,KAAK,EAAE;YACR,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,OAAO;YAClB,MAAM,EAAE,qBAAqB;YAC7B,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,UAAU;SACvB,YACG,KAAC,OAAO,OAAK,IAAI,GAAI,GACnB,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE;IACvB,MAAM,QAAQ,GAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IAC9D,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YACxB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,MAAC,OAAO,eAAgB,OAAO,oBAAe,KAAC,aAAa,KAAG,yBAAjD,OAAO,CAAoE,CAAC,GACnH,CACT,CAAC;AACN,CAAC,CAAC"}