From 9b14e53e1c89387a4cccdec8665deb11e1fac521 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Wed, 21 Aug 2024 11:28:41 +0600 Subject: [PATCH 01/16] Added: Select component added. --- app/docs/components/select/Select.mdx | 32 +++++ app/docs/components/select/index.tsx | 7 ++ app/docs/components/select/page.tsx | 21 ++++ .../select/variant/DefaultSelect.tsx | 56 +++++++++ .../select/variant/SelectWithActionIcon.tsx | 63 ++++++++++ .../select/variant/SelectWithItemIcon.tsx | 109 ++++++++++++++++++ app/docs/components/slider/page.tsx | 2 +- app/main.css | 2 +- app/src/components/Carousel/Viewport.tsx | 4 +- app/src/components/Select/SelectAction.tsx | 29 +++++ app/src/components/Select/SelectContent.tsx | 37 ++++++ app/src/components/Select/SelectDivider.tsx | 13 +++ app/src/components/Select/SelectItem.tsx | 39 +++++++ app/src/components/Select/SelectLabel.tsx | 17 +++ .../components/Select/SelectScrollButton.tsx | 40 +++++++ app/src/components/Select/index.tsx | 24 ++++ app/src/components/index.tsx | 1 + app/src/theme/keepTheme.ts | 11 ++ next.config.mjs | 5 + package.json | 1 + routes/routes.ts | 8 ++ 21 files changed, 517 insertions(+), 4 deletions(-) create mode 100644 app/docs/components/select/Select.mdx create mode 100644 app/docs/components/select/index.tsx create mode 100644 app/docs/components/select/page.tsx create mode 100644 app/docs/components/select/variant/DefaultSelect.tsx create mode 100644 app/docs/components/select/variant/SelectWithActionIcon.tsx create mode 100644 app/docs/components/select/variant/SelectWithItemIcon.tsx create mode 100644 app/src/components/Select/SelectAction.tsx create mode 100644 app/src/components/Select/SelectContent.tsx create mode 100644 app/src/components/Select/SelectDivider.tsx create mode 100644 app/src/components/Select/SelectItem.tsx create mode 100644 app/src/components/Select/SelectLabel.tsx create mode 100644 app/src/components/Select/SelectScrollButton.tsx create mode 100644 app/src/components/Select/index.tsx diff --git a/app/docs/components/select/Select.mdx b/app/docs/components/select/Select.mdx new file mode 100644 index 00000000..63ef79e5 --- /dev/null +++ b/app/docs/components/select/Select.mdx @@ -0,0 +1,32 @@ +import { DefaultSelect, DefaultSelectCode } from './variant/DefaultSelect' +import { SelectWithActionIcon, SelectWithActionIconCode } from './variant/SelectWithActionIcon' +import { SelectWithItemIcon, SelectWithItemIconCode } from './variant/SelectWithItemIcon' +import CodeHighlightPreview from '../../../components/CodeHighlightPreview' + +## Table of Contents + +The Select component is a versatile and user-friendly interface element that enables users to choose from a list of options presented in a dropdown menu. It can be customized with various features, such as icons and actions, to enhance the user experience. Whether used in forms, settings, or filtering options, the Select component provides a clean and efficient way to navigate and select items from a predefined list. With additional customization options like action icons or item-specific icons, it can be tailored to fit different use cases and design requirements. + +## Default Select + +A simple and basic select component for general use cases, allowing users to choose an option from a dropdown list. + + + + + +## Select With Action Icon + +An enhanced select component that includes an action icon, allowing users to perform additional actions directly within the dropdown. + + + + + +## Select With Item Icon + +A select component where each item includes an icon, providing a more visual representation of the options available in the dropdown. + + + + diff --git a/app/docs/components/select/index.tsx b/app/docs/components/select/index.tsx new file mode 100644 index 00000000..5a00a2f3 --- /dev/null +++ b/app/docs/components/select/index.tsx @@ -0,0 +1,7 @@ +'use client' +import type { FC } from 'react' +import SelectDocsContent from './Select.mdx' + +const SelectDocs: FC = () => + +export default SelectDocs diff --git a/app/docs/components/select/page.tsx b/app/docs/components/select/page.tsx new file mode 100644 index 00000000..9bd9038e --- /dev/null +++ b/app/docs/components/select/page.tsx @@ -0,0 +1,21 @@ +import type { Metadata, NextPage } from 'next' +import SelectDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' +import EditPage from '../../../components/EditPage' + +export const metadata: Metadata = { + description: + 'The Select component is a versatile and user-friendly interface element that enables users to choose from a list of options presented in a dropdown menu. It can be customized with various features, such as icons and actions, to enhance the user experience.', + title: 'Select - Keep React', +} + +const page: NextPage = () => { + return ( + + + + + ) +} + +export default page diff --git a/app/docs/components/select/variant/DefaultSelect.tsx b/app/docs/components/select/variant/DefaultSelect.tsx new file mode 100644 index 00000000..69bbbdc4 --- /dev/null +++ b/app/docs/components/select/variant/DefaultSelect.tsx @@ -0,0 +1,56 @@ +import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from '../../../../src' + +const DefaultSelect = () => { + return ( +
+ +
+ ) +} + +const DefaultSelectCode = { + 'SelectComponent.tsx': ` +import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from 'keep-react' + +export const SelectComponent = () => { + return ( + + ) +} + +`, +} + +export { DefaultSelect, DefaultSelectCode } diff --git a/app/docs/components/select/variant/SelectWithActionIcon.tsx b/app/docs/components/select/variant/SelectWithActionIcon.tsx new file mode 100644 index 00000000..dba1b82a --- /dev/null +++ b/app/docs/components/select/variant/SelectWithActionIcon.tsx @@ -0,0 +1,63 @@ +'use client' +import { User } from 'phosphor-react' +import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from '../../../../src' + +const SelectWithActionIcon = () => { + return ( +
+ +
+ ) +} + +const SelectWithActionIconCode = { + 'SelectComponent.tsx': ` +'use client' +import { User } from 'phosphor-react' +import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from 'keep-react' + +export const SelectComponent = () => { + return ( + + ) +} +`, +} + +export { SelectWithActionIcon, SelectWithActionIconCode } diff --git a/app/docs/components/select/variant/SelectWithItemIcon.tsx b/app/docs/components/select/variant/SelectWithItemIcon.tsx new file mode 100644 index 00000000..8697fc4f --- /dev/null +++ b/app/docs/components/select/variant/SelectWithItemIcon.tsx @@ -0,0 +1,109 @@ +'use client' +import { Envelope } from 'phosphor-react' +import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from '../../../../src' + +const SelectWithItemIcon = () => { + return ( +
+ +
+ ) +} + +const SelectWithItemIconCode = { + 'SelectComponent.tsx': ` +'use client' +import { Envelope } from 'phosphor-react' +import { Select, SelectAction, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectValue } from 'keep-react' + +export const SelectComponent = () => { + return ( + + ) +} +`, +} + +export { SelectWithItemIcon, SelectWithItemIconCode } diff --git a/app/docs/components/slider/page.tsx b/app/docs/components/slider/page.tsx index f8472cb4..42651e45 100644 --- a/app/docs/components/slider/page.tsx +++ b/app/docs/components/slider/page.tsx @@ -13,7 +13,7 @@ const page: NextPage = () => { return ( - + ) } diff --git a/app/main.css b/app/main.css index c944086e..5ab08a05 100644 --- a/app/main.css +++ b/app/main.css @@ -3,7 +3,7 @@ html { } .ReactCollapse--collapse { - transition: height 300ms; + transition: height 300ms ease-in-out; } input[type='number']::-webkit-inner-spin-button, diff --git a/app/src/components/Carousel/Viewport.tsx b/app/src/components/Carousel/Viewport.tsx index 84fa4122..08351afc 100644 --- a/app/src/components/Carousel/Viewport.tsx +++ b/app/src/components/Carousel/Viewport.tsx @@ -5,12 +5,12 @@ import { useCarouselContext } from './CarouselContext' import { carouselTheme } from './theme' export const CarouselViewport = forwardRef>( - ({ children }, ref: Ref) => { + ({ children, className }, ref: Ref) => { const theme = carouselTheme const { emblaRef } = useCarouselContext() return ( -
+
{children}
) diff --git a/app/src/components/Select/SelectAction.tsx b/app/src/components/Select/SelectAction.tsx new file mode 100644 index 00000000..13025e64 --- /dev/null +++ b/app/src/components/Select/SelectAction.tsx @@ -0,0 +1,29 @@ +'use client' +import { Icon, Trigger } from '@radix-ui/react-select' +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' +import { cn } from '../../utils/cn' + +const SelectAction = forwardRef, ComponentPropsWithoutRef>( + ({ className, children, ...props }, ref) => ( + + {children} + + + + + + + ), +) +SelectAction.displayName = Trigger.displayName + +export { SelectAction } diff --git a/app/src/components/Select/SelectContent.tsx b/app/src/components/Select/SelectContent.tsx new file mode 100644 index 00000000..cd3f8f33 --- /dev/null +++ b/app/src/components/Select/SelectContent.tsx @@ -0,0 +1,37 @@ +'use client' +import { Content, Portal, Viewport } from '@radix-ui/react-select' +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' +import { cn } from '../../utils/cn' +import { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton' + +const SelectContent = forwardRef, ComponentPropsWithoutRef>( + ({ className, children, position = 'popper', ...props }, ref) => ( + + + + + {children} + + + + + ), +) +SelectContent.displayName = Content.displayName + +export { SelectContent } diff --git a/app/src/components/Select/SelectDivider.tsx b/app/src/components/Select/SelectDivider.tsx new file mode 100644 index 00000000..c190ba12 --- /dev/null +++ b/app/src/components/Select/SelectDivider.tsx @@ -0,0 +1,13 @@ +'use client' +import { Separator } from '@radix-ui/react-select' +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' +import { cn } from '../../utils/cn' + +const SelectDivider = forwardRef, ComponentPropsWithoutRef>( + ({ className, ...props }, ref) => ( + + ), +) +SelectDivider.displayName = Separator.displayName + +export { SelectDivider } diff --git a/app/src/components/Select/SelectItem.tsx b/app/src/components/Select/SelectItem.tsx new file mode 100644 index 00000000..633cfd99 --- /dev/null +++ b/app/src/components/Select/SelectItem.tsx @@ -0,0 +1,39 @@ +'use client' +import { Item, ItemIndicator, ItemText } from '@radix-ui/react-select' +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' +import { cn } from '../../utils/cn' + +type SelectItemProps = ComponentPropsWithoutRef & { + showCheckIcon?: boolean +} + +const SelectItem = forwardRef, SelectItemProps>( + ({ className, children, showCheckIcon = true, ...props }, ref) => ( + + {children} + + + + + + + + + ), +) +SelectItem.displayName = Item.displayName + +export { SelectItem } diff --git a/app/src/components/Select/SelectLabel.tsx b/app/src/components/Select/SelectLabel.tsx new file mode 100644 index 00000000..c2eafc1d --- /dev/null +++ b/app/src/components/Select/SelectLabel.tsx @@ -0,0 +1,17 @@ +'use client' +import { Label } from '@radix-ui/react-select' +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' +import { cn } from '../../utils/cn' + +const SelectLabel = forwardRef, ComponentPropsWithoutRef>( + ({ className, ...props }, ref) => ( +