Elgato_dark/lobehub
1
0
Fork 0
mirror of https://github.com/lobehub/lobehub synced 2026-04-21 09:37:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 70
lobehub/.agents/skills/modal/SKILL.md
Innei fcdaf9d814 🔧 chore: update eslint v2 configuration and suppressions (#12133) 
* v2 init

* chore: update eslint suppressions and package dependencies

- Removed several eslint suppressions related to array sorting and reversing from eslint-suppressions.json to clean up the configuration.
- Updated @lobehub/lint package version from 2.0.0-beta.6 to 2.0.0-beta.7 in package.json for improvements and bug fixes.
- Made minor formatting adjustments in vitest.config.mts and various SKILL.md files for better readability and consistency.

Signed-off-by: Innei <tukon479@gmail.com>

* fix: clean up import statements and formatting

- Removed unnecessary whitespace in replaceComponentImports.ts for improved readability.
- Standardized import statements in contextEngineering.ts and createAgentExecutors.ts by adding missing spaces for consistency.

Signed-off-by: Innei <tukon479@gmail.com>

* chore: update eslint suppressions and clean up code formatting

* 🐛 fix: use vi.hoisted for mock variable initialization

Fix TDZ error in persona service test by using vi.hoisted() to ensure
mock variables are available when vi.mock factory runs.

---------

Signed-off-by: Innei <tukon479@gmail.com>
2026-02-11 13:04:48 +08:00

2.7 KiB
Raw Blame History

name description user-invocable
modal Modal imperative API guide. Use when creating modal dialogs using createModal from @lobehub/ui. Triggers on modal component implementation or dialog creation tasks. false

Modal Imperative API Guide

Use createModal from @lobehub/ui for imperative modal dialogs.

Why Imperative?

Mode Characteristics Recommended
Declarative Need open state, render <Modal /> ❌
Imperative Call function directly, no state ✅

File Structure

features/
└── MyFeatureModal/
    ├── index.tsx           # Export createXxxModal
    └── MyFeatureContent.tsx # Modal content

Implementation

1. Content Component (MyFeatureContent.tsx)

'use client';

import { useModalContext } from '@lobehub/ui';
import { useTranslation } from 'react-i18next';

export const MyFeatureContent = () => {
  const { t } = useTranslation('namespace');
  const { close } = useModalContext(); // Optional: get close method

  return <div>{/* Modal content */}</div>;
};

2. Export createModal (index.tsx)

'use client';

import { createModal } from '@lobehub/ui';
import { t } from 'i18next'; // Note: use i18next, not react-i18next

import { MyFeatureContent } from './MyFeatureContent';

export const createMyFeatureModal = () =>
  createModal({
    allowFullscreen: true,
    children: <MyFeatureContent />,
    destroyOnHidden: false,
    footer: null,
    styles: { body: { overflow: 'hidden', padding: 0 } },
    title: t('myFeature.title', { ns: 'setting' }),
    width: 'min(80%, 800px)',
  });

3. Usage

import { createMyFeatureModal } from '@/features/MyFeatureModal';

const handleOpen = useCallback(() => {
  createMyFeatureModal();
}, []);

return <Button onClick={handleOpen}>Open</Button>;

i18n Handling

  • Content component: useTranslation hook (React context)
  • createModal params: import { t } from 'i18next' (non-hook, imperative)

useModalContext Hook

const { close, setCanDismissByClickOutside } = useModalContext();

Common Config

Property Type Description
allowFullscreen boolean Allow fullscreen mode
destroyOnHidden boolean Destroy content on close
footer ReactNode | null Footer content
width string | number Modal width

Examples

  • src/features/SkillStore/index.tsx
  • src/features/LibraryModal/CreateNew/index.tsx