Add React examples (#67)

* feat: example app for React 18 + component fixes * refactor: move examples to app folder * refactor: refactor storybook + component exports * refactor: remove access tokens * fix: storybook build * fix: fix storybook build * fix: remove console.log * fix: release tsconfig lib * fix: build-storybook prepare * refactor: revert counter changes * refactor: add react and react-dom types
propeldata · Apr 20, 2023 · 26fa19a · 26fa19a · vercel · Apr 20, 2023
1 parent 70f5215
commit 26fa19a
Show file tree

Hide file tree

Showing 1,313 changed files with 9,782 additions and 2,359 deletions.
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -11,3 +11,5 @@ supportedArchitectures:
   cpu: [x64, arm64]
 
 npmRegistryServer: "https://registry.npmjs.com/"
+
+nmHoistingLimits: "dependencies"
diff --git a/app/examples/react-16/.editorconfig b/app/examples/react-16/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/app/examples/react-16/.gitignore b/app/examples/react-16/.gitignore
@@ -0,0 +1,11 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+!.yarn/cache
+#.pnp.*
diff --git a/app/examples/react-16/README.md b/app/examples/react-16/README.md
@@ -0,0 +1 @@
+# react-17
diff --git a/app/examples/react-16/jsconfig.json b/app/examples/react-16/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
diff --git a/app/examples/react-16/package.json b/app/examples/react-16/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "react-16",
+  "scripts": {
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start"
+  },
+  "dependencies": {
+    "@propeldata/react-counter": "workspace:^",
+    "@propeldata/react-leaderboard": "workspace:^",
+    "@propeldata/react-time-series": "workspace:^",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-scripts": "^5.0.1"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/app/examples/react-16/public/index.html b/app/examples/react-16/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Propel UI Kit React 16.8 Testing App</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/app/examples/react-16/src/App.js b/app/examples/react-16/src/App.js
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import {
+  TimeSeriesStaticTest,
+  TimeSeriesConnectedTest,
+  LeaderboardStaticTest,
+  LeaderboardConnectedTest,
+  CounterStaticTest,
+  CounterConnectedTest
+} from 'components'
+
+export default function App() {
+  return (
+    <main>
+      <h1 className="m-3 text-3xl">React 16.8 Testing App</h1>
+      <hr />
+      <div className="grid grid-cols-2 gap-2">
+        <TimeSeriesStaticTest />
+        <TimeSeriesConnectedTest />
+        <LeaderboardStaticTest />
+        <LeaderboardConnectedTest />
+        <CounterStaticTest />
+        <CounterConnectedTest />
+      </div>
+    </main>
+  )
+}
diff --git a/app/examples/react-16/src/components/CounterConnectedTest.jsx b/app/examples/react-16/src/components/CounterConnectedTest.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Counter, RelativeTimeRange } from '@propeldata/react-counter'
+
+export function CounterConnectedTest() {
+  const [fontColor, setFontColor] = React.useState('#000')
+
+  return (
+    <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
+      <h2 className="text-2xl">Counter Connected</h2>
+      <div className="h-60 flex justify-center items-center">
+        <Counter
+          query={{
+            accessToken: '<PROPEL_ACCESS_TOKEN>',
+            metric: 'queryCount',
+            timeRange: {
+              relative: RelativeTimeRange.LastNDays,
+              n: 30
+            }
+          }}
+          styles={{ font: { size: '3rem', color: fontColor } }}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <input
+          className="border-2 bg-white p-1 h-9"
+          type="color"
+          onChange={(event) => setFontColor(event.target.value)}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/app/examples/react-16/src/components/CounterStaticTest.jsx b/app/examples/react-16/src/components/CounterStaticTest.jsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Counter } from '@propeldata/react-counter'
+
+import { useFakeData } from 'hooks/useFakeData'
+
+const mockData1 = {
+  value: '3291243782'
+}
+
+const mockData2 = {
+  value: '1214256124'
+}
+
+export function CounterStaticTest() {
+  const [mockData, setMockData] = React.useState(mockData1)
+  const [fontColor, setFontColor] = React.useState('#000')
+
+  const { data, isLoading } = useFakeData(mockData)
+
+  const handleReFetchMock = () => {
+    setMockData({ value: undefined })
+    setTimeout(() => {
+      setMockData(mockData2)
+    }, 2000)
+  }
+
+  return (
+    <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
+      <h2 className="text-2xl">Counter Static</h2>
+      <div className="h-60 flex justify-center items-center">
+        <Counter
+          value={data?.value}
+          loading={isLoading || !data?.value}
+          styles={{ font: { size: '3rem', color: fontColor } }}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          className="border-2 bg-white p-1 h-9"
+          onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}
+        >
+          Switch mock data
+        </button>
+        <input
+          className="border-2 bg-white p-1 h-9"
+          type="color"
+          onChange={(event) => setFontColor(event.target.value)}
+        />
+        <button className="border-2 bg-white p-1 h-9" onClick={handleReFetchMock}>
+          Refetch Mock
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/examples/react-16/src/components/LeaderboardConnectedTest.jsx b/app/examples/react-16/src/components/LeaderboardConnectedTest.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { Leaderboard, RelativeTimeRange } from '@propeldata/react-leaderboard'
+
+export function LeaderboardConnectedTest() {
+  const [barsColor, setBarsColor] = React.useState('#ccc')
+  const [chartType, setChartType] = React.useState('bar')
+
+  return (
+    <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
+      <h2 className="text-2xl">Leaderboard Connected</h2>
+      <Leaderboard
+        query={{
+          accessToken: '<PROPEL_ACCESS_TOKEN>',
+          dimensions: [
+            {
+              columnName: 'METRIC_TYPE'
+            },
+            {
+              columnName: 'ENVIRONMENT_ID'
+            },
+            {
+              columnName: 'ACCOUNT_ID'
+            }
+          ],
+          metric: 'queryCount',
+          rowLimit: 8,
+          timeRange: {
+            relative: RelativeTimeRange.LastNDays,
+            n: 30
+          }
+        }}
+        variant={chartType}
+        styles={{
+          bar: { backgroundColor: barsColor },
+          table: { height: '200px', backgroundColor: '#f5f5f5', header: { backgroundColor: '#f5f5f5' } },
+          canvas: { backgroundColor: '#f5f5f5' }
+        }}
+      />
+      <div className="flex items-center gap-2">
+        <input
+          className="border-2 bg-white p-1 h-9"
+          type="color"
+          onChange={(event) => setBarsColor(event.target.value)}
+        />
+        <select
+          className="border-2 bg-white p-1 h-9 cursor-pointer"
+          value={chartType}
+          onChange={(event) => setChartType(event.target.value)}
+        >
+          <option value="bar">Bar</option>
+          <option value="table">Table</option>
+        </select>
+      </div>
+    </div>
+  )
+}
diff --git a/app/examples/react-16/src/components/LeaderboardStaticTest.jsx b/app/examples/react-16/src/components/LeaderboardStaticTest.jsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { Leaderboard } from '@propeldata/react-leaderboard'
+
+import { useFakeData } from 'hooks/useFakeData'
+
+const mockData1 = {
+  headers: ['Instagram', 'value'],
+  rows: [
+    ['Likes', '9'],
+    ['Follow', '1'],
+    ['Test', '4'],
+    ['Another', '7']
+  ]
+}
+
+const mockData2 = {
+  headers: ['Instagram', 'value'],
+  rows: [
+    ['Likes', '4'],
+    ['Follow', '2'],
+    ['Test', '8'],
+    ['Another', '5']
+  ]
+}
+
+export function LeaderboardStaticTest() {
+  const [mockData, setMockData] = React.useState(mockData1)
+  const [barsColor, setBarsColor] = React.useState('#ccc')
+  const [chartType, setChartType] = React.useState('bar')
+
+  const { data, isLoading } = useFakeData(mockData)
+
+  const handleReFetchMock = () => {
+    setMockData({ headers: undefined, rows: undefined })
+    setTimeout(() => {
+      setMockData(mockData2)
+    }, 2000)
+  }
+
+  return (
+    <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
+      <h2 className="text-2xl">Leaderboard Static</h2>
+      <Leaderboard
+        headers={data?.headers}
+        rows={data?.rows}
+        variant={chartType}
+        loading={isLoading || !data?.headers || !data.rows}
+        styles={{
+          bar: { backgroundColor: barsColor },
+          table: { height: '200px', backgroundColor: '#f5f5f5', header: { backgroundColor: '#f5f5f5' } },
+          canvas: { backgroundColor: '#f5f5f5' }
+        }}
+      />
+      <div className="flex items-center gap-2">
+        <button
+          className="border-2 bg-white p-1 h-9"
+          onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}
+        >
+          Switch mock data
+        </button>
+        <select
+          className="border-2 bg-white p-1 h-9"
+          value={chartType}
+          onChange={(event) => setChartType(event.target.value)}
+        >
+          <option value="bar">Bar</option>
+          <option value="table">Table</option>
+        </select>
+        <input
+          className="border-2 bg-white p-1 h-9"
+          type="color"
+          onChange={(event) => setBarsColor(event.target.value)}
+        />
+        <button className="border-2 bg-white p-1 h-9" onClick={handleReFetchMock}>
+          Refetch Mock
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/examples/react-16/src/components/TimeSeriesConnectedTest.jsx b/app/examples/react-16/src/components/TimeSeriesConnectedTest.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { RelativeTimeRange, TimeSeries, TimeSeriesGranularity } from '@propeldata/react-time-series'
+
+export function TimeSeriesConnectedTest() {
+  const [barsColor, setBarsColor] = React.useState('#ccc')
+  const [chartType, setChartType] = React.useState('bar')
+  const [pointStyle, setPointStyle] = React.useState('cross')
+
+  return (
+    <div className="p-4 border-2 bg-neutral-100 border-slate-600 rounded m-3">
+      <h2 className="text-2xl">TimeSeries Connected</h2>
+      <TimeSeries
+        query={{
+          accessToken: '<PROPEL_ACCESS_TOKEN>',
+          metric: 'queryCount',
+          timeRange: {
+            relative: RelativeTimeRange.LastNDays,
+            n: 30
+          },
+          granularity: TimeSeriesGranularity.Day
+        }}
+        variant={chartType}
+        styles={{
+          bar: { backgroundColor: barsColor },
+          canvas: { backgroundColor: '#f5f5f5' },
+          point: { style: pointStyle }
+        }}
+      />
+      <div className="flex items-center gap-2">
+        <input
+          className="border-2 bg-white p-1 h-9"
+          type="color"
+          onChange={(event) => setBarsColor(event.target.value)}
+        />
+        <select
+          className="border-2 bg-white p-1 h-9 cursor-pointer"
+          value={chartType}
+          onChange={(event) => setChartType(event.target.value)}
+        >
+          <option value="bar">Bar</option>
+          <option value="line">Line</option>
+        </select>
+        <button
+          className="border-2 bg-white p-1 h-9"
+          onClick={() => setPointStyle(pointStyle === 'cross' ? 'triangle' : 'cross')}
+        >
+          Switch point style
+        </button>
+      </div>
+    </div>
+  )
+}