fix: "nivo of undefined" error with Bar component on SSR (#42)

* fix: "nivo of undefined" error with Bar component on SSR
* apply the same fix to the line & pie components

closes #41

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matte-ui",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "Matte is a UI component library on top of MUI and other react libraries.",
   "author": "Squaredev",
   "license": "Apache-2.0",

src/components/dataviz/bar/bar.component.tsx

@@ -13,14 +13,16 @@ import { MatteTheme } from '../../utilities/createMatteTheme.component';
  */
 // @ts-ignore
 export const Bar: FC<BarSvgProps> = (props) => {
-  const { nivo }: MatteTheme = useTheme();
+  const theme: MatteTheme | null = useTheme();
+  const nivo = theme?.nivo;
+
   return (
     <ResponsiveBar
-      colors={nivo?.colorShemes?.mono}
+      colors={typeof nivo !== 'undefined' ? nivo?.colorShemes?.mono : null}
       borderRadius={2}
       innerPadding={3}
       padding={0.5}
-      theme={nivo}
+      theme={typeof nivo !== 'undefined' ? nivo : null}
       margin={{ top: 30, right: 20, bottom: 75, left: 50 }}
       enableLabel={false}
       legends={[

src/components/dataviz/line/line.component.tsx

@@ -12,11 +12,13 @@ import { MatteTheme } from '../../utilities/createMatteTheme.component';
  * - Vary a line’s texture to represent different data types
  */
 export const Line: FC<LineSvgProps> = (props) => {
-  const { nivo }: MatteTheme = useTheme();
+  const theme: MatteTheme | null = useTheme();
+  const nivo = theme?.nivo;
+
   return (
     <ResponsiveLine
-      colors={nivo?.colorShemes?.mono}
-      theme={nivo}
+      colors={typeof nivo !== 'undefined' ? nivo?.colorShemes?.mono : undefined}
+      theme={typeof nivo !== 'undefined' ? nivo : undefined}
       margin={{ top: 30, right: 20, bottom: 50, left: 50 }}
       axisLeft={{
         tickValues: 5,

src/components/dataviz/pie/pie.component.tsx

@@ -9,11 +9,13 @@ import { MatteTheme } from '../../utilities/createMatteTheme.component';
  */
 // @ts-ignore
 export const Pie: FC<PieSvgProps> = (props) => {
-  const { nivo }: MatteTheme = useTheme();
+  const theme: MatteTheme | null = useTheme();
+  const nivo = theme?.nivo;
+
   return (
     <ResponsivePie
-      colors={nivo?.colorShemes?.mono}
-      theme={nivo}
+      colors={typeof nivo !== 'undefined' ? nivo?.colorShemes?.mono : null}
+      theme={typeof nivo !== 'undefined' ? nivo : null}
       padAngle={1}
       innerRadius={0.5}
       cornerRadius={2}