ff-ds-ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Divider } from '../Divider'
+import { Flex } from '@/components/Flex'
+import { Avatar } from '@/components/Avatar'
+
+const meta = {
+    title: 'Components/Divider',
+    component: Divider,
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: {
+            description: 'Ориентация',
+            control: 'radio',
+            options: ['horizontal', 'vertical'],
+        },
+        position: {
+            description: 'Позиция линии, работает только с horizontal',
+            control: 'radio',
+            options: ['left', 'center', 'right'],
+        },
+        children: {
+            description: 'Текст, компонента',
+            control: 'text',
+        },
+    },
+} satisfies Meta<typeof Divider>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Divider_horizontal: Story = {
+    render: (props) => (
+        <Flex direction="col">
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+        </Flex>
+    ),
+    args: {
+        orientation: 'horizontal',
+    },
+}
+
+export const Divider_vertical: Story = {
+    render: (props) => (
+        <Flex direction="row">
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+            <Divider {...props} />
+            <Avatar text="AD" />
+        </Flex>
+    ),
+    args: {
+        orientation: 'vertical',
+    },
+}

package/src/components/Divider/index.ts

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

package/src/components/Flex/Flex.scss

@@ -0,0 +1,94 @@
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/variables/index' as Variables;
+
+$block: '.#{MainStyles.$ns}flex';
+
+#{$block} {
+    @include Variables.variables-spacing;
+
+    display: flex;
+
+    //TODO: перенести в миксины???
+    &_gap {
+        &_xs {
+            gap: var(--FF-DS-spacing-xs);
+        }
+        &_xm {
+            gap: var(--FF-DS-spacing-xm);
+        }
+        &_s {
+            gap: var(--FF-DS-spacing-s);
+        }
+        &_m {
+            gap: var(--FF-DS-spacing-m);
+        }
+        &_l {
+            gap: var(--FF-DS-spacing-l);
+        }
+        &_xl {
+            gap: var(--FF-DS-spacing-xl);
+        }
+        &_2xl {
+            gap: var(--FF-DS-spacing-2xl);
+        }
+        &_3xl {
+            gap: var(--FF-DS-spacing-3xl);
+        }
+        &_4xl {
+            gap: var(--FF-DS-spacing-4xl);
+        }
+        &_5xl {
+            gap: var(--FF-DS-spacing-5xl);
+        }
+        &_6xl {
+            gap: var(--FF-DS-spacing-6xl);
+        }
+    }
+
+    &_direction {
+        &_row {
+            flex-direction: row;
+        }
+        &_col {
+            flex-direction: column;
+        }
+    }
+
+    &_wrap {
+        flex-wrap: wrap;
+    }
+
+    &_width {
+        &_auto {
+            max-width: 100%;
+        }
+
+        &_full {
+            width: 100%;
+        }
+    }
+
+    &_justifyContent {
+        &_start {
+            justify-content: start;
+        }
+        &_center {
+            justify-content: center;
+        }
+        &_end {
+            justify-content: end;
+        }
+    }
+
+    &_alignItems {
+        &_start {
+            align-items: start;
+        }
+        &_center {
+            align-items: center;
+        }
+        &_end {
+            align-items: end;
+        }
+    }
+}

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import './Flex.scss'
+import { bemBlock } from '@/utils'
+
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode
+    direction?: 'row' | 'col'
+    justifyContent?: 'start' | 'center' | 'end'
+    alignItems?: 'start' | 'center' | 'end'
+    //TODO: перенести в константы для всех файлов (SPACING)
+    gap?: 'xs' | 'xm' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
+    wrap?: boolean
+    width?: 'auto' | 'full'
+}
+
+export const Flex: React.FC<FlexProps> = ({
+    children,
+    justifyContent = 'start',
+    alignItems,
+    gap,
+    wrap,
+    direction = 'row',
+    width = 'auto',
+}) => {
+    const b = bemBlock('flex')
+
+    return (
+        <div
+            className={b({
+                justifyContent,
+                alignItems,
+                gap,
+                wrap,
+                direction,
+                width,
+            })}
+        >
+            {children}
+        </div>
+    )
+}

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Flex } from '../Flex'
+
+const meta = {
+    title: 'Components/Flex',
+    component: Flex,
+    render: (props) => {
+        return (
+            <Flex {...props}>
+                <div>1</div>
+                <div>2</div>
+            </Flex>
+        )
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Flex>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const FlexTest: Story = {
+    args: {
+        children: <div>1 elem</div>,
+        direction: 'row',
+    },
+}

package/src/components/Flex/index.ts

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

package/src/components/Label/Label.scss

@@ -0,0 +1,53 @@
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/variables' as Variables;
+
+$block: '.#{MainStyles.$ns}label';
+
+#{$block} {
+    @include Variables.variables-colors;
+    @include Variables.variables-padding;
+    @include Variables.variables-colors;
+
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+    box-sizing: border-box;
+    background: var(--FF-DS-color-secondary-base);
+    color: var(--FF-DS-color-secondary-text);
+    width: fit-content;
+
+    &_variant {
+        &_brand {
+            background: var(--FF-DS-color-brand-base);
+        }
+        &_primary {
+            background: var(--FF-DS-color-primary-base);
+        }
+        &_success {
+            background: var(--FF-DS-color-success-base);
+        }
+        &_warning {
+            background: var(--FF-DS-color-warning-base);
+        }
+        &_secondary {
+            background: var(--FF-DS-color-secondary-base);
+        }
+        &_error {
+            background: var(--FF-DS-color-error-base);
+        }
+    }
+
+    &_size {
+        &_s {
+            padding: calc(var(--FF-DS-padding-s) * 0.25) var(--FF-DS-padding-s);
+        }
+        &_m {
+            padding: calc(var(--FF-DS-padding-s) * 0.5) var(--FF-DS-padding-m);
+        }
+        &_l {
+            padding: calc(var(--FF-DS-padding-m) * 0.5) var(--FF-DS-padding-l);
+        }
+    }
+}

package/src/components/Label/Label.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import './Label.scss'
+import { bemBlock } from '@/utils'
+import { Text } from '../Text'
+import { Flex } from '../Flex'
+
+interface LabelProps {
+    size?: 's' | 'm' | 'l'
+    variant?: 'brand' | 'primary' | 'success' | 'warning' | 'secondary' | 'error'
+    title?: string
+    value?: string
+}
+
+export const Label: React.FC<LabelProps> = ({ size = 's', title, value, variant }) => {
+    const b = bemBlock('label')
+
+    if (!title) return null
+
+    return (
+        <div className={b({ size, variant })}>
+            <Flex direction="row" alignItems="center" justifyContent="center">
+                {title && <Text variant="caption2">{title}</Text>}
+                {title && value && <Text variant="caption2">: {value}</Text>}
+            </Flex>
+        </div>
+    )
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Label } from '../Label'
+
+const meta = {
+    title: 'Components/Label',
+    component: Label,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'radio',
+            options: ['brand', 'primary', 'success', 'warning', 'secondary', 'error'],
+        },
+    },
+} satisfies Meta<typeof Label>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Label_default: Story = {
+    args: {
+        size: 's',
+        title: 'keya',
+        value: 'value',
+    },
+}

