From 2c6bdddd5bc593551d6703ed7c2b5951d76f3911 Mon Sep 17 00:00:00 2001
From: berke kayada <berke.kayada@coino.com>
Date: Fri, 22 Nov 2024 05:04:08 +0300
Subject: [PATCH] feat(checkbox): add checkbox react and vue

---
 packages/react/core/components/checkbox.tsx   | 44 +++++++++++++
 packages/react/core/components/index.ts       |  1 +
 packages/styles/core/components/checkbox.styl | 65 +++++++++++++++++++
 packages/styles/core/components/index.styl    |  2 +
 packages/vue/core/components/checkbox.vue     | 56 ++++++++++++++++
 packages/vue/core/components/index.ts         |  1 +
 playground/react/src/index.tsx                | 21 +++++-
 playground/vue/src/index.vue                  | 24 ++++++-
 shared/types/src/components/checkbox.ts       |  9 +++
 shared/types/src/components/index.ts          |  1 +
 10 files changed, 220 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/core/components/checkbox.tsx
 create mode 100644 packages/styles/core/components/checkbox.styl
 create mode 100644 packages/vue/core/components/checkbox.vue
 create mode 100644 shared/types/src/components/checkbox.ts

diff --git a/packages/react/core/components/checkbox.tsx b/packages/react/core/components/checkbox.tsx
new file mode 100644
index 0000000..669f47b
--- /dev/null
+++ b/packages/react/core/components/checkbox.tsx
@@ -0,0 +1,44 @@
+import type { CheckboxProps } from '@blank/types'
+import React from 'react'
+
+const Checkbox: React.FC<CheckboxProps> = ({
+    size = 'medium',
+    direction,
+    label,
+    checked,
+    onChange,
+    disabled = false,
+}) => {
+    const handleClick = () => {
+        if (disabled)
+            return
+        if (onChange) {
+            onChange(!checked)
+        }
+    }
+
+    return (
+        <div
+            className={`blank checkbox ${size} ${direction} ${disabled ? 'disabled' : ''}`}
+            onClick={handleClick}
+            tabIndex={disabled ? -1 : 0}
+            role="checkbox"
+            aria-checked={checked}
+            aria-disabled={disabled}
+        >
+            <input
+                type="checkbox"
+                className={`blank checkbox__input ${size}`}
+                checked={checked}
+                onChange={e => e.stopPropagation()}
+                aria-label={label}
+                disabled={disabled}
+            />
+            <span className={`blank checkbox__label ${size} ${disabled ? 'disabled' : ''}`}>
+                {label}
+            </span>
+        </div>
+    )
+}
+
+export default Checkbox
diff --git a/packages/react/core/components/index.ts b/packages/react/core/components/index.ts
index a99d672..11e01bc 100644
--- a/packages/react/core/components/index.ts
+++ b/packages/react/core/components/index.ts
@@ -4,5 +4,6 @@ export { default as Badge } from './badge'
 export { default as BadgeGroup } from './badgeGroup'
 export { default as Button } from './button'
 export { default as ButtonGroup } from './buttonGroup'
+export { default as Checkbox } from './checkbox'
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 export { default as Toggle } from './toggle'
diff --git a/packages/styles/core/components/checkbox.styl b/packages/styles/core/components/checkbox.styl
new file mode 100644
index 0000000..e56ce44
--- /dev/null
+++ b/packages/styles/core/components/checkbox.styl
@@ -0,0 +1,65 @@
+.blank
+  &.checkbox
+    display flex
+    align-items center
+    cursor pointer
+    user-select none
+    width max-content;
+    
+    &.disabled
+      cursor not-allowed
+
+    &.left
+      flex-direction row-reverse
+
+    &.right
+      flex-direction row
+
+    &__input
+      appearance none
+      border 1px solid $AlphaBlack10
+      border-radius 4px
+      background-color $BaseWhite
+      cursor pointer
+      transition all 0.1s ease-in-out
+      position relative
+
+      &.small
+        width 20px
+        height 20px
+
+      &.medium
+        width 24px
+        height 24px
+
+      &:checked
+        background-color $Info500
+        border-color $Info500
+
+        &::after
+          content '✔'
+          position absolute
+          top 50%
+          left 50%
+          transform translate(-50%, -50%)
+          font-size 14px
+          color $BaseWhite
+
+      &:disabled
+        background-color $AlphaBlack5
+        border-color $AlphaBlack10
+        cursor not-allowed
+
+    &__label
+      margin 0 8px
+      color inherit
+      text-decoration none
+
+      &.small
+        Caption1(500)
+
+      &.medium
+        Body2(500)
+
+      &.disabled
+        color $AlphaBlack30
diff --git a/packages/styles/core/components/index.styl b/packages/styles/core/components/index.styl
index 4661fb6..9431701 100644
--- a/packages/styles/core/components/index.styl
+++ b/packages/styles/core/components/index.styl
@@ -9,3 +9,5 @@
 @import 'avatar.styl'
 @import 'avatarGroup.styl'
 @import 'tabs.styl'
