periplo-ui

v3.46.1

Published

a day ago

IATI UI library

0High
0Medium
0Low

Periplo UI: IATI UI Library

Description: Periplo UI is a TypeScript library built with React and shadcn-ui modified components, providing reusable and accessible UI components for building IATI compliant applications.

Getting Started:

Prerequisites:
- Node.js v20+ is required.
Installation:
```
npm install periplo-ui
```

Configuration:

Root Layout Setup (Next.js):

import { Providers } from '@src/providers/Providers';
import { Onest } from 'next/font/google';

const fontOnest = Onest({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-onest',
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es" className={fontOnest.variable}>
      <body className={`antialiased`}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Tailwind Configuration:

import type { Config } from 'tailwindcss';
import { periploTheme } from 'periplo-ui';

export default {
  content: [
    './node_modules/periplo-ui/dist/**/*.{js,ts,jsx,tsx}',
    '../../node_modules/periplo-ui/dist/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'selector',
  plugins: [periploTheme(), require('tailwindcss-animated')],
} satisfies Config;

Usage:
- Import component:
```
import { Badge } from 'periplo-ui'

function MyComponent() {
  return <Badge />
}
```
- Refer to documentation for individual component usage and API reference: https://periplo-ui.vercel.app/?path=/docs/getting-started--docs

🔧 Local Storybook Package Installation

You can test this Storybook package locally before publishing by following these steps:

📦 In the Storybook project:

Install dependencies:
```
npm install
```
Build the project (if needed):
```
npm run build
```
Package the project:
This will generate a .tgz file in the project root.
```
npm pack
```

📥 In the target project:

Install the package locally (replace the path with your .tgz file path):
```
npm install /path/to/your/file/periplo-ui-1.0.0.tgz --force
```

⚠️ Make sure to use the correct absolute or relative path to the .tgz file generated with npm pack.

Available Commands:

| Command | Description | | ------------------- | -------------------------------------------------------------- | | build | Builds all components for distribution (output dist) | | dev | Starts development server on localhost:6006 | | lint | Lints all code according to code style guidelines | | test | Runs unit and integration tests | | storybook | Starts the Storybook development server | | storybook-build | Builds Storybook documentation (output build-storybook-static) | | prepare | Setup git hooks and runs build before npm install | | update-dependencies | Updates all dependencies to their latest versions | | commit | Opens the Commitizen prompt for creating commit messages |

Published

Vulnerabilities

Links

Maintainers

Keywords