nntc-ui 0.2.3 → 0.2.6

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,164 @@
+import { ReactNode, createContext, useContext, useEffect, useState } from 'react';
+
+import globalCss from '../styles/global.css?raw';
+import dark from '../styles/themes/dark.css?raw';
+import darkBlue from '../styles/themes/darkBlue.css?raw';
+import light from '../styles/themes/light.css?raw';
+
+const BASE_STYLE_ID = 'nntc-ui-base-styles';
+const THEME_STYLE_ID = 'nntc-ui-theme-styles';
+
+export type Theme = 'light' | 'dark' | 'darkBlue';
+export type StyleContainer = HTMLElement | ShadowRoot;
+
+function isShadowRoot(target: StyleContainer): target is ShadowRoot {
+  return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
+}
+
+function scopeCss(css: string, target: StyleContainer): string {
+  return isShadowRoot(target) ? css.replace(/:root\b/g, ':host') : css;
+}
+
+function ensureStyleElement(target: StyleContainer, id: string): HTMLStyleElement {
+  const existing = target.querySelector<HTMLStyleElement>(`#${id}`);
+  if (existing) {
+    return existing;
+  }
+
+  const element = document.createElement('style');
+  element.id = id;
+  target.appendChild(element);
+  return element;
+}
+
+export interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') {
+    return 'light';
+  }
+
+  try {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'darkBlue') {
+      return savedTheme;
+    }
+  } catch {
+    // ignore (private mode / blocked storage)
+  }
+
+  if (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
+    return 'dark';
+  }
+
+  return 'light';
+}
+
+export function useTheme(): ThemeContextType | null {
+  return useContext(ThemeContext) ?? null;
+}
+
+export function useThemeWithFallback(): ThemeContextType {
+  const context = useTheme();
+  return (
+    context ?? {
+      theme: 'light',
+      toggleTheme: () => {},
+      setTheme: () => {},
+    }
+  );
+}
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  /**
+   * Куда добавить глобальные стили и палитру темы.
+   * По умолчанию — document.head. Для MFE, отрисовывающихся в Shadow DOM,
+   * передайте сюда shadowRoot: стили попадут в теневое дерево (рядом с index.css),
+   * а :root будет автоматически заменён на :host.
+   */
+  styleContainer?: StyleContainer | null;
+}
+
+export function ThemeProvider({ children, styleContainer }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme());
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    try {
+      localStorage.setItem('theme', newTheme);
+    } catch {
+      // ignore
+    }
+  };
+
+  const toggleTheme = () => {
+    setThemeState((prev) => {
+      const next = prev === 'light' ? 'dark' : prev === 'dark' ? 'darkBlue' : 'light';
+      try {
+        localStorage.setItem('theme', next);
+      } catch {
+        // ignore
+      }
+      return next;
+    });
+  };
+
+  useEffect(() => {
+    const target: StyleContainer = styleContainer ?? document.head;
+    const baseStyle = ensureStyleElement(target, BASE_STYLE_ID);
+    baseStyle.textContent = scopeCss(globalCss, target);
+  }, [styleContainer]);
+
+  useEffect(() => {
+    const themes: Record<Theme, string> = {
+      light,
+      dark,
+      darkBlue,
+    };
+
+    const target: StyleContainer = styleContainer ?? document.head;
+    const style = ensureStyleElement(target, THEME_STYLE_ID);
+    style.textContent = scopeCss(themes[theme] ?? themes.light, target);
+  }, [theme, styleContainer]);
+
+  useEffect(() => {
+    // Auto-sync with system theme only when user hasn't chosen a custom one.
+    let savedTheme: string | null = null;
+    try {
+      savedTheme = localStorage.getItem('theme');
+    } catch {
+      // ignore
+    }
+
+    if (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'darkBlue') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    if (!mediaQuery) {
+      return;
+    }
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setThemeState(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  const value: ThemeContextType = {
+    theme,
+    toggleTheme,
+    setTheme,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}

package/src/types/global.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css';
+declare module '*.module.less';
+declare module '*.module.scss';
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.css?raw' {
+  const css: string;
+  export default css;
+}

package/src/types/tanstack.d.ts

@@ -0,0 +1,40 @@
+import {} from '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  interface TableMeta<TData extends RowData> {
+    updateData: (rowIndex: number, columnId: string, value?: string, original?: TData) => void;
+    tableContainerRef?: RefObject<HTMLDivElement>;
+    additionalColumnsViews?: (
+      id: string,
+      value: string | number | undefined,
+      payload: { [key: string]: string } | undefined,
+    ) => {
+      edit:
+        | ((onChange: (changeValue?: string, withBlur?: boolean) => void, onBlur: () => void) => JSX.Element | null)
+        | null;
+      view: JSX.Element | null;
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData, TValue> {
+    editable?: boolean;
+    sortable?: boolean;
+    sortType?: SortType;
+    sortAnotherName?: string;
+    filtrationByNumber?: boolean;
+    filtrationByDate?: boolean;
+    filtrationByValue?: boolean;
+    selectUnique?: boolean;
+    width?: number;
+    headerAlign?: ColumnAlign;
+    rowsAlign?: ColumnAlign;
+    valueFormat?: (value: string | number | undefined) => string;
+    showInModal?: boolean;
+    onClick?: (payload: { [key: string]: string }) => void;
+    label?: string;
+    verticalAlign?: VerticalAlign;
+    toFixed?: number;
+    inputType?: HTMLInputTypeAttribute;
+  }
+}

package/{utils/index.d.ts → src/utils/index.ts}

@@ -1,3 +1,2 @@
 export { toFirstLetterLowerCase } from './toFirstLetterLowerCase';
 export { toFirstLetterUpperCase } from './toFirstLetterUpperCase';
-//# sourceMappingURL=index.d.ts.map

package/src/utils/toFirstLetterLowerCase.ts

@@ -0,0 +1,3 @@
+export const toFirstLetterLowerCase = (name: string) => {
+  return name[0].toLowerCase() + name.substring(1);
+};

package/src/utils/toFirstLetterUpperCase.ts

@@ -0,0 +1,3 @@
+export const toFirstLetterUpperCase = (name: string) => {
+  return name[0].toUpperCase() + name.substring(1);
+};

package/tsconfig.dist.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "rootDir": "./src",
+
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "isolatedModules": false
+  },
+  "include": ["./src/index.ts", "./src/types/**/*.d.ts"],
+  "exclude": ["./node_modules", "./dist", "./src/**/*.stories.ts", "./src/**/*.stories.tsx", "./src/stories/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "sourceMap": true,
+    "isolatedModules": true,
+    "baseUrl": "./",
+
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+
+    "paths": {
+      "@models/*": ["./src/models/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@components/*": ["./src/components/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@i18n/*": ["./src/i18n/*"],
+      "@icons/*": ["./src/icons/*"],
+      "react": ["./node_modules/@types/react"]
+    },
+
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "customTemplate": "./cssModulesPluginTemplate.cjs",
+          "classnameTransform": "dashes",
+          "include": ["**/*.module.css", "**/*.module.scss", "**/*.module.less"],
+          "exclude": ["**/node_modules/**"]
+        }
+      }
+    ]
+  },
+  "include": ["src", "src/types", ".storybook"],
+  "exclude": ["./node_modules", "./dist"]
+}

