Update docs

Author: mobily

docs/docs/changelog.md

@@ -2,6 +2,9 @@
 id: changelog
 title: Changelog
 ---
+### `v1.1.7`
+
+- added the `height` prop to `Column`
 
 ### `v1.1.6`
 
@@ -32,10 +35,10 @@ title: Changelog
 
 - `useBreakpoint` → `useCurrentBreakpoint`
 - `FillObject` → `FillView`
-- added `padding*` and `margin*` props to all components (only `Column` doesn't accept `margin*` props)
-- added `horizontal` prop to `Stack`
+- added `padding*` and `margin*` props to all components (`Column` doesn't accept `margin*` props)
+- added the `horizontal` prop to `Stack`
 - `useSpacing` doesn't return a function anymore
-- added `useSpacingHelpers` hook
+- added `useSpacingHelpers`
 - added `useResponsiveProp`
 - added `useWindowDimensions`
 - added `useDebugStyle`
@@ -45,47 +48,45 @@ title: Changelog
 
 ### `v0.9.2`
 
-- 🐛 fixed `Hidden` component implementation [668b22e](https://github.com/mobily/stacks/commit/668b22e91182179a44b20c3f228f4db39bb98b05)
+- 🐛 fixed the `Hidden` component implementation
 
 ### `v0.9.1`
 
-- 🏷️ fixed `Box` types [2b3aa6a](https://github.com/mobily/stacks/commit/2b3aa6a5c6d53e62bdb71915f811330399e054c6)
+- 🏷️ fixed `Box` types
 
 ### `v0.9.0`
 
-- 🔥 removed `align` prop (`Column`, use `Box` for inner alignments) [84d20f7](https://github.com/mobily/stacks/commit/84d20f7b92710ddd5e28d52b68a43b90827d0c8d)
-- 🐛 fixed `collapseBelow` implementation (`Columns`) [84d20f7](https://github.com/mobily/stacks/commit/84d20f7b92710ddd5e28d52b68a43b90827d0c8d)
-- ✨ added `alignSelf` prop (`Box`) [a56a889](https://github.com/mobily/stacks/commit/a56a889e5429d4cef0cd097e968f72d62d473cb5)
-- ✨ `flex` is a responsive prop now (`Box`) [a56a889](https://github.com/mobily/stacks/commit/a56a889e5429d4cef0cd097e968f72d62d473cb5)
+- 🔥 removed the `align` prop in `Column` (use `Box` for inner alignments)
+- 🐛 fixed the `collapseBelow` implementation (`Columns`)
+- ✨ added the `alignSelf` prop to `Box`
+- ✨ `flex` is a responsive prop now in `Box`
 
 ### `v0.8.2`
 
-- 🐛 fixed [#6](https://github.com/mobily/stacks/issues/6) [24f4a9d](https://github.com/mobily/stacks/commit/24f4a9d9512347175bc015bcd40cc77d2e6d8008)
+- 🐛 fixed [#6](https://github.com/mobily/stacks/issues/6)
 
 ### `v0.8.1`
 
-- 🏷️ updated `Hidden` type signature [9b33f30](https://github.com/mobily/stacks/commit/9b33f302d5e3e04d0ae2b479f0a3bb8f9d2b9dd5)
+- 🏷️ fixed `Hidden` types
 
 ### `v0.8.0`
 
-- ✨ added `Hidden` component [d9a86c1](https://github.com/mobily/stacks/commit/d9a86c110c2854f5f11d58d7f20a5e5ae1a819c9)
-- ✨ added breakpoints initial support
-- 💥 `Provider` → `StacksProvider` [a2d8e07](https://github.com/mobily/stacks/commit/a2d8e075b73169b89fe4b46810f02e7cc14b1d44)
-- 📝 update docs
+- ✨ added the `Hidden` component
+- ✨ added initial support for breakpoints
+- 💥 `Provider` → `StacksProvider`
 
 ### `v0.7.1`
 
-- 🐛 added missing `flexShrink` style property (`Column`) [214d20e](https://github.com/mobily/stacks/commit/214d20e2fd827714bafbebc886218c6a568246b9)
-
+- 🐛 added missing `flexShrink` style property (`Column`)
 ### `v0.7.0`
 
-- ✨ `Stacks` components accept `View` props [0103882](https://github.com/mobily/stacks/commit/010388266d07f21d5d5873754f7263633ff10112)
+- ✨ `Stacks` components accept all `View` props
 
 ### `v0.6.2`
 
-- 🔧 added `flexBasis: 'auto'` (primarily for `react-native-web` compatibility) [2d454ad](https://github.com/mobily/stacks/commit/2d454addabe3bfdbd701e84d86db89d4bf052b1c)
+- 🔧 added `flexBasis: 'auto'` for `react-native-web` compatibility
 - 📝 update docs
 
 ### `v0.6.1`
 
-- 🔧 use `stretch` as a default value of `alignX/Y` property (Stack, Columns, Box) [f38ddc7](https://github.com/mobily/stacks/commit/f38ddc74b25fff0c8217a475b7dbf6bcb779692c) [4e3822c](https://github.com/mobily/stacks/commit/4e3822c1f5aca3277a3d31860e2ca3f1a0b35a7b) [10b1dea](https://github.com/mobily/stacks/commit/10b1dea042d4dd4380e5a9459096eea7134f1e1e)
+- 🔧 use `stretch` as a default value of the `alignX/Y` prop

docs/docs/components/column.mdx

@@ -35,6 +35,29 @@ function() {
 }
 ```
 
+Use the `height` property to adjust the column height against other columns.
+
+```jsx live
+function() {
+  return (
+    <App>
+      <Columns space={4}>
+        <Column width="content" height="fluid">
+          <Placeholder width={200} height={100} />
+          <Box flex="fluid" marginTop={4}>
+            <FluidPlaceholder width={200} />
+          </Box>
+        </Column>
+        <Column>
+          <Placeholder height={300} />
+        </Column>
+      </Columns>
+    </App>
+  )
+}
+
+```
+
 ## Props
 
 <Props
@@ -45,6 +68,12 @@ function() {
       required: false,
       defaultValue: 'fluid'
     },
+    {
+      name: 'height',
+      type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
+      required: false,
+      defaultValue: 'content'
+    },
   ]}
 />
 

docs/docs/react-native-web.md

@@ -7,6 +7,57 @@ Since `Stacks` components use `window` dimensions, SSR support is limited. If yo
 
 Don't forget to add `react-native-web` to your Babel config. Also, add `{ commonjs: true }` to the RNW Babel plugin config, if either RNW styles cause a bug, or SSR support is enabled.
 
+## Expo
+
+Install `@expo/webpack-config` and `babel-plugin-react-native-web`:
+
+```bash
+yarn add @expo/webpack-config babel-plugin-react-native-web --dev
+```
+
+Add `webpack.config.js`:
+
+```js
+const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+
+module.exports = async (env, argv) => {
+  const config = await createExpoWebpackConfigAsync(env, argv)
+
+  config.module.rules.push({
+    test: /\.m?[t|j]sx?$/,
+    exclude: {
+      and: [
+        /node_modules/,
+        {
+          not: [/@mobily\/stacks/],
+        },
+      ],
+    },
+    use: {
+      loader: 'babel-loader',
+      /* other options */
+    },
+  })
+
+  return config
+}
+```
+
+Update `babel.config.js`:
+
+```js
+module.exports = api => {
+  api.cache(true)
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      ['react-native-web', /* { commonjs: true } */],
+    ],
+  }
+}
+```
+
 ## Expo (Next.js adapter)
 
 Install `next-compose-plugins`, `next-transpile-modules` and `babel-plugin-react-native-web`:

docs/src/theme/ReactLiveScope/index.js

@@ -22,6 +22,12 @@ const PlaceholderView = props => {
   return <View style={[{ width, height }, style]}>{children}</View>
 }
 
+const FluidPlaceholder = props => {
+  const { width, style, children } = props
+
+  return <View style={[styles.root, { width, flex: 1 }, style]}>{children}</View>
+}
+
 const App = props => {
   const { children } = props
 
@@ -37,6 +43,7 @@ const ReactLiveScope = {
   PlaceholderView,
   Text,
   App,
+  FluidPlaceholder,
 }
 
 export default ReactLiveScope