stargazer-ui 1.5.13 → 1.5.14

package/dev/pages/FormPage.jsx

@@ -1,155 +0,0 @@
-import { useEffect, useRef, useState } from "react"
-
-import Form from "../../src/Form"
-import Button from "../../src/Button"
-import InputGroup from "../../src/InputGroup"
-import FloatingLabel from "../../src/FloatingLabel"
-import FileUploadButton from "../../src/FileUploadButton/FileUploadButton"
-
-const FormPage = () => {
-    const [selectValue, setSelectValue] = useState("")
-    const handleChange = (event) => {
-        console.log(event.target.value)
-        setSelectValue(event.target.value)
-    }
-    const testRef = useRef(null)
-    useEffect(() => {
-        console.log(testRef.current)
-    }, [testRef.current])
-
-    const handleSubmit = (event) => {
-        event.preventDefault()
-        console.log(event.target[0].value)
-    }
-
-    return (
-        <div style={{display:"grid", placeContent:"center"}}>
-            <div style={{height:"fit-content", width:"fit-content", border:"1px solid white", padding:"1rem", resize:"both", overflow:"hidden"}}>
-                <Form onSubmit={handleSubmit}>
-                    <Form.Select errorAsOverlay={true} error={{message:"this is an error test"}} hint={{message: "this is a hint test"}} ref={testRef} value={selectValue} onChange={handleChange} id="custom-select-test">
-                        <Form.Select.Option value="">Select option...</Form.Select.Option>
-                        {null}
-                    </Form.Select>
-                    <Button type="submit">Test</Button>
-                </Form>
-                <Form onSubmit={event => event.preventDefault()}>
-                    <FileUploadButton />
-                    <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"1rem"}}>
-                        <Form.Group controlId="form-control">
-                            <Form.Label>Form Control</Form.Label>
-                            <Form.Control aria-describedby="test-hint" hint={{message: "Testing this error message"}} errorAsOverlay={true} error={{message: "Testing this error message"}} required type="number" min={4} placeholder="Placeholder..."/>
-                            <Form.Hint id="test-hint">
-                                <details>
-                                    <summary>test</summary>
-                                    more test
-                                </details>
-                            </Form.Hint>
-                        </Form.Group>
-                        <Form.Group controlId="form-control-disabled">
-                            <Form.Label>Form Control Disabled</Form.Label>
-                            <Form.Control placeholder="Placeholder..." defaultValue={"test"} disabled/>
-                        </Form.Group>
-                    </div>
-                    <Form.Group controlId="form-control-vertical" vertical={true}>
-                        <Form.Label>Form Control Vertical</Form.Label>
-                        <Form.Control />
-                    </Form.Group>
-                    <Form.Group controlId="form-control-textbox">
-                        <Form.Label>Form Control Textarea</Form.Label>
-                        <Form.Control as="textarea"/>
-                    </Form.Group>
-
-                    <Form.Check >Form Checkbox</Form.Check>
-                    <Form.Check type="radio">Form Radio</Form.Check>
-                    <Form.Check required type="switch">Form Switch</Form.Check>
-                    <Form.Check type="color">Form Color</Form.Check>
-
-                    <Form.Group controlId="form-control-date">
-                        <Form.Label>Form Date Picker</Form.Label>
-                        <Form.Control type="date"/>
-                    </Form.Group>
-
-                    <Form.Group controlId="form-select-tag">
-                        <Form.Label>Form Select Tag</Form.Label>
-                        <Form.SelectTag onChange={event => console.log(event)}>
-                            <option value="">Select option...</option>
-                            <option value="test-1">Test 1</option>
-                            <option value="test-2">Test 2</option>
-                            <option value="test-3">Test 3</option>
-                        </Form.SelectTag>
-                        <Form.Select errorAsOverlay={true} error={{message:"this is an error test"}} hint={{message: "this is a hint test"}} ref={testRef} value={selectValue} onChange={handleChange} id="custom-select-test">
-                            <Form.Select.Option value="">Select option...</Form.Select.Option>
-                            <Form.Select.Option value="1">1</Form.Select.Option>
-                            <Form.Select.Option value="2">2</Form.Select.Option>
-                            <Form.Select.Option value="3">3</Form.Select.Option>
-                            <Form.Select.Option value="4">4</Form.Select.Option>
-                            <Form.Select.Option value="5">5</Form.Select.Option>
-                            <Form.Select.Option value="6">6</Form.Select.Option>
-                            <Form.Select.Option value="7">7</Form.Select.Option>
-                            <Form.Select.Option value="8">8</Form.Select.Option>
-                            <Form.Select.Option value="9">9</Form.Select.Option>
-                        </Form.Select>
-                    </Form.Group>
-
-                    <Form.Group controlId="form-prtogress">
-                        <Form.Label>Progress / Gauge / Slider</Form.Label>
-                        <progress value={50} max={100} />
-                        <meter low={3} optimum={5} high={7} value={2}  min="0" max="10"/>
-                        <Form.Slider min={-5} max={5} step={1} defaultValue={0} />
-                        <input type="range" min={1} max={10} step={1} list="markers"/>
-                        <datalist id="markers">
-                            <option value="0"></option>
-                            <option value="1"></option>
-                            <option value="2"></option>
-                            <option value="3"></option>
-                            <option value="4"></option>
-                            <option value="5"></option>
-                            <option value="6"></option>
-                            <option value="7"></option>
-                            <option value="8"></option>
-                            <option value="9"></option>
-                            <option value="10"></option>
-                        </datalist>
-                    </Form.Group>
-
-                    <h6>Input Group</h6>
-                    <InputGroup.Grid>
-                        <InputGroup controlId="input-group-test">
-                            <InputGroup.Text>Form.Control</InputGroup.Text>
-                            <Form.Control />
-                        </InputGroup>
-                        <InputGroup controlId="input-group-test-select">
-                            <Form.SelectTag>
-                                <option value="">Choose...</option>
-                                <option value="wisely">Wisely</option>
-                                <option value="poorly">Poorly</option>
-                            </Form.SelectTag>
-                            <InputGroup.Text>Form.Select</InputGroup.Text>
-                        </InputGroup>
-                        <Form.Check label="test"/>
-                    </InputGroup.Grid>
-
-                    <h6>Floating Label (in Input Group Grid)</h6>
-                    <InputGroup.Grid>
-                        <FloatingLabel controlId="floating-1" label="Floating 1">
-                            <Form.Control hint={{message: "Testing this error message looooooooooooooooooooooooooooooooooooooooooooong"}} error={{message: "Testing this error message"}} placeholder="Enter input..." />
-                        </FloatingLabel>
-                        <FloatingLabel controlId="floating-2" label="Floating 2">
-                            <Form.SelectTag>
-                                <option value="">Choose...</option>
-                                <option value="wisely">Wisely</option>
-                                <option value="poorly">Poorly</option>
-                            </Form.SelectTag>
-                        </FloatingLabel>
-                        <FloatingLabel controlId="floating-3" label="Floating 3">
-                            <Form.Control as="textarea" placeholder="Enter input..." />
-                        </FloatingLabel>
-                    </InputGroup.Grid>
-                    <Button type="submit">Submit</Button>
-                </Form>
-            </div>
-        </div>
-    )
-}
-
-export default FormPage

