feat(material): create arc material theme package (#340)

Author: dominicegginton

GETTING_STARTED.md

@@ -136,6 +136,28 @@ export const App = () => {
 };
 ```
 
+#### React with (ARC & Material UI Components)
+
+```
+npm install @arc-web/components@latest @arc-web/react@latest @arc-wb/material@latest
+```
+
+```tsx
+import { ThemeProvier } from '@arc-web/material';
+import { ArcContainer } from '@arc-web/react';
+import { Button } from '@arc-web/material';
+
+export const App = () => {
+  return (
+    <ThemeProvier>
+      <ArcContainer>
+        <Button>Click Me</Button>
+      </ArcContainer>
+    </ThemeProvier>
+  );
+};
+```
+
 ### Customization
 
 **ARC** components can be customized at a high level through design tokens. This gives you control over theme colours and general styling. For more advanced customizations, web-components can expose something called CSS `parts`. To ensure that each application looks and feels the same, these `parts` are not being exposed from the **ARC** components.

flake.nix

@@ -19,8 +19,9 @@
             overlays = [
               (final: prev: {
                 lib = prev.lib // import ./lib.nix { pkgs = final; writers = final.writers; };
-                react = final.callPackage ./packages/react { };
                 components = final.callPackage ./packages/components { };
+                react = final.callPackage ./packages/react { };
+                material = final.callPackage ./packages/material { };
                 documentation = final.callPackage ./documentation { };
                 storybook = final.callPackage ./packages/components/.storybook { };
               })
@@ -31,7 +32,7 @@
         rec {
           checks = packages;
           formatter = pkgs.nixpkgs-fmt;
-          packages = { inherit (pkgs) components documentation react storybook; };
+          packages = { inherit (pkgs) components react material documentation storybook; };
           devShells.default = pkgs.callPackage ./shell.nix { };
         }
       )

lib.nix

@@ -33,7 +33,7 @@ in
         # this workspace is a monorepo and all dependencies
         # are resolved via the workspace root package.json
         src = cleanSource ./.;
-        npmDepsHash = "sha256-F1yz18glDERcufe6VqgYYdM43GAf5A8QHX/Hg1NeIm8=";
+        npmDepsHash = "sha256-S7IetVc9X1enM5SclL7USMsgGJ+LQ9CXQNb5h8DmSbM=";
 
         # dont run the build scripts when rebuilding
         # npm dependencies as node-keytar will fail
@@ -90,9 +90,6 @@ in
       mv nix_outdated.csv ./reports/react-nix_outdated.csv
 
       zip -r reports.zip ./reports
-
-
-
     '';
   };
 }