@apify/ui-library 1.99.0 → 1.99.1

package/src/components/spinner.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/react-vite';
+
+import { InlineSpinner, Spinner, type SpinnerProps } from './spinner.js';
+
+export default {
+    title: 'UI-Library/Spinner',
+    parameters: { layout: 'padded' },
+    component: Spinner,
+    args: {},
+} as Meta<typeof Spinner>;
+
+const Template = (args: SpinnerProps) => <Spinner {...args} />;
+
+export const Standalone = Template.bind({});
+
+export const WithinContainer = (args: SpinnerProps) => {
+    return (
+        <div style={{
+            minWidth: '100px',
+            minHeight: '200px',
+            border: 'solid 1px lightgray',
+            borderRadius: '1rem',
+            position: 'relative',
+        }}>
+            <Spinner {...args} />
+        </div>
+    );
+};
+
+export const Inline = () => {
+    const elements: React.ElementType[] = ['h1', 'h2', 'h3', 'p'];
+    return (
+        <div style={{ width: '100%' }}>
+            {elements.map((Element) => <Element key={Element}>{Element}: There was a <InlineSpinner /> in New Orleans.</Element>)}
+        </div>
+    );
+};

package/src/components/spinner.tsx

@@ -0,0 +1,116 @@
+import styled, { keyframes } from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+import type { WithTransientProps } from '../type_utils.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;
+    }
+`;
+
+export type SpinnerProps = {
+    id?: string;
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    small?: boolean,
+    loadingReason?: string,
+};
+
+type SpinnerWrapperProps = WithTransientProps<Pick<SpinnerProps, 'small'>>;
+
+// 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<SpinnerWrapperProps>`
+    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 }: SpinnerProps) => {
+    return (
+        <SpinnerWrapper {...props} title={loadingReason} $small={small}>
+            <svg className={spinnerClassNames.SPINNER} viewBox="0 0 50 50">
+                <circle
+                    className="path"
+                    cx="25"
+                    cy="25"
+                    r="20"
+                    fill="none"
+                    strokeWidth="5"
+                    strokeLinecap="round"
+                ></circle>
+            </svg>
+        </SpinnerWrapper>
+    );
+};
+
+/**
+ * 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)<{size?: string}>`
+    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%;
+    }
+`;