package/dev/pages/ListPage.jsx

@@ -1,52 +0,0 @@
-import List from "../../src/List"
-import Button from "../../src/Button"
-import { useEffect, useRef } from "react"
-
-const ListPage = () => {
-    return(
-        <>
-            <h4 style={{marginLeft:"1.5rem"}}>List</h4>
-            <section className="list-container">
-                <List depth={1} dragdrop={true}>
-                    <List.Item>
-                        <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 0</span>
-                        </List.Item>
-                    <List.Sublist>
-                        <List.Label id="test-1">
-                            <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Sublist 1</span>
-                        </List.Label>
-                        <List depth={2} aria-labelledby="test-1">
-                            <List.Item id="1">
-                                <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 2</span>
-                            </List.Item>
-                            <List.Item id="2">
-                                <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 3</span>
-                            </List.Item>
-                            <List.Sublist>
-                                <List.Label id="sublist-test-1">
-                                    <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Sublist 2</span>
-                                </List.Label>
-                                <List depth={3} aria-labelledby="sublist-test-1">
-                                    <List.Item id="1">
-                                        <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 5</span>
-                                    </List.Item>
-                                    <List.Item id="2">
-                                        <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 6</span>
-                                    </List.Item>
-                                </List>
-                            </List.Sublist>
-                        </List>
-                    </List.Sublist>
-                    <List.Item id="test-4">
-                        <span style={{ padding:"0.5rem 1rem", border:"1px solid white"}}>Test 4</span>
-                    </List.Item>
-                    <List.Item id="test-5">
-                        <span style={{ padding:"0.5rem 1rem", border:"1px solid white"}}>Test 5</span>
-                    </List.Item>
-                </List>
-            </section>
-        </>
-    )
-}
-
-export default ListPage

