feat: introduce new select field based on shadcn implementation with …

…custom interfaces (#134) * wip: add select field story from shadcn * refactor: extract select field story values to separate file to hide in UI * feat: implement custom select component based on shadcn implementation
uzh-bf · Oct 5, 2024 · 808b052 · 808b052
1 parent effdd6c
commit 808b052
Show file tree

Hide file tree

Showing 9 changed files with 250 additions and 291 deletions.
diff --git a/packages/design-system/.ladle/head.html b/packages/design-system/.ladle/head.html
@@ -38,7 +38,7 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-    --radius: 0.3rem;
+    --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;

diff --git a/packages/design-system/src/Select.stories.tsx b/packages/design-system/src/Select.stories.tsx
@@ -1,69 +1,6 @@
 import { useState } from 'react'
 import Select from './Select'
-
-export const fruitsValues = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'pear', label: 'Pear' },
-  { value: 'watermelon', label: 'Watermelon' },
-  { value: 'peach', label: 'Peach' },
-  { value: 'mango', label: 'Mango' },
-]
-export const vegetablesValues = [
-  { value: 'carrot', label: 'Carrot' },
-  { value: 'cucumber', label: 'Cucumber' },
-  { value: 'onion', label: 'Onion' },
-  { value: 'potato', label: 'Potato' },
-  { value: 'tomato', label: 'Tomato' },
-  { value: 'broccoli', label: 'Broccoli' },
-]
-export const transportValues = [
-  { value: 'car', label: 'Car' },
-  { value: 'bike', label: 'Bike' },
-  { value: 'train', label: 'Train' },
-  { value: 'plane', label: 'Plane' },
-  { value: 'boat', label: 'Boat' },
-  { value: 'bus', label: 'Bus' },
-]
-export const programmingValues = [
-  { value: 'javascript', label: 'JavaScript' },
-  { value: 'typescript', label: 'TypeScript' },
-  { value: 'python', label: 'Python' },
-  { value: 'ruby', label: 'Ruby' },
-  { value: 'java', label: 'Java' },
-  { value: 'csharp', label: 'C#' },
-]
-
-export const programmingValuesDisabled = [
-  { value: 'javascript', label: 'JavaScript (disabled)', disabled: true },
-  { value: 'typescript', label: 'TypeScript' },
-  { value: 'python', label: 'Python (disabled)', disabled: true },
-  { value: 'ruby', label: 'Ruby' },
-  { value: 'java', label: 'Java (disabled)' },
-  { value: 'csharp', label: 'C#' },
-]
-
-export const groupValues = [
-  { items: fruitsValues },
-  { items: vegetablesValues, showSeparator: true },
-  { items: transportValues, showSeparator: true, label: 'Transport' },
-  {
-    items: programmingValues,
-    showSeparator: true,
-    label: 'Programming Languages',
-  },
-]
-
-export const groupValuesDisabled = [
-  { items: fruitsValues },
-  { items: vegetablesValues, showSeparator: true },
-  { items: transportValues, showSeparator: true, label: 'Transport' },
-  {
-    items: programmingValuesDisabled,
-    showSeparator: true,
-    label: 'Programming Languages',
-  },
-]
+import { fruitsValues, groupValues } from './values'
 
 export const Default = () => {
   return (
@@ -212,9 +149,8 @@ export const Styled = () => {
         className={{
           root: 'h-full rounded-none border-none',
           content: 'bg-green-200',
-          trigger: 'rounded-none border-none bg-uzh-blue-20',
+          trigger: 'rounded-none border-none bg-uzh-blue-20 text-lg',
           item: 'text-red-700',
-          scrollButton: 'bg-blue-400',
           groupLabel: 'text-red-700',
           separator: 'bg-green-700',
         }}
@@ -223,17 +159,6 @@ export const Styled = () => {
   )
 }
 
-export const Small = () => {
-  return (
-    <Select
-      placeholder="Select an item"
-      groups={groupValues}
-      onChange={(newValue) => console.log(newValue)}
-      size="sm"
-    />
-  )
-}
-
 export const CustomTriggerLabel = () => {
   const items = [
     { value: 'apple', label: 'Apple long label', shortLabel: 'Apple' },