https://github.com/gridaco/code-like-ui

ui controls seamlessly embedded in code style block
https://github.com/gridaco/code-like-ui

code comment lite monaco react

Last synced: 3 days ago
JSON representation

ui controls seamlessly embedded in code style block

• Host: GitHub
• URL: https://github.com/gridaco/code-like-ui
• Owner: gridaco
• License: apache-2.0
• Created: 2021-08-04T07:48:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-16T20:45:24.000Z (almost 2 years ago)
• Last Synced: 2024-05-23T00:22:04.895Z (6 months ago)
• Topics: code, comment, lite, monaco, react
• Language: TypeScript
• Homepage: code-ui.vercel.app
• Size: 681 KB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![](./branding/cover.png)

# @code-ui

ui controls seamlessly embedded in code style block

## What is it?

![](branding/control-in-comment.png)

## Installation

```sh

yarn add code-like-ui

# or with npm

npm i code-like-ui

```

## Simple Usage

```tsx

import CodeLikeView from "code-like-ui";

// ...

 {

      //

  }}

/>;

//

```

```ts

export interface LanguageConfig {

  docstring: {

    start: string;

    mid?: string;

    end: string;

  };

  indent: {

    start?: number;

    mid?: number;

    end: number;

  };

}

type LanguageType = "js" | "dart" | "paython" | LanguageConfig;

const jsstyle: LanguageConfig = {

  docstring: {

    start: "/**",

    mid: "*",

    end: "*/",

  },

  indent: {

    mid: 8,

    end: 8,

  },

};

```

## Comlex Example

**creating field**

```ts

let lang = "tsx";

const onLangChange = (v) => {

    lang = v

}

const lang_field  = {

    tag: "@"

    name: "lang",

    template?: `{{ tag }}{{ name }}{{ option.name }}`

    options: [

        {

            name: "Flutter",

            value: "platform.flutter",

            description: "flutter",

        }

    ]

}

const platform_field  = {

    tag: "@"

    name: "platform",

    template: `{{ tag }}{{ name }}{{ value }} (juice.${lang})`

    options: [

        {

            name: "Flutter",

            value: "platform.flutter",

            description: "flutter",

        }

    ]

}

```

## Props

```ts

///

interface Option {

  name: string;

  value: T;

  desc?: string;

}

interface Field {

  tag: "@" | "";

  name: string;

  template?: string;

  enabled?: boolean;

  // value: string

  options?: Option[];

}

```

## The design

Design resource of code-ui is [avalable here][designlink]. For edit permission, please contact us via [email protected]

### Color schemes

For more color scheme options & customization, read [docs/color-scheme.md](./docs/color-scheme.md)

## Proposals

- [Easy configurable view with json IO](https://github.com/gridaco/code-like-ui/issues/1)

## References

- [vscode-webview-ui-toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit)

- https://material-ui.com/components/selects/

[designlink]: https://www.figma.com/file/nHJQZjVwnF2dtx153MS9J1/code-ui?node-id=2%3A354