@dracor/react 0.8.0 → 1.0.0-alpha.2

package/README.md

@@ -1,6 +1,6 @@
 # dracor-react
 
-The *DraCor React Component Library* provides reusable [react](https://react.dev)
+The _DraCor React Component Library_ provides reusable [react](https://react.dev)
 components for various [DraCor](https://dracor.org) and related projects.
 
 The components are documented in
@@ -14,33 +14,57 @@ First add the DraCor React components to your react project:
 npm i @dracor/react
 # or
 yarn add @dracor/react
+# or
+pnpm add @dracor/react
+```
+
+Then add the following two lines to your index.css file to import the DraCor
+Tailwind theme and make the tailwind compiler aware of the utility classes the
+DraCor components are using:
+
+```css
+@import "@dracor/react/dracor.css";
+@source "../node_modules/@dracor/react";
 ```
 
-Then adjust your tailwind.config.js to make the DraCor styles available to your
-project:
-
-```js
-// tailwind.config.js
-module.exports = {
-  // make the library available to the tailwind compiler
-  content: [
-    './node_modules/@dracor/react/**/*.js',
-    './src/**/*.{js,jsx,ts,tsx}',
-  ],
-  // add the DraCor Tailwindcss plugin
-  plugins: [require('@dracor/react/tailwind')],
-
-  // ... your customisations
-};
+### React Helmet integration
+
+Several components optionally integrate with
+[React Helmet](https://github.com/staylor/react-helmet-async), which is a peer
+dependency of this package:
+
+```sh
+npm i react-helmet-async
 ```
 
+If you intend to make use of this integration you need to set up the
+`HelmetProvider`:
+
+```jsx
+// index.tsx
+import { HelmetProvider } from 'react-helmet-async';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <HelmetProvider>
+    <App />
+  </HelmetProvider>
+)
+```
+
+See https://github.com/staylor/react-helmet-async#usage for details.
+
 ## Publication
 
 To release a new version to npmjs.com you need to be a member of the
 [dracor organization](https://www.npmjs.com/org/dracor).
 
 ```sh
-yarn release
+pnpm release
 ```
 
 ## License

package/dist/index.d.ts

@@ -1,103 +1,204 @@
-/// <reference types="react" />
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ColumnDef, SortingState } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
+import { SortingState } from '@tanstack/react-table';
+
+/**
+ * Renders a Swagger UI page for the provided OpenAPI specification.
+ *
+ * This component requires `swagger-ui-react` and `@types/swagger-ui-react` to
+ * be installed as peer dependencies.
+ *
+ * For proper styling the Swagger UI stylesheet needs to be imported:
+ *
+ * ```
+ * import {ApiDoc} from '@dracor/react';
+ * import 'swagger-ui-react/swagger-ui.css';
+ *
+ * <ApiDoc url="/api.yaml" />
+ * ```
+ */
+export declare function ApiDoc({ url, title }: Props): JSX.Element;
+
+declare interface Author {
+    name: string;
+    pseudonym?: string;
+    ref?: string;
+}
+
+export declare function AuthorInfo({ wikidataId, name: fullname, birthLabel, deathLabel, unknownLabel, }: Props_2): JSX.Element;
+
+export declare const Authors: ({ data }: Props_3) => JSX.Element;
+
+export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
+    value: string | number;
+    onChange: (value: string | number) => void;
+    debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>): JSX.Element;
+
+/**
+ * The download button displays an icon for the supported file types. If the
+ * type is omitted the download file name is displayed as link text.
+ */
+export declare function DownloadButton({ href, type, name }: Props_4): JSX.Element;
+
+export declare function formatEra(year: string, ceBefore?: number): string;
+
+export declare function formatYear(year: number | string, locale?: string): string;
+
+export declare function IdCopy({ children, className, uri, prefix, icon, }: Props_5): JSX.Element;
+
+export declare function IdLink({ showLabel, children, className }: Props_6): JSX.Element;
+
+declare interface Item {
+    label: string;
+    href: string;
+    selected?: boolean;
+}
+
+export declare function LanguageMenu({ languages, current, onSelect, }: Props_7): JSX.Element;
+
+export declare function NavBar({ title, logo, logoClass, version, gitHubUrl, gitHubIcon, gitHubTitle, addItem, navItems, }: NavBarProps): JSX.Element;
+
+declare interface NavBarProps {
+    title: string;
+    logo?: string;
+    logoClass?: string;
+    version?: string;
+    gitHubUrl?: string;
+    gitHubIcon?: JSX_2.Element;
+    gitHubTitle?: string;
+    navItems?: (Props_8 | Props_9)[];
+    addItem?: JSX_2.Element;
+}
+
+declare interface Props {
+    /**
+     * URL to OpenAPI specification
+     */
+    url: string;
+    /**
+     * Optional page title passed to `Helmet`
+     */
+    title?: string;
+}
+
+declare interface Props_10<TData = unknown> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    defaultSort?: SortingState;
+}
+
+declare interface Props_11 {
+    data: TabData[];
+}
+
+declare interface Props_12 {
+    /**
+     * URL to a TEI document
+     */
+    url: string;
+}
+
+declare interface Props_13 {
+    written?: number;
+    premiere?: number;
+    print?: number;
+    locale?: string;
+    labelWritten?: string;
+    labelPremiered?: string;
+    labelPrinted?: string;
+}
+
+declare interface Props_2 {
+    wikidataId: string;
+    name?: string;
+    birthLabel?: string;
+    deathLabel?: string;
+    unknownLabel?: string;
+}
+
+declare interface Props_3 {
+    data: Author[];
+}
+
+declare interface Props_4 {
+    /**
+     * URL to download
+     */
+    href: string;
+    /**
+     * Download file name
+     *
+     * The name needs to start with an ASCII character or a digit. Otherwise the
+     * name "download" will be used.
+     */
+    name: string;
+    /**
+     * File type of the download
+     */
+    type?: 'bibtex' | 'csv' | 'gexf' | 'graphml' | 'json' | 'rdf' | 'ris' | 'tei' | 'txt';
+}
+
+declare interface Props_5 {
+    children: string;
+    prefix?: string;
+    uri?: string;
+    className?: string;
+    icon?: 'ein' | 'dracor';
+}
+
+declare interface Props_6 {
+    button?: boolean;
+    showLabel?: boolean;
+    className?: string;
+    children: string;
+}
+
+declare interface Props_7 {
+    languages: string[];
+    current?: string;
+    onSelect: (lang: string) => void;
+}
+
+declare interface Props_8 {
+    label: string;
+    href: string;
+    active?: boolean;
+    className?: string;
+}
+
+declare interface Props_9 {
+    label: string;
+    items: Item[];
+    menuClass?: string;
+}
+
+declare interface TabData {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+
+export declare function Table<T>({ columns, data: initialData, defaultSort }: Props_10<T>): JSX.Element;
+
+export declare function Tabs({ data: tabs }: Props_11): JSX.Element;
+
+/**
+ * Component rendering a TEI document using [CETEIcean](https://github.com/TEIC/CETEIcean)
+ *
+ * The DraCor Tailwind theme provides some styling for the TEI elements. Import
+ * the theme adding `@import "@dracor/react/dracor.css";` to your index.css.
+ */
+export declare function TEIText({ url }: Props_12): JSX.Element;
+
+export declare function Years({ written, premiere, print, locale, labelPremiered, labelPrinted, labelWritten, }: Props_13): JSX.Element;
+
+export { }
 
-interface Props$8 {
-    url: string;
-    title?: string;
-}
-declare function ApiDoc({ url, title }: Props$8): react_jsx_runtime.JSX.Element;
-
-interface Author {
-    name: string;
-    pseudonym?: string;
-    ref?: string;
-}
-interface Props$7 {
-    data: Author[];
-}
-declare const Authors: ({ data }: Props$7) => react_jsx_runtime.JSX.Element;
-
-declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
-    value: string | number;
-    onChange: (value: string | number) => void;
-    debounce?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>): react_jsx_runtime.JSX.Element;
-
-interface Props$6 {
-    children: string;
-    prefix?: string;
-    uri?: string;
-    className?: string;
-}
-declare function IdCopy({ children, className, uri, prefix }: Props$6): react_jsx_runtime.JSX.Element;
-
-interface Props$5 {
-    button?: boolean;
-    showLabel?: boolean;
-    className?: string;
-    children: string;
-}
-declare function IdLink({ showLabel, children, className }: Props$5): react_jsx_runtime.JSX.Element;
 
-interface Props$4 {
-    label: string;
-    href: string;
-    active?: boolean;
-    className?: string;
-}
-
-interface Item {
-    label: string;
-    href: string;
-    selected?: boolean;
-}
-interface Props$3 {
-    label: string;
-    items: Item[];
-    menuClass?: string;
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof dummyRouter;
+    }
 }
-
-interface NavBarProps {
-    title: string;
-    logo?: string;
-    logoClass?: string;
-    version?: string;
-    gitHubUrl?: string;
-    gitHubIcon?: JSX.Element;
-    navItems?: (Props$4 | Props$3)[];
-}
-declare function NavBar({ title, logo, logoClass, version, gitHubUrl, gitHubIcon, navItems }: NavBarProps): react_jsx_runtime.JSX.Element;
-
-interface Props$2 {
-    data: any[];
-    columns: ColumnDef<any>[];
-    defaultSort?: SortingState;
-}
-declare const Table: ({ columns, data: initialData, defaultSort }: Props$2) => react_jsx_runtime.JSX.Element;
-
-interface TabData {
-    label: string;
-    href: string;
-    active?: boolean;
-}
-interface Props$1 {
-    data: TabData[];
-}
-declare function Tabs({ data: tabs }: Props$1): react_jsx_runtime.JSX.Element;
-
-interface Props {
-    written?: number;
-    premiere?: number;
-    print?: number;
-    locale?: string;
-    labelWritten?: string;
-    labelPremiered?: string;
-    labelPrinted?: string;
-}
-declare function Years({ written, premiere, print, locale, labelPremiered, labelPrinted, labelWritten, }: Props): react_jsx_runtime.JSX.Element;
-
-declare function formatEra(year: string, ceBefore?: number): string;
-declare function formatYear(year: number | string, locale?: string): string;
-
-export { ApiDoc, Authors, DebouncedInput, IdCopy, IdLink, NavBar, Table, Tabs, Years, formatEra, formatYear };