ff-ds-ui 0.0.2 → 0.0.4

package/src/components/Button/Button.scss

@@ -0,0 +1,245 @@
+@use '../../styles/styles' as MainStyles;
+@use '../../styles/variables' as Variables;
+@use '../../styles/mixins' as Mixins;
+
+$block: '.#{MainStyles.$ns}button';
+
+#{$block} {
+    @include Mixins.button-reset-styles;
+    @include Variables.variables-padding;
+    @include Variables.variables-radius;
+    @include Variables.variables-colors;
+
+    background: transparent;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /*
+        States
+    */
+    &_loading {
+        &::after {
+            content: '...';
+            animation: fade 1.4s infinite;
+        }
+
+        @keyframes fade {
+            0% {
+                opacity: 0.2;
+            }
+            50% {
+                opacity: 1;
+            }
+            100% {
+                opacity: 0.2;
+            }
+        }
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+        pointer-events: none;
+    }
+
+    &:active {
+        transform: scale(0.99);
+        -webkit-transform: scale(0.99);
+        -moz-transform: scale(0.99);
+        -ms-transform: scale(0.99);
+        -o-transform: scale(0.99);
+    }
+
+    &:focus {
+        outline: 2px solid;
+    }
+
+    /*
+        Variants
+    */
+    &_variant {
+        /*
+            Base
+        */
+        &_brand {
+            background: var(--FF-DS-color-brand-base);
+            border: 1px solid var(--FF-DS-color-brand-border);
+            color: var(--FF-DS-color-brand-text);
+            @include Mixins.outlined-hover(--FF-DS-color-brand-base-rgb, 0.7, 0.9);
+        }
+        &_primary {
+            background: var(--FF-DS-color-primary-base);
+            border: 1px solid var(--FF-DS-color-primary-border);
+            color: var(--FF-DS-color-primary-text);
+            @include Mixins.outlined-hover(--FF-DS-color-primary-base-rgb, 0.7, 0.9);
+        }
+        &_success {
+            background: var(--FF-DS-color-success-base);
+            border: 1px solid var(--FF-DS-color-success-border);
+            color: var(--FF-DS-color-success-text);
+            @include Mixins.outlined-hover(--FF-DS-color-success-base-rgb, 0.7, 0.9);
+        }
+        &_warning {
+            background: var(--FF-DS-color-warning-base);
+            border: 1px solid var(--FF-DS-color-warning-border);
+            color: var(--FF-DS-color-warning-text);
+            @include Mixins.outlined-hover(--FF-DS-color-warning-base-rgb, 0.7, 0.9);
+        }
+        &_secondary {
+            background: var(--FF-DS-color-secondary-base);
+            border: 1px solid var(--FF-DS-color-secondary-border);
+            color: var(--FF-DS-color-secondary-text);
+            @include Mixins.outlined-hover(--FF-DS-color-secondary-base-rgb, 0.7, 0.9);
+        }
+        &_error {
+            background: var(--FF-DS-color-error-base);
+            border: 1px solid var(--FF-DS-color-error-border);
+            color: var(--FF-DS-color-error-text);
+            @include Mixins.outlined-hover(--FF-DS-color-error-base-rgb, 0.7, 0.9);
+        }
+
+        // /*
+        //     Outlined
+        // */
+        &_outlined-brand {
+            border: 1px solid var(--FF-DS-color-brand-border);
+            color: var(--FF-DS-color-brand-border);
+            @include Mixins.outlined-hover(--FF-DS-color-brand-base-rgb, 0.2, 0.25);
+        }
+        &_outlined-primary {
+            border: 1px solid var(--FF-DS-color-primary-border);
+            color: var(--FF-DS-color-primary-border);
+            @include Mixins.outlined-hover(--FF-DS-color-primary-base-rgb, 0.2, 0.25);
+        }
+        &_outlined-success {
+            border: 1px solid var(--FF-DS-color-success-border);
+            color: var(--FF-DS-color-success-border);
+            @include Mixins.outlined-hover(--FF-DS-color-success-base-rgb, 0.2, 0.25);
+        }
+        &_outlined-warning {
+            border: 1px solid var(--FF-DS-color-warning-border);
+            color: var(--FF-DS-color-warning-border);
+            @include Mixins.outlined-hover(--FF-DS-color-warning-base-rgb, 0.2, 0.25);
+        }
+        &_outlined-secondary {
+            border: 1px solid var(--FF-DS-color-secondary-border);
+            color: var(--FF-DS-color-secondary-border);
+            @include Mixins.outlined-hover(--FF-DS-color-secondary-base-rgb, 0.2, 0.25);
+        }
+        &_outlined-error {
+            border: 1px solid var(--FF-DS-color-error-border);
+            color: var(--FF-DS-color-error-border);
+            @include Mixins.outlined-hover(--FF-DS-color-error-base-rgb, 0.2, 0.25);
+        }
+
+        // /*
+        //     Flat
+        // */
+        &_flat-brand {
+            border: none;
+            color: var(--FF-DS-color-brand-border);
+            @include Mixins.outlined-hover(--FF-DS-color-brand-base-rgb, 0.2, 0.25);
+        }
+        &_flat-primary {
+            border: none;
+            color: var(--FF-DS-color-primary-border);
+            @include Mixins.outlined-hover(--FF-DS-color-primary-base-rgb, 0.2, 0.25);
+        }
+        &_flat-success {
+            border: none;
+            color: var(--FF-DS-color-success-border);
+            @include Mixins.outlined-hover(--FF-DS-color-success-base-rgb, 0.2, 0.25);
+        }
+        &_flat-warning {
+            border: none;
+            color: var(--FF-DS-color-warning-border);
+            @include Mixins.outlined-hover(--FF-DS-color-warning-base-rgb, 0.2, 0.25);
+        }
+        &_flat-secondary {
+            border: none;
+            color: var(--FF-DS-color-secondary-border);
+            @include Mixins.outlined-hover(--FF-DS-color-secondary-base-rgb, 0.2, 0.25);
+        }
+        &_flat-error {
+            border: none;
+            color: var(--FF-DS-color-error-border);
+            @include Mixins.outlined-hover(--FF-DS-color-error-base-rgb, 0.2, 0.25);
+        }
+    }
+
+    /*
+        Width
+    */
+    &_width {
+        &_auto {
+            max-width: 100%;
+        }
+
+        &_full {
+            width: 100%;
+        }
+    }
+
+    /*
+        Sizes
+    */
+    &_size {
+        &_xs {
+            height: 20px;
+            border-radius: var(--FF-DS-border-radius-xs);
+            padding: var(--FF-DS-padding-xs);
+        }
+        &_s {
+            height: 24px;
+            border-radius: var(--FF-DS-border-radius-s);
+            padding: var(--FF-DS-padding-s);
+        }
+        &_m {
+            height: 28px;
+            border-radius: var(--FF-DS-border-radius-m);
+            padding: var(--FF-DS-padding-m);
+        }
+        &_l {
+            height: 36px;
+            border-radius: var(--FF-DS-border-radius-l);
+            padding: var(--FF-DS-padding-l);
+        }
+        &_xl {
+            font-size: 16px;
+            height: 44px;
+            border-radius: var(--FF-DS-border-radius-xl);
+            padding: var(--FF-DS-padding-xl);
+        }
+    }
+
+    /*
+        Border radius    
+    */
+    &_borderRadius_circle {
+        border-radius: 100%;
+        -webkit-border-radius: 100%;
+        -moz-border-radius: 100%;
+        -ms-border-radius: 100%;
+        -o-border-radius: 100%;
+    }
+
+    &_borderRadius_round {
+        border-radius: 8px;
+        -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
+        -ms-border-radius: 8px;
+        -o-border-radius: 8px;
+    }
+
+    &_borderRadius_box {
+        border-radius: 0px;
+        -webkit-border-radius: 0px;
+        -moz-border-radius: 0px;
+        -ms-border-radius: 0px;
+        -o-border-radius: 0px;
+    }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import './Button.scss'
+import { bemBlock } from '../../utils'
+import type { BUTTON_BORDER, BUTTON_SIZES, BUTTON_VARIANTS, BUTTON_WIDTH } from './const'
+
+export type ButtonBorder = (typeof BUTTON_BORDER)[number]
+export type ButtonVariants = (typeof BUTTON_VARIANTS)[number]
+export type ButtonWidth = (typeof BUTTON_WIDTH)[number]
+export type ButtonSizes = (typeof BUTTON_SIZES)[number]
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: ButtonSizes
+    variant?: ButtonVariants
+    width?: ButtonWidth
+    borderRadius?: ButtonBorder
+    loading?: boolean
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ variant, size, width, children, borderRadius = 'round', loading, ...props }, ref) => {
+        const b = bemBlock('button')
+
+        return (
+            <button
+                className={b({ variant, size, width, borderRadius, loading })}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </button>
+        )
+    }
+)
+
+Button.displayName = 'Button'