package/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [react(), svgr(), tsconfigPaths()],
+  css: {
+    modules: {
+      localsConvention: 'camelCaseOnly',
+    },
+  },
+});

package/webpack.dist.config.cjs

@@ -0,0 +1,105 @@
+const path = require('path');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const projectRoot = path.resolve(__dirname, '.');
+const srcPath = path.join(projectRoot, 'src');
+const outPath = path.join(projectRoot, 'dist');
+
+const cssModulesOptions = {
+  modules: {
+    mode: 'local',
+    exportLocalsConvention: 'camelCaseOnly',
+    localIdentName: '[name]__[local]__[hash:base64:5]',
+  },
+  importLoaders: 0,
+};
+
+const alias = {
+  '@models': path.join(srcPath, 'models'),
+  '@utils': path.join(srcPath, 'utils'),
+  '@components': path.join(srcPath, 'components'),
+  '@hooks': path.join(srcPath, 'hooks'),
+  '@icons': path.join(srcPath, 'icons'),
+  '@i18n': path.join(srcPath, 'i18n'),
+};
+
+function buildConfig(format) {
+  const isEsm = format === 'esm';
+  const ext = isEsm ? 'mjs' : 'js';
+
+  return {
+    name: format,
+    entry: path.join(srcPath, 'index.ts'),
+    target: 'web',
+    mode: 'production',
+    devtool: 'source-map',
+    output: {
+      path: outPath,
+      filename: `index.${ext}`,
+      library: { type: isEsm ? 'module' : 'commonjs2' },
+      module: isEsm,
+      clean: !isEsm,
+    },
+    experiments: isEsm ? { outputModule: true } : undefined,
+    resolve: {
+      alias,
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    },
+    externals: ['react', 'react-dom', 'react/jsx-runtime'],
+    module: {
+      rules: [
+        {
+          oneOf: [
+            {
+              test: /\.(gif|png|jpe?g|webp)$/i,
+              type: 'asset/inline',
+            },
+            {
+              test: /\.css$/i,
+              resourceQuery: /raw/,
+              type: 'asset/source',
+            },
+            {
+              test: /\.module\.css$/i,
+              use: [
+                MiniCssExtractPlugin.loader,
+                {
+                  loader: 'css-loader',
+                  options: cssModulesOptions,
+                },
+              ],
+            },
+            {
+              test: /\.tsx?$/i,
+              exclude: /node_modules/,
+              use: {
+                loader: 'babel-loader',
+                options: {
+                  presets: [
+                    '@babel/preset-typescript',
+                    ['@babel/preset-react', { runtime: 'automatic' }],
+                  ],
+                  plugins: [
+                    '@babel/plugin-proposal-class-properties',
+                    '@babel/plugin-proposal-object-rest-spread',
+                  ],
+                  babelrc: false,
+                  configFile: false,
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [new MiniCssExtractPlugin({ filename: 'index.css' })],
+  };
+}
+
+module.exports = (env) => {
+  if (env?.format) {
+    return buildConfig(env.format);
+  }
+  return [buildConfig('cjs'), buildConfig('esm')];
+};

package/werf-giterminism.yaml

@@ -0,0 +1,19 @@
+giterminismConfigVersion: 1
+cli:
+  allowCustomTags: true
+config:
+  goTemplateRendering:
+    allowEnvVariables: 
+      - IMAGE_NAME
+      - NUGET_USER
+      - DOCKERFILE_PATH
+      - CI_JOB_TOKEN
+      - CI_PROJECT_NAME
+      - CI_COMMIT_SHORT_SHA
+      - CI_COMMIT_TAG
+      - CI_COMMIT_BRANCH
+      - CI_COMMIT_TITLE
+      - CI_PIPELINE_ID
+helm:
+  allowUncommittedFiles:
+    - .helm/Chart.yaml

package/werf.yaml

@@ -0,0 +1,8 @@
+project: {{ env "CI_PROJECT_NAME" }}
+configVersion: 1
+deploy:
+  helmChartDir: .helm/backend
+
+---
+image: app
+dockerfile: {{ env "DOCKERFILE_PATH" "Dockerfile" }}