AustinLynes / merch_components

Labs Lib for merch store default components

merch_components

Welcome to merch components a component library for building web-stores

simplistic use for a simplistic app..

Components

---

Basic Usage
Container
Header
Item
Navigation
Carousel
Image
Button
Button Group
Link Bar
Placeholder
Footer

---

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { Item, Container } from 'merch_components'
import {data} from './__mock/data'  // ?? or.. 

function App() {
  const [items, setItems] = useState(data);
  
  const styleOverrides = {
    wrapperStyle:{
      width:'100%',
      {...}
    },
    {...}
  }
  handleClick = (e) =>{
    // e.preventDefault() is called by default inside the components...
    clickLogic(...)
  }
  handleChange = (e) =>{
    // e.preventDefault() is called by default inside the components...
    changeLogic(...)
  }
  return (
    <div className="App">
      <Container>
        {/* as you can see all you have to do is pass in the data shape style and cbs */}
        {items && items.map((item, i)=>(<Item item={item} style={styleOverrides} onClickCallback={handleClick} onChangeCallback={handleChange}/>))}
      </Container>
    </div>
  );
}

export default App;

Container

The Container is used mostly for wrapping multiple components..
there are exceptions..
the <Button/> component for instance would be wrapped inside a <ButtonGroup/>..

{...}
import{ Container }from 'merch_components';

const Component = () => {
  {...}
  return (
    <Container>{..wraps most components}</Container>
  )
}

---

CSS AVALABLE TO OVERRIDE
none... sorry..

---

Header

the <Header/> is a static component that doesn't move
it takes in a title, a path to a logo and any style overrides.
it comes stock with, a search bar and a cart component.

{...}
import{Header}from 'merch_components';

const Component = () => {
  {...}
  return (
    <Header title='title of store' logoSrc='url-or-path/to/src' style={...anyOverridingStyles}/>
  )
}

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Item

the <Item/> is by far the most complex pre built component. it acceptes an object {} for an item
that will build an item based on the information you pass in. for instance an item thats on sale
will have a sale flag on the top of it while an item that does not. simply doesnt..
all items accept an image inside the object. if the image isnt found however if one isn't found then
the placeholder will show in the place of any image.. all text areas on the item are able to be swapped with
an input to take in user input and change the item on the fly from the 'builder'
the onClickCallback and onChangeCallback respectivly utalize their in built onChange and onClick events.. just have
to pass in the method you want to do.

{ 
  "id" : 0,
  "itemName": "Item",
  "itemCost": 0.00,
  "imageSrc": "src/to/item-image",
  "saleCost": 0.00,
  "onSale":   false,
  "onClickCallback",
  "onChangeCallback",
}

^^^ the object structure for the item itself
vvv how to use an Item

import {Container, Item}from 'merch_components';

const Component = ()=>{
  
  const [data, setData] = ({...^})
  const style = {
    ...someStyles
    }
  
  handleClick = (e) =>{
    // add something ?? delete something.. your choice.. your app
    setData({...})
  }
  handleChange = (e) =>{
    // update something ?? 
    setData({...})
  }
  return (
    <Container>
      <Item item={data} style={style} onClickCallback={handleClick} onChangeCallback={handleChange}/>
    </Container>
  )
}

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Navigation

{ "links": "[]" }

{...}
import{Navigation}from 'merch_components';

const Component = () => {
 {...}  
 return (
   <Navigation buttons={[buttons1, button2]} style={...anyOverridingStyles}/>
 )
}

where buttons is an array of button objects with { id, name, url }

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Carousel

  { 
    "images": "[]" 
  }

  import { Container, Carousel } from 'merch_components'

  const imgs = [...img, ...img, ...img]
  
  const App = () => {
    return (
      <Container>
        <Carousel images={...imgs}/>
      </Container>
    )

  }

where images is an array of images.. will cycle

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Image

{
   "size": "[medium, small, none]",
   "src": "src to image", 
}

  import { Container, Carousel } from 'merch_components'

  const path = '../'
  
  const App = () => {
    return (
        <Image size={'medium'} src={path} />
    )

  }

will result in 3 different sized images aspect ratio scaled accordingly

---

CSS AVALABLE TO OVERRIDE
none... sorry..

---

Button

{...}
import{Button, ButtonGroup}from 'merch_components';

const Component = () => {
  {...}
  return (
    <ButtonGroup>
    {...}
       <Button name='name-of-button' style={...optionalStyles} onClickCallback={()=>{...}} />
    </ButtonGroup>
  )
}

name => the text that is displayed on the button
style => any optional styles to override the object, acceptes an object { }
onClickCallback => what you want to happen when this item is called.

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Button Group

{...}
import{Button, ButtonGroup}from 'merch_components';

const Component = () => {
  {...}
  return (
    <ButtonGroup>
    {...}
    <Button />
    </ButtonGroup>
  )
}

---

CSS AVALABLE TO OVERRIDE
none... sorry..

---

Link Bar

{...}
import{Linkbar}from 'merch_components';
const links = ['facebook', 'twitter']
const Component = () => {
  {...}
  return (
    <Linkbar links={...links} />
  )
}

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Placeholder

{...}
import{ Placeholder }from 'merch_components';
const Component = () => {
  {...}
  return (
    <Placeholder type={'item'} />
  )
}

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---

Footer

{ "buttons": "[]" }

{...}
import{ Footer }from 'merch_components';

const Component = () => {
 {...}  
 return (
   <Footer buttons={[ {...button1 }, {...button2 } ]} style={{...anyOverridingStyles}}/>
 )
}

---

CSS AVALABLE TO OVERRIDE
padding, -> padding
border, -> border
width, -> width
border-radius, -> borderRadius
background-color, -> backgroundColor
color -> color

---