fix(ag-grid-styles): export default and named export from package

.changeset/famous-feet-shout.md

@@ -0,0 +1,15 @@
+---
+'@equinor/fusion-react-ag-grid-styles': patch
+'@equinor/fusion-react-components-stories': patch
+---
+
+### Package `@equinor/fusion-react-ag-grid-styles`
+
+Changed export statement
+
+- `export { useStyles, useStyles as default } from './agGridStyles';`
+- Renamed `useAgGridStyles.ts` to `index.ts` in `ag-grid-styles` package.
+
+### Storybook
+
+Updated import paths and usage of `useAgGridStyles` to `useStyles` in `storybook` stories.

packages/ag-grid-styles/README.md

@@ -21,10 +21,10 @@ You do not need any other styles from the ag-grid package or other fusion packag
 
 ```tsx
 import AgGridReact from '@ag-grid-community/core';
-import useStyles from '@equinor/fusion-react-ag-grid-styles';
+import { useStyles } from '@equinor/fusion-react-ag-grid-styles';
 
 const MyComponent = (): JSX.Element => {
-  const styles = useStyles();
+  useStyles();
 
   return (
     <div className="ag-theme-alpine-fusion">

packages/ag-grid-styles/src/index.ts

@@ -1 +1 @@
-export { useStyles as default } from './agGridStyles/useAgGridStyles';
+export { useStyles, useStyles as default } from './agGridStyles';

storybook/src/stories/ag-grid/ag-grid-styles.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/react';
+
+import { AgGridReact } from '@ag-grid-community/react';
+
+import { useStyles } from '@equinor/fusion-react-ag-grid-styles';
+
+import { ModuleRegistry } from '@ag-grid-community/core';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { faker } from '@faker-js/faker';
+import { useRef } from 'react';
+
+ModuleRegistry.registerModules([ClientSideRowModelModule]);
+
+const meta: Meta<typeof useStyles> = {
+  title: 'ag-grid/styles',
+};
+
+export default meta;
+
+faker.seed(0);
+
+export const AlpineFusionTheme = () => {
+  useStyles();
+  const rowdData = Array.from({ length: 5 }, () => ({
+    name: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    date: faker.date.past(),
+    order: String(faker.number.int()),
+  }));
+
+  const columnDefs = [
+    { field: 'name', editable: true },
+    { field: 'lastName', editable: true },
+    { field: 'date' },
+    { field: 'order', editable: true },
+  ];
+  const gridRef = useRef<AgGridReact | null>(null);
+
+  return (
+    <>
+      <div className="ag-theme-alpine-fusion" style={{ width: '1080px', height: '500px' }}>
+        <AgGridReact ref={gridRef} rowData={rowdData} columnDefs={columnDefs}></AgGridReact>
+      </div>
+    </>
+  );
+};

storybook/src/stories/ag-grid/ag-grid-utils.stories.tsx

@@ -9,7 +9,7 @@ import {
 
 import { AgGridReact } from '@ag-grid-community/react';
 
-import useAgGridStyles from '@equinor/fusion-react-ag-grid-styles';
+import { useStyles } from '@equinor/fusion-react-ag-grid-styles';
 
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
@@ -28,7 +28,7 @@ export default meta;
 faker.seed(0);
 
 export const ChangeHandler = () => {
-  const styles = useAgGridStyles();
+  useStyles();
   const rowdData = Array.from({ length: 10 }, () =>
     addInitialProps({
       name: faker.person.firstName(),
@@ -38,8 +38,6 @@ export const ChangeHandler = () => {
     }),
   );
 
-  console.log(rowdData);
-
   const columnDefs = [
     { ...createStatusField() },
     { field: 'name', editable: true },
@@ -56,18 +54,16 @@ export const ChangeHandler = () => {
       >
         Add row
       </button>
-      <div className={styles.root}>
-        <div className="ag-theme-alpine-fusion" style={{ width: '1080px', height: '500px' }}>
-          <AgGridReact
-            ref={gridRef}
-            rowData={rowdData}
-            columnDefs={columnDefs}
-            defaultColDef={{
-              valueSetter: defaultValueSetter,
-              valueGetter: defaultValueGetter,
-            }}
-          ></AgGridReact>
-        </div>
+      <div className="ag-theme-alpine-fusion" style={{ width: '1080px', height: '500px' }}>
+        <AgGridReact
+          ref={gridRef}
+          rowData={rowdData}
+          columnDefs={columnDefs}
+          defaultColDef={{
+            valueSetter: defaultValueSetter,
+            valueGetter: defaultValueGetter,
+          }}
+        ></AgGridReact>
       </div>
     </>
   );