Merge pull request #11 from jason89521/website

Author: jason89521

dev/App.css

@@ -1,35 +1,30 @@
-import React, { useState } from 'react';
-import './App.css';
+import React from 'react';
 import Typist from '../src';
+import Header from './components/Header';
+import Section from './components/Section';
+import PauseExample from './components/PauseExample';
 
 function App() {
-  const [count, setCount] = useState(0);
-  const [key, setKey] = useState(1);
-
   return (
-    <div className="App">
-      <button onClick={() => setKey(key + 1)}>key</button>
-      <button onClick={() => setCount(count + 1)}>{count}</button>
-      <br />
-      <Typist
-        typingDelay={100}
-        disabled={count % 2 === 0}
-        cursor={<span className="cursor">|</span>}
-        restartKey={key}
-      >
-        This is a typo
-        <br />
-        <Typist.Backspace count={5} />
-        <Typist.Delay ms={1500} />
-        react component
-        <Typist.Paste>
-          <div>
-            use
-            <div>deeper div</div>
-          </div>
-        </Typist.Paste>
-        <Typist.Delay ms={1500} />
-      </Typist>
+    <div className='min-h-screen bg-slate-600 px-12 py-10 text-white'>
+      <Header />
+      <Section title='Support Looping'>
+        <Typist loop>
+          The typing animation will be restarted automatically...
+        </Typist>
+      </Section>
+      <PauseExample />
+      <Section title='Support Delay, Backspacing and Pasting'>
+        <Typist>
+          The typing animation can be delayed adn bac
+          <Typist.Delay ms={1000} />
+          <Typist.Backspace count={6} />
+          nd backspaced
+          <br />
+          Furthermore,
+          <Typist.Paste> the text can be pasted directly!</Typist.Paste>
+        </Typist>
+      </Section>
     </div>
   );
 }

dev/App.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Typist from '../../src';
+import randomDelayGenerator from '../utils/randomDelayGenerator';
+
+export default function Header() {
+  return (
+    <div>
+      <header className='text-xl text-cyan-400'>
+        <h1 className='mb-4 text-4xl font-bold'>React Typist Component</h1>
+        <Typist typingDelay={randomDelayGenerator}>
+          Use this component to create{' '}
+          <span className='text-red-500'>typewriter effect</span> easily!
+        </Typist>
+      </header>
+    </div>
+  );
+}

dev/components/Header.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import Typist from '../../src';
+import Section from './Section';
+
+export default function PauseExample() {
+  const [isPause, setIsPause] = useState(false);
+
+  console.log(isPause);
+
+  return (
+    <Section title='Support Pausing'>
+      <div className='mb-2 flex'>
+        <label htmlFor='pause' className='mr-2'>
+          pause
+        </label>
+        <input
+          id='pause'
+          type='checkbox'
+          checked={isPause}
+          onChange={(e) => setIsPause(e.currentTarget.checked)}
+        />
+      </div>
+      <Typist loop pause={isPause}>
+        The typing animation will be paused if you check the input.
+      </Typist>
+    </Section>
+  );
+}

dev/components/PauseExample.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+interface Props {
+  title: string;
+  children: ReactNode;
+}
+
+export default function Section({ title, children }: Props) {
+  return (
+    <section className='py-8 px-4'>
+      <h1 className='mb-4 text-2xl text-rose-400'>{title}</h1>
+      {children}
+    </section>
+  );
+}

dev/components/Section.tsx

@@ -1,11 +1,4 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}

dev/index.css

@@ -0,0 +1,3 @@
+export default function randomDelayGenerator(base = 75, bias = 20) {
+  return base + (Math.random() - 0.5) * bias;
+}

dev/utils/randomDelayGenerator.ts

@@ -59,6 +59,7 @@
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "@vitejs/plugin-react": "^2.0.0",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "3.3.0",
@@ -69,9 +70,13 @@
     "grapheme-splitter": "^1.0.4",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.7",
     "typescript": "^4.7.4",
     "vite": "^3.0.2"

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./dev/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};