Client for InterPro 99.0

.eslintrc.js

@@ -444,7 +444,13 @@ module.exports = {
   settings,
   parser,
   parserOptions,
-  extends: extending,
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:jsx-a11y/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
   plugins,
   env,
   rules,

.storybook/interpro.theme.ts

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'InterPro 7',
+  brandUrl: 'https://www.ebi.ac.uk/interpro',
+  brandImage:
+    'https://raw.githubusercontent.com/ProteinsWebTeam/interpro7-client/master/src/images/logo/logo_InterPro.png',
+});

.storybook/main.ts

@@ -0,0 +1,98 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import * as path from 'path';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import postCSSImport from 'postcss-import';
+import postcssPresetEnv from 'postcss-preset-env';
+import { RuleSetRule } from 'webpack';
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
+    {
+      name: '@storybook/addon-styling-webpack',
+
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  modules: {
+                    mode: 'local',
+                    localIdentName: '[folder]_[name]__[local]___[hash:2]',
+                  },
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  implementation: require.resolve('postcss'),
+                  postcssOptions: {
+                    plugins: [postCSSImport, postcssPresetEnv({ stage: 0 })],
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async webpackFinal(config) {
+    // do mutation to the config
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.modules) config.resolve.modules = [];
+    if (!config.module) config.module = {};
+    if (!config.module.rules) config.module.rules = [];
+    config.resolve.plugins = [
+      new TsconfigPathsPlugin({
+        configFile: path.resolve('.', 'stories', 'tsconfig.json'),
+      }),
+    ];
+    config.resolve.modules.push(path.resolve('.', 'src'));
+
+    const cssRule = config.module.rules.find((rule) =>
+      ((rule as RuleSetRule).test || '').toString().includes('.css')
+    );
+
+    (cssRule as RuleSetRule).exclude = /((clanviewer))\.css$/i;
+
+    config.module.rules.push({
+      test: /((clanviewer))\.css$/i,
+      use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+    });
+    config.module.rules.push({
+      test: /\.yml$/i,
+      use: [{ loader: 'yaml-loader' }],
+    });
+    config.module.rules.push({
+      test: /\.(jpe?g|png|gif|svg|avif)$/i,
+      type: 'asset/resource',
+    });
+    return config;
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import interproTheme from './interpro.theme';
+
+addons.setConfig({
+  theme: interproTheme,
+});

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <link
+          rel="stylesheet"
+          href="https://assets.emblstatic.net/vf/v2.5.10/css/styles.css"
+        />
+
+        <Story />
+      </>
+    ),
+  ],
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["src/**/*", "../src/custom.d.ts"]
+  }
+

config.yml.example

@@ -11,7 +11,9 @@ root:
   repeatsDB: https://repeatsdb.bio.unipd.it/api/search
   disprot: https://disprot.org/api/
   LLMFeedback: https://docs.google.com/forms/d/e/1FAIpQLSc9lPkgGOZBpnyLiHF87AbUYdAWyx_3YFTNNg4MGQEcqAK4jQ/viewform?usp=pp_url&entry.128814244=
-
+  Rfam: https://www.ebi.ac.uk/ebisearch/ws/rest/rfam
+  UniProt: https://rest.uniprot.org/
+
 title: InterPro
 
 github: