ff-ds-ui 0.0.3 → 0.0.5

package/README.deploy.md

@@ -0,0 +1,9 @@
+# Публикация либы в NPM
+
+1. Собрать сборку без ошибок => npm run build
+2. Поднять версию: package.json, json-lock
+3. Сделать тег: git tag v0.0.0
+4. Запушить тег: git push origin --tags
+4. Запушить пакеты: npm publish
+
+Если ошибка то: npm login

package/README.md

@@ -1 +1,5 @@
-# FF-DS-UI lib
+# FF-DS-UI
+
+## Дизайн система FEBFES-TM
+
+## Npm: https://www.npmjs.com/package/ff-ds-ui

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "ff-ds-ui",
     "private": false,
-    "version": "0.0.3",
+    "version": "0.0.5",
     "type": "module",
     "main": "./dist/my-ui-lib.umd.js",
     "module": "./dist/my-ui-lib.es.js",
@@ -28,15 +28,14 @@
         "@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",
+        "@storybook/react-vite": "^10.1.5",
         "@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",
@@ -53,5 +52,8 @@
         "vite": "^7.2.4",
         "vite-plugin-dts": "^4.5.4",
         "vitest": "^4.0.15"
+    },
+    "dependencies": {
+        "classnames": "^2.5.1"
     }
 }

package/src/components/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import './Avatar.scss'
-import { bemBlock } from '@/utils'
-import { Text } from '@/components/Text'
+import { bemBlock } from '../../utils'
+import { Text } from '../../components/Text'
 import { getAvatarCamelCaseText } from './utils'
 
 export interface AvatarProps {

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Button.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 import type { BUTTON_BORDER, BUTTON_SIZES, BUTTON_VARIANTS, BUTTON_WIDTH } from './const'
 
 export type ButtonBorder = (typeof BUTTON_BORDER)[number]

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

@@ -1,4 +1,4 @@
-import { Flex } from '@/components'
+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'

package/src/components/Card/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Card.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode

package/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import './Checkbox.scss'
 import { Text } from '../Text'
 import { Flex } from '../Flex'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 
 interface CheckboxProps {
     size?: 's' | 'm' | 'l'

package/src/components/Divider/Divider.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Divider.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 import { Text } from '../Text'
 
 interface DividerProps {

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Divider } from '../Divider'
-import { Flex } from '@/components/Flex'
-import { Avatar } from '@/components/Avatar'
+import { Flex } from '../../'
+import { Avatar } from '../../Avatar'
 
 const meta = {
     title: 'Components/Divider',

package/src/components/Flex/Flex.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Flex.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 
 interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode

package/src/components/Label/Label.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Label.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 import { Text } from '../Text'
 import { Flex } from '../Flex'
 

package/src/components/Link/Link.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Link.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 
 interface LinkProps {
     underline?: boolean

package/src/components/Loader/Loader.scss

@@ -38,7 +38,7 @@ $duration: 2s;
         -o-transform: rotate(0deg);
     }
     50% {
-        stroke-dashoffset: $offset/2;
+        stroke-dashoffset: calc($offset / 2);
         transform: rotate(135deg);
         -webkit-transform: rotate(135deg);
         -moz-transform: rotate(135deg);

package/src/components/Loader/Loader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Loader.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 import { loaderSizes } from './const'
 
 interface LoaderProps {

package/src/components/Radio/Radio.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Radio.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 import { Text } from '../Text'
 import { Flex } from '../Flex'
 

package/src/components/Skeleton/Skeleton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Skeleton.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 
 interface SkeletonProps {
     view?: 'circle' | 'square'

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import './Tabs.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 import { Text } from '../Text'
 
 interface TabsProps {

package/src/components/Text/Text.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './Text.scss'
-import { bemBlock } from '@/utils'
+import { bemBlock } from '../../utils'
 
 export type TextVariantType =
     | 'body1'

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

@@ -1,4 +1,4 @@
-import { Flex } from '@/components/Flex'
+import { Flex } from '../../'
 import { Text } from '../Text'
 import type { Meta, StoryObj } from '@storybook/react'
 

package/src/components/TextArea/TextArea.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import './TextArea.scss'
-import { bemBlock } from '@/utils'
-import { Text } from '../Text/Text'
-import { Flex } from '../Flex'
+import { bemBlock } from '../../utils'
+import { Text, Flex } from '../'
 
 interface TextAreaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
     placeholder?: string

package/src/components/TextInput/TextInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import './TextInput.scss'
-import { bemBlock } from '@/utils'
-import { Flex } from '@/components/Flex'
+import { bemBlock } from '../../utils'
+import { Flex } from '../'
 import { Text } from '../Text/Text'
 
 interface TextInputProps extends React.HTMLAttributes<HTMLInputElement> {

package/src/components/User/User.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import './User.scss'
 import { Avatar, type AvatarProps } from '../Avatar'
-import { Flex, Text } from '@/components'
+import { Flex, Text } from '../'
 
 interface UserProps {
     avatar?: AvatarProps

package/src/index.ts

@@ -1 +1 @@
-export * from './components'
+export * from './components'

package/src/utils/bem/bem.ts

@@ -11,6 +11,7 @@ export const bemBlock = (bemBlockName: string) => {
         const classNameMods = mods
             ? Object.entries(mods)
                   // Cортируем пустые значения
+                  // eslint-disable-next-line @typescript-eslint/no-unused-vars
                   .filter(([_, value]) => value !== false && value !== undefined && value !== null)
                   // Убираем значения true - btn_disabled_true => btn_disabled
                   .map(([bemModifier, bemModifierValue]) => {

package/tsconfig.app.json

@@ -7,10 +7,7 @@
         "module": "ESNext",
         "types": ["vite/client"],
         "skipLibCheck": true,
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["src/*"]
-        },
+
         /* Bundler mode */
         "moduleResolution": "bundler",
         "allowImportingTsExtensions": true,

package/tsconfig.build.json

@@ -10,11 +10,8 @@
         "strict": true,
         "moduleResolution": "Node",
         "skipLibCheck": true,
-        "esModuleInterop": true,
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["src/*"]
-        }
+        "esModuleInterop": true
     },
-    "include": ["src"]
+    "include": ["src"],
+    "exclude": ["**/*.stories.*"]
 }

package/vite.config.ts

@@ -23,34 +23,26 @@ export default defineConfig({
             entry: 'src/index.ts',
             name: 'MyUILib',
             fileName: (format) => `my-ui-lib.${format}.js`,
+            formats: ['es', 'cjs'],
         },
         outDir: 'dist',
-        // папка сборки
         emptyOutDir: true,
-        // очищает dist перед сборкой
         rollupOptions: {
-            external: ['react', 'react-dom'],
+            external: ['react', 'react-dom', 'classnames'],
             output: {
                 globals: {
                     react: 'React',
                     'react-dom': 'ReactDOM',
                 },
-                preserveModules: false, // отключаем копирование структуры src
+                preserveModules: false,
             },
         },
     },
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, 'src'),
-        },
-    },
     test: {
         projects: [
             {
                 extends: true,
                 plugins: [
-                    // The plugin will run tests for the stories defined in your Storybook config
-                    // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
                     storybookTest({
                         configDir: path.join(dirname, '.storybook'),
                     }),
@@ -75,7 +67,7 @@ export default defineConfig({
                 test: {
                     name: 'unit',
                     include: ['src/**/*.test.{ts,tsx}'],
-                    environment: 'node', // или 'node', если это не React
+                    environment: 'node',
                 },
             },
         ],