Skip to content

Commit 46c8510

Browse files
juicycleffjuicycleff
committed
refactor: migrate from wakflo dependencies to local imports
feat(select): add SelectOption type and improve type safety fix(typography): disable eslint display-name rule chore: bump version to 0.0.3
1 parent 28b3ca3 commit 46c8510

8 files changed

Lines changed: 34 additions & 127 deletions

File tree

‎react/components/components-registry.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { FieldType } from '../core'
33

44
import ConditionField from './fields/base-conditions-field'
55
import CheckboxFieldComponent from './fields/checkbox-field'
6-
import CodeField from './fields/code-field'
7-
import CodeIDEField from './fields/code-ide-field'
86
import EnhancedConditionField from './fields/condition-field'
97
import CustomFieldComponent from './fields/custom-field'
108
import DateFieldComponent from './fields/date-field'
@@ -40,8 +38,6 @@ export class ComponentRegistry {
4038
this.register(FieldType.Custom, CustomFieldComponent)
4139
this.register('map', MapFieldComponent)
4240
this.register('keyvalue', MapFieldComponent)
43-
this.register('code-ide', CodeIDEField)
44-
this.register('code', CodeField)
4541
this.register('condition', ConditionField)
4642
this.register('enhanced_condition', EnhancedConditionField)
4743
}

