feat!: remove all old deps

.babelrc

@@ -1,11 +1,26 @@
 {
   "presets": [
     ["@babel/preset-env", {
-      "modules": false
+      "modules": false,
+      "targets": "> 2%, not dead"
+    }],
+    ["@babel/preset-typescript", {
+      "isTSX": true,
+      "allExtensions": true
     }],
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
-  ]
+    "@babel/plugin-proposal-class-properties",
+  ],
+  "ignore": [
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ],
 }

.eslintrc.js

@@ -1,6 +1,39 @@
 module.exports = {
-    parser: 'babel-eslint',
-    extends: ['react-app', 'standard'],
-    plugins: ['jsx-a11y'],
+  parser: '@typescript-eslint/parser',
+  ignorePatterns: ['node_modules'],
+  parserOptions: {
+    project: './tsconfig.eslint.json'
+  },
+  plugins: ['import'],
+  extends: [
+    'react-app',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/typescript',
+    'ipfs',
+    'plugin:storybook/recommended'
+  ],
+  rules: {
+    'import/order': ['error', {
+      groups: [
+        'builtin', // Built-in types are first
+        ['external', 'unknown'],
+        ['parent', 'sibling', 'internal', 'index']
+      ],
+      'newlines-between': 'always',
+      alphabetize: {
+        order: 'asc',
+        caseInsensitive: true
+      },
+      warnOnUnassignedImports: true
+    }],
+    'import/extensions': ['error', 'never'], // Errors using extensions because ts + vite + babel + storybook needs.
+    'no-console': ['error', {
+      allow: ['error', 'info', 'time', 'timeEnd', 'warn']
+    }],
+    'no-warning-comments': ['off'],
+    strict: ['error', 'never'],
+    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }]
+  }
 }
-

.github/workflows/js-test-and-release.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 18
     - uses: ipfs/aegir/actions/cache-node-modules@master
     - run: npm run --if-present build
     - run: npm run --if-present storybook:build
@@ -33,7 +33,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
       - uses: ipfs/aegir/actions/cache-node-modules@master
       - uses: ipfs/aegir/actions/docker-login@master
         with:

.gitignore

@@ -30,3 +30,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+storybook-static

.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+
+import viteConfig from '../vite.config';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, viteConfig);
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import { type Preview } from '@storybook/react';
+
+// import CSS files
+import 'ipfs-css'
+import 'react-virtualized/styles.css'
+import 'tachyons'
+import '../src/components/loader/Loader.css'
+import '../src/components/object-info/LinksTable.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -12,7 +12,7 @@ This module was extracted from the [explore.ipld.io](https://github.com/ipfs/exp
 
 ## Usage
 
-**WARNING: This module is not intended to be re-used in it's current form by other projects.** It's just enough to work with a `create-react-app` set up, as long as you follow the steps below. There is much more work to do to make this a nice set of generic components.
+**WARNING: This module is not intended to be re-used in it's current form by other projects.** There is more work to do to make this a nice set of generic components.
 
 Install it from npm:
 
@@ -38,7 +38,8 @@ export {
   CidInfo,
   IpldGraph
   ObjectInfo,
-  exploreBundle
+  exploreBundle,
+  heliaBundle
 }
 ```
 
@@ -55,9 +56,36 @@ import 'ipld-explorer-components/dist/components/object-info/LinksTable.css'
 import 'ipld-explorer-components/dist/components/loader/Loader.css'
 ```
 
