romanjaros
9e0aec7186
Some checks failed
forgejo/Procyon/procyon/pipeline/head There was a failure building this commit
This commit removes unused placeholder files and updates several components to be compatible with React Native. These updates include changes in styles, properties, and components like Modals, Toaster, Navigator, and others. The affected files were also appropriately reorganized. Additionally, a new .storybook manager file was introduced.
53 lines
983 B
Text
53 lines
983 B
Text
import { Canvas, Meta } from '@storybook/blocks';
|
|
|
|
import * as ModalStories from './Modals.stories';
|
|
|
|
<Meta of={ModalStories} />
|
|
|
|
# Modals
|
|
|
|
## Before start
|
|
|
|
### In root application use
|
|
|
|
```tsx
|
|
import Modals from '@procyon/components/Modal/components/Modals';
|
|
import { ModalWrapper } from '@procyon/components/Modal/context';
|
|
|
|
return (
|
|
<ModalWrapper>
|
|
...
|
|
<Modals />
|
|
</ModalWrapper>
|
|
);
|
|
```
|
|
|
|
## Use hook `useModal()`
|
|
|
|
```tsx
|
|
import { Text } from 'react-native';
|
|
import { useModal } from '@procyon/components/Modal/useModal';
|
|
|
|
const [openModal] = useModal({
|
|
component: <Text>Modal content</Text>,
|
|
id: 'modal1',
|
|
props: { onClick: () => {} },
|
|
title: 'Modal Title',
|
|
});
|
|
|
|
openModal();
|
|
```
|
|
|
|
<Canvas of={ModalStories.Hook} withToolbar className='h-80' />
|
|
|
|
## Use function `openModal()`
|
|
|
|
Outside of React component.
|
|
|
|
```ts
|
|
import { openModal } from '@procyon/components/Modal/context';
|
|
|
|
openModal('modal1');
|
|
```
|
|
|
|
<Canvas of={ModalStories.OutsideReact} withToolbar className='h-80' />
|