Skip to content

Commit 0e222bf

Browse files
deadcoder0904deadcoder0904
committed
Init
0 parents  commit 0e222bf

30 files changed

+25916
-0
lines changed

‎.babelrc

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/env",
5+
{
6+
"targets": {
7+
"browsers": "last 2 Chrome versions"
8+
}
9+
}
10+
]
11+
],
12+
"plugins": [
13+
"@babel/plugin-transform-for-of",
14+
"@babel/plugin-transform-destructuring",
15+
[
16+
"@babel/plugin-transform-runtime",
17+
{
18+
"helpers": false
19+
}
20+
]
21+
]
22+
}

‎.github/workflows/main.yml

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: CI
2+
on: [push]
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
7+
steps:
8+
- name: Begin CI...
9+
uses: actions/checkout@v2
10+
11+
- name: Use Node 12
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: 12.x
15+
16+
- name: Use cached node_modules
17+
uses: actions/cache@v1
18+
with:
19+
path: node_modules
20+
key: nodeModules-${{ hashFiles('**/package-lock.json') }}
21+
restore-keys: |
22+
nodeModules-
23+
24+
- name: Install dependencies
25+
run: npm install
26+
env:
27+
CI: true
28+
29+
- name: Lint
30+
run: npm run lint
31+
env:
32+
CI: true
33+
34+
- name: Test
35+
run: npm run test --ci --coverage --maxWorkers=2
36+
env:
37+
CI: true
38+
39+
- name: Build
40+
run: npm run build
41+
env:
42+
CI: true

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*.log
2+
.DS_Store
3+
node_modules
4+
.cache
5+
dist

‎.prettierrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true,
4+
"printWidth": 100,
5+
"tabWidth": 2,
6+
"useTabs": true,
7+
"trailingComma": "es5",
8+
"bracketSpacing": true
9+
}

‎.storybook/main.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
stories: ['../stories/**/*.stories.(ts|tsx)'],
3+
addons: [
4+
'@storybook/addon-actions',
5+
'@storybook/addon-links',
6+
'@storybook/addon-docs',
7+
'@storybook/addon-backgrounds/register',
8+
],
9+
webpackFinal: async config => {
10+
config.module.rules.push({
11+
test: /\.(ts|tsx)$/,
12+
use: [
13+
{
14+
loader: require.resolve('ts-loader'),
15+
options: {
16+
transpileOnly: true,
17+
},
18+
},
19+
{
20+
loader: require.resolve('react-docgen-typescript-loader'),
21+
},
22+
],
23+
});
24+
25+
config.resolve.extensions.push('.ts', '.tsx');
26+
27+
return config;
28+
},
29+
};

‎.storybook/manager.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { addons } from '@storybook/addons';
2+
import theme from './theme';
3+
4+
addons.setConfig({
5+
theme,
6+
});

‎.storybook/preview.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { addParameters } from '@storybook/react';
2+
import theme from './theme';
3+
4+
addParameters({
5+
options: {
6+
theme,
7+
},
8+
backgrounds: [{ name: 'dark', value: '#33354C', default: true }],
9+
});

‎.storybook/theme.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { create } from '@storybook/theming/create';
2+
import { typography, color } from '@storybook/theming';
3+
4+
const theme = create({
5+
base: 'dark',
6+
7+
// Storybook-specific color palette
8+
colorPrimary: '#FF4785', // coral
9+
colorSecondary: '#1EA7FD', // ocean
10+
11+
// UI
12+
appBg: '#33354C',
13+
appContentBg: '#33354C',
14+
appBorderColor: '#FBDB47',
15+
appBorderRadius: 10,
16+
17+
// Fonts
18+
fontBase: typography.fonts.base,
19+
fontCode: typography.fonts.mono,
20+
21+
// Text colors
22+
textColor: color.lightest,
23+
textInverseColor: color.darkest,
24+
25+
// Toolbar default and active colors
26+
barTextColor: '#999999',
27+
barSelectedColor: color.secondary,
28+
barBg: color.darkest,
29+
30+
// Form colors
31+
inputBg: '#3f3f3f',
32+
inputBorder: 'rgba(0,0,0,.3)',
33+
inputTextColor: color.lightest,
34+
inputBorderRadius: 4,
35+
});
36+
37+
export default theme;

