@payfit/unity-illustrations 2.55.22 → 2.56.0

package/src/components/illustration/figma/IllustrationSmall.figma.ts

@@ -1,258 +0,0 @@
-// url=https://www.figma.com/design/NYcgOc3qMmcEDNqD6kD8J4?node-id=214-3597
-// component=Illustration
-// source=https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/illustrations/src/components/illustration/Illustration.tsx
-
-/**
- * AUTO-GENERATED - DO NOT EDIT
- *
- * Template file for Figma Code Connect - Illustration component (Small)
- *
- * Handles dynamic mapping of:
- * - Name property -> PascalCase code name
- * - Type property -> "EmptyState" prefix for empty-state type
- * - With background property -> "WithBackground" suffix
- */
-
-import figma from 'figma'
-const instance = figma.selectedInstance
-
-const nameValue = instance.getEnum('Name', {
-  accounting: 'Accounting',
-  activation_button: 'ActivationButton',
-  activation_toggle: 'ActivationToggle',
-  add_employee: 'AddEmployee',
-  administrative_document: 'AdministrativeDocument',
-  alphabet_cube: 'AlphabetCube',
-  analysis: 'Analysis',
-  annual_taxes: 'AnnualTaxes',
-  automation_in_progress: 'AutomationInProgress',
-  baby_bottle: 'BabyBottle',
-  bell: 'Bell',
-  bicycle: 'Bicycle',
-  big_idea: 'BigIdea',
-  binoculars: 'Binoculars',
-  biscuit: 'Biscuit',
-  biscuit_crumbs: 'BiscuitCrumbs',
-  blank_payslip: 'BlankPayslip',
-  book: 'Book',
-  box: 'Box',
-  brainstorming: 'Brainstorming',
-  buoy: 'Buoy',
-  calculator: 'Calculator',
-  calendar: 'Calendar',
-  card: 'Card',
-  character_headphone: 'CharacterHeadphone',
-  chat: 'Chat',
-  checkbox: 'Checkbox',
-  christmas_sock: 'ChristmasSock',
-  christmas_sock_and_confettis: 'ChristmasSockAndConfettis',
-  clock: 'Clock',
-  closed_lock: 'ClosedLock',
-  collaboration: 'Collaboration',
-  collective_research: 'CollectiveResearch',
-  computer_documentation: 'ComputerDocumentation',
-  computer_mail: 'ComputerMail',
-  confetti_cannon: 'ConfettiCannon',
-  confettis: 'Confettis',
-  contact: 'Contact',
-  contract_signature: 'ContractSignature',
-  conversation: 'Conversation',
-  cross_legged: 'CrossLegged',
-  cup_of_coffee: 'CupOfCoffee',
-  dancing: 'Dancing',
-  dancing_people: 'DancingPeople',
-  dancing_skier: 'DancingSkier',
-  data: 'Data',
-  desert: 'Desert',
-  dialogue: 'Dialogue',
-  discount: 'Discount',
-  discussion: 'Discussion',
-  doctor: 'Doctor',
-  document: 'Document',
-  document_creation: 'DocumentCreation',
-  document_error: 'DocumentError',
-  document_filing: 'DocumentFiling',
-  document_scan: 'DocumentScan',
-  document_scanning: 'DocumentScanning',
-  e_signature: 'ESignature',
-  email_login: 'EmailLogin',
-  email_notification: 'EmailNotification',
-  emergency_contact: 'EmergencyContact',
-  employment_contract: 'EmploymentContract',
-  empty_document: 'EmptyDocument',
-  empty_folder: 'EmptyFolder',
-  empty_state: 'EmptyState',
-  evaluation: 'Evaluation',
-  exceeding_threshold: 'ExceedingThreshold',
-  exceptional_compensation: 'ExceptionalCompensation',
-  expenses: 'Expenses',
-  FAQ: 'FAQ',
-  field_glasses: 'FieldGlasses',
-  filing_documents: 'FilingDocuments',
-  flowchart: 'Flowchart',
-  free_share: 'FreeShare',
-  full_calendar: 'FullCalendar',
-  gear: 'Gear',
-  gift: 'Gift',
-  golden_ribbon: 'GoldenRibbon',
-  graph: 'Graph',
-  graphic: 'Graphic',
-  half_calendar: 'HalfCalendar',
-  hammer: 'Hammer',
-  hand_hello: 'HandHello',
-  hands: 'Hands',
-  happy_character: 'HappyCharacter',
-  health: 'Health',
-  health_insurance: 'HealthInsurance',
-  high_five: 'HighFive',
-  highlight_books: 'HighlightBooks',
-  holiday_voucher: 'HolidayVoucher',
-  idea: 'Idea',
-  identity_card: 'IdentityCard',
-  incident_panel: 'IncidentPanel',
-  indicate_something: 'IndicateSomething',
-  information_update: 'InformationUpdate',
-  JEI_JEU_JEC: 'JeiJeuJec',
-  jetlang_calculator: 'JetlangCalculator',
-  kanoon: 'Kanoon',
-  kpmg: 'Kpmg',
-  legal_help: 'LegalHelp',
-  letter_box: 'LetterBox',
-  library: 'Library',
-  light_bulb: 'LightBulb',
-  little_rocket: 'LittleRocket',
-  lunch_voucher: 'LunchVoucher',
-  magnifying_glass: 'MagnifyingGlass',
-  maintenance: 'Maintenance',
-  marteler: 'Marteler',
-  meal_plate: 'MealPlate',
-  meal_voucher: 'MealVoucher',
-  meal_voucher_card: 'MealVoucherCard',
-  mobility: 'Mobility',
-  money_lending: 'MoneyLending',
-  moon: 'Moon',
-  mug: 'Mug',
-  notes: 'Notes',
-  official_letter: 'OfficialLetter',
-  open_lock: 'OpenLock',
-  organismes_payment: 'OrganismesPayment',
-  paid_leave: 'PaidLeave',
-  panel: 'Panel',
-  paper_plane: 'PaperPlane',
-  party: 'Party',
-  payfitters_with_badge: 'PayfittersWithBadge',
-  payment_information: 'PaymentInformation',
-  payroll_error: 'PayrollError',
-  payslip: 'Payslip',
-  payslip_coins: 'PayslipCoins',
-  pen: 'Pen',
-  people: 'People',
-  performance: 'Performance',
-  performance_discussion: 'PerformanceDiscussion',
-  person: 'Person',
-  person_headphone: 'PersonHeadphone',
-  personal_details: 'PersonalDetails',
-  phone_message: 'PhoneMessage',
-  piggy_bank: 'PiggyBank',
-  piggy_bank_coins: 'PiggyBankCoins',
-  planet: 'Planet',
-  plant: 'Plant',
-  post_it: 'PostIt',
-  progression: 'Progression',
-  promotion: 'Promotion',
-  provident_scheme: 'ProvidentScheme',
-  puzzle: 'Puzzle',
-  puzzle_piece: 'PuzzlePiece',
-  reading_a_book: 'ReadingABook',
-  receiving_pay: 'ReceivingPay',
-  rehire_employee: 'RehireEmployee',
-  remote: 'Remote',
-  remote_work: 'RemoteWork',
-  report: 'Report',
-  research: 'Research',
-  rocket: 'Rocket',
-  safe_deposit_box: 'SafeDepositBox',
-  salary: 'Salary',
-  salary_advance: 'SalaryAdvance',
-  salary_payment: 'SalaryPayment',
-  salary_seizure: 'SalarySeizure',
-  sale: 'Sale',
-  sand_castle: 'SandCastle',
-  schedule: 'Schedule',
-  security_fields: 'SecurityFields',
-  set_up_task: 'SetUpTask',
-  setting_slider: 'SettingSlider',
-  sick_leave: 'SickLeave',
-  signature: 'Signature',
-  sitting_on_the_sofa: 'SittingOnTheSofa',
-  small_puzzle: 'SmallPuzzle',
-  smiling_character: 'SmilingCharacter',
-  solve_problem: 'SolveProblem',
-  speaker_fingertips: 'SpeakerFingertips',
-  speaker_welcome: 'SpeakerWelcome',
-  speaker_with_microphone: 'SpeakerWithMicrophone',
-  spreadsheet: 'Spreadsheet',
-  stack_of_book_2: 'StackOfBook2',
-  stair_treads: 'StairTreads',
-  stethoscope: 'Stethoscope',
-  stock_options: 'StockOptions',
-  stopwatch: 'Stopwatch',
-  sunshade: 'Sunshade',
-  taking_note: 'TakingNote',
-  target: 'Target',
-  task_to_do: 'TaskToDo',
-  team_building: 'TeamBuilding',
-  telescope: 'Telescope',
-  template: 'Template',
-  template_form: 'TemplateForm',
-  thumbsup: 'Thumbsup',
-  thumbtack: 'Thumbtack',
-  time_tracking: 'TimeTracking',
-  timer: 'Timer',
-  tips_jar: 'TipsJar',
-  to_do: 'ToDo',
-  toggle_off: 'ToggleOff',
-  toggle_on: 'ToggleOn',
-  token_coin: 'TokenCoin',
-  trophy: 'Trophy',
-  trophy_won: 'TrophyWon',
-  validation_window: 'ValidationWindow',
-  visually_impaired: 'VisuallyImpaired',
-  visually_impaired_winter: 'VisuallyImpairedWinter',
-  walking_people: 'WalkingPeople',
-  winter_party: 'WinterParty',
-  work_at_office: 'WorkAtOffice',
-  work_expense: 'WorkExpense',
-  work_from_anywhere: 'WorkFromAnywhere',
-  working_time: 'WorkingTime',
-  wrench: 'Wrench',
-  write_book: 'WriteBook',
-})
-
-const typeValue = instance.getEnum('Type', {
-  generic: 'generic',
-  specific: 'specific',
-  'empty-state': 'empty-state',
-})
-
-const withBackgroundValue = instance.getBoolean('With background')
-const nameWithType =
-  typeValue === 'empty-state' ? `EmptyState${nameValue ?? ''}` : nameValue
-const finalSrc = withBackgroundValue
-  ? `${nameWithType}WithBackground`
-  : nameWithType
-
-const code = figma.tsx`<Illustration
-  src={${finalSrc}}
-  variant="picture"
-  alt="${finalSrc} illustration"
-/>`
-
-export default {
-  id: 'illustration-small',
-  example: code,
-  imports: [
-    "import { Illustration } from '@payfit/unity-illustrations'",
-    `import ${finalSrc} from '@payfit/unity-illustrations/assets/${finalSrc}'`,
-  ],
-}

