Init

Author: deadcoder0904

.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": "last 2 Chrome versions"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-for-of",
+    "@babel/plugin-transform-destructuring",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false
+      }
+    ]
+  ]
+}

.github/workflows/main.yml

@@ -0,0 +1,42 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Use cached node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: npm install
+        env:
+          CI: true
+
+      - name: Lint
+        run: npm run lint
+        env:
+          CI: true
+
+      - name: Test
+        run: npm run test --ci --coverage --maxWorkers=2
+        env:
+          CI: true
+
+      - name: Build
+        run: npm run build
+        env:
+          CI: true

.gitignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}

.storybook/main.js

@@ -0,0 +1,29 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-backgrounds/register',
+  ],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    return config;
+  },
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.js

@@ -0,0 +1,9 @@
+import { addParameters } from '@storybook/react';
+import theme from './theme';
+
+addParameters({
+  options: {
+    theme,
+  },
+  backgrounds: [{ name: 'dark', value: '#33354C', default: true }],
+});

.storybook/theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming/create';
+import { typography, color } from '@storybook/theming';
+
+const theme = create({
+  base: 'dark',
+
+  // Storybook-specific color palette
+  colorPrimary: '#FF4785', // coral
+  colorSecondary: '#1EA7FD', // ocean
+
+  // UI
+  appBg: '#33354C',
+  appContentBg: '#33354C',
+  appBorderColor: '#FBDB47',
+  appBorderRadius: 10,
+
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
+
+  // Text colors
+  textColor: color.lightest,
+  textInverseColor: color.darkest,
+
+  // Toolbar default and active colors
+  barTextColor: '#999999',
+  barSelectedColor: color.secondary,
+  barBg: color.darkest,
+
+  // Form colors
+  inputBg: '#3f3f3f',
+  inputBorder: 'rgba(0,0,0,.3)',
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4,
+});
+
+export default theme;

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Akshay Kadam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,109 @@
+# React Typical
+
+> Typist library made in React with TypeScript support by [@deadcoder0904](https://twitter.com/deadcoder0904)
+
+## Highlights
+
+- **Written in TypeScript**
+- **Zero dependencies**
+- **MIT licensed**
+- **Emoji support**
+- **Pausing**: pause between steps
+- **Looping**: easily loop from any point
+- **Humanity**: slightly varied typing speed
+
+## Install
+
+```bash
+$ npm install @deadcoder0904/react-typical
+```
+
+## Usage
+
+### Basic
+
+```tsx
+import React from 'react'
+import { ReactTypical } from '@deadcoder0904/react-typical'
+
+const Index = () => (
+	<ReactTypical
+		steps={['Hello', 'React Typical']}
+		wrapper="p"
+	/>
+)
+```
+
+### Emoji Support
+
+```tsx
+import React from 'react'
+import { ReactTypical } from '@deadcoder0904/react-typical'
+
+const Index = () => (
+	<ReactTypical
+		steps={['💩',1000, '🙈',1000,'💖',1000,'🚀',1000,'👨‍🎤',1000]}
+		wrapper="p"
+	/>
+)
+```
+
+### Pausing
+
+In order to pause at any point, pass a number of milliseconds to `steps` prop to pause.
+
+```tsx
+import React from 'react'
+import { ReactTypical } from '@deadcoder0904/react-typical'
+
+const Index = () => (
+	<ReactTypical
+		steps={['Hello', 1000, 'React Typical', 2000]}
+		wrapper="p"
+	/>
+)
+```
+
+### Looping
+
+In order to loop, just pass a number to `loop` prop, for example, if you want to loop 3 times.
+
+```tsx
+import React from 'react'
+import { ReactTypical } from '@deadcoder0904/react-typical'
+
+const Index = () => (
+	<ReactTypical
+		steps={['Hello', 1000, 'React Typical', 2000]}
+		loop={3}
+		wrapper="p"
+	/>
+)
+```
+
+Or pass `Infinity` to loop infinitely.
+
+```tsx
+import React from 'react'
+import { ReactTypical } from '@deadcoder0904/react-typical'
+
+const Index = () => (
+	<ReactTypical
+		steps={['Hello', 1000, 'React Typical', 2000]}
+		loop={Infinity}
+		wrapper="p"
+	/>
+)
+```
+
+## API
+
+| property  | required | type   | example                                 |
+| --------- | -------- | ------ | --------------------------------------- |
+| `steps`   | yes      | []     | `['Hello', 1000, 'React Typical', 500]` |
+| `wrapper` | no       | string | `'p'` or `'div'`                        |
+| `loop`    | no       | number | `3` or `Infinity`                       |
+
+## Motivation & Inspiration
+
+I wanted to use a typist library in React with TypeScript but couldn't find any. I found out there was a React Typist library known as [React Typical](https://github.com/catalinmiron/react-typical/) which used [@camwiegert/typical](https://github.com/camwiegert/typical) but both libraries weren't written in TypeScript. So I made this library which just uses the exact same code but in TypeScript & it was too much hassle to convert it into TypeScript. 10/10 wouldn't recommend.