[UI]: initial variant typing and theming capabilities. (#200)

Author: leebeydoun

.changeset/nice-guests-doubt.md

@@ -0,0 +1,6 @@
+---
+"@resembli/ui": patch
+"@resembli/variants-types": patch
+---
+
+Added the concept of a variant provider and variant theming.

packages/ui/package.json

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

packages/ui/src/components/Box.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+
+import type { ComponentVariants } from "@resembli/variants-types"
+
+import { useVariantCss } from "../providers/VariantProvider"
+
+export type BoxProps = ComponentVariants["Box"]
+
+export function Box(props: BoxProps) {
+  const sx = useVariantCss("Box")
+  return <div className={sx && sx({ ...(props as Record<string, unknown>) })}>Lee</div>
+}

packages/ui/src/components/Collapse.tsx

@@ -1,7 +1,6 @@
+import { css, keyframes } from "@stitches/core"
 import * as React from "react"
 
-import { css, keyframes } from "../css/css"
-
 const openAnimation = keyframes({
   "0%": { height: 0 },
   "100%": { height: "var(--internal_height)" },

packages/ui/src/components/Tree/TreeNode.tsx

@@ -1,8 +1,8 @@
+import { css } from "@stitches/core"
 import * as React from "react"
 
 import { useToggle } from "@resembli/hooks"
 
-import { css } from "../../css/css.js"
 import { Collapse } from "../Collapse.js"
 import { useTreeContext } from "./TreeRoot.js"
 

packages/ui/src/components/Tree/TreeRoot.tsx

@@ -1,7 +1,6 @@
+import { css } from "@stitches/core"
 import * as React from "react"
 
-import { css } from "../../css/css.js"
-
 const TreeRootCss = css({
   margin: 0,
   padding: 0,

packages/ui/src/css/css.ts

@@ -1,3 +1,5 @@
+import type { CssComponent } from "@stitches/core/types/styled-component"
+
 export { Collapse } from "./components/Collapse.js"
 export type { CollapseProps } from "./components/Collapse.js"
 
@@ -7,4 +9,13 @@ export type { TreeRootProps } from "./components/Tree/TreeRoot.js"
 export { TreeNode } from "./components/Tree/TreeNode.js"
 export type { TreeNodeProps } from "./components/Tree/TreeNode.js"
 
-export { css, keyframes } from "./css/css"
+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]>
+}

packages/ui/src/index.ts

@@ -0,0 +1,19 @@
+import type { css } from "@stitches/core"
+import * as React from "react"
+
+interface ComponentsType {
+  Box?: unknown
+}
+
+const VariantContext = React.createContext<ComponentsType>({})
+
+export function VariantProvider({
+  value,
+  children,
+}: React.PropsWithChildren<{ value: ComponentsType }>) {
+  return <VariantContext.Provider value={value}>{children}</VariantContext.Provider>
+}
+
+export function useVariantCss(componentKey: keyof ComponentsType) {
+  return React.useContext(VariantContext)[componentKey] as ReturnType<typeof css>
+}

packages/ui/src/providers/VariantProvider.tsx

@@ -0,0 +1,3 @@
+export interface ComponentVariants {
+  [k: string]: unknown
+}