package/src/components/lazy-illustration/LazyIllustration.stories.tsx

@@ -1,204 +0,0 @@
-import { UnityThemeProvider } from '@payfit/unity-themes'
-
-import { LazyIllustration } from './LazyIllustration'
-import preview from '../../../.storybook/preview'
-
-/**
- * The LazyIllustration component dynamically imports illustrations based on their name.
- * It uses the lazyIllustrationsMap from the generated illustrationAssets file to load
- * the corresponding illustration and pass it to the Illustration component.
- */
-const meta = preview.meta({
-  title: 'Components/LazyIllustration',
-  component: LazyIllustration,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    name: {
-      control: 'select',
-      options: [
-        'FAQ',
-        'Binoculars',
-        'WriteBook',
-        'VisuallyImpaired',
-        'Library',
-        'AccountingAnimation',
-        'BinocularsAnimation',
-        'CardAnimation',
-      ],
-      description:
-        'The name of the illustration to load dynamically. This must be one of the valid illustration names from the Unity illustration library',
-      table: {
-        type: { summary: 'UnityIllustrationName' },
-        category: 'Required',
-      },
-    },
-    variant: {
-      control: 'select',
-      options: ['picture', 'icon'],
-      description:
-        'The illustration variant. It can be a regular picture or an illustrated icon',
-      table: {
-        type: { summary: "'picture' | 'icon'" },
-        category: 'Required',
-      },
-    },
-    alt: {
-      control: 'text',
-      description:
-        'Accessible name for the illustration. Required when isDecorative is `true`',
-      table: {
-        type: { summary: 'string' },
-        category: 'Accessibility',
-      },
-    },
-    // @ts-expect-error - Typescript can't handle the union type properly, but the prop exist
-    description: {
-      control: 'text',
-      description:
-        'Optional description for complex illustrations. Active only when isDecorative is `true`',
-      table: {
-        type: { summary: 'string' },
-        category: 'Accessibility',
-      },
-    },
-    isDecorative: {
-      control: 'boolean',
-      description:
-        'Whether the illustration is decorative (hidden from screen readers). When `true`, `alt` becomes optional',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Accessibility',
-      },
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'The size of the illustration. Only applies to icon variant',
-      if: { arg: 'variant', eq: 'icon' },
-      table: {
-        type: { summary: "'sm' | 'md' | 'lg'" },
-        category: 'Icon Variant',
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes for styling',
-      table: {
-        type: { summary: 'string' },
-        category: 'Styling',
-      },
-    },
-  },
-})
-
-/**
- * Basic usage of the LazyIllustration component with a picture variant.
- * Simply provide the name of the illustration you want to load.
- */
-export const Primary = meta.story({
-  args: {
-    variant: 'picture',
-    name: 'Binoculars',
-    className: 'uy:size-[150px]',
-    alt: 'Binoculars Illustration',
-  },
-})
-
-/**
- * You can create responsive illustrations that adapt to different screen sizes by using responsive
- * Tailwind classes in the `className` prop. Set the `alt` prop to provide accessible descriptions
- * for screen readers when using the picture variant.
- */
-export const IllustratedPicture = meta.story({
-  args: {
-    variant: 'picture',
-    name: 'VisuallyImpaired',
-    className: 'uy:size-[50vmin]',
-    alt: 'Visually impaired person illustration',
-  },
-})
-
-/**
- * You can use the LazyIllustration component with the icon variant as well.
- * Specify the size prop to control the dimensions of the icon.
- */
-export const IconVariant = meta.story({
-  args: {
-    variant: 'icon',
-    name: 'Binoculars',
-    size: 'md',
-    alt: 'Binoculars Illustration',
-  },
-})
-
-/**
- * LazyIllustration keeps the same logical name API while still resolving theme-aware illustration URLs.
- * The loaded asset is delegated to Illustration, so switching the active Unity theme updates the rendered source when a themed variant exists.
- */
-export const ThemeVariants = meta.story({
-  render: () => {
-    return (
-      <div className="uy:flex uy:flex-wrap uy:items-start uy:gap-400">
-        <UnityThemeProvider theme="legacy">
-          <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
-            <LazyIllustration
-              name="FAQ"
-              variant="icon"
-              size="lg"
-              alt="FAQ legacy icon"
-            />
-            <span className="uy:typography-caption uy:text-content-secondary">
-              legacy
-            </span>
-          </div>
-        </UnityThemeProvider>
-        <UnityThemeProvider theme="rebrand">
-          <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
-            <LazyIllustration
-              name="FAQ"
-              variant="icon"
-              size="lg"
-              alt="FAQ rebrand icon"
-            />
-            <span className="uy:typography-caption uy:text-content-secondary">
-              rebrand
-            </span>
-          </div>
-        </UnityThemeProvider>
-      </div>
-    )
-  },
-})
-
-/**
- * You can create responsive illustrations that adapt to different screen sizes
- * by using responsive Tailwind classes in the className prop.
- */
-export const Responsive = meta.story({
-  args: {
-    variant: 'picture',
-    name: 'WriteBook',
-    className: 'uy:size-[50vmin]',
-    alt: 'Write Book Illustration',
-  },
-})
-
-/**
- * You can use animated illustrations with the LazyIllustration component. Animated illustrations
- * have the `Animation` suffix and are automatically loaded with their fluid sizing behavior.
- * The component detects animated assets and applies maximum dimension constraints to prevent oversizing.
- */
-export const AnimatedIllustrations = meta.story({
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  args: {
-    variant: 'picture',
-    name: 'AccountingAnimation',
-    alt: 'Accounting animation showing financial calculations',
-  },
-})

