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