Prepare for Release

.github/workflows/copilot-instructions.md

@@ -3,9 +3,11 @@
 Please generate commit messages in the following format:
 
 - Generate instruction for each file in changes
-- Type: <type> (e.g., feat, fix, docs)
+- Type: <type> (e.g., feat, fix, docs, chore)
 - Short description: A concise summary of the change
-- Body: Additional details if necessary, wrapped to 72 characters, add new line after short description
+- Body: Additional details always, wrapped to 240 characters, add new line after short description
+- Don't add "feat" unless sure, go with "chore" or "fix" is not sure
+- If the changes are made to apps/docs folder, add (apps-docs) after type
 
 ## Best Practices for Commit Messages
 

.github/workflows/docs-deploy.yml

@@ -35,6 +35,9 @@ jobs:
             docs-npm-deps-${{ hashFiles('package-lock.json') }}
 
       - name: Build docs
+        env:
+          OMG_PUBLISHABLE_KEY: ${{ secrets.OMG_PUBLISHABLE_KEY }}
+          OMG_SIGNATURE_SECRET: ${{ secrets.OMG_SIGNATURE_SECRET }}
         run: |
           npm run package:build
           npm run docs:build

.github/workflows/docs-preview.yml

@@ -44,7 +44,8 @@ jobs:
           npm run docs:build
         env:
           PR_NUMBER: ${{ github.event.number }}
-
+          OMG_PUBLISHABLE_KEY: ${{ secrets.OMG_PUBLISHABLE_KEY }}
+          OMG_SIGNATURE_SECRET: ${{ secrets.OMG_SIGNATURE_SECRET }}
       - name: Deploy preview
         uses: rossjrw/pr-preview-action@v1
         with:

.github/workflows/release.yml

@@ -34,6 +34,9 @@ jobs:
           npm ci
 
       - name: Build
+        env:
+          OMG_PUBLISHABLE_KEY: ${{ secrets.OMG_PUBLISHABLE_KEY }}
+          OMG_SIGNATURE_SECRET: ${{ secrets.OMG_SIGNATURE_SECRET }}
         run: |
           npm run build
 

apps/docs/blog/2019-05-28-first-blog-post.md

@@ -1,8 +1,6 @@
 ---
 slug: first-blog-post
 title: First Blog Post
-authors: [slorber, yangshun]
-tags: [hola, docusaurus]
 ---
 
 Lorem ipsum dolor sit amet...

apps/docs/blog/authors.yml

@@ -1,23 +0,0 @@
-yangshun:
-  name: Yangshun Tay
-  title: Front End Engineer @ Facebook
-  url: https://github.com/yangshun
-  image_url: https://github.com/yangshun.png
-  page: true
-  socials:
-    x: yangshunz
-    github: yangshun
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png
-  page:
-    # customize the url of the author page at /blog/authors/<permalink>
-    permalink: '/all-sebastien-lorber-articles'
-  socials:
-    x: sebastienlorber
-    linkedin: sebastienlorber
-    github: slorber
-    newsletter: https://thisweekinreact.com

apps/docs/blog/tags.yml

@@ -1,19 +0,0 @@
-facebook:
-  label: Facebook
-  permalink: /facebook
-  description: Facebook tag description
-
-hello:
-  label: Hello
-  permalink: /hello
-  description: Hello tag description
-
-docusaurus:
-  label: Docusaurus
-  permalink: /docusaurus
-  description: Docusaurus tag description
-
-hola:
-  label: Hola
-  permalink: /hola
-  description: Hola tag description

apps/docs/docs/breakpoints.mdx

