feat(input-phone): implement the input phone component

.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
  "recommendations": [
- "aaron-bond.better-comments",
  "bierner.github-markdown-preview",
  "bierner.markdown-checkbox",
  "bierner.markdown-emoji",
@@ -17,7 +16,6 @@
  "esbenp.prettier-vscode",
  "formulahendry.auto-rename-tag",
  "github.copilot",
- "github.vscode-github-actions",
  "github.vscode-pull-request-github",
  "gruntfuggly.todo-tree",
  "leizongmin.node-module-intellisense",

package.json

@@ -71,7 +71,7 @@
  "@snowball-tech/stylelint-config": "^2.1.3",
  "@types/eslint": "^8.44.0",
  "@types/is-ci": "^3.0.0",
- "@types/node": "^20.4.1",
+ "@types/node": "^20.4.2",
  "@types/prettier": "^2.7.3",
  "chromatic": "^6.19.9",
  "concurrently": "^8.2.0",

packages/fractal/fractal-panda.preset.ts

@@ -12,6 +12,7 @@ import {
 import * as ButtonRecipes from '@/components/Button/Button.recipe'
 import * as InputCheckboxRecipes from '@/components/InputCheckbox/InputCheckbox.recipe'
 import * as InputDateRecipes from '@/components/InputDate/InputDate.recipe'
+import * as InputPhoneRecipes from '@/components/InputPhone/InputPhone.recipe'
 import * as InputTextRecipes from '@/components/InputText/InputText.recipe'
 import * as SelectRecipes from '@/components/Select/Select.recipe'
 import * as TypographyRecipes from '@/components/Typography/Typography.recipe'
@@ -23,6 +24,7 @@ const GROUPS = {
  button: `${PREFIX}-${ButtonRecipes.GROUP_NAME}`,
  inputCheckbox: `${PREFIX}-${InputCheckboxRecipes.GROUP_NAME}`,
  inputDate: `${PREFIX}-${InputDateRecipes.GROUP_NAME}`,
+ inputPhone: `${PREFIX}-${InputPhoneRecipes.GROUP_NAME}`,
  inputText: `${PREFIX}-${InputTextRecipes.GROUP_NAME}`,
  select: `${PREFIX}-${SelectRecipes.GROUP_NAME}`,
  selectTrigger: `${PREFIX}-${SelectRecipes.GROUP_NAME}-trigger`,
@@ -67,6 +69,19 @@ const fractalPreset = definePreset({
  inputDateMonth: InputDateRecipes.inputDateMonth,
  inputDateYear: InputDateRecipes.inputDateYear,
 
+ inputPhoneContainer: InputPhoneRecipes.inputPhoneContainer,
+ inputPhoneDescription: InputPhoneRecipes.inputPhoneDescription,
+ inputPhoneFields: InputPhoneRecipes.inputPhoneFields,
+ inputPhoneLabel: InputPhoneRecipes.inputPhoneLabel,
+ inputPhoneMessage: InputPhoneRecipes.inputPhoneMessage,
+ inputPhoneNumber: InputPhoneRecipes.inputPhoneNumber,
+ inputPhoneNumberInputText: InputPhoneRecipes.inputPhoneNumberInputText,
+ inputPhoneNumberPrefixHelper:
+ InputPhoneRecipes.inputPhoneNumberPrefixHelper,
+ inputPhonePrefix: InputPhoneRecipes.inputPhonePrefix,
+ inputPhonePrefixDropdown: InputPhoneRecipes.inputPhonePrefixDropdown,
+ inputPhonePrefixSearch: InputPhoneRecipes.inputPhonePrefixSearch,
+
  inputText: InputTextRecipes.inputText,
  inputTextContainer: InputTextRecipes.inputTextContainer,
  inputTextDescription: InputTextRecipes.inputTextDescription,
@@ -78,6 +93,11 @@ const fractalPreset = definePreset({
  selectContainer: SelectRecipes.selectContainer,
  selectDescription: SelectRecipes.selectDescription,
  selectDropdown: SelectRecipes.selectDropdown,
+ selectDropdownScrollbar: SelectRecipes.selectDropdownScrollbar,
+ selectDropdownScrollbarThumbs:
+ SelectRecipes.selectDropdownScrollbarThumbs,
+ selectDropdownScrollViewport:
+ SelectRecipes.selectDropdownScrollViewport,
  selectIndicator: SelectRecipes.selectIndicator,
  selectItem: SelectRecipes.selectItem,
  selectItemGroup: SelectRecipes.selectItemGroup,

packages/fractal/package.json

@@ -82,32 +82,33 @@
  "devDependencies": {
  "@pandacss/dev": "^0.6.0",
  "@pandacss/preset-base": "^0.6.0",
+ "@simbathesailor/use-what-changed": "^2.0.0",
  "@snowball-tech/eslint-config": "^5.1.3",
- "@storybook/addon-a11y": "^7.0.26",
- "@storybook/addon-essentials": "^7.0.26",
- "@storybook/addon-interactions": "^7.0.26",
- "@storybook/addon-links": "^7.0.26",
- "@storybook/addons": "^7.0.26",
- "@storybook/blocks": "^7.0.26",
- "@storybook/components": "^7.0.26",
- "@storybook/manager-api": "^7.0.26",
- "@storybook/react": "^7.0.26",
- "@storybook/react-vite": "^7.0.26",
+ "@storybook/addon-a11y": "^7.0.27",
+ "@storybook/addon-essentials": "^7.0.27",
+ "@storybook/addon-interactions": "^7.0.27",
+ "@storybook/addon-links": "^7.0.27",
+ "@storybook/addons": "^7.0.27",
+ "@storybook/blocks": "^7.0.27",
+ "@storybook/components": "^7.0.27",
+ "@storybook/manager-api": "^7.0.27",
+ "@storybook/react": "^7.0.27",
+ "@storybook/react-vite": "^7.0.27",
  "@storybook/testing-library": "^0.2.0",
- "@storybook/theming": "^7.0.26",
+ "@storybook/theming": "^7.0.27",
  "@types/eslint": "^8.44.0",
  "@types/lodash": "^4.14.195",
  "@types/prettier": "^2.7.3",
  "@types/prop-types": "^15.7.5",
  "@types/react": "^18.2.14",
- "@types/react-dom": "^18.2.6",
+ "@types/react-dom": "^18.2.7",
  "@vitejs/plugin-react-swc": "^3.3.2",
  "eslint": "^8.44.0",
  "postcss": "^8.4.25",
  "postcss-styled-syntax": "^0.4.0",
  "prettier": "^3.0.0",
  "prop-types": "^15.8.1",
- "storybook": "^7.0.26",
+ "storybook": "^7.0.27",
  "storybook-addon-mock": "^4.1.0",
  "tsup": "^7.1.0",
  "typescript": "^5.1.6",
@@ -121,8 +122,11 @@
  "@radix-ui/react-checkbox": "^1.0.4",
  "@radix-ui/react-form": "^0.0.3",
  "@radix-ui/react-label": "^2.0.2",
+ "@radix-ui/react-scroll-area": "^1.0.4",
  "@radix-ui/react-select": "^1.2.2",
  "@snowball-tech/design-tokens": "5.0.1",
+ "country-flag-icons": "^1.5.7",
+ "libphonenumber-js": "^1.10.37",
  "lodash": "^4.17.21",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"

packages/fractal/src/components/InputDate/InputDate.recipe.ts

@@ -94,7 +94,7 @@ export const inputDateYear: ReturnType<typeof defineRecipe> = defineRecipe({
 })
 
 export const inputDateMessage: ReturnType<typeof defineRecipe> = defineRecipe({
- description: 'Date text message',
+ description: 'Date input text message (error or success)',
  name: 'inputDateMessage',
 
  // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects

packages/fractal/src/components/InputDate/InputDate.tsx

@@ -22,9 +22,9 @@ import { InputText } from '@/components/InputText'
 import { PREFIX } from '@/constants'
 
 import { GROUP_NAME } from './InputDate.recipe'
-import type { InputDateProps } from './InputDate.types'
+import type { DateFormat, InputDateProps } from './InputDate.types'
 
-function isValid(type: 'day' | 'month' | 'year', value: number) {
+function isValid(type: keyof DateFormat, value: number) {
  if (!isNumber(value) || Number.isNaN(value)) {
  return false
  }
@@ -45,7 +45,8 @@ function isValid(type: 'day' | 'month' | 'year', value: number) {
 }
 
 /**
- * `InputText` component is used to take text values from the user.
+ * `InputDate` component is used to allow the user to enter a date using 3
+ * separate day/month/year fields.
  */
 export default function InputDate({
  autoFocus = false,
@@ -88,7 +89,7 @@ export default function InputDate({
  isSuccessful ? 'success' : '',
  )
 
- const handleChange = (newValue: string, type: 'day' | 'month' | 'year') => {
+ const handleChange = (newValue: string, type: keyof DateFormat) => {
  const newValueAsInt = parseInt(newValue, 10)
  if (!isValid(type, newValueAsInt)) {
  setErrors({ ...errors, [type]: true })
@@ -147,7 +148,7 @@ export default function InputDate({
  success={isSuccessful}
  type="number"
  {...(value?.day !== undefined ? { value: value.day } : {})}
- onChange={(newValue) => handleChange(newValue, 'day')}
+ onChange={(newDay) => handleChange(newDay, 'day')}
  />
 
  <InputText
@@ -171,7 +172,7 @@ export default function InputDate({
  success={isSuccessful}
  type="number"
  {...(value?.month !== undefined ? { value: value.month } : {})}
- onChange={(newValue) => handleChange(newValue, 'month')}
+ onChange={(newMonth) => handleChange(newMonth, 'month')}
  />
 
  <InputText
@@ -194,7 +195,7 @@ export default function InputDate({
  success={isSuccessful}
  type="number"
  {...(value?.year !== undefined ? { value: value.year } : {})}
- onChange={(newValue) => handleChange(newValue, 'year')}
+ onChange={(newYear) => handleChange(newYear, 'year')}
  />
  </div>
 

packages/fractal/src/components/InputDate/InputDate.types.ts

@@ -1,3 +1,5 @@
+import { HTMLAttributes } from 'react'
+
 export type DateFormat = {
  day?: number
  month?: number
@@ -18,7 +20,7 @@ export type Descriptions = {
 
 export interface InputDateProps
  extends Omit<
- React.HTMLAttributes<HTMLDivElement>,
+ HTMLAttributes<HTMLDivElement>,
  'defaultValue' | 'onChange' | 'placeholder'
  > {
  /** Indicates if the first empty date field must be focused on render. */
@@ -64,8 +66,8 @@ export interface InputDateProps
  name?: string
  /** Event handler called when the date value is changed. */
  onChange?: (newDate: DateFormat) => void
- /** Event handler called when one of the field of the date is changed. */
- onFieldChange?: (type: 'day' | 'month' | 'year', newDay: number) => void
+ /** Event handler called when one of the field of the date input is changed. */
+ onFieldChange?: (type: keyof DateFormat, newDay: number) => void
  /**
  * A string to display in each of the date field when the value is
  * empty.
@@ -76,7 +78,7 @@ export interface InputDateProps
  /** Indicates if the date input must be filled. */
  required?: boolean
  /**
- * A message to display when the birth dae input has a valid value.
+ * A message to display when the date input has a valid value.
  *
  * This will also change the display of the input to give an success feedback
  * (green border).

packages/fractal/src/components/InputPhone/InputPhone.constants.ts

@@ -0,0 +1,22 @@
+import getUnicodeFlagIcon from 'country-flag-icons/unicode'
+import { getCountries, getCountryCallingCode } from 'libphonenumber-js/max'
+
+import { CountryDetails } from './InputPhone.types'
+
+export const DEFAULT_COUNTRY_CODE = 'FR'
+
+export const countryByCountryCode: Record<string, CountryDetails> = {}
+export const supportedCountries = getCountries().map((countryCode) => {
+ const countryDetails: CountryDetails = {
+ countryCode,
+ countryName:
+ new Intl.DisplayNames(undefined, { type: 'region' }).of(countryCode) ||
+ 'Unknown',
+ flag: getUnicodeFlagIcon(countryCode),
+ prefix: getCountryCallingCode(countryCode),
+ }
+
+ countryByCountryCode[countryDetails.countryCode] = countryDetails
+
+ return countryDetails
+})

packages/fractal/src/components/InputPhone/InputPhone.mdx

@@ -0,0 +1,33 @@
+import {
+ ArgTypes,
+ Controls,
+ Description,
+ Meta,
+ Primary,
+ Subtitle,
+ Title,
+} from '@storybook/blocks'
+
+import * as InputPhoneStories from './InputPhone.stories'
+
+<Meta of={InputPhoneStories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+The component accepts the following props:
+
+<ArgTypes />
+
+## Playground
+
+<Primary />
+
+<Controls />