Merge pull request #22 from amosmachora/dev

created documentation

.changeset/tough-lamps-raise.md

@@ -0,0 +1,5 @@
+---
+"react-daraja": patch
+---
+
+fixed some components and cleaned up some bugs

.vscode/settings.json

@@ -2,6 +2,7 @@
   "cSpell.words": [
     "accountbalance",
     "ALNM",
+    "arguement",
     "Buygoods",
     "codepaths",
     "Coversation",
@@ -12,7 +13,9 @@
     "Lipa",
     "mpesa",
     "MSISDN",
+    "nextjs",
     "Occassion",
+    "Pastable",
     "Paybill",
     "paymentrequest",
     "Pesa",

docs-app/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "cSpell.words": [
+    "Daraja",
+    "fortawesome",
+    "nextjs",
+    "Pesa",
+    "Safaricom",
+    "typesafe"
+  ]
+}

docs-app/app/api/page.tsx

@@ -0,0 +1,34 @@
+import { AccountBalance } from "@/components/AccountBalance";
+import { B2CPaymentRequest } from "@/components/B2CPaymentRequest";
+import { NextPage } from "@/components/NextPage";
+import { PageNavSmall } from "@/components/PageNavSmall";
+import { QrCode } from "@/components/QrCode";
+import { RegisterC2BUrl } from "@/components/RegisterC2BUrl";
+import { ReverseC2BTransaction } from "@/components/ReverseC2BTransaction";
+import { STKPush } from "@/components/STKPush";
+import { StateOfALNMOnlinePayment } from "@/components/StateOfALNMOnlinePayment";
+import { TaxRemittance } from "@/components/TaxRemittance";
+import { TransactionStatus } from "@/components/TransactionStatus";
+import React from "react";
+
+const Page = () => {
+  return (
+    <main className="w-5/6 p-5 h-full overflow-y-scroll">
+      <PageNavSmall />
+      <h1>API</h1>
+      <p>The documentation of all available functions and types.</p>
+      <STKPush />
+      <QrCode />
+      <StateOfALNMOnlinePayment />
+      <RegisterC2BUrl />
+      <B2CPaymentRequest />
+      <TransactionStatus />
+      <AccountBalance />
+      <ReverseC2BTransaction />
+      <TaxRemittance />
+      <NextPage prevHref="installation" />
+    </main>
+  );
+};
+
+export default Page;

docs-app/app/globals.css

@@ -16,12 +16,30 @@
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+.show {
+  @apply outline outline-1 outline-red-500;
+}
+
+h1 {
+  @apply font-semibold text-4xl mt-2;
+}
+
+h2 {
+  @apply font-semibold text-3xl mt-2;
+}
+
+h3 {
+  @apply font-semibold text-2xl mt-2;
+}
+
+h4 {
+  @apply font-semibold text-xl mt-8;
+}
+
+section {
+  @apply mt-10;
+}
+
+.center-absolutely {
+  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
 }

docs-app/app/installation/page.tsx

@@ -0,0 +1,40 @@
+import { InstallCommands } from "@/components/InstallCommands";
+import { NextPage } from "@/components/NextPage";
+import { PageNavSmall } from "@/components/PageNavSmall";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+
+const Page = () => {
+  return (
+    <main className="w-4/5 p-5">
+      <PageNavSmall />
+      <h1>Installation</h1>
+      <p className="mt-2">
+        In the directory containing package.json, run your package manager`s
+        install command:
+      </p>
+      <InstallCommands />
+      <div className="mt-5 rounded-md overflow-clip bg-blue-200 flex">
+        <div className="bg-blue-500 w-2" />
+        <div className="p-5">
+          <div className="flex items-center gap-x-2">
+            <FontAwesomeIcon icon={faCircleInfo} />
+            <p>INFO</p>
+          </div>
+          React Daraja has a peer dependency on React 18. If you use the node
+          apis you don`t need to have react installed.
+        </div>
+      </div>
+      <h2 className="mt-5">Basic usage</h2>
+      <p className="text-sm mt-2">
+        The library consists of a collection of typescript functions, types and
+        some react components. If you want to use the react components they are
+        under /react and for nextjs they are under /next
+      </p>
+      <NextPage nextHref="api" prevHref="introduction" />
+    </main>
+  );
+};
+
+export default Page;

docs-app/app/layout.tsx

@@ -1,22 +1,34 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import { Inter, Poppins } from "next/font/google";
+import "./globals.css";
+import { Nav } from "@/components/Nav";
+import { Aside } from "@/components/Aside";
 
-const inter = Inter({ subsets: ['latin'] })
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: { template: "%s React Daraja Docs", default: "React Daraja Docs" },
+  description:
+    "React Daraja is a typesafe Javascript library designed to simplify interactions with the Safaricom Daraja API, specifically for STK push requests. This library is suitable for both Node.js and React environments, allowing developers to seamlessly integrate M-Pesa payments into their applications.",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${poppins.className} h-screen flex flex-col`}>
+        <Nav />
+        <div className="flex h-[92%] w-full">
+          <Aside />
+          {children}
+        </div>
+      </body>
     </html>
-  )
+  );
 }

docs-app/app/page.tsx

@@ -1,113 +1,26 @@
-import Image from 'next/image'
+import { PageNavSmall } from "@/components/PageNavSmall";
+import Image from "next/image";
+import maple from "../public/maple.jpeg";
+import { NextPage } from "@/components/NextPage";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+    <main className="w-4/5 p-5">
+      <PageNavSmall />
+      <h1 className="h1">Introduction</h1>
+      <Image
+        src={maple}
+        className="w-full h-[30vh] object-cover mt-5"
+        alt="maple"
+      />
+      <p className="mt-5">
+        React Daraja is a typesafe Javascript library designed to simplify
+        interactions with the Safaricom Daraja API. This library is suitable for
+        both Node.js and React environments, allowing developers to seamlessly
+        integrate M-Pesa payments into their applications in an efficient,
+        modern and stress free manner.
+      </p>
+      <NextPage nextHref="installation" />
     </main>
-  )
+  );
 }

docs-app/components/APIItemTitle.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { useState } from "react";
+
+export const APIItemTitle = ({ text }: { text: string }) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <h3
+      id={text}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className="flex gap-x-2"
+    >
+      <p className="bg-gray-100 font-semibold border px-2">{text}</p>
+      {hovered && (
+        <button
+          className="text-myPurple hover:underline"
+          onClick={() =>
+            navigator.clipboard.writeText(`${document.location}/api#${text}`)
+          }
+        >
+          #
+        </button>
+      )}
+    </h3>
+  );
+};

docs-app/components/AccountBalance.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { APIItemTitle } from "./APIItemTitle";
+import { CopyPastableSpan } from "./CopyPastableSpan";
+
+export const AccountBalance = () => {
+  return (
+    <section>
+      <APIItemTitle text="Account balance" />
+      <p className="mt-5">
+        The Account Balance API is used to request the account balance of a
+        short code. This can be used for both B2C, buy goods and pay bill
+        accounts. Read the official docs{" "}
+        <a
+          href="https://developer.safaricom.co.ke/APIs/AccountBalance"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-green-500 hover:underline"
+        >
+          here.
+        </a>{" "}
+      </p>
+      <div className="mt-5">
+        You can use the <CopyPastableSpan text="getAccountBalance" /> function
+        to make the call. It takes an object of type{" "}
+        <CopyPastableSpan text="AccountBalanceBody" /> and returns an awaitable
+        promise of type <CopyPastableSpan text="AccountBalanceResponse" />
+      </div>
+    </section>
+  );
+};