Browse Source

chore: Include React component/hooks docs

Michael Bromley 2 years ago
parent
commit
6141a8e3f1

+ 40 - 0
docs/docs/reference/admin-ui-api/react-components/action-bar.md

@@ -0,0 +1,40 @@
+---
+title: "ActionBar"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## ActionBar
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/ActionBar.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A container for the primary actions on a list or detail page
+
+*Example*
+
+```ts
+import { ActionBar } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <ActionBar leftContent={<div>Optional left content</div>}>
+      <button className='button primary'>Primary action</button>
+    </ActionBar>
+  );
+}
+```
+
+```ts title="Signature"
+function ActionBar(props: PropsWithChildren<{ leftContent?: ReactNode }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren&#60;{ leftContent?: ReactNode }&#62;`} />
+

+ 40 - 0
docs/docs/reference/admin-ui-api/react-components/card.md

@@ -0,0 +1,40 @@
+---
+title: "Card"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## Card
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/Card.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A card component which can be used to group related content.
+
+*Example*
+
+```ts
+import { Card } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <Card title='My Title'>
+      <p>Some content</p>
+    </Card>
+  );
+}
+```
+
+```ts title="Signature"
+function Card(props: PropsWithChildren<{ title?: string; paddingX?: boolean }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren&#60;{ title?: string; paddingX?: boolean }&#62;`} />
+

+ 38 - 0
docs/docs/reference/admin-ui-api/react-components/cds-icon.md

@@ -0,0 +1,38 @@
+---
+title: "CdsIcon"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## CdsIcon
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/CdsIcon.tsx" sourceLine="47" packageName="@vendure/admin-ui" />
+
+A React wrapper for the Clarity UI icon component.
+
+*Example*
+
+```ts
+import { userIcon } from '@cds/core/icon';
+import { CdsIcon } from '@vendure/admin-ui/react';
+
+registerCdsIcon(userIcon);
+export function MyComponent() {
+   return <CdsIcon icon={userIcon} badge="warning" solid size="lg"></CdsIcon>;
+}
+```
+
+```ts title="Signature"
+function CdsIcon(props: { icon: IconShapeTuple; className?: string } & Partial<CdsIconProps>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`{ icon: IconShapeTuple; className?: string } &#38; Partial&#60;CdsIconProps&#62;`} />
+

+ 46 - 0
docs/docs/reference/admin-ui-api/react-components/form-field.md

@@ -0,0 +1,46 @@
+---
+title: "FormField"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## FormField
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/FormField.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A wrapper around form fields which provides a label, tooltip and error message.
+
+*Example*
+
+```ts
+import { FormField } from '@vendure/admin-ui/react';
+
+export function MyReactComponent() {
+    return (
+       <FormField label="My field" tooltip="This is a tooltip" invalid errorMessage="This field is invalid">
+           <input type="text" />
+       </FormField>
+    );
+}
+```
+
+```ts title="Signature"
+function FormField(props: PropsWithChildren<{
+        for?: string;
+        label?: string;
+        tooltip?: string;
+        invalid?: boolean;
+        errorMessage?: string;
+    }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren&#60;{         for?: string;         label?: string;         tooltip?: string;         invalid?: boolean;         errorMessage?: string;     }&#62;`} />
+

+ 14 - 0
docs/docs/reference/admin-ui-api/react-components/index.md

@@ -0,0 +1,14 @@
+---
+title: "React Components"
+isDefaultIndex: true
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />

+ 38 - 0
docs/docs/reference/admin-ui-api/react-components/link.md

@@ -0,0 +1,38 @@
+---
+title: "Link"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## Link
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/Link.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A React component which renders an anchor tag and navigates to the specified route when clicked.
+This is useful when you want to use a React component in a Vendure UI plugin which navigates to
+a route in the admin-ui.
+
+*Example*
+
+```ts
+import { Link } from '@vendure/admin-ui/react';
+
+export const MyReactComponent = () => {
+    return <Link href="/extensions/my-extension">Go to my extension</Link>;
+}
+```
+
+```ts title="Signature"
+function Link(props: PropsWithChildren<{ href: string; [props: string]: any }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren&#60;{ href: string; [props: string]: any }&#62;`} />
+

+ 40 - 0
docs/docs/reference/admin-ui-api/react-components/page-block.md

@@ -0,0 +1,40 @@
+---
+title: "PageBlock"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## PageBlock
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/PageBlock.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A container for page content which provides a consistent width and spacing.
+
+*Example*
+
+```ts
+import { PageBlock } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <PageBlock>
+      ...
+    </PageBlock>
+  );
+}
+```
+
+```ts title="Signature"
+function PageBlock(props: PropsWithChildren): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren`} />
+

+ 40 - 0
docs/docs/reference/admin-ui-api/react-components/page-detail-layout.md

@@ -0,0 +1,40 @@
+---
+title: "PageDetailLayout"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## PageDetailLayout
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-components/PageDetailLayout.tsx" sourceLine="22" packageName="@vendure/admin-ui" />
+
+A responsive container for detail views with a main content area and an optional sidebar.
+
+*Example*
+
+```ts
+import { PageDetailLayout } from '@vendure/admin-ui/react';
+
+export function MyComponent() {
+  return (
+    <PageDetailLayout sidebar={<div>Sidebar content</div>}>
+      <div>Main content</div>
+    </PageDetailLayout>
+  );
+}
+```
+
+```ts title="Signature"
+function PageDetailLayout(props: PropsWithChildren<{ sidebar?: ReactNode }>): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`PropsWithChildren&#60;{ sidebar?: ReactNode }&#62;`} />
+

+ 33 - 0
docs/docs/reference/admin-ui-api/react-hooks/use-route-params.md

@@ -0,0 +1,33 @@
+---
+title: "UseRouteParams"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## useRouteParams
+
+<GenerationInfo sourceFile="packages/admin-ui/src/lib/react/src/react-hooks/use-route-params.ts" sourceLine="23" packageName="@vendure/admin-ui" />
+
+Provides access to the current route params and query params.
+
+*Example*
+
+```ts
+import { useRouteParams } from '@vendure/admin-ui/react';
+import React from 'react';
+
+export function MyComponent() {
+    const { params, queryParams } = useRouteParams();
+    // ...
+    return <div>{ params.id }</div>;
+}
+```
+
+```ts title="Signature"
+function useRouteParams(): void
+```