Merge pull request #127 from OpenIPC/qr-code

Qr code

.github/workflows/main-deployment.yml

@@ -0,0 +1,67 @@
+name: test-deployment
+run-name: Test deployment with GH Actions
+on:
+  push:
+    branches:
+      - 'deploy'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.11'
+      - name: Enable and set up Yarn
+        run: |
+          corepack enable
+          yarn set version stable
+      - name: Install packages and build
+        run: |
+          yarn install
+          yarn run build-main
+      - name: Get production artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: production-build
+          path: dist
+  deploy:
+    runs-on: ubuntu-latest
+    env:
+      SERVER_NAME: ${{ vars.SERVER_NAME }}
+    needs: build
+    steps:
+      - uses: actions/checkout@v4
+      - name: Download production articfact
+        uses: actions/download-artifact@v4
+        with:
+          name: production-build
+      - name: Prepare folders on production server
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.SERVER_NAME }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          port: ${{ secrets.SERVER_SSH_PORT }}
+          script: |
+            rm -rf /var/www/webface
+            mkdir /var/www/webface
+      - name: Copy build to production server
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.SERVER_NAME }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          port: ${{ secrets.SERVER_SSH_PORT }}
+          source: main/*
+          target: /var/www/webface/
+      - name: Make correct folder structure 
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.SERVER_NAME }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          port: ${{ secrets.SERVER_SSH_PORT }}
+          script: |
+            cp -r /var/www/webface/main/* /var/www/webface/
+            rm -r /var/www/webface/main

package.json

@@ -7,36 +7,41 @@
   "scripts": {
     "dev-camera": "vite --mode='camera'",
     "dev-main": "vite --mode='main'",
-    "build": "vite build --mode='main'",
+    "dev-fpv": "vite --mode='fpv'",
+    "build-main": "vite build --mode='main'",
+    "build-fpv": "vite build --mode='fpv'",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest"
   },
   "dependencies": {
     "@preact/signals": "^1.2.3",
     "preact": "^10.19.6",
-    "preact-router": "^4.1.2"
+    "preact-iso": "^2.6.3",
+    "preact-render-to-string": "^6.5.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
     "@chromatic-com/storybook": "^1.3.3",
     "@preact/preset-vite": "^2.8.2",
-    "@storybook/addon-essentials": "^8.1.2",
-    "@storybook/addon-interactions": "^8.1.2",
-    "@storybook/addon-links": "^8.1.2",
-    "@storybook/blocks": "^8.1.2",
-    "@storybook/preact": "^8.1.2",
-    "@storybook/preact-vite": "^8.1.2",
-    "@storybook/test": "^8.1.2",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/preact": "^8.2.9",
+    "@storybook/preact-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/babel__core": "^7",
     "@types/express": "^4",
     "autoprefixer": "^10.4.19",
     "express": "^4.19.2",
     "postcss": "^8.4.38",
-    "storybook": "^8.1.2",
+    "storybook": "^8.2.9",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^2.0.4"
   }
 }

src/assets/icons/ui/index.ts

@@ -7,6 +7,12 @@ import coin from './coin.svg?react';
 import openCollective from './open-collective.svg?react';
 import cameraPreloader from './camera-preloader.svg?react';
 import Atom from './atom.svg?react';
+import ShowPassword from './show-password.svg?react';
+import HidePassword from './hide-password.svg?react';
+import Play from './play.svg?react';
+import Pause from './pause.svg?react';
+import Refresh from './refresh.svg?react';
+import ArrowDown from './arrow-down.svg?react';
 
 export default {
   Burger: burger,
@@ -17,4 +23,10 @@ export default {
   OpenCollective: openCollective,
   CameraPreloader: cameraPreloader,
   Atom,
+  ShowPassword,
+  HidePassword,
+  Play,
+  Pause,
+  Refresh,
+  ArrowDown,
 }

src/components/ui/buttons/icon-button/icon-button.tsx

@@ -9,7 +9,7 @@ interface IconButtonProps {
 export default function IconButton(props: IconButtonProps) {
   const { withBorder, children, clickHandler } = props;
   return (
-    <button class={`box-border ${withBorder ? 'border' : ''} rounded-md border-light-blue`} onClick={clickHandler}>
+    <button class={`box-border ${withBorder ? 'border' : ''} rounded-md border-light-blue *:w-[24px] *:h-[24px]`} onClick={clickHandler}>
       {children}
     </button>
   );

src/components/ui/buttons/main-button/Main-button.tsx

@@ -0,0 +1,26 @@
+import type MainButtonProps from './main-button-types';
+
+export default function MainButton({ size, disabled, caption, type, Icon, clickHandler }: MainButtonProps) {
+  function getSize(size: MainButtonProps['size']) {
+    const sizes:Record<MainButtonProps['size'], string> = {
+      xs: 'w-16 h-8',
+      s: 'w-28 h-8',
+      m: 'w-60 h-8',
+      l: 'w-72 h-12',
+    };
+    return sizes[size]; 
+  }
+
+  function getClass() {
+    const baseClass = `bg-brand-blue border border-0 rounded-md flex flex-row justify-center items-center gap-x-2 text-white hover:bg-btn-blue-hover active:bg-btn-blue-click ${getSize(size)}`;
+    if (disabled) return `${baseClass} bg-grey flex flex-row justify-center items-center`;
+    return baseClass;
+  }
+
+  return (
+    <button className={getClass()} type={type ?? 'button'} {...{disabled}} onClick={clickHandler}>
+      {caption}
+      {Icon && <Icon />}
+    </button>
+  );
+}

src/components/ui/buttons/main-button/index.tsx

@@ -1 +1 @@
-export * as default from './main-button.tsx';
+export { default } from './Main-button';

src/components/ui/buttons/main-button/main-button-types.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'preact';
+
+type MainButtonProps = {
+  size: 'xs' | 's' | 'm' | 'l',
+  disabled?: boolean,
+  caption?: string,
+  type?: 'button' | 'submit' | 'reset',
+  Icon?: FunctionComponent,
+  clickHandler?: () => void,
+}
+
+export default MainButtonProps;

src/components/ui/buttons/main-button/main-button.stories.ts

@@ -1,26 +1,43 @@
 import type { Meta, StoryObj } from '@storybook/preact';
-import Button from './main-button';
+import Button from './Main-button';
+import icons from '../../../../assets/icons/ui';
+
+const { Play, Pause, Refresh } = icons;
 
 const meta = {
   component: Button,
   title: 'Design System/UI/Buttons/Main Button',
+  argTypes: {
+    size: {
+      options: ['xs' , 's' , 'm' , 'l'],
+      control: { type: 'inline-radio' },
+    },
+    Icon: {
+      options: ['Play', 'Pause', 'Refresh', 'No icon'],
+      mapping: {
+        'Play': Play,
+        'Pause': Pause,
+        'Refresh': Refresh,
+        'No icon': undefined, 
+      },
+      control: { type: 'inline-radio' },
+    },
+    type: {
+      options: ['button', 'submit', 'reset'],
+      control: { type: 'inline-radio' },
+    },
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+type Story = StoryObj<typeof Button>;
+
+export const MainButton: Story = {
   args: {
     type: 'button',
-    caption: 'Наименование кнопки',
+    caption: 'Generate installation guide',
     disabled: false,
+    Icon: Refresh,
   },
 }
-
-export const Disabled: Story = {
-  args: {
-    type: 'button',
-    title: 'Наименование кнопки',
-    disabled: true,
-  },
-};

src/components/ui/buttons/toggle-button/Toggle-button.tsx

@@ -0,0 +1,34 @@
+import type ToggleButtonProps from './toggle-button-types';
+
+export default function ToggleButton({ size, checked, disabled, Icon, changeHandler }: ToggleButtonProps) {
+
+  function getSize(size: ToggleButtonProps['size']) {
+    const sizes:Record<ToggleButtonProps['size'], string> = {
+      xs: 'w-16 h-8',
+      s: 'w-28 h-8',
+      m: 'w-60 h-8',
+      l: 'w-72 h-12',
+    };
+    return sizes[size]; 
+  }
+
+  function handleChange(e: Event) {
+    if (!(e.target instanceof HTMLInputElement)) return;
+    if (changeHandler) changeHandler(e.target.checked);
+  }
+
+  function getClass() {
+    const baseClass = `block border border-0 rounded-md relative overflow-hidden flex flex-row justify-center items-center ${getSize(size)}`;
+    if (disabled) return `${baseClass} bg-grey flex flex-row justify-center items-center`;
+    return `${baseClass} bg-brand-blue has-[:checked]:bg-btn-blue-click has-[:checked]:shadow-[inset_3px_3px_6px_#000051]`
+  }
+
+  return (
+    <div className="max-w-min rounded">
+      <label className={getClass()}>
+        {Icon && <Icon />}
+        <input type="checkbox" onChange={handleChange} {...{checked, disabled}} className="w-0 h-0 absolute -top-1" />
+      </label>
+    </div>
+  );
+}

src/components/ui/buttons/toggle-button/index.ts

@@ -0,0 +1 @@
+export { default } from './Toggle-button';

src/components/ui/buttons/toggle-button/toggle-button-types.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'preact';
+
+type ToggleButtonProps = {
+  size: 'xs' | 's' | 'm' | 'l',
+  checked?: boolean,
+  disabled?: boolean,
+  Icon?: FunctionComponent,
+  changeHandler: (checked: boolean) => void,
+}
+
+export default ToggleButtonProps;

src/components/ui/buttons/toggle-button/toggle-button.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import ToggleButton from './Toggle-button';
+import icons from '../../../../assets/icons/ui';
+
+const { Play, Pause } = icons;
+
+const meta = {
+  component: ToggleButton,
+  title: 'Design System/UI/Toggle Button',
+  argTypes: {
+    size: {
+      options: ['xs', 's', 'm', 'l'],
+      control: { type: 'inline-radio' },
+    },
+    Icon: {
+      options: ['Play', 'Pause'],
+      mapping: {
+        'Play': Play,
+        'Pause': Pause,
+      },
+      control: { type: 'inline-radio' },
+    },
+    type: {
+      options: ['button', 'submit', 'reset'],
+      control: { type: 'inline-radio' },
+    },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleButton>;
+
+export const ToggleButtonStory: Story = {
+  args: {
+    size: 'xs',
+    checked: false,
+    disabled: false,
+    type: 'button',
+    Icon: Play,
+    changeHandler: (state: boolean) => console.log('Toggle button state: ', state),
+  },
+};