use rollup

.babelrc.json

@@ -12,7 +12,7 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": []
 }

.eslintignore

@@ -1,2 +1,2 @@
-build/
+dist/
 storybook-static/

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-confusing-void-expression": "off"
+  }
+}

.gitignore

@@ -9,7 +9,6 @@ node_modules/
 
 # dist
 dist/
-build/
 
 # husky
 _/

.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../examples/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../examples/**/*.stories.@(tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

examples/control.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const Style = styled.div`

examples/lrc/auto_scroll.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React, { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 import styled, { css } from 'styled-components';
-import { Lrc, useRecoverAutoScrollImmediately } from '../..';
+import { Lrc, useRecoverAutoScrollImmediately } from '../../src';
 import useTimer from '../use_timer';
 import Control from '../control';
 

examples/lrc/index.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/function-component-definition */
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type ComponentStory } from '@storybook/react';
 import StaticComponent from './static';
 import AutoScrollComponent from './auto_scroll';
 import { lrc } from '../data';

examples/lrc/static.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React from 'react';
 import styled from 'styled-components';
-import { Lrc } from '../..';
+import { Lrc } from '../../src';
 import { formatMillisecond } from '../utils';
 
 const Line = styled.div`

examples/multiple_lrc/auto_scroll.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React, { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 import styled, { css } from 'styled-components';
-import { MultipleLrc, useRecoverAutoScrollImmediately } from '../..';
+import { MultipleLrc, useRecoverAutoScrollImmediately } from '../../src';
 import useTimer from '../use_timer';
 import Control from '../control';
 
@@ -80,7 +80,7 @@ function LrcDemo({
           lineRenderer={({ active, line: { children } }) => (
             <Line active={active}>
               {children.map((child) => (
-                <div>{child.content}</div>
+                <div key={child.id}>{child.content}</div>
               ))}
             </Line>
           )}

examples/multiple_lrc/index.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/function-component-definition */
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type ComponentStory } from '@storybook/react';
 import StaticComponent from './static';
 import { originalLrc, translatedLrc } from '../data';
 import AutoScrollComponent from './auto_scroll';

examples/multiple_lrc/static.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React from 'react';
 import styled from 'styled-components';
-import { MultipleLrc } from '../..';
+import { MultipleLrc } from '../../src';
 import { formatMillisecond } from '../utils';
 
 const Line = styled.div<{ active: boolean }>`