feat: init basic settings

src/components/simple-counter/index.ts

@@ -0,0 +1,59 @@
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import * as React from 'react';
+import { theme } from '@/styles';
+
+export const tagName = 'simple-counter';
+
+// Adapt React in order to be able to use custom tags properly
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: PersonInfoProps;
+    }
+  }
+}
+
+interface PersonInfoProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLElement>,
+    HTMLElement
+  > {
+  name?: string;
+}
+// ===================== Adapt end ====================
+
+@customElement(tagName)
+export class Counter extends LitElement {
+  static styles = css`
+    .counter-container {
+      display: flex;
+      color: ${unsafeCSS(theme.colors.primary)};
+    }
+    button {
+      margin: 0 5px;
+    }
+  `;
+
+  @property()
+  name?: string = '';
+
+  @state()
+  count = 0;
+  // Render the UI as a function of component state
+  render() {
+    return html`<div class="counter-container">
+      <div class="name">${this.name}</div>
+      <button @click=${this._subtract}>-</button>
+      <div>${this.count}</div>
+      <button @click="${this._increment}">+</button>
+    </div>`;
+  }
+
+  private _increment(e: Event) {
+    this.count++;
+  }
+  private _subtract(e: Event) {
+    this.count--;
+  }
+}

src/pages/_app.tsx

@@ -0,0 +1,15 @@
+import type { AppProps } from 'next/app';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from '../styles';
+
+import '../../public/globals.css';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+
+export default MyApp;

src/pages/affine.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Affine = () => {
+  return <div className="">Affine Page</div>;
+};
+
+export default Affine;

src/pages/index.tsx

@@ -0,0 +1,21 @@
+import type { NextPage } from 'next';
+import styled from '@emotion/styled';
+
+import '@/components/simple-counter';
+
+const Button = styled('div')(({ theme }) => {
+  return {
+    color: theme.colors.primary,
+  };
+});
+
+const Home: NextPage = () => {
+  return (
+    <div>
+      <Button>A button use the theme styles</Button>
+      <simple-counter name="A counter created by web component" />
+    </div>
+  );
+};
+
+export default Home;

src/styles/index.ts

@@ -0,0 +1 @@
+export * from './theme';

src/styles/theme.ts

@@ -0,0 +1,17 @@
+import '@emotion/react';
+
+interface AffineTheme {
+  colors: {
+    primary: string;
+  };
+}
+
+export const theme: AffineTheme = {
+  colors: {
+    primary: '#0070f3',
+  },
+};
+
+declare module '@emotion/react' {
+  export interface Theme extends AffineTheme {}
+}