feat!: remove all old deps (#360)

* feat: migrate to vite * fix: polyfills and other stuff * feat: parsing of root XKCD and 1 child node works * feat: verify raw block, cache blocks in helia * fix: cleanup get-codec-for-cid & ensure eth support * fix: graph rendering * fix: verify blocks on the client side * fix: dag-pb node navigation * fix: wikipedia explore works url is localhost:port/#/explore/bafybeiaysi4s6lnjev27ln5icwm6tueaw2vdykrtjkwiphwekaywqhcjze based on latest hash from https://github.com/ipfs/distributed-wikipedia-mirror/blob/1aa50702fc6d8e2be106e37d4c68dc2ca5b94f20/snapshot-hashes.yml#LL13C10-L13C69 * feat: update start-exploring page with more examples * feat: add ipfs-geoip example fixes #355 * fix: dont split path in Path component * fix: typings * feat: remove multibase and multihashes deps * chore: cleanup explore bundle * chore: trying to get build working - get explore.ipld.io to work with this package * chore: trying to bundle with rollup * tmp: messsssyyyy * fix: build works (mostly) in explore.ipld.io * chore: separate vite more * fix: fix loading in ipld-explorer-components * tmp * chore: cjs-esm-react-scripts-hell * Revert "chore: cjs-esm-react-scripts-hell" This reverts commit ca0a50b. * fix: works in explore.ipld.io * fix: ethereum block and types * fix: ipld-eth dynamic imports * fix: dependency in explore.ipld.io * chore: update github workflows node-version * Update src/components/StartExploringPage.jsx Co-authored-by: Marcin Rataj <[email protected]> * Update src/components/StartExploringPage.jsx Co-authored-by: Marcin Rataj <[email protected]> * Update src/components/object-info/ObjectInfo.jsx Co-authored-by: Marcin Rataj <[email protected]> * Update src/components/object-info/ObjectInfo.jsx Co-authored-by: Marcin Rataj <[email protected]> * Update vite.config.ts * Update vite.config.ts * Update vite.config.ts * Update vite.config.ts * Update vite.config.ts * Update index.html * chore: cleanup * fix: lint runs (currently failing) * fix: address some eslint rules * fix: npm run dev works again * fix: use header in devPage * feat: fix car-import functionality * fix: consolidate decodeCid function * fix: improve base-importer * fix: lint problems * fix: one test for resolveIpldPath * fix: all tests pass * fix: add stream-to-it types * chore: lint before build * fix: vite from src instead of dist to get hot-reloading * fix: dev and prod build work * fix: storybook works (#361) * fix: get storybook working * fix: babel,eslint,typescript,storybook works * fix: invalid import in explore.ipld.io * fix: use in explore.ipld.io * chore: remove ethereum example * chore: reorder explore examples see https://github.com/ipfs/ipld-explorer-components/pull/360\#discussion_r1214542011 * feat: add dag-json example and load in helia on startup * fix: reduce networking overhead * fix: prefer trustless gateway * chore: start libp2p by default until bug is fixed * fix: networking improvements * chore: remove unnecessary libp2p config for exploring * test: add test for failure case * test: fix loading of dag-cbor example cheese path * chore: cleanup vite index.html * chore: revert locales loadPath change * chore: address all code cleanup PR comments * fix: remove blockcodec-to-ipld-format * chore!: remove ipld-ethereum * fix: access dynamic import via default prop * fix: storybook issue * docs: update readme with redux-bundler description * fix: change helia-bundle namespace * fix: node style selection and multicodec isolation * fix: attempt to fetch block from kubo client directly * fix: toHex function in extract-info * chore: address pr comments * test: fix src/lib/resolve-ipld-path.test.js --------- Co-authored-by: Marcin Rataj <[email protected]>
ipfs · Jun 8, 2023 · 9fbaf6b · 9fbaf6b
1 parent 7eefce2
commit 9fbaf6b
Show file tree

Hide file tree

Showing 86 changed files with 26,891 additions and 65,378 deletions.
diff --git a/.babelrc b/.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"
+  ],
 }
diff --git a/.eslintrc.js b/.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'] }]
+  }
 }
-
diff --git a/.github/workflows/js-test-and-release.yml b/.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:

diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+storybook-static
diff --git a/.storybook/addons.js b/.storybook/addons.js
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/.storybook/main.ts b/.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;
diff --git a/.storybook/preview.ts b/.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;
diff --git a/README.md b/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

diff --git a/custom-jest-env.js b/custom-jest-env.js
diff --git a/dev/devPage.jsx b/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'))
diff --git a/index.html b/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>