package/dev/pages/ModalPage.jsx

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import Button from "../../src/Button"
-import Modal from "../../src/Modal"
-import useScreenSize from "../../src/hooks/useScreenSize"
-
-const ModalPage = () => {
-    const [showModal, setShowModal] = useState(false)
-    const {width} = useScreenSize()
-    const onHide = (event) => {
-        setShowModal(false)
-    }
-    return (
-        <>
-            <Button onClick={(event) => setShowModal(true)}>
-                Modal
-            </Button>
-            <Modal fill show={showModal} onHide={onHide} size='md'>
-                <Modal.Header closeButton>
-                    <Modal.Title>Test Modal: {width}</Modal.Title>
-                </Modal.Header>
-                <form>
-                    <Modal.Body>
-                        <p>
-                            test
-                        </p>
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <small>Test footer</small>
-                        <button type="button" onClick={(event) => setShowModal(false)}>Cancel</button>
-                    </Modal.Footer>
-                </form>
-            </Modal>
-        </>
-    )
-}
-
-export default ModalPage

package/dev/pages/OverlayPage.jsx

@@ -1,39 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import Overlay from '../../src/Overlay/Overlay'
-import Button from "../../src/Button"
-
-const OverlayElement = () => {
-    return (
-      <div style={{height:"20px", width:"20px", backgroundColor:"red"}}></div>
-    )
-}
-
-const OverlayPage = () => {
-    const buttonRef = useRef(null)
-    const [show, setShow] = useState(false)
-    const handleToggle = (event) => {
-        setShow(prev => !prev)
-    }
-    useEffect(() => {
-        //if(buttonRef.current) console.log(buttonRef.current)
-    }, [buttonRef.current])
-    return (
-        <>
-            <h4>Overlay</h4>
-            <section className="overlay-container">
-                <Overlay overlay={<OverlayElement/>}  trigger={"click"}>
-                    <Button ref={buttonRef} onClick={(event) => console.log(buttonRef.current)}>Click</Button>
-                </Overlay>
-            </section>
-            <h4>Tooltip</h4>
-            <section className="overlay-container">
-                <Overlay tooltip={"Testing a tooltip with a long message. This messsage is so long it hsould in theory trigger a wrap."} trigger={"hover"}>
-                    <span style={{display:"block",border:"2px solid white"}}>Click</span>
-                </Overlay>
-            </section>
-        </>
-    )
-}
-
-export default OverlayPage

package/dev/pages/components.jsx

@@ -1,19 +0,0 @@
-export const CodeBlock = ({children, code}) => {
-    return (
-        <div className="code-block">
-            <pre>{code}</pre>
-            <div>
-                <dl>
-                    <dt>
-                        Properties:
-                    </dt>
-                    <dd>
-                        <ul>
-                            {children}
-                        </ul>
-                    </dd>
-                </dl>
-            </div>
-        </div>
-    )
-}