@apify/ui-library 1.127.9 → 1.128.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.9",
+    "version": "1.128.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -31,6 +31,7 @@
         "@floating-ui/react": "^0.26.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.0.0",
+        "@radix-ui/react-switch": "^1.2.6",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -68,5 +69,5 @@
         "src",
         "style"
     ],
-    "gitHead": "0b7030cf042943bbd494c7117bc9c104a61641f0"
+    "gitHead": "8d4338c49c97cd1491d3522d888054e55036328e"
 }

package/src/components/checkbox/checkbox.stories.tsx

@@ -44,6 +44,11 @@ const getIndeterminateLabel = (value: boolean | null) => {
     return value ? 'Checked' : 'Unchecked';
 };
 
+const SectionLabel = styled.div`
+    font-weight: bold;
+    margin-top: 1rem;
+`;
+
 export const Indeterminate = () => {
     const [value, setValue] = useState<boolean | null>(null);
     return (
@@ -52,6 +57,21 @@ export const Indeterminate = () => {
                 <IndeterminateCheckbox value={value} setValue={setValue} />
                 {getIndeterminateLabel(value)} (click to toggle)
             </Row>
+
+            <SectionLabel>Indeterminate</SectionLabel>
+            <Row><IndeterminateCheckbox value={null} setValue={() => {}} /> Default</Row>
+            <Row><IndeterminateCheckbox value={null} setValue={() => {}} disabled /> Disabled</Row>
+            <Row><IndeterminateCheckbox value={null} setValue={() => {}} error="Some error" /> Error</Row>
+
+            <SectionLabel>Checked</SectionLabel>
+            <Row><IndeterminateCheckbox value={true} setValue={() => {}} /> Default</Row>
+            <Row><IndeterminateCheckbox value={true} setValue={() => {}} disabled /> Disabled</Row>
+            <Row><IndeterminateCheckbox value={true} setValue={() => {}} error="Some error" /> Error</Row>
+
+            <SectionLabel>Unchecked</SectionLabel>
+            <Row><IndeterminateCheckbox value={false} setValue={() => {}} /> Default</Row>
+            <Row><IndeterminateCheckbox value={false} setValue={() => {}} disabled /> Disabled</Row>
+            <Row><IndeterminateCheckbox value={false} setValue={() => {}} error="Some error" /> Error</Row>
         </Grid>
     );
 };

package/src/components/checkbox/checkbox.style.ts

@@ -30,11 +30,7 @@ export const checkboxStyle = css`
         border-color: ${theme.color.danger.text};
     }
 
-    &.indeterminate {
-        background-color: ${theme.color.primary.action};
-        border-color: ${theme.color.primary.action};
-    }
-
+    &[data-state="indeterminate"],
     &[data-state="checked"] {
         background-color: ${theme.color.primary.action};
         border-color: ${theme.color.primary.action};

package/src/components/checkbox/checkbox.tsx

@@ -75,7 +75,7 @@ export const CheckboxPrimitive: FC<CheckboxPrimitiveProps> = (props) => (
 );
 
 export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = (props) => (
-    <InternalCheckbox {...props} className="indeterminate">
+    <InternalCheckbox {...props}>
         {props.value == null ? (
             <IndeterminateIndicator>
                 <MinusIcon size="12" />

package/src/components/collapsible_card/collapsible_card.stories.tsx

@@ -26,6 +26,10 @@ export default {
             control: 'boolean',
             description: 'Whether to hide the chevron icon',
         },
+        noDivider: {
+            control: 'boolean',
+            description: 'Whether to hide the divider between header and content',
+        },
         topSection: {
             control: 'text',
             description: 'Content rendered above the header',
@@ -120,6 +124,18 @@ export const GreyHeaderOnHover: Story = {
     },
 };
 
+/**
+ * A collapsible card without the divider between header and content.
+ */
+export const NoDivider: Story = {
+    args: {
+        header: 'No divider between header and content',
+        noDivider: true,
+        isExpanded: true,
+        children: 'This card has no divider line between the header and content areas.',
+    },
+};
+
 /**
  * A collapsible card without the outer border.
  */

package/src/components/collapsible_card/collapsible_card.tsx

@@ -29,6 +29,7 @@ export type CollapsibleCardProps = {
     isExpanded?: boolean;
     onIsExpandedChanged?: (expanded: boolean) => void;
     noChevron?: boolean;
+    noDivider?: boolean;
     topSection?: ReactNode;
     isClosedHeaderGrey?: boolean;
     isHeaderGreyOnHover?: boolean;
@@ -101,8 +102,8 @@ const StyledCardContent = styled.div`
     overflow: auto;
 `;
 
-const CollapsibleContent = styled(Collapsible.Content)`
-    border-top: 1px solid ${theme.color.neutral.border};
+const CollapsibleContent = styled(Collapsible.Content)<{ $noDivider?: boolean }>`
+    ${({ $noDivider }) => ($noDivider ? '' : `border-top: 1px solid ${theme.color.neutral.border};`)}
 `;
 
 export const CollapsibleCard: FC<CollapsibleCardProps> = ({
@@ -111,6 +112,7 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
     isExpanded,
     onIsExpandedChanged,
     noChevron,
+    noDivider,
     topSection,
     hideOuterBorder,
     hasShadow,
@@ -148,7 +150,7 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
             <Collapsible.Root
                 open={isUncontrolled ? isOpen : isExpanded}
             >
-                <CollapsibleContent className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}>
+                <CollapsibleContent $noDivider={noDivider} className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}>
                     <StyledCardContent className={collapsibleCardClassNames.CONTENT} data-test="card-content">
                         {children}
                     </StyledCardContent>

package/src/components/index.ts

@@ -28,3 +28,4 @@ export * from './spinner.js';
 export * from './store/index.js';
 export * from './checkbox/index.js';
 export * from './collapsible_card/index.js';
+export * from './switch/index.js';

package/src/components/switch/index.ts

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

package/src/components/switch/switch.stories.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { SwitchPrimitive as Switch } from './switch';
+
+export default {
+    title: 'UI-Library/Inputs/Switch',
+    args: {},
+};
+
+const Grid = styled.div`
+    margin: 5rem 3rem;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 1rem 5rem;
+
+    input{
+        width: 100%;
+    }
+`;
+
+export const SwitchPrimitive = () => {
+    const [value, setValue] = useState(1);
+    return (
+        <Grid>
+            <Switch value={value} setValue={setValue}/> <p>checked vs unchecked</p>
+            <Switch name="Disabled"
+                disabled
+                value={false}
+                setValue={() => {}}
+            /> <p>disabled</p>
+            <Switch name="Error"
+                error='Test error'
+                value={value}
+                setValue={setValue}
+            /> <p>error</p>
+        </Grid>
+    );
+};

package/src/components/switch/switch.style.ts

@@ -0,0 +1,54 @@
+import { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+
+export const switchStyle = css`
+    width: 32px;
+    height: 16px;
+    background-color: ${theme.color.neutral.actionSecondary};
+    border-radius: 100px;
+    position: relative;
+    transition: border-color 120ms ease-out, background-color 120ms ease-out !important;
+    vertical-align: middle;
+
+    &:focus-visible {
+        outline: 2px solid ${theme.color.primary.fieldBorderActive}!important;
+    }
+
+    &:hover {
+        background-color: ${theme.color.neutral.actionSecondaryHover};
+        cursor: pointer;
+    }
+
+    &.disabled {
+        background-color: ${theme.color.neutral.disabled};
+    }
+
+    &.error {
+        background-color: ${theme.color.danger.action};
+
+        &:hover {
+        background-color: ${theme.color.danger.actionHover};
+        }
+    }
+
+    &[data-state="checked"] {
+        background-color: ${theme.color.success.action};
+
+        &:hover {
+            background-color: ${theme.color.success.actionHover};
+        }
+
+        &.disabled {
+            background-color: ${theme.color.success.chipBackground};
+        }
+
+        &.error {
+            background-color: ${theme.color.danger.action};
+
+            &:hover {
+                background-color: ${theme.color.danger.actionHover};
+            }
+        }
+    }
+`;

package/src/components/switch/switch.tsx

@@ -0,0 +1,54 @@
+import * as SwitchPrimitiveReact from '@radix-ui/react-switch';
+import clsx from 'clsx';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { switchStyle } from './switch.style';
+
+const StyledSwitch = styled(SwitchPrimitiveReact.Root)`
+    all: unset;
+    ${switchStyle}
+`;
+
+const StyledThumb = styled(SwitchPrimitiveReact.Thumb)`
+    display: block;
+    background-color: ${theme.color.neutral.backgroundWhite};
+    width: 12px;
+    height: 12px;
+    border-radius: 100px;
+    transition: transform 100ms;
+    transform: translateX(2px);
+    will-change: transform;
+    &[data-state="checked"] {
+        transform: translateX(18px);
+    }
+`;
+type SwitchPrimitiveProps = {
+    value: boolean;
+    setValue: (checked: boolean) => void;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitiveReact.Root>, 'checked' | 'onCheckedChange' | 'value'>;
+
+export const SwitchPrimitive = ({
+    value,
+    setValue,
+    error,
+    disabled,
+    readOnly,
+    ...rest
+}: SwitchPrimitiveProps) => (
+    <StyledSwitch
+        {...rest}
+        checked={value}
+        onCheckedChange={setValue}
+        disabled={disabled || readOnly}
+        className={clsx(
+            error && 'error',
+            (disabled || readOnly) && 'disabled',
+        )}
+    >
+        <StyledThumb />
+    </StyledSwitch>
+);