‎react/components/fields/code-field.tsx‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎react/components/fields/code-ide-field.tsx‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎react/components/fields/multiselect-field.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EnhancedSelect } from '@/components/ui/enhanced-select'
1+
import { EnhancedSelect, SelectOption } from '@/components/ui/enhanced-select'
22
import {
33
FormControl,
44
FormDescription,
@@ -190,8 +190,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({ field, path }) => {
190190
}}
191191
searchable
192192
onChange={formField.onChange}
193-
required={field.required}
194-
renderValue={(value: any[], options: any[]) => {
193+
renderValue={(value: string | string[], options: SelectOption<string>[]) => {
195194
const selectedOption = options.find(
196195
option => option.value === value[0],
197196
)

‎react/components/fields/select-field.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EnhancedSelect } from '@/components/ui/enhanced-select'
1+
import { EnhancedSelect, SelectOption } from '@/components/ui/enhanced-select'
22
import {
33
FormControl,
44
FormDescription,
@@ -209,10 +209,9 @@ const SelectField: React.FC<SelectFieldProps> = ({ field, path }) => {
209209
}}
210210
searchable
211211
onChange={formField.onChange}
212-
required={field.required}
213-
renderValue={(value: any[], options: { value: any; label: any }[]) => {
212+
renderValue={(value: string | string[], options: SelectOption<string>[]) => {
214213
const selectedOption = options.find(
215-
(option: { value: any }) => option.value === value[0],
214+
(option: SelectOption<string>) => option.value === value[0],
216215
)
217216
return selectedOption ? (
218217
<div className="flex w-full items-center justify-between text-pyro-text-primary">
@@ -227,9 +226,9 @@ const SelectField: React.FC<SelectFieldProps> = ({ field, path }) => {
227226
<span>{field.placeholder || 'Select an option'}</span>
228227
)
229228
}}
230-
renderOption={(ops: { name: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined }) => (
229+
renderOption={(option: SelectOption<string>) => (
231230
<div>
232-
<Small className="font-medium">{ops.name}</Small>
231+
<Small className="font-medium">{option.label}</Small>
233232
</div>
234233
)}
235234
/>

‎react/components/ui/enhanced-select.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@
22

33
import * as React from "react"
44
import { Check, ChevronsUpDown, X } from "lucide-react"
5-
import { cn } from "@wakflo/design-system/lib/utils"
6-
import { radiusStyles, sizeStyles } from "@wakflo/design-system/lib/styles"
5+
import { cn } from "@/lib/utils"
6+
import { radiusStyles, sizeStyles } from "@/lib/styles"
77
import { cva, type VariantProps } from "class-variance-authority"
8-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@wakflo/design-system/components/ui/select"
9-
import { Badge } from "@wakflo/design-system/components/ui/badge"
10-
import { Button } from "@wakflo/design-system/components/ui/button"
11-
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@wakflo/design-system/components/ui/command"
12-
import { Popover, PopoverContent, PopoverTrigger } from "@wakflo/design-system/components/ui/popover"
13-
import { Label } from '@wakflo/design-system/components/ui/label'
14-
import { inputContainerColorStyles } from '@wakflo/design-system/components/ui/input'
8+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
9+
import { Badge } from "@/components/ui/badge"
10+
import { Button } from "@/components/ui/button"
11+
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
12+
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
13+
import { Label } from "@/components/ui/label"
1514

1615
const selectVariants = cva("w-full justify-between", {
1716
variants: {
@@ -22,7 +21,15 @@ const selectVariants = cva("w-full justify-between", {
2221
underlined: "bg-transparent border-0 border-input border-b-2 shadow-none rounded-none",
2322
faded: "border-2 border-input/25 bg-muted",
2423
},
25-
color: inputContainerColorStyles,
24+
color: {
25+
default: "bg-background border-input",
26+
primary: "bg-primary text-primary-foreground border-primary",
27+
secondary: "bg-secondary text-secondary-foreground border-secondary",
28+
destructive: "bg-destructive text-destructive-foreground border-destructive",
29+
info: "bg-info text-info-foreground border-info",
30+
success: "bg-success text-success-foreground border-success",
31+
warning: "bg-warning text-warning-foreground border-warning",
32+
},
2633
// size: {
2734
// xs: "h-6 text-xs",
2835
// sm: "h-8 text-sm",
@@ -100,8 +107,7 @@ export type SelectOption<T> = {
100107

101108
// Update the EnhancedSelectProps interface to include the label
102109
interface EnhancedSelectProps<T extends string = string>
103-
extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'color' | 'variant' | 'onChange'>,
104-
VariantProps<typeof selectVariants> {
110+
extends VariantProps<typeof selectVariants> {
105111
options: SelectOption<T>[]
106112
optionValue?: keyof SelectOption<T>
107113
optionLabel?: keyof SelectOption<T>
@@ -147,7 +153,6 @@ export const EnhancedSelect = React.forwardRef<HTMLButtonElement, EnhancedSelect
147153
value,
148154
onChange,
149155
disabled = false,
150-
loading = false,
151156
error,
152157
hint,
153158
multiple = false,
@@ -158,7 +163,6 @@ export const EnhancedSelect = React.forwardRef<HTMLButtonElement, EnhancedSelect
158163
contentClassName,
159164
itemClassName,
160165
size = "default",
161-
position = "item-aligned",
162166
variant = "default",
163167
radius = "md",
164168
maxHeight = 300,
@@ -172,7 +176,6 @@ export const EnhancedSelect = React.forwardRef<HTMLButtonElement, EnhancedSelect
172176
renderValue,
173177
label,
174178
labelClassName,
175-
...props
176179
},
177180
ref,
178181
) => {
@@ -315,24 +318,22 @@ export const EnhancedSelect = React.forwardRef<HTMLButtonElement, EnhancedSelect
315318
<div
316319
className={cn(
317320
'flex flex-1 items-center overflow-hidden',
318-
selectVariants({ variant, size, radius }),
321+
selectVariants({ variant, size: size, radius }),
319322
error && 'border-destructive',
320323
triggerClassName
321324
)}
322325
>
323326
{startContent}
324327
<Button
325328
ref={ref}
326-
{...props}
327329
id={id}
328-
variant={'light'}
329-
size={size}
330+
size='sm'
330331
disabled={disabled}
332+
variant="default"
331333
role="combobox"
332-
fullWidth
333334
aria-expanded={open}
334335
aria-haspopup="listbox"
335-
className={cn({
336+
className={cn('w-full', {
336337
'!rounded-l-none pl-1': !!startContent,
337338
})}
338339
onClick={() => {
@@ -455,7 +456,7 @@ export const EnhancedSelect = React.forwardRef<HTMLButtonElement, EnhancedSelect
455456
value={search}
456457
onValueChange={setSearch}
457458
className={cn(
458-
commandInputVariants({ size, variant, radius })
459+
commandInputVariants({ variant, radius })
459460
)}
460461
/>
461462
)}

‎react/components/ui/typography.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
/* eslint-disable react/display-name */
12
import React, { HTMLAttributes, forwardRef, memo } from "react";
23
import { cva, type VariantProps } from "class-variance-authority";
3-
import { cn } from "@wakflo/design-system/lib/utils";
4-
import { Box, BoxProps } from "./box"; // Import the Box component
4+
import { cn } from "@/lib/utils";
5+
import { Box, BoxProps } from './box';
56

67
/**
78
* Heading component for displaying titles and section headers

‎react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@xraph/smartform-react",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"description": "React library for rendering and validating SmartForms with shadcn components",
55
"main": "dist/index.cjs",
66
"module": "dist/index.mjs",

0 commit comments

Comments
 (0)