09/4 Day 28 Lecture Notes

[Limlight86]

09/4 Day 28 Lecture Notes

Storybook

• Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.

• A tool to unite the collaboration of developer and designer.

• Create uniformed building blocks for applications to maintain look styles and branding.

Reusability is a big feature of creating component in React. https://storybook.js.org/

• npx is a command that downloads and executes a depend ency.

• npx sb init to run on your app.

• Creating modular components with a lot of flexibility can save you a ton of time down the road.

• yarn storybook will launch a storybook manager at localhost:6006 by default. There you can see your component library and manage it.

• In a stories folder in the src, we will create storybook component routes with the following naming convention: Component.stories.js

• Theses are created like you would other components with some additional syntax to facilitate the storybook experience.

• In the storybook component file we can now create variations on the base component by passing it a different set of arguments. I.e for the Product we can have small and large versions.

import React from 'react';
import styled from 'styled-components';
import Product from '../components/Product'
import styles from '../styles/'
import { CartContextProvider } from '../context/Cart';

export default {
  title:'Components/Product',
  component: Product
};

const Wrapper = styled.div`
width: 100%;
height:100%;
background-color: ${styles.color.mediumGray};
`
const Container = styled.div`
  padding: 3rem;
  min-height: 6rem;
  display: flex;
  overflow:scroll;
`

const Template =(args)=>(
  <Wrapper>
    <Container>
    <CartContextProvider>
    <Product {...args} />
    </CartContextProvider>
    </Container>
  </Wrapper>
)

export const SingleProduct = Template.bind({})

SingleProduct.args={
  priceId:'01234',
  productImage:'https://cdn.sanity.io/images/czqk28jt/prod_bk_us/8fe92cfa31a2aa90e30e0fbe80eea3693c88e49c-400x266.png?w=1077&fm=webp&q=40&fit=max',
  productName:'Whopper',
  currency:'USD',
  priceCents:499,
  nutrition:'0'
}

• Css properties can be modified by using props which can be specified upon component creation.

import React from 'react';
import styled from 'styled-components';
import styles from '../styles';

//colors object is being brought in from styles
//Export default with title
//Export the Story Variants i.e MainColors

export default {
  title:'Components/Color',
};

const Wrapper = styled.div`
width: 100%;
height:100%;
background-color: ${styles.color.mediumGray};
`
const Row = styled.div`
display:flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
`
const ColorColumn = styled.div`
 display: flex;
 flex-direction:column;
 flex:1;
 background-color: ${props => props.color};
 height: 8rem;
 padding:2rem;
 justify-content: center;
 align-items: center;
`

const colors = styles.color;

const Template = ()=>(
  <Wrapper>
    <Row>
      { Object.keys(colors).map((colorKey)=>(
          <ColorColumn color={colors[colorKey]}>
            Name: {colorKey.toLocaleUpperCase()} <br/>
            Value: {colors[colorKey]}
          </ColorColumn>
        ))
      }
    </Row>
  </Wrapper>
);

export const MainColors = Template.bind({})

MainColors.args={};