From d6627f59e7b8f8f81748bfc40554eec26f29ae12 Mon Sep 17 00:00:00 2001
From: Mario Souto <13791385+omariosouto@users.noreply.github.com>
Date: Sun, 23 Jan 2022 02:11:29 -0300
Subject: [PATCH] feat: implement GridDisplay (#66)

* adding a beta of the feature, only to keep in sync what is under development until now
---
 .../lib/screens/home/home_screen.tsx          |  2 +-
 lib/components.dart                           |  2 +-
 lib/components.ts                             |  1 +
 lib/components/box/box-base.tsx               |  2 +-
 .../griddisplay.dart}                         |  4 +-
 .../griddisplay/griddisplay.stories.mdx       | 33 ++++++++++
 lib/components/griddisplay/griddisplay.tsx    | 61 +++++++++++++++++++
 lib/core/stylesheet/stylesheet.ts             |  2 +-
 8 files changed, 101 insertions(+), 6 deletions(-)
 rename lib/components/{flatlist/flatlist.dart => griddisplay/griddisplay.dart} (95%)
 create mode 100644 lib/components/griddisplay/griddisplay.stories.mdx
 create mode 100644 lib/components/griddisplay/griddisplay.tsx

diff --git a/examples/demo_base/lib/screens/home/home_screen.tsx b/examples/demo_base/lib/screens/home/home_screen.tsx
index fdab500..ddaf9fc 100644
--- a/examples/demo_base/lib/screens/home/home_screen.tsx
+++ b/examples/demo_base/lib/screens/home/home_screen.tsx
@@ -70,4 +70,4 @@ export function HomeScreen() {
       <GlobalStyle />
     </Box >
   );
-}
+}
\ No newline at end of file
diff --git a/lib/components.dart b/lib/components.dart
index bf036c3..1a05316 100644
--- a/lib/components.dart
+++ b/lib/components.dart
@@ -6,6 +6,6 @@ export 'package:provider/provider.dart';
 export 'components/provider/provider.dart';
 export 'components/box/box.dart';
 export 'components/text/text.dart';
-export 'components/flatlist/flatlist.dart';
+export 'components/griddisplay/griddisplay.dart';
 export 'core/breakpoints/breakpoints.dart';
 export 'core/stylesheet/stylesheet.dart';
diff --git a/lib/components.ts b/lib/components.ts
index 411633b..ca8606e 100644
--- a/lib/components.ts
+++ b/lib/components.ts
@@ -1,6 +1,7 @@
 export { Box } from '@lib/components/box/box';
 export { Provider, useTheme } from '@lib/components/provider/provider';
 export { Text } from '@lib/components/text/text';
+export { GridDisplay } from '@lib/components/griddisplay/griddisplay';
 export { TextField } from '@lib/components/textfield/textfield';
 export { Icon } from '@lib/components/icon/icon';
 export { Button } from '@lib/components/button/button';
