From e923ec9dae8d6708945335f907d137c6de858892 Mon Sep 17 00:00:00 2001
From: Syauqizaidan Khairan Khalaf <syaokay@gmail.com>
Date: Wed, 31 Jan 2024 19:58:57 +0700
Subject: [PATCH] feat: finalizing touch for core section in storybook

---
 .../core/src/stories/BackdropBlur.stories.tsx | 10 +++---
 packages/core/src/stories/Blur.stories.tsx    | 10 +++---
 packages/core/src/stories/Colors.stories.tsx  | 13 ++++---
 .../core/src/stories/Container.stories.tsx    |  7 ++--
 .../core/src/stories/Gradients.stories.tsx    | 34 ++++++++++---------
 .../core/src/stories/GridSystem.stories.tsx   |  6 ++--
 packages/core/src/stories/Shadows.stories.tsx |  8 +++--
 packages/core/src/stories/Spacing.stories.tsx |  8 +++--
 packages/forms/src/stories/Input.stories.tsx  | 29 ----------------
 9 files changed, 56 insertions(+), 69 deletions(-)

diff --git a/packages/core/src/stories/BackdropBlur.stories.tsx b/packages/core/src/stories/BackdropBlur.stories.tsx
index cfca581..7f5e37f 100644
--- a/packages/core/src/stories/BackdropBlur.stories.tsx
+++ b/packages/core/src/stories/BackdropBlur.stories.tsx
@@ -11,9 +11,11 @@ export const AllBackdropBlur = () => {
             backgroundImage: "url(" + 'https://w0.peakpx.com/wallpaper/390/257/HD-wallpaper-macos-ventura-ios-16-dark-wwdc-2022-apple.jpg' + ")", backgroundPosition: 'center',
             backgroundSize: 'cover',
             backgroundRepeat: 'no-repeat'
-        }} className='p-4'>
-            <p className='px-5 mb-8 text-white'>All the backrop blur used by default tailwind classes https://tailwindcss.com/docs/backdrop-blur</p>
-            <div className="flex gap-5 mb-5 px-5">
+        }} className='p-5 rounded-md'>
+            <h2 className="text-4xl font-bold text-white tracking-tight">Backdrop Blur</h2>
+            <p className='mb-5 font-semibold text-white'>All the backrop blur used by default tailwind classes <a href="https://tailwindcss.com/docs/backrop-blur">https://tailwindcss.com/docs/backrop-blur</a></p>
+            <hr className="h-px my-4 bg-gray-100 border-0" />
+            <div className="flex gap-5 mb-5">
                 <div>
                     <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-none" />
                     <p className='text-white flex justify-between mt-5'>
