Skip to content

Commit e38e9e5

Browse files
LiorAtiyaLiorAtiya
authored
Merge pull request #54 from LiorAtiya/shadcn-and-tailwind
Shadcn with tailwind
2 parents d0980c0 + 485b5a7 commit e38e9e5

File tree

4 files changed

+79
-50
lines changed

4 files changed

+79
-50
lines changed

‎packages/shadcn-ui/src/exports/Fields/FieldWrapper.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
11
import React from 'react';
2-
import { FormControl, FormHelperText, FormLabel, Tooltip, IconButton } from '@mui/material';
3-
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
2+
3+
import { Info } from "lucide-react"
4+
import { Button } from "../../components/ui/button"
5+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../components/ui/tooltip"
46

57
interface LabelProps {
68
label?: string;
79
tooltip?: string;
810
}
11+
912
export const Label: React.FC<LabelProps> = ({ label, tooltip }) => {
1013
return (
11-
<FormLabel component="legend">
12-
{label}
14+
<div className='text-gray-600'>
15+
{label} *
1316
{tooltip && (
14-
<Tooltip title={tooltip || ''} arrow>
15-
<IconButton size="small" edge="end">
16-
<InfoOutlinedIcon fontSize="small" />
17-
</IconButton>
18-
</Tooltip>
17+
18+
<TooltipProvider>
19+
<Tooltip>
20+
<TooltipTrigger asChild>
21+
<Button variant="outline" className="w-6 h-6 p-0 ml-1 rounded-full">
22+
<Info className="w-4 h-4" />
23+
</Button>
24+
</TooltipTrigger>
25+
<TooltipContent>
26+
{tooltip || ''}
27+
</TooltipContent>
28+
</Tooltip>
29+
</TooltipProvider>
30+
1931
)}
20-
</FormLabel>
32+
</div>
2133
);
2234
};
2335

@@ -26,19 +38,19 @@ export const FieldWrapper: React.FC<{ fieldConfig: any; fieldState: any; childre
2638
fieldState,
2739
children,
2840
}) => {
29-
const { key, label, isRequired, isDisabled, tooltip, helperText } = fieldConfig;
41+
const { key, label, tooltip, helperText } = fieldConfig;
3042
const { error = { message: '' } } = fieldState || {};
3143
const showError = !!error.message;
3244

3345
return (
34-
<FormControl key={key} required={isRequired} disabled={isDisabled} component="fieldset" sx={{ width: '100%' }}>
46+
<div key={key} style={{ width: '100%' }}>
3547
<Label label={label} tooltip={tooltip} />
3648
{children}
3749
{showError ? (
38-
<FormHelperText error>{error.message}</FormHelperText>
50+
<div className='text-sm text-red-500'>{error.message}</div>
3951
) : (
40-
<FormHelperText>{helperText}</FormHelperText>
52+
<div className='text-sm text-gray-400'>{helperText}</div>
4153
)}
42-
</FormControl>
54+
</div>
4355
);
4456
};

‎packages/shadcn-ui/src/exports/Fields/TextField.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22
import { Field } from '@tutim/types';
3-
import { TextField as MuiTextField } from '@mui/material';
43
import { FieldWrapper } from './FieldWrapper';
4+
import { Input } from "../../components/ui/input"
5+
6+
import { FieldCollapse } from '../Forms/Collapse';
57