package/src/components/Button/__stories__/Button.stories.tsx

@@ -0,0 +1,168 @@
+import { Flex } from '../../'
+import { Button } from '../Button'
+import { BUTTON_BORDER, BUTTON_SIZES, BUTTON_VARIANTS, BUTTON_WIDTH } from '../const'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+    title: 'Components/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            description: 'Button style variants',
+            control: 'select',
+            options: BUTTON_VARIANTS,
+        },
+        loading: {
+            description: 'Is loading styles',
+            control: 'radio',
+            options: [false, true],
+        },
+        size: {
+            description: 'Button sizes',
+            control: 'radio',
+            options: BUTTON_SIZES,
+        },
+        borderRadius: {
+            description: 'Button border-radius',
+            control: 'radio',
+            options: BUTTON_BORDER,
+        },
+        width: {
+            description: 'Button width',
+            control: 'radio',
+            options: BUTTON_WIDTH,
+        },
+    },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Loading: Story = {
+    args: {
+        size: 'xl',
+        loading: true,
+        variant: 'primary',
+        children: 'Loading',
+    },
+}
+
+export const BorderRadius: Story = {
+    render: (props) => (
+        <Flex gap="xl">
+            <Button size="xl" borderRadius="circle" variant="primary" {...props}>
+                circle
+            </Button>
+            <Button size="xl" borderRadius="box" variant="primary" {...props}>
+                box
+            </Button>
+            <Button size="xl" borderRadius="round" variant="primary" {...props}>
+                round
+            </Button>
+        </Flex>
+    ),
+}
+
+export const Disabled: Story = {
+    args: {
+        width: 'full',
+        size: 'xl',
+        disabled: true,
+        variant: 'error',
+        children: 'disabled',
+    },
+}
+
+export const Width: Story = {
+    render: (props) => (
+        <Flex direction="col" alignItems="center" justifyContent="center" gap="xl">
+            <div style={{ width: 700 }}>
+                <Button variant="primary" width="auto" size="xl" {...props}>
+                    width auto
+                </Button>
+            </div>
+            <div style={{ width: 700 }}>
+                <Button variant="primary" width="full" size="xl" {...props}>
+                    width full
+                </Button>
+            </div>
+        </Flex>
+    ),
+}
+
+export const Base: Story = {
+    render: (props) => (
+        <Flex gap="xl" wrap>
+            <Button variant="secondary" size="l" {...props}>
+                base-secondary
+            </Button>
+            <Button variant="primary" size="l" {...props}>
+                base-info
+            </Button>
+            <Button variant="success" size="l" {...props}>
+                base-success
+            </Button>
+            <Button variant="warning" size="l" {...props}>
+                base-warning
+            </Button>
+            <Button variant="error" size="l" {...props}>
+                base-danger
+            </Button>
+            <Button variant="brand" size="l" {...props}>
+                base-brand
+            </Button>
+        </Flex>
+    ),
+}
+
+export const Outlined: Story = {
+    render: (props) => (
+        <Flex gap="xl" wrap>
+            <Button variant="outlined-secondary" size="l" {...props}>
+                outlined-secondary
+            </Button>
+            <Button variant="outlined-primary" size="l" {...props}>
+                outlined-info
+            </Button>
+            <Button variant="outlined-success" size="l" {...props}>
+                outlined-success
+            </Button>
+            <Button variant="outlined-warning" size="l" {...props}>
+                outlined-warning
+            </Button>
+            <Button variant="outlined-error" size="l" {...props}>
+                outlined-danger
+            </Button>
+            <Button variant="outlined-brand" size="l" {...props}>
+                outlined-brand
+            </Button>
+        </Flex>
+    ),
+}
+
+export const Flat: Story = {
+    render: (props) => (
+        <Flex gap="xl" wrap>
+            <Button variant="flat-secondary" size="l" {...props}>
+                flat-secondary
+            </Button>
+            <Button variant="flat-primary" size="l" {...props}>
+                flat-info
+            </Button>
+            <Button variant="flat-success" size="l" {...props}>
+                flat-success
+            </Button>
+            <Button variant="flat-warning" size="l" {...props}>
+                flat-warning
+            </Button>
+            <Button variant="flat-error" size="l" {...props}>
+                flat-danger
+            </Button>
+            <Button variant="flat-brand" size="l" {...props}>
+                flat-brand
+            </Button>
+        </Flex>
+    ),
+}

