import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { Monterey, View, Text, theme } from '@tedconf/monterey';
import { number, select, text } from '@storybook/addon-knobs';

<Meta title="Primitives|View" component={View} />

# View

## Import the View

<Source
  code={`
import { View } from '@tedconf/monterey';
`}
/>

## Use the view

apply any necessary layout styles, including `color`, `backgroundColor`,
`margin`, `padding`, `flex`, `width`, `height`, etc — essentially anything that
isn’t a typographical property. The `View` primitive is meant to replace
a `div`, and by default, semantically renders a `div`, but can take any tag via
the `as` prop. A `View` is a flexbox container with `flexDirection: column`
set.

### Default

<Story name="kitchen sink">
  <View
    sx={{
      backgroundColor: select(
        'backgroundColor',
        Object.entries(theme.colors)
          .flatMap(([k, v]) => {
            if (typeof v === 'object') {
              return Object.entries(v).map(([l, val]) => ({
                name: `${k}.${l}`,
                value: val,
              }));
            }
            return {
              name: k,
              value: v,
            };
          })
          .reduce((acc, curr) => {
            acc[curr.name] = curr.value;
            return acc;
          }, {}),
        'white',
      ),
      color: select(
        'color',
        Object.entries(theme.colors)
          .flatMap(([k, v]) => {
            if (typeof v === 'object') {
              return Object.entries(v).map(([l, val]) => ({
                name: `${k}.${l}`,
                value: val,
              }));
            }
            return {
              name: k,
              value: v,
            };
          })
          .reduce((acc, curr) => {
            acc[curr.name] = curr.value;
            return acc;
          }, {}),
        'black',
      ),
      padding: number('padding', 0),
      margin: number('margin', 0),
    }}
  >
    <Text variant="2b">Play with the properties</Text>
  </View>
</Story>

### Why?

The advantage of the `View` primitive is that it uses design tokens by default
— `padding: 2` means "step 2 on the spacing scale", and `color: 'black'` means
"black from the color palette".

<Preview>
  <Monterey>
    <View
      sx={{
        backgroundColor: 'gray.1',
        color: 'gray.6',
        padding: 2,
      }}
    >
      <Text variant="2b">Play with the properties</Text>
    </View>
  </Monterey>
</Preview>