docs: add first components and clean up

hashbite · Dec 31, 2023 · b330c58 · b330c58
1 parent 2e9e54f
commit b330c58
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 26 deletions.
diff --git a/packages/docs/docs/components/core/consent-manager-form.md 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<DecisionsFormProps>` | 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 (
+    <ConsentManagerForm formComponent={CustomFormComponent} />
+  );
+};
+```
diff --git a/packages/docs/docs/components/core/consent-manager.md 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<FallbackComponentProps>` | 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 = () => (
+  <ConsentManager config={myConfig} store={myStore}>
+    {/* Rest of your application */}
+  </ConsentManager>
+);
+```
diff --git a/packages/docs/docs/components/core/privacy-shield.md 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 }) => (
+  <PrivacyShield id="youtube">
+    {/* Your YouTube embed component */}
+  </PrivacyShield>
+);
+```
diff --git 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
diff --git a/packages/docs/docs/todo.md 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!
diff --git a/packages/docs/docs/use-something.md b/packages/docs/docs/use-something.md
diff --git 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',