[HOV-4] | Adds List Component (V1)

docs/docs/components/list.mdx

@@ -0,0 +1,102 @@
+# List
+
+### Quick start
+
+Here's a quick start guide to get started with the button component
+
+### Importing Component
+
+```jsx
+import { List, ListItem } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### List Plain
+
+import "@hover-design/react/dist/style.css";
+import { List, ListItem } from "@hover-design/react";
+export const ListComponent = ({ variant, children, type }) => (
+  <div style={{ margin: "0px 12px" }}>
+    <List type={type} variant={variant}>
+      {children}
+    </List>
+  </div>
+);
+export const ListItemComp = ({ variant, children }) => (
+  <ListItem variant={variant}>{children}</ListItem>
+);
+
+```jsx
+<List>
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</List>
+```
+
+<ListComponent>
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</ListComponent>
+
+##### List Horizontal
+
+```jsx
+<List variant={"horizontal"}>
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</List>
+```
+
+<div style={{ margin: "0 !important" }}>
+  <ListComponent variant={"horizontal"}>
+    <ListItem></ListItem>
+    <ListItem>One</ListItem>
+    <ListItem>Two</ListItem>
+  </ListComponent>
+</div>
+
+##### List StyleType
+
+```jsx
+<List type={"square"}>
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</List>
+```
+
+###### Square
+
+<ListComponent type="square">
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</ListComponent>
+
+###### Circle
+
+<ListComponent type="circle">
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</ListComponent>
+
+###### Number
+
+<ListComponent type="Number">
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</ListComponent>
+
+###### Custom Emoji
+
+<ListComponent type="'\1F44D'">
+  <ListItem>One</ListItem>
+  <ListItem>Two</ListItem>
+</ListComponent>
+
+### Props Referece
+
+| Attributes |                                                              Values                                                               | Optional ? |
+| :--------- | :-------------------------------------------------------------------------------------------------------------------------------: | ---------: |
+| variant    |                                                  `horizontal` &#124; `vertical`                                                   |        Yes |
+| type       | `square` &#124; `circle` &#124; `\1F44D` &#124; [listStyleType](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) |        Yes |
+| children   |                                                          React.Children                                                           |        Yes |

docs/src/pages/index.tsx

@@ -6,7 +6,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import "@hover-design/react/dist/style.css";
-
+import { List, ListItem } from "@hover-design/react";
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (

lib/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.6.8",
+    "@vanilla-extract/dynamic": "^2.0.2",
     "@vanilla-extract/recipes": "^0.2.3",
     "@vanilla-extract/sprinkles": "^1.3.3",
     "@vanilla-extract/vite-plugin": "^3.1.0",

lib/src/components/List/List.tsx

@@ -0,0 +1,29 @@
+import React, { ForwardRefRenderFunction } from "react";
+
+import { IListProps } from "./list.types";
+import { listStyles, listThemeVars, listThemeClass } from "./list.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+
+const ListComponent: ForwardRefRenderFunction<HTMLUListElement, IListProps> = (
+  { children, variant, type, ...props },
+  ref
+) => {
+  const listStyle = listStyles({
+    variant: variant,
+  });
+  return (
+    <ul
+      style={assignInlineVars({
+        [listThemeVars.listStyles.listStyleType]: type || "none",
+      })}
+      className={`${listStyle} ${listThemeClass} ${props.className || ""}`}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+};
+
+const ListWithRef = React.forwardRef(ListComponent);
+export { ListWithRef as List };

lib/src/components/List/index.ts

@@ -0,0 +1 @@
+export * from "./List";

lib/src/components/List/list.css.ts

@@ -0,0 +1,26 @@
+import { createTheme } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { IListTheme } from "./list.types";
+export const [listThemeClass, listThemeVars]: IListTheme = createTheme({
+  listStyles: {
+    listStyleType: "none",
+  },
+});
+export const listStyles = recipe({
+  base: {
+    listStyleType: listThemeVars.listStyles.listStyleType,
+    padding: 0,
+    margin: 0,
+  },
+  variants: {
+    variant: {
+      horizontal: {
+        display: "inline-flex",
+        gap: "24px",
+      },
+      vertical: {
+        display: "block",
+      },
+    },
+  },
+});

lib/src/components/List/list.types.ts

@@ -0,0 +1,8 @@
+import { RecipeVariants } from "@vanilla-extract/recipes";
+import { listStyles } from "./list.css";
+
+export type IListProps = JSX.IntrinsicElements["ul"] &
+  RecipeVariants<typeof listStyles> & {
+    type?: CSSStyleDeclaration["listStyleType"];
+  };
+export type IListTheme = [string, { listStyles: { listStyleType: string } }];

lib/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,21 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { listItemStyles } from "./list-item.css";
+import { IListItemProps } from "./list-item.types";
+
+const ListItemComponent: ForwardRefRenderFunction<
+  HTMLLIElement,
+  IListItemProps
+> = ({ children, ...props }, ref) => {
+  return (
+    <li
+      className={`${listItemStyles} ${props?.className || ""}`}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </li>
+  );
+};
+
+const ListItemWithRef = React.forwardRef(ListItemComponent);
+export { ListItemWithRef as ListItem };

lib/src/components/ListItem/index.ts

@@ -0,0 +1 @@
+export * from "./ListItem";

lib/src/components/ListItem/list-item.css.ts

@@ -0,0 +1,5 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+export const listItemStyles = recipe({
+  base: {},
+});

lib/src/components/ListItem/list-item.types.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface IListItemProps
+  extends React.DetailedHTMLProps<
+    React.LiHTMLAttributes<HTMLLIElement>,
+    HTMLLIElement
+  > {
+  children: React.ReactNode;
+}

lib/src/index.ts

@@ -2,3 +2,5 @@ export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/reset";
 export * from "./components/Switch";
+export * from "./components/List";
+export * from "./components/ListItem";