+ `,
+ hourglass: `
+
+ `,
+ expirationTimerUpdate: `
+ {{ content }}
+ `,
+};
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
new file mode 100644
index 0000000000..3129936b67
--- /dev/null
+++ b/ts/components/conversation/Message.md
@@ -0,0 +1,6 @@
+
+```jsx
+
+
+
+```
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
new file mode 100644
index 0000000000..8a349f47c4
--- /dev/null
+++ b/ts/components/conversation/Message.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+
+/**
+ * A placeholder Message component, giving the structure of a plain message with none of
+ * the dynamic functionality. We can build off of this going forward.
+ */
+export class Message extends React.Component<{}, {}> {
+ public render() {
+ return (
+
+
+
+
+
+
+
+ Hi there. How are you doing? Feeling pretty good? Awesome.
+
+
+
+
+ 1 minute ago
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/ts/components/conversation/Reply.md b/ts/components/conversation/Reply.md
new file mode 100644
index 0000000000..e3a5855c0e
--- /dev/null
+++ b/ts/components/conversation/Reply.md
@@ -0,0 +1,2 @@
+
+This is Reply.md.
diff --git a/ts/components/conversation/Reply.tsx b/ts/components/conversation/Reply.tsx
new file mode 100644
index 0000000000..58ff7773e0
--- /dev/null
+++ b/ts/components/conversation/Reply.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+interface Props { name: string; }
+
+interface State { count: number; }
+
+export class Reply extends React.Component {
+ public render() {
+ return (
+
Placeholder
+ );
+ }
+}
diff --git a/ts/components/utility/BackboneWrapper.md b/ts/components/utility/BackboneWrapper.md
new file mode 100644
index 0000000000..7f6c3b56e6
--- /dev/null
+++ b/ts/components/utility/BackboneWrapper.md
@@ -0,0 +1,20 @@
+Rendering a real `Whisper.MessageView` using `` and
+``.
+
+```jsx
+const model = new Whisper.Message({
+ type: 'outgoing',
+ body: 'text',
+ sent_at: Date.now() - 5000,
+})
+const View = Whisper.MessageView;
+const options = {
+ model,
+};
+
+
+
+```
diff --git a/ts/components/utility/BackboneWrapper.tsx b/ts/components/utility/BackboneWrapper.tsx
new file mode 100644
index 0000000000..b66e226857
--- /dev/null
+++ b/ts/components/utility/BackboneWrapper.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+interface Props {
+ /** The View class, which will be instantiated then treated like a Backbone View */
+ readonly View: BackboneViewConstructor;
+ /** Options to be passed along to the view when constructed */
+ readonly options: object;
+}
+
+interface BackboneView {
+ remove: () => void;
+ render: () => void;
+ el: HTMLElement;
+}
+
+interface BackboneViewConstructor {
+ new (options: object): BackboneView;
+}
+
+/**
+ * Allows Backbone Views to be rendered inside of React (primarily for the Style Guide)
+ * while we slowly replace the internals of a given Backbone view with React.
+ */
+export class BackboneWrapper extends React.Component {
+ protected el: Element | null = null;
+ protected view: BackboneView | null = null;
+
+ public componentWillUnmount() {
+ this.teardown();
+ }
+
+ public shouldComponentUpdate() {
+ // we're handling all updates manually
+ return false;
+ }
+
+ public render() {
+ return ;
+ }
+
+ protected setEl = (element: HTMLDivElement | null) => {
+ this.el = element;
+ this.setup();
+ }
+
+ protected setup = () => {
+ const { el } = this;
+ const { View, options } = this.props;
+
+ if (!el) {
+ return;
+ }
+ this.view = new View(options);
+ this.view.render();
+
+ // It's important to let the view create its own root DOM element. This ensures that
+ // its tagName property actually takes effect.
+ el.appendChild(this.view.el);
+ }
+
+ protected teardown() {
+ if (!this.view) {
+ return;
+ }
+
+ this.view.remove();
+ this.view = null;
+ }
+}
diff --git a/ts/test/ConversationContext.md b/ts/test/ConversationContext.md
new file mode 100644
index 0000000000..6a314e44e4
--- /dev/null
+++ b/ts/test/ConversationContext.md
@@ -0,0 +1,8 @@
+
+The simplest example of using the `` component:
+
+```jsx
+
+
Just a plain bit of text
+
+```
diff --git a/ts/test/ConversationContext.tsx b/ts/test/ConversationContext.tsx
new file mode 100644
index 0000000000..d05f32e502
--- /dev/null
+++ b/ts/test/ConversationContext.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+
+interface Props {
+ /**
+ * Corresponds to the theme setting in the app, and the class added to the root element.
+ */
+ theme: 'ios' | 'android' | 'android-dark';
+}
+
+/**
+ * Provides the parent elements necessary to allow the main Signal Desktop stylesheet to
+ * apply (with no changes) to messages in the Style Guide.
+ */
+export class ConversationContext extends React.Component {
+ public render() {
+ const { theme } = this.props;
+
+ return (
+