From 79f0eb8be63f85155a71852ec981ceafc1c33a5b Mon Sep 17 00:00:00 2001
From: Dominique Wirz <dominique.wirz@gmail.com>
Date: Tue, 20 Feb 2024 15:52:35 +0100
Subject: [PATCH] feat: add todo app example (#167)

Co-authored-by: Dominique Wirz <dominique@smartive.ch>
---
 packages/app/README.md                        |  9 +-
 packages/app/src/app/layout.tsx               | 17 +++-
 packages/app/src/app/navigation.tsx           | 56 ++++++++++++
 packages/app/src/app/page.tsx                 |  5 +-
 packages/app/src/app/test/[count]/page.tsx    |  8 +-
 packages/app/src/app/todo/layout.tsx          | 15 ++++
 .../app/src/app/todo/server-only/input.tsx    | 16 ++++
 .../app/src/app/todo/server-only/list.tsx     | 33 +++++++
 .../app/src/app/todo/server-only/page.tsx     | 28 ++++++
 .../app/src/app/todo/server-only/use-todo.tsx | 23 +++++
 packages/app/src/app/todo/styles.css          | 22 +++++
 packages/app/src/app/todo/wrapper/page.tsx    | 48 ++++++++++
 packages/web-components/src/components.d.ts   | 66 ++++++++++++++
 .../src/components/todo-input/todo-input.css  | 29 ++++++
 .../src/components/todo-input/todo-input.tsx  | 41 +++++++++
 .../src/components/todo-item/todo-item.css    | 88 +++++++++++++++++++
 .../src/components/todo-item/todo-item.tsx    | 41 +++++++++
 17 files changed, 529 insertions(+), 16 deletions(-)
 create mode 100644 packages/app/src/app/navigation.tsx
 create mode 100644 packages/app/src/app/todo/layout.tsx
 create mode 100644 packages/app/src/app/todo/server-only/input.tsx
 create mode 100644 packages/app/src/app/todo/server-only/list.tsx
 create mode 100644 packages/app/src/app/todo/server-only/page.tsx
 create mode 100644 packages/app/src/app/todo/server-only/use-todo.tsx
 create mode 100644 packages/app/src/app/todo/styles.css
 create mode 100644 packages/app/src/app/todo/wrapper/page.tsx
 create mode 100644 packages/web-components/src/components/todo-input/todo-input.css
 create mode 100644 packages/web-components/src/components/todo-input/todo-input.tsx
 create mode 100644 packages/web-components/src/components/todo-item/todo-item.css
 create mode 100644 packages/web-components/src/components/todo-item/todo-item.tsx

diff --git a/packages/app/README.md b/packages/app/README.md
index 82649bab..2b425472 100644
--- a/packages/app/README.md
+++ b/packages/app/README.md
@@ -4,16 +4,9 @@ This application showcases React Web Components generated using a custom output
 
 - Demonstrates side-by-side comparisons of different rendering strategies: `'wrapper'`, `'server-only'`, and `'use client';`.
 - Provides test pages with varying numbers of components (50, 100, 200, and 500) for performance evaluation.
+- A TodoMVC example basec on [vogloblinsky/web-components-benchmark](https://github.com/vogloblinsky/web-components-benchmark) to demonstrate the interactive use of `'wrapper'` and `'server-only'`.
 - Includes a Storybook environment for isolated component exploration.
 
 ## Deployment
 
 Live version: https://stencil-nextjs-example-app.vercel.app (`'wrapper'`, `'server-only'`, and `'use client';`)
-
-Test pages (`'server-only'` approach only, for performance evaluation):
-- 50 elements: https://stencil-nextjs-example-app.vercel.app/test/50
-- 100 elements: https://stencil-nextjs-example-app.vercel.app/test/100
-- 200 elements: https://stencil-nextjs-example-app.vercel.app/test/200
-- 500 elements: https://stencil-nextjs-example-app.vercel.app/test/500
-
-Storybook: https://stencil-nextjs-example-app.vercel.app/storybook/index.html (`'use client';`)
diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
index 95d25eeb..1b67e7d0 100644
--- a/packages/app/src/app/layout.tsx
+++ b/packages/app/src/app/layout.tsx
@@ -1,17 +1,24 @@
 /* eslint-disable @next/next/no-before-interactive-script-outside-document */
 import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
 import Script from 'next/script';
+import { FC, PropsWithChildren } from 'react';
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+});
 
 export const metadata: Metadata = {
   title: 'Next.js ABC Web Components App',
   description: 'This Next.js App demonstrates how to use the ABC Web Components.',
 };
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
+const RootLayout: FC<PropsWithChildren> = async ({ children }) => {
   await import('abc-web-components-react-wrapper/server');
 
   return (
-    <html lang="en">
+    <html lang="en" className={inter.className}>
       <body
         style={{
           width: '50rem',
@@ -24,8 +31,10 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       >
         <noscript>Please enable JavaScript to view this website. Especially if you use Firefox.</noscript>
         {children}
-        <Script src="./scripts/polyfills/template-shadowroot.js" strategy="beforeInteractive" />
+        <Script src="/scripts/polyfills/template-shadowroot.js" strategy="beforeInteractive" />
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/packages/app/src/app/navigation.tsx b/packages/app/src/app/navigation.tsx
new file mode 100644
index 00000000..b27d31b3
--- /dev/null
+++ b/packages/app/src/app/navigation.tsx
@@ -0,0 +1,56 @@
+import { Section } from './section';
+import Link from 'next/link';
+import { FC } from 'react';
+
+export const Navigation: FC = () => (
+  <Section
+    title="Navigation"
+    variants={[
+      {
+        title: 'Meta',
+        children: (
+          <ul style={{ listStyle: 'none', padding: 0 }}>
+            <li>
+              <Link href="/">Home</Link>
+            </li>
+            <li>
+              <Link href="/storybook/index.html">Storybook</Link>
+            </li>
+          </ul>
+        ),
+      },
+      {
+        title: 'Test Server Only Approach',
+        children: (
+          <ul style={{ listStyle: 'none', padding: 0 }}>
+            <li>
+              <Link href="/test/50">50 Elements</Link>
+            </li>
+            <li>
+              <Link href="/test/100">100 Elements</Link>
+            </li>
+            <li>
+              <Link href="/test/200">200 Elements</Link>
+            </li>
+            <li>
+              <Link href="/test/500">500 Elements</Link>
+            </li>
+          </ul>
+        ),
+      },
+      {
+        title: 'Todo App',
+        children: (
+          <ul style={{ listStyle: 'none', padding: 0 }}>
+            <li>
+              <Link href="/todo/wrapper">Wrapper Approach</Link>
+            </li>
+            <li>
+              <Link href="/todo/server-only">Server Only Approach</Link>
+            </li>
+          </ul>
+        ),
+      },
+    ]}
+  />
+);
diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx
index 95e0e849..20bdc334 100644
--- a/packages/app/src/app/page.tsx
+++ b/packages/app/src/app/page.tsx
@@ -7,10 +7,13 @@ import { ButtonWithWrapper } from '@/components/button/button-with-wrapper';
 import { DropdownClientOnly } from '@/components/dropdown/dropdown-client-only';
 import { DropdownRSC } from '@/components/dropdown/dropdown-rsc';
 import { DropdownWithWrapper } from '@/components/dropdown/dropdown-with-wrapper';
+import { FC } from 'react';
+import { Navigation } from './navigation';
 import { Section } from './section';
 
-const Page = () => (
+const Page: FC = () => (
   <main style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <Navigation />
     <Section
       title="Buttons"
       variants={[
diff --git a/packages/app/src/app/test/[count]/page.tsx b/packages/app/src/app/test/[count]/page.tsx
index 0a6c0465..3a023f84 100644
--- a/packages/app/src/app/test/[count]/page.tsx
+++ b/packages/app/src/app/test/[count]/page.tsx
@@ -1,9 +1,10 @@
+import { Navigation } from '@/app/navigation';
 import { AccordionRSC } from '@/components/accordion/accordion-rsc';
 import { ButtonRSC } from '@/components/button/button-rsc';
 import { DropdownRSC } from '@/components/dropdown/dropdown-rsc';
+import { notFound, redirect } from 'next/navigation';
 import { FC } from 'react';
 import { Section } from '../../section';
-import { notFound, redirect } from 'next/navigation';
 
 export const generateStaticParams = () => [{ count: '50' }, { count: '100' }, { count: '200' }, { count: '500' }];
 
@@ -20,9 +21,10 @@ const Page: FC<{ params: { count: string } }> = ({ params: { count: rawCount } }
 
   return (
     <main style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <Navigation />
       <header>
-        <h1>Test RSC components</h1>
-        <p>count: {count}</p>
+        <h1>Test Server Only Approach</h1>
+        <p>Components count: {count}</p>
       </header>
       {Array.from({ length: count }).map((_, index) => (
         <Section
diff --git a/packages/app/src/app/todo/layout.tsx b/packages/app/src/app/todo/layout.tsx
new file mode 100644
index 00000000..d8d26cdc
--- /dev/null
+++ b/packages/app/src/app/todo/layout.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import './styles.css';
+import { Navigation } from '../navigation';
+import { FC, PropsWithChildren } from 'react';
+
+export const metadata: Metadata = { title: 'Todo - Next.js ABC Web Components App' };
+
+const Layout: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <Navigation />
+    <div id="todo">{children}</div>
+  </>
+);
+
+export default Layout;
diff --git a/packages/app/src/app/todo/server-only/input.tsx b/packages/app/src/app/todo/server-only/input.tsx
new file mode 100644
index 00000000..aa1e0668
--- /dev/null
+++ b/packages/app/src/app/todo/server-only/input.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { AbcTodoInput } from 'abc-web-components-react-wrapper';
+import { WithRSCFallback } from 'abc-web-components-react-wrapper/client';
+import { ComponentProps, FC } from 'react';
+import { useTodo } from './use-todo';
+
+export const Input: FC<ComponentProps<typeof WithRSCFallback>> = ({ rsc }) => {
+  const { list, setList } = useTodo();
+
+  return (
+    <WithRSCFallback rsc={rsc}>
+      <AbcTodoInput onTodoInputSubmit={({ detail }) => setList([...list, { text: detail, checked: false }])} />
+    </WithRSCFallback>
+  );
+};
diff --git a/packages/app/src/app/todo/server-only/list.tsx b/packages/app/src/app/todo/server-only/list.tsx
new file mode 100644
index 00000000..8ec90385
--- /dev/null
+++ b/packages/app/src/app/todo/server-only/list.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { AbcTodoItem } from 'abc-web-components-react-wrapper';
+import { WithRSCFallback } from 'abc-web-components-react-wrapper/client';
+import { ComponentProps, FC } from 'react';
+import { useTodo } from './use-todo';
+
+export const List: FC<ComponentProps<typeof WithRSCFallback>> = ({ rsc }) => {
+  const { list, setList } = useTodo();
+
+  return (
+    <WithRSCFallback rsc={rsc}>
+      {list.map(({ checked, text }, index) => {
+        const props = { checked, text, index };
+
+        return (
+          <AbcTodoItem
+            {...props}
+            key={index}
+            onTodoItemChecked={({ detail }) => {
+              const copyList = [...list];
+              copyList[detail].checked = !copyList[detail].checked;
+              setList(copyList);
+            }}
+            onTodoItemRemove={({ detail }) => {
+              setList([...list.slice(0, detail), ...list.slice(detail + 1)]);
+            }}
+          />
+        );
+      })}
+    </WithRSCFallback>
+  );
+};
diff --git a/packages/app/src/app/todo/server-only/page.tsx b/packages/app/src/app/todo/server-only/page.tsx
new file mode 100644
index 00000000..d5091d6e
--- /dev/null
+++ b/packages/app/src/app/todo/server-only/page.tsx
@@ -0,0 +1,28 @@
+import { AbcTodoInputServerOnly, AbcTodoItemServerOnly } from 'abc-web-components-react-wrapper';
+import { FC } from 'react';
+import { Input } from './input';
+import { List } from './list';
+import { TodoProvider } from './use-todo';
+
+const list = [
+  { text: 'my initial todo', checked: false },
+  { text: 'Learn about Web Components', checked: true },
+];
+
+const Page: FC = () => (
+  <TodoProvider list={list}>
+    <h1>Todos Stencil</h1>
+    <section>
+      <Input rsc={<AbcTodoInputServerOnly />} />
+      <ul id="list-container">
+        <List
+          rsc={list.map((props, index) => (
+            <AbcTodoItemServerOnly key={index} {...props} index={index} />
+          ))}
+        />
+      </ul>
+    </section>
+  </TodoProvider>
+);
+
+export default Page;
diff --git a/packages/app/src/app/todo/server-only/use-todo.tsx b/packages/app/src/app/todo/server-only/use-todo.tsx
new file mode 100644
index 00000000..97a1ecf6
--- /dev/null
+++ b/packages/app/src/app/todo/server-only/use-todo.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { FC, PropsWithChildren, createContext, useContext, useState } from 'react';
+
+type TodoItem = { text: string; checked: boolean };
+
+const TodoContext = createContext({} as { list: TodoItem[]; setList: (list: TodoItem[]) => void });
+
+export const TodoProvider: FC<PropsWithChildren<{ list: TodoItem[] }>> = ({ children, list: initialList }) => {
+  const [list, setList] = useState(initialList);
+
+  return <TodoContext.Provider value={{ list, setList }}>{children}</TodoContext.Provider>;
+};
+
+export const useTodo = () => {
+  const context = useContext(TodoContext);
+
+  if (!context.list) {
+    throw new Error('useTodo must be used within a TodoProvider');
+  }
+
+  return context;
+};
diff --git a/packages/app/src/app/todo/styles.css b/packages/app/src/app/todo/styles.css
new file mode 100644
index 00000000..957b3e33
--- /dev/null
+++ b/packages/app/src/app/todo/styles.css
@@ -0,0 +1,22 @@
+#todo h1 {
+  font-size: 100px;
+  font-weight: 100;
+  text-align: center;
+  color: rgba(175, 47, 47, 0.15);
+}
+
+#todo section {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow:
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+#list-container {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-top: 1px solid #e6e6e6;
+}
diff --git a/packages/app/src/app/todo/wrapper/page.tsx b/packages/app/src/app/todo/wrapper/page.tsx
new file mode 100644
index 00000000..0162346b
--- /dev/null
+++ b/packages/app/src/app/todo/wrapper/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { AbcTodoInput, AbcTodoItem } from 'abc-web-components-react-wrapper';
+import { AbcWrapper } from 'abc-web-components-react-wrapper/client';
+import { FC, useState } from 'react';
+
+type TodoItem = { text: string; checked: boolean };
+const INITIAL_TODOS: TodoItem[] = [
+  { text: 'my initial todo', checked: false },
+  { text: 'Learn about Web Components', checked: true },
+];
+
+const Page: FC = () => {
+  const [list, setList] = useState<TodoItem[]>(INITIAL_TODOS);
+
+  return (
+    <AbcWrapper>
+      <h1>Todos Stencil</h1>
+      <section>
+        <AbcTodoInput
+          onTodoInputSubmit={({ detail }) => {
+            setList([...list, { text: detail, checked: false }]);
+          }}
+        />
+        <ul id="list-container">
+          {list.map(({ checked, text }, index) => (
+            <AbcTodoItem
+              key={index}
+              checked={checked}
+              text={text}
+              index={index}
+              onTodoItemChecked={({ detail }) => {
+                const copyList = [...list];
+                copyList[detail].checked = !copyList[detail].checked;
+                setList(copyList);
+              }}
+              onTodoItemRemove={({ detail }) => {
+                setList([...list.slice(0, detail), ...list.slice(detail + 1)]);
+              }}
+            />
+          ))}
+        </ul>
+      </section>
+    </AbcWrapper>
+  );
+};
+
+export default Page;
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
index fa19d9dc..3f2d0239 100644
--- a/packages/web-components/src/components.d.ts
+++ b/packages/web-components/src/components.d.ts
@@ -61,6 +61,13 @@ export namespace Components {
     interface AbcIconChevronDown {
         "size": ICON_SIZES;
     }
+    interface AbcTodoInput {
+    }
+    interface AbcTodoItem {
+        "checked": boolean;
+        "index": number;
+        "text": string;
+    }
 }
 export interface AbcAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -86,6 +93,14 @@ export interface AbcFlyoutItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAbcFlyoutItemElement;
 }
+export interface AbcTodoInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAbcTodoInputElement;
+}
+export interface AbcTodoItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAbcTodoItemElement;
+}
 declare global {
     interface HTMLAbcAccordionElementEventMap {
         "accordionClick": { open: boolean; item?: string };
@@ -203,6 +218,41 @@ declare global {
         prototype: HTMLAbcIconChevronDownElement;
         new (): HTMLAbcIconChevronDownElement;
     };
+    interface HTMLAbcTodoInputElementEventMap {
+        "todoInputSubmit": string;
+    }
+    interface HTMLAbcTodoInputElement extends Components.AbcTodoInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAbcTodoInputElementEventMap>(type: K, listener: (this: HTMLAbcTodoInputElement, ev: AbcTodoInputCustomEvent<HTMLAbcTodoInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAbcTodoInputElementEventMap>(type: K, listener: (this: HTMLAbcTodoInputElement, ev: AbcTodoInputCustomEvent<HTMLAbcTodoInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAbcTodoInputElement: {
+        prototype: HTMLAbcTodoInputElement;
+        new (): HTMLAbcTodoInputElement;
+    };
+    interface HTMLAbcTodoItemElementEventMap {
+        "todoItemChecked": number;
+        "todoItemRemove": number;
+    }
+    interface HTMLAbcTodoItemElement extends Components.AbcTodoItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAbcTodoItemElementEventMap>(type: K, listener: (this: HTMLAbcTodoItemElement, ev: AbcTodoItemCustomEvent<HTMLAbcTodoItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAbcTodoItemElementEventMap>(type: K, listener: (this: HTMLAbcTodoItemElement, ev: AbcTodoItemCustomEvent<HTMLAbcTodoItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAbcTodoItemElement: {
+        prototype: HTMLAbcTodoItemElement;
+        new (): HTMLAbcTodoItemElement;
+    };
     interface HTMLElementTagNameMap {
         "abc-accordion": HTMLAbcAccordionElement;
         "abc-accordion-group": HTMLAbcAccordionGroupElement;
@@ -212,6 +262,8 @@ declare global {
         "abc-flyout": HTMLAbcFlyoutElement;
         "abc-flyout-item": HTMLAbcFlyoutItemElement;
         "abc-icon-chevron-down": HTMLAbcIconChevronDownElement;
+        "abc-todo-input": HTMLAbcTodoInputElement;
+        "abc-todo-item": HTMLAbcTodoItemElement;
     }
 }
 declare namespace LocalJSX {
@@ -271,6 +323,16 @@ declare namespace LocalJSX {
     interface AbcIconChevronDown {
         "size"?: ICON_SIZES;
     }
+    interface AbcTodoInput {
+        "onTodoInputSubmit"?: (event: AbcTodoInputCustomEvent<string>) => void;
+    }
+    interface AbcTodoItem {
+        "checked"?: boolean;
+        "index"?: number;
+        "onTodoItemChecked"?: (event: AbcTodoItemCustomEvent<number>) => void;
+        "onTodoItemRemove"?: (event: AbcTodoItemCustomEvent<number>) => void;
+        "text"?: string;
+    }
     interface IntrinsicElements {
         "abc-accordion": AbcAccordion;
         "abc-accordion-group": AbcAccordionGroup;
@@ -280,6 +342,8 @@ declare namespace LocalJSX {
         "abc-flyout": AbcFlyout;
         "abc-flyout-item": AbcFlyoutItem;
         "abc-icon-chevron-down": AbcIconChevronDown;
+        "abc-todo-input": AbcTodoInput;
+        "abc-todo-item": AbcTodoItem;
     }
 }
 export { LocalJSX as JSX };
@@ -294,6 +358,8 @@ declare module "@stencil/core" {
             "abc-flyout": LocalJSX.AbcFlyout & JSXBase.HTMLAttributes<HTMLAbcFlyoutElement>;
             "abc-flyout-item": LocalJSX.AbcFlyoutItem & JSXBase.HTMLAttributes<HTMLAbcFlyoutItemElement>;
             "abc-icon-chevron-down": LocalJSX.AbcIconChevronDown & JSXBase.HTMLAttributes<HTMLAbcIconChevronDownElement>;
+            "abc-todo-input": LocalJSX.AbcTodoInput & JSXBase.HTMLAttributes<HTMLAbcTodoInputElement>;
+            "abc-todo-item": LocalJSX.AbcTodoItem & JSXBase.HTMLAttributes<HTMLAbcTodoItemElement>;
         }
     }
 }
diff --git a/packages/web-components/src/components/todo-input/todo-input.css b/packages/web-components/src/components/todo-input/todo-input.css
new file mode 100644
index 00000000..ff2fff73
--- /dev/null
+++ b/packages/web-components/src/components/todo-input/todo-input.css
@@ -0,0 +1,29 @@
+:host {
+  display: block;
+}
+
+form {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+input {
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  border: 0;
+  outline: none;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #CCC;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+}
diff --git a/packages/web-components/src/components/todo-input/todo-input.tsx b/packages/web-components/src/components/todo-input/todo-input.tsx
new file mode 100644
index 00000000..bb2a7ae1
--- /dev/null
+++ b/packages/web-components/src/components/todo-input/todo-input.tsx
@@ -0,0 +1,41 @@
+import { h, Component, State, Event, EventEmitter } from '@stencil/core';
+
+@Component({
+  tag: 'abc-todo-input',
+  styleUrl: 'todo-input.css',
+  shadow: true,
+})
+export class TodoInput {
+  @Event()
+  todoInputSubmit: EventEmitter<string>;
+
+  @State()
+  value: string;
+
+  private handleOnSubmit = (e: Event) => {
+    e.preventDefault();
+    if (this.value === '') {
+      return;
+    }
+    this.todoInputSubmit.emit(this.value);
+    this.value = '';
+  };
+
+  private handleInputChange = (event: InputEvent) => {
+    this.value = (event.target as HTMLInputElement).value;
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleOnSubmit}>
+        <input
+          id="input-submit"
+          value={this.value}
+          type="text"
+          placeholder="What needs to be done?"
+          onInput={this.handleInputChange}
+        />
+      </form>
+    ) as JSX.Element;
+  }
+}
diff --git a/packages/web-components/src/components/todo-item/todo-item.css b/packages/web-components/src/components/todo-item/todo-item.css
new file mode 100644
index 00000000..3fa7d5b4
--- /dev/null
+++ b/packages/web-components/src/components/todo-item/todo-item.css
@@ -0,0 +1,88 @@
+:host {
+  display: block;
+  }
+
+  li {
+  font-size: 24px;
+  display: block;
+  position: relative;
+  border-bottom: 1px solid #ededed;
+  }
+
+  li input {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 9px;
+  bottom: 0;
+  margin: auto 0;
+  border: none;
+  /* Mobile Safari */
+  -webkit-appearance: none;
+  appearance: none;
+  }
+
+  li input:after {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23ededed" stroke-width="3"/></svg>');
+  }
+
+  li input:checked:after {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23bddad5" stroke-width="3"/><path fill="%235dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+  }
+
+  li label {
+  white-space: pre;
+  word-break: break-word;
+  padding: 15px 60px 15px 15px;
+  margin-left: 45px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+  }
+
+  li.completed label {
+  color: #d9d9d9;
+  text-decoration: line-through;
+  }
+
+  li button,
+  li input[type="checkbox"] {
+  outline: none;
+  }
+
+  li button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  }
+
+  li button {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+  }
+
+  li button:hover {
+  color: #af5b5e;
+  }
diff --git a/packages/web-components/src/components/todo-item/todo-item.tsx b/packages/web-components/src/components/todo-item/todo-item.tsx
new file mode 100644
index 00000000..ed04c1d9
--- /dev/null
+++ b/packages/web-components/src/components/todo-item/todo-item.tsx
@@ -0,0 +1,41 @@
+import { h, Component, Prop, Event, EventEmitter } from '@stencil/core';
+
+@Component({
+  tag: 'abc-todo-item',
+  styleUrl: 'todo-item.css',
+  shadow: true,
+})
+export class TodoItem {
+  @Prop()
+  checked: boolean;
+
+  @Prop()
+  text: string;
+
+  @Prop()
+  index: number;
+
+  @Event()
+  todoItemChecked: EventEmitter<number>;
+
+  @Event()
+  todoItemRemove: EventEmitter<number>;
+
+  private handleOnRemove = () => {
+    this.todoItemRemove.emit(this.index);
+  };
+
+  private handleOnChecked = () => {
+    this.todoItemChecked.emit(this.index);
+  };
+
+  render() {
+    return (
+      <li class={this.checked ? 'completed' : ''}>
+        <input type="checkbox" checked={this.checked} onChange={this.handleOnChecked} />
+        <label>{this.text}</label>
+        <button onClick={this.handleOnRemove}>x</button>
+      </li>
+    ) as JSX.Element;
+  }
+}