Skip to content

Commit

Permalink
Merge pull request #8 from arshad-yaseen/refactor/logics
Browse files Browse the repository at this point in the history
Update Logics
  • Loading branch information
arshad-yaseen authored Jul 4, 2024
2 parents 1200661 + a68812a commit 21fbd91
Show file tree
Hide file tree
Showing 54 changed files with 1,801 additions and 5,371 deletions.
24 changes: 0 additions & 24 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,6 @@ Then, run:
pnpm dev:test
```

#### Adding or Editing Themes

##### Add a Theme

To add a new theme to Monacopilot:

1. Add a VS Code-compatible theme JSON file to the `themes` directory at the root of the project.
2. Run the `pnpm generate-themes` script. This script automatically converts the added VS Code theme to a Monaco Editor compatible theme and updates the `Theme` type declaration with the new theme name.

If you are unfamiliar with what a VS Code theme JSON is, here is an example: [VS Code Theme JSON](https://github.com/codesandbox/vscode-theme/blob/main/themes/codesandbox-dark.json).

##### Edit an Existing Theme

To edit an existing theme:

1. Modify the desired theme's JSON file located in the `themes` directory at the project root.
2. Run `pnpm generate-themes` to apply the changes.

```bash
pnpm generate-themes
```

This command will read the theme you added/edited and automatically generate Monaco Editor-compatible theme data as if by magic. Additionally, it will automatically add the theme name to the theme type if you've added a new theme.

#### Contributing to the Documentation

If you wish to contribute to the documentation, use the following command:
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Monacopilot

Extended Monaco Editor with AI auto-completion and new themes for React.
Extended [Monaco Editor](https://microsoft.github.io/monaco-editor/) with AI auto-completion, inspired by [GitHub Copilot](https://github.com/features/copilot/).

## Documentation

Expand Down
26 changes: 3 additions & 23 deletions docs/pages/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {

# Getting Started

**Monacopilot** is a wrapper for the Monaco Editor, providing AI-powered autocompletion and an array of new themes for React. Similar to GitHub Copilot, but for Monaco Editor.
**Monacopilot** provides AI autocompletion for Monaco Editor in React, inspired by GitHub Copilot.

### Installation

Expand Down Expand Up @@ -46,35 +46,15 @@ function App() {
}
```

The above example demonstrates how to integrate Monacopilot into a simple React application.

### Themes

Monacopilot offers a wide range of themes for customizing your editor. You can apply a theme by passing the `theme` prop to the MonaCopilot component:

```jsx {8}
import MonaCopilot from "monacopilot";

function App() {
return (
<MonaCopilot
value="console.log('Hello, world!')"
language="javascript"
theme="github-light"
/>
);
}
```

In this example, the `github-light` theme is applied to the editor. Numerous other themes are available for you to explore.
The above example demonstrates basic usage of Monacopilot. The `value` prop is used to set the initial value of the editor, and the `language` prop is used to specify the language of the editor.

### Advanced Usage

Monacopilot, being a wrapper around `@monaco-editor/react`, supports all the properties and import statements used with `@monaco-editor/react`. For more detailed information, refer to the [@monaco-editor/react documentation](https://github.com/suren-atoyan/monaco-react/blob/master/README.md).

### Next Steps

Now that you have Monacopilot installed and running, it functions like a standard Monaco Editor with added theme capabilities. If you are interested in utilizing the AI auto-completion feature, proceed to the Copilot Setup guide.
Now that you have Monacopilot installed and running, it functions like a standard Monaco Editor. If you are interested in utilizing the AI auto-completion, proceed to the Copilot Setup guide.

<div className="h-4" />
<Card title="Copilot Setup" href="/docs/copilot/setup" icon={<MagicWandIcon />} />
4 changes: 1 addition & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
],
"scripts": {
"build": "tsup src/index.ts",
"build:themes": "pnpm -C themes build",
"dev": "tsup src/index.ts --watch",
"dev:test": "pnpm -C test dev",
"dev:docs": "pnpm -C docs dev",
Expand All @@ -19,8 +18,7 @@
"lint:test": "pnpm -C test lint",
"format": "prettier --write .",
"pre-commit": "pnpm type-check && pnpm lint && pnpm lint:test",
"release": "release-it",
"release:themes": "pnpm -C themes release"
"release": "release-it"
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
Expand Down
Loading

0 comments on commit 21fbd91

Please sign in to comment.