Add missing controls

storybookjs · May 17, 2024 · abdf1ae · abdf1ae
1 parent a44062e
commit abdf1ae
Show file tree

Hide file tree

Showing 2 changed files with 212 additions and 176 deletions.
diff --git a/apps/frontpage/components/home/hero/manager/controls.tsx b/apps/frontpage/components/home/hero/manager/controls.tsx
@@ -1,28 +1,5 @@
 import { cn } from '@repo/utils';
-import type { FC } from 'react';
-
-const content = [
-  {
-    label: 'label',
-    description: 'Label of component',
-    default: 'Choose time frame',
-    control: 'Usage frequency',
-  },
-  {
-    label: 'startTime',
-    description: 'Start time in 24h notation',
-    default: 'undefined',
-    control: 'Edit string',
-    muted: true,
-  },
-  {
-    label: 'endTime',
-    description: 'End time in 24h notation',
-    default: 'undefined',
-    control: 'Edit string',
-    muted: true,
-  },
-];
+import type { FC, ReactNode } from 'react';
 
 export const Controls: FC<{ isPanel?: boolean }> = ({ isPanel = false }) => {
   return (
@@ -35,31 +12,222 @@ export const Controls: FC<{ isPanel?: boolean }> = ({ isPanel = false }) => {
       >
         Props
       </div>
-      {content.map((item) => (
-        <div className="flex border-b border-b-[#D9E0E6]" key={item.label}>
-          <div className="text-[13px] w-1/2 md:w-[28%] lg:w-[22%] pl-4 py-2">
-            {item.label}
-          </div>
-          <div className="text-[13px] w-[38%] lg:w-[28%] hidden md:block py-2">
-            {item.description}
+      <Line
+        control={<Input value="Generate" />}
+        description="Button label"
+        isPanel={isPanel}
+        label="buttonLabel"
+        required
+      />
+      <Line
+        control={<Input value="What should I make?" />}
+        description="Placeholder text"
+        isPanel={isPanel}
+        label="placeholder"
+        required
+      />
+      <Line
+        control={<Boolean value />}
+        description="Disable the component"
+        isPanel={isPanel}
+        label="disabled"
+      />
+      <Line
+        control={<Color value="#222448" />}
+        description="Primary color of the component"
+        isPanel={isPanel}
+        label="primaryColor"
+      />
+      <Line
+        control={<Range value={0.6} />}
+        isPanel={isPanel}
+        label="playfulness"
+      />
+      <Line
+        control={<Radio />}
+        defaultValue="medium"
+        description="Size of the prompt"
+        isPanel={isPanel}
+        label="size"
+      />
+    </div>
+  );
+};
+
+const Line = ({
+  label,
+  control,
+  required = false,
+  description,
+  defaultValue,
+  isPanel = false,
+}: {
+  label: ReactNode;
+  control: ReactNode;
+  required?: boolean;
+  description?: string;
+  defaultValue?: ReactNode;
+  isPanel: boolean;
+}) => {
+  return (
+    <div className="flex border-b border-b-[#D9E0E6] py-3">
+      <div
+        className={cn(
+          'text-[13px] pl-4 flex-shrink-0 flex items-center',
+          isPanel && 'w-1/2',
+          !isPanel && 'w-1/2 md:w-1/4',
+        )}
+      >
+        {label}
+        {required ? <span className="text-red-500">*</span> : null}
+      </div>
+      {!isPanel && (
+        <>
+          <div className="text-[13px] w-[38%] md:w-1/4 hidden md:block py-2">
+            {description}
           </div>
-          <div className="text-[13px] w-[25%] hidden lg:flex py-2">
-            <div className="bg-[#F6F9FC] border border-[#D9E0E6] h-5 px-1.5 rounded flex items-center">
-              {item.default}
-            </div>
+          <div className="text-[13px] w-1/4 hidden lg:flex py-2">
+            {defaultValue ? (
+              <div className="bg-[#F6F9FC] border border-[#D9E0E6] h-5 px-1.5 rounded flex items-center">
+                {defaultValue}
+              </div>
+            ) : (
+              '-'
+            )}
           </div>
-          <div className="text-[13px] w-1/2 md:w-1/3 lg:w-[25%] flex py-2 pr-4">
+        </>
+      )}
+      <div
+        className={cn(
+          'text-[13px] w-1/2 md:w-1/2 flex pr-4',
+          isPanel && 'w-1/2',
+          !isPanel && 'w-1/2 md:w-1/4',
+        )}
+      >
+        {control}
+      </div>
+    </div>
+  );
+};
+
+const Input = ({
+  value,
+  muted = false,
+}: {
+  value: string;
+  muted?: boolean;
+}) => {
+  return (
+    <div
+      className={cn(
+        'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2',
+        muted && 'text-[#73828C]',
+      )}
+    >
+      {value}
+    </div>
+  );
+};
+
+const Boolean = ({ value }: { value: boolean }) => {
+  return (
+    <div className="relative flex items-center h-8 px-0.5 rounded-full bg-slate-200">
+      <div className="relative z-10 flex items-center justify-center h-full w-14">
+        False
+      </div>
+      <div className="relative z-10 flex items-center justify-center h-full w-14">
+        True
+      </div>
+      <div
+        className={cn(
+          'absolute bg-white rounded-full w-14 h-7',
+          value && 'left-[58px]',
+          !value && 'left-0',
+        )}
+      />
+    </div>
+  );
+};
+
+const Color = ({
+  value,
+  muted = false,
+}: {
+  value: string;
+  muted?: boolean;
+}) => {
+  return (
+    <div
+      className={cn(
+        'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2 justify-between',
+        muted && 'text-[#73828C]',
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <div
+          className="w-4 h-4 rounded border border-[#D9E0E6]"
+          style={{ backgroundColor: value }}
+        />
+        {value}
+      </div>
+      <svg
+        fill="none"
+        height="12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#a)" fill="#73828C">
+          <path d="M7.7 1.399a.429.429 0 0 0-.828-.226l-2.571 9.429a.429.429 0 0 0 .827.225L7.699 1.4ZM2.846 3.1a.429.429 0 0 1 .055.603L.986 6l1.915 2.297a.429.429 0 0 1-.659.549L.1 6.274a.429.429 0 0 1 0-.548l2.143-2.572a.429.429 0 0 1 .604-.055ZM9.154 3.1a.429.429 0 0 0-.055.603L11.014 6 9.099 8.297a.429.429 0 0 0 .659.549L11.9 6.274a.429.429 0 0 0 0-.548L9.758 3.154a.429.429 0 0 0-.604-.055Z" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path d="M0 0h12v12H0z" fill="#fff" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+const Range = ({ value }: { value: number }) => {
+  return (
+    <div className={cn('w-full flex items-center gap-2')}>
+      <div>0</div>
+      <div className="relative flex items-center w-full h-1.5 px-2 bg-white border rounded border-[#D9E0E6]">
+        <div
+          className="absolute z-20 w-4 h-4 -ml-2 bg-white border rounded-full shadow-md border-[#D9E0E6]"
+          style={{ left: `${value * 100}%` }}
+        />
+        <div
+          className="absolute left-0 z-10 h-full bg-blue-500 rounded-full"
+          style={{ width: `${value * 100}%` }}
+        />
+      </div>
+      <div>100</div>
+    </div>
+  );
+};
+
+const Radio = () => {
+  return (
+    <div className={cn('w-full flex flex-col gap-2')}>
+      {[{ label: 'small' }, { label: 'medium' }, { label: 'large' }].map(
+        (item) => (
+          <div className="flex items-center gap-2" key={item.label}>
             <div
               className={cn(
-                'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2',
-                item.muted && 'text-[#73828C]',
+                'w-4 h-4 border rounded-full border-[#D9E0E6] flex items-center justify-center',
+                item.label === 'medium' && 'border border-blue-500',
               )}
             >
-              {item.control}
+              {item.label === 'medium' && (
+                <div className="w-3 h-3 bg-blue-500 rounded-full" />
+              )}
             </div>
+            {item.label}
           </div>
-        </div>
-      ))}
+        ),
+      )}
     </div>
   );
 };