@mbao01/next 0.0.1 → 0.0.3

package/README.md

@@ -1,36 +1,45 @@
-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
+So here it is, I have gotten really bored creating UI component from scratch for the many projects I work on.
+It is high time I have a unified component library - so here it is.
+I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, next, and react.
 
-First, run the development server:
+I believe in future this UI component library may extend to meta frameworks, [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).
 
-```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.
+# Description
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+The library is written using [Next.js](https://nextjs.org/), [Tailwind](https://tailwindcss.com/) and [Typescript](https://www.typescriptlang.org/). The library is uncooked which means there is no build step involved which means you'd have to cater for building the components into your library.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+# Consuming the library
 
-## Learn More
+1. Ensure you have react and typescript install and setup in your project.
+Then install the library
 
-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.
+```bash
+pnpm add @mbao01/next
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+or
 
-## Deploy on Vercel
+```bash
+npm install @mbao01/next
+```
 
-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.
+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|next)/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
+    ...
+  ],
+  "plugins": [
+    require("@mbao01/common/plugin"), // -> import the tailwind library plugin
+    ...
+  ]
+}
+```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+You can also import styles directly from `@mbao01/common/styles`. Use this in-place of `tailwind.css` if you wish.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mbao01/next",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "type": "module",
   "author": "Ayomide Bakare",
@@ -17,8 +17,6 @@
   "types": "dist/types/index.d.ts",
   "files": [
     "src",
-    "plugin.js",
-    "plugin.d.ts",
     "dist/types"
   ],
   "bugs": "https://github.com/mbao01/mbao01/issues",
@@ -30,13 +28,24 @@
   "sideEffects": [
     "*.css"
   ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "next build",
+    "build-storybook": "storybook build -o ../../docs/storybook/next",
+    "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"
+  },
   "dependencies": {
-    "clsx": "^2.1.0",
-    "daisyui": "^4.6.2",
-    "@mbao01/common": "^0.0.1"
+    "@heroicons/react": "^2.1.1",
+    "@mbao01/common": "^0.0.3",
+    "clsx": "^2.1.0"
   },
   "devDependencies": {
-    "@heroicons/react": "^2.1.1",
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
     "@storybook/addon-links": "^7.6.14",
@@ -80,22 +89,7 @@
     "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"
+    "next": "^14.1.0"
   },
-  "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"
-  }
-}
+  "gitHead": "fb1542aac0eb979dd16d8d4448e4380726e4e330"
+}

package/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "../tailwind.css";
+import "@mbao01/common/styles";
 
 const inter = Inter({ subsets: ["latin"] });
 

package/src/index.ts

@@ -1 +1 @@
-export * from "./components/Badge";
+export * from "@mbao01/common";

package/plugin.d.ts

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

package/plugin.js

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

package/src/components/Badge/Badge.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/src/components/Badge/types.ts

@@ -1,18 +0,0 @@
-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;
-};