You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
670 lines
15 KiB
670 lines
15 KiB
import Button from "../components/Button"; |
|
import Tag from "../components/Tag"; |
|
import Counter from "../components/Counter"; |
|
import Input from "../components/Input"; |
|
import Search from "../components/Search"; |
|
import SearchWidthSuggest from "../components/search-with-suggest"; |
|
import Radio from "../components/Radio"; |
|
import Checkbox from "../components/Checkbox"; |
|
import SelectRadio from "../components/SelectRadio"; |
|
import SelectCheckbox from "../components/SelectCheckbox"; |
|
import Switch from "../components/Switch"; |
|
import VerticalExpandableProductFilter from "../components/VerticalExpandableProductFilter"; |
|
import SidebarCategoryHover from "../components/SidebarCategoryHover"; |
|
import Slider from "../components/Slider"; |
|
import Range from "../components/Range"; |
|
import Alert from "../components/Alert"; |
|
import Toast from "../components/Toast"; |
|
import StarRating from "../components/StarRating"; |
|
import Chart from "../components/Recharts"; |
|
import CircularProgressbar from "../components/CircularProgressbar"; |
|
import Stepper from "../components/Stepper"; |
|
import Product from "../components/Product"; |
|
import Navbar from "../components/Navbar"; |
|
import SimpleCalendar from "../components/Calendar"; |
|
import Footer from "../components/Footer"; |
|
import SimpleDatePicker from "../components/SimpleDatePicker"; |
|
import RangeDatePicker from "../components/RangeDatePicker"; |
|
import Comments from "../components/Comments"; |
|
import Feedback from "../components/Feedback"; |
|
import Features from "../components/Features"; |
|
import Blogs from "../components/Blogs"; |
|
import ProductSuggestion from "../components/ProductSuggestion"; |
|
import PanelSidebar from "../components/SidebarMenu"; |
|
import Advertisement from "../components/Advertisement"; |
|
import CourseChapter from "../components/CourseChapter"; |
|
import Design2D from "../components/Design2D"; |
|
import ProductStatusCard from "../components/ProductStatusCard"; |
|
import VodProductNew from "../components/VodProductNew"; |
|
import AddToCartCard from "../components/AddToCart"; |
|
import ProductDescription from "../components/ProductDescription"; |
|
import QandA from "../components/QandA"; |
|
import Banners from "../components/Banners"; |
|
|
|
const components = [ |
|
{ |
|
name: "Button", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Button", |
|
component: <Button buttonBgColor="bg-blue-500" />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Tag", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Tag", |
|
component: <Tag />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Input", |
|
author: "Ashrafi", |
|
props: [ |
|
{ |
|
name: "maxLength", |
|
type: "string", |
|
required: "false", |
|
description: "بیشترین تعداد کاراکتری که میتوان استفاده کرد.", |
|
defaultValue: "", |
|
}, |
|
{ |
|
name: "lang", |
|
type: "string", |
|
required: "false", |
|
description: "زبان سایت", |
|
defaultValue: "fa", |
|
}, |
|
{ |
|
name: "inputMode", |
|
type: "string", |
|
required: "false", |
|
description: "با تعیین این مقدار نوع کیبرد مشخص میشود.", |
|
defaultValue: "text", |
|
}, |
|
{ |
|
name: "label", |
|
type: "string", |
|
required: "false", |
|
description: "", |
|
defaultValue: "label", |
|
}, |
|
], |
|
content: { |
|
name: "Input", |
|
component: <Input />, |
|
code: `import React, { useState } from "react"; |
|
import _ from "lodash"; |
|
import "./index.scss"; |
|
|
|
import tick from "./tick.png"; |
|
import danger from "./danger.png"; |
|
|
|
const langDetector = (lang, option1, option2) => { |
|
return lang === "fa" ? option1 : option2; |
|
}; |
|
|
|
const inputStatusHandler = (value, focus, status, primary, success, danger) => { |
|
if (!focus) { |
|
return ""; |
|
} else { |
|
if (!value) { |
|
return primary; |
|
} else { |
|
if (status) { |
|
return success; |
|
} else { |
|
return danger; |
|
} |
|
} |
|
} |
|
}; |
|
|
|
export default function Input(props) { |
|
const [value, setValue] = useState(""); |
|
const [focusToggle, setFocusToggle] = useState(false); |
|
|
|
const { lang, theme, inputMode, label, status, maxLength, message } = props; |
|
|
|
const onChange = (val) => { |
|
setValue(val); |
|
}; |
|
|
|
return ( |
|
<div |
|
className={_.join( |
|
["input flex flex-col relative my-2", langDetector(lang, "fa", "en")], |
|
" " |
|
)} |
|
> |
|
<label |
|
className={_.join( |
|
[ |
|
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300", |
|
langDetector(lang, "right-2", "left-2"), |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"input__labelFocus", |
|
"input__labelSuccess", |
|
"input__labelDanger" |
|
), |
|
], |
|
" " |
|
)} |
|
onClick={() => setFocusToggle(true)} |
|
> |
|
{label} |
|
</label> |
|
<input |
|
type="text" |
|
inputMode={inputMode} |
|
className={_.join( |
|
[ |
|
"flex-1 border rounded-md outline-none p-2", |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"input__inputActive", |
|
"input__inputSuccess", |
|
"input__inputDanger" |
|
), |
|
"transition", |
|
], |
|
" " |
|
)} |
|
onChange={(e) => onChange(e.target.value)} |
|
value={value} |
|
onFocus={() => setFocusToggle(true)} |
|
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} |
|
maxLength={maxLength} |
|
/> |
|
{!status && value && ( |
|
<img |
|
src={danger} |
|
alt={langDetector(lang, "اشتباه", "wrong")} |
|
className={_.join( |
|
[ |
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
|
langDetector(lang, "left-2", "right-2"), |
|
], |
|
" " |
|
)} |
|
/> |
|
)} |
|
{status && value && ( |
|
<img |
|
src={tick} |
|
alt={langDetector(lang, "درست", "right")} |
|
className={_.join( |
|
[ |
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
|
langDetector(lang, "left-2", "right-2"), |
|
], |
|
" " |
|
)} |
|
/> |
|
)} |
|
|
|
{value && !status && ( |
|
<span |
|
className={_.join( |
|
[ |
|
"input__message text-xs absolute -bottom-5", |
|
langDetector(lang, "right-2", "left-2"), |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"", |
|
"input__messageSuccess", |
|
"input__messageDanger" |
|
), |
|
"transition", |
|
], |
|
" " |
|
)} |
|
> |
|
{message} |
|
</span> |
|
)} |
|
{value && ( |
|
<span |
|
className={_.join( |
|
[ |
|
"input__length absolute -bottom-5 text-xs", |
|
langDetector(lang, "left-2", "right-2"), |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"", |
|
"input__lengthSuccess", |
|
"input__lengthDanger" |
|
), |
|
"transition", |
|
], |
|
" " |
|
)} |
|
> |
|
{value.length + "/" + maxLength} |
|
</span> |
|
)} |
|
</div> |
|
); |
|
} |
|
|
|
Input.defaultProps = { |
|
lang : 'fa', |
|
inputMode : 'string', |
|
label : '', |
|
status : '', |
|
maxLength : '', |
|
message : '', |
|
}`, |
|
}, |
|
}, |
|
{ |
|
name: "Search", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Search", |
|
component: <Search />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Search with suggestion", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Search with suggestion", |
|
component: <SearchWidthSuggest />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Radio", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Radio", |
|
component: <Radio />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Checkbox", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Checkbox", |
|
component: <Checkbox />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Select box - Radio", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Select box - Radio", |
|
component: <SelectRadio />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Select box - Checkbox", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Select box - Checkbox", |
|
component: <SelectCheckbox />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Switch", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Switch", |
|
component: <Switch />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Expandable products filter", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Expandable products filter", |
|
component: <VerticalExpandableProductFilter />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Sidebar catergory", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Sidebar category", |
|
component: <SidebarCategoryHover />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Slider", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Slider", |
|
component: <Slider />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Range", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Range", |
|
component: <Range />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Counter", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Counter", |
|
component: <Counter />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Alert", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Alert", |
|
component: <Alert />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Toast", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Toast", |
|
component: <Toast />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Star rating", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Star rating", |
|
component: <StarRating />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Chart", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Chart", |
|
component: <Chart />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Circular progressbar", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Circular progressbar", |
|
component: <CircularProgressbar />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Stepper", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Stepper", |
|
component: <Stepper />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Product", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Product", |
|
component: <Product />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "SimpleCalendar", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "SimpleCalendar", |
|
component: <SimpleCalendar />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Navbar", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Navbar", |
|
component: <Navbar />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Footer", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Footer", |
|
component: <Footer />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "SimpleDatePicker", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "SimpleDatePicker", |
|
component: <SimpleDatePicker />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "RangeDatePicker", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "RangeDatePicker", |
|
component: ( |
|
<div className="flex items-center justify-center w-full my-2"> |
|
<RangeDatePicker /> |
|
</div> |
|
), |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Comments", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Comments", |
|
component: <Comments />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Feedback", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Feedback", |
|
component: <Feedback />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Features", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Features", |
|
component: <Features />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Blogs", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Blogs", |
|
component: <Blogs />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Product Suggestion", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Product Suggestion", |
|
component: <ProductSuggestion />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Panel Sidebar", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Panel Sidebar", |
|
component: <PanelSidebar />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Advertisements", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Advertisements", |
|
component: <Advertisement />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Course Chapter", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Course Chapter", |
|
component: <CourseChapter />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "2D Design", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "2D Design", |
|
component: <Design2D />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Product Status Card", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "Product Status Card", |
|
component: <ProductStatusCard />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "VOD Product", |
|
author: "Andalib", |
|
props: [], |
|
content: { |
|
name: "VOD Product", |
|
component: <VodProductNew />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "AddToCartCard", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "AddToCartCard OR Product Status Card", |
|
component: <AddToCartCard />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "ProductDescription", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "Product Description Table", |
|
component: <ProductDescription addToCart={<AddToCartCard />} />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "QandA", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "Question And Answer Container", |
|
component: <QandA />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Banners", |
|
author: "Keshavarzi", |
|
props: [], |
|
content: { |
|
name: "Banners Container", |
|
component: <Banners />, |
|
code: null, |
|
}, |
|
}, |
|
]; |
|
|
|
export default components;
|
|
|