@mbao01/next 0.0.1

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@mbao01/next",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "author": "Ayomide Bakare",
+  "license": "MIT",
+  "description": "A fully ready-to-consume Next.js component and utility library",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "library",
+    "nextjs"
+  ],
+  "main": "./src/index.ts",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "src",
+    "plugin.js",
+    "plugin.d.ts",
+    "dist/types"
+  ],
+  "bugs": "https://github.com/mbao01/mbao01/issues",
+  "homepage": "https://next.ayomidebakare.site",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mbao01/mbao01.git"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "daisyui": "^4.6.2",
+    "@mbao01/common": "^0.0.1"
+  },
+  "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/nextjs": "^7.6.14",
+    "@storybook/react": "^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-config-next": "14.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.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",
+    "next": "^14.1.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",
+    "next": "^14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "next build",
+    "build-storybook": "storybook build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "next dev",
+    "start": "next start",
+    "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/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "../tailwind.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <main>hey 👋</main>;
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,29 @@
+import c from "clsx";
+import { getBadgeClasses } from "./constants";
+import { type BadgeProps } from "./types";
+import "../../tailwind.css"; // replace with the name of your tailwind css file
+
+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/index.ts

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