@mbao01/common 0.0.1

package/.eslintrc.cjs

@@ -0,0 +1,34 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs", "storybook-static"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
+    tsconfigRootDir: __dirname,
+  },
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

package/README.md

@@ -0,0 +1,30 @@
+
+Shared react meta-framework agnostic components used by [@mbao01/ui](https://www.npmjs.com/package/@mbao01/ui) and [@mbao01/next](https://www.npmjs.com/package/@mbao01/next)
+
+
+```bash
+pnpm add @mbao01/common
+```
+
+or
+
+```bash
+npm install @mbao01/common
+```
+
+2. Install tailwind - do so by following the [installation guide](https://tailwindcss.com/docs/installation)
+
+3. Configure tailwind
+
+```typescript
+export default {
+  content: [
+    "node_modules/@mbao01/common/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
+    ...
+  ],
+  "plugins": [
+    require("@mbao01/common/plugin"), // -> import the library plugin
+    ...
+  ]
+}
+```

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@mbao01/common",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "author": "Ayomide Bakare",
+  "license": "MIT",
+  "description": "Common components/utilities for @mbao01/ui and @mbao01/next",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "common",
+    "library"
+  ],
+  "main": "./src/index.ts",
+  "files": [
+    "src",
+    "plugin.js",
+    "plugin.d.ts",
+    ".eslintrc.cjs",
+    "postcss.config.js",
+    "tailwind.config.ts",
+    "tsconfig.node.json",
+    "tsconfig.shared.json",
+    "vitest-setup.ts",
+    "vitest.config.ts"
+  ],
+  "exports": {
+    "./plugin": "./plugin.js",
+    "./styles": "./src/stylesheets/index.css"
+  },
+  "bugs": "https://github.com/mbao01/mbao01/issues",
+  "homepage": "https://shared.ayomidebakare.site",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mbao01/mbao01.git"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "daisyui": "^4.6.2"
+  },
+  "devDependencies": {
+    "@heroicons/react": "^2.1.1",
+    "@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.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.2.2",
+    "@vitest/ui": "^1.2.2",
+    "autoprefixer": "^10.4.17",
+    "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.2.0",
+    "path": "^0.12.7",
+    "postcss": "^8.4.35",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "storybook": "^7.6.14",
+    "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",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from "tailwindcss";
+
+declare const plugin: { handler: () => void; config?: Config };
+export = plugin;

package/plugin.js

@@ -0,0 +1,3 @@
+const daisyui = require("daisyui");
+
+module.exports = daisyui;

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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/Button/Button.tsx

@@ -0,0 +1,40 @@
+import c from "clsx";
+import { getButtonClasses } from "./constants";
+import { type ButtonProps } from "./types";
+
+export const Button = (props: ButtonProps) => {
+  const {
+    className,
+    outline,
+    label,
+    disabled,
+    onClick,
+    loading,
+    variant,
+    size,
+    wide,
+    ...rest
+  } = props;
+
+  return (
+    <button
+      {...rest}
+      onClick={onClick}
+      disabled={disabled}
+      className={c(
+        getButtonClasses({ size, wide, outline, variant, loading }),
+        className
+      )}
+    >
+      {label}
+      {loading ? (
+        <span
+          className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
+          data-testid="loading"
+        >
+          <span className="loading loading-spinner" />
+        </span>
+      ) : null}
+    </button>
+  );
+};

package/src/components/Button/constants.ts

@@ -0,0 +1,44 @@
+import c from 'clsx';
+import type { ButtonSize, ButtonVariant } from './types';
+
+const BUTTON_SIZE = {
+  xs: c('btn-xs'),
+  sm: c('btn-sm'),
+  md: c('btn-md'),
+  lg: c('btn-lg'),
+} satisfies Record<ButtonSize, string>;
+
+const BUTTON_VARIANTS = {
+  accent: c('btn-accent'),
+  default: c('btn-default'),
+  error: c('btn-error'),
+  ghost: c('btn-ghost'),
+  info: c('btn-info'),
+  link: c('btn-link'),
+  neutral: c('btn-neutral'),
+  primary: c('btn-primary'),
+  secondary: c('btn-secondary'),
+  success: c('btn-success'),
+  warning: c('btn-warning'),
+} satisfies Record<ButtonVariant, string>;
+
+export const getButtonClasses = ({
+  size,
+  wide,
+  loading,
+  outline,
+  variant,
+}: {
+  size?: ButtonSize;
+  wide?: boolean;
+  loading?: boolean;
+  outline?: boolean;
+  variant?: ButtonVariant;
+}) => {
+  return c('btn', BUTTON_VARIANTS[variant!], BUTTON_SIZE[size!], {
+    'btn-outline': outline,
+    'btn-wide': wide,
+    'relative overflow-hidden': loading,
+    'min-h-fit h-10': !size,
+  });
+};

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/src/components/Button/types.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export type ButtonVariant =
+  | 'default'
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'ghost'
+  | 'link'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+export type ButtonProps = {
+  size?: ButtonSize;
+  wide?: boolean;
+  label: ReactNode;
+  loading?: boolean;
+  outline?: boolean;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;

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/Text/Text.tsx

@@ -0,0 +1,12 @@
+import c from 'clsx';
+import { createElement } from 'react';
+import { type TextProps } from './types';
+import { getTextClasses } from './constants';
+
+export const Text = ({ as = 'span', size, variant, children, className }: TextProps) => {
+  return createElement(
+    as,
+    { className: c(getTextClasses({ size, variant }), className) },
+    children
+  );
+};

package/src/components/Text/constants.ts

@@ -0,0 +1,29 @@
+import c from 'clsx';
+import type { TextSize, TextVariant } from './types';
+
+const TEXT_SIZE = {
+  xs: c('text-xs'),
+  sm: c('text-sm'),
+  base: c('text-base'),
+  lg: c('text-lg'),
+  xl: c('text-xl'),
+  '2xl': c('text-2xl'),
+  '3xl': c('text-3xl'),
+  '4xl': c('text-4xl'),
+  '5xl': c('text-5xl'),
+} satisfies Record<TextSize, string>;
+
+const TEXT_VARIANT = {
+  info: c('text-info'),
+  error: c('text-error'),
+  success: c('text-success'),
+  warning: c('text-warning'),
+  primary: c('text-primary'),
+  secondary: c('text-secondary'),
+  accent: c('text-accent'),
+  neutral: c('text-neutral'),
+} satisfies Record<TextVariant, string>;
+
+export const getTextClasses = ({ size, variant }: { size?: TextSize; variant?: TextVariant }) => {
+  return c(TEXT_VARIANT[variant!], TEXT_SIZE[size!]);
+};

package/src/components/Text/index.ts

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

package/src/components/Text/types.ts

@@ -0,0 +1,21 @@
+export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+
+export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
+
+export type TextVariant =
+  | 'info'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'neutral';
+
+export type TextProps = {
+  as?: TextTag;
+  size?: TextSize;
+  variant?: TextVariant;
+  children: React.ReactNode;
+  className?: string;
+};

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

@@ -0,0 +1,6 @@
+export * from "./components/Badge";
+export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Detail";
+export * from "./components/Text";
+export * from "./components/Tooltip";

package/src/stylesheets/index.css

@@ -0,0 +1,2 @@
+@import url('./tailwind.css');
+@import url('./reset.css');

package/src/stylesheets/reset.css

@@ -0,0 +1,25 @@
+.scroll-shadow {
+  background-image: linear-gradient(to top, white, white),
+    linear-gradient(to top, white, white),
+    linear-gradient(to top, rgba(100, 100, 100, 0.25), rgba(255, 255, 255, 0)),
+    linear-gradient(
+      to bottom,
+      rgba(100, 100, 100, 0.25),
+      rgba(255, 255, 255, 0)
+    );
+  background-position: bottom center, top center, bottom center, top center;
+  background-color: white;
+  background-repeat: no-repeat;
+  background-size: 100% 12px, 100% 12px, 100% 10px, 100% 10px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}

package/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+import daisyui from "daisyui";
+
+const config: Config = {
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  plugins: [daisyui],
+  daisyui: {
+    themes: ["light", "dark"],
+  },
+};
+export default config;

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.shared.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "incremental": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  }
+}

package/vitest-setup.ts

@@ -0,0 +1,8 @@
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});

package/vitest.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["vitest-setup.ts"],
+    coverage: {
+      all: false,
+      enabled: true,
+      provider: "v8",
+      reporter: ["text", "html", "clover", "json"],
+      reportsDirectory: "coverage",
+      thresholds: {
+        autoUpdate: true,
+      },
+      exclude: ["**/*.stories.*"],
+    },
+  },
+});