package/src/components/lazy-illustration/LazyIllustration.tsx

@@ -1,125 +0,0 @@
-import { forwardRef, useEffect, useState } from 'react'
-
-import type {
-  UnityIllustrationAsset,
-  UnityIllustrationName,
-} from '../../generated/illustrationAssets'
-import type {
-  IllustratedIconProps,
-  IllustratedPictureProps,
-} from '../illustration/Illustration'
-
-import { lazyIllustrationsMap } from '../../generated/illustrationAssets'
-import {
-  illustratedIcon,
-  illustratedPicture,
-  Illustration,
-} from '../illustration/Illustration'
-
-/**
- * Props for the LazyIllustration component.
- *
- * This type is a union of two possible prop types:
- * 1. Props for the picture variant (omitting 'src' and adding 'name')
- * 2. Props for the icon variant (omitting 'src' and adding 'name')
- * @property {UnityIllustrationName} name - The name of the illustration to load dynamically.
- *   This must be one of the valid illustration names from the Unity illustration library.
- * @property {'picture' | 'icon'} variant - The illustration variant. It can be a regular picture or an illustrated icon.
- * @property {string} alt - Accessible name for the illustration (required when isDecorative is false or undefined).
- * @property {string} [description] - Optional description for complex illustrations.
- * @property {boolean} [isDecorative] - Whether this is decorative (hidden from screen readers).
- * @property {'sm' | 'md' | 'lg'} [size] - The size of the illustration. Required when variant is 'icon'.
- */
-export type LazyIllustrationProps =
-  | (Omit<IllustratedPictureProps, 'src'> & { name: UnityIllustrationName })
-  | (Omit<IllustratedIconProps, 'src'> & { name: UnityIllustrationName })
-
-/**
- * A component that lazily loads illustrations by name and renders them using the Illustration component.
- *
- * The LazyIllustration component dynamically imports illustrations based on their name using the
- * lazyIllustrationsMap from the generated illustrationAssets file. This allows for code-splitting
- * and on-demand loading of illustrations, which can significantly improve initial load performance.
- * @param {LazyIllustrationProps} props - Component props including name, variant, and standard HTML attributes
- * @see {@link LazyIllustrationProps} for all available props
- * @example
- * ```tsx
- * import { LazyIllustration } from '@payfit/unity-illustrations'
- *
- * function Example() {
- *   return (
- *     <LazyIllustration
- *       variant="picture"
- *       name="FAQ"
- *       className="uy:size-[150px]"
- *       alt="FAQ illustration"
- *     />
- *   )
- * }
- * ```
- * @example
- * ```tsx
- * // Using with icon variant
- * import { LazyIllustration } from '@payfit/unity-illustrations'
- *
- * function IconExample() {
- *   return (
- *     <LazyIllustration
- *       variant="icon"
- *       size="md"
- *       name="Binoculars"
- *       alt="Binoculars icon"
- *     />
- *   )
- * }
- * ```
- * @remarks
- * Unlike the Illustration component, you don't need to import illustration assets individually.
- * Simply provide the name of the illustration you want to use, and LazyIllustration will handle
- * the dynamic import for you. The component returns null during loading, so you may want to
- * provide your own loading state or placeholder.
- */
-export const LazyIllustration = forwardRef<
-  HTMLImageElement,
-  LazyIllustrationProps
->(({ name, ...props }, ref) => {
-  const [illustration, setIllustration] =
-    useState<UnityIllustrationAsset | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-
-  useEffect(() => {
-    const loadIllustration = async () => {
-      try {
-        setIsLoading(true)
-        const importFn = lazyIllustrationsMap[name]
-
-        const module = await importFn()
-        setIllustration(module.default)
-      } catch (error) {
-        console.error(`Failed to load illustration "${name}":`, error)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    void loadIllustration()
-  }, [name])
-
-  if (isLoading || !illustration) {
-    const clsx =
-      props.variant === 'picture'
-        ? illustratedPicture({ className: props.className })
-        : illustratedIcon({
-            className: props.className,
-            size: (props as IllustratedIconProps).size,
-          })
-    return <div className={clsx} />
-  }
-
-  // Handle the discriminated union by using type assertion
-  // This is safe because LazyIllustrationProps inherits from IllustrationProps (excluding src and name)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return <Illustration ref={ref} src={illustration} {...(props as any)} />
-})
-
-LazyIllustration.displayName = 'LazyIllustration'