@skalfa/skalfa-app 1.0.0

package/.env.example

@@ -0,0 +1,44 @@
+# =========================>
+# ## Base configuration
+# =========================>
+NEXT_PUBLIC_APP_NAME="NEXT-LIGHT"
+NEXT_PUBLIC_DEBUG=false
+
+
+# =========================>
+# ## Api configuration
+# =========================>
+NEXT_PUBLIC_API_HOST="http://localhost:4000/api"
+NEXT_PUBLIC_STORAGE_HOST="http://localhost:4000/storage"
+NEXT_PUBLIC_API_HEADERS=""
+
+
+# =========================>
+# ## Socket configuration
+# =========================>
+NEXT_PUBLIC_SOCKET_HOST=""
+
+
+# =========================>
+# ## Cookie configuration
+# =========================>
+NEXT_PUBLIC_COOKIE_KEY=""
+
+
+# =========================>
+# ## Socket configuration
+# =========================>
+NEXT_PUBLIC_SOCKET_HOST=""
+NEXT_PUBLIC_SOCKET_KEY=""
+
+
+# =========================>
+# ## Map configuration
+# =========================>
+NEXT_PUBLIC_MAP_KEY="";
+
+
+# =========================>
+# ## Exposed port (when using docker)
+# =========================>
+NEXT_PUBLIC_PORT=3000

package/README.md

