From b330c58c99b633ed9b0b2fa2d3f89da5e8d9dec2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Sun, 31 Dec 2023 01:15:18 +0100 Subject: [PATCH] docs: add first components and clean up --- .../components/core/consent-manager-form.md | 23 +++++++++++++++++++ .../docs/components/core/consent-manager.md | 22 ++++++++++++++++++ .../docs/components/core/privacy-shield.md | 21 +++++++++++++++++ packages/docs/docs/new-structure.md | 2 +- packages/docs/docs/provider.md | 17 -------------- packages/docs/docs/todo.md | 6 +++++ packages/docs/docs/use-something.md | 6 ----- packages/docs/sidebars.js | 9 ++++++-- 8 files changed, 80 insertions(+), 26 deletions(-) create mode 100644 packages/docs/docs/components/core/consent-manager-form.md create mode 100644 packages/docs/docs/components/core/consent-manager.md create mode 100644 packages/docs/docs/components/core/privacy-shield.md delete mode 100644 packages/docs/docs/provider.md create mode 100644 packages/docs/docs/todo.md delete mode 100644 packages/docs/docs/use-something.md diff --git a/packages/docs/docs/components/core/consent-manager-form.md b/packages/docs/docs/components/core/consent-manager-form.md new file mode 100644 index 00000000..61619b96 --- /dev/null +++ b/packages/docs/docs/components/core/consent-manager-form.md @@ -0,0 +1,23 @@ +# ConsentManagerForm + +`ConsentManagerForm` is a React component designed to provide a basic, unstyled form enabling users to control their consent choices for different integrations. This component is particularly useful as a reference or starting point for integrating a custom consent form. It facilitates the enabling or disabling of integrations based on user preferences. For a pre-styled version, consider exploring our default interface. + +## Props +| Prop | Type | Description | +|----------------|-----------------------------|--------------------------------------------------------------| +| `formComponent`| `React.ComponentType` | Optional. A custom form component to override the default. | +| `...props` | `unknown` | Any additional props are passed down to the form component. | + +## Example Usage +```jsx +import { ConsentManagerForm } from '@consent-manager/core'; + +const MyConsentForm = () => { + // Custom form component (optional) + const CustomFormComponent = ...; + + return ( + + ); +}; +``` diff --git a/packages/docs/docs/components/core/consent-manager.md b/packages/docs/docs/components/core/consent-manager.md new file mode 100644 index 00000000..c0699220 --- /dev/null +++ b/packages/docs/docs/components/core/consent-manager.md @@ -0,0 +1,22 @@ +# ConsentManager + +`ConsentManager` is the core component that provides context and state management for all consent-related functionality. It should wrap the root of your application. + +## Props +| Prop | Type | Description | +|---------------------|---------------------------------------|--------------------------------------------------------------| +| `config` | `ConsentManagerConfig` | Configuration object for Consent Manager. | +| `fallbackComponent` | `React.ComponentType` | Optional. Custom fallback component for unconsented integrations. | +| `store` | `ConsentManagerStore` | Storage mechanism for consent decisions. | +| `children` | `React.ReactNode` | The application's components. | + +## Example Usage +```jsx +import { ConsentManager } from '@consent-manager/core'; + +const App = () => ( + + {/* Rest of your application */} + +); +``` \ No newline at end of file diff --git a/packages/docs/docs/components/core/privacy-shield.md b/packages/docs/docs/components/core/privacy-shield.md new file mode 100644 index 00000000..0dc1390f --- /dev/null +++ b/packages/docs/docs/components/core/privacy-shield.md @@ -0,0 +1,21 @@ +# PrivacyShield + +`PrivacyShield` is a component that conditionally renders children based on the consent decision for a specific integration. It's typically used to wrap content that should only be displayed if the user has consented to the associated integration. + +## Props +| Prop | Type | Description | +|--------------|-----------------------------|--------------------------------------------------------------| +| `id` | `string` | The identifier for the integration to check consent for. | +| `children` | `React.ReactNode` | The content to render if consent is given. | +| `...props` | `unknown` | Additional props passed to the fallback component. | + +## Example Usage +```jsx +import { PrivacyShield } from '@consent-manager/core'; + +const YouTubeEmbed = ({ videoId }) => ( + + {/* Your YouTube embed component */} + +); +``` \ No newline at end of file diff --git a/packages/docs/docs/new-structure.md b/packages/docs/docs/new-structure.md index c1b9e2d3..b49a30d1 100644 --- a/packages/docs/docs/new-structure.md +++ b/packages/docs/docs/new-structure.md @@ -21,7 +21,7 @@ * @todo sub-section that turns all of this into typescript? (or have separate typescript tutorial?) * @todo add another guide on how to handle tracking in single page applications (or ones that use routers) * @todo we actually need to list the config options (COMPONENETS dir????) - +* @todo document helper functions (getForegroundColor, createIconComponentFromSimpleIconsSvgPath) * integrations * make more examples on how to track with certain integrations (for example matomo track events, page view and so on) diff --git a/packages/docs/docs/provider.md b/packages/docs/docs/provider.md deleted file mode 100644 index d7e25d1d..00000000 --- a/packages/docs/docs/provider.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: provider -title: ConsentManager (Provider) ---- - -You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/). - -export const Highlight = ({children, color}) => ( {children} ); - -Docusaurus green and Facebook blue are my favorite colors. - -I can write **Markdown** alongside my _JSX_! diff --git a/packages/docs/docs/todo.md b/packages/docs/docs/todo.md new file mode 100644 index 00000000..8956c0be --- /dev/null +++ b/packages/docs/docs/todo.md @@ -0,0 +1,6 @@ +--- +id: todo +title: This Page is Under Construction +--- + +Apologies for the inconvenience. This page is currently in progress. We're actively working on adding more content here, so stay tuned! \ No newline at end of file diff --git a/packages/docs/docs/use-something.md b/packages/docs/docs/use-something.md deleted file mode 100644 index eac34960..00000000 --- a/packages/docs/docs/use-something.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: use-something -title: useSomething hook ---- - -This is a link to [another document.](about.md) This is a link to an [external page.](http://www.example.com/) diff --git a/packages/docs/sidebars.js b/packages/docs/sidebars.js index 40263ae2..c85994c4 100644 --- a/packages/docs/sidebars.js +++ b/packages/docs/sidebars.js @@ -2,8 +2,13 @@ module.exports = { someSidebar: { 'Consent Manager': ['about', 'quick-start-guide'], Guides: ['guides/client-side-routing'], - Components: ['provider'], - Hooks: ['use-something'], + 'Core Components': [ + 'components/core/consent-manager', + 'components/core/consent-manager-form', + 'components/core/privacy-shield', + ], + 'Core Hooks': ['todo'], + 'Default Interface': ['todo'], Integrations: [ 'integrations/algolia', 'integrations/google-analytics',