68
export const TextField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
79
const { key, isRequired, isDisabled, placeholder } = fieldConfig;
@@ -12,18 +14,25 @@ export const TextField: Field = ({ fieldConfig, inputProps: { value, onChange },
1214

1315
return (
1416
<FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
15-
<MuiTextField
17+
<Input
1618
onChange={onInputChange}
1719
value={value || ''}
18-
InputLabelProps={{ shrink: true }}
19-
InputProps={{
20-
placeholder: placeholder,
21-
}}
22-
fullWidth
23-
size="small"
20+
placeholder={placeholder}
2421
key={key}
2522
required={isRequired}
2623
disabled={isDisabled}
24+
className='mt-2 mb-1'
25+
/>
26+
27+
<FieldCollapse
28+
key={1}
29+
error={'error'}
30+
title={
31+
<>
32+
<span style={{ fontSize: '20px' }}>testttt</span>
33+
34+
</>
35+
}
2736
/>
2837
</FieldWrapper>
2938
);

‎packages/shadcn-ui/src/exports/Forms/Collapse.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,48 @@
11
import { useState } from 'react';
2-
import Card from '@mui/material/Card';
3-
import CardHeader from '@mui/material/CardHeader';
4-
import CardContent from '@mui/material/CardContent';
5-
import IconButton from '@mui/material/IconButton';
6-
import Collapse from '@mui/material/Collapse';
7-
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
8-
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
9-
import FormHelperText from '@mui/material/FormHelperText/FormHelperText';
2+
import {
3+
Card,
4+
CardHeader,
5+
CardTitle,
6+
CardContent,
7+
} from '../../components/ui/card'
8+
9+
import {
10+
Collapsible,
11+
CollapsibleContent,
12+
CollapsibleTrigger
13+
} from '../../components/ui/collapsible'
14+
15+
import { LucideArrowUpCircle, LucideArrowDownCircle } from "lucide-react"
16+
import { Button } from '../../components/ui/button';
1017

1118
export function FieldCollapse({ children, error, title }) {
1219
const [open, setOpen] = useState(true);
1320
const errorLength = Object.keys(error || {}).length;
1421

1522
const errorMessage = !!errorLength && (
16-
<FormHelperText error sx={{ px: 2 }}>
23+
<div className='px-2 text-sm text-red-500'>
1724
{errorLength === 1 ? `There is one error in this field` : `There are ${errorLength} errors in this field`}
18-
</FormHelperText>
25+
</div>
1926
);
2027

2128
return (
22-
<Card
23-
sx={{ border: error ? '1px solid #dc3d3d99' : '1px solid rgba(0, 0, 0, 0.1)', backgroundColor: 'transparent' }}
24-
>
25-
<CardHeader
26-
sx={{ padding: '8px 16px', cursor: 'pointer', fontWeight: 300 }}
27-
title={title ?? 'Field'}
28-
onClick={() => setOpen(!open)}
29-
action={
30-
<IconButton aria-label="expand" size="small">
31-
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
32-
</IconButton>
33-
}
34-
/>
35-
<Collapse in={open} timeout="auto">
36-
<CardContent>{children}</CardContent>
37-
</Collapse>
29+
<Card>
30+
<Collapsible open={open} onOpenChange={setOpen}>
31+
<div className="flex items-center justify-between" onClick={() => setOpen(!open)}>
32+
<CardHeader className='cursor-pointer'>
33+
<CardTitle>{title ?? 'Field'}</CardTitle>
34+
</CardHeader>
35+
<CollapsibleTrigger asChild>
36+
<Button variant="ghost" size="sm" className="p-0 w-9">
37+
{open ? <LucideArrowUpCircle className="w-5 h-5" /> : <LucideArrowDownCircle className="w-5 h-5" />}
38+
<span className="sr-only">Toggle</span>
39+
</Button>
40+
</CollapsibleTrigger>
41+
</div>
42+
<CollapsibleContent>
43+
<CardContent>{children}</CardContent>
44+
</CollapsibleContent>
45+
</Collapsible>
3846
{errorMessage}
3947
</Card>
4048
);

‎packages/shadcn-ui/tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const animate = require("tailwindcss-animate")
44
/** @type {import('tailwindcss').Config} */
55
module.exports = {
66
darkMode: ["class"],
7-
content: ["src/components/**/*.{ts,tsx}", "src/pages/**/*.{ts,tsx}"],
7+
content: ["src/components/**/*.{ts,tsx}", "src/pages/**/*.{ts,tsx}", "src/exports/**/*.{ts,tsx}"],
88
theme: {
99
container: {
1010
center: true,

0 commit comments

Comments
 (0)