@apify/ui-library 1.171.0 → 1.171.1-uilibraryversion2candida-85b55e.71

package/src/components/color_wheel_gradient/color_wheel_gradient.stories.tsx

@@ -1,152 +0,0 @@
-import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
-import type { ElementType } from 'react';
-
-import { ColorWheelGradient, type ColorWheelGradientProps } from './color_wheel_gradient';
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-    <div
-        style={{
-            position: 'relative',
-            width: '400px',
-            height: '400px',
-            backgroundColor: '#f5f5f5',
-            border: '1px solid #ddd',
-            borderRadius: '8px',
-            overflow: 'hidden',
-        }}
-    >
-        <style>
-            {`
-                @keyframes rotate {
-                    from { transform: rotate(0deg); }
-                    to { transform: rotate(360deg); }
-                }
-            `}
-        </style>
-        {children}
-    </div>
-);
-
-// oxlint-disable-next-line local/storybook-figma-design-url -- decorative gradient, no Figma counterpart
-export default {
-    title: 'UI-Library/ColorWheelGradient',
-    tags: ['deprecated'],
-    component: ColorWheelGradient,
-    decorators: [
-        (Story: ElementType, _context: StoryContext) => (
-            <Wrapper>
-                <Story />
-            </Wrapper>
-        ),
-    ],
-    argTypes: {
-        translateX: {
-            control: 'number',
-        },
-        translateY: {
-            control: 'number',
-        },
-        rotation: {
-            control: 'number',
-        },
-        radius: {
-            control: 'number',
-        },
-        blurSize: {
-            control: 'number',
-        },
-    },
-} as Meta<ColorWheelGradientProps>;
-
-type Story = StoryObj<ColorWheelGradientProps>;
-
-/**
- * Default color wheel gradient with standard settings
- */
-export const Default: Story = {
-    args: {
-        radius: 200,
-    },
-};
-
-/**
- * Small color wheel gradient
- */
-export const Small: Story = {
-    args: {
-        radius: 100,
-    },
-};
-
-/**
- * Medium color wheel gradient
- */
-export const Medium: Story = {
-    args: {
-        radius: 150,
-    },
-};
-
-/**
- * Large color wheel gradient
- */
-export const Large: Story = {
-    args: {
-        radius: 250,
-    },
-};
-
-/**
- * Color wheel gradient with custom translation in both directions
- */
-export const Translated: Story = {
-    args: {
-        radius: 150,
-        translateX: 30,
-        translateY: -30,
-    },
-};
-
-/**
- * Color wheel gradient with minimal blur
- */
-export const MinimalBlur: Story = {
-    args: {
-        radius: 200,
-        blurSize: 10,
-    },
-};
-
-/**
- * Color wheel gradient with no blur (sharp edges)
- */
-export const NoBlur: Story = {
-    args: {
-        radius: 200,
-        blurSize: 0,
-    },
-};
-
-/**
- * Animated rotating color wheel gradient
- */
-export const AnimatedRotation: Story = {
-    args: {
-        radius: 180,
-    },
-    render: (args) => (
-        <ColorWheelGradient
-            {...args}
-            style={{
-                animation: 'rotate 4s linear infinite',
-            }}
-        />
-    ),
-    parameters: {
-        docs: {
-            description: {
-                story: 'This story demonstrates a continuously rotating color wheel gradient using CSS animation.',
-            },
-        },
-    },
-};

