Fe guidelines standarts constants utils

docs/Frontend_tutorials/standards/FE-Standards-constants.md

@@ -0,0 +1,44 @@
+# Frontend Constants Guidelines
+
+This section provides conventions and examples for defining and using constants in the frontend codebase. Constants improve readability, maintainability, and help eliminate magic numbers or strings scattered throughout the code.
+
+---
+
+## Example: Message Constants and UI Offsets
+
+```ts
+import { EasyAIMessage, MessageOriginType, StreamMessageType } from "../types/message";
+
+export const EMPTY_STREAM_AI_MESSAGE: Readonly<EasyAIMessage> = {
+  origin: MessageOriginType.Stream,
+  message: "",
+  type: StreamMessageType.Message,
+};
+
+export const ACTIVATOR_POSITION_OFFSET_TOP_PX = 25;
+export const ACTIVATOR_POSITION_OFFSET_LEFT_PX = 5;
+```
+
+---
+
+## Usage Example
+
+```ts
+import { EMPTY_STREAM_AI_MESSAGE } from "@/src/shared/constants/messages";
+
+function createInitialMessage() {
+  return { ...EMPTY_STREAM_AI_MESSAGE }; // Safe to copy, can't be mutated
+}
+```
+
+---
+
+## Best Practices
+
+- Group constants by purpose into logically named files (e.g., `constants/ui.ts`, `constants/messages.ts`).
+- Use explicit type annotations for structured or domain-specific constants.
+- Write descriptive names that clarify intent and usage.
+- Use `export const` to guarantee immutability.
+- Use `UPPER_SNAKE_CASE` for all constant names.
+- Include unit suffixes in names when applicable (e.g., `_PX`, `_MS`, `_CHARS`) to clarify what the value represents.
+- Use `Readonly<Type>` for object constants to prevent accidental mutation.

docs/Frontend_tutorials/standards/FE-Standards-graphql.md

@@ -142,8 +142,7 @@ export const collectionConfluenceDataSourcesQuery = gql`
 > Note: After each update of some graphql definition is needed to run generation of graphql types. [link](https://easysoftware.stoplight.io/docs/developer-portal-devs/a32e74fbf89d3-frontend-code-generator)
 
 <!-- theme: danger -->
-> Note: When defining GraphQL queries with the gql tag, use the tagged template literal syntax without enclosing it in parentheses <code>gql\`...\`;</code>
-. Do not write <code>gql(\`...\`);</code> instead, use it directly followed by a template literal as shown in the examples below. Using parentheses will cause a parsing error—such as Uncaught (in promise) GraphQLError: Syntax Error: Unexpected "["—because it interferes with the proper tag processing of the template literal. For further details on tagged template syntax, please see the MDN documentation on tagged templates.
+> Note: When defining GraphQL queries with the gql tag, use the tagged template literal syntax without enclosing it in parentheses <code>gql\`...\`;</code>. Do not write <code>gql(\`...\`);</code> instead, use it directly followed by a template literal as shown in the examples below. Using parentheses will cause a parsing error—such as Uncaught (in promise) GraphQLError: Syntax Error: Unexpected "["—because it interferes with the proper tag processing of the template literal. For further details on tagged template syntax, please see the MDN documentation on tagged templates.
 
 ### GraphQL Definitions with fields from plugins
 

docs/Frontend_tutorials/standards/FE-Standards-utils.md

@@ -0,0 +1,39 @@
+# Frontend Utils Guidelines
+
+This section outlines best practices for creating and maintaining helper functions within the `utils/` folder. These functions provide reusable logic that is not specific to Vue or reactive state—typically dealing with DOM interactions, string/array manipulations, layout adjustments, or other side-effect–free helpers.
+
+---
+
+## Example: Layout Scrollbar Visibility
+
+```ts
+import { NO_SCROLLBARS_CLASS } from "@/src/shared/constants/layout";
+
+export const setLayoutScrollbarsVisibility = (scrollbarsVisible: boolean): void => {
+  document.body.classList.toggle(NO_SCROLLBARS_CLASS, !scrollbarsVisible);
+};
+```
+
+---
+
+## Usage Example
+
+```ts
+import { setLayoutScrollbarsVisibility } from "@/src/shared/utils/layout";
+
+setLayoutScrollbarsVisibility(false);
+
+setLayoutScrollbarsVisibility(true);
+```
+
+---
+
+
+## Best Practices
+
+- Place generic, reusable, non-Vue logic in the `utils/` folder. (Vue-specific logic should be in `composables/`.)
+- Organize files by purpose (e.g., `utils/layout.ts`, `utils/string.ts`, `utils/dom.ts`).
+- Prefer named exports for each utility function.
+- Keep functions small, focused, and easy to test.
+- Use descriptive names that reflect the function’s purpose (e.g., `setLayoutScrollbarsVisibility` instead of `toggleScrollbars`).
+- Fully type all function parameters and return values.

toc.json

@@ -182,6 +182,11 @@
           "title": "Vue.js Components",
           "uri": "docs/Frontend_tutorials/standards/FE-Standards-components.md"
         },
+        {
+          "type": "item",
+          "title": "Frontend Constants Guidelines",
+          "uri": "docs/Frontend_tutorials/standards/FE-Standards-constants.md"
+        },
         {
           "type": "item",
           "title": "State management",
@@ -201,6 +206,11 @@
           "type": "item",
           "title": "Rest",
           "uri": "docs/Frontend_tutorials/standards/FE-Standards-rest.md"
+        },
+        {
+          "type": "item",
+          "title": "Frontend Utils Guidelines",
+          "uri": "docs/Frontend_tutorials/standards/FE-Standards-utils.md"
         }
       ]
     },