Synapsis UI

A React component library for Synapsis that can be used in various projects, including Next.js.

Features

This library provides consistent and reusable UI components:

• Typography components (Heading)
• Built with TypeScript for type safety
• Uses Tailwind CSS and tailwind-variants for styling
• Documentation with Storybook
• Built with Rollup to produce optimal bundles
• Supports ESM and CommonJS formats

Installation

npm install synapsis-ui
# or
yarn add synapsis-ui

Usage

Provider

SynapsisProvider

The SynapsisProvider component is a wrapper around MantineProvider with pre-configured theme. It should be used at the root of your application to enable Synapsis Design System components.

Important CSS Import

You need to manually import Mantine CSS in your application:

// Import this in your _app.tsx or main entry file
import '@mantine/core/styles.css';

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | children | React.ReactNode | Required | Children components to be wrapped by the provider. | | customTheme | MantineProviderProps['theme'] | undefined | Optional custom theme that will be merged with the default theme. |

Example

// In your _app.tsx or main entry file
import '@mantine/core/styles.css'; // Import Mantine CSS manually
import { SynapsisProvider } from 'synapsis-ui'

function App() {
  return (
    <SynapsisProvider>
      <YourApp />
    </SynapsisProvider>
  )
}

Tailwind CSS Configuration

This library uses Tailwind CSS. Make sure you have configured Tailwind CSS in your project. Add the following configuration to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ... other configurations
  theme: {
    extend: {
      // Add any custom theme extensions if needed
    },
  },
  // ... other configurations
};

Using Components

import { Heading } from 'synapsis-ui';

function MyComponent() {
  return (
    <div>
      <Heading size="xxlarge">This is Heading XXLarge</Heading>
      <Heading size="xlarge">This is Heading XLarge</Heading>
      <Heading size="large">This is Heading Large</Heading>
      <Heading size="medium">This is Heading Medium</Heading>
      <Heading size="small">This is Heading Small</Heading>
      <Heading size="xsmall">This is Heading XSmall</Heading>
      <Heading size="xxsmall">This is Heading XXSmall</Heading>
    </div>
  );
}

Components

Typography

Heading

The Heading component is used to display text with different heading styles.

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | size | 'xxlarge' \| 'xlarge' \| 'large' \| 'medium' \| 'small' \| 'xsmall' \| 'xxsmall' | 'medium' | Size of the heading. Controls the visual appearance and maps to appropriate HTML tag. | | className | string | undefined | Additional CSS class names to apply to the heading. | | children | React.ReactNode | Required | Content of the heading. |

Size to HTML Tag Mapping

| Size | HTML Tag | Font Size | | ---- | -------- | --------- | | xxlarge | h1 | 36px | | xlarge | h2 | 32px | | large | h3 | 28px | | medium | h4 | 24px | | small | h5 | 20px | | xsmall | h6 | 18px | | xxsmall | h6 | 16px |

npm scripts

Build and dev scripts

• dev – start development server
• build:lib – build library using Rollup
• build:vite – build production version of the app using Vite
• build – alias for build:lib
• preview – locally preview production build

Testing scripts

• typecheck – checks TypeScript types
• lint – runs Biome linter
• lint:fix – runs Biome linter and fixes issues automatically
• format – formats all files with Biome
• vitest – runs vitest tests
• vitest:watch – starts vitest watch
• test – runs typecheck, prettier, lint, vitest and build scripts

Other scripts

• storybook – starts storybook dev server
• storybook:build – build production storybook bundle to storybook-static
• prepublishOnly – runs before publishing the package
• publish – publishes the package to npm
• lint-staged – runs linters on staged files
• prepare – sets up husky for git hooks

Development

Running Storybook

yarn storybook

Dark/Light Theme

Storybook supports dark and light themes. You can switch between themes using the theme toggle button in the Storybook toolbar. The theme configuration is implemented in the .storybook/preview.tsx file using Storybook 9's built-in features.

Building the Library

yarn build

License

MIT