@mbao01/ui 0.1.1 → 0.1.3

package/README.md

@@ -30,13 +30,14 @@ npm install @mbao01/ui
 3. Configure tailwind
 
 ```typescript
-const plugin = require("@mbao01/ui/plugin") // -> import the library plugin
-
 export default {
-  ...plugin.config, // -> add the library plugin config
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "node_modules/@mbao01/ui/src/**/*.{js,ts,jsx,tsx,mdx}" // -> ensure to add this to allow tailwind to scan the library for classes
+    "node_modules/@mbao01/ui/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
+    ...
+  ],
+  "plugins": [
+    require("@mbao01/ui/plugin"), // -> import the library plugin
+    ...
   ]
 }
 ```

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

@@ -0,0 +1,2 @@
+import { type BadgeProps } from "./types";
+export declare const Badge: ({ size, outline, variant, children, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import type { BadgeSize, BadgeVariant } from "./types";
+export declare const getBadgeClasses: ({ size, variant, }: {
+    size?: BadgeSize | undefined;
+    variant?: BadgeVariant | undefined;
+}) => string;

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

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

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

@@ -0,0 +1,7 @@
+export type BadgeSize = "xs" | "sm" | "md" | "lg";
+export type BadgeVariant = "neutral" | "primary" | "secondary" | "accent" | "ghost" | "info" | "success" | "warning" | "error";
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    size?: BadgeSize;
+    outline?: boolean;
+    variant?: BadgeVariant;
+};

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

@@ -0,0 +1,8 @@
+import { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps } from "./types";
+declare const Card: ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardDescription: ({ className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardContent: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardImage: ({ className, src, alt, ...props }: CardImageProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardFooter: ({ className, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardDescription, CardContent, CardImage, };

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

@@ -0,0 +1 @@
+export * from "./Card";

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

@@ -0,0 +1,24 @@
+import React from "react";
+export type CardProps = {
+    /**
+     * applies smaller padding to the card.
+     */
+    compact?: boolean;
+    /**
+     * applies border to the card.
+     */
+    bordered?: boolean;
+    /**
+     * shows the card horizontally with image to the right or left of it.
+     */
+    horizontal?: boolean;
+    /**
+     * overlay is used to make the image full width with the content on top.
+     */
+    overlay?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

package/dist/types/components/Detail/Detail.d.ts

@@ -0,0 +1,2 @@
+import { type DetailProps } from './types';
+export declare const Detail: ({ term, children }: DetailProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Detail/index.d.ts

@@ -0,0 +1 @@
+export { Detail } from './Detail';

package/dist/types/components/Detail/types.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export type DetailProps = {
+    term: string;
+    children: ReactNode;
+};

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,2 @@
+import { type TooltipProps } from './types';
+export declare const Tooltip: ({ tip, children, variant, position, className }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Tooltip/constants.d.ts

@@ -0,0 +1,5 @@
+import type { TooltipPosition, TooltipVariant } from "./types";
+export declare const getTooltipClasses: ({ variant, position, }: {
+    variant?: TooltipVariant | undefined;
+    position?: TooltipPosition | undefined;
+}) => string;

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/dist/types/components/Tooltip/types.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
+export type TooltipProps = {
+    tip: string;
+    children: ReactNode;
+    variant?: TooltipVariant;
+    position?: TooltipPosition;
+    className?: string;
+};

package/dist/types/index.d.ts

@@ -1,4 +1,8 @@
+export * from "./components/Badge";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Detail";
 export * from "./components/Link";
 export * from "./components/Text";
+export * from "./components/Tooltip";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -26,7 +26,9 @@
     "type": "git",
     "url": "git+https://github.com/mbao01/mbao01.git"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
@@ -39,50 +41,51 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.16",
-    "clsx": "^2.0.0",
-    "daisyui": "^4.4.24"
+    "@mbao01/common": "^0.0.2",
+    "autoprefixer": "^10.4.17",
+    "clsx": "^2.1.0",
+    "daisyui": "^4.6.2"
   },
   "devDependencies": {
     "@heroicons/react": "^2.1.1",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/addon-themes": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
-    "@storybook/test": "^7.6.6",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-themes": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-vite": "^7.6.14",
+    "@storybook/test": "^7.6.14",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.1.1",
-    "@vitest/ui": "^1.1.1",
-    "eslint": "^8.55.0",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vitest/ui": "^1.2.2",
+    "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "jsdom": "^23.0.1",
+    "jsdom": "^23.2.0",
     "path": "^0.12.7",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3",
-    "storybook": "^7.6.10",
+    "react-router-dom": "^6.22.0",
+    "storybook": "^7.6.14",
     "storybook-addon-react-router-v6": "^2.0.10",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.7.0",
-    "vitest": "^1.1.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-plugin-dts": "^3.7.2",
+    "vitest": "^1.2.2"
   },
   "peerDependencies": {
     "@heroicons/react": "^2.1.1",
@@ -93,5 +96,5 @@
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "a8f9e309d549d280a3c3b1048ab7946d554744bd"
+  "gitHead": "00988bf0b2318917bab272a8fb5920e451f67edf"
 }

package/plugin.js

@@ -1,10 +1,3 @@
-const plugin = require("tailwindcss/plugin");
-const config = require("./tailwind.config");
+const daisyui = require("daisyui");
 
-const { theme, plugins, daisyui } = config;
-
-module.exports = plugin(() => null, {
-  theme,
-  plugins,
-  daisyui,
-});
+module.exports = daisyui;

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,28 @@
+import c from "clsx";
+import { getBadgeClasses } from "./constants";
+import { type BadgeProps } from "./types";
+
+export const Badge = ({
+  size,
+  outline,
+  variant = "ghost",
+  children,
+  className,
+  ...props
+}: BadgeProps) => {
+  return (
+    <span
+      {...props}
+      className={c(
+        getBadgeClasses({ size, variant }),
+        {
+          "badge-outline": outline,
+          "text-base-200": !["ghost", "neutral"].includes(variant),
+        },
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/Badge/constants.ts

@@ -0,0 +1,31 @@
+import c from "clsx";
+import type { BadgeSize, BadgeVariant } from "./types";
+
+const BADGE_SIZE = {
+  xs: c("badge-xs"),
+  sm: c("badge-sm"),
+  md: c("badge-md"),
+  lg: c("badge-lg"),
+} satisfies Record<BadgeSize, string>;
+
+const BADGE_VARIANTS = {
+  accent: c("badge-accent"),
+  error: c("badge-error"),
+  ghost: c("badge-ghost"),
+  info: c("badge-info"),
+  neutral: c("badge-neutral"),
+  primary: c("badge-primary"),
+  secondary: c("badge-secondary"),
+  success: c("badge-success"),
+  warning: c("badge-warning"),
+} satisfies Record<BadgeVariant, string>;
+
+export const getBadgeClasses = ({
+  size,
+  variant,
+}: {
+  size?: BadgeSize;
+  variant?: BadgeVariant;
+}) => {
+  return c("badge", BADGE_VARIANTS[variant!], BADGE_SIZE[size!]);
+};

package/src/components/Badge/index.ts

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

package/src/components/Badge/types.ts

@@ -0,0 +1,18 @@
+export type BadgeSize = "xs" | "sm" | "md" | "lg";
+
+export type BadgeVariant =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "ghost"
+  | "info"
+  | "success"
+  | "warning"
+  | "error";
+
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+  size?: BadgeSize;
+  outline?: boolean;
+  variant?: BadgeVariant;
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,64 @@
+import c from "clsx";
+import {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardImageProps,
+  CardProps,
+} from "./types";
+
+const Card = ({
+  compact,
+  bordered,
+  horizontal,
+  overlay,
+  className,
+  ...props
+}: CardProps) => (
+  <div
+    className={c(
+      "card",
+      {
+        "card-bordered": bordered,
+        "card-compact": compact,
+        "card-normal": !compact,
+        "image-full": overlay,
+        "card-side": horizontal,
+      },
+      className
+    )}
+    {...props}
+  />
+);
+
+const CardHeader = ({ className, ...props }: CardHeaderProps) => (
+  <h3 className={c("card-title", className)} {...props} />
+);
+
+const CardDescription = ({ className, ...props }: CardDescriptionProps) => (
+  <p className={c("text-sm text-muted-foreground", className)} {...props} />
+);
+
+const CardContent = ({ className, ...props }: CardContentProps) => (
+  <div className={c("card-body p-6 pt-0", className)} {...props} />
+);
+
+const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
+  <figure>
+    <img className={className} src={src} alt={alt} {...props} />
+  </figure>
+);
+
+const CardFooter = ({ className, ...props }: CardFooterProps) => (
+  <div className={c("card-actions", className)} {...props} />
+);
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardDescription,
+  CardContent,
+  CardImage,
+};

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export * from "./Card";

package/src/components/Card/types.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+export type CardProps = {
+  /**
+   * applies smaller padding to the card.
+   */
+  compact?: boolean;
+  /**
+   * applies border to the card.
+   */
+  bordered?: boolean;
+  /**
+   * shows the card horizontally with image to the right or left of it.
+   */
+  horizontal?: boolean;
+  /**
+   * overlay is used to make the image full width with the content on top.
+   */
+  overlay?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

package/src/components/Detail/Detail.tsx

@@ -0,0 +1,10 @@
+import { type DetailProps } from './types';
+
+export const Detail = ({ term, children }: DetailProps) => {
+  return (
+    <dl>
+      <dt className="mb-1 py-2 text-sm font-medium">{term}</dt>
+      <dd className="text-base">{children}</dd>
+    </dl>
+  );
+};

package/src/components/Detail/index.ts

@@ -0,0 +1 @@
+export { Detail } from './Detail';

package/src/components/Detail/types.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+
+export type DetailProps = {
+  term: string;
+  children: ReactNode;
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,11 @@
+import c from 'clsx';
+import { getTooltipClasses } from './constants';
+import { type TooltipProps } from './types';
+
+export const Tooltip = ({ tip, children, variant, position, className }: TooltipProps) => {
+  return (
+    <div className={c(getTooltipClasses({ variant, position }), className)} data-tip={tip}>
+      {children}
+    </div>
+  );
+};

package/src/components/Tooltip/constants.ts

@@ -0,0 +1,33 @@
+import c from "clsx";
+import type { TooltipPosition, TooltipVariant } from "./types";
+
+const TOOLTIP_POSITION = {
+  top: c("tooltip-top"),
+  right: c("tooltip-right"),
+  bottom: c("tooltip-bottom"),
+  left: c("tooltip-left"),
+} satisfies Record<TooltipPosition, string>;
+
+const TOOLTIP_VARIANTS = {
+  accent: c("tooltip-accent"),
+  default: c("tooltip-default"),
+  error: c("tooltip-error"),
+  ghost: c("tooltip-ghost"),
+  info: c("tooltip-info"),
+  link: c("tooltip-link"),
+  neutral: c("tooltip-neutral"),
+  primary: c("tooltip-primary"),
+  secondary: c("tooltip-secondary"),
+  success: c("tooltip-success"),
+  warning: c("tooltip-warning"),
+} satisfies Record<TooltipVariant, string>;
+
+export const getTooltipClasses = ({
+  variant,
+  position,
+}: {
+  variant?: TooltipVariant;
+  position?: TooltipPosition;
+}) => {
+  return c("tooltip", TOOLTIP_VARIANTS[variant!], TOOLTIP_POSITION[position!]);
+};

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/src/components/Tooltip/types.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type TooltipVariant =
+  | 'default'
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'ghost'
+  | 'link'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+export type TooltipProps = {
+  tip: string;
+  children: ReactNode;
+  variant?: TooltipVariant;
+  position?: TooltipPosition;
+  className?: string;
+};

package/src/index.ts

@@ -1,4 +1,8 @@
+export * from "./components/Badge";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Detail";
 export * from "./components/Link";
 export * from "./components/Text";
+export * from "./components/Tooltip";