jrts-web-ll

Web components from client project

Install

npm install --save jrts-web-ll

Usage

import React, { Component } from 'react'
import "bootstrap/dist/css/bootstrap.min.css"

import { 
  ButtonLinkOpaque, 
  Foo,
  Footer,
  BgImg,
  SideDrawer,
  Backdrop,
  Modal,
  HttpLoadOrError,
  BgImgOpaque,
  FAQs,
  createSanityClient,
  IntroLayover,
  MobileLayerRow,
  PictureSlideInFromRight,
  Testimonial,
  Alert,
  BgVideoCenterDiv,
  BasicContentPreview,
  CategoryList,
  Map,
  Hours,
  Input,
  ContactForm
  } from 'jrts-web-ll'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.onChangeSideDrawer = this.onChangeSideDrawer.bind(this)
    this.onChangeModal = this.onChangeModal.bind(this)
    this.onChangePicture = this.onChangePicture.bind(this)

    this.state = {
      showSideDrawer: false,
      showModal: false,
      showPicture: false
    }
  }

  onChangeSideDrawer() {
    this.setState({
      showSideDrawer: this.state.showSideDrawer ? false : true
    })
  }

  onChangePicture() {
    this.setState({
      showPicture: this.state.showPicture ? false : true
    })
  }

  onChangeModal() {
    this.setState({
      showModal: this.state.showModal ? false : true
    })
  }

  render () {
    const client = createSanityClient('zbi98nq2')

    const hoursPerDay = [
      {day: "Mon", hours: "9AM-5PM"},
      {day: "Tues", hours: "9AM-7PM"},
      {day: "Wed", hours: "9AM-7PM"},
      {day: "Thurs", hours: "9AM-7PM"},
      {day: "Fri", hours: "9AM-5PM"},
      {day: "Sat*", hours: "10AM-4PM"},
      {day: "Sun", hours: "Closed"}
    ]
    return (
      <div>
        <Foo />
        <ButtonLinkOpaque
          btnSize="lg"
          text="Button"
         />
        <Footer
          year="2020"
          business="JRTS"
          colOne={<h1>Column 1</h1>}
          colTwo={<h1>Column 2</h1>}
          colThree={<h1>Column 3</h1>}
        />
        <BgImg image="https://cdn.sanity.io/images/zlybple6/production/ddab0516f67e4efcf3fe93efec351116aa6e9b41-840x563.jpg" />
        <SideDrawer show={this.state.showSideDrawer}>
          <ul>
            <li><button onClick={() => this.onChangeSideDrawer()}>Close side drawer</button></li>
            <li>Two</li>
            <li>Three</li>
          </ul>
        </SideDrawer>
        <Backdrop show={this.state.showSideDrawer} clicked={() => this.onChangeSideDrawer()} />
        <button onClick={() => this.onChangeSideDrawer()}>Side Drawer</button>
        <Modal show={this.state.showModal} modalClosed={this.onChangeModal}>
          <h1>Modal content</h1>
        </Modal>
        <button onClick={() => this.onChangeModal()}>Modal</button>
        <HttpLoadOrError error={true} loading={true}>
          <p>Example error message for HttpLoadOrError</p>
        </HttpLoadOrError>
        <BgImgOpaque 
          backgroundStyling={{ background: "black", opacity:"0.3"}}
          imageStyling={{
                height: "50vh",
                width: "100%",
                backgroundImage: `url(https://cdn.sanity.io/images/zlybple6/production/e7571c01c4fb17c6867b37c041cf240872ac64e3-840x630.jpg)`
            }}
        >
          <h1>BgImgOpaque</h1>
        </BgImgOpaque>
        <FAQs
          title="Frequently Asked Questions"
          sanityQuery="*[_type == 'faq']{title, 'content': answer[]{..., 'asset': asset->}}"
          client={client} />
        <IntroLayover backdropStyling={{backgroundColor: "rgba(220,220,220,.7"}} text="This is the IntroLayover component" />
        <MobileLayerRow 
          title="Services" 
          text="This is the text prop in the MobileLayerRow component"
          image="https://cdn.sanity.io/images/zlybple6/production/a744a3ed1d86528e04e3057d13852dd377122a72-630x840.jpg"
          ><ButtonLinkOpaque btnSize="md" text="Button with Transition?" /></MobileLayerRow>
          <PictureSlideInFromRight 
            image="https://cdn.sanity.io/images/zlybple6/production/a744a3ed1d86528e04e3057d13852dd377122a72-630x840.jpg"
            show={this.state.showPicture}
            close={this.onChangePicture}
          />
          <button onClick={this.onChangePicture}>Show Picture</button>
          <Testimonial text="This is the testimonial component" source="Jarrett" />
          <Alert client={client} />
          <BgVideoCenterDiv
            title="BgVideoCenterDiv"
            text="Maybe one day a video is behind this div"
            >
              <ButtonLinkOpaque text='Click Me' btnSize="lg"/>
          </BgVideoCenterDiv>
          <BasicContentPreview
           title='BasicContentPreview'
           mainImgUrl="https://cdn.sanity.io/images/zlybple6/production/e7571c01c4fb17c6867b37c041cf240872ac64e3-840x630.jpg"
           styling={{margin: "30px", boxShadow: "5px 0 22px black"}}
          />
          <CategoryList
            label='CategoryList'
            selectedCategories={'first'}
            categories={['first', 'second', 'third']}
            changeCategory={() => console.log('category changed')}
          />
          <Map
           title="Map Component"
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2684.5577582307524!2d-117.41393278414337!3d47.71242287919176!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x549e194c2fd25c2d%3A0x4b226acd102d3442!2s6011%20N%20Division%20St%2C%20Spokane%2C%20WA%2099208!5e0!3m2!1sen!2sus!4v1578676029939!5m2!1sen!2sus"
          />
          <Hours styling={{textAlign: "center"}} hoursAndDay={hoursPerDay} title="Hours" />
          <Input
           inputtype="input"
           placeholder="Input component"
           type="text"
           text="Extra text"
           label="Input component"
           className="form-control"
           smallStyling={{color: "red"}}
          />
          <Input
           inputtype="textarea"
           placeholder="textarea"
           type="text"
           label="Input component"
           className="form-control"
           text="help"
          />
          <ContactForm
            titleStyling={{color: "red"}}
            title="Contact Form"
            url="/api/nowhere"
            errorMessage="Something went wrong.."
            successMessage="Hurray"
            textareaLabel="Message"
            textareaPlaceholder="Send us a message!"
            labelStyling={{color: "blue"}}
          />
      </div>
    )
  }
}

License

MIT © jdretz