Merge pull request #387 from FormidableLabs/update-branding

Nearform branding

Author: carbonrobot

.github/actions/setup/action.yml

@@ -0,0 +1,23 @@
+name: Setup
+description: Setup Build Step
+inputs:
+  node-version:
+    required: true
+    default: '18.x'
+
+runs:
+  using: "composite"
+  steps:
+    - uses: pnpm/action-setup@v3
+      with:
+        version: 7
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/code-check.yml

@@ -12,33 +12,9 @@ jobs:
   build:
     name: Check codebase (lint and typecheck)
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [ 18.x ]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - uses: pnpm/[email protected]
-        with:
-          version: 7
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
 
       - name: Check Code ${{ matrix.node-version }}
         run: pnpm lint

.github/workflows/release.yml

@@ -18,29 +18,8 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - uses: pnpm/[email protected]
-        with:
-          version: 7
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
 
       - name: Build packages
         run: pnpm run build
@@ -49,9 +28,6 @@ jobs:
         id: changesets
         uses: changesets/action@v1
         with:
-          # Note: Our `package.json:scripts.version` currently doesn't have `--fix-lockfile` for
-          # `pnpm install` because of a PNPM bug of some kind.
-          # https://github.com/FormidableLabs/spectacle/issues/1156
           version: pnpm run version
           publish: pnpm changeset publish
         env:

README.md

@@ -1,14 +1,13 @@
 <p align="center">
-  <a href="https://formidable.com/open-source/" target="_blank">
-    <img alt="React Live — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/react-live/master/react-live-Hero.png" />
+  <a href="https://commerce.nearform.com/open-source/" target="_blank">
+    <img alt="React Live — Formidable, We build the modern web" src="https://oss.nearform.com/api/banner.svg?text=react+live" />
   </a>
 </p>
 <p align="center">
 <strong>A flexible playground for live editing React code</strong>
 <br><br>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/dm/react-live.svg"></a>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/v/react-live.svg"></a>
-<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
 <img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
 <img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg">
 <a href="https://github.com/FormidableLabs/react-live#maintenance-status">
@@ -22,7 +21,7 @@ The library is structured modularly and lets you style and compose its component
 
 <p align="center"><img src="https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif" width=500></p>
 
-Come learn more at our [docs site](https://formidable.com/open-source/react-live)!
+Come learn more at our [docs site](https://commerce.nearform.com/open-source/react-live)!
 
 ## Support
 

docs/introduction.mdx

@@ -7,8 +7,6 @@ import { DemoLiveEditor } from "../website/src/components/live-edit";
 
 # Introduction
 
-[![React Live — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/react-live/master/react-live-Hero.png)](https://formidable.com/open-source/)
-
 **React Live** brings you the ability to render React components with editable source code and live preview. React Live is structured modularly and lets you style and compose its components freely. The following demos show typical use cases including the editor, preview, and error pane components.
 
 To see React Live in action, make changes to the following editor panes:
@@ -30,6 +28,17 @@ export const jsxExample = `
 
 <DemoLiveEditor code={jsxExample} />
 
+```jsx
+import { LiveProvider, LiveEditor, LivePreview } from "react-live";
+
+<LiveProvider code={code}>
+  <div className="grid grid-cols-2 gap-4">
+    <LiveEditor className="font-mono" />
+    <LivePreview />
+  </div>
+</LiveProvider>
+```
+
 ### Render-function Demo
 
 To render a series of components or render components beyond just JSX, React Live also provides a `render` function to pass JSX into when the `noInline` prop is present. This lets you render multiple or functional components with hooks. This example shows a functional component with a `useState` hook.
@@ -65,6 +74,17 @@ render(<Counter label="Counter" />)
 
 <DemoLiveEditor code={noInlineExample} noInline />
 
+```jsx
+import { LiveProvider, LiveEditor, LivePreview } from "react-live";
+
+<LiveProvider code={code} noInline>
+  <div className="grid grid-cols-2 gap-4">
+    <LiveEditor className="font-mono" />
+    <LivePreview />
+  </div>
+</LiveProvider>
+```
+
 ### Syntax Error Demo
 
 React Live can also display customizable errors when your code contains errors.
@@ -74,3 +94,15 @@ const badVariable = ;
 `.trim();
 
 <DemoLiveEditor code={syntaxError} />
+
+```jsx
+import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live";
+
+<LiveProvider code={code}>
+  <div className="grid grid-cols-2 gap-4">
+    <LiveEditor className="font-mono" />
+    <LivePreview />
+    <LiveError className="text-red-800 bg-red-100 mt-2" />
+  </div>
+</LiveProvider>
+```