docs: convert examples to typescript (ianstormtaylor#3766)

* docs: convert examples to typescript * docs: convert remaining examples * docs: update next.js * ci: fix lint * docs: fix next.js path * docs: cleanup * update Co-authored-by: wendellhu <[email protected]>
lukesmurray · Feb 5, 2021 · 6c2d645 · 6c2d645
1 parent 9c8dca6
commit 6c2d645
Show file tree

Hide file tree

Showing 30 changed files with 1,597 additions and 1,027 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -14,6 +14,7 @@
       "jsx": true
     }
   },
+  "ignorePatterns": ["**/next-env.d.ts"],
   "settings": {
     "import/extensions": [".js", ".ts", ".jsx", ".tsx"],
     "react": {

diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "lerna": "^3.19.0",
     "lodash": "^4.17.4",
     "mocha": "^6.2.0",
-    "next": "^9.3.5",
+    "next": "^9.4.0",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.19.1",
     "prismjs": "^1.5.1",

diff --git a/site/components.js b/site/components.js
diff --git a/site/components.tsx b/site/components.tsx
@@ -0,0 +1,193 @@
+import React, { Ref, PropsWithChildren } from 'react'
+import ReactDOM from 'react-dom'
+import { cx, css } from 'emotion'
+
+interface BaseProps {
+  className: string
+  [key: string]: unknown
+}
+type OrNull<T> = T | null
+
+export const Button = React.forwardRef(
+  (
+    {
+      className,
+      active,
+      reversed,
+      ...props
+    }: PropsWithChildren<
+      {
+        active: boolean
+        reversed: boolean
+      } & BaseProps
+    >,
+    ref: Ref<OrNull<HTMLSpanElement>>
+  ) => (
+    <span
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          cursor: pointer;
+          color: ${reversed
+            ? active
+              ? 'white'
+              : '#aaa'
+            : active
+            ? 'black'
+            : '#ccc'};
+        `
+      )}
+    />
+  )
+)
+
+export const EditorValue = React.forwardRef(
+  (
+    {
+      className,
+      value,
+      ...props
+    }: PropsWithChildren<
+      {
+        value: any
+      } & BaseProps
+    >,
+    ref: Ref<OrNull<null>>
+  ) => {
+    const textLines = value.document.nodes
+      .map(node => node.text)
+      .toArray()
+      .join('\n')
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={cx(
+          className,
+          css`
+            margin: 30px -20px 0;
+          `
+        )}
+      >
+        <div
+          className={css`
+            font-size: 14px;
+            padding: 5px 20px;
+            color: #404040;
+            border-top: 2px solid #eeeeee;
+            background: #f8f8f8;
+          `}
+        >
+          Slate's value as text
+        </div>
+        <div
+          className={css`
+            color: #404040;
+            font: 12px monospace;
+            white-space: pre-wrap;
+            padding: 10px 20px;
+            div {
+              margin: 0 0 0.5em;
+            }
+          `}
+        >
+          {textLines}
+        </div>
+      </div>
+    )
+  }
+)
+
+export const Icon = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLSpanElement>>
+  ) => (
+    <span
+      {...props}
+      ref={ref}
+      className={cx(
+        'material-icons',
+        className,
+        css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `
+      )}
+    />
+  )
+)
+
+export const Instruction = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLDivElement>>
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          white-space: pre-wrap;
+          margin: 0 -20px 10px;
+          padding: 10px 20px;
+          font-size: 14px;
+          background: #f8f8e8;
+        `
+      )}
+    />
+  )
+)
+
+export const Menu = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLDivElement>>
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `
+      )}
+    />
+  )
+)
+
+export const Portal = ({ children }) => {
+  return ReactDOM.createPortal(children, document.body)
+}
+
+export const Toolbar = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<OrNull<HTMLDivElement>>
+  ) => (
+    <Menu
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          position: relative;
+          padding: 1px 18px 17px;
+          margin: 0 -20px;
+          border-bottom: 2px solid #eee;
+          margin-bottom: 20px;
+        `
+      )}
+    />
+  )
+)
diff --git a/site/examples/check-lists.js → site/examples/check-lists.tsx b/site/examples/check-lists.js → site/examples/check-lists.tsx
@@ -7,12 +7,12 @@ import {
   useReadOnly,
   ReactEditor,
 } from 'slate-react'
-import { Editor, Transforms, Range, Point, createEditor } from 'slate'
+import { Node, Editor, Transforms, Range, Point, createEditor } from 'slate'
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 
 const CheckListsExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withChecklists(withHistory(withReact(createEditor()))),

diff --git a/site/examples/code-highlighting.js → site/examples/code-highlighting.tsx b/site/examples/code-highlighting.js → site/examples/code-highlighting.tsx
@@ -5,12 +5,12 @@ import 'prismjs/components/prism-sql'
 import 'prismjs/components/prism-java'
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Text, createEditor } from 'slate'
+import { Text, createEditor, Node } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
 const CodeHighlightingExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const [language, setLanguage] = useState('html')
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])