ff-ds-ui 0.0.2 → 0.0.4

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import './Skeleton.scss'
+import { bemBlock } from '../../utils'
+
+interface SkeletonProps {
+    view?: 'circle' | 'square'
+    fullWidth?: boolean
+    width?: number
+    height?: number
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({ width, view, height, fullWidth }) => {
+    const b = bemBlock('skeleton')
+
+    return <div style={{ height, width }} className={b({ fullWidth, view })} />
+}

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

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

package/src/components/Skeleton/index.ts

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

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,25 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$tabBlock: '.#{MainStyles.$ns}tabs';
+$tabElemBlock: '.#{MainStyles.$ns}tabsElem';
+
+#{$tabBlock} {
+    display: flex;
+    gap: 20px;
+    border-bottom: 2px solid lightgrey;
+    padding-bottom: 8px;
+}
+
+#{$tabElemBlock} {
+    position: relative;
+    cursor: pointer;
+    &_isActive::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -10px;
+        height: 2px;
+        background-color: rgb(45, 45, 227);
+    }
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import './Tabs.scss'
+import { bemBlock } from '../../utils'
+import { Text } from '../Text'
+
+interface TabsProps {
+    tabs: string[]
+    initialActiveTab?: number
+    onTabClick?: (value: string) => void
+}
+
+export const Tabs: React.FC<TabsProps> = ({ tabs, onTabClick, initialActiveTab }) => {
+    const [activeTab, setActiveTab] = useState(initialActiveTab ? tabs[initialActiveTab] : tabs[0])
+
+    const tabsB = bemBlock('tabs')
+    const tabElemB = bemBlock('tabsElem')
+
+    const tabClickHandler = (el: string) => {
+        if (onTabClick) onTabClick(el)
+        setActiveTab(el)
+    }
+
+    return (
+        <div className={tabsB()}>
+            {tabs.map((el) => {
+                return (
+                    <Text
+                        variant="caption2"
+                        color="secondary"
+                        className={tabElemB({ isActive: el === activeTab })}
+                        onClick={() => tabClickHandler(el)}
+                    >
+                        {el}
+                    </Text>
+                )
+            })}
+        </div>
+    )
+}

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs } from '../Tabs'
+
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Tabs_default: Story = {
+    args: {
+        tabs: ['left', 'center', 'right'],
+        onTabClick: (tabEl: string) => console.log(tabEl),
+    },
+}

package/src/components/Tabs/index.ts

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

package/src/components/Text/Text.scss

