Flatten components structure and provide components to styleguide examples

Author: Andrey Okonetchnikov

src/components/primitives/Box/Box.js renamed to src/components/primitives/Box.js

@@ -4,7 +4,7 @@ Box allows controlling its whitespace, layout, colors, etc. using design tokens.
 
 Following example should render a `div` that has `width: 25%`, `padding`, `margin`, and `background-color` values set.
 
-```jsx harmony
+```jsx
 <Box p={4} m={3} width={1 / 4} bg="muted">
   Box content
 </Box>

src/components/primitives/Box/Box.md renamed to src/components/primitives/Box.md

@@ -28,13 +28,12 @@ Button as a link:
 Full width button:
 
 ```js padded
-import Flex from '../Flex';
 <>
   <Flex flexDirection="column" mb={4}>
     <Button>Loooongcat is long</Button>
   </Flex>
   <Flex flexDirection="column">
     <Button variant="primary">Loooongcat is long</Button>
   </Flex>
-</>;
+</>
 ```

src/components/primitives/Box/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Box from '../Box';
+import Box from './Box';
 
 export const Flex = styled(Box)({
 	display: 'flex',

src/components/primitives/Button/Button.js renamed to src/components/primitives/Button.js

@@ -4,9 +4,7 @@ See https://styled-system.com/api#flexbox for more information.
 
 Using Flex we can create a simple columns layout:
 
-```jsx harmony
-import Box from '../Box';
-
+```jsx
 <Flex>
   <Box flex="1 1 auto" p={3} bg="grey.3">
     Column 1
@@ -17,14 +15,12 @@ import Box from '../Box';
   <Box flex="1 1 auto" p={3} bg="grey.5">
     Column 3
   </Box>
-</Flex>;
+</Flex>
 ```
 
 or rows:
 
-```jsx harmony
-import Box from '../Box';
-
+```jsx
 <Flex flexDirection="column">
   <Box p={3} bg="grey.3">
     Column 1
@@ -35,5 +31,5 @@ import Box from '../Box';
   <Box p={3} bg="grey.5">
     Column 3
   </Box>
-</Flex>;
+</Flex>
 ```

src/components/primitives/Button/Button.md renamed to src/components/primitives/Button.md

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Box from '../Box';
+import Box from './Box';
 
 export const Grid = styled(Box)({
 	display: 'grid',

src/components/primitives/Button/index.js

@@ -4,9 +4,7 @@ See https://styled-system.com/api#grid for more information.
 
 Using Grid we can create a complex grid layouts:
 
-```jsx harmony
-import Box from '../Box';
-
+```jsx
 <Grid gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))">
   <Box p={4} bg="grey.1">
     Grid Item
@@ -20,5 +18,5 @@ import Box from '../Box';
   <Box p={4} bg="grey.4">
     Grid Item
   </Box>
-</Grid>;
+</Grid>
 ```

src/components/primitives/Flex/Flex.js renamed to src/components/primitives/Flex.js

@@ -1,9 +1,9 @@
-```jsx harmony
+```jsx
 <Input type="text" />
 ```
 
 Disabled input:
 
-```jsx harmony
+```jsx
 <Input type="text" disabled />
 ```

src/components/primitives/Flex/Flex.md renamed to src/components/primitives/Flex.md

@@ -1,18 +1,17 @@
 Normal link:
 
-```jsx harmony
+```jsx
 <Link href="/">Normal link</Link>
 ```
 
 Shy link. Use for secondary content like footers or small copy.
 
-```jsx harmony
-import Text from '../Text';
+```jsx
 <Text>
   By using our site you agree to the following{' '}
   <Link href="/" shy>
     Terms of Service
   </Link>
   .
-</Text>;
+</Text>
 ```

src/components/primitives/Flex/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { system } from 'styled-system';
-import Grid from '../Grid';
+import Grid from './Grid';
 
 const px = value => (typeof value === 'number' ? `${value}px` : value);
 

src/components/primitives/Grid/Grid.js renamed to src/components/primitives/Grid.js

@@ -1,20 +1,16 @@
 Stack is a layout primitive that adds space around their children.
 
-```javascript
-import Button from '../Button';
-
+```jsx
 <Stack gridGap={4}>
   <Button>Button</Button>
   <Button>Button</Button>
   <Button>Button</Button>
-</Stack>;
+</Stack>
 ```
 
 Since Stack is based on [Grid](/#/Primitives?id=grid), all of `Grid` props are available:
 
-```javascript
-import Button from '../Button';
-
+```jsx
 <Stack gridGap={3} gridAutoFlow="column">
   <Button>Button</Button>
   <Button>Button</Button>
@@ -23,5 +19,5 @@ import Button from '../Button';
   <Button>Button</Button>
   <Button>Button</Button>
   <Button>Button</Button>
-</Stack>;
+</Stack>
 ```

src/components/primitives/Grid/Grid.md renamed to src/components/primitives/Grid.md

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { color, typography, space, layout, variant } from 'styled-system';
 import { css } from '@styled-system/css';
-import theme from '../../../theme';
+import theme from '../../theme';
 
 /**
  * A component to render all text in the app.

src/components/primitives/Grid/index.js

@@ -1,5 +1,5 @@
 Default button:
 
-```jsx harmony
+```jsx
 <Button>Push me</Button>
 ```

src/components/primitives/Input/Input.js renamed to src/components/primitives/Input.js

@@ -1,5 +1,5 @@
 Default button:
 
-```jsx harmony
+```jsx
 <Button>Push me</Button>
 ```

src/components/primitives/Input/Input.md renamed to src/components/primitives/Input.md

@@ -32,7 +32,7 @@ As you can see, there is a lot of repetition going on. Also this method doesn’
 
 The result should allow rendering such text:
 
-```jsx harmony
+```jsx
 import { Text } from '../../components';
 
 <Text color="error" fontWeight="bold">

src/components/primitives/Input/index.js

@@ -1,4 +1,4 @@
-```jsx harmony
+```jsx
 <Text>
   Lithe and leggy, Salukis are the supermodels of the canine world.
   Their looks are legendary: this ancient breed can be traced back to

src/components/primitives/Link/Link.js renamed to src/components/primitives/Link.js

@@ -1,4 +1,4 @@
-```jsx harmony
+```jsx
 <Box p={2} m={3} width={1 / 4} bg="primary">
   Box content
 </Box>

src/components/primitives/Link/Link.md renamed to src/components/primitives/Link.md

@@ -1,4 +1,4 @@
-```jsx harmony
+```jsx
 import Box from './Box';
 
 <Flex flexDirection="column">

src/components/primitives/Link/index.js

@@ -1,4 +1,4 @@
-```jsx harmony
+```jsx
 import Box from './Box';
 <Grid
   gridGap={2}

src/components/primitives/Stack/Stack.js renamed to src/components/primitives/Stack.js

@@ -1,4 +1,4 @@
-```jsx harmony
+```jsx
 import Box from './Box';
 <Stack gridGap={2} numColumns={[1, 2, 3]}>
   <Box p={4} bg="grey.2">

src/components/primitives/Stack/Stack.md renamed to src/components/primitives/Stack.md

@@ -1,3 +1,3 @@
-```jsx harmony
+```jsx
 <Footer />
 ```

src/components/primitives/Stack/index.js

@@ -1,3 +1,3 @@
-```jsx harmony
+```jsx
 <LoginPage />
 ```

src/components/primitives/Text/Text.js renamed to src/components/primitives/Text.js

@@ -24,6 +24,7 @@ const config = {
 	exampleMode: 'expand',
 	usageMode: 'expand',
 	webpackConfig,
+	require: [path.join(__dirname, 'styleguide.setup.js')],
 	updateExample(props, exampleFilePath) {
 		const { settings, lang } = props;
 		if (typeof settings.file === 'string') {

src/components/primitives/Text/Text.md renamed to src/components/primitives/Text.md

@@ -0,0 +1,7 @@
+import * as components from './src/components';
+
+// Expose all components to the global scope for styleguide examples
+// so it behaves more like Playroom without the need to import components
+Object.entries(components).forEach(([key, value]) => {
+	global[key] = value;
+});