clapton 0.0.24 → 0.0.25

data/lib/clapton/javascripts/src/components/bold.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Bold {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Bold extends Base {
   get renderWrapper(): string {
     return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
   }
-
-  add(child: any): Bold {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/button.ts

@@ -1,25 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Button {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.attributes = attributes;
-    this.children = [];
-  }
-
-  add(child: any): Button {
-    this.children.push(child);
-    return this;
-  }
-
+export class Button extends Base {
   get renderWrapper(): string {
     return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
   }
-
-  add_action(event: string, klass: string, fn: string, options: Record<string, any> = {}): Button {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/code.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Code {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Code extends Base {
   get renderWrapper(): string {
     return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
   }
-
-  add(child: any): Code {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/component.ts

@@ -1,4 +1,4 @@
-import { Box } from "./box";
+import { Div } from "./div";
 
 export class Component {
   id: string;
@@ -14,7 +14,7 @@ export class Component {
   }
 
   get render(): any {
-    return new Box({});
+    return new Div({});
   }
 
   get renderWrapper(): string {

data/lib/clapton/javascripts/src/components/{box.spec.ts → div.spec.ts}

@@ -1,23 +1,23 @@
 import { describe, it, expect } from "vitest"
-import { Box } from "./box"
+import { Div } from "./div"
 import { Text } from "./text"
 
-describe("Box", () => {
+describe("Div", () => {
   it("returns empty string if no params", () => {
-    expect(new Box().renderWrapper).toBe("<div ></div>")
+    expect(new Div().renderWrapper).toBe("<div ></div>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Box({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
+    expect(new Div({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Box({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
-    expect(new Box({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
-    expect(new Box({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
+    expect(new Div({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
+    expect(new Div({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
+    expect(new Div({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
   })
 
   it("adds children", () => {
-    expect(new Box().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
+    expect(new Div().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
   })
 })

data/lib/clapton/javascripts/src/components/div.ts

@@ -0,0 +1,8 @@
+import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
+
+export class Div extends Base {
+  get renderWrapper(): string {
+    return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
+  }  
+}

data/lib/clapton/javascripts/src/components/element.ts

@@ -1,22 +1,16 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Element {
-  attributes: Record<string, any>;
-  children: any[];
+export class Element extends Base {
   type: string;
 
   constructor(type: string, attributes: Record<string, any> = {}) {
+    super(attributes)
     this.children = [];
     this.type = type;
-    this.attributes = attributes;
   }
 
   get renderWrapper(): string {
     return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
   }
-
-  add(child: any): Element {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/emphasis.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Emphasis {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Emphasis extends Base {
   get renderWrapper(): string {
     return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
   }
-
-  add(child: any): Emphasis {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/form.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Form {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Form extends Base {
   get renderWrapper(): string {
     return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
   }
-
-  add(child: any): Form {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/heading.ts

@@ -1,21 +1,15 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Heading {
-  attributes: Record<string, any>;
-  children: any[];
+export class Heading extends Base {
   level: number;
+
   constructor(level: number, attributes: Record<string, any> = {}) {
-    this.children = [];
+    super(attributes)
     this.level = level;
-    this.attributes = attributes;
   }
 
   get renderWrapper(): string {
     return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
   }
-
-  add(child: any): Heading {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/image.spec.ts

@@ -3,10 +3,10 @@ import { Image } from "./image"
 
 describe("Image", () => {
   it("returns empty string if no params", () => {
-    expect(new Image("https://example.com/image.png", "").renderWrapper).toBe("<img src='https://example.com/image.png' alt='' />")
+    expect(new Image({ src: "https://example.com/image.png", alt: "" }).renderWrapper).toBe("<img src='https://example.com/image.png' alt=''/>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
+    expect(new Image({ src: "https://example.com/image.png", alt: "test", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
   })
 })

data/lib/clapton/javascripts/src/components/image.ts

@@ -1,19 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Image {
-  attributes: Record<string, any>;
-  children: any[];
-  src: string;
-  alt: string;
-
-  constructor(src: string, alt: string, attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-    this.src = src;
-    this.alt = alt;
-  }
-
+export class Image extends Base {
   get renderWrapper(): string {
-    return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+    return `<img ${htmlAttributes(this.attributes)}/>`;
   }
 }

data/lib/clapton/javascripts/src/components/input.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest"
+import { Input } from "./input"
+
+describe("Input", () => {
+  it("returns empty string if no params", () => {
+    expect(new Input({}, "foo", { type: "text" }).renderWrapper).toBe("<input type='text' data-attribute='foo' value=''/>")
+  })
+
+  it("returns attributes and data attributes", () => {
+    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='text' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
+  })
+
+  it("returns attributes and data attributes with custom data attributes", () => {
+    expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='text' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
+  })
+})

data/lib/clapton/javascripts/src/components/{datetime-field.ts → input.ts}

@@ -1,25 +1,23 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class DateTimeField {
+export class Input extends Base {
   state: any;
   attribute: string;
-  attributes: Record<string, any> = {};
 
   constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
+    super(attributes)
     this.attribute = attribute;
-    this.attributes = attributes;
+    this.state = state
     this.attributes["data-attribute"] = attribute;
   }
 
   get renderWrapper(): string {
-    const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-    return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-  }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): DateTimeField {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
+    let value = this.state[this.attribute]
+    if (this.attributes.type === "datetime-local" && value) {
+      value = this.datetime_local_value(value)
+    }
+    return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
   }
 
   datetime_local_value(value: string): string {

data/lib/clapton/javascripts/src/components/link.spec.ts

@@ -4,20 +4,20 @@ import { Text } from "./text"
 
 describe("Link", () => {
   it("returns empty string if no params", () => {
-    expect(new Link("").renderWrapper).toBe("<a href='' ></a>")
+    expect(new Link({ href: "" }).renderWrapper).toBe("<a href=''></a>")
   })
 
   it("returns attributes and data attributes", () => {
-    expect(new Link("#").add(new Text("")).renderWrapper).toBe(`<a href='#' ></a>`)
+    expect(new Link({ href: "#" }).add(new Text("")).renderWrapper).toBe(`<a href='#'></a>`)
   })
 
   it("returns attributes and data attributes with custom data attributes", () => {
-    expect(new Link("#", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
-    expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
-    expect(new Link("#", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<a href='#' id='1' data-foo-baz='qux' data-foo-quux='corge'></a>`)
+    expect(new Link({ href: "#", id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
+    expect(new Link({ href: "#", id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
+    expect(new Link({ href: "#", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<a href='#' id='1' data-foo-baz='qux' data-foo-quux='corge'></a>`)
   })
 
   it("adds children", () => {
-    expect(new Link("#").add(new Text("Hello")).renderWrapper).toBe(`<a href='#' >Hello</a>`)
+    expect(new Link({ href: "#" }).add(new Text("Hello")).renderWrapper).toBe(`<a href='#'>Hello</a>`)
   })
 })

data/lib/clapton/javascripts/src/components/link.ts

@@ -1,21 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Link {
-  attributes: Record<string, any>;
-  children: any[];
-  href: string;
-  constructor(href: string, attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-    this.href = href;
-  }
-
+export class Link extends Base {
   get renderWrapper(): string {
-    return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-  }
-
-  add(child: any): Link {
-    this.children.push(child);
-    return this;
+    return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
   }
 }

data/lib/clapton/javascripts/src/components/list-item.ts

@@ -1,19 +1,7 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class ListItem {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
-  add(child: any): this {
-    this.children.push(child);
-    return this;
-  }
-
+export class ListItem extends Base {
   get renderWrapper(): string {
     return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
   }

data/lib/clapton/javascripts/src/components/list.ts

@@ -1,19 +1,7 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class List {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
-  add(child: any): this {
-    this.children.push(child);
-    return this;
-  }
-
+export class List extends Base {
   get renderWrapper(): string {
     return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
   }

data/lib/clapton/javascripts/src/components/ordered-list.ts

@@ -1,19 +1,7 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class OrderedList {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
-  add(child: any): this {
-    this.children.push(child);
-    return this;
-  }
-
+export class OrderedList extends Base {
   get renderWrapper(): string {
     return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
   }

data/lib/clapton/javascripts/src/components/paragraph.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Paragraph {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Paragraph extends Base {
   get renderWrapper(): string {
     return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
   }
-
-  add(child: any): Paragraph {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/quote.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Quote {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Quote extends Base {
   get renderWrapper(): string {
     return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
   }
-
-  add(child: any): Quote {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/select.ts

@@ -1,23 +1,21 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
 type SelectOption = {
   value: string;
   text: string;
 };
 
-export class Select {
-  attributes: Record<string, any>;
-  children: any[];
+export class Select extends Base {
   options: SelectOption[];
   state: any;
   attribute: string;
 
   constructor(options: SelectOption[] = [], state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.children = [];
+    super(attributes)
     this.options = options;
     this.state = state;
     this.attribute = attribute;
-    this.attributes = attributes;
   }
 
   get renderWrapper(): string {

data/lib/clapton/javascripts/src/components/span.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class Span {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class Span extends Base {
   get renderWrapper(): string {
     return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
   }
-
-  add(child: any): Span {
-    this.children.push(child);
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components/text-area.ts

@@ -1,23 +1,18 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class TextArea {
+export class TextArea extends Base {
   state: any;
   attribute: string;
-  attributes: Record<string, any>;
 
   constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
-    this.state = state;
-    this.attributes = attributes;
+    super(attributes)
     this.attribute = attribute;
+    this.state = state
     this.attributes["data-attribute"] = attribute;
   }
 
   get renderWrapper(): string {
     return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
   }
-
-  add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): TextArea {
-    this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-    return this;
-  }
 }

data/lib/clapton/javascripts/src/components-for-test.ts

@@ -1,10 +1,8 @@
 import { BlockQuote } from "./components/block-quote"
-import { Box } from "./components/box"
+import { Div } from "./components/div"
 import { Bold } from "./components/bold"
 import { Button } from "./components/button"
-import { Checkbox } from "./components/checkbox"
 import { Code } from "./components/code"
-import { DateTimeField } from "./components/datetime-field"
 import { Element } from "./components/element"
 import { Embed } from "./components/embed"
 import { Emphasis } from "./components/emphasis"
@@ -17,14 +15,13 @@ import { List } from "./components/list"
 import { OrderedList } from "./components/ordered-list"
 import { Paragraph } from "./components/paragraph"
 import { Quote } from "./components/quote"
-import { RadioButton } from "./components/radio-button"
 import { Select } from "./components/select"
 import { Span } from "./components/span"
 import { Component } from "./components/component"
-import { TextField } from "./components/text-field"
+import { Input } from "./components/input"
 import { Text } from "./components/text"
 import { TextArea } from "./components/text-area"
 
 export {
-  Component, Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+  Component, Div, Text, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Input, Quote, Select, Span, Embed, Bold, TextArea
 };

data/lib/clapton/javascripts/src/components.ts

@@ -1,10 +1,8 @@
 import { BlockQuote } from "./components/block-quote"
-import { Box } from "./components/box"
+import { Div } from "./components/div"
 import { Button } from "./components/button"
 import { Bold } from "./components/bold"
-import { Checkbox } from "./components/checkbox"
 import { Code } from "./components/code"
-import { DateTimeField } from "./components/datetime-field"
 import { Element } from "./components/element"
 import { Embed } from "./components/embed"
 import { Emphasis } from "./components/emphasis"
@@ -17,14 +15,13 @@ import { List } from "./components/list"
 import { OrderedList } from "./components/ordered-list"
 import { Paragraph } from "./components/paragraph"
 import { Quote } from "./components/quote"
-import { RadioButton } from "./components/radio-button"
 import { Select } from "./components/select"
 import { Span } from "./components/span"
 import { Component } from "./components/component"
-import { TextField } from "./components/text-field"
+import { Input } from "./components/input"
 import { Text } from "./components/text"
 import { TextArea } from "./components/text-area"
 
 export const Clapton = {
-  Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
+  Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
 };

data/lib/clapton/test_helper/base.rb

@@ -12,10 +12,10 @@ module Clapton
           js += "\n"
         end
         js = js.sub("const Clapton = {
-        Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };", "const Clapton = {
-        Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
-    };")
+    Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
+};", "const Clapton = {
+    Div, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
+};")
         context = ExecJS.compile(js)
         html = context.eval("new #{component.name.camelize}(#{params.to_json}).renderWrapper")
         @page = Capybara.string(html)