open-index/open-npm huggingface dataset:
npm package: @fullstack-one/boot-loader
Description: fullstack.one helper package
Latest version: 0.7.16

# @fullstack.one/boot-loader
Boot management for fullstack-one packages and applications, but also general purpose boot manager based on `typedi`.

## Installation

```sh
npm install --save @fullstack-one/boot-loader
```

## Usage

```ts
import { BootLoader } from "@fullstack-one/boot-loader";

const bootLoader = Container.get(BootLoader);
bootLoader.addBootFunction("some name", () => {
  // do some stuff
});
bootLoader.addBootFunction("some async name", async () => {
  // do some async stuff
});

await bootLoader.boot();
```

Find more examples in the [tests directory](test) or read the [code](lib).
npm package: @fullstack-one/cli
Description: fullstack.one cli package
Latest version: 0.5.15

# @fullstack-one/cli
CLI tool to fasten development with fullstack one

## Installation

Via npm:

```sh
npm install @fullstack-one/cli
```

## Commands

### --help

Get cli help for the commands:

```sh
one --help
one [command] --help
```

### init

Initializes a fullstack one project.

```sh
one init
```


### migrate-db

Utilizes @fullstack-one/auto-migrate to migrate the database according to the schema definitions.

```sh
one migrate-db
```


### generate-ts

Generates typescript interfaces, enums and types based on the dbMeta object derived from the schema definitions.

```sh
one generate-ts
```
npm package: @fullstack-one/core
Description: fullstack.one core package
Latest version: 0.5.25

# @fullstack.one/boot-loader
Boot management for fullstack-one packages and applications, but also general purpose boot manager based on `typedi`.

## Installation

```sh
npm install --save @fullstack-one/boot-loader
```

## Usage

```ts
import { BootLoader } from "@fullstack-one/boot-loader";

const bootLoader = Container.get(BootLoader);
bootLoader.addBootFunction("some name", () => {
  // do some stuff
});
bootLoader.addBootFunction("some async name", async () => {
  // do some async stuff
});

await bootLoader.boot();
```

Find more examples in the [tests directory](test) or read the [code](lib).
npm package: @fullstack-one/db
Description: fullstack.one db connector package
Latest version: 0.7.17

# @fullstack-one/db
Packages for managing connections to Postgres

