feat: add quick start example

.github/workflows/examples-quick-start.yml

@@ -0,0 +1,41 @@
+name: "Examples: Quick Start"
+
+on:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'examples/quick-start/**'
+      - '.github/workflows/examples-quick-start.yml'
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pages: write
+      id-token: write
+    defaults:
+      run:
+        working-directory: ./examples/quick-start
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        shell: bash
+        run: |
+          npm ci
+      - name: Build
+        shell: bash
+        run: |
+          npm run build
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./examples/quick-start
+          destination_dir: examples/quick-start/dist

examples/quick-start/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/quick-start/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/quick-start/README.md

@@ -0,0 +1,78 @@
+# How to start using @kaspersky/components
+
+1. Initialize the project with `React`, `Typescript`, `less` and `[email protected]` in the way you want. You can simply use:
+
+    ```bash
+    npm create vite my-project-name -- --template react-ts
+    cd my-project-name
+    npm install react@17 react-dom@17 @kaspersky/icons @kaspersky/components
+    npm install -D @types/react@17 @types/react-dom@17 less [email protected]
+    ```
+
+2. Add this to `vite.config.ts` for correct `less` work:
+
+    ```typescript
+    css: {
+      preprocessorOptions: {
+        less: {
+          math: "always",
+          relativeUrls: true,
+          javascriptEnabled: true
+        },
+      },
+    }
+    ```
+
+3. Add important `antd` css imports in root CSS file (index.css in that case):
+
+    ```css
+    @import "antd/lib/style/themes/default.less";
+    @import "antd/dist/antd.less";
+    ```
+
+4. Define initial rendering in main.tsx:
+
+```typescript
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App.tsx'
+import './index.css'
+
+const container = document.getElementById('root')!
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  container
+)
+```
+
+5. Wrap your root layout component (for ex.: App.tsx) by the `ConfigProvider`, add `GlobalStyles` and `Notification` service:
+
+    ```typescript
+    import { useState } from 'react'
+
+    import { ConfigProvider } from '@kaspersky/components/design-system/context/provider'
+    import { GlobalStyle } from '@kaspersky/components/design-system/global-style'
+    import { ThemeKey } from '@kaspersky/components/design-system'
+    import { LangVariants } from '@kaspersky/components/helpers/localization/types'
+
+    import { Notification, H1 } from '@kaspersky/components'
+
+    function App() {
+      const [themeKey] = useState<ThemeKey>(ThemeKey.Light)
+      
+      return (
+        <ConfigProvider theme={themeKey} locale={LangVariants.EnUs}>
+          <GlobalStyle />
+          <Notification/>
+          <H1>Hi there! I am using @kaspersky/components!</H1>
+        </ConfigProvider>
+      )
+    }
+
+    export default App
+    ```
+
+6. Run with `npm run dev`

examples/quick-start/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quick Start</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>