Sidebar dark theme

.gitignore

@@ -25,3 +25,6 @@ storybook-static
 *.njsproj
 *.sln
 *.sw?
+
+# Built package
+zesty-io-material-*.tgz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",

src/IconButton/IconButton.stories.tsx

@@ -0,0 +1,14 @@
+import { Story, Meta } from "@storybook/react/types-6-0";
+import { IconButton, Props } from "./";
+
+export default {
+  title: "IconButton",
+  component: IconButton,
+  argType: {},
+} as Meta;
+
+const Template: Story<Props> = (args) => {
+  return <IconButton />;
+};
+
+export const Default = Template.bind({});

src/IconButton/index.tsx

@@ -0,0 +1,24 @@
+import { IconButton as IconButtonBase } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export type Props = {
+  variant?: "standard" | "contained";
+};
+
+export const IconButton = styled(IconButtonBase)<Props>(
+  ({ theme, variant = "standard", color = "inherit" }) => {
+    if (variant === "standard") {
+      return {};
+    }
+    const colorVariant =
+      color === "default" || color === "inherit" ? "primary" : color;
+
+    return {
+      backgroundColor: theme.palette[colorVariant].main,
+      color: theme.palette.common.white,
+      "&:hover": {
+        backgroundColor: theme.palette[colorVariant].dark,
+      },
+    };
+  }
+);

src/icons/Home.tsx

@@ -0,0 +1,10 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+export const Home = (props: SvgIconProps) => (
+  <SvgIcon {...props}>
+    <path
+      d="M5.5 20.625C5.08333 20.625 4.72917 20.4792 4.4375 20.1875C4.14583 19.8958 4 19.5417 4 19.125V9.375C4 9.14167 4.05417 8.91667 4.1625 8.7C4.27083 8.48333 4.41667 8.30833 4.6 8.175L11.1 3.3C11.2333 3.2 11.375 3.125 11.525 3.075C11.675 3.025 11.8333 3 12 3C12.1667 3 12.325 3.025 12.475 3.075C12.625 3.125 12.7667 3.2 12.9 3.3L19.4 8.175C19.5833 8.30833 19.7292 8.48333 19.8375 8.7C19.9458 8.91667 20 9.14167 20 9.375V19.125C20 19.5417 19.8542 19.8958 19.5625 20.1875C19.2708 20.4792 18.9167 20.625 18.5 20.625H14V13.625H10V20.625H5.5Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+);

src/icons/index.ts

@@ -6,4 +6,5 @@ export { Markdown } from "./Markdown";
 export { OneToOne } from "./OneToOne";
 export { EditNote } from "./EditNote";
 export { FileTable } from "./FileTable";
-export { Brain } from "./Brain";
+export { Brain } from "./Brain";
+export { Home } from "./Home";

src/index.ts

@@ -1,16 +1,16 @@
-export { default as legacyTheme } from './LegacyTheme';
-export { default as theme } from './theme';
-export { default as FieldTypeText } from './FieldTypeText';
-export { default as FieldTypeSort } from './FieldTypeSort';
-export { default as FieldTypeUrl } from './FieldTypeUrl';
-export { default as FieldTypeDate } from './FieldTypeDate';
-export { default as FieldTypeDateTime } from './FieldTypeDateTime';
-export { default as FieldTypeColor } from './FieldTypeColor';
-export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeOneToOne} from './FieldTypeOneToOne';
-export { default as FieldTypeOneToMany} from './FieldTypeOneToMany';
-export { default as CopyButton } from './CopyButton';
-export { default as ConfirmDialog } from './ConfirmDialog';
-export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
-
-export * from './icons';
+export { default as legacyTheme } from "./LegacyTheme";
+export { theme, darkTheme } from "./theme";
+export { default as FieldTypeText } from "./FieldTypeText";
+export { default as FieldTypeSort } from "./FieldTypeSort";
+export { default as FieldTypeUrl } from "./FieldTypeUrl";
+export { default as FieldTypeDate } from "./FieldTypeDate";
+export { default as FieldTypeDateTime } from "./FieldTypeDateTime";
+export { default as FieldTypeColor } from "./FieldTypeColor";
+export { default as FieldTypeNumber } from "./FieldTypeNumber";
+export { default as FieldTypeOneToOne } from "./FieldTypeOneToOne";
+export { default as FieldTypeOneToMany } from "./FieldTypeOneToMany";
+export { default as CopyButton } from "./CopyButton";
+export { default as ConfirmDialog } from "./ConfirmDialog";
+export { default as VirtualizedAutocomplete } from "./VitualizedAutocomplete";
+export { IconButton } from "./IconButton";
+export * from "./icons";

src/theme/Theme.stories.tsx

@@ -1,16 +1,19 @@
-import React from 'react';
-import ReactJson from 'react-json-view'
-import { Story, Meta } from '@storybook/react/types-6-0';
-import theme from '.';
+import React from "react";
+import ReactJson from "react-json-view";
+import { Story, Meta } from "@storybook/react/types-6-0";
+import { darkTheme, theme } from ".";
 
 export default {
-  title: 'Theme',
+  title: "Theme",
 } as Meta;
 
-const Template: Story = (args) => {
-  return (
-    <ReactJson src={theme} />
-  );
+const LightTheme: Story = (args) => {
+  return <ReactJson src={theme} />;
 };
 
-export const Default = Template.bind({});
+const DarkTheme: Story = (args) => {
+  return <ReactJson src={darkTheme} />;
+};
+
+export const light = LightTheme.bind({});
+export const dark = DarkTheme.bind({});