Add interactive examples to README

[kettanaito]

What:

The README should include the list of examples. Each example item should contain:

1. A thumbnail image.
2. A title.
3. A short description on the example's purpose.
4. A link to the interactive playground (Codesandbox) with the respective example.

Why:

Carefully designed, a list of examples may substitute documentation at its entirety. At least it's a great illustrative showcase for practical learners and beyond.

How:

I suggest to split examples into sections based on the complexity level.

Basics

• Basic composition. Example of two elements combining into a composition. Can be icon and text, or anything.
• Responsive props. Shows how to use Responsive props. Can utilize the previous "Basic composition" example, but improve it with some responsive props to show the change.
• Nested composition

Intermediate

• Conditional rendering. Showcases the usage of the <Only/> component.
• Custom configuration. Example of using Layout.configure() to set custom breakpoints and custom measurement unit.
• Demonstrate how to use the query() utility function to compose inline media queries in styled-components

Advanced

• Responsive sife effect. How to execute any side effect upon breakpoint change (useResponsiveQuery)
• Responsive component. How to add Responsive props support to any React component.
• SSR of conditional components. How to use <Visible/> to conditionally render components and support client-side hydration.

[dandelionadia]

I will edit this comment if I finish more examples.

Basics

• Basic composition: https://codesandbox.io/s/simple-composition-5mvlr
• Responsive props: https://codesandbox.io/s/responsive-props-8m14f
• Nested composition: https://codesandbox.io/s/nested-composition-8p8pk

Intermediate

• Conditional rendering: https://codesandbox.io/s/conditional-rendering-4k90o?file=/src/index.js
• Custom configuration: https://codesandbox.io/s/custom-configuration-d01ku?file=/src/index.js
• Query: https://codesandbox.io/s/atomic-layout-query-d2mdl

[kettanaito]

I'll describe the intermediate examples in more detail below.

Intermediate examples

Conditional rendering (Only)

Need to come up with a practical example of conditional rendering. Maybe a burger menu in header?

Custom configuration

The intention is to illustrate how to configure your layout consistently using Layout.configure.

// src/index.jsx
import Layout from 'atomic-layout'

Layout.configure({
  defaultUnit: 'rem',
  breakpoints: {
    mobile: {
      maxWidth: '570px'
    },
    tablet: {
      minWidth: '571px',
     maxWidth: '960px'
    },
    desktop: {
      minWidth: '961px'
    }
  }
})

After the configuration is applied, demonstrate how it works by writing a simple Box/Composition and using those custom breakpoints for responsive props (i.e. <Composition areasDesktop={...} />).

Using global layout settings

Show an example of a styled component that declares an explicit media query referencing to values from Atomic Layout.

[dandelionadia]

I did two examples to the Intermediate part.
Could you look at it please and tell me what you do not like and what do you want to change?

https://codesandbox.io/s/conditional-rendering-4k90o
https://codesandbox.io/s/custom-configuration-d01ku

[kettanaito]

@dandelionadia, thank you for providing those! Look amazing. If you don't mind, I'll list a few comments to the examples you've prepared.

Conditional rendering

• I'm grateful that you've included a link to my blog, but as it's not related to Atomic Layout, I'd probably ask you to remove it. "Documentation", "GitHub" and "Twitter" would be enough.
• It looks like the burger component is not vertically centered on mobile screens. Could you please look into that?

• In index.js you are using padding="20px", while px is your default measurement unit. Could you please replace it with padding={20} (which produces "20px" in your case).

Custom configuration

• If you open the console, you can see that there's an error from React regarding the unique key prop:

Warning: Each child in a list should have a unique "key" prop.

• I'd probably increase the border-radius on the Album, what do you think? You can look up the border radius from [your previous examples](Warning: Each child in a list should have a unique "key" prop.). It'd be great to align border radiuses between examples.

[kettanaito]

@dandelionadia, thank you for the fixes! Please, if I may, there are a few more comments.

Conditional rendering

• Could you please fix those errors in the console? They are related to prop name casing in Logo.js (svg element).
• I'd be better if "Documentation" linked to the root page. The same way "GitHub" should link to the repo page.
• Could you please also add a description to the example and some hashtags?

Custom configuration

• It'd be great to put the data array into a separate JSON file (i.e. data.json).
• What do you think if we set maxWidth={16} and maxWidthTablet={30} on Album.js component? So it doesn't stretch full-width on small screens.

[kettanaito]

Just merged the intermediate examples section to master!

Huge thanks once more, @dandelionadia! Looking forward to those advanced ones :)