ff-ds-ui 0.0.2 → 0.0.4

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+npm test
+npm run lint

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "printWidth": 100
+}

package/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@chromatic-com/storybook',
+        '@storybook/addon-vitest',
+        '@storybook/addon-a11y',
+        '@storybook/addon-docs',
+        '@storybook/addon-onboarding',
+    ],
+    framework: '@storybook/react-vite',
+}
+export default config

package/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+
+        a11y: {
+            // 'todo' - show a11y violations in the test UI only
+            // 'error' - fail CI on a11y violations
+            // 'off' - skip a11y checks entirely
+            test: 'todo',
+        },
+    },
+}
+
+export default preview

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
+import { setProjectAnnotations } from '@storybook/react-vite'
+import * as projectAnnotations from './preview'
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations])

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 FF_Team
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 FF_Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,73 +1,13 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# FF-DS-UI lib
+
+## Publish to Npm
+
+### 1 - version up => package.json, json-lock versions
+
+### 2 - tag => git tag v.0.0.0
+
+### 3 - push tag => git push origin --tags
+
+### 4 - run build => npm run build
+
+### 5 - push packets => npm publish

package/eslint.config.js

@@ -1,23 +1,29 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook'
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+    globalIgnores(['dist']),
+    {
+        files: ['**/*.{ts,tsx}'],
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommended,
+            reactHooks.configs.flat.recommended,
+            reactRefresh.configs.vite,
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        rules: {
+            '@typescript-eslint/no-unused-vars': 'warn',
+        },
+    },
+])

package/package.json

@@ -1,36 +1,57 @@
-{
-  "name": "ff-ds-ui",
-  "private": false,
-  "version": "0.0.2",
-  "type": "module",
-  "main": "./dist/my-ui-lib.umd.js",
-  "module": "./dist/my-ui-lib.es.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4"
-  }
-}
+{
+    "name": "ff-ds-ui",
+    "private": false,
+    "version": "0.0.4",
+    "type": "module",
+    "main": "./dist/my-ui-lib.umd.js",
+    "module": "./dist/my-ui-lib.es.js",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "test": "vitest",
+        "lint": "eslint .",
+        "format": "npx prettier --write .",
+        "prepare": "husky"
+    },
+    "peerDependencies": {
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "^4.1.3",
+        "@eslint/js": "^9.39.1",
+        "@storybook/addon-a11y": "^10.1.8",
+        "@storybook/addon-docs": "^10.1.5",
+        "@storybook/addon-onboarding": "^10.1.8",
+        "@storybook/addon-vitest": "^10.1.8",
+        "@storybook/react-vite": "^10.1.5",
+        "@storybook/react": "^10.1.10",
+        "@types/node": "^24.10.1",
+        "@types/react": "^19.2.5",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.1",
+        "@vitest/browser-playwright": "^4.0.15",
+        "@vitest/coverage-v8": "^4.0.15",
+        "classnames": "^2.5.1",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "eslint-plugin-storybook": "^10.1.8",
+        "globals": "^16.5.0",
+        "husky": "^9.1.7",
+        "playwright": "^1.57.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "sass": "^1.96.0",
+        "storybook": "^10.1.8",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.4",
+        "vite": "^7.2.4",
+        "vite-plugin-dts": "^4.5.4",
+        "vitest": "^4.0.15"
+    }
+}

package/src/components/Avatar/Avatar.scss

@@ -0,0 +1,90 @@
+@use '../../styles/styles.scss' as MainStyles;
+@use '../../styles/variables/colors.scss' as Colors;
+
+$block: '.#{MainStyles.$ns}avatar';
+
+#{$block} {
+    @include Colors.variables;
+
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & > img {
+        width: inherit;
+        height: inherit;
+        border-radius: 100%;
+        -webkit-border-radius: 100%;
+        -moz-border-radius: 100%;
+        -ms-border-radius: 100%;
+        -o-border-radius: 100%;
+    }
+
+    &_size {
+        &_xs {
+            height: 20px;
+            width: 20px;
+            min-width: 20px;
+        }
+        &_s {
+            height: 24px;
+            width: 24px;
+            min-width: 24px;
+        }
+        &_m {
+            height: 28px;
+            width: 28px;
+            min-width: 28px;
+        }
+        &_l {
+            height: 36px;
+            width: 36px;
+            min-width: 36px;
+        }
+        &_xl {
+            height: 44px;
+            width: 44px;
+            min-width: 44px;
+        }
+    }
+
+    &_variant {
+        &_normal {
+            background: var(--FF-DS-color-secondary-base);
+            border: 1px solid var(--FF-DS-color-secondary-border);
+            & > span {
+                color: var(--FF-DS-color-secondary-text);
+            }
+        }
+
+        &_branded {
+            background: var(--FF-DS-color-brand-base);
+            border: 1px solid var(--FF-DS-color-brand-border);
+            & > span {
+                color: var(--FF-DS-color-brand-text);
+            }
+        }
+    }
+
+    &_outline {
+        background: transparent;
+    }
+
+    &_form {
+        &_circle {
+            border-radius: 100%;
+            -webkit-border-radius: 100%;
+            -moz-border-radius: 100%;
+            -ms-border-radius: 100%;
+            -o-border-radius: 100%;
+        }
+        &_square {
+            border-radius: 8px;
+            -webkit-border-radius: 8px;
+            -moz-border-radius: 8px;
+            -ms-border-radius: 8px;
+            -o-border-radius: 8px;
+        }
+    }
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import './Avatar.scss'
+import { bemBlock } from '../../utils'
+import { Text } from '../../components/Text'
+import { getAvatarCamelCaseText } from './utils'
+
+export interface AvatarProps {
+    size?: 's' | 'm' | 'l' | 'xl'
+    variant?: 'normal' | 'branded'
+    outline?: boolean
+    text?: string
+    alt?: string
+    imgUrl?: string
+    form?: 'circle' | 'square'
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+    variant = 'normal',
+    outline,
+    size = 'xl',
+    text,
+    alt,
+    imgUrl,
+    form = 'circle',
+}) => {
+    const [hasError, setHasError] = useState<boolean>(false)
+
+    const b = bemBlock('avatar')
+
+    return (
+        <div className={b({ form, variant, outline, size })}>
+            {((hasError === true && imgUrl) || !imgUrl) && text && (
+                <Text variant="caption2">{getAvatarCamelCaseText(text)}</Text>
+            )}
+            {imgUrl && !hasError && (
+                <img src={imgUrl} alt={alt} onError={() => setHasError(true)} />
+            )}
+        </div>
+    )
+}

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Avatar } from '../Avatar'
+
+const meta = {
+    title: 'Components/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Avatar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Avatar_default: Story = {
+    args: {
+        size: 's',
+        text: 'Author Comp',
+        alt: 'img desc',
+        imgUrl: 'https://inbusiness.kz/uploads/2025-8/o0INDAPX.jpg',
+    },
+}

