@emailshepherd/cli 0.1.26 → 0.1.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +271 -467
- package/dist/templates/devWrapper.html +281 -0
- package/dist/types.d.ts +5 -289
- package/package.json +14 -10
- package/templates/AGENTS.md +0 -163
- package/templates/README.md +0 -115
- package/templates/claude/CLAUDE.md +0 -1
- package/templates/claude/settings.local.json +0 -8
- package/templates/gitignore +0 -6
- package/templates/package.json +0 -13
- package/templates/src/vite-env.d.ts +0 -6
- package/templates/tsconfig.json +0 -12
package/templates/AGENTS.md
DELETED
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
# EmailShepherd Email Design System
|
|
2
|
-
|
|
3
|
-
This project defines an Email Design System (EDS) for the EmailShepherd platform. An EDS powers the drag-and-drop email builder with reusable components.
|
|
4
|
-
|
|
5
|
-
## Core Commands
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
# Typecheck - run after any changes
|
|
9
|
-
npm run typecheck
|
|
10
|
-
|
|
11
|
-
# Validate EDS structure
|
|
12
|
-
npx emailshepherd validate
|
|
13
|
-
|
|
14
|
-
# Starts a development server with hot reload. Output is accessible in the browser at http://localhost:5173/
|
|
15
|
-
# or dist/index.html to read the output.
|
|
16
|
-
npx emailshepherd dev
|
|
17
|
-
|
|
18
|
-
# Create a new component (creates via API and generates local files)
|
|
19
|
-
npx emailshepherd create-component --name "component_name" --label "Component Label"
|
|
20
|
-
|
|
21
|
-
# See all available CLI commands
|
|
22
|
-
npx emailshepherd --help
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
**Always run `npm run typecheck` and `npx emailshepherd validate` after making changes.**
|
|
26
|
-
|
|
27
|
-
## Project Structure
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
src/
|
|
31
|
-
├── eds.ts # Main EDS configuration (required)
|
|
32
|
-
├── design_tokens.ts # Global design tokens
|
|
33
|
-
├── custom_styles.ts # Rich text custom styles
|
|
34
|
-
└── components/
|
|
35
|
-
└── <component>/
|
|
36
|
-
├── template.liquid # HTML + Liquid template
|
|
37
|
-
└── index.ts # Field definitions & config
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Component Anatomy
|
|
41
|
-
|
|
42
|
-
Each component needs:
|
|
43
|
-
|
|
44
|
-
- `template.liquid` - HTML with Liquid syntax for field references
|
|
45
|
-
- `index.ts` - Exports label, name, and field definitions
|
|
46
|
-
|
|
47
|
-
### Template Example
|
|
48
|
-
|
|
49
|
-
```html
|
|
50
|
-
<table style="background-color: {{bg_color}}">
|
|
51
|
-
<tr>
|
|
52
|
-
<td>
|
|
53
|
-
<p>{{headline}}</p>
|
|
54
|
-
{% if show_cta %}
|
|
55
|
-
<a href="{{cta_url}}">{{cta_text}}</a>
|
|
56
|
-
{% endif %}
|
|
57
|
-
</td>
|
|
58
|
-
</tr>
|
|
59
|
-
</table>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
### Referencing Fields
|
|
63
|
-
|
|
64
|
-
| Scope | Syntax |
|
|
65
|
-
|-------|--------|
|
|
66
|
-
| Local field | `{{field_name}}` |
|
|
67
|
-
| Global field (container) | `{{global_fields.field_name}}` |
|
|
68
|
-
| Design token | `{{render_context.design_tokens.colors.primary}}` |
|
|
69
|
-
| Email subject | `{{render_context.email.content.subject}}` |
|
|
70
|
-
| Email preheader | `{{render_context.email.content.preheader}}` |
|
|
71
|
-
|
|
72
|
-
## Field Types Reference
|
|
73
|
-
|
|
74
|
-
| Type | Default Value Format | Notes |
|
|
75
|
-
|------|---------------------|-------|
|
|
76
|
-
| `text` | string | Simple text input |
|
|
77
|
-
| `number` | integer or float | Numeric input |
|
|
78
|
-
| `boolean` | `true` or `false` | Toggle switch |
|
|
79
|
-
| `color` | HEX value e.g. `#007bff` | Color picker |
|
|
80
|
-
| `enum` | One of defined options | Dropdown menu |
|
|
81
|
-
| `image` | URL string | Image picker/uploader |
|
|
82
|
-
| `rich_text` | HTML string | WYSIWYG editor |
|
|
83
|
-
| `code` | string | Code editor |
|
|
84
|
-
| `url` | URL string | URL input with preview |
|
|
85
|
-
|
|
86
|
-
### Field Attributes
|
|
87
|
-
|
|
88
|
-
Required: `label`, `type`, `liquid-variable`
|
|
89
|
-
|
|
90
|
-
Optional: `hint`, `visible-if`, `default-value`, validation rules
|
|
91
|
-
|
|
92
|
-
### Field Visibility
|
|
93
|
-
|
|
94
|
-
Use `visible-if` with Liquid expressions (without `{% %}` tags):
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
visible-if: show_image == true
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## Container Component
|
|
101
|
-
|
|
102
|
-
The container is special - it wraps all emails. Its template **must** include:
|
|
103
|
-
|
|
104
|
-
```html
|
|
105
|
-
{{children}}
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
Container fields become global fields, referenced as `{{global_fields.your_field}}`.
|
|
109
|
-
|
|
110
|
-
## Rich Text Styling Classes
|
|
111
|
-
|
|
112
|
-
When styling rich text output, target these:
|
|
113
|
-
|
|
114
|
-
| Element | Tag | CSS Class |
|
|
115
|
-
|---------|-----|-----------|
|
|
116
|
-
| Paragraph | `<p>` | `es-paragraph` |
|
|
117
|
-
| Bold | `<strong>` | `es-bold` |
|
|
118
|
-
| Italic | `<em>` | `es-italic` |
|
|
119
|
-
| Bullet list | `<ul>` | `es-bullet-list` |
|
|
120
|
-
| Ordered list | `<ol>` | `es-ordered-list` |
|
|
121
|
-
| List item | `<li>` | `es-list-item` |
|
|
122
|
-
| Link | `<a>` | `es-link` |
|
|
123
|
-
|
|
124
|
-
## Liquid Tips
|
|
125
|
-
|
|
126
|
-
```html
|
|
127
|
-
<!-- Filters -->
|
|
128
|
-
{{headline | capitalize}}
|
|
129
|
-
{{price | money}}
|
|
130
|
-
|
|
131
|
-
<!-- Loops -->
|
|
132
|
-
{% assign items = csv_list | split: ',' %}
|
|
133
|
-
{% for item in items %}
|
|
134
|
-
<p>{{item}}</p>
|
|
135
|
-
{% endfor %}
|
|
136
|
-
|
|
137
|
-
<!-- Conditionals -->
|
|
138
|
-
{% if show_image %}
|
|
139
|
-
<img src="{{image_src}}" />
|
|
140
|
-
{% endif %}
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
Full Liquid reference: <https://shopify.dev/docs/storefronts/themes/liquid/reference>
|
|
144
|
-
|
|
145
|
-
## Do
|
|
146
|
-
|
|
147
|
-
- Check type definitions before defining field metadata
|
|
148
|
-
- Run typecheck and validate after every change
|
|
149
|
-
- Use design tokens for colors, spacing, typography (keeps things consistent)
|
|
150
|
-
- Use `visible-if` to hide irrelevant fields
|
|
151
|
-
- Add validation rules to enforce brand guidelines
|
|
152
|
-
- Use semantic field names that match their liquid variables
|
|
153
|
-
|
|
154
|
-
## Don't
|
|
155
|
-
|
|
156
|
-
- Manually create component directories - use `npx emailshepherd create-component` instead (components must exist in the API first)
|
|
157
|
-
- Delete or rename a field's `liquid-variable` (stored values will be lost)
|
|
158
|
-
- Reference fields from other components (each template is isolated - the exception being global fields which are accessible to all components)
|
|
159
|
-
- Hardcode colors/spacing that should be design tokens
|
|
160
|
-
|
|
161
|
-
## Documentation
|
|
162
|
-
|
|
163
|
-
Full EDS documentation: <https://emailshepherd.com/docs/articles/email_design_systems/component_builder/>
|
package/templates/README.md
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
# {{PROJECT_NAME}}
|
|
2
|
-
|
|
3
|
-
This project lets you edit your EmailShepherd Email Design System locally. You can make changes to your components and templates, preview them in your browser, and then sync your changes back to EmailShepherd.
|
|
4
|
-
|
|
5
|
-
## Development Environment
|
|
6
|
-
|
|
7
|
-
This project is written in TypeScript. For this reason we recommend using an IDE that supports TypeScript, such as VSCode, Cursor, or any other IDE that supports TypeScript. This way you will get autocomplete and error highlighting built in to help you avoid making mistakes in your component definitions.
|
|
8
|
-
|
|
9
|
-
For the best editing experience with `.liquid` files, install the [Shopify Liquid extension](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) for VS Code or Cursor, or any VSCode based IDE. This gives you syntax highlighting and autocomplete for Liquid tags.
|
|
10
|
-
|
|
11
|
-
## Project Structure
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
src/
|
|
15
|
-
├── eds.ts # Main configuration file
|
|
16
|
-
├── design_tokens.ts # Colors, fonts, spacing, and other design values
|
|
17
|
-
├── custom_styles.ts # Custom styles for rich text fields
|
|
18
|
-
├── container_component/ # The outer wrapper for all emails
|
|
19
|
-
│ ├── index.ts # Component settings and field definitions
|
|
20
|
-
│ └── template.liquid # The HTML template with Liquid tags
|
|
21
|
-
└── components/ # Your email components
|
|
22
|
-
└── <component-name>/
|
|
23
|
-
├── index.ts
|
|
24
|
-
└── template.liquid
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Getting Started
|
|
28
|
-
|
|
29
|
-
First, install the project dependencies:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
This only needs to be done once, or when dependencies change.
|
|
36
|
-
|
|
37
|
-
## Previewing Your Changes
|
|
38
|
-
|
|
39
|
-
To see your EDS in the browser while you work:
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
npx emailshepherd dev
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
This starts a local development server at <http://localhost:5173>. The page automatically refreshes whenever you save a file, so you can see your changes instantly.
|
|
46
|
-
|
|
47
|
-
You can also access the fully rendered HTML file in `dist/index.html`. This is useful for uploading to your client preview device testing tool.
|
|
48
|
-
|
|
49
|
-
## Checking for Errors
|
|
50
|
-
|
|
51
|
-
Before saving your changes to EmailShepherd, it's a good idea to check for errors:
|
|
52
|
-
|
|
53
|
-
```bash
|
|
54
|
-
# Check for TypeScript errors (typos, wrong field types, etc.)
|
|
55
|
-
npm run typecheck
|
|
56
|
-
|
|
57
|
-
# Check that your EDS structure is valid
|
|
58
|
-
npx emailshepherd validate
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
If either command shows errors, fix them before saving.
|
|
62
|
-
|
|
63
|
-
## Saving Your Changes
|
|
64
|
-
|
|
65
|
-
Once you're happy with your changes, you can save them back to EmailShepherd.
|
|
66
|
-
|
|
67
|
-
To save a single component:
|
|
68
|
-
|
|
69
|
-
```bash
|
|
70
|
-
npx emailshepherd save-component --by-name "component_name"
|
|
71
|
-
|
|
72
|
-
# OR
|
|
73
|
-
|
|
74
|
-
npx emailshepherd save-component --by-id "123"
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
To save the design tokens and custom styles:
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
npx emailshepherd save-eds
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
To save everything at once (all components + the design tokens and custom styles):
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
npx emailshepherd save-all
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## Creating New Components
|
|
90
|
-
|
|
91
|
-
To add a new component to your Email Design System, use the CLI:
|
|
92
|
-
|
|
93
|
-
```bash
|
|
94
|
-
npx emailshepherd create-component --name "component_name" --label "Component Label"
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
This creates the component in EmailShepherd and generates the local files in `src/components/`. **Do not manually create component directories** - components must be created via the API first.
|
|
98
|
-
|
|
99
|
-
## CLI
|
|
100
|
-
|
|
101
|
-
To view all available commands:
|
|
102
|
-
|
|
103
|
-
```bash
|
|
104
|
-
npx emailshepherd --help
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
## Automated Deployments (CI/CD)
|
|
108
|
-
|
|
109
|
-
If you're using GitHub Actions or another CI/CD system, you can automatically save changes when code is pushed to your main branch. Just run `npx emailshepherd save-all` as part of your deployment pipeline.
|
|
110
|
-
|
|
111
|
-
## Using AI Coding Agents
|
|
112
|
-
|
|
113
|
-
This project works well with AI coding agents like Claude Code, Cursor, GitHub Copilot, Goose, and others.
|
|
114
|
-
|
|
115
|
-
Because everything is written in TypeScript, agents get clear type information about your components and fields. When something is wrong, `npm run typecheck` and `npx emailshepherd validate` give agents immediate feedback so they can fix issues themselves. This means you can describe what you want in plain English and let the agent handle the implementation details.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
see @AGENTS.md in the project root for instructions.
|
package/templates/gitignore
DELETED
package/templates/package.json
DELETED
package/templates/tsconfig.json
DELETED