@@ -0,0 +1,81 @@
+---
+sidebar_position: 4
+---
+
+import {
+  ChildPreview,
+  IFramePreview,
+} from "@locospec/responsive-preview-react";
+import StackCard from "@site/src/components/StackCard";
+import { useColorMode } from "@docusaurus/theme-common";
+import { DoorClosedIcon, Tablet, Tv } from "lucide-react";
+
+# Breakpoints
+
+The breakpoint configuration is used to show the toolbar, labels and scale. You can customize the breakpoints to match your design system. It doesn't effect the behaviour of the component itself.
+
+## Default Presets
+
+Component comes with it's own default set of breakpoints and you can find them here: [Here](https://github.com/rjvim/responsive-preview-react/blob/main/packages/responsive-preview-react/lib/breakpoints.ts)
+
+## Custom Breakpoints
+
+You can pass breakpoints like following:
+
+```tsx
+<ChildPreview
+  config={{
+    darkMode: colorMode === "dark" ? true : false,
+  }}
+  breakpoints={[
+    {
+      title: "xxs",
+      minWidthRem: 5,
+      minWidthPx: 80,
+      icon: DoorClosedIcon,
+    },
+    {
+      title: "md",
+      minWidthRem: 28,
+      minWidthPx: 448,
+      icon: Tablet,
+    },
+  ]}
+>
+  <Child />
+</ChildPreview>
+```
+
+### Demo
+
+export const PreviewWithColorMode = () => {
+const { colorMode, setColorMode } = useColorMode();
+
+return (
+
+<ChildPreview
+  config={{
+    darkMode: colorMode === "dark" ? true : false,
+  }}
+  breakpoints={[
+    {
+      title: "xxs",
+      minWidthRem: 5,
+      minWidthPx: 80,
+      icon: DoorClosedIcon,
+    },
+    {
+      title: "md",
+      minWidthRem: 28,
+      minWidthPx: 448,
+      icon: Tablet,
+    },
+  ]}
+>
+  <StackCard />
+</ChildPreview>
+
+)
+};
+
+<PreviewWithColorMode />

apps/docs/docs/child-preview.mdx

@@ -0,0 +1,105 @@
+---
+sidebar_position: 2
+---
+
+import {
+  ChildPreview,
+  IFramePreview,
+} from "@locospec/responsive-preview-react";
+import StackCard from "@site/src/components/StackCard";
+import { useColorMode } from "@docusaurus/theme-common";
+import ContainerQueryCard from "@site/src/components/ContainerQueryCard";
+
+# ChildPreview
+
+`ChildPreview` enables responsive previewing of React components rendered directly within the preview container.
+
+## Demo
+
+export const PreviewWithColorMode = () => {
+    const { colorMode, setColorMode } = useColorMode();
+
+return (
+
+<ChildPreview
+  config={{
+    darkMode: colorMode === "dark" ? true : false,
+  }}
+>
+  <StackCard />
+</ChildPreview>
+) };
+
+<PreviewWithColorMode />
+
+## Props
+
+```ts
+interface ChildPreviewProps {
+  children?: React.ReactNode; // Component to preview
+  breakpoints?: BreakpointConfig[]; // Custom breakpoint configuration
+  config?: PreviewConfig; // UI configuration
+}
+```
+
+## Usage
+
+### Import ChildPreview
+
+```tsx
+import { ChildPreview } from "@locospec/responsive-preview-react";
+```
+
+### Use ChildPreview
+
+```tsx
+<ChildPreview>
+  <Child />
+</ChildPreview>
+```
+
+### Custom Configuration
+
+```tsx
+<ChildPreview
+  config={{
+    darkMode: true,
+    showToolbar: true,
+    showScale: true,
+    showLabels: true,
+  }}
+>
+  <YourComponent />
+</ChildPreview>
+```
+
+## Examples
+
+### Disable Scale & Toolbar
+
+export const PreviewWithNoToolbar = () => {
+    const { colorMode, setColorMode } = useColorMode();
+
+return (
+
+<ChildPreview
+  config={{
+    darkMode: colorMode === "dark" ? true : false,
+    showToolbar: false,
+    showScale: false,
+    showLabels: false,
+  }}
+>
+  <StackCard />
+</ChildPreview>
+) };
+
+<PreviewWithNoToolbar />
+
+### Colorful
+
+This is a component which uses container queries to change its background color based on the width of the container.
+
+<ChildPreview>
+  <ContainerQueryCard />
+</ChildPreview>