Merge pull request #5 from CodeSignal/develop

General cleanup of template

Author: danil-nizamov

AGENTS.md

@@ -35,18 +35,6 @@ This template provides:
 
 ## Key Conventions
 
-### Status Messages
-
-Use these exact status messages for consistency:
-
-- "Ready" - Application loaded successfully
-- "Loading..." - Data is being loaded
-- "Saving..." - Data is being saved
-- "Changes saved" - Auto-save completed successfully
-- "Save failed (will retry)" - Server save failed, will retry
-- "Failed to load data" - Data loading failed
-- "Auto-save initialized" - Auto-save system started
-
 ### File Naming
 
 - CSS files: kebab-case (e.g., `my-app.css`)
@@ -95,7 +83,7 @@ npm install
 For detailed information about:
 - Design System usage and components
 - CSS implementation guidelines
-- JavaScript API (HelpModal, status management)
+- JavaScript API (HelpModal)
 - Component reference and examples
 - Customization options
 
@@ -124,7 +112,7 @@ When working on applications built with this template:
 
 1. **Always reference BESPOKE-TEMPLATE.md** for template-specific
    implementation details
-2. **Follow the conventions** listed above for status messages and file naming
+2. **Follow the conventions** listed above for file naming
 3. **Use Design System components** directly - see BESPOKE-TEMPLATE.md for
    component classes and usage
 4. **Maintain consistency** with the template's structure and patterns

BESPOKE-TEMPLATE.md

@@ -21,7 +21,7 @@ Every application should include these files in the following order:
    - components/tags/tags.css
 3. bespoke-template.css (template-specific layout, utilities, temporary
    components)
-4. help-modal.js (help system)
+4. components/modal/modal.css and modal.js (design system; used for help modal)
 5. app.js (application logic)
 6. server.js (server)
 
@@ -79,15 +79,8 @@ Every application should include these files in the following order:
 
 1. HELP MODAL SETUP:
    a) Create help content using help-content-template.html as reference
-   b) Initialize HelpModal with:
-      - triggerSelector: `'#btn-help'`
-      - content: your help content (string or loaded from file)
-      - theme: `'auto'`
-
-2. STATUS MANAGEMENT:
-   a) Use the provided setStatus() function for status updates
-   b) Update status for: loading, saving, errors, user actions
-   c) Keep status messages concise and informative
+   b) Use the design system Modal: `Modal.createHelpModal({ title: 'Help', content, triggerSelector: '#btn-help' })`
+   c) Include `modal.css` and import `Modal` from `design-system/components/modal/modal.js`
 
 ## Error Handling Requirements
 
@@ -98,18 +91,6 @@ Every application should include these files in the following order:
 5. HANDLE localStorage quota exceeded errors
 6. VALIDATE data before saving operations
 
-## Status Message Conventions
-
-Use these EXACT status messages for consistency:
-
-- "Ready" - Application loaded successfully
-- "Loading..." - Data is being loaded
-- "Saving..." - Data is being saved
-- "Changes saved" - Auto-save completed successfully
-- "Save failed (will retry)" - Server save failed, will retry
-- "Failed to load data" - Data loading failed
-- "Auto-save initialized" - Auto-save system started
-
 ## File Naming Conventions
 
 1. CSS files: kebab-case (e.g., my-app.css, task-manager.css)
@@ -155,7 +136,6 @@ when the design system adds them.
 <div class="bespoke">
   <header class="header">
     <h1>My App</h1>
-    <div class="status">Ready</div>
     <button class="button button-text">Help</button>
   </header>
 
@@ -188,7 +168,6 @@ when the design system adds them.
 ```html
 <header class="header">
   <h1>App Title</h1>
-  <div class="status">Status message</div>
   <button class="button button-text">Help</button>
 </header>
 ```
@@ -223,13 +202,7 @@ when the design system adds them.
 ```html
 <!-- Vertical label -->
 <label>Field Name
-  <input type="text" />
-</label>
-
-<!-- Horizontal label -->
-<label class="row">
-  <input type="checkbox" />
-  Checkbox Label
+  <input type="text" class="input" />
 </label>
 ```
 
@@ -239,49 +212,41 @@ when the design system adds them.
 <!-- Text input -->
 <input type="text" class="input" placeholder="Enter text" />
 
-<!-- Select dropdown -->
+<!-- Select dropdown - native select styling is custom; design system has a Dropdown JS component for richer dropdowns -->
 <select class="input">
   <option>Option 1</option>
   <option>Option 2</option>
 </select>
 
-<!-- Checkbox -->
-<input type="checkbox" />
-
-<!-- Radio buttons -->
-<div class="radio-group">
-  <label class="row">
-    <input type="radio" name="option" value="a" />
-    Option A
-  </label>
-  <label class="row">
-    <input type="radio" name="option" value="b" />
-    Option B
-  </label>
-</div>
+<!-- Checkbox (design system component) -->
+<label class="input-checkbox">
+  <input type="checkbox" />
+  <span class="input-checkbox-box"><span class="input-checkbox-checkmark"></span></span>
+  <span class="input-checkbox-label">Checkbox Label</span>
+</label>
 
