markdown

Block Analitica UI Library

Welcome to the GitHub repository of the Block Analitica UI Library. This library is a comprehensive set of components and utilities designed specifically for building fast and efficient dashboard applications in the crypto project domain.

Features

• Layout Components: Utilize Box, Flex, and Stack for creating flexible and responsive layouts.
• SSR-Ready Components: A range of components like Table, Card, List, ErrorBox, and more, optimized for server-side rendering.
• Client-Only Components: Enhance your client-side interactivity with components like ThemeProvider, Tabs, etc.
• Customizable Themes: Choose from themes such as Atlas, makerdao-fyi, and more to style your dashboard.
• Internationalization Utilities: Functions like formatNumber, formatPercentage, and formatCurrency for global adaptability.
• React Hooks: A set of custom hooks like useThemeCustomProperties and useToggle for additional functionality.

Installation

# NPM
npm install @blockanalitica/ui

# Yarn
yarn add @blockanalitica/ui

# Bun
bun install @blockanalitica/ui

Usage

Here is a basic example to get you started:

import { Box, Table } from '@blockanalitica/ui';

function App() {
  return (
    <Box>
      <Table data={...} />
    </Box>
  );
}

Refer to our documentation for detailed usage of each component.

Development

1. Install Bun https://bun.sh/

curl -fsSL https://bun.sh/install | bash

2. Install libraries using bun install
3. Run storybook bun run storybook

To test your code, import it directly from the source code in the story

import { MyAtom } from '@atoms';

//... your story code

the only catch we still have is that types inside the library need to be imported from the relative path, we cannot use scoped relative paths.

// This will cause final bundle to not export the type to the library consumer
import { FlexProps } from '@atoms';

// Instead, we should import it like this
import { FlexProps } from 'path/to/atoms';

This is because types definitions are generated separatelly from bundle and there is still no (simple) way to resolve scoped imports for types.