folder structure, button cva minor improvements

apps/design-system/stories/button.stories.tsx

@@ -1,26 +1,26 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from "@repo/design-system/button";
-import ButtonInFavour from "@repo/design-system/buttonInFavour";
-import ButtonAgainst from "@repo/design-system/buttonAgainst";
-import ButtonNeutral from "@repo/design-system/buttonNeutral";
-import { ArrowIcon } from "@repo/design-system/arrowIcon";
+import { Button } from "@repo/design-system/ui";
+import { ButtonInFavour } from "@repo/design-system/ui";
+import { ButtonAgainst } from "@repo/design-system/ui";
+import { ButtonNeutral } from "@repo/design-system/ui";
+import { ArrowIconRight, ArrowIconLeft } from "@repo/design-system/demo";
 
 const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
+  tags: ["autodocs"],
   argTypes: {
     kind: {
-      options: ["default", "filled", "outline"],
+      options: ["filled", "inverse", "outline", "link"],
       control: { type: "radio" },
     },
     size: {
       options: ["default", "small"],
       control: { type: "radio" },
     },
     hasIcon: {
-      options: ["true", "false"],
-      control: { type: "radio" },
+      control: { type: "boolean" },
     },
     iconPosition: {
       options: ["left", "right"],
@@ -31,8 +31,10 @@ const meta: Meta<typeof Button> = {
       control: { type: "radio" },
     },
     wider: {
-      options: ["true", "false"],
-      control: { type: "radio" },
+      control: { type: "boolean" },
+    },
+    compactable: {
+      control: { type: "boolean" },
     },
   },
   decorators: [
@@ -50,9 +52,9 @@ const meta: Meta<typeof Button> = {
       >
         <div
           style={{
-            height: "50%",
-            width: "50%",
-            backgroundColor: "yellow",
+            height: "75vh",
+            width: "75vw",
+            backgroundColor: "lightyellow",
             display: "flex",
             gap: "1rem",
             flexDirection: "column",
@@ -77,8 +79,8 @@ export const Filled: ButtonStory = {
   render: (args) => {
     return (
       <>
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="left" />
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="right" />
+        <Button icon={ArrowIconLeft} {...args} hasIcon iconPosition="left" />
+        <Button icon={ArrowIconRight} {...args} hasIcon iconPosition="right" />
         <Button {...args} fitContent />
       </>
     );
@@ -95,8 +97,8 @@ export const Outline: ButtonStory = {
   render: (args) => {
     return (
       <>
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="left" />
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="right" />
+        <Button icon={ArrowIconLeft} {...args} hasIcon iconPosition="left" />
+        <Button icon={ArrowIconRight} {...args} hasIcon iconPosition="right" />
         <Button {...args} fitContent />
       </>
     );
@@ -113,8 +115,8 @@ export const Link: ButtonStory = {
   render: (args) => {
     return (
       <>
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="left" />
-        <Button icon={ArrowIcon} {...args} hasIcon iconPosition="right" />
+        <Button icon={ArrowIconLeft} {...args} hasIcon iconPosition="left" />
+        <Button icon={ArrowIconRight} {...args} hasIcon iconPosition="right" />
         <Button {...args} fitContent />
       </>
     );

packages/design-system/package.json

@@ -11,15 +11,11 @@
     "./tailwind": "./tailwind.config.ts",
     "./demo": "./src/index.ts",
     "./progressBar": "./src/progressBar.tsx",
-    "./button": "./src/button.tsx",
     "./arrowIcon": "./src/arrowIcon.tsx",
     "./starIcon": "./src/starIcon.tsx",
     "./yesIcon": "./src/yesIcon.tsx",
     "./noIcon": "./src/noIcon.tsx",
-    "./neutralIcon": "./src/neutralIcon.tsx",
-    "./buttonInFavour": "./src/buttonInFavour.tsx",
-    "./buttonAgainst": "./src/buttonAgainst.tsx",
-    "./buttonNeutral": "./src/buttonNeutral.tsx"
+    "./neutralIcon": "./src/neutralIcon.tsx"
   },
   "scripts": {
     "build": "npm run fonts && npm run tailwind",

packages/design-system/src/icons/arrowIconLeft.tsx

@@ -0,0 +1,18 @@
+export function ArrowIconLeft(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {props.children}
+      <path
+        d="M12 19.625L4.375 12L12 4.375L13.075 5.45L7.25 11.25H19.625V12.75H7.25L13.075 18.55L12 19.625Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

packages/design-system/src/arrowIcon.tsx → packages/design-system/src/icons/arrowIconRight.tsx

@@ -1,4 +1,4 @@
-export function ArrowIcon(
+export function ArrowIconRight(
   props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
 ) {
   return (

packages/design-system/src/index.ts

@@ -6,3 +6,9 @@ export * from "./icons/ClearIcon";
 export * from "./icons/SearchIcon";
 export * from "./icons/HomeIcon";
 export * from "./icons/ErrorIcon";
+export * from "./icons/arrowIconLeft";
+export * from "./icons/arrowIconRight";
+export * from "./icons/neutralIcon";
+export * from "./icons/noIcon";
+export * from "./icons/starIcon";
+export * from "./icons/yesIcon";

packages/design-system/src/button.tsx → packages/design-system/src/ui/button/button.tsx

@@ -7,8 +7,9 @@ const buttonVariants = cva(
     "k1-inline-flex k1-items-center k1-min-w-fit",
     "data-[hover]:k1-cursor-pointer k1-text-nowrap data-[disabled]:k1-pointer-events-none",
     "k1-uppercase k1-font-bold",
-    "k1-rounded-l k1-rounded-br",
+    "k1-rounded-l-[16px] k1-rounded-br-[16px]",
     "k1-select-none",
+    "k1-gap-2",
   ],
   {
     variants: {
@@ -129,7 +130,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
 
     return (
       <HeadlessUIButton
-        className={`${buttonVariants({ kind, size, wider, fitContent, hasIcon, iconPosition, color })} ${className || ""}`}
+        className={`${buttonVariants({ kind, size, wider, fitContent, hasIcon, iconPosition, color })}`}
         ref={ref}
         {...props}
       >

packages/design-system/src/buttonAgainst.tsx → packages/design-system/src/ui/button/buttonAgainst.tsx

@@ -1,11 +1,11 @@
-import { Button, buttonVariants } from "@repo/design-system/button";
-import { NoIcon } from "@repo/design-system/noIcon";
+import { Button, buttonVariants } from "@repo/design-system/ui";
+import { NoIcon } from "../../icons/noIcon";
 import { VariantProps } from "class-variance-authority";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-export default function ButtonAgainst(props: Props) {
+export function ButtonAgainst(props: Props) {
   return (
     <Button
       kind="inverse"

packages/design-system/src/buttonInFavour.tsx → packages/design-system/src/ui/button/buttonInFavour.tsx

@@ -1,11 +1,11 @@
-import { Button, buttonVariants } from "@repo/design-system/button";
-import { YesIcon } from "@repo/design-system/yesIcon";
+import { Button, buttonVariants } from "@repo/design-system/ui";
+import { YesIcon } from "../../icons/yesIcon";
 import { VariantProps } from "class-variance-authority";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-export default function ButtonInFavour(props: Props) {
+export function ButtonInFavour(props: Props) {
   return (
     <Button
       kind="inverse"

packages/design-system/src/buttonNeutral.tsx → packages/design-system/src/ui/button/buttonNeutral.tsx

@@ -1,11 +1,11 @@
-import { Button, buttonVariants } from "@repo/design-system/button";
-import { NeutralIcon } from "@repo/design-system/neutralIcon";
+import { Button, buttonVariants } from "@repo/design-system/ui";
+import { NeutralIcon } from "../../icons/neutralIcon";
 import { VariantProps } from "class-variance-authority";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants>;
 
-export default function ButtonNeutral(props: Props) {
+export function ButtonNeutral(props: Props) {
   return (
     <Button
       kind="inverse"

packages/design-system/src/ui/button/index.ts

@@ -0,0 +1,5 @@
+export * from "./button";
+
+export * from "./buttonInFavour";
+export * from "./buttonAgainst";
+export * from "./buttonNeutral";

packages/design-system/src/ui/index.ts

@@ -1 +1,2 @@
 export * from "./input/index";
+export * from "./button/index";