Loosen Chromatic settings and move them project level

Author: lkostrowski

.storybook/preview.tsx

@@ -44,6 +44,16 @@ const preview: Preview = {
     ),
   ],
   parameters: {
+    chromatic: {
+      /**
+       * Tweaking values, mostly to get rid of false negatives from Datagrid (canvas)
+       * We can try to tweak this value, also on a component level
+       *
+       * https://www.chromatic.com/docs/threshold/
+       */
+      diffThreshold: 0.8,
+      delay: 500,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.stories.tsx

@@ -7,9 +7,7 @@ import { AttributeListDatagrid } from "./AttributeListDatagrid";
 const meta: Meta<typeof AttributeListDatagrid> = {
   title: "Attributes/AttributeListDatagrid",
   component: AttributeListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     attributes,
     disabled: false,

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.stories.tsx

@@ -7,9 +7,7 @@ import { CategoryListDatagrid } from "./CategoryListDatagrid";
 const meta: Meta<typeof CategoryListDatagrid> = {
   title: "Categories/CategoryListDatagrid",
   component: CategoryListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     categories,
     disabled: false,

src/categories/components/CategoryProductListDatagrid/CategoryProductListDatagrid.stories.tsx

@@ -23,9 +23,7 @@ const mockProducts: RelayToFlat<NonNullable<CategoryDetailsQuery["category"]>["p
 const meta: Meta<typeof CategoryProductListDatagrid> = {
   title: "Categories/CategoryProductListDatagrid",
   component: CategoryProductListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     products: mockProducts,
     disabled: false,

src/collections/components/CollectionListDatagrid/CollectionListDatagrid.stories.tsx

@@ -7,9 +7,7 @@ import { CollectionListDatagrid } from "./CollectionListDatagrid";
 const meta: Meta<typeof CollectionListDatagrid> = {
   title: "Collections/CollectionListDatagrid",
   component: CollectionListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     collections,
     loading: false,

src/components/Datagrid/Datagrid.stories.tsx

@@ -152,9 +152,7 @@ const meta: Meta<typeof Datagrid> = {
     onColumnResize: { table: { disable: true } },
     onRowSelectionChange: { table: { disable: true } },
   },
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     availableColumns: columns,
     rows: initialData.length,

src/customers/components/CustomerListDatagrid/CustomerListDatagrid.stories.tsx

@@ -7,9 +7,7 @@ import { CustomerListDatagrid } from "./CustomerListDatagrid";
 const meta: Meta<typeof CustomerListDatagrid> = {
   title: "Customers/CustomerListDatagrid",
   component: CustomerListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     customers: customerList,
     loading: false,

src/discounts/components/DiscountListDatagrid/DiscountListDatagrid.stories.tsx

@@ -7,9 +7,7 @@ import { DiscountListDatagrid } from "./DiscountListDatagrid";
 const meta: Meta<typeof DiscountListDatagrid> = {
   title: "Discounts/DiscountListDatagrid",
   component: DiscountListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     promotions: discountList,
     disabled: false,

src/discounts/components/VoucherCodesDatagrid/VoucherCodesDatagrid.stories.tsx

@@ -14,9 +14,7 @@ const mockCodes: VoucherCode[] = [
 const meta: Meta<typeof VoucherCodesDatagrid> = {
   title: "Discounts/VoucherCodesDatagrid",
   component: VoucherCodesDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     codes: mockCodes,
     loading: false,

src/discounts/components/VoucherListDatagrid/VoucherListDatagrid.stories.tsx

@@ -7,9 +7,7 @@ import { VoucherListDatagrid } from "./VoucherListDatagrid";
 const meta: Meta<typeof VoucherListDatagrid> = {
   title: "Discounts/VoucherListDatagrid",
   component: VoucherListDatagrid,
-  parameters: {
-    chromatic: { diffThreshold: 0.3, delay: 500 },
-  },
+
   args: {
     vouchers: voucherList,
     disabled: false,