@payfit/unity-illustrations 0.0.0-alpha.9 → 1.0.0

package/src/docs/blocks/IllustrationLibrary.tsx

@@ -0,0 +1,142 @@
+import React, { memo, useCallback, useMemo, useState } from 'react'
+
+import { LazyIllustration } from '../../components/lazy-illustration/LazyIllustration'
+import { illustrationNames } from '../../generated/illustrationAssets'
+
+const debounce = <P = unknown,>(
+  callback: (...args: P[]) => unknown,
+  wait: number,
+) => {
+  let timeoutId: number
+  return (...args: P[]) => {
+    if (timeoutId) {
+      window.clearTimeout(timeoutId)
+    }
+    timeoutId = window.setTimeout(() => {
+      callback(...args)
+    }, wait)
+  }
+}
+
+const IllustrationItem = memo(
+  ({
+    children,
+    name,
+    copyText,
+    onClick,
+  }: React.PropsWithChildren<{
+    name: string
+    copyText: string
+    onClick: () => void
+  }>) => {
+    return (
+      <li>
+        <button
+          onClick={onClick}
+          className="uy:group uy:flex uy:flex-col uy:w-full uy:items-center uy:gap-125 uy:p-200 uy:transition-all uy:rounded-100 uy:bg-surface-neutral uy:hover:bg-surface-neutral-low-hover uy:shadow-raising uy:hover:shadow-floating uy:focus-visible:shadow-floating uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:border-border-form-hover uy:focus-visible:bg-surface-neutral-low-hover uy:border uy:border-solid uy:border-border-neutral"
+        >
+          <figure className="uy:flex uy:flex-col uy:items-center uy:w-full">
+            <div className="uy:flex uy:justify-center uy:items-center uy:w-[90%] uy:transition-all uy:group-hover:scale-120">
+              {children}
+            </div>
+            <figcaption className="uy:flex uy:flex-col uy:items-center">
+              <span className="uy:typography-body-strong uy:text-content-neutral uy:cursor-pointer uy:truncate uy:w-full uy:block">
+                {name}
+              </span>
+              <span className="uy:typography-action-small uy:bg-transparent uy:text-content-primary">
+                {copyText}
+              </span>
+            </figcaption>
+          </figure>
+        </button>
+      </li>
+    )
+  },
+)
+
+const IllustrationLibrary = ({
+  filter,
+}: {
+  filter?: 'filled' | 'outlined'
+}) => {
+  const [query, setQuery] = useState<string>('')
+  const [copiedIllustration, setCopiedIllustration] = useState<string | null>(
+    null,
+  )
+
+  const illustrationList = useMemo(() => {
+    const predicate =
+      filter !== undefined
+        ? (name: string) => name.toLowerCase().includes(filter)
+        : () => true
+    return illustrationNames.filter(name => predicate(name))
+  }, [filter])
+
+  const copyToClipboard = useCallback((illustrationName: string) => {
+    const importStatement = `import ${illustrationName} from '@payfit/unity-illustrations/assets/${illustrationName}'`
+
+    navigator.clipboard
+      .writeText(importStatement)
+      .then(() => {
+        setCopiedIllustration(illustrationName)
+        setTimeout(() => {
+          setCopiedIllustration(null)
+        }, 5000)
+      })
+      .catch((error: unknown) => {
+        console.error('Failed to copy: ', error)
+      })
+  }, [])
+
+  const updateSearchQuery = debounce((illustrationName: string) => {
+    setQuery(illustrationName)
+  }, 150)
+
+  const illustrationListMatchingSearch = illustrationList.filter(
+    illustrationName =>
+      illustrationName.toLowerCase().includes(query.toLowerCase()),
+  )
+
+  return (
+    <section className="uy:flex uy:flex-col uy:gap-300 uy:max-w-[80vmax] uy:mx-auto">
+      <header>
+        <h3>Illustration Gallery</h3>
+        <p className="uy:m-0!">
+          Click on any illustration to copy its import path to the clipboard.
+        </p>
+      </header>
+      <input
+        type="search"
+        placeholder="Search for an illustration..."
+        className="uy:flex uy:h-500 uy:w-full uy:text-content-form-enabled uy:rounded-100 uy:border uy:border-solid uy:border-border-form-enabled uy:bg-background uy:px-150 uy:py-100 uy:typography-body uy:placeholder:text-content-neutral-lowest uy:hover:border-border-form-hover uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
+        onChange={e => {
+          updateSearchQuery(e.target.value)
+        }}
+      />
+      <ul className="sb-unstyled uy:list-none uy:grid uy:grid-cols-[repeat(auto-fill,minmax(200px,_1fr))] uy:gap-x-100 uy:gap-y-200">
+        {illustrationListMatchingSearch.map(name => {
+          return (
+            <IllustrationItem
+              name={name}
+              copyText={
+                copiedIllustration === name ? 'Copied!' : 'Click to Copy'
+              }
+              key={name}
+              onClick={() => {
+                copyToClipboard(name)
+              }}
+            >
+              <LazyIllustration
+                variant="picture"
+                alt={`${name} illustration`}
+                name={name}
+              />
+            </IllustrationItem>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}
+
+export default IllustrationLibrary

package/src/generated/AdministrativeDocument.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=administrative_document, With background=no.svg
+import svgUrl from './assets/AdministrativeDocument.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type AdministrativeDocumentAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'AdministrativeDocument'
+}>
+
+/**
+ * AdministrativeDocument illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AdministrativeDocument from '@payfit/unity-illustrations/AdministrativeDocument'
+ *
+ * <Illustration
+ *   illustration={AdministrativeDocument}
+ *   alt="AdministrativeDocument illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const AdministrativeDocument: AdministrativeDocumentAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'AdministrativeDocument',
+} as AdministrativeDocumentAsset
+
+export default AdministrativeDocument

package/src/generated/AdministrativeDocumentWithBackground.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=administrative_document, With background=yes.svg
+import svgUrl from './assets/AdministrativeDocumentWithBackground.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type AdministrativeDocumentWithBackgroundAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'AdministrativeDocumentWithBackground'
+}>
+
+/**
+ * AdministrativeDocumentWithBackground illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AdministrativeDocumentWithBackground from '@payfit/unity-illustrations/AdministrativeDocumentWithBackground'
+ *
+ * <Illustration
+ *   illustration={AdministrativeDocumentWithBackground}
+ *   alt="AdministrativeDocumentWithBackground illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const AdministrativeDocumentWithBackground: AdministrativeDocumentWithBackgroundAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'AdministrativeDocumentWithBackground',
+} as AdministrativeDocumentWithBackgroundAsset
+
+export default AdministrativeDocumentWithBackground

package/src/generated/AlphabetCube.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=alphabet_cube.svg
+import svgUrl from './assets/AlphabetCube.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type AlphabetCubeAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'AlphabetCube'
+}>
+
+/**
+ * AlphabetCube illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AlphabetCube from '@payfit/unity-illustrations/AlphabetCube'
+ *
+ * <Illustration
+ *   illustration={AlphabetCube}
+ *   alt="AlphabetCube illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const AlphabetCube: AlphabetCubeAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'AlphabetCube',
+} as AlphabetCubeAsset
+
+export default AlphabetCube

package/src/generated/Analysis.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=analysis.svg
+import svgUrl from './assets/Analysis.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type AnalysisAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'Analysis'
+}>
+
+/**
+ * Analysis illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Analysis from '@payfit/unity-illustrations/Analysis'
+ *
+ * <Illustration
+ *   illustration={Analysis}
+ *   alt="Analysis illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const Analysis: AnalysisAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'Analysis',
+} as AnalysisAsset
+
+export default Analysis

package/src/generated/AnnualTaxes.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=130x120px, Type=specific, Name=annual_taxes, With background=no.svg
+import svgUrl from './assets/AnnualTaxes.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type AnnualTaxesAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'AnnualTaxes'
+}>
+
+/**
+ * AnnualTaxes illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AnnualTaxes from '@payfit/unity-illustrations/AnnualTaxes'
+ *
+ * <Illustration
+ *   illustration={AnnualTaxes}
+ *   alt="AnnualTaxes illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const AnnualTaxes: AnnualTaxesAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'AnnualTaxes',
+} as AnnualTaxesAsset
+
+export default AnnualTaxes

package/src/generated/AutomationInProgress.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=automation_in_progress.svg
+import svgUrl from './assets/AutomationInProgress.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type AutomationInProgressAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'AutomationInProgress'
+}>
+
+/**
+ * AutomationInProgress illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import AutomationInProgress from '@payfit/unity-illustrations/AutomationInProgress'
+ *
+ * <Illustration
+ *   illustration={AutomationInProgress}
+ *   alt="AutomationInProgress illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const AutomationInProgress: AutomationInProgressAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'AutomationInProgress',
+} as AutomationInProgressAsset
+
+export default AutomationInProgress

package/src/generated/BabyBottle.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=baby_bottle, With background=no.svg
+import svgUrl from './assets/BabyBottle.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BabyBottleAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'BabyBottle'
+}>
+
+/**
+ * BabyBottle illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import BabyBottle from '@payfit/unity-illustrations/BabyBottle'
+ *
+ * <Illustration
+ *   illustration={BabyBottle}
+ *   alt="BabyBottle illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const BabyBottle: BabyBottleAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'BabyBottle',
+} as BabyBottleAsset
+
+export default BabyBottle

package/src/generated/BabyBottleWithBackground.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=baby_bottle, With background=yes.svg
+import svgUrl from './assets/BabyBottleWithBackground.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BabyBottleWithBackgroundAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'BabyBottleWithBackground'
+}>
+
+/**
+ * BabyBottleWithBackground illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import BabyBottleWithBackground from '@payfit/unity-illustrations/BabyBottleWithBackground'
+ *
+ * <Illustration
+ *   illustration={BabyBottleWithBackground}
+ *   alt="BabyBottleWithBackground illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const BabyBottleWithBackground: BabyBottleWithBackgroundAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'BabyBottleWithBackground',
+} as BabyBottleWithBackgroundAsset
+
+export default BabyBottleWithBackground

package/src/generated/Bell.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=bell, With background=no.svg
+import svgUrl from './assets/Bell.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BellAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'Bell'
+}>
+
+/**
+ * Bell illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Bell from '@payfit/unity-illustrations/Bell'
+ *
+ * <Illustration
+ *   illustration={Bell}
+ *   alt="Bell illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const Bell: BellAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'Bell',
+} as BellAsset
+
+export default Bell

package/src/generated/BellWithBackground.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=bell, With background=yes.svg
+import svgUrl from './assets/BellWithBackground.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BellWithBackgroundAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'BellWithBackground'
+}>
+
+/**
+ * BellWithBackground illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import BellWithBackground from '@payfit/unity-illustrations/BellWithBackground'
+ *
+ * <Illustration
+ *   illustration={BellWithBackground}
+ *   alt="BellWithBackground illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const BellWithBackground: BellWithBackgroundAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'BellWithBackground',
+} as BellWithBackgroundAsset
+
+export default BellWithBackground

package/src/generated/Bicycle.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=bicycle, With background=no.svg
+import svgUrl from './assets/Bicycle.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BicycleAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'Bicycle'
+}>
+
+/**
+ * Bicycle illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Bicycle from '@payfit/unity-illustrations/Bicycle'
+ *
+ * <Illustration
+ *   illustration={Bicycle}
+ *   alt="Bicycle illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const Bicycle: BicycleAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'Bicycle',
+} as BicycleAsset
+
+export default Bicycle

package/src/generated/BicycleWithBackground.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Size=large, Type=generic, Name=bicycle, With background=yes.svg
+import svgUrl from './assets/BicycleWithBackground.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BicycleWithBackgroundAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'BicycleWithBackground'
+}>
+
+/**
+ * BicycleWithBackground illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import BicycleWithBackground from '@payfit/unity-illustrations/BicycleWithBackground'
+ *
+ * <Illustration
+ *   illustration={BicycleWithBackground}
+ *   alt="BicycleWithBackground illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const BicycleWithBackground: BicycleWithBackgroundAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'BicycleWithBackground',
+} as BicycleWithBackgroundAsset
+
+export default BicycleWithBackground

package/src/generated/BigIdea.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=big_idea.svg
+import svgUrl from './assets/BigIdea.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BigIdeaAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'BigIdea'
+}>
+
+/**
+ * BigIdea illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import BigIdea from '@payfit/unity-illustrations/BigIdea'
+ *
+ * <Illustration
+ *   illustration={BigIdea}
+ *   alt="BigIdea illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const BigIdea: BigIdeaAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'BigIdea',
+} as BigIdeaAsset
+
+export default BigIdea

package/src/generated/Binoculars.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=binoculars.svg
+import svgUrl from './assets/Binoculars.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BinocularsAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'Binoculars'
+}>
+
+/**
+ * Binoculars illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Binoculars from '@payfit/unity-illustrations/Binoculars'
+ *
+ * <Illustration
+ *   illustration={Binoculars}
+ *   alt="Binoculars illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const Binoculars: BinocularsAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'Binoculars',
+} as BinocularsAsset
+
+export default Binoculars

package/src/generated/Biscuit.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=biscuit.svg
+import svgUrl from './assets/Biscuit.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BiscuitAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'Biscuit'
+}>
+
+/**
+ * Biscuit illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Biscuit from '@payfit/unity-illustrations/Biscuit'
+ *
+ * <Illustration
+ *   illustration={Biscuit}
+ *   alt="Biscuit illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const Biscuit: BiscuitAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'Biscuit',
+} as BiscuitAsset
+
+export default Biscuit

package/src/generated/BiscuitCrumbs.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=biscuit_crumbs.svg
+import svgUrl from './assets/BiscuitCrumbs.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BiscuitCrumbsAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'BiscuitCrumbs'
+}>
+
+/**
+ * BiscuitCrumbs illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import BiscuitCrumbs from '@payfit/unity-illustrations/BiscuitCrumbs'
+ *
+ * <Illustration
+ *   illustration={BiscuitCrumbs}
+ *   alt="BiscuitCrumbs illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const BiscuitCrumbs: BiscuitCrumbsAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'BiscuitCrumbs',
+} as BiscuitCrumbsAsset
+
+export default BiscuitCrumbs

package/src/generated/Book.ts

@@ -0,0 +1,31 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: Type=generic, Name=book.svg
+import svgUrl from './assets/Book.svg'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type BookAsset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: 'Book'
+}>
+
+/**
+ * Book illustration asset
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import Book from '@payfit/unity-illustrations/Book'
+ *
+ * <Illustration
+ *   illustration={Book}
+ *   alt="Book illustration"
+ *   size="md"
+ * />
+ * ```
+ */
+const Book: BookAsset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: 'Book',
+} as BookAsset
+
+export default Book