-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
example app: table, form, charts components (#5)
- Loading branch information
Showing
6 changed files
with
458 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import React from "react"; | ||
| import { Bar, Area } from "recharts"; | ||
|
|
||
| import { ContentSection, CustomComposedChart } from "@certego/certego-ui"; | ||
|
|
||
| import ComponentAsExample from "./ComponentAsExample"; | ||
|
|
||
| // constants | ||
| const chartData = [ | ||
| { | ||
| name: "Page A", | ||
| uv: 4000, | ||
| pv: 2400, | ||
| amt: 2400, | ||
| }, | ||
| { | ||
| name: "Page B", | ||
| uv: 3000, | ||
| pv: 1398, | ||
| amt: 2210, | ||
| }, | ||
| { | ||
| name: "Page C", | ||
| uv: 2000, | ||
| pv: 9800, | ||
| amt: 2290, | ||
| }, | ||
| { | ||
| name: "Page D", | ||
| uv: 2780, | ||
| pv: 3908, | ||
| amt: 2000, | ||
| }, | ||
| { | ||
| name: "Page E", | ||
| uv: 1890, | ||
| pv: 4800, | ||
| amt: 2181, | ||
| }, | ||
| { | ||
| name: "Page F", | ||
| uv: 2390, | ||
| pv: 3800, | ||
| amt: 2500, | ||
| }, | ||
| { | ||
| name: "Page G", | ||
| uv: 3490, | ||
| pv: 4300, | ||
| amt: 2100, | ||
| }, | ||
| ]; | ||
| const chartLabels = [ | ||
| ["uv", "#82ca9d"], | ||
| ["pv", "#8884d8"], | ||
| ["amt", "#abb000"], | ||
| ]; | ||
|
|
||
| // Example component | ||
| export default function Charts(props) { | ||
| return ( | ||
| <ContentSection {...props}> | ||
| <ComponentAsExample | ||
| name="CustomComposedChart" | ||
| bodyNode={ | ||
| <> | ||
| <h6 className="text-gradient">SimpleBarChart</h6> | ||
| <ContentSection className="bg-darker"> | ||
| <CustomComposedChart xAxisDataKey="name" data={chartData}> | ||
| {chartLabels.slice(0, 2).map(([name, color]) => ( | ||
| <Bar dataKey={name} fill={color} /> | ||
| ))} | ||
| </CustomComposedChart> | ||
| </ContentSection> | ||
| <h6 className="text-gradient">StackedBarChart</h6> | ||
| <ContentSection className="bg-darker"> | ||
| <CustomComposedChart xAxisDataKey="name" data={chartData}> | ||
| {chartLabels.slice(0, 2).map(([name, color]) => ( | ||
| <Bar stackId="a" dataKey={name} fill={color} /> | ||
| ))} | ||
| {chartLabels.slice(2, 3).map(([name, color]) => ( | ||
| <Bar dataKey={name} fill={color} /> | ||
| ))} | ||
| </CustomComposedChart> | ||
| </ContentSection> | ||
| <h6 className="text-gradient">SimpleAreaChart</h6> | ||
| <ContentSection className="bg-darker"> | ||
| <CustomComposedChart xAxisDataKey="name" data={chartData}> | ||
| {chartLabels.slice(0, 2).map(([name, color]) => ( | ||
| <Area | ||
| type="monotone" | ||
| stackId="b" | ||
| dataKey={name} | ||
| stroke={color} | ||
| fill={color} | ||
| /> | ||
| ))} | ||
| </CustomComposedChart> | ||
| </ContentSection> | ||
| </> | ||
| } | ||
| /> | ||
| <h6> | ||
| See{" "} | ||
| <a | ||
| href="https://recharts.org/en-US/examples" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="link-ul-primary" | ||
| > | ||
| Recharts examples | ||
| </a>{" "} | ||
| for more. | ||
| </h6> | ||
| </ContentSection> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| import React from "react"; | ||
| import { Col, Label, FormGroup } from "reactstrap"; | ||
| import { CustomInput as FormInput, Submit } from "formstrap"; | ||
| import { Form, Formik } from "formik"; | ||
|
|
||
| import { | ||
| ContentSection, | ||
| Select, | ||
| AsyncSelect, | ||
| ButtonSelect, | ||
| TernaryCheckbox, | ||
| MultiSelectTextInput, | ||
| InputCheckBox, | ||
| CustomJsonInput, | ||
| TextBoxInput, | ||
| } from "@certego/certego-ui"; | ||
|
|
||
| // constants | ||
| const asyncSelectProps = { | ||
| url: "https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json", | ||
| mapFn: (x) => ({ label: x["country"], value: x["country"] }), | ||
| }; | ||
| const occupationChoices = [ | ||
| { label: "Software Engineer", value: "swe" }, | ||
| { label: "Super Shadowy Coder", value: "ssc" }, | ||
| ]; | ||
| const genderChoices = ["Female", "Male", "Other"]; | ||
| const initialValues = { | ||
| name: "", | ||
| country: "", | ||
| gender: genderChoices[0], | ||
| likeUI: true, | ||
| occupation: occupationChoices[0]["value"], | ||
| techTags: [], | ||
| acceptTerms: false, | ||
| additionalNote: "", | ||
| }; | ||
|
|
||
| // Examples | ||
| export default function FormExample(props) { | ||
| const onFormSubmit = React.useCallback(async (values, formik) => { | ||
| try { | ||
| await alert(JSON.stringify(values)); | ||
| } catch (e) { | ||
| // redundant catch | ||
| } finally { | ||
| formik.setSubmitting(false); | ||
| } | ||
| }, []); | ||
|
|
||
| return ( | ||
| <ContentSection {...props}> | ||
| <Formik | ||
| initialValues={initialValues} | ||
| onSubmit={onFormSubmit} | ||
| validateOnMount | ||
| > | ||
| {(formik) => ( | ||
| <Form className="content-section bg-body"> | ||
| <FormGroup | ||
| row | ||
| className="d-flex-start-center flex-lg-row flex-md-column" | ||
| > | ||
| {/* FormInput */} | ||
| <Col lg={4}> | ||
| <Label className="required" htmlFor="name"> | ||
| Name | ||
| </Label> | ||
| <FormInput | ||
| autoFocus | ||
| type="text" | ||
| name="name" | ||
| className="form-control" | ||
| /> | ||
| </Col> | ||
| {/* AsyncSelect */} | ||
| <Col lg={3}> | ||
| <Label className="required" htmlFor="country"> | ||
| Country | ||
| </Label> | ||
| <AsyncSelect multi name="country" {...asyncSelectProps} /> | ||
| </Col> | ||
| {/* ButtonSelect */} | ||
| <Col lg={3}> | ||
| <Label className="required" htmlFor="gender"> | ||
| Gender | ||
| </Label> | ||
| <ButtonSelect | ||
| className="d-block" | ||
| name="gender" | ||
| value={formik.values.gender} | ||
| choices={genderChoices} | ||
| onChange={(ch) => formik.setFieldValue("gender", ch)} | ||
| /> | ||
| </Col> | ||
| </FormGroup> | ||
| <FormGroup | ||
| row | ||
| className="d-flex-start-start flex-lg-row flex-md-column" | ||
| > | ||
| {/* Select */} | ||
| <Col lg={3}> | ||
| <Label className="required" htmlFor="occupation"> | ||
| Select Occupation | ||
| </Label> | ||
| <Select name="occupation" choices={occupationChoices} /> | ||
| </Col> | ||
| {/* MultiSelectTextInput */} | ||
| <Col lg={6}> | ||
| <Label className="required" htmlFor="techTags"> | ||
| Add some technologies you work with | ||
| </Label> | ||
| <MultiSelectTextInput | ||
| defaultElements={formik.values.techTags} | ||
| onElementsChange={(v) => formik.setFieldValue("techTags", v)} | ||
| /> | ||
| </Col> | ||
| </FormGroup> | ||
| <FormGroup | ||
| row | ||
| className="d-flex-start-start flex-lg-row flex-md-column" | ||
| > | ||
| {/* TernaryCheckbox */} | ||
| <Col md={6}> | ||
| <Label className="required" htmlFor="likeUI"> | ||
| Do you like this UI ? | ||
| </Label> | ||
| <TernaryCheckbox | ||
| className="d-block" | ||
| undefLabel="Maybe" | ||
| value={formik.values.likeUI} | ||
| onChange={(ch) => formik.setFieldValue("likeUI", ch)} | ||
| /> | ||
| </Col> | ||
| </FormGroup> | ||
| <FormGroup row className="d-flex-start-start"> | ||
| {/* TextBoxInput */} | ||
| <Col lg={6}> | ||
| <Label htmlFor="additionalNote">Additional Note</Label> | ||
| <TextBoxInput name="additionalNote" /> | ||
| </Col> | ||
| </FormGroup> | ||
| <FormGroup row className="ml-1"> | ||
| {/* InputCheckBox */} | ||
| <InputCheckBox | ||
| className="bg-body" | ||
| label="I Accept the terms and conditions" | ||
| name="acceptTerms" | ||
| valid={formik.values.acceptTerms} | ||
| /> | ||
| </FormGroup> | ||
| <FormGroup row className="d-flex-start-start"> | ||
| {/* CustomJsonInput */} | ||
| <Col lg={6}> | ||
| <Label htmlFor="debugForm">Debug Form Values</Label> | ||
| <CustomJsonInput placeholder={formik.values} viewOnly /> | ||
| </Col> | ||
| </FormGroup> | ||
| {/* Submit */} | ||
| <FormGroup row className="mt-5 d-flex-start-center"> | ||
| <Submit | ||
| withSpinner | ||
| disabled={!(formik.isValid || formik.isSubmitting)} | ||
| color="primary" | ||
| outline | ||
| className="mx-auto" | ||
| size="md" | ||
| > | ||
| {!formik.isSubmitting && "Submit"} | ||
| </Submit> | ||
| </FormGroup> | ||
| </Form> | ||
| )} | ||
| </Formik> | ||
| <h6>Above example form shows usage of all components.</h6> | ||
| </ContentSection> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.