package/src/components/Label/index.ts

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

package/src/components/Link/Link.scss

@@ -0,0 +1,13 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}link';
+
+#{$block} {
+    font-size: 14px;
+    text-decoration: none;
+    color: black;
+
+    &_underline {
+        text-decoration: underline;
+    }
+}

package/src/components/Link/Link.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import './Link.scss'
+import { bemBlock } from '@/utils'
+
+interface LinkProps {
+    underline?: boolean
+    href: string
+    title: string
+}
+
+export const Link: React.FC<LinkProps> = ({ href, underline, title }) => {
+    const b = bemBlock('link')
+    return (
+        <a className={b({ underline })} href={href}>
+            {title}
+        </a>
+    )
+}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Link } from '../Link'
+
+const meta = {
+    title: 'Components/Link',
+    component: Link,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Link>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Link_default: Story = {
+    args: {
+        href: '/',
+        title: 'url to any page',
+        underline: true,
+    },
+}

package/src/components/Link/index.ts

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

package/src/components/Loader/Loader.scss

@@ -0,0 +1,56 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}loader';
+$blockPath: '.#{MainStyles.$ns}path';
+
+$offset: 186;
+$duration: 2s;
+
+#{$block} {
+    animation: rotator $duration linear infinite;
+    -webkit-animation: rotator $duration linear infinite;
+}
+
+#{$blockPath} {
+    stroke: grey;
+    stroke-dasharray: $offset;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    animation: dash $duration ease infinite;
+}
+
+@keyframes rotator {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(270deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dashoffset: $offset;
+        transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+    }
+    50% {
+        stroke-dashoffset: $offset/2;
+        transform: rotate(135deg);
+        -webkit-transform: rotate(135deg);
+        -moz-transform: rotate(135deg);
+        -ms-transform: rotate(135deg);
+        -o-transform: rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: $offset;
+        transform: rotate(360deg);
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+    }
+}

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import './Loader.scss'
+import { bemBlock } from '@/utils'
+import { loaderSizes } from './const'
+
+interface LoaderProps {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl'
+}
+
+export const Loader: React.FC<LoaderProps> = ({ size }) => {
+    const bLoader = bemBlock('loader')
+    const bPath = bemBlock('path')
+
+    return (
+        <svg
+            className={bLoader()}
+            width={loaderSizes[size]}
+            height={loaderSizes[size]}
+            viewBox="0 0 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <circle
+                className={bPath()}
+                fill="none"
+                stroke-width="6"
+                stroke-linecap="round"
+                cx="33"
+                cy="33"
+                r="30"
+            />
+        </svg>
+    )
+}

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

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

