feature(demo): update demo to support copying typescript code (#1740)

* Update demo

* Minor changes

* Minor changes

* Minor changes

* Minor changes

* Minor changes

* Minor changes

* Minor changes

examples/demo/.eslintignore

@@ -0,0 +1,2 @@
+src/resources/*.jsx
+src/resources/*.tsx

examples/demo/package.json

@@ -9,6 +9,7 @@
     "meshline": "^2.0.4",
     "prism-react-renderer": "^1.2.1",
     "prismjs": "1.23.0",
+    "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": "^0.141.0",

examples/demo/src/App.js

@@ -1,7 +1,6 @@
 import { create } from 'zustand'
 import CodePreview from './components/CodePreview'
 import Details from './components/Details'
-import code from './resources/code'
 
 const useStore = create((set) => ({
   count: 1,
@@ -23,7 +22,7 @@ export default function App() {
     <div className="main">
       <div className="code">
         <div className="code-container">
-          <CodePreview code={code} />
+          <CodePreview />
           <Counter />
         </div>
       </div>

examples/demo/src/components/CodePreview.js

@@ -1,10 +1,25 @@
+import { create } from 'zustand'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import CopyButton from './CopyButton'
+import SnippetLang from './SnippetLang'
 import 'prismjs/themes/prism-okaidia.css'
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import javascriptCode from '!!raw-loader!../resources/javascript-code.jsx'
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import typescriptCode from '!!raw-loader!../resources/typescript-code.tsx'
+
+const useStore = create((set, get) => ({
+  lang: 'javascript',
+  setLang: (lang) => set(() => ({ lang })),
+  getCode: () => (get().lang === 'javascript' ? javascriptCode : typescriptCode),
+}))
+
+export default function CodePreview() {
+  const { lang, setLang, getCode } = useStore()
+  const code = getCode()
 
-export default function CodePreview({ code, ...props }) {
   return (
-    <Highlight {...defaultProps} code={code} language="jsx" theme={undefined}>
+    <Highlight {...defaultProps} code={code} language="tsx" theme={undefined}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         // define how each line is to be rendered in the code block,
         // position is set to relative so the copy button can align to bottom right
@@ -16,7 +31,10 @@ export default function CodePreview({ code, ...props }) {
               ))}
             </div>
           ))}
-          <CopyButton code={code} />
+          <div className="snippet-container">
+            <SnippetLang lang={lang} setLang={setLang} />
+            <CopyButton code={code} />
+          </div>
         </pre>
       )}
     </Highlight>

examples/demo/src/components/SnippetLang.js

@@ -0,0 +1,8 @@
+export default function SnippetLang({ lang, setLang }) {
+  return (
+    <select className="snippet-lang" value={lang} onChange={(e) => setLang(e.currentTarget.value)}>
+      <option value="javascript">JavaScript</option>
+      <option value="typescript">TypeScript</option>
+    </select>
+  )
+}

examples/demo/src/resources/code.js

@@ -1,18 +0,0 @@
-const code = `import { create } from 'zustand'
-
-const useStore = create(set => ({
-  count: 1,
-  inc: () => set(state => ({ count: state.count + 1 })),
-}))
-
-function Controls() {
-  const inc = useStore(state => state.inc)
-  return <button onClick={inc}>one up</button>
-}
-
-function Counter() {
-  const count = useStore(state => state.count)
-  return <h1>{count}</h1>  
-}`
-
-export default code

examples/demo/src/resources/javascript-code.jsx

@@ -0,0 +1,17 @@
+import { create } from 'zustand'
+
+const useStore = create((set) => ({
+  count: 1,
+  inc: () => set((state) => ({ count: state.count + 1 })),
+}))
+
+function Counter() {
+  const { count, inc } = useStore()
+
+  return (
+    <div>
+      <span>{count}</span>
+      <button onClick={inc}>one up</button>
+    </div>
+  )
+}

examples/demo/src/resources/typescript-code.tsx

@@ -0,0 +1,22 @@
+import { create } from 'zustand'
+
+type Store = {
+  count: number
+  inc: () => void
+}
+
+const useStore = create<Store>()((set) => ({
+  count: 1,
+  inc: () => set((state) => ({ count: state.count + 1 })),
+}))
+
+function Counter() {
+  const { count, inc } = useStore()
+
+  return (
+    <div>
+      <span>{count}</span>
+      <button onClick={inc}>one up</button>
+    </div>
+  )
+}

examples/demo/src/styles.css

@@ -469,18 +469,31 @@ a.bottom-right {
   }
 }
 
-.copy-button {
+.snippet-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
   position: absolute;
   bottom: 0;
   right: 0;
+  padding: 5px;
+}
+
+.snippet-lang {
+  background-color: #272822;
+  color: #fff;
+  outline: 0;
+  border: 0;
+}
+
+.copy-button {
   box-shadow: none;
   text-decoration: none;
   font-size: 14px;
   font-family: sans-serif;
   line-height: 1;
   pointer-events: all;
-  margin: 10px;
-  padding: 5px 10px;
+  padding: 12px;
   width: auto;
   border-radius: 5px;
   border: 0;
@@ -489,3 +502,7 @@ a.bottom-right {
   color: #f8f9fa;
   cursor: pointer;
 }
+
+.copy-button:hover {
+  background-color: #5f5e5d;
+}