This package includes a service for a postgres pool, called [DbGeneralPool](lib/DbGeneralPool/index.ts). The pool is used for GraphQl requests. Morover this package includes an ORM subpackage based on [typeorm](https://www.typeorm.io), which has its own pool. Other packages and the application can use the query runners of ORM using `const queryRunner = orm.createQueryRunner(); await queryRunner.connect(); queryRunner.query("SELECT ...")`.

The pool size is gracefully adjusted depending on the number of connected nodes using `@fullstack-one/events`.
npm package: @fullstack-one/events
Description: fullstack.one events package
Latest version: 0.7.16

# @fullstack-one/events
Events system for fullstack-one packages and applications.

You can emit events and add and remove event listeners for local and global events.

- Local: All events emitted of the own node
- Global: All events emitted with the same configured namespace and events database

Please, find usage information in the [code](lib/index.ts).
npm package: @fullstackcraft/react-native-keyboard-shift
Description: A 2020s compatible keyboard avoiding view for Android and iOS that just works.
Author: Chris Frewin
Latest version: 1.1.5-alpha0

# react-native-keyboard-shift

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/FullStackCraft/react-native-keyboard-shift/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/react-native-keyboard-shift.svg?style=flat)](https://www.npmjs.com/package/@fullstackcraft/react-native-keyboard-shift) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)

# Example

_Snack coming soon_

Until then:

1. Clone this repo:

```bash
git clone https://github.com/FullStackCraft/react-native-keyboard-shift
```

2. Move into the example folder:

```
cd react-native-keyboard-shift/example
```

3. Install dependencies:

```
npm install
```

4. Start Metro

```
npm start
```

5. Start Android or iOS

```bash
npm run android
# -or- iOS
npm run ios
```

Enjoy the juicy keyboard shifty-ness!

# Usage In Your Project

Install and save this package as a dependency:

```bash
npm install --save @fullstackcraft/react-native-keyboard-shift
```

Import and use the KeyboardShift component:

```tsx
import '@fullstackcraft/react-native-keyboard-shift'
// other imports

export default function YourCoolKeyboardScreen () {

    // Other logic, variables, etc.

    return (
        <KeyboardShift>
            {/* Screen components */}
        </KeyboardShift>
    )
}
```

# ANOTHER Keyboard Shifting Component?!

See the original [blog post](https://chrisfrewin.medium.com/a-keyboard-avoiding-view-for-react-native-in-2021-196701ff0608) that led to the creation of this library for more information.
npm package: @fullstackcraftllc/codevideo-adapters
Description: Adapters for third party services (file system, github, etc.) to connect to the CodeVideo ecosystem.
Author: Chris Frewin
Latest version: 1.0.12

# codevideo-adapters

Adapters for third party services (file system, GitHub, etc.) to connect to the CodeVideo ecosystem.

Currently, all adapters are not web compatible and are meant to be used in Node.js environments.

## Usage - File System Adapter

Start your CodeVideo lesson with the exact same starting point as any existing codebase, by providing the path to the folder containing your code:

```ts
import { buildFileStructureFromRootFolder } from "@fullstackcraftllc/codevideo-adapters";

const fileStructure = await buildFileStructureFromRootFolder("/path/to/your/codebase");

// use fileStructure in the initialSnapshot of your lesson

```

Returns a file structure of type [`IFileStructure`](https://github.com/codevideo/codevideo-types/blob/main/src/interfaces/IFileStructure.ts) from the `@fullstackcraftllc/codevideo-types` package.

## Usage - GitHub Adapter

Start your CodeVideo lesson at the exact file structure as a GitHub repository link.

Coming soon.
npm package: @fullstackcraftllc/codevideo-backend
Description: The backend engine to create videos on codevideo.io
Author: Chris Frewin
Latest version: 1.0.1

# codevideo-backend

<img src="https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-backend"/> <img src="https://img.shields.io/codecov/c/github/codevideo/codevideo-backend">

The backend engine to create videos on codevideo.io

*NOTE: This is the **backend** engine. If you're looking for the **frontend** engine, check out [`codevideo-frontend`](https://github.com/codevideo/codevideo-frontend)!

**_This package is about as unstable as you can get. Consider it even below alpha status. It is brand new and under considerable development._**

## Get Started

Install this package:

```shell
npm install --save @fullstackcraftllc/codevideo-backend
```

## Usage

Usage in an Express POST handler: (this is actually exactly how the backend handler from [codevideo.io](https://codevideo.io) is implemented)

Coming shortly!
npm package: @fullstackcraftllc/codevideo-dynamic-ast
Description: Dynamically identify and statically analyze an arbitrary amount of source code files of any programming language.
Author: Your Name
Latest version: 1.0.4

# `codevideo-dynamic-ast`

Parse and validate code from multiple programming languages using their native AST parsers - all through a single unified interface.

## Installation

```bash
npm install codevideo-dynamic-ast
```

## Usage

Provide an array of one or more `IFileSource` objects and get back an `IParseResult` back.

```typescript
import { parseProject } from '@fullstackcraftllc/codevideo-dynamic-ast';

const files = [
    { path: 'src/index.ts', content: '...' },
    { path: 'src/utils/someutil.ts', content: '...' },
    { path: 'src/components/MyComponent.tsx', content: '...' }
];

const results = await parseProject(files);
console.log(results);

// Output:
// {
//     "projects": [
//         {
//             "language": "TypeScript"
//             "errors": [...]
//         },
//     ]
// }
```

## Supported Languages

- TypeScript (using ts-morph)
- C# (using dotnet CLI)
- Go (using go CLI)

## Requirements

- Node.js >= 16
- TypeScript >= 4.0.0
- For C# parsing: .NET SDK
- For Go parsing: Go toolchain

## Development

Install dependencies:

```bash
npm install
```

Build:

```bash
npm run build
```

Test:

```
npm test
```
npm package: @fullstackcraftllc/codevideo-frontend
Description: The frontend engine to create videos on codevideo.io
Author: Chris Frewin
Latest version: 1.2.0

# codevideo-frontend

<img src="https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-frontend"/>

The frontend engine used to create videos on [https://codevideo.io](https://codevideo.io)

## GitHub Pages Example

View a React example of `codeToVideo` in action [on the example site](https://codevideo.github.io/codevideo-frontend).

## Get Started

Install this package:

```shell
npm install --save @fullstackcraftllc/codevideo-frontend
```

This will also install the required dependency @fullstackcraftllc/codevideo-core

Given the following HTML / JSX markup:

```html
<canvas id="canvas" />
```

Import and call `codeToVideo`:

```ts
import { codeToVideo, MimicTypos } from "@fullstackcraftllc/codevideo-frontend";

// define video parameters
const fps = 60;
const mimeType = "video/webm";
const codec = "codecs=vp9";

// get canvas and setup media recorder
const canvas = document.getElementById("canvas") as HTMLCanvasElement;

const { videoUrl, error } = await codeToVideo(
  canvas,
  fps,
  mimeType,
  codec,
  1920,
  1080,
  "print('hello world!')",
  "python",
  ["red", "blue"],
  MimicTypos.NEVER
);
if (error) {
  // handle error
  console.error(error);
}
// No error, so we can do something with videoUrl.

// In this example, create a video element, set its source, and append it to a container

// Create the video element
const video = document.createElement("video");

// Set the video's src attribute to the URL of a video file
video.src = videoUrl;

// Set other useful attributes
video.id = "video";
video.height = 960;
video.width = 540;
video.controls = true;
video.autoplay = true;

// Append the video element to the container div
const container = document.getElementById("container");
if (container) {
  container.appendChild(video);
}
```

The canvas doesn't even have to be visible on the page. It can be off-screen or in a hidden div.

Happy video making!

## For Developers

1. Clone this repository:

```bash
git clone https://github.com/codevideo/codevideo-frontend.git
```

2. Install dependencies:

```bash
npm install
```

3. Run the tests:

```bash
npm test
```

4. Optionally, run the example site locally:

```bash
cd example
npm install
npm start
```

## Deploys

Deploys are run with Circle CI. Merging to the `main` branch will trigger first tests and code coverage, then packaging. If this all works, this triggers a merge from `main` to `release`, where it is finally published to the `release` branch. You can see all these CI/CD processes in `.circleci/config.yml` directory.

## Publishing

This package can only be published when logged in as the @fullstackcraftllc user (really a note for Chris to himself more than anything).
npm package: @fullstackcraftllc/codevideo-html-gen
Description: Generates a standalone HTML file for a time travelable IDE experience.
Author: Chris Frewin
Latest version: 1.0.0

# codevideo-html-gen

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-html-gen)

Generates a standalone HTML file for a time travelable IDE experience.

## Local development usage

Install dependencies:

```shell
npm install
```

Run the tool:

```shell
npm start
```

Modify the actions you want to generate html for directly in `src/index.ts`.
npm package: @fullstackcraftllc/codevideo-ide
Description: A React TypeScript component for a fully auditable, drivable, and replayable IDE.
Author: Chris Frewin
Latest version: 1.0.19

# @fullstackcraft/codevideo-ide

A fully event-sourced IDE for codevideo. Reconstitute a snapshot of the entire IDE at any point in time in a software project.

## Usage

Install peer dependencies:

```shell
npm install @fullstackcraft/codevideo-mouse @fullstackcraft/codevideo-types @fullstackcraft/codevideo-virtual-ide @fullstackcraft/codevideo-virtual-editor monaco-editor monaco-themes @monaco-editor/react
```

You'll also need to install tailwind. Here a link to their official docs for create-react-app, but if you are using Next.js, Remix, or others, the configuration will be different: https://v3.tailwindcss.com/docs/guides/create-react-app

Install:

```shell
npm install @fullstackcraft/codevideo-ide
```

Use it in your react app:

```tsx
import { IDE } from '@fullstackcraft/codevideo-ide';

function App() {
  return (
    <IDE />
  );
}
```
npm package: @fullstackcraftllc/codevideo-ide-react
Description: A React TypeScript component for a fully auditable, drivable, and replayable IDE written in React with @radix-ui/theme styling.
Author: Chris Frewin
Latest version: 0.0.179

# @fullstackcraftllc/codevideo-ide-react

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-ide-react)

React component for the CodeVideo IDE. Our first "nearly-complete" functionality component for replaying IDE sessions, complete with a file explorer, multiple editor tab support, and a terminal.

IT'S CRITICAL THIS SHIPS TO PRODUCTION ONLY AFTER CONFIRMING THERE ARE NO SSR ISSUES - MONACO IS INFAMOUS FOR SSR ISSUES!

Typically, this is caused by calling `monaco.editor` by accident, when the react ref `globalMonacoRef.current.editor.` can be used instead.

## Examples

There is a Gatsby site (in this repo under the `./example` folder) featuring the CodeVideoIDE component in various configurations. 

In `step` mode using the arrow keys to navigate through steps:

[https://codevideo.github.io/codevideo-ide-react/step](https://codevideo.github.io/codevideo-ide-react/step)

In `replay` mode, starting a full replay with sound as soon as the page is interacted with:

[https://codevideo.github.io/codevideo-ide-react/replay](https://codevideo.github.io/codevideo-ide-react/replay)

In `replay` mode compatible with puppeteer recording callbacks, starting a full replay with sound as soon as the page is interacted with:

[https://codevideo.github.io/codevideo-ide-react/puppeteer](https://codevideo.github.io/codevideo-ide-react/puppeteer)


## Installation

Install the package itself via npm:

```bash
npm install @fullstackcraftllc/codevideo-ide-react
```

Ensure that you include radix CSS in your project. For frameworks like Next.js, you can include this in the root of your project:

```ts
import "@radix-ui/themes/styles.css";
```

For Gatsby, add this to your `gatsby-browser.js` and `gatsby-ssr.js` files:

```js
require('@radix-ui/themes/styles.css');
```
npm package: @fullstackcraftllc/codevideo-mcp
Description: The MCP server for CodeVideo. Create software educational content using natural language.
Author: Chris Frewin
Latest version: 1.0.2

# codevideo-mcp

The MCP server for CodeVideo. 

Create software educational content using natural language.

## Examples:

Creation:

- "Build a video lesson on how to use the `useState` hook in React"
- "Can you create a video lesson compare and contrasting how to program concurrently in C#, Go, and Rust?"
- Can you give me a markdown blog post on how to use the `useState` hook in React?"

Conversion:

- "Please convert these CodeVideo JSON actions to a video"
- "Convert these CodeVideo JSON actions to a blog post"
- "Convert these CodeVideo JSON actions to HTML"
- "Can you convert this lesson to one in Spanish?"

Validation:

- "Are these CodeVideo JSON actions valid?"

## Usage with Claude Desktop

Simply drop the following into your `claude_desktop_config.json` file:

```json
{
    // ... other MCP servers
    "codevideo-mcp": {
        "command": "npx",
        "args": [
            "-y",
            "@fullstackcraftllc/codevideo-mcp@latest"
        ],
        "env": {
            "ELEVENLABS_API_KEY": "your-elevenlabs-api-key",
            "ELEVENLABS_VOICE_ID": "your-elevenlabs-voice-id"
        }
    },
    // ... other MCP servers
}
```

Be sure to restart Claude after modifying this config! 

After restarting Claude Desktop, if installation was successful, you should see `codevideo-mcp` in the list of installed MCPs:

![codevideo-mnp successfully installed in Claude Desktop](./codevideo-mcp-installed.png)

## Local Development

Clone this repository:

```shell
git clone https://github.com/codevideo/codevideo-mcp.git
```

Then, install the dependencies and build the project:

```shell
cd codevideo-mcp
npm install
npm run build
```

Then, use the following JSON to run the local version on your Claude Desktop:

```json
    // ... other MCP servers
    "codevideo-mcp": {
        "command": "npx",
        "args": [
            "tsx",
            "/path/to/your/clone/of/codevideo-mcp/src/index.ts"
        ],
        "env": {
            "PATH_TO_CODEVIDEO_CLI": "/path/to/your/codevideo-cli",
        }
    }
    // ... other MCP servers
```

## Known Issues

- Currently, creating entire courses seems to be a bit flakey and perhaps too large for the context window for Claude. We're working on refining the full course flow. Single lesson, or action array generation both seem to work well.
npm package: @fullstackcraftllc/codevideo-mouse
Description: A React TypeScript component for a fully auditable, drivable, and replayable mouse.
Author: Chris Frewin
Latest version: 1.0.18

# @fullstackcraft/codevideo-mouse

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-mouse)

Record your mouse moves to the pixel, capturing movement timing, speed, and even left-clicks, right-clicks, or highlights!

`codevideo-mouse` exports a single React component, `Mouse`, which can be used in a variety of ways to record, replay, and visualize mouse movements.

## Usage - Record Mouse Movements

```tsx
import React, { useState } from 'react';
import { IAction } from '@fullstackcraft/codevideo-types';
import { IAction } from '@fullstackcraft/codevideo-mouse';

export default App = () => {
    const [mouseActions, setMouseActions] = useState<Array<IAction>>([]);
    const [recording, setRecording] = useState(false);
    const [replaying, setReplaying] = useState(false);
    return (
        <Mouse 
            setMouseActions={setMouseActions}
            recording={recording} 
            replaying={replaying}
        />
    )
}

```

All props that can be passed to Mouse are defined in [`IMouseProps`](./src/interfaces/IMouseProps):

```typescript
interface IMouseProps {
    mouseActions?: Array<IAction>; // Optional, an array of mouse actions to replay. Useful for when the mouse is in "driver" mode, and you want to replay the mouse actions
    setMouseActions?: (actions: Array<IAction>) => void; // Optional, but essential if you need to interface with other codevideo components, such as video making and so on. This is the function to set the mouse actions as they are recorded
    setMouseX?: (x: number) => void;
    setMouseY?: (y: number) => void;
    recording?: boolean; // Whether or not to record mouse movements
    replaying?: boolean; // Whether or not to replay mouse movements
    recordWithTrail?: boolean; // Optional, whether or not to record the mouse trail
    replayWithTrail?: boolean; // Optional, whether or not to replay the mouse trail
    leftClickAnimation?: boolean; // Optional, whether or not to animate left clicks
    rightClickAnimation?: boolean; // Optional, whether or not to animate right clicks
    customLeftClickAnimation?: () => JSX.Element; // Optional, a custom animation to show for left clicks
    customRightClickAnimation?: () => JSX.Element; // Optional, a custom animation to show for right clicks
    interactWithElements?: boolean; // Optional, whether or not clicks, drags and more interact with elements on the page
}
```

(Click on the interface for the most up-to-date information - I can't guarantee that this README will always be up-to-date!)

## Run Example App

To run the example app, clone this repository and run the following commands:

```shell
cd examples
```
npm package: @fullstackcraftllc/codevideo-projections
Description: Various projections (i.e. state at given checkpoint) for the CodeVideo ecosystem.
Author: Chris Frewin
Latest version: 1.0.0

# codevideo-projections

Various projections (i.e. state at given checkpoint) for the CodeVideo ecosystem.

## Usage - Get Final Course Snapshot from Lesson

Get the final course snapshot from a lesson. This is used in validation of continuity between the end of one lesson and the start of the next lesson.

```ts
import { getFinalCourseSnapshotFromLesson } from '@fullstackcraftllc/codevideo-projections';

// assuming myLesson is of type ILesson from @fullstackcraftllc/codevideo-types
const finalSnapshot = getFinalCourseSnapshotFromLesson(myLesson);
```

## Usage - Get Course Snapshot After Actions

Gets the course snapshot after any number of actions.

```ts
import { getCourseSnapshotAfterActions } from '@fullstackcraftllc/codevideo-projections';

// assuming myActions is an array of IAction from @fullstackcraftllc/codevideo-types
const snapshot = getCourseSnapshotAfterActions(myActions);
```
npm package: @fullstackcraftllc/codevideo-react-components
Description: A series of React components used throughout the CodeVideo ecosystem.
Author: Chris Frewin
Latest version: 1.0.4

# codevideo-react-components

A series of React components used throughout the CodeVideo ecosystem.

Currently, we only have action badges which are used to represent the name of an action, color coded by domain (file-explorer, editor, terminal, etc.). These badges are used in the CodeVideo Studio as well as in our blog posts.

## Usage

Install the package using npm:

```bash
npm install @fullstackcraftllc/codevideo-react-components
```

Import the `ActionBadge` component in your React application and use it:

```tsx
import { ActionBadge } from '@fullstackcraftllc/codevideo-react-components';

const App = () => {
  return (
    <>
      <ActionBadge actionName="mouse-move-file-explorer" />
      <ActionBadge actionName="editor-type" />
      <ActionBadge actionName="terminal-type" />
    </>
  );
};
```

## Props

| Prop        | Type     | Description                                                                 |
|-------------|----------|-----------------------------------------------------------------------------|
| actionName  | string   | Required. The name of the action. This should be in the format of `domain-action`. |
| size        | string   | Optional. Size of the badge. Values: `'sm'`, `'md'` (default), or `'lg'`.   |
| variant     | string   | Optional. Badge display style. Values: `'solid'`, `'outline'`, or `'soft'` (default). |
| className   | string   | Optional. Additional CSS class names to apply to the badge.                 |
| onClick     | function | Optional. Click event handler for the badge.                                |

## Example

```tsx
import { ActionBadge } from '@fullstackcraftllc/codevideo-react-components';

const App = () => {
  return (
    <div>
      {/* Basic usage */}
      <ActionBadge actionName="editor-type" />
      
      {/* With all props */}
      <ActionBadge 
        actionName="terminal-type" 
        size="lg" 
        variant="solid" 
        className="my-custom-class" 
        onClick={() => console.log('Badge clicked!')} 
      />
      
      {/* Different domains have different colors */}
      <ActionBadge actionName="mouse-move-file-explorer" />
      <ActionBadge actionName="editor-type" />
      <ActionBadge actionName="terminal-type" />
      <ActionBadge actionName="author-comment" />
      <ActionBadge actionName="slide-next" />
      <ActionBadge actionName="external-open-browser" />
    </div>
  );
};
```
npm package: @fullstackcraftllc/codevideo-types
Description: TypeScript types for the CodeVideo ecosystem.
Author: Chris Frewin
Latest version: 2.1.33

# codevideo-types

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-types)

TypeScript types used around the CodeVideo ecosystem.

## Theory

A software course is represented by the top level interface [`ICourse`](/src/interfaces/toplevel/ICourse.ts). A course is made up of an array of [`ILessons`](./src/interfaces/toplevel/ILesson.ts), which are made up of a series of [`IActions`](./src/interfaces/toplevel/IAction.ts). Each of `ICourse`, `ILesson`, and `IAction` also have additional metadata properties.

Read more about this in [our whitepaper](https://studio.codevideo.io/pdf/CodeVideo_Framework_White_Paper.pdf).

### Domains

There are 5 domains to a codevideo action: the file explorer, the editor, the terminal, the mouse, and the author. Each of these domains has its own set of actions that can be performed with it, prefixed by `file-explorer-`, `editor-`, `terminal-`, `mouse-`, and `author-` respectively.

### IAction

[`IAction`](./src/interfaces/IAction.ts) - The bread and butter of all things CodeVideo. An action is defined by a `name` and a `value` and can perform all possible actions in the CodeVideo ecosystem. Examples include `type-editor`, `type-terminal`, `arrow-up`, `enter`, etc.

#### Action Names

A convenience array of all possible action names is available at [AllActionStrings](./src/constants/AllActionStrings.ts).

#### Action Values

Action values are always strings, but typically represent a number when they are repeatable actions such as `editor-arrow-up`, `editor-enter`, etc. These are catalogued in [RepeatableActionNames](./src/types/RepeatableActionNames.ts).

### Project Snapshots

A project snapshot is a snapshot of the state of a project at a given point in time. It is represented by the [`IProjectSnapshot`](./src/interfaces/IProjectSnapshot.ts) interface. Any instance of `IProjectSnapshot` can be derived by evaluating the actions in the project up to the point in time that the snapshot was taken.
npm package: @fullstackcraftllc/codevideo-virtual-author
Description: TypeScript class that simulates a course author.
Author: Chris Frewin
Latest version: 1.0.4

# @fullstackcraft/codevideo-virtual-author

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-virtual-author)

`codevideo-virtual-author` is a TypeScript class that simulates a virtual author that can speak. This lightweight and versatile library is ideal for building educational tools, code playgrounds, and interactive coding environments within web applications.

This library heavily relies on the types from [codevideo-types](https://github.com/codevideo/codevideo-types)

## Example Usage

```typescript
import { VirtualAuthor } from '@fullstackcraftllc/codevideo-virtual-author';

// Initialize a VirtualAuthor instance with initial existing command history
const virtualAuthor = new VirtualAuthor();

// Apply speak action to the virtual author
virtualAuthor.applyActions([
  { name: 'speak-before', value: "Hi! I'm Chris, virtual CodeVideo author!" }
]);

// Use the virtual author object
const actionsApplied = virtualAuthor.getActionsApplied();
const currentSpeechCaption = virtualAuthor.getCurrentSpeechCaption();

// Log the final code and actions applied
console.log('Actions applied:');
console.log(actionsApplied);
console.log('Current speech caption:');
console.log(currentSpeechCaption); // "Hi! I'm Chris, virtual CodeVideo author!"
```

## Available Methods

### `applyAction(action: IAction): void`

Apply a single action to the code.

### `applyActions(actions: Array<IAction>): void`

Apply a series of actions to the virtual author.

### `getActionsApplied(): Array<IAction>`

Get the actions applied to the virtual author.

### `getCurrentSpeechCaption(): string`

Get the current speech caption of the virtual author. Returns an empty string if no speech caption is set.

## Why?

Why do we need a seemingly useless class? This library, along with [`codevideo-virtual-code-block`](https://github.com/codevideo/codevideo-virtual-code-block) create the backbone of [`codevideo-virtual-code-editor`](https://github.com/codevideo/codevideo-virtual-code-editor) which are used to validate steps across the CodeVideo ecosystem. This is a small part of a larger project to create a declarative way to build, edit, and generate step by step educational video software courses.

See more at [codevideo.io](https://codevideo.io)
npm package: @fullstackcraftllc/codevideo-virtual-ide
Description: TypeScript class that simulates a full IDE.
Author: Chris Frewin
Latest version: 1.0.42

# @fullstackcraft/codevideo-virtual-ide

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-virtual-ide)

`codevideo-virtual-ide` is a TypeScript class that simulates a terminal with features like cursor navigation, text insertion, and line manipulation. It provides a flexible interface for applying various editing actions such as typing, moving the cursor, and executing commands. This lightweight and versatile library is ideal for building educational tools, code playgrounds, and interactive coding environments within web applications.

This library heavily relies on the types from [codevideo-types](https://github.com/codevideo/codevideo-types)

## Example Usage

```typescript
import { VirtualIDE } from '@fullstackcraftllc/codevideo-virtual-ide';
import { VirtualEditor } from '@fullstackcraftllc/codevideo-virtual-editor';
import { VirtualTerminal } from '@fullstackcraftllc/codevideo-virtual-terminal';
import { VirtualAuthor } from '@fullstackcraftllc/codevideo-virtual-author';

const virtualIDE = new VirtualIDE();
virtualIDE.addVirtualEditor(new VirtualEditor());
virtualIDE.addVirtualTerminal(new VirtualTerminal());
virtualIDE.addVirtualAuthor(new VirtualAuthor());

// Create a basic project structure
virtualIDE.applyAction({
  name: 'create-folder',
  value: 'src'
});

virtualIDE.applyAction({
  name: 'create-file',
  value: 'src/index.js'
});

// Add narration
virtualIDE.applyAction({
  name: 'speak-before',
  value: "Let's create a simple JavaScript program."
});

// Open and edit the file
virtualIDE.applyAction({
  name: 'click-filename',
  value: 'src/index.js'
});

virtualIDE.applyAction({
  name: 'type-editor',
  value: 'console.log("Hello, World!");'
});

// Execute in terminal
virtualIDE.applyAction({
  name: 'open-terminal',
  value: '1'
});

virtualIDE.applyAction({
  name: 'type-terminal',
  value: 'node src/index.js'
});

const courseSnapshot = virtualIDE.getCourseSnapshot();

console.log(courseSnapshot);
/* Output:
{
  editorSnapshot: {
    fileStructure: {
      src: {
        type: 'directory',
        content: '',
        collapsed: true,
        children: {
          'index.js': {
            type: 'file',
            content: 'console.log("Hello, World!");',
            language: 'js',
            caretPosition: { row: 0, col: 27 }
          }
        }
      }
    },
    currentFile: 'src/index.js',
    terminalContents: 'node src/index.js'
  },
  mouseSnapshot: {
    x: 0,
    y: 0,
    timestamp: 0,
    type: 'move',
    buttonStates: { left: false, right: false, middle: false },
    scrollPosition: { x: 0, y: 0 }
  },
  authorSnapshot: {
    currentSpeechCaption: ""
  }
}
*/
```

## Why?

This library is the main powerhouse used to build projections that are used to validate actions across the CodeVideo ecosystem. This is a small part of a larger project to create a declarative way to build, edit, and generate step by step educational video software courses.

See more at [codevideo.io](https://codevideo.io)
npm package: @fullstackcraftllc/codevideo-virtual-mouse
Description: TypeScript class that simulates a mouse.
Author: Chris Frewin
Latest version: 1.0.10

# @fullstackcraft/codevideo-virtual-mouse

![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-virtual-mouse)

`codevideo-virtual-mouse` is a TypeScript class that simulates a virtual mouse that can speak. This lightweight and versatile library is ideal for building educational tools, code playgrounds, and interactive coding environments within web applications.

This library heavily relies on the types from [codevideo-types](https://github.com/codevideo/codevideo-types)

## Example Usage

```typescript
import { VirtualMouse } from '@fullstackcraftllc/codevideo-virtual-mouse';

// Initialize a VirtualMouse instance with initial existing command history
const virtualMouse = new VirtualMouse();

// Apply speak action to the virtual mouse
virtualMouse.applyActions([
  { name: 'mouse-move-file-explorer', value: "1" }
]);

// Use the virtual mouse object
const currentLocation = virtualMouse.getCurrentLocation();

// Log the final code and actions applied
console.log('Current mouse location:');
console.log(currentLocation);  // "file-explorer"
```

## Why?

Why do we need a seemingly useless class? This library, along with many others create an entire event sourcing framework for the IDE. This is a small part of a larger project to create a declarative way to build, edit, and generate step by step educational video software courses.

See more at [codevideo.io](https://codevideo.io)
npm package: @fullstackcraftllc/hirl-chatbot-widget
Description: A standalone chatbot widget for Hirl Technik that can be embedded in any website
Author: FullStackCraft
Latest version: 1.0.14

# Hirl Chatbot Widget

A standalone, embeddable chatbot widget for Hirl Technik that can be easily integrated into any website.

A link to the current configuration (machine names, links, etc) can be found here: https://docs.google.com/spreadsheets/d/1Uu6nM7jXzChsT3j_rE3yrKiqqLG5lYN14mcZglmQ5Ac/edit?gid=0#gid=0

## 📦 Installation

### Via npm
```bash
npm install @fullstackcraftllc/hirl-chatbot-widget
```

### Via unpkg (CDN)
```html
<link rel="stylesheet" href="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.css">
<script src="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.js"></script>
```

### Manual Control
```html
<script>
// The widget auto-initializes, but you can control it manually
window.HirlChatbot.destroy(); // Remove the chatbot
window.HirlChatbot.init();    // Re-initialize the chatbot
</script>
```

## 🛠️ API

The widget exposes a global `HirlChatbot` object with the following methods:

### `HirlChatbot.init()`
Initializes and displays the chatbot widget.

### `HirlChatbot.destroy()`
Removes the chatbot widget from the page.

## Deploy Process

Bump the latest version in `package.json`

Build the standalone embeddable widget:

```bash
npm run build:widget
```

And publish it to npm:

```bash
npm publish --access public
```

Then, you can paste this into any 'head' section of site generators like WordPress, Jimdo, Wix, etc.:

Note if this has already been set somewhere it should 'just work' because we are using the `@latest` tag in unpkg!

```html    
<!-- React Dependencies -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- Hirl Chatbot Widget -->
<link rel="stylesheet" href="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.css">
<script src="https://unpkg.com/@fullstackcraftllc/hirl-chatbot-widget@latest/dist/chatbot-widget.js"></script>
```

That's it!