STRIPES-893 align LayoutGrid with stripes-components (#37)

`<LayoutGrid>` types were still based on the old `react-flexbox-grid`
implementation instead of the current local implementation.

Refs STRIPES-893

CHANGELOG.md

@@ -2,27 +2,29 @@
 
 ## 2.1.0 in progress
 
+* [STRIPES-893] align stripes-components LayoutGrid to avoid `react-flexbox-grid`
+
 ## [2.0.0](https://github.com/folio-org/stripes-types/tree/v2.0.0) (2023-10-11)
 
 * [FOLIO-3876] React 18
 
 ## [1.0.3](https://github.com/folio-org/stripes-types/tree/v1.0.3) (2023-05-18)
 
-- [STCOM-1152] Add additional `stripes-components` typings
-- [STCOR-714] Add `useOkapiKy` typings from `stripes-core`
+* [STCOM-1152] Add additional `stripes-components` typings
+* [STCOR-714] Add `useOkapiKy` typings from `stripes-core`
 
 ## [1.0.2](https://github.com/folio-org/stripes-types/tree/v1.0.2) (2023-05-02)
 
-- [STCOM-1152] Add some `stripes-components` typings
+* [STCOM-1152] Add some `stripes-components` typings
 
 ## [1.0.1](https://github.com/folio-org/stripes-types/tree/v1.0.1) (2023-04-19)
 
-- Fix `eslint-config-stripes` dependency pre-release version
+* Fix `eslint-config-stripes` dependency pre-release version
 
 ## [1.0.0](https://github.com/folio-org/stripes-types/tree/v1.0.0) (2023-04-19)
 
-- Create initial repository
-- [STCOR-713] Add initial `any` types for `stripes-core` (based on v9.0.8)
-- [STCOM-1043] Add initial `any` types for `stripes-components` (based on v11.0.4)
-- [STSMACOM-746] Add initial `any` types for `stripes-smart-components` (based on v8.0.3)
-- [STRIPESFF-28] Add type declarations for `stripes-final-form` (based on v7.0.0)
+* Create initial repository
+* [STCOR-713] Add initial `any` types for `stripes-core` (based on v9.0.8)
+* [STCOM-1043] Add initial `any` types for `stripes-components` (based on v11.0.4)
+* [STSMACOM-746] Add initial `any` types for `stripes-smart-components` (based on v8.0.3)
+* [STRIPESFF-28] Add type declarations for `stripes-final-form` (based on v7.0.0)

components/lib/LayoutGrid/Col.d.ts

@@ -0,0 +1,28 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+import { ColumnSize } from './ColumnSize';
+import { ViewportSize } from './ViewportSize';
+
+export interface ColProps {
+  xs?: ColumnSize,
+  sm?: ColumnSize,
+  md?: ColumnSize,
+  lg?: ColumnSize,
+  xl?: ColumnSize,
+  xsOffset?: number,
+  smOffset?: number,
+  mdOffset?: number,
+  lgOffset?: number,
+  xlOffset?: number,
+  first?: ViewportSize,
+  last?: ViewportSize,
+  /** Applies a custom class name */
+  className?: string,
+  /** Change the tag name of the component (`div` by default) */
+  tagName?: string,
+  /** The content of the `<Col>` */
+  children?: ReactNode,
+}
+
+declare const Col: FunctionComponent<ColProps>;
+export default Col;

components/lib/LayoutGrid/ColumnSize.d.ts

@@ -0,0 +1 @@
+export type ColumnSize = number | boolean;

components/lib/LayoutGrid/Grid.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+export interface GridProps {
+  /** whether to apply the container-fluid CSS class */
+  fluid?: boolean,
+  /** Applies a custom class name */
+  className?: string,
+  /** Change the tag name of the component (`div` by default) */
+  tagName?: string,
+  /** The content of the `<Grid>` */
+  children?: ReactNode
+}
+
+declare const Grid: FunctionComponent<GridProps>;
+export default Grid;

components/lib/LayoutGrid/Row.d.ts

@@ -0,0 +1,23 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { ViewportSize } from './ViewportSize';
+
+export interface RowProps {
+  reverse?: boolean,
+  start?: ViewportSize,
+  center?: ViewportSize,
+  end?: ViewportSize,
+  top?: ViewportSize,
+  middle?: ViewportSize,
+  bottom?: ViewportSize,
+  around?: ViewportSize,
+  between?: ViewportSize,
+  /** Applies a custom class name */
+  className?: string,
+  /** Change the tag name of the component (`div` by default) */
+  tagName?: string,
+  /** The content of the `<Row>` */
+  children?: ReactNode
+}
+
+declare const Row: FunctionComponent<RowProps>;
+export default Row;

components/lib/LayoutGrid/ViewportSize.d.ts

@@ -0,0 +1 @@
+export type ViewportSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

components/lib/LayoutGrid/index.d.ts

@@ -1,21 +1,3 @@
-/* eslint-disable max-classes-per-file */
-import { Component, ReactNode } from 'react';
-import { GridProps, RowProps, ColProps } from 'react-flexbox-grid';
-
-export class Grid extends Component<
-  GridProps & {
-    children?: ReactNode;
-  }
-> {}
-
-export class Row extends Component<
-  RowProps & {
-    children?: ReactNode;
-  }
-> {}
-
-export class Col extends Component<
-  ColProps & {
-    children?: ReactNode;
-  }
-> {}
+export { default as Col, ColProps } from './Col';
+export { default as Grid, GridProps } from './Grid';
+export { default as Row, RowProps } from './Row';

package.json

@@ -22,7 +22,6 @@
     "ky": "^0.33.3",
     "moment": "^2.29.4",
     "popper.js": "^1.16.1",
-    "react-flexbox-grid": "^2.1.2",
     "type-fest": "^3.9.0"
   },
   "devDependencies": {