feat: implement GridDisplay (#66)

* adding a beta of the feature, only to keep in sync what is under development until now

examples/demo_base/lib/screens/home/home_screen.tsx

@@ -70,4 +70,4 @@ export function HomeScreen() {
       <GlobalStyle />
     </Box >
   );
-}
+}

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';

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';

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;

lib/components/flatlist/flatlist.dart → 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,

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>

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,
+};

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%%