Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add package of text-selector #171

Merged
merged 24 commits into from
May 11, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
1ae7c66
feat: add package of text-selector
v61265 May 1, 2023
e351bb3
refactor: adjust json data scruture
v61265 May 2, 2023
8e69fb8
fix: debug circle position of first time
v61265 May 2, 2023
2abcaad
chore: adjust package.json
v61265 May 2, 2023
b95b513
refactor: adjust wrong spelling
v61265 May 2, 2023
c318c01
fix(rtx): getTranslateToParagraph after rendered
v61265 May 3, 2023
af64154
fix: debugger mode scroll culculator
v61265 May 3, 2023
994c2c7
refactor: remove console.log
v61265 May 4, 2023
cc13542
chore: remove styled-components and uuid of dependencies
v61265 May 4, 2023
6f8711b
refactor: add throttle to handleResized
v61265 May 4, 2023
05842ac
style: set font-family inherit
v61265 May 4, 2023
fdc370b
refactor: refactor function handleOnClickBtn
v61265 May 4, 2023
e837d5e
refactor: add comment of fetchData and refactor handleChangeFileIndex…
v61265 May 4, 2023
dfa2d1f
refactor: prevent trigger resize when height not change more than 40%
v61265 May 4, 2023
814100e
refactor: remove shift left and hooks/useViewports
v61265 May 5, 2023
a8a8c43
refactor: add default value of JSDoc
v61265 May 5, 2023
db65c3d
chore: upgrade to 1.1.1-beta.7
v61265 May 5, 2023
0a04ee8
style: adjust margin
v61265 May 5, 2023
c71e62a
style: adjust mobile circle and nextBtn
v61265 May 7, 2023
1bfadbe
refactor: store a viewport in state
v61265 May 8, 2023
b840ddc
chore: change name to random-text-selector and add readme demo & usage
v61265 May 10, 2023
f5cb1d7
Merge branch 'main' into text
v61265 May 10, 2023
c00ef46
chore: change pkg name to react-random-text-selector
v61265 May 11, 2023
5baa331
refactor: build cjs & esm version
v61265 May 11, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"packages/share-button",
"packages/three-story-points",
"packages/dual-slides",
"packages/react-random-text-selector",
"packages/dropping-text"
],
"scripts": {
Expand Down
16 changes: 16 additions & 0 deletions packages/react-random-text-selector/.babelrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const isProduction = process.env.NODE_ENV === 'production'
const buildTarget = process.env.BUILD_TARGET || 'esmodule' // another value could be 'commonjs'

module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: buildTarget === 'esmodule' ? false : 'commonjs',
targets: {
node: '14',
},
},
],
],
}
1 change: 1 addition & 0 deletions packages/react-random-text-selector/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# @readr-media/react-random-text-selector Changelog
25 changes: 25 additions & 0 deletions packages/react-random-text-selector/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
P := "\\033[32m[+]\\033[0m"

help:
@echo "$(P) make dev - Start webpack dev server and watch any changes"
@echo "$(P) make build - Transpile jsx, es6 and above to es5 files, and build webpack bundles"

dev:
@echo "$(P) Start webpack dev server"
NODE_ENV=development yarn webpack serve -c dev/webpack.config.js

build-lib:
@echo "$(P) Transpile es6, jsx and (typescript) to es5"
mkdir -p lib
BUILD_TARGET=esmodule NODE_ENV=production yarn babel src --out-dir lib/esm --copy-files --root-mode upward
echo '{ "type": "module" }' > lib/esm/package.json
BUILD_TARGET=commonjs NODE_ENV=production yarn babel src --out-dir lib/cjs --copy-files --root-mode upward
echo '{ "type": "commonjs" }' > lib/cjs/package.json

build: clean build-lib

clean:
@echo "$(P) Clean lib/"
rm -rf lib/

.PHONY: build clean dev build-lib
84 changes: 84 additions & 0 deletions packages/react-random-text-selector/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
# [@readr-media/react-random-text-selector](https://www.npmjs.com/package/@readr-media/react-random-text-selector) · ![npm version](https://img.shields.io/npm/v/@readr-media/react-karaoke.svg?style=flat)

## Demo

![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMGYxZDVhNTg4MGZiNGYyNzNkYjFkYTE3MWVjNWI0OWZlNTJiMjIzNiZlcD12MV9pbnRlcm5hbF9naWZzX2dpZklkJmN0PWc/9tTnoUfyc6Squc9T8a/giphy.gif)

## Usage Example

```javascript
import ReactRandomTextSelector from '@readr-media/react-random-text-selector'
import React from 'react'
import styled from 'styled-components'
import { createRoot } from 'react-dom/client'
const reactRootId = 'root'
const container = document.getElementById(reactRootId)
const root = createRoot(container)

const jsonUrls = [
'https://editools-gcs.readr.tw/psycho/file_1.json',
'https://editools-gcs.readr.tw/psycho/file_2.json',
'https://editools-gcs.readr.tw/psycho/file_3.json',
'https://editools-gcs.readr.tw/psycho/file_4.json',
'https://editools-gcs.readr.tw/psycho/file_5.json',
]

root.render(
<ReactRandomTextSelector
className="random-text-selector"
isDebugMode={true}
jsonUrls={jsonUrls}
backgroundColor="#000000"
circleUrl="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/circle.png"
buttonBackground="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/button-background.png"
circleUrlMobile="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/circle-mobile.png"
buttonWording="其他案例"
loadingImgSrc="https://unpkg.com/@readr-media/text-selector@1.1.1-beta.1/assets/loading.gif"
/>
)
```