@@ -0,0 +1,28 @@
+# NEXT LIGHT V.3
+
+This is not a framework or pacakage for react js, but a starter template to start developing your website app using next js and several packages already installed in it (including tailwind css)
+
+## Documentation
+
+Find out and learn about Next-Light in the [Next-Light Documentation](https://light.sejedigital.com/next)
+
+## Features
+
+- Beautiful and powerful components available
+- Components made easy to modify
+- API Helpers
+- ETC
+
+## Instalations
+
+### yarn
+
+```
+yarn install && yarn run dev
+```
+
+### npm
+
+```
+npm install && npm run dev
+```

package/app/auth/edit/page.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { useRouter } from "next/navigation";
+import { useAuthContext } from "@contexts";
+import { ButtonComponent, CardComponent, FormSupervisionComponent } from "@components";
+
+export default function EditProfile() {
+  const router    =  useRouter();
+  const { user }  =  useAuthContext();
+
+  return (
+    <>
+      <div className="h-screen flex flex-col justify-center items-center">
+        <h1 className="text-2xl font-extrabold italic">WELCOME TO NEXT-LIGHT v.3</h1>
+        <p className="text-sm font-semibold mt-6">Edit account!</p>
+
+        <CardComponent className="mt-4 p-6 w-[400px] rounded-2xl">
+          <FormSupervisionComponent 
+            fields={[
+              {
+                construction: {
+                  name: "name",
+                  label: "Nama",
+                  placeholder: "Ex: Joko Gunawan",
+                }
+              },
+              {
+                construction: {
+                  name: "email",
+                  label: "E-mail",
+                  placeholder: "Ex: example@mail.com",
+                }
+              },
+              {
+                construction: {
+                  type: "file",
+                  name: "image",
+                  label: "Picture",
+                }
+              },
+            ]}
+            defaultValue={user}
+            submitControl={{
+              path: "me/update"
+            }}
+            onSuccess={() => {
+              router.push("/auth/me")
+            }}
+            footerControl={({loading}) => (
+              <>
+                <ButtonComponent
+                  type="submit"
+                  label="Save Changes"
+                  block
+                  className="mt-4"
+                  loading={loading}
+                />
+              </>
+            )}
+          />
+        </CardComponent>
+      </div>
+    </>
+  );
+}

package/app/auth/login/page.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { useRouter } from "next/navigation";
+import { ButtonComponent, CardComponent, FormSupervisionComponent } from "@components";
+import { useAuthContext } from "@contexts";
+import Link from "next/link";
+
+export default function Login() {
+  const router = useRouter();
+  const {setAccessToken,setUser} = useAuthContext();
+
+  return (
+    <>
+      <div className="h-screen flex flex-col justify-center items-center">
+        <h1 className="text-2xl font-extrabold italic">WELCOME TO NEXT-LIGHT v.3</h1>
+        <p className="text-sm font-semibold mt-6">Sign in with your account!</p>
+
+        <CardComponent className="mt-4 p-6 w-[400px] rounded-2xl">
+          <FormSupervisionComponent
+            fields={[
+              {
+                construction: {
+                  name: "email",
+                  label: "E-mail",
+                  placeholder: "Ex: example@mail.com",
+                  validations: "required|min:10|max:50|email"
+                }
+              },
+              {
+                construction: {
+                  type: "password",
+                  name: "password",
+                  label: "Password",
+                  placeholder: "Ex: secret123",
+                }
+              }
+            ]}
+            submitControl={{
+              path: "login"
+            }}
+            onSuccess={(res) => {
+              setAccessToken(res?.data?.token)
+              setUser(res?.data?.user)
+              router.push("/auth/me")
+            }}
+            footerControl={() => (
+              <>
+                <ButtonComponent
+                  type="submit"
+                  label="Login Now"
+                  block
+                  className="mt-4"
+                />
+
+                <p className="mt-4 text-center">Don&apos;t have an account yet? <Link href="/auth/register" className="text-primary underline">Create Account</Link></p>
+              </>
+            )}
+          />
+        </CardComponent>
+      </div>
+    </>
+  );
+}

package/app/auth/me/page.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { useRouter } from "next/navigation";
+import { auth } from "@utils";
+import { useAuthContext } from "@contexts";
+import { ButtonComponent, CardComponent, ImageComponent } from "@components";
+
+export default function Login() {
+  const router = useRouter();
+  const {user} = useAuthContext();
+  
+  return (
+    <>
+      <div className="h-screen flex flex-col justify-center items-center">
+        <h1 className="text-2xl font-extrabold italic">WELCOME TO NEXT-LIGHT v.3</h1>
+        <p className="text-sm font-semibold mt-6">Your account!</p>
+
+        <CardComponent className="mt-4 p-6 w-[400px] rounded-2xl">
+          <div className="flex gap-4">
+            {user?.image && (
+
+              <div className="bg-slate-200 aspect-[3/4] w-full rounded flex justify-center items-center">
+                <ImageComponent src={process.env.NEXT_PUBLIC_STORAGE_HOST + user?.image} width={400} height={600} alt="" />
+              </div>
+            )}
+            <div className="flex flex-col gap-4">
+              <div>
+                <p className="text-xs font-semibold text-light-foreground">
+                  Name
+                </p>
+                <p>{user?.name}</p>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-light-foreground">
+                  Email
+                </p>
+                <p>{user?.email}</p>
+              </div>
+
+              <ButtonComponent href="/auth/edit" label="Change" variant="light" block className="py-1.5" />
+              <ButtonComponent 
+                label="Logout" 
+                variant="outline" 
+                paint="danger" 
+                className="py-1.5" 
+                block 
+                onClick={() => {
+                  auth.deleteAccessToken()
+                  router.push("/auth/login")
+                }}
+              />
+            </div>
+          </div>
+        </CardComponent>
+      </div>
+    </>
+  );
+}

package/app/auth/register/page.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ButtonComponent, CardComponent, FormSupervisionComponent } from "@components";
+import { useAuthContext } from "@contexts";
+
+export default function Register() {
+  const router = useRouter();
+  const {setRegisterToken} = useAuthContext();
+
+  return (
+    <>
+      <div className="h-screen flex flex-col justify-center items-center">
+        <h1 className="text-2xl font-extrabold italic">WELCOME TO NEXT-LIGHT v.3</h1>
+        <p className="text-sm font-semibold mt-6">Create new account!</p>
+
+        <CardComponent className="mt-4 p-6 w-[400px] rounded-2xl">
+          <FormSupervisionComponent
+            fields={[
+              {
+                construction: {
+                  name: "name",
+                  label: "Nama",
+                  placeholder: "Ex: Joko Gunawan",
+                }
+              },
+              {
+                construction: {
+                  name: "email",
+                  label: "E-mail",
+                  placeholder: "Ex: example@mail.com",
+                }
+              },
+              {
+                type: "enter-password",
+                construction: {
+                  name: "password",
+                  label: "Password",
+                  placeholder: "Ex: secret123",
+                }
+              },
+            ]}
+            submitControl={{
+              path: "register"
+            }}
+            onSuccess={(res) => {
+              setRegisterToken(res?.data?.token)
+              router.push("/auth/verify")
+            }}
+            footerControl={({loading}) => (
+              <>
+                <ButtonComponent
+                  type="submit"
+                  label="Create Account"
+                  block
+                  className="mt-4"
+                  loading={loading}
+                />
+
+                <p className="mt-4 text-center">Already have an account? <Link href="/auth/login" className="text-primary underline">Login</Link></p>
+              </>
+            )}
+          />
+        </CardComponent>
+      </div>
+    </>
+  );
+}

package/app/auth/verify/page.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ButtonComponent, CardComponent, FormSupervisionComponent } from "@components";
+import { useAuthContext } from "@contexts/.";
+
+export default function Verify() {
+  const router = useRouter();
+  const {registerToken} = useAuthContext();  
+
+  return (
+    <>
+      <div className="h-screen flex flex-col justify-center items-center">
+        <h1 className="text-2xl font-extrabold italic">WELCOME TO NEXT-LIGHT v.3</h1>
+        <p className="text-sm font-semibold mt-6">Verify your email!</p>
+
+        <CardComponent className="mt-4 p-6 w-[400px] rounded-2xl">
+          <FormSupervisionComponent
+            fields={[
+              {
+                type: "otp",
+                construction: {
+                  name: "token",
+                }
+              },
+            ]}
+            submitControl={{
+              path: "verify",
+              bearer: registerToken || "",
+            }}
+            onSuccess={() => {
+              router.push("/auth/login")
+            }}
+            footerControl={({loading}) => (
+              <>
+                <ButtonComponent
+                  type="submit"
+                  label="Submit"
+                  block
+                  className="mt-4"
+                  loading={loading}
+                />
+
+                <p className="mt-4 text-center">Already have an account? <Link href="/auth/login" className="text-primary underline">Login</Link></p>
+              </>
+            )}
+          />
+        </CardComponent>
+      </div>
+    </>
+  );
+}

