DOCSEARCHbyAlgolia
Submit Docs

tokit Documentation

website·Indexed 29 days ago

https://toktokhan-dev-docs.vercel.app

Developer documentation for tokit, featuring guides on environment variable configuration for GitHub repository uploads and a React web library for social OAuth integration (including Google and Facebook) with components like FullButton and SocialOauthInit.

Tokens
103.2K
Snippets
892
Records
1.1K
Agent score
74%

What's inside tokit

  1. Overview of gen-route-next-page plugin

    The gen-route-next-page plugin is designed for the Next.js Pages Router. It scans the pages directory and generates a TypeScript object where keys represent route names and values represent the actual URL paths. This prevents hard-coding strings throughout the application and provides a centralized, stable way to manage routes.
    // Generated output example
export const ROUTES = {
  AUTH_MAIN: "/auth",
  MAIN: "/",
  LOGIN_MAIN: "/login",
  SOCIAL_CALLBACK: "/social/callback",
};

  3. Overview of the Smart Developer CLI Tool

    The Smart Developer CLI tool allows users to utilize various plugins such as gen:api, gen:theme, gen:route, and gen:sitemap. It also supports the registration of user-developed scripts as custom plugins.

  4. Overview of the modular Tokript plugin architecture

    Tokript has transitioned from a single, custom CLI package to a modular plugin-based architecture. This change addresses previous limitations where users had to install unnecessary packages for single features and were restricted to specific environments. The new architecture allows developers to use only the features they need and ensures compatibility across various environments, including React, Next.js, and React Native.

  5. Overview of Toktoken Figma Plugin

    Toktoken is a Figma plugin designed to parse design systems defined in Figma and export them into a structured JSON format. It specifically allows users to extract tokens for colors and typography, ensuring consistency between design and development workflows. Extracted JSON files can be saved locally or uploaded directly to a GitHub project repository.

  6. Overview of tokript CLI tool

    tokript is a CLI tool developed by TOKTOKHAN-DEV (JS/TS) designed to improve development efficiency. It provides automation for generating icons, images, fonts, API hooks, and page templates.

  7. Overview of the GitHubManager class

    The GitHubManager class is a module that simplifies the use of the GitHub API by wrapping the Octokit library. It provides high-level methods for common GitHub operations, such as creating repositories and uploading content.

  8. Overview of @toktokhan-dev UI and Utility Packages

    The @toktokhan-dev ecosystem provides several core libraries for different environments:

    • @toktokhan-dev/chakra: Component package built with ChakraUI.
    • @toktokhan-dev/github: Module for simplifying GitHub API usage via Octokit.
    • @toktokhan-dev/node: Utility library for Node.js environments.
    • @toktokhan-dev/universal: Utility library compatible with both Web and App environments.
    • @toktokhan-dev/react-web: Utility library specifically for React Web environments.
    • @toktokhan-dev/react-universal: Global utility library for React environments.

  9. Overview of TokTokHan Frontend Boilerplate updates

    The TokTokHan frontend boilerplate has been updated to improve scalability and developer experience. Key changes include moving to a monorepo for template management, introducing a CLI tool for installation, modularizing utilities into scoped packages, automating design tokens via a Figma plugin, and providing standardized social login components.

  10. Use the Apple class for Apple OAuth authentication

    The Apple class is used to handle Apple OAuth authentication processes. It extends the SocialOauthInit base class. To instantiate the class, use the constructor by providing the clientID.
    const appleAuth = new Apple(clientID);

  11. Set up project structure and Chakra UI theme

    Follow these steps to set up the project architecture and styling configuration:

    1. Page & Route Setting: Manage routes using the page folder.
    2. Layout Setting:
      • Create layout-related components in components/@Layout.
      • Create page-rendering components in containers/[page-name].
    3. Theme Setting:
      • Configure primary colors for shades 500, 600, and 700.
      • Set font sizes for sm, md, and lg breakpoints.
      • Define button component variants (e.g., outline, flushed).