Dev

.github/workflows/publish.yml

@@ -0,0 +1,82 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - dev
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    env:
+      NODE_AUTH_TOKEN: ""
+      NPM_CONFIG_USERCONFIG: ${{ github.workspace }}/.npmrc
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Upgrade npm (OIDC required)
+        run: npm i -g npm@11.5.1
+
+      - name: Ensure npmrc without token
+        run: |
+          printf "%s\n" "@telegram-tools:registry=https://registry.npmjs.org/" > "$NPM_CONFIG_USERCONFIG"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Show npm version
+        run: |
+          npm -v
+          echo "authToken=$(npm config get //registry.npmjs.org/:_authToken)"
+
+      - name: Check version change
+        id: version_check
+        run: |
+          BEFORE_SHA="${{ github.event.before }}"
+          if [ "$BEFORE_SHA" = "0000000000000000000000000000000000000000" ]; then
+            echo "version_changed=true" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          if ! git cat-file -e "${BEFORE_SHA}:package.json" 2>/dev/null; then
+            echo "version_changed=true" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          PREV_VERSION=$(git show "${BEFORE_SHA}:package.json" | node -e "const fs=require('fs');const data=fs.readFileSync(0,'utf8');console.log(JSON.parse(data).version||'')")
+          CURR_VERSION=$(node -e "const fs=require('fs');const data=fs.readFileSync('package.json','utf8');console.log(JSON.parse(data).version||'')")
+
+          if [ -z "$PREV_VERSION" ] || [ -z "$CURR_VERSION" ]; then
+            echo "version_changed=true" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          if [ "$PREV_VERSION" != "$CURR_VERSION" ]; then
+            echo "version_changed=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "version_changed=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Build
+        if: steps.version_check.outputs.version_changed == 'true'
+        run: yarn build
+
+      - name: Publish dev tag
+        if: github.ref == 'refs/heads/dev' && steps.version_check.outputs.version_changed == 'true'
+        run: npm publish --tag dev --provenance --access public
+
+      - name: Publish latest
+        if: github.ref == 'refs/heads/main' && steps.version_check.outputs.version_changed == 'true'
+        run: npm publish --provenance --access public

.gitignore

@@ -0,0 +1,27 @@
+# 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?
+
+*storybook.log
+storybook-static

.npmrc

@@ -0,0 +1 @@
+@telegram-tools:registry=https://registry.npmjs.org/

.storybook/main.ts

@@ -0,0 +1,42 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-themes"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal: async (config) => {
+    config.base = "./";
+    if (config.plugins) {
+      config.plugins = config.plugins.filter(
+        (plugin) => plugin && plugin.name !== "inject-css-import"
+      );
+    }
+    if (config.build) {
+      delete config.build.lib;
+      if (config.build.rollupOptions) {
+        delete config.build.rollupOptions.external;
+        const output = config.build.rollupOptions.output;
+        if (Array.isArray(output)) {
+          output.forEach((item) => {
+            if (item && "assetFileNames" in item) {
+              delete item.assetFileNames;
+            }
+          });
+        } else if (output && "assetFileNames" in output) {
+          delete output.assetFileNames;
+        }
+      }
+    }
+    // Добавляем поддержку SCSS модулей
+    if (config.css) {
+      config.css.modules = {
+        localsConvention: "camelCase",
+      };
+    }
+    return config;
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from "react";
+import type { Preview } from "@storybook/react-vite";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+import "../src/styles/index.scss";
+
+const withThemeBackground = (Story: React.ComponentType) => {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--color-background-secondary)",
+        minHeight: "100vh",
+        padding: 0,
+        margin: 0,
+      }}
+    >
+      <Story />
+    </div>
+  );
+};
+
+export const decorators = [
+  (Story) => {
+    useEffect(() => {
+      const style = document.createElement("style");
+      style.innerHTML = `
+        #storybook-root, .sb-show-main, .docs-story, .sb-main-padded {
+          padding: 0 !important;
+          margin: 0 !important;
+          background: none !important;
+        }
+      `;
+      document.head.appendChild(style);
+      return () => {
+        document.head.removeChild(style);
+      };
+    }, []);
+    return <Story />;
+  },
+];
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      disableSaveFromUI: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      disable: true,
+    },
+  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+      attributeName: "theme-mode",
+    }),
+    withThemeBackground,
+    ...decorators,
+  ],
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

README.md

@@ -1 +1,37 @@
-# ui-kit-public
+# ui-kit-public
+
+Open-source, iOS-like UI component library built with React.
+
+## Install
+
+```bash
+npm install @telegram-tools/ui-kit
+
+yarn add @telegram-tools/ui-kit
+```
+
+## Usage
+
+```tsx
+import "@telegram-tools/ui-kit/dist/index.css";
+import { Button, Text, ThemeProvider } from "@telegram-tools/ui-kit";
+
+export function Example() {
+  return (
+    <ThemeProvider>
+      <div>
+        <Text type="title3">Hello</Text>
+        <Button text="Click" onClick={() => {}} />
+      </div>
+    </ThemeProvider>
+  );
+}
+```
+
+`ThemeProvider` sets the `theme-mode` attribute on `html` and pulls the theme from Telegram WebApp, or from the `theme` prop if provided.
+
+## Storybook
+
+```text
+https://ui-kit-public-fe-stage-en8vi.ondigitalocean.app/
+```

eslint.config.js

@@ -0,0 +1,32 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { globalIgnores } from "eslint/config";
+
+export default tseslint.config(
+  [
+    globalIgnores(["dist"]),
+    {
+      files: ["**/*.{ts,tsx}"],
+      extends: [
+        js.configs.recommended,
+        tseslint.configs.recommended,
+        reactHooks.configs["recommended-latest"],
+        reactRefresh.configs.vite,
+      ],
+      languageOptions: {
+        ecmaVersion: 2020,
+        globals: globals.browser,
+      },
+      rules: {
+        "react-refresh/only-export-components": "off",
+      },
+    },
+  ],
+  storybook.configs["flat/recommended"]
+);

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Kit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>