@@ -57,7 +59,7 @@ export const AllBackdropBlur = () => {
                     </p>
                 </div>
             </div>
-            <div className="flex gap-5 mb-5 px-5">
+            <div className="flex gap-5 mb-5">
                 <div>
                     <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-3xl" />
                     <p className='text-white flex justify-between mt-5'>
diff --git a/packages/core/src/stories/Blur.stories.tsx b/packages/core/src/stories/Blur.stories.tsx
index b3dda5c..3706eef 100644
--- a/packages/core/src/stories/Blur.stories.tsx
+++ b/packages/core/src/stories/Blur.stories.tsx
@@ -7,9 +7,11 @@ export default {
 export const AllBlur = () => {
 
   return (
-    <div className='bg-gradient-to-b from-blue-400 to-blue-600 p-4'>
-      <p className='px-5 mb-8 text-white'>All the blur used by default tailwind classes https://tailwindcss.com/docs/blur</p>
-      <div className="flex gap-5 mb-5 px-5">
+    <div className='bg-gradient-to-b from-blue-400 to-blue-600 p-5 rounded-md'>
+      <h2 className="text-4xl font-bold text-white tracking-tight">Blur</h2>
+      <p className='mb-5 font-semibold text-white'>All the blur used by default tailwind classes <a href="https://tailwindcss.com/docs/colors">https://tailwindcss.com/docs/blur</a></p>
+      <hr className="h-px my-4 bg-gray-100 border-0" />
+      <div className="flex gap-5 mb-5">
         <div>
           <div className="w-48 h-48 bg-white rounded-lg blur-[0px]" />
           <p className='text-white flex justify-between mt-5'>
@@ -53,7 +55,7 @@ export const AllBlur = () => {
           </p>
         </div>
       </div>
-      <div className="flex gap-5 mb-5 px-5">
+      <div className="flex gap-5 mb-5">
         <div>
           <div className="w-48 h-48 bg-white rounded-lg blur-3xl" />
           <p className='text-white flex justify-between mt-5'>
diff --git a/packages/core/src/stories/Colors.stories.tsx b/packages/core/src/stories/Colors.stories.tsx
index 16197f5..b51ff1f 100644
--- a/packages/core/src/stories/Colors.stories.tsx
+++ b/packages/core/src/stories/Colors.stories.tsx
@@ -32,10 +32,13 @@ export const AllColors = () => {
   const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
   return (
-    <div className='bg-[#F4F5F7] p-4'>
-      <div className="flex gap-5 mb-5 px-5">
+    <div className='bg-white rounded-md p-5'>
+      <h2 className="text-4xl font-bold text-black tracking-tight">Colors</h2>
+      <p className='mb-5 font-semibold'>All the colors used by default tailwind classes <a href="https://tailwindcss.com/docs/colors">https://tailwindcss.com/docs/colors</a></p>
+      <hr className="h-px my-4 bg-gray-400 border-0" />
+      <div className="flex gap-5 mb-5">
         <div>
-          <div className={`color-swatch bg-primary w-48 h-16 rounded-md`} >
+          <div className={`color-swatch bg-primary w-48 h-16 rounded-md mb-2`} >
           </div>
           <p className='flex justify-between'>
             <span>primary</span>
@@ -44,10 +47,10 @@ export const AllColors = () => {
       </div>
       {colors.map(color => {
         return (
-          <div className="flex gap-5 mb-5 px-5">
+          <div className="flex gap-5 mb-5">
             {levels.map(level => (
               <div>
-                <div className={`color-swatch bg-${color}-${level} w-32 h-20 rounded-md`} >
+                <div className={`color-swatch bg-${color}-${level} w-32 h-20 rounded-md mb-2`} >
                 </div>
                 <p className='flex justify-between'>
                   <span>{color}</span>
diff --git a/packages/core/src/stories/Container.stories.tsx b/packages/core/src/stories/Container.stories.tsx
index 082dc62..1ce8c47 100644
--- a/packages/core/src/stories/Container.stories.tsx
+++ b/packages/core/src/stories/Container.stories.tsx
@@ -7,9 +7,10 @@ export default {
 export const AllContainer = () => {
 
   return (
-    <div className='bg-[#F4F5F7] p-4'>
-      <p className='px-5 mb-5'>All the container used by default tailwind classes https://tailwindcss.com/docs/container</p>
-
+    <div className='bg-white p-5 rounded-md'>
+      <h2 className="text-4xl font-bold text-black tracking-tight">Container</h2>
+      <p className='mb-5 font-semibold'>All the container used by default tailwind classes <a href="https://tailwindcss.com/docs/container">https://tailwindcss.com/docs/container</a></p>
+      <hr className="h-px my-4 bg-gray-400 border-0" />
       <div className="w-[1536px] h-[440px] flex-col justify-start items-center gap-[30px] inline-flex">
         <div className="w-[640px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
           <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">sm (640px)</div>
diff --git a/packages/core/src/stories/Gradients.stories.tsx b/packages/core/src/stories/Gradients.stories.tsx
index 913f40a..9ede300 100644
--- a/packages/core/src/stories/Gradients.stories.tsx
+++ b/packages/core/src/stories/Gradients.stories.tsx
@@ -7,80 +7,82 @@ export default {
 export const AllGradients = () => {
 
   return (
-    <div className='bg-[#F4F5F7] p-4'>
-      <p className='px-5 mb-5'>All the gradients use bg-gradient-to-b tailwind classes and the color from - to is below the gradients box.</p>
-      <div className="flex gap-5 mb-5 px-5">
+    <div className='bg-white rounded-md p-5'>
+      <h2 className="text-4xl font-bold text-black tracking-tight">Gradients</h2>
+      <p className='mb-5 font-semibold'>All the gradients use bg-gradient-to-b tailwind classes and the color from - to is below the gradients box.</p>
+      <hr className="h-px my-4 bg-gray-400 border-0" />
+      <div className="flex gap-5 mb-5">
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-500 to-indigo-600 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-500 to-indigo-600 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>fuchsia-500 → indigo-600</span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-indigo-500 to-indigo-800 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-indigo-500 to-indigo-800 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>indigo-500 → indigo-800 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-pink-500 to-indigo-600 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-pink-500 to-indigo-600 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>pink-500 → indigo-600 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-sky-400 to-purple-500 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-sky-400 to-purple-500 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>sky-400 → purple-500 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-violet-400 to-purple-700 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-violet-400 to-purple-700 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>violet-400 → purple-700 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-blue-400 to-blue-600 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-blue-400 to-blue-600 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>blue-400 → blue-600 </span>
           </p>
         </div>
       </div>
 
-      <div className="flex gap-5 mb-5 px-5">
+      <div className="flex gap-5 mb-5">
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-emerald-400 to-lime-700 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-emerald-400 to-lime-700 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>emerald-400 → lime-700 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-yellow-200 to-lime-700 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-yellow-200 to-lime-700 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>yellow-200 → lime-700 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-green-400 to-blue-500 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-green-400 to-blue-500 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>green-400 → blue-500 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-blue-500 to-pink-500 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-blue-500 to-pink-500 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>blue-500 → pink-500 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-orange-500 to-pink-600 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-orange-500 to-pink-600 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>orange-500 → pink-600 </span>
           </p>
         </div>
         <div>
-          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-700 to-red-500 rounded-lg" />
+          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-700 to-red-500 rounded-lg mb-2" />
           <p className='flex justify-between'>
             <span>fuchsia-700 → red-500 </span>
           </p>
diff --git a/packages/core/src/stories/GridSystem.stories.tsx b/packages/core/src/stories/GridSystem.stories.tsx
index 2dd8b99..2e2fa44 100644
--- a/packages/core/src/stories/GridSystem.stories.tsx
+++ b/packages/core/src/stories/GridSystem.stories.tsx
@@ -7,8 +7,10 @@ export default {
 export const AllGridSystem = () => {
 
   return (
-    <div className='bg-[#F4F5F7] p-4'>
-      <p className='mb-8 text-black'>All the grid  used by default tailwind classes https://tailwindcss.com/docs/flex</p>
+    <div className='bg-white p-5 rounded-md'>
+      <h2 className="text-4xl font-bold text-black tracking-tight">Grid System</h2>
+      <p className='mb-5 font-semibold'>All the grid used by default tailwind classes <a href="https://tailwindcss.com/docs/flex">https://tailwindcss.com/docs/flex</a></p>
+      <hr className="h-px my-4 bg-gray-400 border-0" />
       <div className="w-[1360px] h-[1962px] flex-col justify-start items-start gap-[30px] inline-flex">
         <div className="flex-col justify-start items-start gap-[30px] flex">
           <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
diff --git a/packages/core/src/stories/Shadows.stories.tsx b/packages/core/src/stories/Shadows.stories.tsx
index 3b300fc..cc8281b 100644
--- a/packages/core/src/stories/Shadows.stories.tsx
+++ b/packages/core/src/stories/Shadows.stories.tsx
@@ -7,9 +7,11 @@ export default {
 export const AllShadows = () => {
 
   return (
-    <div className='bg-[#F4F5F7] p-4'>
-      <p className='px-5 mb-5'>All the shadows used by default tailwind classes https://tailwindcss.com/docs/box-shadow</p>
-      <div className="flex gap-5 mb-5 px-5">
+    <div className='bg-white rounded-md p-5'>
+      <h2 className="text-4xl font-bold text-black tracking-tight">Shadows</h2>
+      <p className='mb-5 font-semibold'>All the shadows used by default tailwind classes <a href="https://tailwindcss.com/docs/box-shadow">https://tailwindcss.com/docs/box-shadow</a></p>
+      <hr className="h-px my-4 bg-gray-400 border-0" />
+      <div className="flex gap-5 mb-5">
         <div>
           <div className="w-48 h-48 bg-white rounded-lg shadow-sm" />
           <p className='flex justify-between mt-5'>
diff --git a/packages/core/src/stories/Spacing.stories.tsx b/packages/core/src/stories/Spacing.stories.tsx
index fab12e2..f3abfdd 100644
--- a/packages/core/src/stories/Spacing.stories.tsx
+++ b/packages/core/src/stories/Spacing.stories.tsx
@@ -7,10 +7,12 @@ export default {
 export const AllSpacing = () => {
 
   return (
-    <div className='bg-[#F4F5F7] p-4'>
-      <p className='px-5 mb-5'>All the spacing used by default tailwind classes https://tailwindcss.com/docs/theme#spacing</p>
+    <div className='bg-white p-5 rounded-md'>
+      <h2 className="text-4xl font-bold text-black tracking-tight">Spacing</h2>
+      <p className='mb-5 font-semibold'>All the spacing used by default tailwind classes <a href="https://tailwindcss.com/docs/spacing">https://tailwindcss.com/docs/spacing</a></p>
+      <hr className="h-px my-4 bg-gray-400 border-0" />
 
-      <div className="w-[843px] h-[1331px] relative bg-white">
+      <div className="w-[843px] h-[1331px] relative bg-white rounded-xl shadow-lg">
         <div className="w-px h-4 left-[257px] top-[50px] absolute bg-blue-500 rounded-[50px]" />
         <div className="w-0.5 h-4 left-[257px] top-[88px] absolute bg-blue-500 rounded-[50px]" />
         <div className="w-1 h-4 left-[257px] top-[126px] absolute bg-blue-500 rounded-[50px]" />
diff --git a/packages/forms/src/stories/Input.stories.tsx b/packages/forms/src/stories/Input.stories.tsx
index b24c60e..9bea92f 100644
--- a/packages/forms/src/stories/Input.stories.tsx
+++ b/packages/forms/src/stories/Input.stories.tsx
@@ -140,32 +140,3 @@ export const LeftRightSection: Story = {
     rightSection: <HiOutlineCreditCard></HiOutlineCreditCard>
   }
 }
-
-
-
-export const Variants = (args: ToggleProps) => (
-  <>
-
-    <Title
-      title="Forms"
-      description="Forms"
-    />
-
-    <div className="mb-10">
-      <Text type='paragraph' size={2}>Default</Text>
-      <Input variant='default'  {...args}></Input>
-    </div>
-    <div className="mb-10">
-      <Text type='paragraph' size={2}>Error</Text>
-      <Input variant='error' {...args}></Input>
-    </div>
-    <div className="mb-10">
-      <Text type='paragraph' size={2}>Warning</Text>
-      <Input variant='warning' {...args}></Input>
-    </div>
-    <div className="mb-10">
-      <Text type='paragraph' size={2}>Success</Text>
-      <Input variant='success' {...args}></Input>
-    </div>
-  </>
-)
\ No newline at end of file