A next-generation tool to create blazing-fast documentation sites
API
created:7/29/2020
,
updated:11/17/2020

Overview

The Store module @component-controls/store provides access to the in-memory store of documents, stories, components, and react hooks to get access to this data.

Store

The root Store object provides access to the global store of documents and data.

interface Store {
/**
* global configuration for config file
*/
config?: RunConfiguration;
/**
* list of documents (pages)
*/
docs: StoreDocuments;
/**
* list of stories
*/
stories: Stories;
/**
* list of components used in stories and documents
*/
components: Components;
/**
* list of package.json files and their data
* used by the components and the stories of the project
*/
packages: Packages;
}

Store hooks

useStore

Returns the global store object

useStore = (): Store

import { useStore } from '@component-controls/store';
{
const store = useStore();
console.log(store.config.theme);
}

useConfig

Returns the configuration object part of the store

useConfig = (): Configuration

import { useConfig } from '@component-controls/store';
{
const store = useConfig();
console.log(config.theme);
}

useActiveTab

Returns the currently active tab for documents that have multiple tabs/pages

useActiveTab = (): string;

active tabactive tab

usePackage

Returns a package object from a package id. The package id can come from a Document or a Component object.

usePackage = (packageId?: string): PackageInfo

import { usePackage } from '@component-controls/store';
{
const store = usePackage('some-package-id');
console.log(config.theme);
}

Document hooks

useDocument

Retrieves a Document object from a document id

useDocument = (docId: string) => Document

import { useDocument } from '@component-controls/store';
{
const doc = useDocument('Introduction/Getting Started');
console.log(doc.title);
}

useCurrentDocument

Returns the currently selected document

useCurrentDocument = (): Document

import { useCurrentDocument } from '@component-controls/store';
{
const doc = useCurrentDocument();
console.log(doc.title);
}

useDocPackage

Returns the package information for the currently selected document

useDocPackage = (): PackageInfo

import { useDocPackage } from '@component-controls/store';
{
const pckg = useDocPackage();
console.log(pckg.dependencies);
}

useDocs

Returns a key-value object of all documents in the store

useDocs = () => Record<string, Document>

import { useDocs } from '@component-controls/store';
{
const docs = useDocs();
console.log(Object.keys(docs));
}

usePages

Returns an array of all documents in the store

usePages = () => Document[]

import { usePages } from '@component-controls/store';
{
const pages = usePages();
console.log(pages.map(page => page.title));
}

useDocSort

Returns the doc sort order and a setter to update the sort order for a specific DocType

useDocSort = (type: DocType): [DocSortOrder, (newOrder: DocSortOrder) => void]

import { useDocSort } from '@component-controls/store';
{
const [sortOrder, setSortOrder] = useDocSort('blogs');
console.log(sortOrder);
<button onClick={() => setSortOrder('title')}>by title</button>
}

useDocByType

Returns an array of all documents of a specific DocType

useDocByType = (type: DocType): Document[]

import { useDocByType } from '@component-controls/store';
{
const blogs = useDocByType('blogs');
console.log(blogs.map(blog => blog.title));
}

useSortedDocByType

Returns a sorted list of documents of a specific DocType. Uses the sort order state.

useSortedDocByType = (type: DocType): Document[]

import { useSortedDocByType } from '@component-controls/store';
{
const blogs = useSortedDocByType('blogs');
console.log(blogs.map(blog => blog.title));
}

useDocTypeCount

Returns a global object of key/value pairs with counts of documents per DocType

useDocTypeCount = (): Record<DocType, { count: number; home?: Document }>

import { useDocTypeCount } from '@component-controls/store';
{
const counts = useDocTypeCount('blogs');
console.log(counts['blogs'].count);
}

useNavigationInfo

Returns the next/previous page objects for the current document

useNavigationInfo = (): NavigationResult

import { useNavigationInfo } from '@component-controls/store';
{
const nav = useNavigationInfo('blogs');
console.log(nav.nextPage.link, nav.nextPage.title);
}

useDocumentPath

Returns a link to a document from a DocType, document id, and active tab

useDocumentPath: = (type?: DocType, docId: string, activeTab?: string ) => string

import { useDocumentPath } from '@component-controls/store';
{
const href = useDocumentPath('blogs', 'Introduction/Getting Started');
return <a href={href}>Visit tutorial</a>
}

useDocDescription

Returns the descript for a document page. It uses the doc.description property if available, or if there is a component assigned to the document will return the component's name.

useDocDescription = (doc?: Document): string

import { useDocument, useDocDescription } from '@component-controls/store';
{
const doc = useDocument('Introduction/Getting Started');
const description = useDocDescription(doc);
console.log(description);
}

Story hooks

useStoryById

Retrieves a Story object from a story id

useStoryById = (storyId: string) => Story

import { useStoryById } from '@component-controls/store';
{
const story = useStoryById('esm-starter--overview');
console.log(story.description);
}

useCurrentStory

Returns the currently selected story

useCurrentStory = (): Story

import { useCurrentStory } from '@component-controls/store';
{
const story = useCurrentStory();
console.log(story.description);
}

useStory

Returns a story from an input id or story name. The id can be '.', which means the current story.

useStory = ({ id: string, name: string}): Story

import { useStory } from '@component-controls/store';
{
const story = useStory({ id: '.' });
console.log(story.description);
}

useStoryPath

Returns a link to a story from a story id

useStoryPath = (storyId: string): string

import { useStoryPath } from '@component-controls/store';
{
const href = useStoryPath('esm-starter--overview');
return <a href={href}>Visit tutorial</a>
}

Component hooks

useComponents

If the of property is specified, will return the listed components, if of is not specified, will return the components specified in the component and subcomponent properties of the document or the story.

useComponents = ({ of: string, name: string}): Components

import { useComponents } from '@component-controls/store';
{
const components = useComponents({ of: '.' });
console.log(Object.keys(components));
}

useComponent

If the of property is specified, will return the listed component, if of is not specified, will return the component specified in the component property of the document or the story.

useComponent = ({ of: string, name: string}): Component

import { useComponent } from '@component-controls/store';
import { Button } from '../Button';
{
const component = useComponent({ of: Button });
console.log(component.source);
}

useStoryComponent

Returns a story's component from an input id or story name. The id can be '.', which means the current story.

useStoryComponent = ({ id: string, name: string}): Component

import { useStoryComponent } from '@component-controls/store';
{
const component = useStoryComponent({ id: '.' });
console.log(component.source);
}

useCurrentPropsCount

Returns the number of prop-info properties count for the current document. If the current document has more than one component assigned - will return the sum.

useCurrentPropsCount = (): number

import { useCurrentPropsCount } from '@component-controls/store';
{
const count = useCurrentPropsCount();
console.log(count);
}

Controls hooks

useStoryControls

Returns the controls associated with a story

useStoryControls = (storyId: string): ComponentControls

import { useStoryControls } from '@component-controls/store';
{
const controls = useStoryControls('esm-starter--overview');
console.log(controls);
}

useControl

Returns a controls object and a setter function from the current control's context, given a control name. This hook is to be used when creating custom control editors.

useControl = (name: string): [T, (value: any) => void]

import { ControlTypes, ComponentControlBoolean } from '@component-controls/core';
import { PropertyEditor } from '@component-controls/editors';
import { useControl } from '@component-controls/store';
const CheckboxEditor: PropertyEditor = ({ name }) => {
const [control, onChange] = useControl<ComponentControlBoolean>(name);
return (
<input
type="checkbox"
id={name}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
onChange(e.target.checked);
}}
checked={control.value ?? false}
/>
);
};
addPropertyEditor(ControlTypes.BOOLEAN, CheckboxEditor);

Categories

useDocPropCount

Returns the number of documents by unique values in their category field

useDocPropCount = (category: string): Record<string, number>

import { useDocPropCount } from '@component-controls/store';
{
const authors = useDocPropCount('author');
console.log(authors);
}

useDocsByCategory

Returns an array of documents that have a specific value in their category field

useDocsByCategory = (category: string, value?: any): Document[]

import { useDocsByCategory } from '@component-controls/store';
{
const pages = useDocsByCategory('author', 'atanasster');
console.log(pages);
}