package/src/components/Loader/const.ts

@@ -0,0 +1,7 @@
+export const loaderSizes = {
+    xs: 18,
+    s: 24,
+    m: 28,
+    l: 36,
+    xl: 44,
+}

package/src/components/Loader/index.ts

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

package/src/components/Radio/Radio.scss

@@ -0,0 +1,28 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}radio';
+
+#{$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/Radio/Radio.tsx

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

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

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

package/src/components/Radio/index.ts

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

package/src/components/Skeleton/Skeleton.scss

@@ -0,0 +1,73 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}skeleton';
+
+#{$block} {
+    width: 10px;
+    height: 10px;
+
+    padding: 0;
+    margin: 0;
+
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+
+    background: #f6f7f8;
+    background-image: -webkit-gradient(
+        linear,
+        left center,
+        right center,
+        from(#f6f7f8),
+        color-stop(0.2, #edeef1),
+        color-stop(0.4, #f6f7f8),
+        to(#f6f7f8)
+    );
+    background-image: -webkit-linear-gradient(
+        left,
+        #f6f7f8 0%,
+        #edeef1 20%,
+        #f6f7f8 40%,
+        #f6f7f8 100%
+    );
+    background-size: 980px;
+    position: relative;
+
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -ms-border-radius: 8px;
+    -o-border-radius: 8px;
+
+    &_fullWidth {
+        width: 100% !important;
+    }
+
+    &_view {
+        &_circle {
+            border-radius: 100%;
+            -webkit-border-radius: 100%;
+            -moz-border-radius: 100%;
+            -ms-border-radius: 100%;
+            -o-border-radius: 100%;
+        }
+        &_square {
+            border-radius: 4px;
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            -ms-border-radius: 4px;
+            -o-border-radius: 4px;
+        }
+    }
+}
+
+@keyframes placeHolderShimmer {
+    0% {
+        background-position: -490px 0;
+    }
+    100% {
+        background-position: 490px 0;
+    }
+}