@@ -0,0 +1,30 @@
+@use '../../styles/variables/index' as Variables;
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/mixins/index' as Mixins;
+
+$block: '.#{MainStyles.$ns}text';
+
+#{$block} {
+    @include Variables.variables-typography;
+
+    display: block;
+    color: black;
+    font-family: var(--FF-DS-font-family-sans);
+
+    &_ellipsis {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+    }
+
+    /*
+        VARIANTS
+    */
+    @include Mixins.mixins-typography-variants;
+
+    /*
+        ColorS
+    */
+    @include Mixins.mixins-typography-colors;
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import './Text.scss'
+import { bemBlock } from '../../utils'
+
+export type TextVariantType =
+    | 'body1'
+    | 'body2'
+    | 'body3'
+    | 'caption1'
+    | 'caption2'
+    | 'header1'
+    | 'header2'
+    | 'subheader1'
+    | 'subheader2'
+    | 'subheader3'
+    | 'display1'
+    | 'display2'
+    | 'display3'
+    | 'display4'
+
+export type TextColorType = 'primary' | 'warning' | 'secondary' | 'danger' | 'default' | 'success'
+
+export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: TextVariantType
+    color?: TextColorType
+    ellipsis?: boolean
+    ellipsisLines?: number
+    className?: string
+}
+
+export const Text = React.forwardRef<HTMLSpanElement, TextProps>(
+    (
+        {
+            children,
+            variant = 'body3',
+            color,
+            ellipsis,
+            ellipsisLines,
+            className,
+            style: commonStyle,
+            ...props
+        },
+        ref
+    ) => {
+        const b = bemBlock('text')
+
+        const style = {
+            ...commonStyle,
+        }
+
+        if (typeof ellipsisLines === 'number') {
+            style.WebkitLineClamp = ellipsisLines
+            style.whiteSpace = 'normal'
+            style.display = '-webkit-box'
+        }
+
+        return (
+            <span
+                style={style}
+                className={b({ variant, color, ellipsis, ellipsisLines }, className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </span>
+        )
+    }
+)

package/src/components/Text/_stories_/Text.stories.tsx

@@ -0,0 +1,95 @@
+import { Flex } from '../../'
+import { Text } from '../Text'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+    title: 'Components/Text',
+    component: Text,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Text>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const BodySection: Story = {
+    args: {},
+    render: (props) => (
+        <Flex gap="m">
+            <Text variant="body1" {...props}>
+                body1
+            </Text>
+            <Text variant="body2" {...props}>
+                body2
+            </Text>
+            <Text variant="body3" {...props}>
+                body3
+            </Text>
+        </Flex>
+    ),
+}
+
+export const CaptionSection: Story = {
+    args: {},
+    render: (props) => (
+        <Flex gap="m">
+            <Text variant="caption1" {...props}>
+                Caption1
+            </Text>
+            <Text variant="caption2" {...props}>
+                Caption2
+            </Text>
+        </Flex>
+    ),
+}
+
+export const HeaderSection: Story = {
+    args: {},
+    render: (props) => (
+        <Flex gap="m">
+            <Text variant="header1" {...props}>
+                header1
+            </Text>
+            <Text variant="header2" {...props}>
+                header2
+            </Text>
+        </Flex>
+    ),
+}
+
+export const SubHeaderSection: Story = {
+    args: {},
+    render: (props) => (
+        <Flex gap="m">
+            <Text variant="subheader1" {...props}>
+                subheader1
+            </Text>
+            <Text variant="subheader2" {...props}>
+                subheader2
+            </Text>
+            <Text variant="subheader3" {...props}>
+                subheader3
+            </Text>
+        </Flex>
+    ),
+}
+
+export const DisplaySection: Story = {
+    args: {},
+    render: (props) => (
+        <Flex gap="m">
+            <Text variant="display1" {...props}>
+                display1
+            </Text>
+            <Text variant="display2" {...props}>
+                display2
+            </Text>
+            <Text variant="display3" {...props}>
+                display3
+            </Text>
+            <Text variant="display4" {...props}>
+                display4
+            </Text>
+        </Flex>
+    ),
+}

package/src/components/Text/index.ts

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

package/src/components/TextArea/TextArea.scss

@@ -0,0 +1,45 @@
+@use '../../styles/variables/index' as Variables;
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/mixins/index' as Mixins;
+
+$block: '.#{MainStyles.$ns}textarea';
+
+#{$block} {
+    @include Variables.variables-padding;
+    @include Variables.variables-radius;
+    @include Variables.variables-typography;
+    @include Variables.variables-colors;
+
+    font-family: var(--FF-DS-text-body-font-family);
+    font-weight: var(--FF-DS-text-body-font-weight);
+    font-size: var(--FF-DS-text-body-1-font-size);
+    line-height: var(--FF-DS-text-body-1-line-height);
+    border: 2px solid var(--FF-DS-color-secondary-border);
+    box-sizing: border-box;
+    padding: 10px;
+    background: transparent;
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -ms-border-radius: 8px;
+    -o-border-radius: 8px;
+    outline: none;
+
+    &:disabled {
+        opacity: background 0.5;
+    }
+
+    &_hasError {
+        border: 2px solid var(--FF-DS-color-error-border);
+
+        &:hover {
+            border: 2px solid var(--FF-DS-color-error-hover);
+        }
+        &:focus {
+            border: 2px solid var(--FF-DS-color-error-base);
+        }
+        &::placeholder {
+            color: var(--FF-DS-color-error-base);
+        }
+    }
+}

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import './TextArea.scss'
+import { bemBlock } from '../../utils'
+import { Text, Flex } from '../'
+
+interface TextAreaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+    placeholder?: string
+    label?: string
+    disabled?: boolean
+    hasError?: boolean
+    errorMessage?: string
+}
+
+export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+    ({ placeholder, label, disabled, hasError, errorMessage, ...props }, ref) => {
+        const b = bemBlock('textarea')
+
+        return (
+            <Flex direction="col">
+                {/* //TODO: change to htmlFor="textarea" */}
+                <Text variant="caption2">{label}</Text>
+                <textarea
+                    id={'textarea'}
+                    className={b({ hasError })}
+                    disabled={disabled}
+                    placeholder={placeholder}
+                    ref={ref}
+                    {...props}
+                />
+                {hasError && (
+                    <Text variant="body1" color="danger">
+                        {errorMessage}
+                    </Text>
+                )}
+            </Flex>
+        )
+    }
+)

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextArea } from '../TextArea'
+
+const meta = {
+    title: 'Components/TextArea',
+    component: TextArea,
+    tags: ['autodocs'],
+} satisfies Meta<typeof TextArea>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const TextArea_default: Story = {
+    args: {
+        label: 'label',
+        hasError: true,
+        errorMessage: 'error msg',
+    },
+}

package/src/components/TextArea/index.ts

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

package/src/components/TextInput/TextInput.scss