package/src/components/Button/const.ts

@@ -0,0 +1,26 @@
+export const BUTTON_SIZES = ['xs', 's', 'm', 'l', 'xl'] as const
+export const BUTTON_WIDTH = ['auto', 'full'] as const
+export const BUTTON_BORDER = ['circle', 'round', 'box']
+export const BUTTON_VARIANTS = [
+    // Background, border, text colored
+    'brand',
+    'primary',
+    'success',
+    'warning',
+    'secondary',
+    'error',
+    // No background, no border, text colored
+    'flat-brand',
+    'flat-primary',
+    'flat-success',
+    'flat-warning',
+    'flat-secondary',
+    'flat-error',
+    // // No background, bordered, text colored
+    'outlined-brand',
+    'outlined-primary',
+    'outlined-success',
+    'outlined-warning',
+    'outlined-secondary',
+    'outlined-error',
+] as const

package/src/components/Button/index.ts

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

package/src/components/Card/Card.scss

@@ -0,0 +1,13 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}card';
+
+#{$block} {
+    padding: 8px;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+    border: 1px solid lightgrey;
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import './Card.scss'
+import { bemBlock } from '../../utils'
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode
+}
+
+export const Card: React.FC<CardProps> = ({ children }) => {
+    const b = bemBlock('card')
+    return <div className={b()}>{children}</div>
+}

