KitchenSink.jsx 2.62 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
import React, { useState } from 'react'
import {
  H1,
  Link,
  Icon,
  StateItem,
  TextArea,
  TextField,
  Steps,
  CenteredColumn,
  Section,
} from '@pubsweet/ui'

import { NoteEditor } from 'xpub-edit'

const HelloWorld = () => {
  const stateItemValues = ['To Clean', 'Cleaning', 'Cleaned']
  const [stateItemIndex, setIndex] = useState(0)

  const [textAreaValue, setTextAreaValue] = useState(
    'A text area you can write in...',
  )

  const [textFieldValue, setTextFieldValue] = useState(
    'And a text field to write in too!',
  )

  const [currentStep, setCurrentStep] = useState(0)

  return (
    <CenteredColumn>
      <H1>A little kitchen sink garden</H1>
      <Section>
        This is a small number of components available in PubSweet! For more go
        to <Link to="http://pubsweet.coko.foundation">our docs.</Link>
      </Section>

      <Section>
        <StateItem
          index={stateItemIndex}
          update={(_, nextIndex) => setIndex(nextIndex)}
          values={stateItemValues}
        />
      </Section>

      <Section>
        <TextArea
          label="Foo"
          onChange={event => setTextAreaValue(event.target.value)}
          placeholder="so you can write some in here"
          value={textAreaValue}
        />
      </Section>

      <Section>
        <TextField
          label="Foo"
          onChange={event => setTextFieldValue(event.target.value)}
          placeholder="so you can write some in here"
          value={textFieldValue}
        />
      </Section>

      <Section>
        <p>There are things like a step/wizard component:</p>
        <Steps currentStep={currentStep} margin="40px 50px">
          <Steps.Step title="First step" />
          <Steps.Step title="Second step" />
          <Steps.Step title="Third step" />
        </Steps>
        <button
          onClick={() => {
            if (currentStep > 0) {
              setCurrentStep(currentStep - 1)
            }
          }}
        >
          Prev
        </button>
        <button
          onClick={() => {
            if (currentStep < 3) {
              setCurrentStep(currentStep + 1)
            }
          }}
        >
          Next
        </button>
      </Section>
      <Section>
        <p>Or icons... </p>
        <Icon size={6}>check_circle</Icon>
      </Section>
      <Section>
        <p>Or more complete editors, like this one</p>
        <NoteEditor
Jure's avatar
Jure committed
97 98
          onBlur={value => value}
          onChange={value => value}
99 100 101 102 103 104 105 106 107 108
          placeholder="Enter a message…"
          title="Note"
          value="I'm a more complete editor!"
        />
      </Section>
    </CenteredColumn>
  )
}

export default HelloWorld