UNPKG

@blocklet/ui-react

Version:

Some useful front-end web components that can be used in Blocklets.

255 lines 9.02 kB
[ { "title": "Overview", "description": "Provides a high-level introduction to the Blocklet UI React library, outlining the problems it solves, its core components, and the overall architecture.", "path": "/overview", "sourceIds": [ "src/index.ts", "README.md", "src/Header/index.tsx", "src/Footer/index.jsx", "src/Dashboard/index.jsx", "src/UserCenter/index.tsx", "src/ComponentInstaller/index.jsx", "src/blocklets.js", "src/utils.js" ], "parentId": "", "icon": "lucide:book-open" }, { "title": "Getting Started", "description": "A concise guide to quickly install the library and render your first components, such as a Header and Footer, in under 30 minutes.", "path": "/getting-started", "sourceIds": [ "README.md", "src/index.ts", "src/Header/index.tsx", "src/Footer/index.jsx", "src/common/overridable-theme-provider.jsx" ], "parentId": "", "icon": "lucide:rocket" }, { "title": "Core Concepts", "description": "Explains the fundamental principles of the library, focusing on how it uses the blocklet's metadata to automatically configure and render components.", "path": "/core-concepts", "sourceIds": [ "src/blocklets.js", "src/types.js", "src/@types/index.ts", "src/utils.js" ], "parentId": "", "icon": "lucide:lightbulb" }, { "title": "Components", "description": "A detailed reference for all available UI components, complete with props, usage examples, and best practices for integration.", "path": "/components", "sourceIds": [ "src/index.ts", "src/Header/index.tsx", "src/Footer/index.jsx", "src/Dashboard/index.jsx", "src/Icon/index.tsx", "src/ComponentInstaller/index.jsx", "src/BlockletStudio/index.tsx", "src/UserCenter/index.tsx", "src/UserSessions/index.tsx", "src/ComponentManager/index.tsx", "src/common/notification-addon.jsx" ], "parentId": "", "icon": "lucide:blocks" }, { "title": "Layout", "description": "Documentation for primary layout components like Header, Footer, and Dashboard that form the main structure of a blocklet application.", "path": "/components/layout", "sourceIds": [ "src/Header/index.tsx", "src/Footer/index.jsx", "src/Dashboard/index.jsx" ], "parentId": "/components" }, { "title": "Header", "description": "Provides a responsive and customizable header, automatically populated with navigation links and user session controls from the blocklet's metadata.", "path": "/components/layout/header", "sourceIds": [ "src/Header/index.tsx", "src/common/header-addons.jsx", "src/common/domain-warning.jsx", "src/common/org-switch/index.jsx", "src/libs/with-hide-when-embed.tsx", "src/blocklets.js", "src/utils.js" ], "parentId": "/components/layout" }, { "title": "Footer", "description": "Renders a consistent footer for your application, including branding, copyright information, social media links, and additional navigation.", "path": "/components/layout/footer", "sourceIds": [ "src/Footer/index.jsx", "src/Footer/internal-footer.jsx", "src/Footer/brand.jsx", "src/Footer/links.jsx", "src/Footer/social-media.jsx", "src/Footer/copyright.jsx", "src/Footer/layout/standard.jsx", "src/Footer/layout/plain.jsx", "src/libs/with-hide-when-embed.tsx" ], "parentId": "/components/layout" }, { "title": "Dashboard", "description": "A pre-built dashboard layout with a sidebar, header, and content area, designed for admin interfaces and user-centric views.", "path": "/components/layout/dashboard", "sourceIds": [ "src/Dashboard/index.jsx", "src/common/header-addons.jsx", "src/blocklets.js" ], "parentId": "/components/layout" }, { "title": "User Management", "description": "A suite of components for handling user profiles, session management, and organization switching.", "path": "/components/user-management", "sourceIds": [ "src/UserCenter/index.tsx", "src/UserSessions/index.tsx", "src/common/org-switch/index.jsx", "src/hooks/use-follow.tsx", "src/contexts/user-followers.tsx" ], "parentId": "/components" }, { "title": "UserCenter", "description": "A comprehensive user profile and settings component that includes passport management, privacy controls, and notification settings.", "path": "/components/user-management/user-center", "sourceIds": [ "src/UserCenter/index.tsx", "src/UserCenter/components/user-center.tsx", "src/UserCenter/components/user-info/index.tsx", "src/UserCenter/components/user-info/user-basic-info.tsx", "src/UserCenter/components/passport.tsx", "src/UserCenter/components/settings.tsx", "src/UserCenter/components/privacy.tsx", "src/UserCenter/components/notification.tsx", "src/UserCenter/components/storage/index.tsx", "src/UserCenter/components/third-party-login/index.tsx", "src/contexts/config-user-space.tsx", "src/contexts/user-followers.tsx" ], "parentId": "/components/user-management" }, { "title": "UserSessions", "description": "Displays and manages a user's active and expired login sessions across different devices and platforms.", "path": "/components/user-management/user-sessions", "sourceIds": [ "src/UserSessions/index.tsx", "src/UserSessions/components/user-sessions.tsx", "src/UserSessions/libs/utils.ts" ], "parentId": "/components/user-management" }, { "title": "Component Management", "description": "Tools for dynamically installing, publishing, and managing blocklet components within an application.", "path": "/components/component-management", "sourceIds": [ "src/ComponentInstaller/index.jsx", "src/ComponentManager/index.tsx", "src/BlockletStudio/index.tsx" ], "parentId": "/components" }, { "title": "ComponentInstaller", "description": "A component that checks for missing blocklet dependencies and provides an interface for administrators to install them.", "path": "/components/component-management/component-installer", "sourceIds": [ "src/ComponentInstaller/index.jsx", "src/ComponentInstaller/use-component-installed.js", "src/ComponentInstaller/installer-item.jsx" ], "parentId": "/components/component-management" }, { "title": "BlockletStudio", "description": "An embeddable interface for publishing and managing resources and components within the Blocklet ecosystem.", "path": "/components/component-management/blocklet-studio", "sourceIds": [ "src/BlockletStudio/index.tsx", "src/BlockletStudio/README.md" ], "parentId": "/components/component-management" }, { "title": "Notifications", "description": "Provides components and utilities for implementing a real-time user notification system.", "path": "/components/notifications", "sourceIds": [ "src/common/notification-addon.jsx", "src/Notifications/Snackbar.tsx", "src/Notifications/utils.ts", "src/common/ws.js" ], "parentId": "/components" }, { "title": "Utilities", "description": "A collection of helper components and utilities, such as a versatile Icon component and theme providers.", "path": "/components/utilities", "sourceIds": [ "src/Icon/index.tsx", "src/common/overridable-theme-provider.jsx", "src/libs/with-hide-when-embed.tsx", "src/utils.js" ], "parentId": "/components" }, { "title": "Icon", "description": "A flexible icon component that supports Iconify strings, image URLs, and letter avatars, built on top of Material-UI's Avatar.", "path": "/components/utilities/icon", "sourceIds": [ "src/Icon/index.tsx" ], "parentId": "/components/utilities" }, { "title": "Hooks API", "description": "Reference for the custom React Hooks provided by the library to encapsulate and reuse stateful logic.", "path": "/hooks-api", "sourceIds": [ "src/ComponentInstaller/use-component-installed.js", "src/hooks/use-follow.tsx", "src/hooks/use-mobile.tsx" ], "parentId": "", "icon": "lucide:hook" }, { "title": "How-to Guides", "description": "Practical, step-by-step guides for completing common tasks and implementing specific workflows using the library's components.", "path": "/how-to-guides", "sourceIds": [ "src/Header/demo/addons-customization.jsx", "src/ComponentInstaller/index.jsx", "src/common/notification-addon.jsx", "src/BlockletStudio/README.md" ], "parentId": "", "icon": "lucide:compass" } ]