ColibriComponents

GitHub · Contributor Docs

ColibriComponents contains some components I often use in my React projects.

Table of Contents

• Elements
• Installation
• Usage
• Thanks

Elements

Name	Description
AppToolbar	A toolbar for an app with information about the creator, custom items for actions and a main menu.
CommandsWrapper	A component that manages the keyboard shortcuts of an app. It can also show a palette of the available commands.
UndoProvider	A component that provides undo and redo functionality to its children.

Installation

1. Navigate to your projects in the command line.
2. Run npm install https://github.com/david-swift/ColibriComponents-Web.

Usage

AppToolbar

Add a toolbar to an app.

function MyApp() {
    return <>
        <AppToolbar
            color1="#3CFEFF"
            color2="#3F22F9"
            creatorIcon={<img src="/path/to/icon" alt="Creator Icon" />}
            creatorLink="https://link.to/website"
            name="AppName"
        >
            <Header.Item>
                <Button>Action</Button>
            </Header.Item>
        </AppToolbar>
        My App
    </>;
}

CommandsWrapper

Add keyboard shortcuts to an app.

function MyApp() {
  const [isOpen, setIsOpen] = useState(false)
  return <>
    <CommandsWrapper
        commands={
          [
            commandsGroup("TestApp", [
                command(
                    "Settings",
                    ["preferences", "options"],
                    noModifiersShortcut("Comma"),
                    () => console.log("Open Settings")
                ),
                command(
                    "Commands",
                    ["shortcuts", "keyboard"],
                    keyboardShortcut(false, true, "Space"),
                    () => setIsOpen(!isOpen)
                ),
            ])
          ]
        }
        isOpen={isOpen}
        setIsOpen={setIsOpen}
    >
      <div>My App</div>
    </CommandsWrapper>
  </>
}

UndoProvider

Add undo and redo functionality to an app.

function MyApp() {
    const [value, setValue] = useState(0);
    return (
        <UndoProvider
            value={value}
            onChange={setValue}
            children={(props) => {
                // Use "value" for getting the state.
                // Use "setValue" for setting the state.
                // Call "undo" and "redo" for undoing and redoing changes.
                // "canUndo" and "canRedo" are booleans that indicate whether it is possible to undo or redo changes.
                const { value, setValue, undo, redo, canUndo, canRedo } = props;
                return <>My App</>
            }}
        />
    );
}

Thanks

Dependencies

• Babel licensed under the MIT license
• Primer React licensed under the MIT license
• Storybook licensed under the MIT license
• Storybook Testing Library licensed under the MIT license
• Definitely Typed licensed under the MIT license
• gh-pages licensed under the MIT license
• prop-types licensed under the MIT license
• React licensed under the MIT license
• React Hotkeys Hook licensed under the MIT license
• Styled Components licensed under the MIT license
• TypeScript licensed under the Apache License 2.0

Other Thanks

• The contributors
• Madushika Perera: Article Build a component library with React and TypeScript
• Armin Yazdani: Article How to Deploy Storybook to GitHub Pages