+### Adding another codec
+
+**NOTE:** PRs adding an old IPLDFormat codec would need the old `blockcodec-to-ipld-format` tool which has many out of date deps. We will only accept PRs for adding BlockCodec interface codecs.
+
+To add another codec you will need to:
+
+1. Add a dependency on the codec to this package
+1. Add the codec in the switch statement in src/lib/codec-importer.ts
+1. Add a unit test to src/lib/resolve-ipld-path.test.js and ensure that calling `resolveIpldPath` returns the expected results
+  * If the default `resolveFn` in src/lib/get-codec-for-cid.ts doesn't resolve your paths correctly, you will need to add a resolver method for your codec to the `codecResolverMap` in src/lib/get-codec-for-cid.ts
+
+see https://github.com/ipfs/ipld-explorer-components/pull/360#discussion_r1206251817 for history.
+
+### Redux-bundler requirements
+
+These components use [redux-bundler](https://reduxbundler.com/) and your app will need to use a redux-bundler provider in order to propogate the properties and selectors. You can find a basic example of this in ./dev/devPage.jsx.
+
+In short, these components export two bundles found in ./src/bundles: `explore` and `heliaBundle`. The explore bundle and components herein have a few redux-bundler selector dependencies that you need to make sure exist and are called properly.
+
+| Dependent          | redux-bundler selector | Notes                                                                                                         |
+|--------------------|------------------------|---------------------------------------------------------------------------------------------------------------|
+| explore bundle     | selectHeliaReady        | The explore bundle depends on this selector so it knows when the Helia node is available for use               |
+| explore & other bundles     | selectHelia        | The explore bundle gets the Helia node via this selector |
+| Main page (or any) | doInitHelia             | A consuming app needs to call this selector to tell the bundle that provides the Helia node to instantiate it. |
+
+If you don't want to use the `heliaBundle`, i.e. like we won't in ipfs-webui, then you will need to make sure you adapt the selectors as appropriate.
+
 ## Contribute
 
-Feel free to dive in! [Open an issue](https://github.com/ipfs-shipyard/ipld-explorer/issues/new) or submit PRs.
+Feel free to dive in! [Open an issue](https://github.com/ipfs/ipld-explorer-components/issues/new) or submit PRs.
 
 To contribute to IPFS in general, see the [contributing guide](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md).
 
@@ -69,7 +97,7 @@ To contribute to IPFS in general, see the [contributing guide](https://github.co
 - Update the version (`npm version major/minor/patch`)
 - Push the changes (`git push && git push --follow-tags`)
 - Update the [changelog](./CHANGELOG.md)
-- Add release notes to https://github.com/ipfs-shipyard/ipld-explorer-components/releases, use the tag and copy changelog changes
+- Add release notes to https://github.com/ipfs/ipld-explorer-components/releases, use the tag and copy changelog changes
 - Publish to npm (`npm publish`)
 
 ## License

dev/devPage.jsx

@@ -0,0 +1,117 @@
+/* globals globalThis */
+import { Buffer } from 'buffer'
+
+import 'ipfs-css'
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { I18nextProvider, withTranslation } from 'react-i18next'
+import 'react-virtualized/styles.css'
+import { composeBundles, createRouteBundle } from 'redux-bundler'
+import { Provider as ReduxStoreProvider, connect } from 'redux-bundler-react'
+import 'tachyons'
+
+import heliaBundle from '../src/bundles/helia'
+import '../src/components/loader/Loader.css'
+import '../src/components/object-info/LinksTable.css'
+import i18n from '../src/i18n'
+import { exploreBundle, ExplorePage, StartExploringPage, IpldExploreForm, IpldCarExploreForm } from '../src/index'
+
+globalThis.Buffer = Buffer
+
+const routesBundle = createRouteBundle(
+  {
+    '/explore*': ExplorePage,
+    '/': StartExploringPage,
+    '': StartExploringPage
+  },
+  {
+    routeInfoSelector: 'selectHash'
+  }
+)
+const getStore = composeBundles(
+  exploreBundle(),
+  routesBundle,
+  heliaBundle
+)
+
+const HeaderComponent = ({ t }) => {
+  const activeColor = 'navy 0-100'
+  const inActiveColor = 'navy o-50'
+  const [exploreFormType, setExploreFormType] = React.useState('cid')
+  const [cidColor, setCidColor] = React.useState(activeColor)
+  const [carColor, setCarColor] = React.useState(inActiveColor)
+
+  function handleOnChange (evt) {
+    setExploreFormType(evt.target.value)
+    if (evt.target.value === 'cid') {
+      setCidColor(activeColor)
+      setCarColor(inActiveColor)
+    } else {
+      setCidColor(inActiveColor)
+      setCarColor(activeColor)
+    }
+  }
+
+  return (
+    <header className='flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l'>
+      <a href='#/' title={t('homeLink')} className='flex-none v-mid'>
+        {/* <img src={ipfsLogo} alt='IPFS' style={{height: 50, width: 117.5}} /> */}
+      </a>
+      <div className='btn-group ph1 ph3-l pt1'>
+        <button onClick={handleOnChange} value="cid" className={`f6 pointer ph3 pv2 mb2 dib navy bg-aqua ${cidColor} border-navy br2 ba br--left`} aria-current="page">CID</button>
+        <button onClick={handleOnChange} value="car" className={`f6 pointer ph3 pv2 mb2 dib navy bg-aqua ${carColor} border-navy br2 ba br--right`} aria-current="page">CAR</button>
+      </div>
+      <div className='flex-auto ph2 ph0-l pt1'>
+        <div style={{ maxWidth: 560 }} className='center-m'>
+          {exploreFormType === 'cid' ? <IpldExploreForm /> : <IpldCarExploreForm />}
+        </div>
+      </div>
+      <div className='pt2 pt0-l ma0 inline-flex items-center'>
+        <h1 className='f3 fw2 montserrat aqua ttu'>{ t('appName') }</h1>
+        <div className='pl3'>
+          <a href='https://github.com/ipld/explore.ipld.io' target='_blank' rel="noopener noreferrer" aria-label='View source on GitHub'>
+            <svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 32.58 31.77'>
+              <path fill='#7f8491' d='M16.29 0a16.29 16.29 0 00-5.15 31.75c.82.15 1.11-.36 1.11-.79v-2.77C7.7 29.18 6.74 26 6.74 26a4.36 4.36 0 00-1.81-2.39c-1.47-1 .12-1 .12-1a3.43 3.43 0 012.49 1.68 3.48 3.48 0 004.74 1.36 3.46 3.46 0 011-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3 6.3 0 011.67-4.37 5.94 5.94 0 01.16-4.31s1.37-.44 4.48 1.67a15.41 15.41 0 018.16 0c3.11-2.11 4.47-1.67 4.47-1.67a5.91 5.91 0 01.2 4.28 6.3 6.3 0 011.67 4.37c0 6.26-3.81 7.63-7.44 8a3.85 3.85 0 011.11 3v4.47c0 .53.29.94 1.12.78A16.29 16.29 0 0016.29 0z'/>
+            </svg>
+          </a>
+        </div>
+    </div>
+
+    </header>
+  )
+}
+
+const Header = withTranslation('explore')(HeaderComponent)
+
+const PageRenderer = connect(
+  'selectRoute',
+  'selectQueryObject',
+  'doUpdateUrl',
+  'doInitHelia',
+  (props) => {
+    const Page = props?.route
+    const { embed } = props.queryObject
+    useEffect(() => {
+      props.doInitHelia()
+    }, [props])
+
+    return (
+      <>
+        <Header />
+        <div style={{ margin: '5vh 10vw' }}>
+          <Page embed={embed}/>
+        </div>
+      </>
+    )
+  }
+)
+
+const App = () => (
+  <ReduxStoreProvider store={getStore()}>
+    <I18nextProvider i18n={i18n}>
+      <PageRenderer />
+    </I18nextProvider>
+  </ReduxStoreProvider>
+)
+
+ReactDOM.render(<App />, document.getElementById('root'))

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <!-- https://vitejs.dev/guide/build.html#library-mode -->
+    <title>Dev view for ipld-explorer-components only</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      Vite uses /dev/devPage.jsx which uses built dependencies in /dist, because vite has different requirements for
+      typescript & jsx than babel+typescript, which we're required to use to get our bundled assets working properly
+      for explore.ipld.io
+    -->
+    <script type="module" src="/dev/devPage.jsx"></script>
+  </body>
+
+</html>