## Installation

`yarn install`

## Development

```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)

```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles

```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5

```
$ make build-lib
```

### NPM Publish

After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,

```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
35 changes: 35 additions & 0 deletions packages/react-random-text-selector/dev/entry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import ReactRandomTextSelector from '../src/react-components'
import React from 'react' // eslint-disable-line
import styled from 'styled-components'
import { createRoot } from 'react-dom/client'

const reactRootId = 'root'
const container = document.getElementById(reactRootId)
const root = createRoot(container)

const MockContentBlock = styled.div`
height: calc(100vh - constant(safe-area-inset-bottom)); /* iOS < 11.2 */
height: calc(100vh - env(safe-area-inset-bottom)); /* iOS >= 11.2 */
background-color: pink;
margin: 0 auto;
`

const TestWrapper = styled.div`
margin: 0 auto;
`

root.render(
<TestWrapper>
<ReactRandomTextSelector
isDebugMode={true}
jsonUrls={[
'https://editools-gcs.readr.tw/psycho/file_1.json',
'https://editools-gcs.readr.tw/psycho/file_2.json',
'https://editools-gcs.readr.tw/psycho/file_3.json',
'https://editools-gcs.readr.tw/psycho/file_4.json',
'https://editools-gcs.readr.tw/psycho/file_5.json',
]}
/>
<MockContentBlock />
</TestWrapper>
)
11 changes: 11 additions & 0 deletions packages/react-random-text-selector/dev/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@reader-media/react-random-text-selector</title>
</head>
<body style="background-color: #f6f6f5; margin: 0;">
<div id="root"></div>
</body>
</html>
40 changes: 40 additions & 0 deletions packages/react-random-text-selector/dev/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
mode: 'development',
entry: {
main: path.resolve(__dirname, './entry.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
},
devServer: {
hot: false,
host: '0.0.0.0',
port: 8080,
static: {
directory: path.join(__dirname),
},
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
}),
],
devtool: 'eval-source-map',
}
47 changes: 47 additions & 0 deletions packages/react-random-text-selector/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{
"name": "@readr-media/react-random-text-selector",
"version": "1.0.0",
"description": "",
"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
"exports": {
"import": "./lib/esm/index.js",
"require": "./lib/cjs/index.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "make dev",
"build": "make build",
"clean": "make clean",
"build-dist": "make build-dist",
"build-lib": "make build-lib"
},
"repository": {
"type": "git",
"url": "https://github.com/readr-media/react.git",
"directory": "packages/react-random-text-selector"
},
"keywords": [
"react",
"readr",
"random-text-selector"
],
"license": "MIT",
"dependencies": {
"axios": "^1.3.5"
},
"devDependencies": {
"react": "18.1.0",
"react-dom": "18.1.0",
"styled-components": "5.3.5"
},
"peerDependencies": {
"react": "18.1.0",
"react-dom": "18.1.0",
"styled-components": "5.3.5"
},
"files": [
"lib",
"assets"
]
}
3 changes: 3 additions & 0 deletions packages/react-random-text-selector/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import ReactRandomTextSelector from './react-components'

export default ReactRandomTextSelector
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import styled from 'styled-components'
import React from 'react' // eslint-disable-line

/**
* @param {Object} opts
* @param {number} [opts.jsonLength]
* @param {number} [opts.jsonFileIndex]
* @param {number} [opts.dataLength]
* @param {number} [opts.highlightIndex]
* @param {Function} [opts.handleChangeFileIndex]
*/
export default function Debugger({
jsonLength = 0,
jsonFileIndex = 0,
dataLength = 0,
highlightIndex = 0,
handleChangeFileIndex = () => {},
}) {
return (
<Wrapper>
<InfoItem>
JSON: {jsonFileIndex + 1} / {jsonLength}
</InfoItem>
<InfoItem>
DATA: {highlightIndex + 1} / {dataLength}
</InfoItem>
<InfoItem>Select JSON File:</InfoItem>
{jsonFileIndex > 0 && (
<ControllerBtn onClick={() => handleChangeFileIndex(jsonFileIndex - 1)}>
prev
</ControllerBtn>
)}
{jsonFileIndex < jsonLength - 1 && (
<ControllerBtn onClick={() => handleChangeFileIndex(jsonFileIndex + 1)}>
next
</ControllerBtn>
)}
</Wrapper>
)
}

const Wrapper = styled.div`
z-index: 150;
color: #ffffff;
position: absolute;
top: 48px;
left: 20px;
`

const InfoItem = styled.div`
margin-bottom: 8px;
`

const ControllerBtn = styled.button`
padding: 8px;
background: rgba(0, 0, 0, 0);
outline: none;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
& + & {
margin-left: 4px;
}
&:hover {
background: rgba(225, 225, 225, 0.3);
cursor: pointer;
}
`
Loading