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://idea2app.github.io/Idea-React/preview/
• Storybook playground: https://idea-react.vercel.app/

Versions

SemVer	status	ES decorator	MobX
>=2	✅developing	stage-3	>=6.11
<2	❌deprecated	stage-2	>=4 <6.11

Content

Components

1. Time Distance
2. Icon
3. Avatar
4. Nameplate
5. Type Echo
6. Horizontal Marquee
7. Vertical Marquee
8. Click Boundary
9. Spinner Button
10. Select
11. Month Calendar
12. Code Block
13. Page Nav
14. Editor
15. Editor HTML
16. Table Spinner
17. Loading
18. Share Box
19. Overlay Box
20. Dialog
21. User Rank

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.

Map components

Open Map component & model, have been migrated to https://github.com/idea2app/OpenMap, 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/idea-react/dist/index.css" />

tsconfig.json

Compatible with MobX 6/7:

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "experimentalDecorators": false,
        "jsx": "react-jsx"
    }
}

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 />
            </>
        );
    }
}

Development

Publish

1. update version in package.json file

2. add Git tag

git tag vx.xx.x  # such as v2.0.0

3. review tag

git tag

4. publish code with tag version

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