periplo-ui

v4.1.2

Published

6 days 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
```
Starting in v4.0.0, periplo-ui declares heavy libraries as peer dependencies so consumers control the versions and avoid duplicates. See MIGRATION.md for upgrade steps. Install only what your app uses:
- Always required: react, react-dom
- When using <Form> and form-bound inputs (MultiSelect, RadioGroup, InlineMultiSelect, DatePicker): react-hook-form, @hookform/resolvers, zod
- Per-component peers (install only if you import the component):
  - Calendar / DatePicker → react-day-picker, date-fns
  - Carousel → embla-carousel-react
  - Command / Combobox → cmdk
  - DataTable → @tanstack/react-table
  - Combobox / MultiSelect → @tanstack/react-virtual
  - Toaster → sonner
  - Any Radix-based component → its matching @radix-ui/react-*
  - Icons used in your app → @phosphor-icons/react
Quick install of everything (matches v3 behavior):
```
npm install periplo-ui react react-dom react-hook-form @hookform/resolvers zod \
  react-day-picker date-fns embla-carousel-react cmdk \
  @tanstack/react-table @tanstack/react-virtual sonner @phosphor-icons/react \
  @radix-ui/react-accordion @radix-ui/react-avatar @radix-ui/react-checkbox \
  @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu \
  @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-progress \
  @radix-ui/react-radio-group @radix-ui/react-select @radix-ui/react-separator \
  @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-toggle \
  @radix-ui/react-toggle-group @radix-ui/react-tooltip
```
After install, run npm dedupe (or pnpm dedupe) and verify only one copy is present, e.g.:
```
npm ls react-hook-form    # must show exactly one entry
npm ls zod                # must show exactly one entry
```

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