‎LICENSE

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

‎README.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# React Typical
2+
3+
> Typist library made in React with TypeScript support by [@deadcoder0904](https://twitter.com/deadcoder0904)
4+
5+
## Highlights
6+
7+
- **Written in TypeScript**
8+
- **Zero dependencies**
9+
- **MIT licensed**
10+
- **Emoji support**
11+
- **Pausing**: pause between steps
12+
- **Looping**: easily loop from any point
13+
- **Humanity**: slightly varied typing speed
14+
15+
## Install
16+
17+
```bash
18+
$ npm install @deadcoder0904/react-typical
19+
```
20+
21+
## Usage
22+
23+
### Basic
24+
25+
```tsx
26+
import React from 'react'
27+
import { ReactTypical } from '@deadcoder0904/react-typical'
28+
29+
const Index = () => (
30+
<ReactTypical
31+
steps={['Hello', 'React Typical']}
32+
wrapper="p"
33+
/>
34+
)
35+
```
36+
37+
### Emoji Support
38+
39+
```tsx
40+
import React from 'react'
41+
import { ReactTypical } from '@deadcoder0904/react-typical'
42+
43+
const Index = () => (
44+
<ReactTypical
45+
steps={['💩',1000, '🙈',1000,'💖',1000,'🚀',1000,'👨‍🎤',1000]}
46+
wrapper="p"
47+
/>
48+
)
49+
```
50+
51+
### Pausing
52+
53+
In order to pause at any point, pass a number of milliseconds to `steps` prop to pause.
54+
55+
```tsx
56+
import React from 'react'
57+
import { ReactTypical } from '@deadcoder0904/react-typical'
58+
59+
const Index = () => (
60+
<ReactTypical
61+
steps={['Hello', 1000, 'React Typical', 2000]}
62+
wrapper="p"
63+
/>
64+
)
65+
```
66+
67+
### Looping
68+
69+
In order to loop, just pass a number to `loop` prop, for example, if you want to loop 3 times.
70+
71+
```tsx
72+
import React from 'react'
73+
import { ReactTypical } from '@deadcoder0904/react-typical'
74+
75+
const Index = () => (
76+
<ReactTypical
77+
steps={['Hello', 1000, 'React Typical', 2000]}
78+
loop={3}
79+
wrapper="p"
80+
/>
81+
)
82+
```
83+
84+
Or pass `Infinity` to loop infinitely.
85+
86+
```tsx
87+
import React from 'react'
88+
import { ReactTypical } from '@deadcoder0904/react-typical'
89+
90+
const Index = () => (
91+
<ReactTypical
92+
steps={['Hello', 1000, 'React Typical', 2000]}
93+
loop={Infinity}
94+
wrapper="p"
95+
/>
96+
)
97+
```
98+
99+
## API
100+
101+
| property | required | type | example |
102+
| --------- | -------- | ------ | --------------------------------------- |
103+
| `steps` | yes | [] | `['Hello', 1000, 'React Typical', 500]` |
104+
| `wrapper` | no | string | `'p'` or `'div'` |
105+
| `loop` | no | number | `3` or `Infinity` |
106+
107+
## Motivation & Inspiration
108+
109+
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.

‎example/.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.cache
3+
dist

‎example/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Playground</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script src="./index.tsx"></script>
13+
</body>
14+
</html>

‎example/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import 'react-app-polyfill/ie11';
2+
import * as React from 'react';
3+
import * as ReactDOM from 'react-dom';
4+
import { ReactTypical } from '../.';
5+
6+
const App = () => {
7+
const hypeText = ['Creator', 'Entrepreneur', 'Doer', 'Lone Wolf'];
8+
return (
9+
<>
10+
<ReactTypical
11+
style={{
12+
color: 'rebeccapurple',
13+
fontWeight: 'bolder',
14+
fontFamily: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
15+
fontSize: 48,
16+
}}
17+
steps={hypeText.flatMap(hype => [hype, 5000])}
18+
loop={Infinity}
19+
/>
20+
</>
21+
);
22+
};
23+
24+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)