package/src/components/Card/__stories__/Card.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card } from '../Card'
+
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Card_default: Story = {
+    args: {
+        children: 'content',
+    },
+}

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,28 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}checkbox';
+
+#{$block} {
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -ms-border-radius: 8px;
+    -o-border-radius: 8px;
+
+    &_size {
+        &_s {
+            width: 14px;
+            height: 14px;
+        }
+
+        &_m {
+            width: 18px;
+            height: 18px;
+        }
+
+        &_l {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import './Checkbox.scss'
+import { Text } from '../Text'
+import { Flex } from '../Flex'
+import { bemBlock } from '../../utils'
+
+interface CheckboxProps {
+    size?: 's' | 'm' | 'l'
+    text?: string
+    checked?: boolean
+    disabled?: boolean
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({ size = 's', text, checked, disabled }) => {
+    const b = bemBlock('checkbox')
+    return (
+        <Flex gap="xs" alignItems="center">
+            <input className={b({ size })} type="checkbox" checked={checked} disabled={disabled} />
+            {/* //TODO: change to label with htmlFor */}
+            <Text>{text}</Text>
+        </Flex>
+    )
+}

package/src/components/Checkbox/__stories__/Checkbox.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Checkbox } from '../Checkbox'
+
+const meta = {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Checkbox_default: Story = {
+    args: {
+        size: 's',
+        text: 'ready?',
+        checked: true,
+        disabled: false,
+    },
+}

package/src/components/Checkbox/index.ts

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

package/src/components/Divider/Divider.scss

@@ -0,0 +1,62 @@
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/variables/spacing.scss' as Spacing;
+@use '../../styles/variables/colors.scss' as Colors;
+
+$block: '.#{MainStyles.$ns}divider';
+
+#{$block} {
+    @include Spacing.variables;
+    @include Colors.variables;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &_orientation {
+        &_horizontal {
+            flex-direction: row;
+            margin-top: var(--FF-DS-spacing-s);
+            margin-bottom: var(--FF-DS-spacing-s);
+
+            &::before,
+            &::after {
+                content: '';
+                flex: 1;
+                height: 1px;
+                background: var(--FF-DS-color-secondary-border);
+            }
+            & > span {
+                white-space: nowrap;
+            }
+        }
+
+        &_vertical {
+            flex-direction: column;
+            margin-left: var(--FF-DS-spacing-s);
+            margin-right: var(--FF-DS-spacing-s);
+            background: var(--FF-DS-color-secondary-border);
+            width: 1px;
+        }
+    }
+
+    &_position {
+        &_left {
+            &::before {
+                flex: 0;
+            }
+        }
+
+        &_center {
+            &::before,
+            &::after {
+                flex: 1;
+            }
+        }
+
+        &_right {
+            &::after {
+                flex: 0;
+            }
+        }
+    }
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './Divider.scss'
+import { bemBlock } from '../../utils'
+import { Text } from '../Text'
+
+interface DividerProps {
+    orientation: 'vertical' | 'horizontal'
+    position?: 'left' | 'center' | 'right'
+    children?: React.ReactNode
+}
+
+export const Divider: React.FC<DividerProps> = ({ orientation, position, children }) => {
+    const b = bemBlock('divider')
+    return (
+        <div className={b({ orientation, position })}>
+            <Text style={{ padding: children ? '0 10px' : '' }} variant="caption2">
+                {orientation === 'horizontal' && children}
+            </Text>
+        </div>
+    )
+}