-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(phone-input): add phone input component
- Loading branch information
Showing
24 changed files
with
916 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| --- | ||
| title: Phone Input | ||
| description: This component provides phone number input based on the selected country. | ||
| component: true | ||
| links: | ||
| doc: https://catamphetamine.gitlab.io/react-phone-number-input | ||
| --- | ||
|
|
||
| <ComponentPreview | ||
| name="phone-input-demo" | ||
| className="[&_phone-input]:max-w-xs" | ||
| /> | ||
|
|
||
| ## About | ||
|
|
||
| The `PhoneInput` component is built on top of [React Phone Number Input](https://catamphetamine.gitlab.io/react-phone-number-input). | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs defaultValue="cli"> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="cli">CLI</TabsTrigger> | ||
| <TabsTrigger value="manual">Manual</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="cli"> | ||
|
|
||
| ```bash | ||
| npx shadcn-ui@latest add phone-input | ||
| ``` | ||
|
|
||
| </TabsContent> | ||
|
|
||
| <TabsContent value="manual"> | ||
|
|
||
| <Steps> | ||
|
|
||
| <Step>Copy and paste the following code into your project.</Step> | ||
|
|
||
| <ComponentSource name="phone-input" /> | ||
|
|
||
| <Step>Update the import paths to match your project setup.</Step> | ||
|
|
||
| </Steps> | ||
|
|
||
| </TabsContent> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| import { PhoneInput, type PhoneInputValue } from "@/components/ui/phone-input" | ||
| ``` | ||
|
|
||
| ```tsx | ||
| const [value, setValue] = React.useState<PhoneInputValue>() | ||
|
|
||
| return <PhoneInput value={value} onChange={setValue} /> | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Default | ||
|
|
||
| <ComponentPreview | ||
| name="phone-input-demo" | ||
| className="[&_phone-input]:max-w-xs" | ||
| /> | ||
|
|
||
| ### Setting default country | ||
|
|
||
| <ComponentPreview | ||
| name="phone-input-default" | ||
| className="[&_phone-input]:max-w-xs" | ||
| /> | ||
|
|
||
| ### Setting force international format | ||
|
|
||
| <ComponentPreview | ||
| name="phone-input-international" | ||
| className="[&_phone-input]:max-w-xs" | ||
| /> | ||
|
|
||
| ### Setting force national format | ||
|
|
||
| <ComponentPreview | ||
| name="phone-input-national" | ||
| className="[&_phone-input]:max-w-xs" | ||
| /> | ||
|
|
||
| ### Setting initial value format | ||
|
|
||
| <ComponentPreview | ||
| name="phone-input-initial" | ||
| className="[&_phone-input]:max-w-xs" | ||
| /> | ||
|
|
||
| ### Form | ||
|
|
||
| <ComponentPreview name="phone-input-form" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "name": "phone-input", | ||
| "dependencies": [ | ||
| "react-phone-number-input" | ||
| ], | ||
| "registryDependencies": [ | ||
| "button", | ||
| "command", | ||
| "input", | ||
| "popover" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "name": "phone-input.tsx", | ||
| "content": "import * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/default/ui/command\"\nimport { Input, InputProps } from \"@/registry/default/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport type PhoneInputValue = RPNInput.Value\n\ntype PhoneInputProps = React.ComponentProps<typeof RPNInput.default>\n\nconst PhoneInput = ({ className, ...props }: PhoneInputProps) => {\n return (\n <RPNInput.default\n placeholder={\"Enter a phone number\"}\n className={cn(\"flex\", className)}\n flagComponent={FlagComponent}\n inputComponent={InputComponent}\n countrySelectComponent={CountrySelect}\n {...props}\n />\n )\n}\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, ...props }, ref) => (\n <Input\n className={cn(\"rounded-s-none rounded-e-lg\", className)}\n {...props}\n ref={ref}\n />\n )\n)\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n disabled?: boolean\n value: RPNInput.Country\n onChange: (value: RPNInput.Country) => void\n options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n disabled,\n value,\n onChange,\n options,\n}: CountrySelectProps) => {\n const handleSelect = React.useCallback(\n (country: RPNInput.Country) => {\n onChange(country)\n },\n [onChange]\n )\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant={\"outline\"}\n className={cn(\"rounded-e-none rounded-s-lg pl-3 pr-1 flex gap-1\")}\n disabled={disabled}\n >\n <span className=\"flex items-center truncate\">\n <div className=\"bg-foreground/20 rounded-sm flex w-6 h-4\">\n {value && <FlagComponent country={value} countryName={value} />}\n </div>\n </span>\n <ChevronsUpDown className={`h-4 w-4 ${disabled ? \"hidden\" : \"\"}`} />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-[300px] p-0\">\n <Command>\n <CommandList>\n <CommandInput placeholder=\"Search country...\" />\n <CommandEmpty>No country found.</CommandEmpty>\n <CommandGroup>\n {options\n .filter((x) => x.value)\n .map((option) => (\n <CommandItem\n className={\"text-sm gap-2\"}\n key={option.value}\n onSelect={() => handleSelect(option.value)}\n >\n <FlagComponent\n country={option.value}\n countryName={option.label}\n />\n <span>{option.label}</span>\n <span className=\"text-foreground/50\">\n {`+${RPNInput.getCountryCallingCode(option.value)}`}\n </span>\n <Check\n className={`ml-auto h-4 w-4 ${\n option.value === value ? \"opacity-100\" : \"opacity-0\"\n }`}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n const Flag = flags[country]\n\n return (\n <span\n className={\"inline object-contain w-6 h-4 overflow-hidden rounded-sm\"}\n >\n {Flag && <Flag title={countryName} />}\n </span>\n )\n}\n\nexport { PhoneInput }\n" | ||
| } | ||
| ], | ||
| "type": "components:ui" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "name": "phone-input", | ||
| "dependencies": [ | ||
| "react-phone-number-input" | ||
| ], | ||
| "registryDependencies": [ | ||
| "button", | ||
| "command", | ||
| "input", | ||
| "popover" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "name": "phone-input.tsx", | ||
| "content": "import * as React from \"react\"\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport { Input, InputProps } from \"@/registry/new-york/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport type PhoneInputValue = RPNInput.Value\n\ntype PhoneInputProps = React.ComponentProps<typeof RPNInput.default>\n\nconst PhoneInput = ({ className, ...props }: PhoneInputProps) => {\n return (\n <RPNInput.default\n placeholder={\"Enter a phone number\"}\n className={cn(\"flex\", className)}\n flagComponent={FlagComponent}\n inputComponent={InputComponent}\n countrySelectComponent={CountrySelect}\n {...props}\n />\n )\n}\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, ...props }, ref) => (\n <Input\n className={cn(\"rounded-s-none rounded-e-lg\", className)}\n {...props}\n ref={ref}\n />\n )\n)\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n disabled?: boolean\n value: RPNInput.Country\n onChange: (value: RPNInput.Country) => void\n options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n disabled,\n value,\n onChange,\n options,\n}: CountrySelectProps) => {\n const handleSelect = React.useCallback(\n (country: RPNInput.Country) => {\n onChange(country)\n },\n [onChange]\n )\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant={\"outline\"}\n className={cn(\"rounded-e-none rounded-s-lg pl-3 pr-1 flex gap-1\")}\n disabled={disabled}\n >\n <span className=\"flex items-center truncate\">\n <div className=\"bg-foreground/20 rounded-sm flex w-6 h-4\">\n {value && <FlagComponent country={value} countryName={value} />}\n </div>\n </span>\n <ChevronsUpDownIcon\n className={`h-4 w-4 ${disabled ? \"hidden\" : \"\"}`}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-[300px] p-0\">\n <Command>\n <CommandList>\n <CommandInput placeholder=\"Search country...\" />\n <CommandEmpty>No country found.</CommandEmpty>\n <CommandGroup>\n {options\n .filter((x) => x.value)\n .map((option) => (\n <CommandItem\n className={\"text-sm gap-2\"}\n key={option.value}\n onSelect={() => handleSelect(option.value)}\n >\n <FlagComponent\n country={option.value}\n countryName={option.label}\n />\n <span>{option.label}</span>\n <span className=\"text-foreground/50\">\n {`+${RPNInput.getCountryCallingCode(option.value)}`}\n </span>\n <CheckIcon\n className={`ml-auto h-4 w-4 ${\n option.value === value ? \"opacity-100\" : \"opacity-0\"\n }`}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n const Flag = flags[country]\n\n return (\n <span\n className={\"inline object-contain w-6 h-4 overflow-hidden rounded-sm\"}\n >\n {Flag && <Flag title={countryName} />}\n </span>\n )\n}\n\nexport { PhoneInput }\n" | ||
| } | ||
| ], | ||
| "type": "components:ui" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import * as React from "react" | ||
|
|
||
| import { | ||
| PhoneInput, | ||
| type PhoneInputValue, | ||
| } from "@/registry/default/ui/phone-input" | ||
|
|
||
| export default function PhoneInputDefault() { | ||
| const [value, setValue] = React.useState<PhoneInputValue>() | ||
|
|
||
| return <PhoneInput value={value} onChange={setValue} defaultCountry="US" /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import * as React from "react" | ||
|
|
||
| import { | ||
| PhoneInput, | ||
| type PhoneInputValue, | ||
| } from "@/registry/default/ui/phone-input" | ||
|
|
||
| export default function PhoneInputDemo() { | ||
| const [value, setValue] = React.useState<PhoneInputValue>() | ||
|
|
||
| return <PhoneInput value={value} onChange={setValue} /> | ||
| } |
Oops, something went wrong.