feat(doc-site): adding doc-site

.github/workflows/doc-site-deploy.yml

@@ -0,0 +1,33 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install and Build 🔧
+        run: npm run bootstrap
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload folder
+          path: packages/doc-site/storybook-static
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package.json

@@ -71,4 +71,4 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11"
   }
-}
+}

packages/doc-site/.eslintignore

@@ -0,0 +1,5 @@
+dist
+coverage
+storybook-static
+stencil-generated
+test-results

packages/doc-site/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['iot-app-kit'],
+};

packages/doc-site/.storybook/customtheme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'IoT App Kit',
+  brandTarget: '_self',
+});

packages/doc-site/.storybook/main.js

@@ -0,0 +1,33 @@
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/preset-scss'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

packages/doc-site/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import iotAppKitTheme from './customtheme';
+
+addons.setConfig({
+  theme: iotAppKitTheme,
+});

packages/doc-site/.storybook/preview.js

@@ -0,0 +1,19 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        order: ['Introduction', 'Overview', 'Components', 'Core', 'Data sources', 'React hooks'],
+      },
+    },
+  },
+};
+
+export default preview;

packages/doc-site/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@iot-app-kit/doc-site",
+  "version": "9.11.0",
+  "private": true,
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addons": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-webpack5": "^7.6.6",
+    "@storybook/test": "^7.6.6",
+    "@storybook/theming": "^7.6.6",
+    "eslint-config-iot-app-kit": "^9.11.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.6"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "start": "storybook dev -p 6006",
+    "build": "storybook build",
+    "lint": "eslint  --max-warnings=0",
+    "fix": "eslint --fix "
+  },
+  "dependencies": {
+    "@iot-app-kit/core": "^9.11.0",
+    "@iot-app-kit/react-components": "^9.11.0",
+    "@iot-app-kit/testing-util": "^9.11.0"
+  }
+}

packages/doc-site/stories/Introduction.mdx

@@ -0,0 +1,117 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# IoT App Kit
+
+IoT Application Kit is a development library for building Industrial IoT web based applications.
+
+IoT App Kit is an open-source library consisting of front-end components and utilities. With IoT App Kit, you can build front-end applications and webpages to utilize IoT data. By default, IoT App Kit helps to retrieve data from AWS IoT SiteWise and AWS IoT TwinMaker You can also install plugins to retrieve data from your own sources. There’s no charge for using IoT App Kit.
+
+Latest major version : 9

packages/doc-site/stories/components/bar-chart/BarChart.stories.tsx

@@ -0,0 +1,51 @@
+import { BarChart, WebglContext } from '@iot-app-kit/react-components';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  mockTimeSeriesDataQuery,
+  mockTimeSeriesDataQueryWithError,
+  mockTimeSeriesDataQueryLoading,
+} from '@iot-app-kit/testing-util';
+import { mockSinWaveDataAggregated } from '../../mockSinWaveData';
+
+const meta: Meta<typeof BarChart> = {
+  title: 'Components/BarChart',
+  component: BarChart,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BarChart>;
+
+export const Standard: Story = {
+  render: (props) => (
+    <div style={{ height: '400px' }}>
+      <BarChart {...props} />
+      <WebglContext />
+    </div>
+  ),
+  args: {
+    queries: [mockSinWaveDataAggregated()],
+    viewport: { duration: '30s' },
+  },
+};
+
+export const Error: Story = {
+  ...Standard,
+  args: {
+    queries: [mockTimeSeriesDataQueryWithError('some error message')],
+  },
+};
+
+export const Empty: Story = {
+  ...Standard,
+  args: {
+    queries: [mockTimeSeriesDataQuery([])],
+  },
+};
+
+export const Loading: Story = {
+  ...Standard,
+  args: {
+    queries: [mockTimeSeriesDataQueryLoading()],
+  },
+};