package/src/components/Avatar/__test__/utils.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+import { getAvatarCamelCaseText } from '../utils'
+
+describe('src => comp => Avatar => utils.ts', () => {
+    it('test getAvatarCamelCaseText function = 1 word', () => {
+        const testString: string = 'TEXT'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('TE')
+    })
+
+    it('test getAvatarCamelCaseText function = 1 lowercase word', () => {
+        const testString: string = 'text'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('TE')
+    })
+
+    it('test getAvatarCamelCaseText function - 2 word', () => {
+        const testString: string = 'ANY TEXT'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AT')
+    })
+
+    it('test getAvatarCamelCaseText function = 2 lowercase word', () => {
+        const testString: string = 'any text'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AT')
+    })
+
+    it('test getAvatarCamelCaseText function = empty', () => {
+        const testString: string = '  '
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('')
+    })
+
+    it('test getAvatarCamelCaseText function = 1 word 1 char', () => {
+        const testString: string = 'a'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('A')
+    })
+
+    it('test getAvatarCamelCaseText function = 2 word 1 char', () => {
+        const testString: string = 'a a'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AA')
+    })
+
+    it('test getAvatarCamelCaseText function = 3 word', () => {
+        const testString: string = 'any text asd'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AT')
+    })
+
+    it('test getAvatarCamelCaseText function = 3 word 1 char', () => {
+        const testString: string = 'a f a'
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AF')
+    })
+
+    it('test getAvatarCamelCaseText function = 1 word space', () => {
+        const testString: string = 'any     '
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AN')
+    })
+
+    it('test getAvatarCamelCaseText function = 1 word space', () => {
+        const testString: string = '    any     '
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AN')
+    })
+
+    it('test getAvatarCamelCaseText function = 2 word space', () => {
+        const testString: string = '    aaaa     ffff '
+        const resString = getAvatarCamelCaseText(testString)
+        expect(resString).toBe('AF')
+    })
+})

package/src/components/Avatar/index.ts

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

package/src/components/Avatar/utils.tsx

@@ -0,0 +1,26 @@
+/**
+ * getAvatarCamelCaseText - transform string to first letter of words
+ * @param {string} str
+ * @returns {string | ''} string | ''
+ */
+export const getAvatarCamelCaseText = (str?: string): string => {
+    if (!str) return ''
+
+    const wordArr: string[] = str
+        .trim()
+        .split(' ')
+        .filter((el) => Boolean(el))
+
+    if (wordArr.length === 0) {
+        return ''
+    }
+
+    const wordArrLen: number = wordArr.length
+    const resStr = wordArr.join('')
+
+    if (wordArrLen > 1) {
+        return wordArr[0][0].toUpperCase() + wordArr[1][0].toUpperCase()
+    } else {
+        return `${resStr[0].toUpperCase()}${resStr[1]?.toUpperCase() || ''}`
+    }
+}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Flex } from '../Flex'
+import { Text } from '../Text'
+
+interface BreadcrumbsProps {
+    separator?: string
+    onItemClick?: (value: string) => void
+    items: string[]
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+    separator = '/',
+    items,
+    onItemClick,
+}) => {
+    //TODO: сделать cursor pointer если = clickable: Boolean(onItemClick)
+    return (
+        <Flex gap="s">
+            {items.map((item, i) => {
+                const isLastElement = items.length - 1 === i
+                return (
+                    <>
+                        <Text
+                            onClick={() => onItemClick && onItemClick(item)}
+                            color="secondary"
+                            variant="body1"
+                        >
+                            {item}
+                        </Text>
+                        {!isLastElement && (
+                            <Text variant="body1" color="secondary">
+                                {separator}
+                            </Text>
+                        )}
+                    </>
+                )
+            })}
+        </Flex>
+    )
+}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Breadcrumbs } from '../Breadcrumbs'
+
+const meta = {
+    title: 'Components/Breadcrumbs',
+    component: Breadcrumbs,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumbs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Breadcrumbs_default: Story = {
+    args: {
+        items: ['main page', 'projects', 'proj1'],
+        onItemClick: (value) => console.log(value),
+        separator: '/',
+    },
+}

package/src/components/Breadcrumbs/index.ts

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