Skip to content

README.md

Latest commit

 

History

History
131 lines (82 loc) · 2.57 KB

README.md

File metadata and controls

131 lines (82 loc) · 2.57 KB

CFDE Navigation Wheel

The CFDE Navigation Wheel is a reusable UI component that renders an interactive navigation wheel for the Common Fund Data Ecosystem (CFDE), allowing users to visually explore CFDE portal links and resources.

This package adds the CFDE Navigation Wheel to your site: alt text

Features

  • Embeddable React/JavaScript component
  • Designed to integrate seamlessly into modern web apps
  • Provides visual navigation consistent with CFDE branding
  • Includes Storybook for local development and preview

Installation

Prerequisites

Before installing, ensure you have:

  • Node.js ≥ 14
  • npm or yarn
  • A project that supports npm modules (e.g. React, Next.js)

Install from GitHub

This package is not published to npm. Install it directly from GitHub.

Using SSH:

npm install git+ssh://github.com/MaayanLab/cfde-wheel.git

Using HTTPS:

npm install https://github.com/MaayanLab/cfde-wheel.git

This package is written in TypeScript. Make sure your build setup supports TypeScript dependencies.

Usage

React / Next.js

import CFDEWheel from "cfde-wheel";

export default function MyApp() {
  return <CFDEWheel />;
}

Next.js (App Router) Notes

If you are using Next.js with the App Router, mark the component as a client component:

'use client';

import CFDEWheel from "cfde-wheel";

export default function Home() {
  return <CFDEWheel />;
}

This component relies on browser APIs and must be rendered on the client.

Development

To work on the component locally:

Install Dependencies

npm install

Run Storybook

Storybook is included for local development and UI preview:

npm run storybook

This will start Storybook (usually at http://localhost:6006) where you can view and interact with the navigation wheel in isolation.

Build

To build the component:

npm run build

This will generate the production build output (typically in a dist/ directory).

Alternative: Browser Embed

If you need a browser-ready embed, see the related repository:

That project provides a bundled version of the wheel that can be embedded via a <script> tag.

Example Layout Usage

function Sidebar() {
  return (
    <aside>
      <CFDEWheel />
    </aside>
  );
}

Notes

To get the most up-to-date DCC list, add raw.githubusercontent.com to your Content Security Policy. Otherwise, the wheel will default to the dccs.json at the time of install.