Store

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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);

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

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