[UI]: added initial ui package with a bare bones Collapse component. (#…

…186)

.changeset/fuzzy-worms-camp.md

@@ -0,0 +1,5 @@
+---
+"@resembli/ui": patch
+---
+
+Added initial UI package with a bare bones collapse component.

.husky/commit-msg

@@ -5,7 +5,7 @@ INPUT_FILE=$1
 
 START_LINE=`head -n1 $INPUT_FILE`
 
-ACCEPTED_LIST="ROOT|WINDOW|VERSION"
+ACCEPTED_LIST="ROOT|UI|AYA|WINDOW|VERSION"
 
 PATTERN="^\[(${ACCEPTED_LIST})\]: [a-z0-9].+\."
 

packages/ui/.swcrc

@@ -0,0 +1,16 @@
+{
+  "jsc": {
+    "target": "es2021",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    }
+  },
+  "module": {
+    "type": "es6",
+    "strict": true
+  },
+  "env": {
+    "targets": ["defaults", "not IE 11", "maintained node versions"]
+  }
+}

packages/ui/README.md

@@ -0,0 +1,3 @@
+# @resembli/ui
+
+Work in progress

packages/ui/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@resembli/ui",
+  "description": "React UI components",
+  "private": false,
+  "author": "Lee Beydoun",
+  "version": "0.0.0",
+  "types": "src/index.ts",
+  "main": "src/index.ts",
+  "type": "module",
+  "publishConfig": {
+    "main": "dist/index.js",
+    "types": "dist/types/index.d.ts"
+  },
+  "keywords": [
+    "react",
+    "reactjs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Resembli/ui.git",
+    "directory": "packages/ui"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Resembli/ui/issues"
+  },
+  "homepage": "https://www.resembli.com",
+  "scripts": {
+    "build": "swc ./src -d dist && tsc",
+    "clean": "rimraf dist",
+    "clean:build": "rimraf dist && swc ./src -d dist && tsc"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "framer-motion": "^6.2.8"
+  }
+}

packages/ui/src/components/Collapse.tsx

@@ -0,0 +1,32 @@
+import { AnimatePresence, motion } from "framer-motion"
+import * as React from "react"
+
+export interface CollapseProps {
+  open?: boolean
+  as?: keyof typeof motion
+}
+
+export function Collapse({ open, children, as = "div" }: React.PropsWithChildren<CollapseProps>) {
+  const MotionElement = motion[as]
+
+  return (
+    <AnimatePresence initial={false}>
+      {open && (
+        <MotionElement
+          key="content"
+          initial="collapsed"
+          animate="open"
+          exit="collapsed"
+          transition={{ duration: 0.2 }}
+          style={{ overflow: "hidden" }}
+          variants={{
+            open: { height: "auto" },
+            collapsed: { height: 0 },
+          }}
+        >
+          {children}
+        </MotionElement>
+      )}
+    </AnimatePresence>
+  )
+}

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export { Collapse } from "./components/Collapse"

packages/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "outDir": "dist/types"
+  }
+}