@emailshepherd/cli 0.1.22 → 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.
@@ -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/>
@@ -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.
@@ -1,8 +0,0 @@
1
- {
2
- "permissions": {
3
- "allow": [
4
- "Bash(npm run typecheck:*)",
5
- "Bash(npx emailshepherd:*)"
6
- ]
7
- }
8
- }
@@ -1,6 +0,0 @@
1
- node_modules/
2
- dist/
3
- .env
4
- .DS_Store
5
-
6
- .claude/settings.local.json
@@ -1,13 +0,0 @@
1
- {
2
- "name": "{{PROJECT_NAME}}",
3
- "version": "1.0.0",
4
- "type": "module",
5
- "private": true,
6
- "scripts": {
7
- "typecheck": "tsc --noEmit"
8
- },
9
- "devDependencies": {
10
- "@emailshepherd/cli": "^0.1.0",
11
- "typescript": "^5.9.3"
12
- }
13
- }
@@ -1,6 +0,0 @@
1
- /// <reference types="vite/client" />
2
-
3
- declare module '*.liquid?raw' {
4
- const content: string;
5
- export default content;
6
- }
@@ -1,12 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "target": "ES2022",
4
- "module": "ESNext",
5
- "moduleResolution": "bundler",
6
- "strict": true,
7
- "esModuleInterop": true,
8
- "skipLibCheck": true,
9
- "noEmit": true
10
- },
11
- "include": ["src/**/*"]
12
- }