Idea React

A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.

• API document: https://idea2app.github.io/Idea-React/
• Preview site: https://idea-react.vercel.app/

Content

Components

1. Time Distance
2. Icon
3. Avatar
4. Nameplate
5. Type Echo
6. Click Boundary
7. Spinner Button
8. Select
9. Code Block
10. Page Nav
11. Editor
12. Editor HTML
13. Open Map
14. Table Spinner
15. Loading
16. Overlay Box
17. Dialog

Data components

Table, List & Form components around Data models, have been migrated to https://github.com/idea2app/MobX-RESTful-table, since Idea-React v1.0.0.

Utilities

1. text2color
2. animate()

Usage

Scaffolds

1. MobX: demo & usage
2. Next.js: demo & usage

CSS on CDN

<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/font/bootstrap-icons.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/animate.min.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/themes/prism.min.css"
/>
<link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>

Dialog

import { formToJSON } from 'web-utility';
import { PureComponent } from 'react';
import { Button, Form, Modal } from 'react-bootstrap';
import { Dialog, DialogClose } from 'idea-react';

export class ExamplePage extends PureComponent {
    inputDialog = new Dialog<Record<'a' | 'b', number>>(({ defer }) => (
        <Modal show={!!defer} onHide={() => defer?.reject(new DialogClose())}>
            <Modal.Header>Dialog</Modal.Header>
            <Modal.Body>
                <Form
                    id="input-dialog"
                    onSubmit={event => {
                        event.preventDefault();

                        defer?.resolve(formToJSON(event.currentTarget));
                    }}
                    onReset={() => defer?.reject(new DialogClose())}
                >
                    <Form.Group>
                        <Form.Label>A</Form.Label>
                        <Form.Control type="number" name="a" />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>B</Form.Label>
                        <Form.Control type="number" name="b" />
                    </Form.Group>
                </Form>
            </Modal.Body>
            <Modal.Footer className="d-flex justify-content-end gap-3">
                <Button form="input-dialog" type="submit">
                    √
                </Button>
                <Button form="input-dialog" type="reset" variant="danger">
                    ×
                </Button>
            </Modal.Footer>
        </Modal>
    ));

    someLogic = async () => {
        try {
            const data = await this.inputDialog.open();

            alert(JSON.stringify(data, null, 4));
        } catch (error) {
            if (error instanceof DialogClose) console.warn(error.message);
        }
    };

    render() {
        return (
            <>
                <Button onClick={this.someLogic}>open Dialog</Button>

                <this.inputDialog.Component />
            </>
        );
    }
}

Open Map

Common example

China map in China Open-source Map project

import { FC } from 'react';
import { OpenMap, OpenMapProps } from 'idea-react';

export const ChinaMap: FC<OpenMapProps> = props => (
    <OpenMap center={[34.32, 108.55]} zoom={4} {...props} />
);

Use in Next.js

import ChinaMap from '../../components/ChinaMap';

export default function ExampleMap() {
    return (
        typeof window !== 'undefined' && (
            <ChinaMap
                markers={[
                    {
                        position: [34.32, 108.55],
                        tooltip: 'Geo Center of China'
                    }
                ]}
                onMarkerClick={console.log}
            />
        )
    );
}

Development

Publish

1. update version in package.json file

2. add Git tag

git tag vx.xx.x  # such as v0.23.0

3. review tag

git tag

4. publish code with tag version

git push origin master --tags  # push all branches and tags on master