README
Table of contents
Overview
Components to create @component-controls
standalone application, that is connected to the store of documents.
Some of the design goals:
- Portability between different build systems ie - Gatsby, CRA, Vercel.
- Create a true CMS-type user-interface, allowing for different document types ie. "stories", "blogs", "articles".
- Category pages for "tags", "authors".
- Fully customizable Home page.
- Responsive user/interface, with sidebars transforming into popouts for small screen resolutions.
List of components
App
application container component. adds SEO, SkipLinks, Header and Footer.
App source code
properties
Name | Type | Description |
---|---|---|
Helmet |
ComponentType<{ htmlAttributes?: Record<string, unknown>; }> | |
type |
string |
AppContext
AppContext source code
properties
Name | Type | Description |
---|---|---|
docId |
string | |
storyId |
string | |
type |
string | |
store* |
Store | |
linkClass* |
FC<LinkProps> | |
Helmet |
ComponentType<{ htmlAttributes?: Record<string, unknown>; }> | |
activeTab |
string |
AppError
application build-time error container
AppError source code
properties
Name | Type | Description |
---|---|---|
error |
string | Error text, "apperror" theme key. |
CategoryList
displays page of categories
CategoryList source code
properties
Name | Type | Description |
---|---|---|
type* |
string | document type |
CategoryListItem
category list item displays the unique categories with a link, and the count of docs for each
CategoryListItem source code
properties
Name | Type | Description |
---|---|---|
type* |
string | doc type |
name* |
string | category name |
count* |
number | how many documents of this category |
CategoryPage
CategoryPage source code
properties
Name | Type | Description |
---|---|---|
type* |
string | |
category* |
any |
Container
application inner container for pages. Adds pagination to the blocks/Container component.
Container source code
DocPage
documentation page for current document. will check if the page has a layout with sidebars or if the page is standalone.
DocPage source code
properties
Name | Type | Description |
---|---|---|
type |
string | document type |
category |
string |
DocumentHomePage
list of documents for a specific document type
DocumentHomePage source code
properties
Name | Type | Description |
---|---|---|
type |
string |
DocumentsList
displays a list of the provided document pages
DocumentsList source code
properties
Name | Type | Description |
---|---|---|
pages* |
Pages | list of document pages |
type* |
string | document type |
Footer
application footer component
Footer source code
Header
application header component
Header source code
properties
Name | Type | Description |
---|---|---|
toolbar |
{ left?: ActionItems; right?: ActionItems; } |
DocLink
native lonk to a documentation page
DocLink source code
properties
Name | Type | Description |
---|---|---|
id |
string | |
ref |
((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement> | |
sx |
ThemeUIStyleObject |
DocsLink
native lonk to the documentation
DocsLink source code
properties
Name | Type | Description |
---|---|---|
ref |
((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement> | |
sx |
ThemeUIStyleObject |
StoryLink
native lonk to a story
StoryLink source code
properties
Name | Type | Description |
---|---|---|
id |
string | |
ref |
((instance: HTMLAnchorElement) => void) | RefObject<HTMLAnchorElement> | |
sx |
ThemeUIStyleObject |
PageContainer
page container to enhance the inner page wrapper
PageContainer source code
properties
Name | Type | Description |
---|---|---|
type* |
string | document type |
ref |
Ref<HTMLDivElement> | ref to the page container component |
variant |
string | theme variant |
wrapper |
ComponentType<{}> | inner wrapper container |
sx |
ThemeUIStyleObject |
SEO
SEO source code
properties
Name | Type | Description |
---|---|---|
Helmet |
ComponentType<{ htmlAttributes?: Record<string, unknown>; }> | |
doc |
{ [key: string]: any; title: string; type?: string; route?: string; date?: Date; dateModified?: Date; draft?: boolean; tags?: string[]; keywords?: string[]; description?: string | Element; ... 12 more ...; parameters?: any; } & StoryProps<...> & PageLayoutProps | |
config |
{ renderFn?: FrameworkRenderFn; title?: string; logo?: ReactNode; app?: FC<{}>; description?: string; copyright?: string; language?: string; author?: string; image?: string; ... 10 more ...; analytics?: any; } & StoryProps<...> & Pick<...> | |
title |
string |
SideContext
SideContext source code
properties
Name | Type | Description |
---|---|---|
pageRef |
RefObject<HTMLDivElement> | |
tab |
string |
Sidebar
application sidebar component
Sidebar source code
properties
Name | Type | Description |
---|---|---|
title |
ReactNode | title element |
type |
string | document type |
SidebarsMDXPage
document page - rendering with sidebars and tabs for multiple document views
SidebarsMDXPage source code
properties
Name | Type | Description |
---|---|---|
type |
string | document type |
doc* |
{ [key: string]: any; title: string; type?: string; route?: string; date?: Date; dateModified?: Date; draft?: boolean; tags?: string[]; keywords?: string[]; description?: string | Element; ... 12 more ...; parameters?: any; } & StoryProps<...> & PageLayoutProps | document object |
SidebarsPage
SidebarsPage source code
properties
Name | Type | Description |
---|---|---|
type |
string | document type |
SidebarsStoryPage
document page - rendering with sidebars and tabs for multiple document views
SidebarsStoryPage source code
properties
Name | Type | Description |
---|---|---|
type |
string | document type |
doc* |
{ [key: string]: any; title: string; type?: string; route?: string; date?: Date; dateModified?: Date; draft?: boolean; tags?: string[]; keywords?: string[]; description?: string | Element; ... 12 more ...; parameters?: any; } & StoryProps<...> & PageLayoutProps | document object |