diff --git a/lib/components/box/box-base.tsx b/lib/components/box/box-base.tsx
index 40ce655..2d2a93c 100644
--- a/lib/components/box/box-base.tsx
+++ b/lib/components/box/box-base.tsx
@@ -17,7 +17,7 @@ interface BoxProps {
   placeholder?: string;
   children?: React.ReactNode;
   className?: string;
-  styleSheet?: StyleSheet;
+  styleSheet?: StyleSheet | any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: Ref<any>;
   onMouseDown?: unknown;
diff --git a/lib/components/flatlist/flatlist.dart b/lib/components/griddisplay/griddisplay.dart
similarity index 95%
rename from lib/components/flatlist/flatlist.dart
rename to lib/components/griddisplay/griddisplay.dart
index 2945ac7..0864cf7 100644
--- a/lib/components/flatlist/flatlist.dart
+++ b/lib/components/griddisplay/griddisplay.dart
@@ -1,7 +1,7 @@
 import 'package:skynexui_components/components.dart';
 import 'package:skynexui_components/components/box/flutter/box_base_styles.dart';
 
-class FlatList<DataList> extends StatelessWidget {
+class GridDisplay<DataList> extends StatelessWidget {
   final List<DataList> data;
   final StyleSheet styleSheet;
   final Map<Breakpoints, int> crossAxisCount;
@@ -24,7 +24,7 @@ class FlatList<DataList> extends StatelessWidget {
     return boxStyles;
   }
 
-  const FlatList({
+  const GridDisplay({
     Key? key,
     required this.data,
     required this.itemBuilder,
diff --git a/lib/components/griddisplay/griddisplay.stories.mdx b/lib/components/griddisplay/griddisplay.stories.mdx
new file mode 100644
index 0000000..af7ff87
--- /dev/null
+++ b/lib/components/griddisplay/griddisplay.stories.mdx
@@ -0,0 +1,33 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { GridDisplay } from '@lib/components';
+
+<Meta title="Components/GridDisplay" component={GridDisplay} />
+
+# GridDisplay
+
+GridDisplay is the component that you use, always when you want to print a word or a phrase anywhere in your code.
+
+<!-- > [Wanna test the props? To go Storybook](https://storybook.skynexui.dev/?path=/docs/components-griddisplay--griddisplay-component) -->
+
+<ArgsTable of={GridDisplay} />
+
+<Canvas>
+  <Story
+    name="GridDisplay Component"
+    args={{
+      data: [1, 2, 3, 4, 5],
+      crossAxisCount: {
+        xs: 3,
+      },
+      itemBuilder: (index, item) => {
+        return (
+          <div>
+            Current value: {item}
+          </div>
+        );
+      },
+    }}
+  >
+    {(args) => <GridDisplay {...args} />}
+  </Story>
+</Canvas>
diff --git a/lib/components/griddisplay/griddisplay.tsx b/lib/components/griddisplay/griddisplay.tsx
new file mode 100644
index 0000000..279e1d6
--- /dev/null
+++ b/lib/components/griddisplay/griddisplay.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  StyleSheet,
+  ResponsiveProperty,
+} from '@lib/core/stylesheet/stylesheet';
+import { BoxBase } from '@lib/components/box/box-base';
+
+interface GridDisplayProps<DataListItem> {
+  data: DataListItem[];
+  crossAxisCount?: ResponsiveProperty<number>;
+  tag?: string;
+  className?: string;
+  itemBuilder(index: number, item: DataListItem): React.ReactNode;
+  styleSheet?: StyleSheet;
+}
+export function GridDisplay<DataList>({
+  tag,
+  className,
+  data,
+  itemBuilder,
+  styleSheet,
+  crossAxisCount,
+  ...props
+}: GridDisplayProps<DataList>): JSX.Element {
+  const finalStyleSheet = {
+    ...styleSheet,
+  };
+  return (
+    <BoxBase
+      as={tag}
+      styleSheet={{
+        ...finalStyleSheet,
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: crossAxisCount.xs && `repeat(${crossAxisCount.xs}, 1fr)`,
+          sm: crossAxisCount.sm && `repeat(${crossAxisCount.sm}, 1fr)`,
+          md: crossAxisCount.md && `repeat(${crossAxisCount.md}, 1fr)`,
+          lg: crossAxisCount.lg && `repeat(${crossAxisCount.lg}, 1fr)`,
+          xl: crossAxisCount.xl && `repeat(${crossAxisCount.xl}, 1fr)`,
+        },
+        gridAutoRows: '1fr',
+      }}
+      className={`${className} sknui-griddisplay`}
+      {...props}
+    >
+      {data.map((item, index) => itemBuilder(index, item))}
+      <style jsx>{`
+        ${tag}.sknui-griddisplay {
+          background: red;
+        }
+      `}</style>
+    </BoxBase>
+  );
+}
+
+GridDisplay.defaultProps = {
+  tag: 'div',
+  className: '',
+  styleSheet: {},
+  crossAxisCount: 1,
+};
diff --git a/lib/core/stylesheet/stylesheet.ts b/lib/core/stylesheet/stylesheet.ts
index 4aace9c..f704bc9 100644
--- a/lib/core/stylesheet/stylesheet.ts
+++ b/lib/core/stylesheet/stylesheet.ts
@@ -1,6 +1,6 @@
 import { Breakpoints } from '@lib/core/breakpoints/breakpoints';
 
-type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
+export type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
   // %%[CODER_START]:StyleSheet_attributes%%