Merge pull request #14 from jason89521/pnpm-workspace

Author: jason89521

.npmrc

@@ -0,0 +1 @@
+git-checks=false

README.md

@@ -1,193 +1,3 @@
-# React Typist Component
+# React Components Monorepo
 
-Create typewriter effect by setting up a component's children directly.
-
-## Install
-
-```bash
-npm install react-typist-component
-# or
-yarn add react-typist-component
-```
-
-## Example
-
-```jsx
-import Typist from 'react-typist-component';
-
-const MyComponent = () => {
-  return (
-    <Typist typingDelay={100} cursor={<span className='cursor'>|</span>}>
-      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>
-  );
-};
-```
-
-## API reference
-
-### `Typist`
-
-```ts
-export type Delay = number | (() => number);
-export type Splitter = (str: string) => string[];
-export type TypistProps = {
-  children: React.ReactNode;
-  typingDelay?: Delay;
-  backspaceDelay?: Delay;
-  loop?: boolean;
-  pause?: boolean;
-  startDelay?: number;
-  finishDelay?: number;
-  onTypingDone?: () => void;
-  splitter?: Splitter;
-  cursor?: string | React.ReactElement;
-  disabled?: boolean;
-  restartKey?: any;
-};
-```
-
-#### `children`
-
-The contents that will be rendered with typewriter effect. It accepts nested elements, so you can easily style your contents.
-
-Note that `Typist` treats the element whose children is `null` or `undefined` as a single token. For example:
-
-```jsx
-const Foo = () => {
-  return <div>Foo</div>;
-};
-
-// The text "Foo" will be displayed after "123" immediately instead of displayed seperately
-const App = () => {
-  return (
-    <Typist>
-      123
-      <Foo />
-    </Typist>
-  );
-};
-```
-
-#### `typingDelay`
-
-**Default**: `75`
-
-The delay after typing a token. If you pass in a function, `Typist` will call the function after typing a token and use the return value as the delay.
-
-#### `backspaceDelay`
-
-**Default**: `typingDelay`
-
-The delay after backspacing a token. If you pass in a function, `Typist` will call the function after backspacing a token and use the return value as the delay.
-
-#### `loop`
-
-**Default**: `false`
-
-`Typist` will automatically restart the typing animation if this value is `true`.
-
-#### `pause`
-
-**Default**: `false`
-
-Set to `true` if you want to pause the typing animation.
-
-#### `startDelay`
-
-**Default**: `0`
-
-`Typist` will wait for this delay before starting the typing animation.
-
-#### `finishDelay`
-
-**Default**: `0`
-
-`Typist` will wait for this delay after finishing the typing animation.
-
-#### `onTypingDone`
-
-This function will be called when the typing animation finishes. It will be called before waiting for the timeout with `finishDelay`.
-
-#### `splitter`
-
-**Default**: `(str: string) => str.split('')`
-
-`Typist` will use this function to get tokens from strings. It may be useful when you want to split your string in different way. For example, you can use [grapheme-splitter](https://github.com/orling/grapheme-splitter) to split string if your string contains emoji.
-
-```tsx
-import GraphemeSplitter from 'grapheme-splitter';
-
-const splitter = (str: string) => {
-  return new GraphemeSplitter().splitGraphemes(str);
-};
-
-const App = () => {
-  return (
-    <Typist splitter={splitter}>
-      😎🗑🥵⚠😀👍✌👨‍👨‍👧‍👦📏💡🚀🎂😓🎈💕😘
-      <Typist.Backspace count={16} />
-    </Typist>
-  );
-};
-```
-
-#### `cursor`
-
-Will be inserted after the last typed token.
-
-#### `disabled`
-
-**Default**: `false`
-
-If this value is `true`, the result will be displayed immediately without typing animation. It can be useful when you want to display the final result if a user has visited the typing animation.
-
-#### `restartKey`
-
-`Typist` will restart the typing animation whenever `restartKey` changes.
-
-### `Typist.Backspace`
-
-```ts
-type Props = {
-  count: number;
-};
-```
-
-#### `count`
-
-The number of tokens that will be backspaced.
-
-### `Typist.Delay`
-
-```ts
-type Props = {
-  ms: number;
-};
-```
-
-#### `ms`
-
-The duration of the delay in milliseconds.
-
-### `Typist.Paste`
-
-```ts
-type Props = {
-  children: React.ReactNode;
-};
-```
-
-#### `children`
-
-Children inside this component will be pasted without typewriter effect. Do not wrap another `Paste` inside this component, otherwise `Typist` will produce weird behavior.
+- [react-typist-component](./packages/react-typist-component/README.md)

api-extractor.json

@@ -1,17 +1,8 @@
 {
-  "name": "react-typist-component",
-  "version": "1.0.4",
-  "description": "A react component lets you create typewriter effect.",
+  "name": "react-components-monorepo",
   "author": "Yu-Xuan Zheng",
   "keywords": [
-    "react",
-    "react component",
-    "typewriter",
-    "typewriter component",
-    "react typewriter component",
-    "typist",
-    "typist component",
-    "react typist component"
+    "react components"
   ],
   "license": "MIT",
   "repository": {
@@ -33,60 +24,24 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "commit": "cz",
-    "dev": "vite",
-    "test": "jest",
-    "build:website": "tsc && vite build",
-    "build:types": "rimraf types/* && tsc --project tsconfig.lib.json",
-    "build:lib": "pnpm build:types && vite build --mode lib && api-extractor run",
-    "prepublishOnly": "pnpm build:lib",
-    "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "test": "pnpm -r --filter ./packages/* run test",
+    "build:website": "pnpm -r --filter ./packages/* run build:website",
+    "build:packages": "pnpm -r --filter ./packages/* run build:package",
+    "prepublishOnly": "pnpm build:lib"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@microsoft/api-extractor": "^7.28.4",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-vite": "^0.2.0",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.6",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
     "@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",
     "eslint": "^8.15.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-storybook": "^0.6.1",
-    "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"
+    "typescript": "^4.7.4"
   },
-  "peerDependencies": {
-    "react": ">=18.0.0"
-  },
-  "dependencies": {},
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
@@ -98,5 +53,16 @@
     "singleQuote": true,
     "jsxSingleQuote": true,
     "printWidth": 80
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "^18.0.15",
+      "@types/react-dom": "^18.0.6",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "vite": "^3.0.2",
+      "@vitejs/plugin-react": "^2.0.0",
+      "typescript": "^4.7.4"
+    }
   }
 }