[UI]: cleaned UI package, need to-rethink the approach. (#201)

Author: leebeydoun

.changeset/curly-ears-notice.md

@@ -0,0 +1,5 @@
+---
+"@resembli/ui": patch
+---
+
+Cleaned UI package, needed some re-thinking on the approach to take.

packages/ui/package.json

@@ -41,8 +41,6 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@resembli/hooks": "workspace:^0.0.1",
-    "@resembli/variants-types": "workspace:^0.0.0",
-    "@stitches/core": "^1.2.7"
+    "@resembli/hooks": "workspace:^0.0.1"
   }
 }

packages/ui/src/components/Box.tsx

@@ -1,21 +1 @@
-import type { CssComponent } from "@stitches/core/types/styled-component"
-
-export { Collapse } from "./components/Collapse.js"
-export type { CollapseProps } from "./components/Collapse.js"
-
-export { TreeRoot } from "./components/Tree/TreeRoot.js"
-export type { TreeRootProps } from "./components/Tree/TreeRoot.js"
-
-export { TreeNode } from "./components/Tree/TreeNode.js"
-export type { TreeNodeProps } from "./components/Tree/TreeNode.js"
-
-export { Box } from "./components/Box.js"
-export type { BoxProps } from "./components/Box.js"
-
-// Styling and theming exports
-export { VariantProvider } from "./providers/VariantProvider.js"
-export * from "@stitches/core"
-export type ExtractVariant<T> = T extends CssComponent<unknown, infer K> ? K : never
-export type MakeComponentVariants<T extends { Box: unknown }> = {
-  [k in keyof T]: ExtractVariant<T[k]>
-}
+export {}

packages/ui/src/index.ts

@@ -10,7 +10,7 @@
   "dependencies": {
     "@resembli/hooks": "workspace:^0.0.1",
     "@resembli/ui": "workspace:^0.0.3",
-    "@resembli/variants-types": "workspace:^0.0.0",
+    "@stitches/react": "^1.2.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

packages/ui/src/providers/VariantProvider.tsx

@@ -1,14 +1,30 @@
-import { Box } from "@resembli/ui"
+import { css, styled } from "@stitches/react"
+
+import { Grid } from "@resembli/ui"
 import { VariantProvider } from "@resembli/ui/src/providers/VariantProvider"
 
 import { ComponentVariants } from "./theme"
 
+const B = css({
+  variants: {
+    outlined: {
+      true: { border: "1px solid black" },
+    },
+  },
+})
+
+const Button = styled("button", B, {})
+
 function App() {
   return (
     <VariantProvider value={ComponentVariants}>
-      <div className="App">
-        <Box pSpace="dense" align="center" justify="center" />
-      </div>
+      <Grid layout="shell">
+        <Button />
+        <div style={{ gridArea: "nav" }}>Nav</div>
+        <div>Sidebar</div>
+        <div>App</div>
+        <div>Control</div>
+      </Grid>
     </VariantProvider>
   )
 }

packages/variants/index.d.ts

@@ -1,4 +1,4 @@
-import { css, keyframes } from "@stitches/core"
+import { css, keyframes } from "@stitches/react"
 import * as React from "react"
 
 const openAnimation = keyframes({