Package Goal - techbasejs/techbase GitHub Wiki

Package Goal

simm-validation

Goals:

  • Sử dụng để validation các case thường có trong các dự án, đặc biệt là tiếng Nhật.
  • support tích hợp được với các thư viện khác (Yup, react-hook-form, vuelidate, ...).
  • support extends được với cái rule không cố định.

Samples:

Đối với validate 1 giá trị

import { isFullWidth, isNumber } from 'simm-validation';

isFullWidth("Nguyen Van A") // output: false
isNumber(10) // output: true

Đối với validate 1 object

import { validate } from 'simm-validation';

const obj = {
   name: 'Nguyen Van A',
   age: 10,
}

validate.sync(obj, {
   name: validate.string().isFullWidth().isHalfWidth(),
   age: validate.number().min(18).max(100),
})

Đối với tích hợp các thư viện khác (react-hooks-form):

import { validate, useValidationResolver } from 'simm-validation'

const validationSchema = validate.object({
  firstName: validate.string().required(),
  lastName: validate.string().required(),
})

const resolver = useValidationResolver(validationSchema)
const { handleSubmit, register } = useForm({ resolver })

Extends từ các rule không cố định.

import { validate } from 'simm-validation'

validate.addMethod("isJapaneseNumber", (value) => {
  // write custom rules
})

simm-upload

Goals:

  • Hoàn thành UI basic, có thể custom được từng phần của UI.
  • Preview file (image, video, audio, pdf, ...), edit image (rotate, cut, ...).
  • Drag and drop
  • Chunks upload

Samples:

import simmUpload from 'simm-upload'

const customPreviewElm = document.createElement('img');

simmUpload.upload("#myContainer", {
   editable: true,
   chunks: true,
   ui: {
      preview: (file) => {
         customPreviewElm.src = file.url
         return customPreviewElm
      },
   }
})

simm-fetch

Goals

  • Tạo 1 XMLHttpRequest đơn giản, tinh gọn.
  • Support interceptors.
  • Handle errors.
  • Tính năng retry, caching.
  • Support hooks, composable cho react & vue.

Samples

import { simmFetch } from 'simm-fetch';

await simmFetch('https://facebook.com')

await simmFetch('https://facebook.com/create', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  }
})

await simmFetch('/create', {
   baseURL: 'https://facebook.com',
   method: 'POST',
})

await simmFetch('https://facebook.com', {
  retry: 5,
  cache: {
    expire: 24 * 60 * 60 // 1 day
  },
})

simm-next-auth

Goals

  • Work với framework nextjs >= 13 + nextjs app & page.
  • Support credentials, providers (google, twitter, line, ...).
  • useSession, getSession.
  • Support mapping với restAPI.
  • Support SignIn, SignOut, 2FA.

Samples

import { NextResponse } from "next/server";
import { withAuth } from "simple-next-auth";

const auth = withAuth(function middleware(request) {
  const pathname = request.nextUrl.pathname;
  if (pathname === "/") {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next();
});

export default auth;

// See "Matching Paths" below to learn more
export const config = {
  matcher: [
    // "/:path*",
    "/((?!api|login|_next/static|_next/image|favicon.ico).*)",
  ],
};
import { SessionProvider } from "simm-next-auth/react";

export default function App({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}
import { auth, Provider, AuthRequestType } from "simple-next-auth";
import { NextRequest } from "next/server";

const loginProvider = new Provider("credentials", {
  name: "login",
  handler: async (
    request: AuthRequestType<{
      email?: string;
      password?: string;
      enable_2fa?: boolean;
    }>,
  ) => {
    const body = await request.json();
    return {
      authorized: !body.enable_2fa,
      session: body,
      jwt: {},
    };
  },
});

const twoFactorProvider = new Provider("credentials", {
  name: "2fa",
  handler: async (request: AuthRequestType<{ name?: string }>, { session }) => {
    const body = await request.json();
    return {
      session: session,
      jwt: {
        // Jwt options
      },
    };
  },
});

const h = auth({
  providers: [loginProvider, twoFactorProvider],
});

export { h as GET, h as POST };

simm-cli

Goals

  • Support SSH client
  • Support proxyJump
  • Support SFTP
  • Support deploy with git & docker
  • Support exec
  • Support file config (simm.config.ts or simm.config.js)

Samples

simm deploy [environment] --dir myDir

simm sftp [environment]

simm exec [environment] echo "Hello, world"

simm.config.ts

import fs from "node:fs";
import { defineConfig } from "simm-cli";

export default defineConfig({
  servers: {
    production: {
      user: "__USER__",
      host: "__HOST__",
      privateKey: "__PRIVATE_KEY__",
      passsword: "__PASSWORD__",
      deploy: {
        branch: "main",
        repo: `https://github.com/example/example.git`,
        path: "/home/_works/",
        postDeploy: "pnpm install && pnpm build",
      },
    },
  },
});
import fs from "node:fs";
import { defineConfig } from "simm-cli";

export default defineConfig({
  servers: {
    bastion: {
      user: "__USER__",
      host: "__HOST__",
      privateKey: "__PRIVATE_KEY__",
      passsword: "__PASSWORD__",
    },
    production: {
      user: "__USER__",
      host: "__HOST__",
      privateKey: "__PRIVATE_KEY__",
      passsword: "__PASSWORD__",
      proxyJump: "bastion",
      deploy: {
        branch: "main",
        repo: `https://github.com/example/example.git`,
        path: "/home/_works/",
        postDeploy: "pnpm install && pnpm build",
      },
    },
  },
});
import { defineConfig } from "simm-cli";

export default defineConfig({
  servers: {
    production: {
      user: "__USER__",
      host: "__HOST__",
      privateKey: "__PRIVATE_KEY__",
      passsword: "__PASSWORD__",
      sftp: {
        preSftp: "pnpm build",
        source: "/home/local/source",
        dest: "/home/remote/source",
        postSftp: "systemctl restart nginx",
      },
      // proxyJump: 'bastion', when use proxyJump to a bastion server
    },
  },
});

simm-firebase-chat

Goals

  • Build lên được UI chat cơ bản (có thể dễ dàng customize).
  • Support các component cho react & vue.
  • Support upload & preview media.
  • Support virtual scroll cho list message.
  • Support target tới 1 message bất kỳ.
  • Support connect tới aloglia.

Samples

import { firebaseChatUI } from 'simm-firebase-chat'

firebaseChatUI.render('#myContainer', {
  ui: {
     audio: () => document.createElement('audio'),
     video: () => document.createElement('video'),
  },
  media: {
    recording: true,
    audio: true,
    video: true,
  }
})
import { FirebaseChatUI, FirebaseChatUIOptions } from 'simm-firebase-chat/react';

const options: FirebaseChatUIOptions = {
  ui: {
     audio: () => <audio />,
     video: () => <video />,
  },
  media: {
    recording: true,
    audio: true,
    video: true,
  }
}

export default function ChatLayout() {
     return <FirebaseChatUI options={options} />
}
⚠️ **GitHub.com Fallback** ⚠️