-<!-- Horizontal radio group -->
-<div class="radio-group horizontal">
-  <label class="row">
-    <input type="radio" name="size" value="small" />
-    Small
-  </label>
-  <label class="row">
-    <input type="radio" name="size" value="large" />
-    Large
-  </label>
-</div>
+<!-- Radio buttons (design system component) -->
+<label class="input-radio">
+  <input type="radio" name="option" value="a" />
+  <span class="input-radio-circle"><span class="input-radio-dot"></span></span>
+  <span class="input-radio-label">Option A</span>
+</label>
+<label class="input-radio">
+  <input type="radio" name="option" value="b" />
+  <span class="input-radio-circle"><span class="input-radio-dot"></span></span>
+  <span class="input-radio-label">Option B</span>
+</label>
 
 <!-- Textarea -->
-<textarea placeholder="Enter your message here..."></textarea>
+<textarea class="input" placeholder="Enter your message here..."></textarea>
 
-<!-- Toggle switch -->
+<!-- Toggle switch - custom component; no design system equivalent yet. Add body-xsmall for typography -->
 <label class="row">
   <div class="toggle">
     <input type="checkbox" class="toggle-input" />
     <span class="toggle-slider"></span>
   </div>
-  <span class="toggle-label">Enable notifications</span>
+  <span class="toggle-label body-xsmall">Enable notifications</span>
 </label>
 ```
 
@@ -300,83 +265,26 @@ when the design system adds them.
 <a href="#" class="button button-text">Link Button</a>
 ```
 
-### Modal Components
+### Modal (Help)
 
-#### Basic Modal
+Use the design system Modal component for help/documentation:
 
-```html
-<div class="modal">
-  <div class="modal-backdrop"></div>
-  <div class="modal-content">
-    <div class="modal-header">
-      <h2>Modal Title</h2>
-      <button class="modal-close">&times;</button>
-    </div>
-    <div class="modal-body">
-      <p>Modal content goes here</p>
-    </div>
-  </div>
-</div>
-```
-
-## Customization
-
-### CSS Custom Properties
-
-You can override any CSS custom property to customize the appearance:
-
-```css
-.bespoke {
-  /* Override colors */
-  --bespoke-bg: #f0f0f0;
-  --bespoke-fg: #333333;
-  --bespoke-accent: #ff6b6b;
+```javascript
+import Modal from './design-system/components/modal/modal.js';
 
-  /* Override spacing */
-  --bespoke-space-lg: 1.5rem;
-
-  /* Override border radius */
-  --bespoke-radius-lg: 12px;
-}
+const helpModal = Modal.createHelpModal({
+  title: 'Help',
+  content: document.querySelector('#help-content').content.cloneNode(true),
+  triggerSelector: '#btn-help'
+});
+helpModal.open();
 ```
 
-### Available Custom Properties
-
-#### Colors
-
-- `--bespoke-bg`: Background color
-- `--bespoke-fg`: Text color
-- `--bespoke-muted`: Muted text color
-- `--bespoke-box`: Container/surface background
-- `--bespoke-stroke`: Border color
-- `--bespoke-danger`: Error/danger color
-- `--bespoke-accent`: Accent/primary color
-- `--bespoke-control-bg`: Input/button background
-- `--bespoke-control-border`: Input/button border
-- `--bespoke-control-focus`: Focus ring color
-
-#### Spacing
+Include `modal.css` and `modal.js` in your app. See `client/design-system/components/modal/README.md` for full API.
 
-- `--bespoke-space-xs`: 0.25rem
-- `--bespoke-space-sm`: 0.5rem
-- `--bespoke-space-md`: 0.75rem
-- `--bespoke-space-lg`: 1rem
-- `--bespoke-space-xl`: 1.5rem
-- `--bespoke-space-2xl`: 2rem
-
-#### Border Radius
-
-- `--bespoke-radius-sm`: 4px
-- `--bespoke-radius-md`: 6px
-- `--bespoke-radius-lg`: 8px
-- `--bespoke-radius-xl`: 12px
-
-#### Shadows
+## Customization
 
-- `--bespoke-shadow-sm`: Small shadow
-- `--bespoke-shadow-md`: Medium shadow
-- `--bespoke-shadow-lg`: Large shadow
-- `--bespoke-shadow-xl`: Extra large shadow
+Customize via design system CSS variables (`--Colors-*`, `--UI-Spacing-*`, `--Fonts-*`, `--UI-Radius-*`). See design system files for available tokens.
 
 ## Theme Support
 
@@ -394,7 +302,6 @@ between light and dark themes. No additional configuration is needed.
   <header class="header">
     <h1>DB Schema Designer</h1>
     <button id="btn-save" class="button button-primary">Save</button>
-    <div class="status">Ready</div>
     <button class="button button-text">Help</button>
   </header>
 

README.md

@@ -14,7 +14,7 @@ This template uses the CodeSignal Design System located in `client/design-system
 ### 2. `client/bespoke-template.css`
 Template-specific CSS providing:
 - Layout components (header, sidebar, main-layout)
-- Utility classes (row, spacer, status)
+- Utility classes (row, spacer)
 - Temporary components (modals, form elements) - will be replaced when design system adds them
 
 ### 3. `client/index.html`