new(component) AppBar

components.tsx

@@ -1,19 +1,69 @@
 import { indexBy, prop, sortBy } from 'ramda';
+import { ReactNode } from 'react-transition-group/node_modules/@types/react';
+
+import { Alert, alertComponent } from './components/alert';
+import { AppBar, appBarComponent } from './components/appBar';
+import { Avatar, avatar } from './components/avatar';
+import { AvatarGroup, avatarGroup } from './components/avatarGroup';
+import { Button, button } from './components/button';
+import { Checkbox, checkbox } from './components/checkbox';
+import { DatePicker, datePicker } from './components/datePicker';
+import { ErrorBoundary, errorBoundary } from './components/errorBoundary';
+import { Select, select } from './components/select';
+import { Stepper, stepper } from './components/stepper';
+import { Switch, switchComponent } from './components/switch';
+import { Tabs, tabs } from './components/tabs';
+import { Sentence } from './entities';
+
+export type Component =
+  | Alert
+  | AppBar
+  | Avatar
+  | AvatarGroup
+  | Button
+  | Checkbox
+  | DatePicker
+  | ErrorBoundary
+  | Select
+  | Stepper
+  | Switch
+  | Tabs;
+
+
+type OptionId = string;
+
+export interface Option {
+  criteria: Sentence;
+  name: string;
+  optionId: OptionId;
+  toJsx: (any: any) => ReactNode | string;
+  toMarkdown: (any: any) => string;
+}
+
+type OptionsById = {
+  [optionId in OptionId]: Option;
+};
+
+export type SuperString = string | {
+  jsx: ReactNode;
+  markdown: string;
+};
+
+export interface ComponentInfo {
+  componentId: string;
+
+  /** The typical name used by the layman to identify this component. */
+  cannonicalName: string;
+
+  /** The English indefinte article to be used to refer to this Component */
+  indefiniteArticle: 'a' | 'an';
+  description: SuperString;
+  optionsById: OptionsById;
+}
 
-import { alertComponent } from './components/alert';
-import { avatar } from './components/avatar';
-import { avatarGroup } from './components/avatarGroup';
-import { button } from './components/button';
-import { checkbox } from './components/checkbox';
-import { datePicker } from './components/datePicker';
-import { errorBoundary } from './components/errorBoundary';
-import { select } from './components/select';
-import { stepper } from './components/stepper';
-import { switchComponent } from './components/switch';
-import { tabs } from './components/tabs';
-import { ComponentInfo } from './entities';
 
 export const componentInfo: ComponentInfo[] = sortBy(prop('componentId'), [
+  appBarComponent,
   alertComponent,
   avatar,
   avatarGroup,

components/alert.ts

@@ -1,9 +1,20 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId, stringArray } from '../utils';
 
+const componentId = 'alert';
+
+export interface Alert extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    closable: boolean;
+    types: string[] | null;
+  };
+}
+
 export const alertComponent: ComponentInfo = {
   cannonicalName: 'Alert',
-  componentId: 'alert',
+  componentId,
   description: 'Alerts are used to show an important message to users.',
   indefiniteArticle: 'an',
   optionsById: indexByOptionId([

components/appBar.ts

@@ -0,0 +1,48 @@
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
+import { checkmark, indexByOptionId, stringArray } from '../utils';
+
+const componentId = 'appBar';
+
+export interface AppBar extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    api: ('children' | 'customComponents' | 'props')[];
+    denseMode: boolean;
+    sticky: boolean;
+    themeMode: boolean;
+  };
+}
+
+export const appBarComponent: ComponentInfo = {
+  cannonicalName: 'AppBar',
+  componentId,
+  description: 'The AppBar displays information and actions relating to the current screen.',
+  indefiniteArticle: 'an',
+  optionsById: indexByOptionId([
+    {
+      criteria: 'The API style used for the components contained within the AppBar.',
+      name: 'API',
+      optionId: 'api',
+      ...stringArray,
+    },
+    {
+      criteria: 'There is a built-in way to make the bar take up less vertical space.',
+      name: 'Dense',
+      optionId: 'denseMode',
+      ...checkmark,
+    },
+    {
+      criteria: 'A prop exists which can set the bar into a mode where it remains at the top of the screen, independent of scroll depth.',
+      name: 'Sticky',
+      optionId: 'sticky',
+      ...checkmark,
+    },
+    {
+      criteria: 'The bar can be individually themed to use a theme mode that doesn\'t match the rest of the app.  E.g. dark mode AppBar in a light mode app.',
+      name: 'Theme Mode',
+      optionId: 'themeMode',
+      ...checkmark,
+    },
+  ]),
+};

components/avatar.ts

@@ -1,9 +1,22 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId, stringArray } from '../utils';
 
