Merge pull request #21 from Atnic/feature/select

Feature/select
Atnic · Feb 26, 2024 · 35593c5 · 35593c5
2 parents 1df4673 + a735b13
commit 35593c5
Show file tree

Hide file tree

Showing 82 changed files with 6,312 additions and 2,023 deletions.
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
@@ -53,7 +53,8 @@
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/utils": "^3.21.1",
     "@react-types/button": "^3.9.0",
-    "@react-types/shared": "^3.21.0"
+    "@react-types/shared": "^3.21.0",
+    "@jala-banyu/icons" : "^1.0.0"
   },
   "devDependencies": {
     "@jala-banyu/shared-icons": "workspace: *",

diff --git a/packages/components/card/package.json b/packages/components/card/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=0.0.0",
+    "framer-motion": ">=4.0.0",
     "@jala-banyu/theme": "1.3.0",
     "@jala-banyu/system": "1.0.0"
   },

diff --git a/packages/components/divider/__tests__/divider.test.tsx b/packages/components/divider/__tests__/divider.test.tsx
@@ -18,8 +18,8 @@ describe("Divider", () => {
   });
 
   it("should render with custom className", () => {
-    const {container} = render(<Divider className="custom-class-name" />);
+    const {container} = render(<Divider classNames={{base: "custom-class-name"}} />);
 
-    expect(container.firstChild).toHaveClass("custom-class-name");
+    expect(container.firstChild?.firstChild).toHaveClass("custom-class-name");
   });
 });
diff --git a/packages/components/divider/package.json b/packages/components/divider/package.json
@@ -36,8 +36,8 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@jala-banyu/theme": "1.2.0",
-    "@jala-banyu/system": "1.0.0"
+    "@jala-banyu/theme": ">=1.2.0",
+    "@jala-banyu/system": ">=1.0.0"
   },
   "dependencies": {
     "@jala-banyu/shared-utils": "workspace: *",

diff --git a/packages/components/divider/stories/divider.stories.tsx b/packages/components/divider/stories/divider.stories.tsx
@@ -35,7 +35,7 @@ const defaultProps = {};
 const DefaultTemplate = (args: DividerProps) => (
   <div className="w-1/2">
     <div className="rounded-lg shadow-md bg-neutral-50 w-full h-24 mb-4" />
-    <Divider {...args} />
+    <Divider {...args} className={"border-4"} />
     <div className="rounded-lg shadow-md bg-neutral-50 w-full h-24 mt-4" />
   </div>
 );

diff --git a/packages/components/dropdown/CHANGELOG.md b/packages/components/dropdown/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @jala-banyu/dropdown
 
+## 1.1.0
+
+### Minor Changes
+
+- Init Dropdown
+
 ## 1.0.0
 
 ### Major Changes

diff --git a/packages/components/dropdown/__tests__/dropdown.test.tsx b/packages/components/dropdown/__tests__/dropdown.test.tsx
@@ -16,9 +16,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -61,9 +59,7 @@ describe("Dropdown", () => {
           </DropdownSection>
           <DropdownSection title="Danger Zone">
             <DropdownItem key="edit">Edit file</DropdownItem>
-            <DropdownItem key="delete" color="danger">
-              Delete file
-            </DropdownItem>
+            <DropdownItem key="delete">Delete file</DropdownItem>
           </DropdownSection>
         </DropdownMenu>
       </Dropdown>,
@@ -128,9 +124,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -182,9 +176,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -218,7 +210,7 @@ describe("Dropdown", () => {
     });
   });
 
-  it("should show checkmarks if selectionMode is single and has a selected item", () => {
+  it("should show brand colored text on menu item if selectionMode is single and has a selected item", () => {
     const wrapper = render(
       <Dropdown isOpen>
         <DropdownTrigger>
@@ -228,9 +220,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -244,14 +234,10 @@ describe("Dropdown", () => {
     expect(menuItems[2].getAttribute("aria-checked")).toBe("false");
     expect(menuItems[3].getAttribute("aria-checked")).toBe("false");
 
-    let svg = menuItems[0].querySelector("svg");
-
-    expect(svg).toBeTruthy();
-
-    expect(svg?.getAttribute("data-selected")).toBe("true");
+    expect(menuItems[0].getAttribute("class")).toContain("text-brand");
   });
 
-  it("should show multiple checkmarks if selectionMode is multiple and has selected items", () => {
+  it("should show multiple brand colored text on menu items if selectionMode is multiple and has selected items", () => {
     const wrapper = render(
       <Dropdown isOpen>
         <DropdownTrigger>
@@ -261,9 +247,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -277,17 +261,8 @@ describe("Dropdown", () => {
     expect(menuItems[2].getAttribute("aria-checked")).toBe("false");
     expect(menuItems[3].getAttribute("aria-checked")).toBe("false");
 
-    let checkmark1 = menuItems[0].querySelector("svg");
-
-    expect(checkmark1).toBeTruthy();
-
-    expect(checkmark1?.getAttribute("data-selected")).toBe("true");
-
-    let checkmark2 = menuItems[1].querySelector("svg");
-
-    expect(checkmark2).toBeTruthy();
-
-    expect(checkmark2?.getAttribute("data-selected")).toBe("true");
+    expect(menuItems[0].getAttribute("class")).toContain("text-brand");
+    expect(menuItems[1].getAttribute("class")).toContain("text-brand");
   });
 
   it("should not show checkmarks if selectionMode not defined", () => {
@@ -300,9 +275,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -333,9 +306,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );
@@ -369,9 +340,7 @@ describe("Dropdown", () => {
           <DropdownItem key="new">New file</DropdownItem>
           <DropdownItem key="copy">Copy link</DropdownItem>
           <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
+          <DropdownItem key="delete">Delete file</DropdownItem>
         </DropdownMenu>
       </Dropdown>,
     );

diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jala-banyu/dropdown",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -53,6 +53,7 @@
     "@jala-banyu/theme": "workspace: *",
     "@jala-banyu/system": "workspace: *",
     "@jala-banyu/button": "workspace: *",
+    "@jala-banyu/select": "workspace: *",
     "@jala-banyu/avatar": "workspace: *",
     "@jala-banyu/user": "workspace: *",
     "@jala-banyu/shared-icons": "workspace: *",