+@import 'checkbox.styl'
+
diff --git a/packages/vue/core/components/checkbox.vue b/packages/vue/core/components/checkbox.vue
new file mode 100644
index 0000000..930af7e
--- /dev/null
+++ b/packages/vue/core/components/checkbox.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { CheckboxProps } from '@blank/types'
+import { ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+    size: 'medium',
+    direction: 'left',
+    label: '',
+    checked: false,
+    disabled: false,
+})
+
+const internalChecked = ref(props.checked)
+
+watch(() => props.checked, (newChecked) => {
+    internalChecked.value = newChecked
+})
+
+function handleClick() {
+    if (props.disabled)
+        return
+
+    internalChecked.value = !internalChecked.value
+
+    if (props.onChange) {
+        props.onChange(internalChecked.value)
+    }
+}
+</script>
+
+<template>
+    <div
+        class="blank checkbox"
+        :class="[props.size, props.direction, { disabled: props.disabled }] "
+        tabindex="0"
+        role="checkbox"
+        :aria-checked="internalChecked"
+        :aria-disabled="props.disabled"
+        @click="handleClick"
+    >
+        <input
+            v-model="internalChecked"
+            type="checkbox"
+            class="blank checkbox__input"
+            :class="props.size"
+            :aria-label="props.label"
+            :disabled="props.disabled"
+        >
+        <span
+            class="blank checkbox__label"
+            :class="[props.size, { disabled: props.disabled }] "
+        >
+            {{ props.label }}
+        </span>
+    </div>
+</template>
diff --git a/packages/vue/core/components/index.ts b/packages/vue/core/components/index.ts
index ae4407a..c0fa797 100644
--- a/packages/vue/core/components/index.ts
+++ b/packages/vue/core/components/index.ts
@@ -4,6 +4,7 @@ export { default as Badge } from './badge.vue'
 export { default as BadgeGroup } from './badgeGroup.vue'
 export { default as Button } from './button.vue'
 export { default as ButtonGroup } from './buttonGroup.vue'
+export { default as Checkbox } from './checkbox.vue'
 export { default as Input } from './input/index.vue'
 export { default as Radio } from './radio.vue'
 export { default as RadioGroup } from './radioGroup.vue'
diff --git a/playground/react/src/index.tsx b/playground/react/src/index.tsx
index d157c5a..212a400 100644
--- a/playground/react/src/index.tsx
+++ b/playground/react/src/index.tsx
@@ -1,8 +1,9 @@
-import { Avatar, AvatarGroup, Badge, BadgeGroup, Button, Icon, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from '@blank/react'
+import { Avatar, AvatarGroup, Badge, BadgeGroup, Button, Checkbox, Icon, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from '@blank/react'
+import { useState } from 'react'
 
 function App() {
 	const badges = [{ label: 'test', backgroundColor: 'grey', color: 'white' }, { label: 'test', backgroundColor: 'transparent', color: 'white', icon: 'remix:command-fill' }]
-
+	const [check, useCheck] = useState(false)
 	return (
 		<div>
 			<Button size="small">
@@ -113,6 +114,22 @@ function App() {
 					<TabsContent value={2}>Content for Tab 3</TabsContent>
 				</Tabs>
 			</div>
+			<Checkbox
+				size="small"
+				direction="right"
+				label="Chek Me!"
+				checked={check}
+				onChange={() => useCheck(!check)}
+				disabled={false}
+			/>
+			<Checkbox
+				size="medium"
+				direction="left"
+				label="Chek Me!"
+				checked={check}
+				onChange={() => useCheck(!check)}
+				disabled={false}
+			/>
 
 		</div>
 	)
diff --git a/playground/vue/src/index.vue b/playground/vue/src/index.vue
index 9e61c61..928e642 100644
--- a/playground/vue/src/index.vue
+++ b/playground/vue/src/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, AvatarGroup, Badge, BadgeGroup, Button, ButtonGroup, Container, Icon, Input, Radio, RadioGroup, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from '@blank/vue'
+import { Avatar, AvatarGroup, Badge, BadgeGroup, Button, ButtonGroup, Checkbox, Container, Icon, Input, Radio, RadioGroup, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from '@blank/vue'
 import { ref, watch } from 'vue'
 
 const badges = [{ label: 'test', backgroundColor: 'grey', color: 'white' }, { label: 'test', backgroundColor: 'transparent', color: 'white', icon: 'remix:command-fill' }]
@@ -13,6 +13,11 @@ watch(selectedRadio, (newValue) => {
 		console.log(`Seçilen değer INDEX: ${newValue}`)
 	}
 })
+const check = ref(false)
+
+function useCheck(newValue: boolean) {
+	check.value = newValue
+}
 </script>
 
 <template>
@@ -134,7 +139,22 @@ watch(selectedRadio, (newValue) => {
 			test
 		</Badge>
 		<BadgeGroup variant="primary" :badges="badges" @click="handleClick" />
-
+		<Checkbox
+			size="small"
+			direction="left"
+			label="Check Me!"
+			:checked="check"
+			:disabled="false"
+			@on-change="useCheck"
+		/>
+		<Checkbox
+			size="medium"
+			direction="left"
+			label="Check Me!"
+			:checked="check"
+			:disabled="false"
+			@on-change="useCheck"
+		/>
 		<div>
 			<Avatar
 				src="https://files.kick.com/images/user/27079011/profile_image/conversion/6e002a5e-8fd1-461c-8c7a-79fe6b71cdff-medium.webp"
diff --git a/shared/types/src/components/checkbox.ts b/shared/types/src/components/checkbox.ts
new file mode 100644
index 0000000..82058c7
--- /dev/null
+++ b/shared/types/src/components/checkbox.ts
@@ -0,0 +1,9 @@
+interface CheckboxProps {
+    size?: 'small' | 'medium'
+    direction?: 'left' | 'right'
+    label?: string
+    checked?: boolean
+    onChange?: (checked: boolean) => void
+    disabled?: boolean
+}
+export type { CheckboxProps }
diff --git a/shared/types/src/components/index.ts b/shared/types/src/components/index.ts
index db899b8..c89f706 100644
--- a/shared/types/src/components/index.ts
+++ b/shared/types/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './badge'
 export * from './badgeGroups'
 export * from './button'
 export * from './buttonGroups'
+export * from './checkbox'
 export * from './input'
 export * from './radio'
 export * from './radioGroup'