+const componentId = 'avatar';
+
+export interface Avatar extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    badge: boolean;
+    shapes: ('circle' | 'rounded-square' | 'square')[] | null;
+    sizes: string[] | null;
+    types: ('icon' | 'image' | 'text')[] | null;
+  };
+}
+
 export const avatar: ComponentInfo = {
   cannonicalName: 'Avatar',
-  componentId: 'avatar',
+  componentId,
   description: 'Avatars can be used to represent people or objects.',
   indefiniteArticle: 'an',
   optionsById: indexByOptionId([

components/avatarGroup.ts

@@ -1,9 +1,20 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId } from '../utils';
 
+const componentId = 'avatarGroup';
+
+export interface AvatarGroup extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    expandableGroup: boolean;
+    maxCount: boolean;
+  };
+}
+
 export const avatarGroup: ComponentInfo = {
   cannonicalName: 'AvatarGroup',
-  componentId: 'avatarGroup',
+  componentId,
   description: 'AvatarGroups stack a set of Avatars into a customized list, often with customized animations and options.',
   indefiniteArticle: 'an',
   optionsById: indexByOptionId([

components/button.ts

@@ -1,9 +1,23 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId, stringArray } from '../utils';
 
+const componentId = 'button';
+
+export interface Button extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    disabled: boolean;
+    groupable: boolean;
+    icon: ('left' | 'only' | 'right')[] | null;
+    loading: boolean;
+    sizes: string[] | null;
+  };
+}
+
 export const button: ComponentInfo = {
   cannonicalName: 'Button',
-  componentId: 'button',
+  componentId,
   description: 'Users trigger actions by clicking on buttons.',
   indefiniteArticle: 'a',
   optionsById: indexByOptionId([

components/checkbox.ts

@@ -1,9 +1,23 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId, stringArray } from '../utils';
 
+const componentId = 'checkbox';
+
+export interface Checkbox extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    customIcon: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    invalid: boolean;
+    labelPlacement: ('above' | 'below' | 'left' | 'right')[];
+  };
+}
+
 export const checkbox: ComponentInfo = {
   cannonicalName: 'Checkbox',
-  componentId: 'checkbox',
+  componentId,
   description: 'Users toggle between checked, unchecked (or indeterminate) values with checkboxes.',
   indefiniteArticle: 'a',
   optionsById: indexByOptionId([
@@ -14,7 +28,7 @@ export const checkbox: ComponentInfo = {
       ...checkmark,
     },
     {
-      criteria: 'The checkbox has a `disabled` state, indicating the user cannot interact with it',
+      criteria: 'The checkbox has a `disabled` state, indicating the user cannot interact with it.',
       name: 'Disabled',
       optionId: 'disabled',
       ...checkmark,

components/datePicker.ts

@@ -1,9 +1,25 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId, stringArray } from '../utils';
 
+const componentId = 'datePicker';
+
+export interface DatePicker extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    clearable: boolean;
+    customLocale: boolean;
+    minMax: boolean;
+    modes: ('day' | 'month' | 'quarter' | 'week' | 'year')[];
+    presets: boolean;
+    range: boolean;
+    time: boolean;
+  };
+}
+
 export const datePicker: ComponentInfo = {
   cannonicalName: 'DatePicker',
-  componentId: 'datePicker',
+  componentId,
   description: 'Users select a date or date range using a date picker.',
   indefiniteArticle: 'a',
   optionsById: indexByOptionId([

components/errorBoundary.tsx

@@ -1,14 +1,25 @@
-import { Link } from '@material-ui/core';
-import React, { Fragment } from 'react';
+import { Link } from '@mui/material';
+import { Fragment } from 'react';
 
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { link } from '../markdown/utils';
 import { checkmark, indexByOptionId } from '../utils';
 
+const componentId = 'errorBoundary';
+
+export interface ErrorBoundary extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    customText: boolean;
+    dropInFallback: boolean;
+    wrapperFallback: boolean;
+  };
+}
 
 export const errorBoundary: ComponentInfo = {
   cannonicalName: 'ErrorBoundary',
-  componentId: 'errorBoundary',
+  componentId,
   description: {
     jsx: <Fragment><Link href="https://reactjs.org/docs/error-boundaries.html">ErrorBoundaries</Link> are a React 16+ specific feature that uses the <Link href="https://reactjs.org/docs/react-component.html#componentdidcatch">componentDidCatch</Link> API for handling uncaught errors without unmounting the whole React component tree.</Fragment>,
     markdown: `${link({ href: 'https://reactjs.org/docs/error-boundaries.html', text: 'ErrorBoundaries' })} are a React 16+ specific feature that uses the ${link({ href: 'https://reactjs.org/docs/react-component.html#componentdidcatch', text: 'componentDidCatch' })} API for handling uncaught errors without unmounting the whole React component tree.`,

components/select.ts

@@ -1,9 +1,24 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId, stringArray } from '../utils';
 
+const componentId = 'select';
+
+export interface Select extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    async: boolean;
+    disabled: boolean;
+    disabledOptions: boolean;
+    filterable: boolean;
+    groupable: boolean;
+    icons: ('composable' | 'end' | 'start')[];
+  };
+}
+
 export const select: ComponentInfo = {
   cannonicalName: 'Select',
-  componentId: 'select',
+  componentId,
   description: 'A Select allows a user to select a value from a series of options.  Much more advanced than the native HTML select.',
   indefiniteArticle: 'a',
   optionsById: indexByOptionId([

components/stepper.ts

@@ -1,9 +1,23 @@
-import { ComponentInfo } from '../entities';
+import { ComponentInfo } from '../components';
+import { BaseComponent } from '../entities';
 import { checkmark, indexByOptionId } from '../utils';
 
+const componentId = 'stepper';
+
+export interface Stepper extends BaseComponent {
+  componentId: typeof componentId;
+  options: {
+    canBeVertical: boolean;
+    clickable: boolean;
+    stepDescription: boolean;
+    stepError: boolean;
+    stepIcon: boolean;
+  };
+}
+
 export const stepper: ComponentInfo = {
   cannonicalName: 'Stepper',
-  componentId: 'stepper',
+  componentId,
   description: 'Navigation that guides users through the steps of a task.',
   indefiniteArticle: 'a',
   optionsById: indexByOptionId([