package/src/components/color_wheel_gradient/color_wheel_gradient.tsx

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-export interface ColorWheelGradientProps {
-    translateX?: number;
-    translateY?: number;
-    rotation?: number;
-    radius?: number;
-    blurSize?: number;
-}
-
-export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`
-    ${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
-    z-index: 1;
-    position: absolute;
-    width: ${radius ? `${radius}px` : 'auto'};
-    height: ${radius ? `${radius}px` : 'auto'};
-    transform-origin: center;
-    transform: translate(${translateX}px, ${translateY}px) rotate(${rotation}deg);
-
-    opacity: 0.30;
-    background: conic-gradient(
-        rgba(93, 133, 225, 0.99) 0deg,
-        rgba(106, 20, 222, 0.99) 69deg,
-        rgba(228, 68, 103, 0.99) 150deg,
-        rgba(250, 129, 54, 0.99) 221deg,
-        rgba(240, 178, 27, 0.99) 287deg,
-        rgba(18, 150, 111, 0.99) 360deg
-    );
-
-    border-radius: 50%;
-    filter: blur(${blurSize}px)
-`}
-`;

package/src/components/color_wheel_gradient/index.ts

@@ -1 +0,0 @@
-export * from './color_wheel_gradient';

package/src/components/text/text_content.stories.tsx

@@ -1,194 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import styled from 'styled-components';
-
-import { type ContentTextProps, TextContent } from './text_content';
-
-export default {
-    title: 'Design Tokens/Typography/TextContent',
-    component: TextContent,
-    tags: ['deprecated'],
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component.' +
-                    ' It provides content-specific text styles for markdown rendering (paragraphs and code snippets).' +
-                    ' For general text usage, use TextShared or TextMarketing instead.',
-            },
-        },
-    },
-    argTypes: {
-        type: {
-            control: { type: 'select' },
-            options: ['paragraph', 'snippet'],
-            description: 'Text type: paragraph for regular markdown text, snippet for inline code',
-        },
-        weight: {
-            control: { type: 'select' },
-            options: ['normal', 'bold'],
-            description: 'Font weight',
-        },
-        as: {
-            control: 'text',
-            description: 'The HTML element to render as (default: p)',
-        },
-        children: {
-            control: 'text',
-            description: 'The text content',
-        },
-        color: {
-            control: 'color',
-            description: 'Custom color for the text',
-        },
-        align: {
-            control: { type: 'select' },
-            options: ['left', 'center', 'right'],
-            description: 'Text alignment',
-        },
-        italic: {
-            control: 'boolean',
-            description: 'Apply italic style',
-        },
-        uppercase: {
-            control: 'boolean',
-            description: 'Transform text to uppercase',
-        },
-    },
-} as Meta<ContentTextProps>;
-
-type Story = StoryObj<ContentTextProps>;
-
-const StoryWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 2rem;
-    max-width: 800px;
-`;
-
-const TextShowcase = styled.div`
-    padding: 1rem;
-    background: #f5f5f5;
-    border-radius: 4px;
-
-    small {
-        display: block;
-        color: #666;
-        font-size: 0.75rem;
-        margin-bottom: 0.5rem;
-        font-family: monospace;
-    }
-`;
-
-const WarningBanner = styled.div`
-    background: #fff3cd;
-    border: 1px solid #ffc107;
-    border-radius: 4px;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
-
-    strong {
-        color: #856404;
-        display: block;
-        margin-bottom: 0.5rem;
-    }
-
-    p {
-        color: #856404;
-        margin: 0;
-        font-size: 0.875rem;
-    }
-`;
-
-/**
- * Default content text (used by SimpleMarkdown)
- *
- * ⚠️ This component is for internal use by SimpleMarkdown only
- */
-export const Default: Story = {
-    args: {
-        type: 'paragraph',
-        weight: 'normal',
-        children: 'Content text for markdown rendering.',
-    },
-};
-
-/**
- * All content text variants as used in SimpleMarkdown component
- *
- * ⚠️ These text styles are specifically designed for markdown content rendering.
- * For general application text, use TextShared or TextMarketing.
- */
-export const AllVariants: Story = {
-    render: () => (
-        <StoryWrapper>
-            <WarningBanner>
-                <strong>⚠️ Internal Component</strong>
-                <p>
-                    TextContent is used exclusively by the SimpleMarkdown component for rendering markdown paragraphs
-                    and inline code snippets. For general text usage in your application, use TextShared or
-                    TextMarketing components instead.
-                </p>
-            </WarningBanner>
-
-            <div>
-                <h3 style={{ marginTop: 0, marginBottom: '1rem' }}>Paragraph Type</h3>
-                <p style={{ fontSize: '0.875rem', color: '#666', marginBottom: '1rem' }}>
-                    Used for regular text content in markdown documents
-                </p>
-
-                <TextShowcase>
-                    <small>type=paragraph, weight=normal</small>
-                    <TextContent type="paragraph" weight="normal">
-                        This is a paragraph with normal weight, used for standard markdown text content. It provides
-                        optimal readability for documentation and readme files.
-                    </TextContent>
-                </TextShowcase>
-
-                <TextShowcase>
-                    <small>type=paragraph, weight=bold</small>
-                    <TextContent type="paragraph" weight="bold">
-                        This is a paragraph with bold weight, used for **strong text** in markdown. It creates emphasis
-                        for important information within the content.
-                    </TextContent>
-                </TextShowcase>
-            </div>
-
-            <div>
-                <h3 style={{ marginBottom: '1rem' }}>Snippet Type</h3>
-                <p style={{ fontSize: '0.875rem', color: '#666', marginBottom: '1rem' }}>
-                    Used for inline code within markdown text (e.g., `code`)
-                </p>
-
-                <TextShowcase>
-                    <small>type=snippet, weight=normal</small>
-                    <TextContent type="snippet" weight="normal">
-                        const inlineCode = &quot;monospace text for code snippets&quot;;
-                    </TextContent>
-                </TextShowcase>
-
-                <TextShowcase>
-                    <small>type=snippet, weight=bold</small>
-                    <TextContent type="snippet" weight="bold">
-                        function boldCodeSnippet() &#123; return &quot;emphasized code&quot;; &#125;
-                    </TextContent>
-                </TextShowcase>
-            </div>
-
-            <div style={{ marginTop: '2rem', padding: '1.5rem', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
-                <h4 style={{ marginTop: 0 }}>Example in Markdown Context</h4>
-                <TextContent type="paragraph" weight="normal" mb="space8">
-                    The SimpleMarkdown component uses these styles to render markdown. For example, when you write code
-                    like{' '}
-                    <TextContent type="snippet" weight="normal" as="span">
-                        npm install
-                    </TextContent>{' '}
-                    inline, it uses the snippet type.
-                </TextContent>
-                <TextContent type="paragraph" weight="bold">
-                    Bold text in markdown is rendered using paragraph with bold weight.
-                </TextContent>
-            </div>
-        </StoryWrapper>
-    ),
-};