@apify/ui-library 1.84.3 → 1.86.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.84.3",
+    "version": "1.86.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.14.2",
+        "@apify/ui-icons": "^1.15.0",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -52,6 +52,7 @@
         "styled-components": "^5.3.3"
     },
     "devDependencies": {
+        "@storybook/react-vite": "^9.0.16",
         "@types/lodash": "^4.14.200",
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
@@ -65,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "003748195952f855e13d72e3aea801527796a115"
+    "gitHead": "e2a1096a40a3aad2fabf49fb184aa7ec366aa4c1"
 }

package/src/components/badge.stories.jsx

@@ -0,0 +1,104 @@
+import { PeopleIcon } from '@apify/ui-icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import { Badge, BADGE_SIZES, BADGE_VARIANTS } from './badge';
+import { SHARED_TEXT_TYPES } from './text';
+
+export default {
+    title: 'UI-Library/Badge',
+    component: Badge,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/Shared-library?node-id=4253-5781&t=6aCmGWZ0tbFpElNN-0',
+        },
+    },
+};
+
+const Table = styled.table`
+    td {
+        padding: 8px
+    }
+`;
+
+export const Default = () => {
+    return (
+        <Table>
+            <tbody>
+                {BADGE_VARIANTS.map((variant) => <tr key={variant}>
+                    {BADGE_SIZES.map((size) => {
+                        return (
+                            <React.Fragment key={size}>
+                                <td>
+                                    <Badge
+                                        size={size}
+                                        variant={variant}
+                                        LeadingIcon={PeopleIcon}
+                                    >
+                                            Badge
+                                    </Badge>
+                                </td>
+                                <td>
+                                    <Badge
+                                        size={size}
+                                        type="code"
+                                        variant={variant}
+                                        LeadingIcon={PeopleIcon}
+                                    >
+                                            Badge
+                                    </Badge>
+                                </td>
+                            </React.Fragment>
+                        );
+                    })}
+                </tr>,
+                )}
+            </tbody>
+        </Table>
+    );
+};
+
+export const Playground = ({ size, LeadingIcon, ...props }) => {
+    return (
+        <Badge
+            size={size}
+            LeadingIcon={LeadingIcon ? PeopleIcon : undefined}
+            {...props}
+        />
+    );
+};
+
+Playground.propTypes = {
+    size: PropTypes.string,
+    LeadingIcon: PropTypes.bool,
+};
+
+Playground.args = {
+    size: 'small',
+    type: 'body',
+    variant: 'neutral',
+    children: 'Badge',
+    LeadingIcon: false,
+};
+
+Playground.argTypes = {
+    size: {
+        options: BADGE_SIZES,
+        control: 'select',
+    },
+    type: {
+        options: SHARED_TEXT_TYPES,
+        control: 'select',
+    },
+    variant: {
+        options: BADGE_VARIANTS,
+        control: 'select',
+    },
+    children: {
+        control: 'text',
+    },
+    LeadingIcon: {
+        control: 'boolean',
+    },
+};

package/src/components/button.stories.jsx

@@ -0,0 +1,126 @@
+import { X16 } from '@apify/icons';
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from './button';
+import { theme } from '../design_system/theme';
+
+export default {
+    title: 'UI-Library/Button',
+    component: Button,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/yftmrF413idIDbu0OcjlAQ/%F0%9F%8E%AE-Console-library?node-id=0-1',
+        },
+    },
+};
+
+const Wrapper = styled.div`
+    background-color: ${theme.color.neutral.background};
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+`;
+
+const TwoColumns = styled.div`
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 40px;
+`;
+
+const ButtonGrid = styled.div`
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+`;
+
+const ButtonSection = ({
+    ...props
+}) => {
+    return (
+        <Wrapper>
+            <ButtonGrid>
+                <Button {...props} variant='primary'>Primary</Button>
+                <Button {...props} variant='secondary'>Secondary</Button>
+                <Button {...props} variant='tertiary'>Tertiary</Button>
+                <Button {...props} disabled>Disabled</Button>
+            </ButtonGrid>
+
+            <h6>With leading icon</h6>
+            <ButtonGrid>
+                <Button {...props} LeftIcon={X16} variant='primary'>Primary</Button>
+                <Button {...props} LeftIcon={X16} variant='secondary'>Secondary</Button>
+                <Button {...props} LeftIcon={X16} variant='tertiary'>Tertiary</Button>
+                <Button {...props} LeftIcon={X16} disabled>Disabled</Button>
+            </ButtonGrid>
+
+            <h6>With trailing icon</h6>
+            <ButtonGrid>
+                <Button {...props} RightIcon={X16} variant='primary'>Primary</Button>
+                <Button {...props} RightIcon={X16} variant='secondary'>Secondary</Button>
+                <Button {...props} RightIcon={X16} variant='tertiary'>Tertiary</Button>
+                <Button {...props} RightIcon={X16} disabled>Disabled</Button>
+            </ButtonGrid>
+
+            <h6>With both icons</h6>
+            <ButtonGrid>
+                <Button
+                    {...props}
+                    RightIcon={X16}
+                    LeftIcon={X16}
+                    variant='primary'
+                >
+                    Primary test
+                </Button>
+                <Button
+                    {...props}
+                    RightIcon={X16}
+                    LeftIcon={X16}
+                    variant='secondary'
+                >
+                    Secondary
+                </Button>
+                <Button
+                    {...props}
+                    RightIcon={X16}
+                    LeftIcon={X16}
+                    variant='tertiary'
+                >
+                    Tertiary
+                </Button>
+                <Button
+                    {...props}
+                    RightIcon={X16}
+                    LeftIcon={X16}
+                    disabled
+                >
+                    Disabled
+                </Button>
+            </ButtonGrid>
+        </Wrapper>
+    );
+};
+
+export const Default = () => {
+    return (
+        <Wrapper>
+            <h4>Primary</h4>
+            <TwoColumns>
+                <ButtonSection color='default' />
+                <ButtonSection color='default' size='small' />
+            </TwoColumns>
+            <h4>Success</h4>
+            <TwoColumns>
+                <ButtonSection color='success' />
+                <ButtonSection color='success' size='small' />
+            </TwoColumns>
+            <h4>Danger</h4>
+            <TwoColumns>
+                <ButtonSection color='danger' />
+                <ButtonSection color='danger' size='small' />
+            </TwoColumns>
+        </Wrapper>
+    );
+};

package/src/components/rating.tsx

@@ -17,6 +17,7 @@ type RatingStatsProps = {
 
 const StyledRating = styled(Box)`
     display: flex;
+    align-items: center;
 `;
 
 const StyledRatingStats = styled(Box)`
@@ -54,6 +55,21 @@ const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
     }
 `;
 
+type SingleStarRatingProps = BoxProps & {
+    color?: string;
+}
+
+export const SingleStarRating: FC<SingleStarRatingProps> = ({
+    color = theme.color.neutral.icon,
+    ...rest
+}) => {
+    return (
+        <StyledRating {...rest}>
+            <StarFullIcon size="12" color={color} />
+        </StyledRating>
+    );
+};
+
 // 0 is only for empty rating - we don't display any stars filled
 type RatingProps = BoxProps & {
     rating: number | undefined;

package/src/design_system/colors/colors.stories.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+    title: 'Design Tokens/Colors',
+};
+
+const Grid = styled.div`
+    padding: 32px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
+    gap: 32px 16px;
+`;
+
+export const Default = () => {
+    return (
+        <Grid>
+         TODO COLORS PALETTE
+        </Grid>
+    );
+};