package/app/dashboard/layout.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import { SidebarComponent, SidebarContentComponent } from "@components";
+
+export default function ExampleLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <div className="flex">
+        <SidebarComponent
+          basePath="/dashboard"
+          head={
+            <div className="px-4">
+              <a href="#" className="text-2xl font-extrabold italic">
+                NEXT-LIGHT v.3
+              </a>
+              <p className="text-sm -mt-1 font-semibold text-slate-400">
+                The Magic Starter Template
+              </p>
+            </div>
+          }
+          items={[
+            {
+              label: "WELCOME",
+              items: [
+                {
+                  label: "Welcome",
+                  path: "/",
+                },
+              ],
+            },
+            {
+              label: "USER",
+              items: [
+                {
+                  label: "User",
+                  path: "/user",
+                },
+              ]
+            },
+          ]}
+        />
+        <SidebarContentComponent>
+          <div className="p-2 lg:p-4">{children}</div>
+        </SidebarContentComponent>
+      </div>
+    </>
+  );
+}

package/app/dashboard/page.tsx

@@ -0,0 +1,9 @@
+export default function Example() {
+  return (
+    <>
+      <div className="flex justify-center items-center h-screen">
+        <p className="text-2xl font-bold opacity-25 mb-4">WELCOME {":)"}</p>
+      </div>
+    </>
+  );
+}

package/app/dashboard/user/page.tsx

@@ -0,0 +1,77 @@
+import { TableSupervisionComponent} from "@components";
+import { Suspense } from "react";
+
+export default function Table() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TableSupervisionComponent
+        title="User"
+        fetchControl={{
+          path: "users",
+        }}
+        columnControl={[
+          {
+            selector: "name",
+            label: "Nama",
+            sortable: true,
+            filterable: true,
+            width: "350px",
+          },
+          {
+            selector: "email",
+            label: "Email",
+            sortable: true,
+            width: "250px",
+          },
+        ]}
+        detailControl={[
+          {
+            label: "Nama",
+            item: "name",
+          },
+          {
+            label: "Email",
+            item: "email",
+          }
+        ]}
+        formControl={{
+          fields: [
+            {
+              construction: {
+                name: "email",
+                label: "E-mail",
+                placeholder: "Ex: example@mail.com",
+                validations: ["required"],
+              },
+            },
+            {
+              construction: {
+                name: "name",
+                label: "Name",
+                placeholder: "Ex: Joko Gunawan",
+              },
+            },
+            {
+              construction: {
+                name: "password",
+                label: "Password",
+                placeholder: "Ex: secret123",
+              }
+            },
+            {
+              construction: {
+                type: "file",
+                name: "image",
+                label: "Picture",
+              }
+            },
+          ],
+        }}
+        controlBar={["CREATE", "FILTER", "SEARCH", "SORT", "SELECTABLE", "IMPORT", "EXPORT", "PRINT", "REFRESH"]}
+        responsiveControl={{
+          mobile: true,
+        }}
+      />
+    </Suspense>
+  );
+}

package/app/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from "./layout";
+export * from "./page";
+export * from "./auth/edit/page";
+export * from "./auth/login/page";
+export * from "./auth/me/page";
+export * from "./auth/register/page";
+export * from "./auth/verify/page";
+export * from "./dashboard/layout";
+export * from "./dashboard/page";
+export * from "./dashboard/user/page";

package/app/layout.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+
+import { Roboto } from "next/font/google";
+import "@styles/globals.css";
+
+import moment from "moment";
+import "moment/locale/id";
+
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+
+import { ContextAppProvider } from "@contexts/AppProvider";
+import { IDBProvider, ShortcutProvider } from "@components";
+
+moment.locale("id");
+config.autoAddCss = false;
+
+
+const font = Roboto({
+  subsets: ["latin"],
+  weight: ["100", "300", "400", "500", "700", "900"],
+});
+
+
+export default function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="id" className={font.className}>
+      <body className="antialiased">
+        <ContextAppProvider>
+          <ShortcutProvider />
+          <IDBProvider>
+            {children}
+          </IDBProvider>
+        </ContextAppProvider>
+      </body>
+    </html>
+  );
+}

package/app/page.tsx

@@ -0,0 +1,13 @@
+export default function Home() {
+  return (
+    <>
+      <div className="h-screen flex flex-col justify-center items-center">
+        <h1 className="text-2xl font-extrabold italic">NEXT-LIGHT v.3</h1>
+
+        <p className="text-sm -mt-1 font-semibold text-light-foreground">
+          The Magic Starter Template
+        </p>
+      </div>
+    </>
+  );
+}

package/barrels.json

@@ -0,0 +1,6 @@
+{
+  "directory": ["components/base.components", "components/construct.components", "components/structure.components", "contexts", "app", "schema"],
+  "delete": true,
+  "exclude": ["index.ts"],
+  "structure": "flat"
+}