@@ -0,0 +1,92 @@
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/variables' as Variables;
+@use '../../styles/mixins' as Mixins;
+
+$inputBlock: '.#{MainStyles.$ns}textInput';
+$labelBlock: '.#{MainStyles.$ns}label';
+$labelErrorBlock: '.#{MainStyles.$ns}errorLabel';
+
+#{$inputBlock} {
+    @include Variables.variables-padding;
+    @include Variables.variables-radius;
+    @include Variables.variables-typography;
+    @include Variables.variables-colors;
+
+    font-family: var(--FF-DS-text-body-font-family);
+    font-weight: var(--FF-DS-text-body-font-weight);
+    font-size: var(--FF-DS-text-body-1-font-size);
+    line-height: var(--FF-DS-text-body-1-line-height);
+    border: 2px solid var(--FF-DS-color-secondary-border);
+    box-sizing: border-box;
+    background: transparent;
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -ms-border-radius: 8px;
+    -o-border-radius: 8px;
+    outline: none;
+
+    &:disabled {
+        opacity: background 0.5;
+    }
+
+    &_hasError {
+        border: 2px solid var(--FF-DS-color-error-border);
+        color: var(--FF-DS-color-error-base);
+
+        &:hover {
+            border: 2px solid var(--FF-DS-color-error-hover);
+        }
+        &:focus {
+            border: 2px solid var(--FF-DS-color-error-base);
+        }
+        &::placeholder {
+            color: var(--FF-DS-color-error-base);
+        }
+    }
+
+    &_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 {
+            height: 44px;
+            border-radius: var(--FF-DS-border-radius-xl);
+            padding: var(--FF-DS-padding-xl);
+        }
+    }
+}
+
+#{$labelBlock} {
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font-family: var(--FF-DS-font-family-sans);
+    font-size: var(--FF-DS-text-caption-2-font-size);
+    font-weight: var(--FF-DS-text-caption-2-line-height);
+}
+
+#{$labelErrorBlock} {
+    @include Variables.variables-colors;
+
+    &_hasError {
+        color: var(--FF-DS-color-error-base);
+    }
+}

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import './TextInput.scss'
+import { bemBlock } from '../../utils'
+import { Flex } from '../'
+import { Text } from '../Text/Text'
+
+interface TextInputProps extends React.HTMLAttributes<HTMLInputElement> {
+    size?: 's' | 'm' | 'l' | 'xl'
+    label?: string
+    placeholder?: string
+    disabled?: boolean
+    hasClearBtn?: boolean
+    // Error state
+    hasError?: boolean
+    errorMessage?: string
+}
+
+export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+    ({ size, label, placeholder, errorMessage, hasError, hasClearBtn, ...props }, ref) => {
+        const inputBlock = bemBlock('textInput')
+
+        return (
+            <Flex direction="col" alignItems="start">
+                {/* TODO: add htmlFor="input" as="label" */}
+                <Text variant="body1">{label}</Text>
+                <input
+                    id="input"
+                    className={inputBlock({ size, hasError })}
+                    ref={ref}
+                    placeholder={placeholder}
+                    {...props}
+                />
+                {/* TODO: add Button icon, add clear functionality */}
+                {hasClearBtn && <></>}
+                {hasError && (
+                    <Text variant="body1" color="danger">
+                        {errorMessage}
+                    </Text>
+                )}
+            </Flex>
+        )
+    }
+)

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextInput } from '../TextInput'
+
+const meta = {
+    title: 'Components/TextInput',
+    component: TextInput,
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof TextInput>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const BaseInput: Story = {
+    args: {
+        label: 'Input label',
+        size: 'xl',
+        placeholder: 'Placeholder...',
+    },
+}
+
+export const Error: Story = {
+    args: {
+        label: 'Input with error',
+        size: 'xl',
+        placeholder: 'Placeholder...',
+        hasError: true,
+        errorMessage: 'Invalid data',
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        label: 'Disabled input',
+        placeholder: 'Type here...',
+        size: 'xl',
+        disabled: true,
+    },
+}

package/src/components/TextInput/index.ts

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

package/src/components/User/User.scss

@@ -0,0 +1,7 @@
+@use '../../styles/styles.scss' as MainStyles;
+
+$block: '.#{MainStyles.$ns}user';
+
+#{$block} {
+    display: flex;
+}

package/src/components/User/User.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import './User.scss'
+import { Avatar, type AvatarProps } from '../Avatar'
+import { Flex, Text } from '../'
+
+interface UserProps {
+    avatar?: AvatarProps
+    size?: 's' | 'm' | 'l' | 'xl'
+    name?: string
+    description?: string
+}
+
+export const User: React.FC<UserProps> = ({ avatar, size, name, description }) => {
+    return (
+        <Flex direction="row" gap={'s'}>
+            <Avatar text={name} size={size} {...avatar} />
+            <Flex direction="col" justifyContent="center">
+                <Text variant="body1">{name}</Text>
+                {size !== 's' && size !== 'm' && <Text variant="caption1">{description}</Text>}
+            </Flex>
+        </Flex>
+    )
+}

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { User } from '../User'
+
+const meta = {
+    title: 'Components/User',
+    component: User,
+    tags: ['autodocs'],
+} satisfies Meta<typeof User>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const User_default: Story = {
+    args: {
+        avatar: {
+            text: 'Author Comp',
+        },
+        name: 'David Jonson',
+        description: 'Project manager',
+        size: 'xl',
+    },
+}

package/src/components/User/index.ts

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