Ely GPUI Components

https://github.com/zacharyzhang-ny/ely-gpui-components
Admin
Ely GPUI Components is a component library for GPUI, the Rust UI framework behind Zed, featuring...
Tokens:59,347
Snippets:631
Trust Score:9.2
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Run gallery example

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/CONTRIBUTING.md

Run the gallery example to view all chapters in light and dark mode, or use the --page flag to open a specific chapter page (e.g., forms).

```sh
cargo run --example gallery              # every chapter, light and dark
cargo run --example gallery -- --page forms
```

--------------------------------

### Run the gallery example with cargo and build for the browser

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/README.md

Run the gallery example locally, optionally targeting a specific page or capturing screenshots. The capture option requires macOS. The browser build uses the ELY_GALLERY_ASSETS environment variable.

```sh
cargo run --example gallery
cargo run --example gallery -- --page buttons
cargo run --example gallery -- --capture shots   # macOS: PNG of every page, light and dark
ELY_GALLERY_ASSETS=https://example.com/gallery/assets/ scripts/web.sh dist   # for the browser
```

--------------------------------

### Run the first window with cargo run

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/frontend/src/docs/installation.md

Runs the project after copying the first window example into src/main.rs. A window opens with a counter and a Press button.

```sh
cargo run
```

--------------------------------

### Build and deploy the frontend website with pnpm

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/README.md

Build and deploy the website frontend. The gallery command compiles the wasm gallery into public/gallery, and the deploy command publishes to Cloudflare via wrangler.

```sh
cd frontend
pnpm install
ELY_GALLERY_ASSETS=https://<site>/gallery/assets/ pnpm gallery   # the wasm gallery, into public/gallery
pnpm dev        # or: pnpm build && pnpm preview
node scripts/og.mjs   # with pnpm preview up: public/og.png from the hero
pnpm deploy     # Cloudflare, through wrangler
```

--------------------------------

### IconTheme::apply(cx)

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/frontend/src/docs/icons.md

Applies the icon theme to every window from then on and repaints.

```APIDOC
## IconTheme::apply(cx)

### Description
Applies the icon theme to every window from then on and repaints.

### Method
Instance method

### Parameters
- **cx** (Context) - Required - The GPUI context.

### Returns
Nothing.

### Usage
```rust
let theme = IconTheme::default().name("Cargo.toml", IconName::Package);
theme.apply(cx);
```
```

--------------------------------

### Check the WebAssembly build

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/frontend/src/docs/webassembly.md

Adds the wasm32-unknown-unknown target and runs a cargo check with RUSTC_BOOTSTRAP=1 because gpui_web uses an unstable feature for its threads.

```sh
rustup target add wasm32-unknown-unknown
RUSTC_BOOTSTRAP=1 cargo check --lib --target wasm32-unknown-unknown
```

--------------------------------

### Initialize ely-gpui-component and set dark theme in Rust

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/README.md

Initialize the component library in a GPUI application. The init function registers fonts and the theme, and panics if Assets is not wired into the application. Theme::set_mode selects the dark mode.

```rust
use ely_gpui_component::{Assets, theme::{Mode, Theme}};
use gpui::App;

fn main() {
    gpui_platform::application().with_assets(Assets).run(|cx: &mut App| {
        ely_gpui_component::init(cx);
        Theme::set_mode(Mode::Dark, cx);
    });
}
```

--------------------------------

### Run project checks and website tests

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/CONTRIBUTING.md

Run the project checks and, when modifying the website, run the frontend test, build, and end-to-end commands.

```sh
scripts/check.sh                         # fmt, clippy, tests, the web lint, house rules
cd frontend && pnpm test && pnpm build && pnpm e2e   # when you touch the website
```

--------------------------------

### Popover::new(id, label, content)

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/frontend/src/docs/overlays.md

Constructor for a popover overlay that opens a panel under a button.

```APIDOC
## `Popover::new(id, label, content)`

### Description
Creates a button that opens a panel under it, or over it when only above has room. A press outside or Escape closes it, and Tab stays inside. `content` runs only while the panel is open.

### Method
Constructor

### Parameters
- `id` - The identifier for the popover.
- `label` - The label for the button.
- `content` - The content to display when the panel is open.

### Variants
- `Popover::with_opener` - Opens the panel from an element of the app's own.
```

--------------------------------

### I18n::new

Source: https://github.com/zacharyzhang-ny/ely-gpui-components/blob/main/frontend/src/docs/i18n.md

Creates a new I18n instance with the given locale tag as the initial locale.

```APIDOC
## I18n::new(tag)

### Description
Starts with the locale on show.

### Method
Constructor

### Parameters
- **tag** (string) - Required - The locale tag, e.g., "en-US".

### Returns
An `I18n` instance.

### Example
```rust
let i18n = I18n::new("en-US");
```
```
Tokens:
Raw