periplo-ui 1.6.0 → 1.7.0

package/README.md

@@ -1,15 +1,43 @@
-## Publishing the library
+# Periplo UI: IATI UI Library
 
-1. Build the package: `npm run build`
-2. Open `package.json`, update package description, author, repository, remove `"private": true`.
-3. Run `npm publish`
+**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.
 
-## Publishing docs to GitHub pages
+## Getting Started:
 
-Storybook static is built to `docs` directory which is under git. To publish it to GitHub Pages do this:
+1. **Prerequisites:**
 
-- Publish this repo to GitHub.
-- Run `npm run build-docs`, commit `docs` folder and push.
-- [Create a separate GitHub Pages repo](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#creating-a-repository-for-your-site) if you haven't yet.
-- [Set up GitHub pages for this project](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#creating-your-site) to build from `docs` folder from `main` branch.
-  - To do this go to this repo's settings and open `Pages` section (menu on the left side). Select `Source` -> `Deploy from a branch`, select `Branch` -> `main` and `/docs` folder.
+   - Node.js v20+ is required.
+
+2. **Installation:**
+
+   ```bash
+   npm install periplo-ui
+   ```
+
+3. **Usage:**
+
+   - Import component:
+
+     ```javascript
+     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
+
+## 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       |

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,12 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { type VariantProps } from 'class-variance-authority';
+import React from 'react';
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof avatarVariants> {
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+/**
+ * Avatar:
+ *  This is a React functional component created using React.forwardRef.
+ *  It accepts props such as className and size.
+ *  It renders the AvatarPrimitive.Root component with appropriate props and class names.
+
+ *AvatarImage and AvatarFallback:
+  * These are similar to the Avatar component but render different parts of the avatar, the image and fallback content.
+ */
+declare const meta: {
+    component: import("react").ForwardRefExoticComponent<import("./Avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+    tags: string[];
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithBadge: Story;

package/dist/components/Avatar/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    intent?: "neutral" | "primary" | "accent" | "success" | "warning" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLButtonElement>>;
+export { Badge };

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    component: import("react").ForwardRefExoticComponent<import("./Badge").BadgeProps & import("react").RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/components/Card/Card.d.ts

@@ -1,13 +1,9 @@
-import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const cardMediaVariants: (props?: ({
-    variant?: "vertical" | "horizontal" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface CardMediaProps extends React.ImgHTMLAttributes<HTMLImageElement>, VariantProps<typeof cardMediaVariants> {
+export interface CardMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     alt: string;
     src: string;
 }
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLImageElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Card, CardMedia, CardContent, cardMediaVariants };
+export { Card, CardMedia, CardContent };

package/dist/components/Card/Card.stories.d.ts

@@ -10,5 +10,4 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Vertical: Story;
-export declare const Horizontal: Story;
+export declare const Default: Story;

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,27 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import * as React from 'react';
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+export interface CarouselProps {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: 'horizontal' | 'vertical';
+    setApi?: (api: CarouselApi) => void;
+}
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+declare const CarouselContext: React.Context<CarouselContextProps | null>;
+declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselContext };

package/dist/components/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    component: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("./Carousel").CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/Carousel/Carousel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1 @@
+export * from './Carousel';

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { Button, buttonVariants, type ButtonProps } from './components/Button';
 export { Typography, typographyVariants, type TypographyProps } from './components/Typography';
-export { Card, CardMedia, CardContent, cardMediaVariants, type CardMediaProps } from './components/Card';
+export { Card, CardMedia, CardContent, type CardMediaProps } from './components/Card';
+export { Avatar, AvatarFallback, AvatarImage, type AvatarProps } from './components/Avatar';
+export { Badge, type BadgeProps } from './components/Badge';
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, } from './components/Carousel';
 export * from './lib/plugin';