⚡ enhance style getters

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged
+yarn prep-package expo

.storybook/preview.js

@@ -1,3 +1,5 @@
+import './styles/index.scss';
+
 import { GRID_CONTAINER } from './utils/grid';
 
 export const parameters = {

.storybook/styles/storybook-addon-grid.scss

@@ -1,7 +1,32 @@
 // storybook-addon-grid configurations
 :root {
-  --sb-grid-columns: 12; // grid columns count
-  --sb-grid-gap: 1.5rem; // grid gutter between columns
-  --sb-grid-gutter: 1.25rem; // grid padding-horizontal
-  --sb-grid-max-width: 100%;
+  --sb-grid-columns: 12; // grid columns count - get from src/utils/grid
+  --sb-grid-gap: 1.5rem; // grid gutter between columns - get from src/utils/grid
+  --sb-grid-gutter: 16px; // grid padding-horizontal - get from src/utils/grid
+  --sb-grid-max-width: 100%; // container max width -  - get from src/utils/grid
+}
+
+@media only screen and (min-width: 375px) {
+  :root {
+  --sb-grid-gutter: 1.25rem;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  :root {
+  --sb-grid-gutter: 2.5rem;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  :root {
+  --sb-grid-gutter: 3rem;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  :root {
+  --sb-grid-gutter: 3rem;
+  --sb-grid-max-width: 1140px;
+  }
 }

.storybook/utils/grid.js

@@ -17,7 +17,7 @@ export const GRID_CONTAINER_FLUID = {
   ...GRID_BASE,
   maxWidth: '100%', // max-width
 };
-export const GRID_CONTAINER_NO_PADDING = {
+export const GRID_CONTAINER_GX_0 = {
   ...GRID_BASE,
-  gutter: '0', // padding horizontal
+  gutter: 0, // padding horizontal
 };

scripts/prep-story-readme.js

@@ -13,8 +13,6 @@ const main = () => {
   /** Modified Story file text */
   const storyFileText = `<Meta title="README" />
 
-//This file is auto generated from README.md -- any manual changes will be discarded
-
 ${readmeFile
   // for subpaths
   .replaceAll(`${packageJson.homepage}/`, '/')
@@ -23,7 +21,7 @@ ${readmeFile
 
   /** Write story file */
   fs.writeFileSync(
-    path.join(__dirname, '../src/README.stories.mdx'),
+    path.join(__dirname, '../src/README.generated.stories.mdx'),
     storyFileText,
     'utf8',
   );

src/README.stories.mdx → src/README.generated.stories.mdx

@@ -1,7 +1,5 @@
 <Meta title="README" />
 
-//This file is auto generated from README.md -- any manual changes will be discarded
-
 # react-native-flex-grid
 
 A react-native flexbox grid similar to [bootstap](https://getbootstrap.com)'s web grid.
@@ -136,6 +134,7 @@ Checkout the [detailed docs](/?path=/story/development--page) to understand how
 
 ### Helpful resources
 
+- [Blogpost](https://www.notion.so/ahmedtokyo/React-Native-Flex-Grid-6932aa014d274ae7940595664873b7dd)
 - [Bootstrap layout documentation](https://getbootstrap.com/docs/5.0/layout)
 - [Reactstrap layout documentation](https://reactstrap.github.io/?path=/docs/components-layout--layout)
 

src/components/Layout/Col/Col.tsx

@@ -7,6 +7,9 @@ import {
   GRID_BREAKPOINTS_KEYS_LIST_DESC,
 } from '../../../utils/responsive';
 
+/** Default gutter x size */
+const DEFAULT_GX = 4;
+
 export declare interface ColProps extends ViewProps {
   /** xs size */
   xs?: number | string;
@@ -51,15 +54,21 @@ const _toPercent = (num: number): string => `${num * 100}%`;
  * Gets column style
  */
 export const getColStyle = (props): Object => {
+  const { gx = DEFAULT_GX } = props;
+
   const gridBreakpoint = getGridBreakpoint();
+  const config = getConfig();
 
   /** style object */
   let style: {
     width?: string | number;
     marginLeft?: string | number;
     flex?: string | number;
     order?: number;
-  } = {};
+    paddingHorizontal?: number;
+  } = {
+    paddingHorizontal: gx ? config.gutters[gx] / 2 : undefined,
+  };
 
   // handle size
   for (
@@ -81,7 +90,7 @@ export const getColStyle = (props): Object => {
     ) {
       style = {
         ...style,
-        width: _toPercent(Number(props[element]) / getConfig().colCount),
+        width: _toPercent(Number(props[element]) / config.colCount),
       };
       break;
     }
@@ -108,7 +117,7 @@ export const getColStyle = (props): Object => {
     ) {
       style = {
         ...style,
-        marginLeft: _toPercent(Number(props[element]) / getConfig().colCount),
+        marginLeft: _toPercent(Number(props[element]) / config.colCount),
       };
       break;
     }
@@ -138,21 +147,8 @@ export const getColStyle = (props): Object => {
 
 /** Column [Bootstrap Docs](https://getbootstrap.com/docs/5.0/layout/columns) */
 const Col = (props: ColProps) => {
-  const { style, Element = View, gx = 4, ...rest } = props;
-  return (
-    <Element
-      style={[
-        gx
-          ? {
-              paddingHorizontal: getConfig().gutters[gx] / 2,
-            }
-          : undefined,
-        getColStyle(props),
-        style,
-      ]}
-      {...rest}
-    />
-  );
+  const { style, Element = View, ...rest } = props;
+  return <Element style={[getColStyle(props), style]} {...rest} />;
 };
 
 export default Col;

src/components/Layout/Row/Row.tsx

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    width: '100%',
+    flex: 1,
   },
 });