@component-controls/app

Component controls standalone application.

Usage no npm install needed!

<script type="module">
  import componentControlsApp from 'https://cdn.skypack.dev/@component-controls/app';
</script>

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