@dxtmisha/wiki 0.25.1 → 0.39.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.25.1",
+  "version": "0.39.2",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [
@@ -25,6 +25,9 @@
   "bugs": {
     "url": "https://github.com/dxtmisha/dxt-ui/issues"
   },
+  "scripts": {
+    "publish": "npm publish --access public"
+  },
   "files": [
     "src",
     "README.md",
@@ -43,7 +46,7 @@
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "peerDependencies": {
     "@dxtmisha/functional": "*",

package/src/classes/WikiStorybook.ts

@@ -1,12 +1,14 @@
-import { Geo, isObjectNotArray, toCamelCase } from '@dxtmisha/functional'
+import { forEach, Geo, isObjectNotArray, toCamelCase } from '@dxtmisha/functional'
 
 import { WikiStorybookItem } from './WikiStorybookItem'
+import { WikiStorybookProp } from './WikiStorybookProp'
 
 import {
   type StorybookArgs,
   type StorybookArgsToDescription,
   type StorybookArgsToItem,
   type StorybookArgsToList,
+  type StorybookArgsToPossibilities,
   type StorybookComponentsDescription,
   type StorybookComponentsDescriptionItem,
   type StorybookComponentsDescriptionStory,
@@ -63,6 +65,23 @@ export class WikiStorybook {
     return this.initPropsWiki()
   }
 
+  /**
+   * Returns the wiki object for the component
+   *
+   * Возвращает объект wiki для компонента
+   * @return The wiki object for the component/ объект wiki для компонента
+   */
+  getWikiObject(): WikiStorybookProp[] {
+    return forEach(
+      this.getWiki(),
+      (item, name) => {
+        if (item) {
+          return new WikiStorybookProp(name, item)
+        }
+      }
+    ) as WikiStorybookProp[]
+  }
+
   /**
    * Returns the description of the component from the wiki
    *
@@ -73,6 +92,16 @@ export class WikiStorybook {
     return this.toDescriptionText(this.getDescriptionItem()?.description)
   }
 
+  /**
+   * Returns the possibilities of the component from the wiki
+   *
+   * Возвращает возможности компонента из wiki
+   * @return A list of possibilities for the component/ список возможностей для компонента
+   */
+  getPossibilities(): string[] {
+    return this.toPossibilitiesText(this.getDescriptionItem()?.possibilities)
+  }
+
   /**
    * Returns the values of the wiki items
    *
@@ -89,6 +118,28 @@ export class WikiStorybook {
     return values
   }
 
+  /**
+   * Returns the filtered values of the wiki items
+   *
+   * Возвращает отфильтрованные значения элементов wiki
+   * @return A list of objects containing the filtered values of the wiki items/
+   * список объектов, содержащих отфильтрованные значения элементов wiki
+   */
+  getFilteredValues(): Record<string, any> {
+    const values: Record<string, any> = {}
+
+    forEach(
+      this.getValues(),
+      (value, key) => {
+        if (value !== undefined) {
+          values[key] = value
+        }
+      }
+    )
+
+    return values
+  }
+
   /**
    * Returns a Storybook item by its ID
    *
@@ -120,6 +171,33 @@ export class WikiStorybook {
     )
   }
 
+  /**
+   * Returns the AI render of the component
+   *
+   * Возвращает AI рендер компонента
+   */
+  getAiRender(): string | undefined {
+    return this.getDescriptionItem()?.ai?.render
+  }
+
+  /**
+   * Returns the AI description of the component
+   *
+   * Возвращает AI описание компонента
+   */
+  getAiDescription(): string | undefined {
+    return this.getDescriptionItem()?.ai?.description
+  }
+
+  /**
+   * Returns the AI hide of the component
+   *
+   * Возвращает AI скрыть компонента
+   */
+  getAiHide(): boolean {
+    return this.getDescriptionItem()?.ai?.hide ?? false
+  }
+
   /**
    * Returns a wiki item by its name
    *
@@ -196,6 +274,28 @@ export class WikiStorybook {
     return ''
   }
 
+  /**
+   * Converts the possibilities to text format
+   *
+   * Преобразует возможности в текстовый формат
+   * @param possibilities - The possibilities to convert/ возможности для преобразования
+   */
+  private toPossibilitiesText(possibilities?: StorybookArgsToPossibilities): string[] {
+    if (possibilities) {
+      const language = Geo.getLanguage()
+
+      if (isObjectNotArray(possibilities)) {
+        return possibilities?.[language]
+          ?? Object.values(possibilities)?.[0]
+          ?? []
+      }
+
+      return possibilities
+    }
+
+    return []
+  }
+
   /**
    * Initializes the list of wiki items for the component
    *

package/src/classes/WikiStorybookItem.ts

@@ -26,6 +26,24 @@ export class WikiStorybookItem {
   ) {
   }
 
+  /**
+   * Checks if the item is hidden.
+   *
+   * Проверяет, скрыт ли элемент.
+   */
+  isHide(): boolean {
+    return this.item.hide === true
+  }
+
+  /**
+   * Checks if the item is a demo item.
+   *
+   * Проверяет, является ли элемент демонстрационным.
+   */
+  isDemo(): boolean {
+    return this.item.isDemo === true
+  }
+
   /**
    * Returns the name of the item in the wiki
    *
@@ -86,6 +104,8 @@ export class WikiStorybookItem {
         return 9000
       case StorybookCategory.option:
         return 9100
+      case StorybookCategory.attributes:
+        return 9700
       case StorybookCategory.text:
         return 9800
       case StorybookCategory.aria:
@@ -117,6 +137,48 @@ export class WikiStorybookItem {
     }
   }
 
+  /**
+   * Returns the demo property if the item is a demo item.
+   *
+   * Возвращает свойство demo, если элемент является демонстрационным.
+   */
+  private getDemo(): {
+    isDemo?: boolean
+    demo?: any
+    demoOptions?: Record<string, any>
+    hide?: boolean
+  } {
+    if (this.isDemo()) {
+      return {
+        isDemo: true,
+        demo: this.getDemoValue(),
+        demoOptions: this.item.demoOptions,
+        hide: this.item.hide
+      }
+    }
+
+    return {
+      hide: this.item.hide
+    }
+  }
+
+  /**
+   * Returns the demo value.
+   *
+   * Возвращает демонстрационное значение.
+   */
+  private getDemoValue(): any {
+    if (this.item.demo) {
+      return this.item.demo
+    }
+
+    if (this.item.type === StorybookControl.boolean) {
+      return true
+    }
+
+    return undefined
+  }
+
   /**
    * Returns the category type of a property
    *
@@ -247,7 +309,8 @@ export class WikiStorybookItem {
         ...this.getDefaultValue(),
         ...this.getType()
       },
-      ...this.getDescription()
+      ...this.getDescription(),
+      ...this.getDemo()
     }
   }
 
@@ -276,7 +339,8 @@ export class WikiStorybookItem {
     return {
       control,
       table,
-      ...this.getDescription()
+      ...this.getDescription(),
+      ...this.getDemo()
     }
   }
 
@@ -292,7 +356,8 @@ export class WikiStorybookItem {
         ...this.getCategory(),
         ...this.getType()
       },
-      ...this.getDescription()
+      ...this.getDescription(),
+      ...this.getDemo()
     }
   }
 
@@ -310,7 +375,8 @@ export class WikiStorybookItem {
         ...this.getDefaultValue(),
         ...this.getType()
       },
-      ...this.getDescription()
+      ...this.getDescription(),
+      ...this.getDemo()
     }
   }
 
@@ -327,7 +393,8 @@ export class WikiStorybookItem {
         ...this.getDefaultValue(),
         ...this.getType()
       },
-      ...this.getDescription()
+      ...this.getDescription(),
+      ...this.getDemo()
     }
   }
 }

package/src/classes/WikiStorybookProp.ts

@@ -0,0 +1,118 @@
+import { isString, toKebabCase } from '@dxtmisha/functional-basic'
+import { type StorybookArgsItem, StorybookControl } from '../types/storybookTypes'
+
+/**
+ * Class for working with a single Storybook property.
+ *
+ * Класс для работы с одним свойством Storybook.
+ */
+export class WikiStorybookProp {
+  /**
+   * Constructor
+   * @param name property name / имя свойства
+   * @param item property configuration / конфигурация свойства
+   */
+  constructor(
+    public readonly name: string,
+    protected readonly item: StorybookArgsItem
+  ) {
+  }
+
+  /**
+   * Checks if the item is hidden.
+   *
+   * Проверяет, скрыт ли элемент.
+   */
+  isHide(): boolean {
+    return this.item.hide === true
+  }
+
+  /**
+   * Checks if the item is a demo item.
+   *
+   * Проверяет, является ли элемент демонстрационным.
+   */
+  isDemo(): boolean {
+    return this.item.isDemo === true
+  }
+
+  /**
+   * Returns the property configuration.
+   *
+   * Возвращает конфигурацию свойства.
+   */
+  get(): StorybookArgsItem {
+    return this.item
+  }
+
+  /**
+   * Returns the property name.
+   *
+   * Возвращает имя свойства.
+   */
+  getName(): string {
+    return toKebabCase(this.name)
+  }
+
+  /**
+   * Returns the default value of the property.
+   *
+   * Возвращает значение по умолчанию для свойства.
+   */
+  getDefaultValue(): any {
+    return this.item?.table?.defaultValue?.summary
+  }
+
+  /**
+   * Returns the property type.
+   *
+   * Возвращает тип свойства.
+   */
+  getType(): string {
+    if (this.item?.table?.type?.summary) {
+      return this.item.table.type.summary
+    }
+
+    if (isString(this.item.control)) {
+      return this.item.control
+    }
+
+    return this.item.control?.type ?? StorybookControl.string
+  }
+
+  /**
+   * Returns the property description.
+   *
+   * Возвращает описание свойства.
+   */
+  getDescription(): string {
+    return this.item.description ?? ''
+  }
+
+  /**
+   * Returns the property options.
+   *
+   * Возвращает опции свойства.
+   */
+  getOptions(): StorybookArgsItem['options'] {
+    return this.item.options
+  }
+
+  /**
+   * Returns the demo data.
+   *
+   * Возвращает демонстрационные данные.
+   */
+  getDemo(): any {
+    return this.item.demo
+  }
+
+  /**
+   * Returns the additional demo data.
+   *
+   * Возвращает дополнительные демонстрационные данные.
+   */
+  getDemoOptions(): Record<string, any> {
+    return this.item.demoOptions ?? {}
+  }
+}

package/src/library.ts

@@ -2,6 +2,8 @@
 export * from './classes/WikiStorybook'
 export * from './classes/WikiStorybookDescriptions'
 export * from './classes/WikiStorybookItem'
+export * from './classes/WikiStorybookProp'
 
 // Types
 export * from './types/storybookTypes'
+export * from './types/wikiTypes'

package/src/media/descriptions/wikiDescriptions.ts

@@ -10,13 +10,19 @@ import { wikiDescriptionsBars } from './wikiDescriptionsBars'
 import { wikiDescriptionsBlock } from './wikiDescriptionsBlock'
 import { wikiDescriptionsButton } from './wikiDescriptionsButton'
 import { wikiDescriptionsCell } from './wikiDescriptionsCell'
+import { wikiDescriptionsCheckbox } from './wikiDescriptionsCheckbox'
 import { wikiDescriptionsChip } from './wikiDescriptionsChip'
 import { wikiDescriptionsChipGroup } from './wikiDescriptionsChipGroup'
 import { wikiDescriptionsDialog } from './wikiDescriptionsDialog'
+import { wikiDescriptionsDummy } from './wikiDescriptionsDummy'
 import { wikiDescriptionsField } from './wikiDescriptionsField'
 import { wikiDescriptionsFieldCounter } from './wikiDescriptionsFieldCounter'
 import { wikiDescriptionsFieldLabel } from './wikiDescriptionsFieldLabel'
 import { wikiDescriptionsFieldMessage } from './wikiDescriptionsFieldMessage'
+import { wikiDescriptionsGrid } from './wikiDescriptionsGrid'
+import { wikiDescriptionsGridItem } from './wikiDescriptionsGridItem'
+import { wikiDescriptionsGroup } from './wikiDescriptionsGroup'
+import { wikiDescriptionsHorizontalScroll } from './wikiDescriptionsHorizontalScroll'
 import { wikiDescriptionsIcon } from './wikiDescriptionsIcon'
 import { wikiDescriptionsImage } from './wikiDescriptionsImage'
 import { wikiDescriptionsInput } from './wikiDescriptionsInput'
@@ -27,13 +33,22 @@ import { wikiDescriptionsListMenu } from './wikiDescriptionsListMenu'
 import { wikiDescriptionsMask } from './wikiDescriptionsMask'
 import { wikiDescriptionsMenu } from './wikiDescriptionsMenu'
 import { wikiDescriptionsModal } from './wikiDescriptionsModal'
+import { wikiDescriptionsMotionAxis } from './wikiDescriptionsMotionAxis'
 import { wikiDescriptionsMotionTransform } from './wikiDescriptionsMotionTransform'
+import { wikiDescriptionsPage } from './wikiDescriptionsPage'
 import { wikiDescriptionsProgress } from './wikiDescriptionsProgress'
 import { wikiDescriptionsRipple } from './wikiDescriptionsRipple'
 import { wikiDescriptionsScrollbar } from './wikiDescriptionsScrollbar'
+import { wikiDescriptionsSection } from './wikiDescriptionsSection'
 import { wikiDescriptionsSelect } from './wikiDescriptionsSelect'
 import { wikiDescriptionsSelectValue } from './wikiDescriptionsSelectValue'
 import { wikiDescriptionsSkeleton } from './wikiDescriptionsSkeleton'
+import { wikiDescriptionsSnackbar } from './wikiDescriptionsSnackbar'
+import { wikiDescriptionsSnackbarItem } from './wikiDescriptionsSnackbarItem'
+import { wikiDescriptionsTabItem } from './wikiDescriptionsTabItem'
+import { wikiDescriptionsTabs } from './wikiDescriptionsTabs'
+import { wikiDescriptionsTabsNavigation } from './wikiDescriptionsTabsNavigation'
+import { wikiDescriptionsTextarea } from './wikiDescriptionsTextarea'
 import { wikiDescriptionsTextareaAutosize } from './wikiDescriptionsTextareaAutosize'
 import { wikiDescriptionsTooltip } from './wikiDescriptionsTooltip'
 import { wikiDescriptionsWindow } from './wikiDescriptionsWindow'
@@ -49,13 +64,19 @@ export const wikiDescriptions: StorybookComponentsDescription = [
   wikiDescriptionsBlock,
   wikiDescriptionsButton,
   wikiDescriptionsCell,
+  wikiDescriptionsCheckbox,
   wikiDescriptionsChip,
   wikiDescriptionsChipGroup,
   wikiDescriptionsDialog,
+  wikiDescriptionsDummy,
   wikiDescriptionsField,
   wikiDescriptionsFieldCounter,
   wikiDescriptionsFieldLabel,
   wikiDescriptionsFieldMessage,
+  wikiDescriptionsGrid,
+  wikiDescriptionsGridItem,
+  wikiDescriptionsGroup,
+  wikiDescriptionsHorizontalScroll,
   wikiDescriptionsIcon,
   wikiDescriptionsInput,
   wikiDescriptionsImage,
@@ -66,13 +87,22 @@ export const wikiDescriptions: StorybookComponentsDescription = [
   wikiDescriptionsMask,
   wikiDescriptionsMenu,
   wikiDescriptionsModal,
+  wikiDescriptionsMotionAxis,
   wikiDescriptionsMotionTransform,
+  wikiDescriptionsPage,
   wikiDescriptionsProgress,
   wikiDescriptionsRipple,
   wikiDescriptionsScrollbar,
+  wikiDescriptionsSection,
   wikiDescriptionsSelect,
   wikiDescriptionsSelectValue,
   wikiDescriptionsSkeleton,
+  wikiDescriptionsSnackbar,
+  wikiDescriptionsSnackbarItem,
+  wikiDescriptionsTabItem,
+  wikiDescriptionsTabs,
+  wikiDescriptionsTabsNavigation,
+  wikiDescriptionsTextarea,
   wikiDescriptionsTextareaAutosize,
   wikiDescriptionsTooltip,
   wikiDescriptionsWindow

package/src/media/descriptions/wikiDescriptionsAccordion.ts

@@ -96,18 +96,22 @@ export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <div class="wiki-storybook-item--padding">
-          <button class="wiki-storybook-button" @click="open = !open">Toggle ({{ open }})</button>
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="open = !open">
+              Toggle ({{ open }})
+            </button>
+          </div>
+          <DesignComponent v-model:open="open" label="Settings" description="Click to expand" icon="settings">
+            <template #default>
+              <div class="wiki-storybook-item--padding">
+                <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
+                <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the accordion's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
+                <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the accordion, such as in complex forms or coordinated UI interactions.</p>
+              </div>
+            </template>
+          </DesignComponent>
         </div>
-        <DesignComponent v-model:open="open" label="Settings" description="Click to expand" icon="settings">
-          <template #default>
-            <div class="wiki-storybook-item--padding">
-              <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
-              <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the accordion's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
-              <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the accordion, such as in complex forms or coordinated UI interactions.</p>
-            </div>
-          </template>
-        </DesignComponent>
       `
     },
     {
@@ -122,7 +126,6 @@ export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
           <template #description>Custom description slot</template>
           <template #caption>Custom caption slot</template>
           <template #trailing>Trailing slot</template>
-          <template #body>Body slot content</template>
           <template #default>
               <p>Custom default slot content (main accordion body)</p>
           </template>
@@ -154,5 +157,21 @@ export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'Cell'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Accordion :open="true" :auto-close="false" v-bind="args">
+    <div class="wiki-storybook-item--padding">
+      Hidden content
+    </div>
+  </Accordion>
+</div>
+    `,
+    description: `
+Collapsible container for progressive disclosure. Toggles content visibility to manage space and cognitive load. Use for FAQs, grouped settings, hiding secondary info, or compact dashboards.
+Header is based on a Cell component and supports label, description, and icon. Features an auto-rotating arrow indicator and smooth height transitions via MotionTransform.
+Built-in ARIA support and keyboard navigation (Space/Enter). Controlled primarily via v-model:open. Customizable with divider and header attributes through cellAttrs.
+    `
   }
 }