@telus-uds/components-web 2.0.0 → 2.2.0

package/types/common.d.ts

@@ -1,4 +1,22 @@
 import type { AriaRole, AriaAttributes } from 'react'
+import type {
+  AccessibilityProps,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextLayoutEventData
+} from './ReactNative'
+
+export interface A11yProps extends AccessibilityProps {}
+
+export interface InputSupportsProps {
+  copy?: CopyLang
+  label?: string
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  feedback?: string
+  tooltip?: string
+  validation?: 'error' | 'success'
+}
 
 export interface HTMLAttrs extends AriaAttributes {
   dataSet?: Record<string, any>
@@ -11,4 +29,148 @@ export interface HTMLAttrs extends AriaAttributes {
   title?: string
 }
 
+export interface TextInputHandlerProps {
+  // TODO: Typing RN synthetic event for web is going to be tricky...
+  // Come back to this and fix later.
+  onChange?: (text: string, event: any) => void
+  onChangeText?: (text: string) => void
+  onClear?: (event: any) => void
+  onSubmit?: (event: any) => void
+  onSubmitEditing?: (event: any) => void
+  onContentSizeChange?: ((w: number, h: number) => void) | undefined
+  onEndEditing?: (event: any) => void
+  onScroll?: (event: any) => void
+  onSelectionChange?: (event: any) => void
+  onKeyPress?: (event: any) => void
+  onKeyUp?: (event: any) => void
+  onKeyDown?: (event: any) => void
+}
+
+export interface CrossPlatformTextInputProps {
+  // Text props
+  maxFontSizeMultiplier?: number
+  nativeId?: string
+  onLayout?: (event: LayoutChangeEvent) => void
+  // Input value props
+  value?: string
+  initialValue?: string
+  readOnly?: boolean
+  inactive?: boolean
+  // Text input props
+  autoComplete?: string
+  autoCorrect?: boolean | 'on' | 'off'
+  autoFocus?: boolean
+  blurOnSubmit?: boolean
+  clearTextOnFocus?: boolean
+  editable?: boolean
+  keyboardType?: string
+  maxLength?: number
+  multiline?: boolean
+  numberOfLines?: number
+  placeholder?: string
+  placeholderTextColor?: string
+  returnKeyType?: string
+  secureTextEntry?: boolean
+  selectTextOnFocus?: boolean
+  spellCheck?: boolean
+}
+
+export interface NativeTextInputProps {
+  caretHidden?: boolean
+  clearButtonMode?: string
+  contextMenuHidden?: boolean
+  dataDetectorTypes?: string
+  disableFullscreenUI?: boolean
+  enablesReturnKeyAutomatically?: boolean
+  importantForAutofill?: string
+  inlineImageLeft?: string
+  keyboardAppearance?: string
+  returnKeyLabel?: string
+  rejectResponderTermination?: boolean
+  scrollEnabled?: boolean
+  selection?: any
+  selectionColor?: string
+  showSoftInputOnFocus?: boolean
+  textAlign?: string
+  textContentType?: string
+  passwordRules?: string
+  textBreakStrategy?: string
+  underlineColorAndroid?: string
+}
+
+export interface WebTextInputProps {
+  disabled?: boolean
+  dir?: 'auto' | 'ltr' | 'rtl'
+  lang?: string
+  pattern?: string
+}
+
+export interface TextInputProps
+  extends CrossPlatformTextInputProps,
+    NativeTextInputProps,
+    WebTextInputProps {}
+
+export interface ViewProps {
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: LayoutChangeEvent) => void
+  nativeID?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+export interface CrossPlatformTextProps {
+  numberOfLines?: number
+  selectable?: boolean
+}
+
+export interface NativeTextProps {
+  ellipsizeMode?: string
+  maxFontSizeMultiplier?: number
+  minimumFontScale?: number
+  onTextLayout?: (event: NativeSyntheticEvent<TextLayoutEventData>) => void
+  suppressHighlighting?: boolean
+  textBreakStrategy?: string
+}
+
+export interface WebTextProps {
+  dir?: 'auto' | 'ltr' | 'rtl'
+  lang?: string
+}
+
+export interface TextProps extends CrossPlatformTextProps, NativeTextProps, WebTextProps {}
+
+export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify'
+
+export type Tokens = Record<string, any>
+
+export type CopyLang = 'en' | 'fr'
+
 export type Variant = Record<string, string | number | boolean>
+
+export interface PressableState {
+  pressed: boolean
+  hover: boolean
+  focus: boolean
+}
+
+// TODO: Make this more specific:
+// https://telus.github.io/universal-design-system/components/allium/skeleton/#props
+export type SkeletonProps = Record<string, any>
+
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export type LayoutTag =
+  | HeadingTag
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'footer'
+  | 'figure'
+  | 'form'
+  | 'header'
+  | 'ul'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'section'
+  | 'label'

package/types/index.d.ts

@@ -0,0 +1,244 @@
+import { ComponentType, ReactElement } from 'react'
+
+type Props = { [key: string]: any }
+
+export { default as Autocomplete } from './Autocomplete'
+export type { AutocompleteProps, AutocompleteItem } from './Autocomplete'
+
+export { default as Badge } from './Badge'
+export type { BadgeProps } from './Badge'
+
+export { default as BlockQuote } from './BlockQuote'
+export type { BlockQuoteProps } from './BlockQuote'
+
+export { default as Box } from './Box'
+export type { BoxProps } from './Box'
+
+export { default as Breadcrumbs } from './Breadcrumbs'
+export type { BreadcrumbsProps, BreadcrumbRouteProps } from './Breadcrumbs'
+
+export { default as MultiSelectFilter } from './MultiSelectFilter'
+export type { MultiSelectFilterProps } from './MultiSelectFilter'
+
+// Callout Exports
+export { default as Callout } from './Callout'
+export type { CalloutProps } from './Callout'
+
+declare const Card: ComponentType<Props>
+
+// DatePicker Exports
+export { default as DatePicker } from './DatePicker'
+export type { DatePickerProps } from './DatePicker'
+
+declare const Disclaimer: ComponentType<Props>
+declare const ExpandCollapseMini: ComponentType<Props>
+declare const Footnote: ComponentType<Props> & {
+  Link: ComponentType<Props>
+}
+declare const Image: ComponentType<Props>
+declare const List: ComponentType<Props> & {
+  Item: ComponentType<Props>
+}
+declare const Modal: ComponentType<Props>
+declare const NavigationBar: ComponentType<Props>
+declare const OptimizeImage: ComponentType<Props>
+declare const OrderedList: ComponentType<Props> & {
+  Item: ComponentType<Props>
+}
+declare const Paragraph: ComponentType<Props>
+declare const PreviewCard: ComponentType<Props>
+declare const PriceLockup: ComponentType<Props>
+declare const Progress: ComponentType<Props> & {
+  Bar: ComponentType<Props>
+}
+declare const ResponsiveImage: ComponentType<Props>
+declare const Ribbon: ComponentType<Props>
+declare const SkeletonProvider: ComponentType<Props>
+declare const Span: ComponentType<Props>
+declare const Spinner: ComponentType<Props>
+declare const StoryCard: ComponentType<Props>
+declare const Table: ComponentType<Props> & {
+  Header: ComponentType<Props>
+  Body: ComponentType<Props>
+  Row: ComponentType<Props>
+  SubHeading: ComponentType<Props>
+  Cell: ComponentType<Props>
+}
+declare const TermsAndConditions: ComponentType<Props>
+declare const Testimonial: ComponentType<Props>
+declare const Toast: ComponentType<Props>
+declare const Video: ComponentType<Props>
+declare const VideoPicker: ComponentType<Props>
+declare const WaffleGrid: ComponentType<Props>
+
+// WebVideo Exports
+export { default as WebVideo } from './WebVideo'
+export type { WebVideoProps } from './WebVideo'
+
+declare const ssrStyles: (appName: string) => {
+  renderApp: (App: ComponentType<Props>, props: Props) => ReactElement<Props>
+  getStyles: (...existingStyles: any[]) => any[]
+}
+
+// Base Exports
+declare const A11yText: ComponentType<Props>
+declare const ActivityIndicator: ComponentType<Props>
+declare const Button: ComponentType<Props>
+declare const ButtonGroup: ComponentType<Props>
+declare const ButtonLink: ComponentType<Props>
+declare const Carousel: ComponentType<Props> & {
+  Item: ComponentType<Props>
+}
+declare const Checkbox: ComponentType<Props>
+declare const CheckboxGroup: ComponentType<Props>
+declare const ChevronLink: ComponentType<Props>
+declare const Divider: ComponentType<Props>
+declare const ExpandCollapse: ComponentType<Props> & {
+  Panel: ComponentType<Props>
+}
+declare const Feedback: ComponentType<Props>
+declare const FlexGrid: ComponentType<Props> & {
+  Row: ComponentType<Props>
+  Col: ComponentType<Props>
+}
+declare const Icon: ComponentType<Props>
+declare const InputLabel: ComponentType<Props>
+declare const Link: ComponentType<Props>
+declare const BaseModal: ComponentType<Props>
+declare const Notification: ComponentType<Props>
+declare const Pagination: ComponentType<Props> & {
+  PageButton: ComponentType<Props>
+}
+
+export { default as QuantitySelector } from './QuantitySelector'
+export type { QuantitySelectorProps } from './QuantitySelector'
+
+declare const QuickLinks: ComponentType<Props> & {
+  Item: ComponentType<Props>
+}
+declare const QuickLinksFeature: ComponentType<Props> & {
+  Item: ComponentType<Props>
+}
+declare const Radio: ComponentType<Props>
+declare const RadioGroup: ComponentType<Props>
+declare const RadioCard: ComponentType<Props>
+declare const RadioCardGroup: ComponentType<Props>
+declare const Search: ComponentType<Props>
+declare const Select: ComponentType<Props> & {
+  Group: ComponentType<Props>
+  Item: ComponentType<Props>
+}
+declare const SideNav: ComponentType<Props> & {
+  ItemsGroup: ComponentType<Props>
+  Item: ComponentType<Props>
+}
+declare const Skeleton: ComponentType<Props>
+declare const Spacer: ComponentType<Props>
+declare const StackView: ComponentType<Props>
+declare const StackWrap: ComponentType<Props>
+declare const StepTracker: ComponentType<Props>
+declare const Tabs: ComponentType<Props>
+declare const Tags: ComponentType<Props>
+declare const TextButton: ComponentType<Props>
+declare const TextArea: ComponentType<Props>
+declare const TextInput: ComponentType<Props>
+declare const ToggleSwitch: ComponentType<Props>
+declare const ToggleSwitchGroup: ComponentType<Props>
+declare const Timeline: ComponentType<Props>
+
+export { default as TooltipButton } from './TooltipButton'
+export type { TooltipButtonProps } from './TooltipButton'
+
+export { default as Tooltip } from './Tooltip'
+export type { TooltipProps } from './Tooltip'
+
+export { default as Typography } from './Typography'
+export type { TypographyProps } from './Typography'
+
+export interface ResponsivePropArgs<T> {
+  xs?: T | null
+  sm?: T | null
+  md?: T | null
+  lg?: T | null
+  xl?: T | null
+}
+declare const useResponsiveProp: <T>(prop: ResponsivePropArgs<T>, defaultValue?: T) => T
+declare const useViewport: () => 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+// Cross Platform Exports
+declare const IconButton: ComponentType<Props>
+
+export {
+  Card,
+  Disclaimer,
+  ExpandCollapseMini,
+  Footnote,
+  Image,
+  List,
+  Modal,
+  NavigationBar,
+  OptimizeImage,
+  OrderedList,
+  Paragraph,
+  PreviewCard,
+  PriceLockup,
+  Progress,
+  ResponsiveImage,
+  Ribbon,
+  SkeletonProvider,
+  Span,
+  Spinner,
+  StoryCard,
+  Table,
+  TermsAndConditions,
+  Testimonial,
+  Toast,
+  Video,
+  VideoPicker,
+  WaffleGrid,
+  ssrStyles,
+  A11yText,
+  ActivityIndicator,
+  Button,
+  ButtonGroup,
+  ButtonLink,
+  Carousel,
+  Checkbox,
+  CheckboxGroup,
+  ChevronLink,
+  Divider,
+  ExpandCollapse,
+  Feedback,
+  FlexGrid,
+  Icon,
+  InputLabel,
+  Link,
+  BaseModal,
+  Notification,
+  Pagination,
+  QuickLinks,
+  QuickLinksFeature,
+  Radio,
+  RadioGroup,
+  RadioCard,
+  RadioCardGroup,
+  Search,
+  Select,
+  SideNav,
+  Skeleton,
+  Spacer,
+  StackView,
+  StackWrap,
+  StepTracker,
+  Tabs,
+  Tags,
+  TextButton,
+  TextArea,
+  TextInput,
+  ToggleSwitch,
+  ToggleSwitchGroup,
+  Timeline,
+  useResponsiveProp,
+  useViewport,
+  IconButton
+}