ff-ds-ui 0.0.1 → 0.0.3

package/src/components/index.ts

@@ -1 +1,17 @@
-export * from './Button'
+export * from './Button'
+export * from './Text'
+export * from './Flex'
+export * from './TextInput'
+export * from './Avatar'
+export * from './User'
+export * from './Divider'
+export * from './Skeleton'
+export * from './Loader'
+export * from './Card'
+export * from './Label'
+export * from './Radio'
+export * from './Checkbox'
+export * from './Link'
+export * from './Breadcrumbs'
+export * from './TextArea'
+export * from './Tabs'

package/src/index.ts

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

package/src/stories/modules.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+import { TextInput, Text, Button, Flex } from '../components'
+
+<Meta title="Modules DS" />
+
+<Flex direction="col">
+    <Text>Module text input + button</Text>
+    <Flex direction="row" gap="xs">
+        <TextInput size="l"></TextInput>
+        <Button variant="primary" size="l">
+            Click me
+        </Button>
+    </Flex>
+</Flex>

package/src/styles/fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

package/src/styles/mixins/_index.scss

@@ -0,0 +1,18 @@
+@use './typography.scss';
+@use './button.scss';
+
+@mixin mixins-typography-variants {
+    @include typography.getTypographyVariants;
+}
+
+@mixin mixins-typography-colors {
+    @include typography.getTypographyColors;
+}
+
+@mixin button-reset-styles {
+    @include button.reset-button-styles;
+}
+
+@mixin outlined-hover($rgb, $hoverA, $activeA) {
+    @include button.outlined-hover($rgb, $hoverA, $activeA);
+}

package/src/styles/mixins/button.scss

