Convert to Typescript, remove NWB

.eslintignore

@@ -1,4 +1,2 @@
-es
-lib
-umd
+/index.*
 demo/dist

.eslintrc.json

@@ -1,12 +1,28 @@
- {
-   "extends": "airbnb",
-   "parser": "babel-eslint",
-   "env": {
-     "browser": true
-   },
-   "rules": {
-     "react/jsx-filename-extension": 0,
-     "import/no-extraneous-dependencies": 0,
-     "react/jsx-props-no-spreading": 0
-   }
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    // Uses the recommended rules from @eslint-plugin-react
+    "plugin:react/recommended",
+    // No react-import
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "plugin:@typescript-eslint/recommended",
+    // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+  }
 }

.github/workflows/test.yml

@@ -7,6 +7,9 @@ jobs:
 
         runs-on: ubuntu-latest
 
+        env:
+            CI: true
+
         strategy:
             matrix:
                 node-version: [14.x, 16.x, 18.x]
@@ -17,9 +20,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
+            - run: npm install -g npm@latest # to support newer lock file
             - run: npm ci
             - run: npm run lint
-            - run: echo "NODE_OPTIONS=--openssl-legacy-provider" >> $GITHUB_ENV
-              if: ${{ matrix.node-version == '18.x' }}
-            - run: npm run test:coverage
-            - run: echo "NODE_OPTIONS=" >> $GITHUB_ENV
+            - run: npm run test

.gitignore

@@ -1,8 +1,6 @@
 /coverage
 /demo/dist
-/es
-/lib
 /node_modules
-/umd
 npm-debug.log*
 .idea
+/index.*

README.md

@@ -10,6 +10,11 @@ A responsive container for displaying tables traditionally on wide screens and w
 
 `npm install react-hyper-responsive-table`
 
+This module uses `useSyncExternalStore`, which was introduced in React 18. If you are still using React 17 or older, also install
+[use-sync-external-store](https://www.npmjs.com/package/use-sync-external-store):
+
+`npm install use-sync-external-store`
+
 ## Example
 
 ```jsx

babel.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-typescript',
+      {
+        isTSX: true,
+        jsxPragma: 'h',
+        allExtensions: true,
+        allowNamespaces: false,
+        allowDeclareFields: true,
+      },
+    ],
+
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
+};

demo/src/index.tsx

@@ -0,0 +1,84 @@
+import { render } from 'react-dom';
+import { ReactNode, useState } from 'react';
+import './demo.css';
+import ReactHyperResponsiveTable from '../../src';
+
+interface DataType {
+  image: ReactNode;
+  name: string;
+  role: ReactNode;
+}
+
+const headers: DataType = {
+  image: '',
+  name: 'Name',
+  role: 'Role',
+};
+
+const rows: DataType[] = [
+  {
+    name: 'Marlon Brando',
+    role: <a href="https://en.wikipedia.org/wiki/Vito_Corleone">Vito Corleone</a>,
+    image: <img src="https://upload.wikimedia.org/wikipedia/en/2/21/Godfather15_flip.jpg" alt="Vito Corleone" />,
+  },
+  {
+    image: <img src="https://upload.wikimedia.org/wikipedia/en/d/df/Michaelcoreleone.jpg" alt="Al Pacino" />,
+    name: 'Al Pacino',
+    role: <a href="https://en.wikipedia.org/wiki/Michael_Corleone">Michael Corleone</a>,
+  },
+  {
+    image: <img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Santino_corleone_2.jpg" alt="Santino Corleone" />,
+    name: 'James Caan',
+    role: <a href="https://en.wikipedia.org/wiki/Santino_Corleone">Santino Corleone</a>,
+  },
+  {
+    image: <img src="https://upload.wikimedia.org/wikipedia/en/6/67/Tom_Hagen.jpg" alt="Tom Hagen" />,
+    name: 'Robert Duvall',
+    role: <a href="https://en.wikipedia.org/wiki/Tom_Hagen">Tom Hagen</a>,
+  },
+  {
+    image: <img src="https://upload.wikimedia.org/wikipedia/en/e/e7/FredoCorleone.jpg" alt="Fredo Corleone" />,
+    name: 'John Cazale',
+    role: <a href="https://en.wikipedia.org/wiki/Fredo_Corleone">Fredo Corleone</a>,
+  },
+  {
+    image: <img src="https://upload.wikimedia.org/wikipedia/tr/9/9c/Godf3Connie2.jpg" alt="Connie Corleone" />,
+    name: 'Talia Shire',
+    role: <a href="https://en.wikipedia.org/wiki/Connie_Corleone">Connie Corleone</a>,
+  },
+];
+const keyGetter = row => row.name;
+
+const Demo = () => {
+  const [breakpoint, setBreakpoint] = useState(578);
+
+  return (
+    <div>
+      <h1>react-hyper-responsive-table {process.env.VERSION} demo</h1>
+      <p>
+        <a href={process.env.REPOSITORY}>Visit on GitHub</a>
+      </p>
+      <p>
+        <label htmlFor="breakpoint">Breakpoint</label>:{' '}
+        <input
+          type="number"
+          id="breakpoint"
+          value={breakpoint}
+          min={1}
+          max={4096}
+          onChange={e => e.currentTarget.valueAsNumber && setBreakpoint(e.currentTarget.valueAsNumber)}
+        />
+      </p>
+      <ReactHyperResponsiveTable
+        headers={headers}
+        rows={rows}
+        keyGetter={keyGetter}
+        breakpoint={breakpoint}
+        withClasses
+        tableStyling={({ narrow }) => (narrow ? 'narrowtable' : 'widetable')}
+      />
+    </div>
+  );
+};
+
+render(<Demo />, document.querySelector('body'));

demo/src/rollup.config.mjs

@@ -0,0 +1,52 @@
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import css from 'rollup-plugin-import-css';
+import commonjs from '@rollup/plugin-commonjs';
+import html from '@rollup/plugin-html';
+import terser from '@rollup/plugin-terser';
+import replace from '@rollup/plugin-replace';
+import pkg from '../../package.json' assert { type: 'json' };
+
+const inputDir = dirname(fileURLToPath(import.meta.url));
+const outputDir = join(inputDir, '..', 'dist');
+
+export default {
+  input: join(inputDir, 'index.tsx'),
+  external: [''],
+  output: [
+    {
+      dir: outputDir,
+      format: 'es',
+      sourcemap: false,
+    },
+  ],
+  plugins: [
+    nodeResolve({ browser: true }),
+    commonjs({}),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+      },
+    }),
+    terser({
+      compress: { global_defs: { 'process.env.NODE_ENV': 'production' } },
+    }),
+    css({}),
+    html({
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width,initial-scale=1,shrink-to-fit=no' },
+      ],
+      title: `react-hyper-responsive-table ${pkg.version} demo`,
+    }),
+    replace({
+      preventAssignment: true,
+      'process.env.VERSION': JSON.stringify(pkg.version),
+      'process.env.REPOSITORY': JSON.stringify(pkg.repository.url.replace('git://', 'https://').replace('.git', '')),
+    }),
+  ],
+};