Skip to content

Latest commit

 

History

History
208 lines (167 loc) · 5.9 KB

ReadMe.md

File metadata and controls

208 lines (167 loc) · 5.9 KB
Raw

Idea React

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

MobX compatibility NPM Dependency CI & CD

NPM

Versions

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

Content

Components

  1. Time
  2. Time Distance
  3. Timeline
  4. Icon
  5. Avatar
  6. Nameplate
  7. Type Echo
  8. Horizontal Marquee
  9. Vertical Marquee
  10. Click Boundary
  11. Spinner Button
  12. Select
  13. Month Calendar
  14. Code Block
  15. Page Nav
  16. Editor
  17. Editor HTML
  18. Table Spinner
  19. Loading
  20. Share Box
  21. Overlay Box
  22. Dialog
  23. 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
  1. review tag
git tag
  1. publish code with tag version
git push origin master --tags  # push all branches and tags on master