@@ -0,0 +1,29 @@
+@use '../variables' as Variables;
+
+@mixin reset-button-styles {
+    @include Variables.variables-typography;
+
+    outline: none;
+    border: none;
+    padding: 0;
+
+    font-family: var(--FF-DS-font-family-sans);
+    font-size: 12px;
+    font-weight: var(--FF-DS-text-body-font-weigh);
+
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+@mixin outlined-hover($rgb, $hoverA: 0.2, $actriveA: 0.25) {
+    &:hover {
+        background-color: rgba(var(#{$rgb}), $hoverA);
+    }
+
+    &:active {
+        background-color: rgba(var(#{$rgb}), $actriveA);
+    }
+}

package/src/styles/mixins/typography.scss

@@ -0,0 +1,107 @@
+@mixin getTypographyVariants {
+    &_variant_body1 {
+        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);
+    }
+    &_variant_body2 {
+        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-2-font-size);
+        line-height: var(--FF-DS-text-body-2-line-height);
+    }
+    &_variant_body3 {
+        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-3-font-size);
+        line-height: var(--FF-DS-text-body-3-line-height);
+    }
+    &_variant_caption1 {
+        font-family: var(--FF-DS-text-caption-font-family);
+        font-weight: var(--FF-DS-text-caption-font-weight);
+        font-size: var(--FF-DS-text-caption-1-font-size);
+        line-height: var(--FF-DS-text-caption-1-line-height);
+    }
+    &_variant_caption2 {
+        font-family: var(--FF-DS-text-caption-font-family);
+        font-weight: var(--FF-DS-text-caption-font-weight);
+        font-size: var(--FF-DS-text-caption-2-font-size);
+        line-height: var(--FF-DS-text-caption-2-line-height);
+    }
+    &_variant_header1 {
+        font-family: var(--FF-DS-text-header-font-family);
+        font-weight: var(--FF-DS-text-header-font-weight);
+        font-size: var(--FF-DS-text-header-1-font-size);
+        line-height: var(--FF-DS-text-header-1-line-height);
+    }
+    &_variant_header2 {
+        font-family: var(--FF-DS-text-header-font-family);
+        font-weight: var(--FF-DS-text-header-font-weight);
+        font-size: var(--FF-DS-text-header-2-font-size);
+        line-height: var(--FF-DS-text-header-2-line-height);
+    }
+    &_variant_subheader1 {
+        font-family: var(--FF-DS-text-subheader-font-family);
+        font-weight: var(--FF-DS-text-subheader-font-weight);
+        font-size: var(--FF-DS-text-subheader-1-font-size);
+        line-height: var(--FF-DS-text-subheader-1-line-height);
+    }
+    &_variant_subheader2 {
+        font-family: var(--FF-DS-text-subheader-font-family);
+        font-weight: var(--FF-DS-text-subheader-font-weight);
+        font-size: var(--FF-DS-text-subheader-2-font-size);
+        line-height: var(--FF-DS-text-subheader-2-line-height);
+    }
+    &_variant_subheader3 {
+        font-family: var(--FF-DS-text-subheader-font-family);
+        font-weight: var(--FF-DS-text-subheader-font-weight);
+        font-size: var(--FF-DS-text-subheader-3-font-size);
+        line-height: var(--FF-DS-text-subheader-3-line-height);
+    }
+    &_variant_display1 {
+        font-family: var(--FF-DS-text-display-font-family);
+        font-weight: var(--FF-DS-text-display-font-weight);
+        font-size: var(--FF-DS-text-display-1-font-size);
+        line-height: var(--FF-DS-text-display-1-line-height);
+    }
+    &_variant_display2 {
+        font-family: var(--FF-DS-text-display-font-family);
+        font-weight: var(--FF-DS-text-display-font-weight);
+        font-size: var(--FF-DS-text-display-2-font-size);
+        line-height: var(--FF-DS-text-display-2-line-height);
+    }
+    &_variant_display3 {
+        font-family: var(--FF-DS-text-display-font-family);
+        font-weight: var(--FF-DS-text-display-font-weight);
+        font-size: var(--FF-DS-text-display-3-font-size);
+        line-height: var(--FF-DS-text-display-3-line-height);
+    }
+    &_variant_display4 {
+        font-family: var(--FF-DS-text-display-font-family);
+        font-weight: var(--FF-DS-text-display-font-weight);
+        font-size: var(--FF-DS-text-display-4-font-size);
+        line-height: var(--FF-DS-text-display-4-line-height);
+    }
+}
+
+@mixin getTypographyColors {
+    &_color_primary {
+        color: rgb(8, 87, 206);
+    }
+    &_color_warning {
+        color: rgb(148, 158, 5);
+    }
+    &_color_secondary {
+        color: rgb(94, 94, 94);
+    }
+    &_color_danger {
+        color: rgb(102, 16, 16);
+    }
+    &_color_default {
+        color: rgb(0, 0, 0);
+    }
+    &_color_success {
+        color: rgb(37, 141, 37);
+    }
+}

package/src/styles/styles.scss

@@ -0,0 +1,3 @@
+@use './variables';
+
+$ns: 'FF-DS-';

package/src/styles/variables/_index.scss

@@ -0,0 +1,25 @@
+@use './typography';
+@use './spacing.scss';
+@use './radius.scss';
+@use './padding.scss';
+@use './colors.scss';
+
+@mixin variables-colors {
+    @include colors.variables;
+}
+
+@mixin variables-padding {
+    @include padding.variables;
+}
+
+@mixin variables-radius {
+    @include radius.variables;
+}
+
+@mixin variables-spacing {
+    @include spacing.variables;
+}
+
+@mixin variables-typography {
+    @include typography.variables;
+}

package/src/styles/variables/colors.scss

@@ -0,0 +1,45 @@
+// Colors = 'brand' | 'primary' | 'success' | 'warning' | 'secondary' | 'error'
+
+@mixin variables {
+    // Brand
+    --FF-DS-color-brand-base: rgb(124, 58, 237);
+    --FF-DS-color-brand-base-rgb: 124, 58, 237;
+    --FF-DS-color-brand-hover: rgb(109, 40, 217);
+    --FF-DS-color-brand-border: rgb(124, 58, 237);
+    --FF-DS-color-brand-text: rgb(255, 255, 255);
+
+    // Primary
+    --FF-DS-color-primary-base: rgb(59, 130, 246);
+    --FF-DS-color-primary-base-rgb: 59, 130, 246;
+    --FF-DS-color-primary-hover: rgb(37, 99, 235);
+    --FF-DS-color-primary-border: rgb(59, 130, 246);
+    --FF-DS-color-primary-text: rgb(255, 255, 255);
+
+    // Success
+    --FF-DS-color-success-base: rgb(34, 197, 94);
+    --FF-DS-color-success-base-rgb: 34, 197, 94;
+    --FF-DS-color-success-hover: rgb(22, 163, 74);
+    --FF-DS-color-success-border: rgb(34, 197, 94);
+    --FF-DS-color-success-text: rgb(255, 255, 255);
+
+    // Warning
+    --FF-DS-color-warning-base: rgb(234, 179, 8);
+    --FF-DS-color-warning-base-rgb: 234, 179, 8;
+    --FF-DS-color-warning-hover: rgb(202, 138, 4);
+    --FF-DS-color-warning-border: rgb(234, 179, 8);
+    --FF-DS-color-warning-text: rgb(0, 0, 0);
+
+    // Secondary
+    --FF-DS-color-secondary-base: rgb(229, 231, 235);
+    --FF-DS-color-secondary-base-rgb: 229, 231, 235;
+    --FF-DS-color-secondary-hover: rgb(209, 213, 219);
+    --FF-DS-color-secondary-border: rgb(197, 197, 197);
+    --FF-DS-color-secondary-text: rgb(17, 24, 39);
+
+    // Error
+    --FF-DS-color-error-base: rgb(239, 68, 68);
+    --FF-DS-color-error-base-rgb: 239, 68, 68;
+    --FF-DS-color-error-hover: rgb(220, 38, 38);
+    --FF-DS-color-error-border: rgb(239, 68, 68);
+    --FF-DS-color-error-text: rgb(255, 255, 255);
+}

package/src/styles/variables/padding.scss

@@ -0,0 +1,7 @@
+@mixin variables {
+    --FF-DS-padding-xs: 6px;
+    --FF-DS-padding-s: 8px;
+    --FF-DS-padding-m: 12px;
+    --FF-DS-padding-l: 16px;
+    --FF-DS-padding-xl: 20px;
+}

package/src/styles/variables/radius.scss

@@ -0,0 +1,8 @@
+@mixin variables {
+    --FF-DS-border-radius-xs: 3px;
+    --FF-DS-border-radius-s: 5px;
+    --FF-DS-border-radius-m: 6px;
+    --FF-DS-border-radius-l: 8px;
+    --FF-DS-border-radius-xl: 10px;
+    --FF-DS-border-radius-2xl: 16px;
+}

package/src/styles/variables/spacing.scss

@@ -0,0 +1,15 @@
+@mixin variables {
+    --FF-DS-spacing-base: 4px;
+
+    --FF-DS-spacing-xs: calc(var(--FF-DS-spacing-base) * 0.5);
+    --FF-DS-spacing-xm: var(--FF-DS-spacing-base);
+    --FF-DS-spacing-s: calc(var(--FF-DS-spacing-base) * 2);
+    --FF-DS-spacing-m: calc(var(--FF-DS-spacing-base) * 3);
+    --FF-DS-spacing-l: calc(var(--FF-DS-spacing-base) * 4);
+    --FF-DS-spacing-xl: calc(var(--FF-DS-spacing-base) * 5);
+    --FF-DS-spacing-2xl: calc(var(--FF-DS-spacing-base) * 6);
+    --FF-DS-spacing-3xl: calc(var(--FF-DS-spacing-base) * 7);
+    --FF-DS-spacing-4xl: calc(var(--FF-DS-spacing-base) * 8);
+    --FF-DS-spacing-5xl: calc(var(--FF-DS-spacing-base) * 9);
+    --FF-DS-spacing-6xl: calc(var(--FF-DS-spacing-base) * 10);
+}

package/src/styles/variables/typography.scss

@@ -0,0 +1,66 @@
+@mixin variables {
+    // BASE FONT FAMILY
+    --FF-DS-font-family-sans: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+
+    // TYPOGRAPHY FONT FAMILY
+    --FF-DS-text-body-font-family: var(--FF-DS-font-family-sans);
+    --FF-DS-text-caption-font-family: var(--FF-DS-font-family-sans);
+    --FF-DS-text-header-font-family: var(--FF-DS-font-family-sans);
+    --FF-DS-text-subheader-font-family: var(--FF-DS-font-family-sans);
+    --FF-DS-text-display-font-family: var(--FF-DS-font-family-sans);
+
+    // TYPOGRAPHY WEIGHT
+    --FF-DS-text-body-font-weight: 400;
+    --FF-DS-text-caption-font-weight: 400;
+    --FF-DS-text-header-font-weight: 600;
+    --FF-DS-text-subheader-font-weight: 600;
+    --FF-DS-text-display-font-weight: 600;
+    --FF-DS-text-accent-font-weight: 600;
+
+    // BODY FONT SIZE/LINE_HEIGHT
+    --FF-DS-text-body-1-font-size: 13px;
+    --FF-DS-text-body-1-line-height: 18px;
+
+    --FF-DS-text-body-2-font-size: 15px;
+    --FF-DS-text-body-2-line-height: 20px;
+
+    --FF-DS-text-body-3-font-size: 17px;
+    --FF-DS-text-body-3-line-height: 24px;
+
+    // CAPTION FONT SIZE/LINE_HEIGHT
+    --FF-DS-text-caption-1-font-size: 9px;
+    --FF-DS-text-caption-1-line-height: 12px;
+
+    --FF-DS-text-caption-2-font-size: 11px;
+    --FF-DS-text-caption-2-line-height: 16px;
+
+    // HEADER FONT SIZE/LINE_HEIGHT
+    --FF-DS-text-header-1-font-size: 20px;
+    --FF-DS-text-header-1-line-height: 24px;
+
+    --FF-DS-text-header-2-font-size: 24px;
+    --FF-DS-text-header-2-line-height: 28px;
+
+    // SUBHEADER FONT SIZE/LINE_HEIGHT
+    --FF-DS-text-subheader-1-font-size: 13px;
+    --FF-DS-text-subheader-1-line-height: 18px;
+
+    --FF-DS-text-subheader-2-font-size: 15px;
+    --FF-DS-text-subheader-2-line-height: 20px;
+
+    --FF-DS-text-subheader-3-font-size: 17px;
+    --FF-DS-text-subheader-3-line-height: 24px;
+
+    // DISPLAY FONT SIZE/LINE_HEIGHT
+    --FF-DS-text-display-1-font-size: 28px;
+    --FF-DS-text-display-1-line-height: 36px;
+
+    --FF-DS-text-display-2-font-size: 32px;
+    --FF-DS-text-display-2-line-height: 40px;
+
+    --FF-DS-text-display-3-font-size: 40px;
+    --FF-DS-text-display-3-line-height: 48px;
+
+    --FF-DS-text-display-4-font-size: 48px;
+    --FF-DS-text-display-4-line-height: 52px;
+}

package/src/utils/bem/__tests__/bem.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { bemBlock } from '../bem'
+
+describe('src => comp => utils => bem.ts', () => {
+    it('bem block function test - button', () => {
+        const block = bemBlock('button')
+        const buttonClassName = block({ view: 'primary', disabled: true }, 'extraClass')
+        expect(buttonClassName).toBe(
+            'FF-DS-button FF-DS-button_view_primary FF-DS-button_disabled extraClass'
+        )
+    })
+
+    it('bem block function test - text', () => {
+        const block = bemBlock('text')
+        const textClassName = block({ size: '2xl', variant: 'caption' }, 'extraClass')
+        expect(textClassName).toBe(
+            'FF-DS-text FF-DS-text_size_2xl FF-DS-text_variant_caption extraClass'
+        )
+    })
+
+    it('bem block function test - empty block name', () => {
+        expect(() => bemBlock('')).toThrow('Empty block name')
+        expect(() => bemBlock('')({ as: '' })).toThrow('Empty block name')
+    })
+})

package/src/utils/bem/bem.ts

@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+
+type Mods = Record<string, string | boolean | undefined | null | number>
+
+const NS = 'FF-DS-'
+
+export const bemBlock = (bemBlockName: string) => {
+    if (!bemBlockName) throw new Error('Empty block name')
+
+    return (mods?: Mods, extra?: string | string[]) => {
+        const classNameMods = mods
+            ? Object.entries(mods)
+                  // Cортируем пустые значения
+                  .filter(([_, value]) => value !== false && value !== undefined && value !== null)
+                  // Убираем значения true - btn_disabled_true => btn_disabled
+                  .map(([bemModifier, bemModifierValue]) => {
+                      return bemModifierValue === true
+                          ? `${NS}${bemBlockName}_${bemModifier}`
+                          : `${NS}${bemBlockName}_${bemModifier}_${bemModifierValue}`
+                  })
+            : []
+        return classNames(`${NS}${bemBlockName}`, classNameMods, extra)
+    }
+}

package/src/utils/index.ts

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

package/tsconfig.app.json

@@ -1,28 +1,31 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "types": ["vite/client"],
+        "skipLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
 }

package/tsconfig.build.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "jsx": "react-jsx",
+        "declaration": true,
+        "declarationMap": true,
+        "emitDeclarationOnly": true,
+        "outDir": "dist",
+        "strict": true,
+        "moduleResolution": "Node",
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    },
+    "include": ["src"]
+}

package/tsconfig.json

@@ -1,7 +1,4 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+    "files": [],
+    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

package/tsconfig.node.json

@@ -1,26 +1,26 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2023",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "types": ["node"],
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["vite.config.ts"]
 }