@etools-plugin/devtools

Developer tools plugin for ETools - A collection of useful developer utilities with a modern UI that follows etools design system.

Features

- JSON Formatter: Format and validate JSON data
- Base64 Encoder/Decoder: Encode and decode Base64 strings
- URL Encoder/Decoder: Encode and decode URL components
- Hash Generator: Generate MD5, SHA-1, and SHA-256 hashes
- Timestamp Converter: Convert Unix timestamps to readable dates
- UUID Generator: Generate random UUID v4
- Interactive UI: Visual interface using etools design system (local plugin only)

Installation

This plugin is available in the ETools Plugin Marketplace.

1. Open ETools
2. Go to Settings → Plugins
3. Search for "Developer Tools"
4. Click Install

Usage

$3

#### JSON Formatter

``
json: {"name":"test","value":123}
`

#### Base64 Encode

`
base64: Hello World
`

#### Base64 Decode

`
base64: SGVsbG8gV29ybGQ=
`

#### URL Encode

`
url: hello world
`

#### Hash Generator

`
hash:md5 mytext
hash:sha1 mytext
hash:sha256 mytext
`

#### Timestamp Converter

`
ts: 1704067200
`

#### UUID Generator

`
uuid:
`

$3

When installed as a local plugin, this plugin provides a visual interface:

`
ui:
`

The UI features:
- Tool selection grid with icons and descriptions
- Real-time input/output display
- Visual feedback with badges and status indicators
- Quick action buttons for common use cases
- Consistent design using etools design tokens

UI Design

The plugin UI follows etools design system guidelines:

$3

- Uses etools color system for consistency
- Implements proper spacing and typography scales
- Follows border radius and shadow standards
- Responsive layout with proper transitions

$3

- Built with etools UI components (PluginUIContainer, Button, Input, Card, Badge)
- Proper state management and error handling
- Accessible keyboard navigation
- Loading states and visual feedback

$3

- CSS Modules for component isolation
- Design token variables for theming
- Support for light and dark modes
- Smooth animations and transitions

Development

$3

- Node.js 18+
- npm or pnpm

$3

`bash


Install dependencies

npm install

Build without UI

npm run build

Build with UI

npm run build:ui

Watch mode (without UI)

npm run dev

Watch mode (with UI)

npm run dev:ui
`

$3

`
etools-devtools-plugin/
├── src/
│ ├── index.ts # Main plugin logic
│ ├── ui.tsx # React UI component
│ ├── ui.css # Component styles
│ └── types.ts # Type definitions
├── dist/ # Build output
├── package.json
├── tsconfig.json
└── README.md
`

$3

The UI component uses:
- React 18+ for component rendering
- etools plugin-sdk for UI components
- CSS Modules + Design Tokens for styling
- TypeScript for type safety

When building with UI support:
1. Ensure React is installed as a peer dependency
2. Use npm run build:ui to include UI components
3. The getUIComponent() function allows dynamic loading

$3

`bash


Build without UI (NPM package)

npm run build

Output: dist/index.mjs, dist/index.d.mts

Build with UI (local plugin)

npm run build:ui

Output: Includes dist/ui.mjs, dist/ui.d.mts

`

Design Guidelines

When contributing to this plugin:

1. Follow etools Design System
- Use design tokens from design-tokens.css
- Match spacing, typography, and color scales
- Maintain consistent component styling

2. Component Usage
- Prefer etools UI components over custom ones
- Use PluginUIContainer for consistency
- Follow component variant patterns

3. Accessibility
- Ensure keyboard navigation works
- Provide proper ARIA labels
- Maintain focus management

4. Performance
- Lazy load UI components
- Use React.memo where appropriate
- Optimize re-renders

License

MIT © ETools Team

Support

- GitHub Issues: https://github.com/etools-team/devtools-plugin/issues
- Documentation: https://github.com/etools-team/etools
- UI Guidelines: See etools/example-plugins/ui-consistency-demo/`