@tsiky/components-r19 1.0.0

package/src/components/TrendList/index.ts

@@ -0,0 +1 @@
+export * from './TrendList';

package/src/components/theme/ThemeSwitcherButton.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { useThemeSwitcher } from './context/useThemeSwitcher';
+import { Switcher } from '../Switcher/Switcher';
+
+export interface ThemeSwitcherButtonProps {
+  lightTheme?: string;
+  darkTheme?: string;
+  leftIcon?: string;
+  rightIcon?: string;
+  colors?: {
+    bg?: string;
+    activeBg?: string;
+    border?: string;
+    circle?: string;
+    icon?: string;
+    icon2?: string;
+  };
+  size?: number;
+}
+
+export const ThemeSwitcherButton = ({
+  lightTheme = 'light',
+  darkTheme = 'dark',
+  leftIcon = 'Sun',
+  rightIcon = 'Moon',
+  colors = {
+    bg: '#e5e7eb',
+    activeBg: '#3b82f6',
+    border: '#ffffff',
+    circle: '#ffffff',
+    icon: '#3b82f6',
+    icon2: '#ffffff',
+  },
+  size = 24,
+}: ThemeSwitcherButtonProps) => {
+  const { currentTheme, switchTheme } = useThemeSwitcher();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const isDarkTheme = currentTheme === darkTheme;
+
+  const handleToggle = (checked: boolean) => {
+    switchTheme(checked ? darkTheme : lightTheme);
+  };
+
+  return (
+    <Switcher
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      checked={isDarkTheme}
+      onToggle={handleToggle}
+      colors={colors}
+      size={size}
+    />
+  );
+};
+
+export default ThemeSwitcherButton;

package/src/components/theme/context/ThemeContext.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+interface ThemeContextType {
+  themeName: string;
+  setTheme: (themeName: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  initialTheme: string;
+}
+
+export const ThemeProvider = ({ children, initialTheme }: ThemeProviderProps) => {
+  const [themeName, setThemeName] = useState<string>(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        return localStorage.getItem('app-theme') || initialTheme;
+      } catch (error) {
+        console.error('Error reading theme from localStorage:', error);
+        return initialTheme;
+      }
+    }
+    return initialTheme;
+  });
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+
+    htmlElement.removeAttribute('data-theme');
+
+    if (themeName && themeName !== 'default') {
+      htmlElement.setAttribute('data-theme', themeName);
+    }
+
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('app-theme', themeName);
+      } catch (error) {
+        console.error('Error saving theme to localStorage:', error);
+      }
+    }
+  }, [themeName]);
+
+  const setTheme = useCallback((newThemeName: string) => {
+    setThemeName(newThemeName);
+  }, []);
+
+  return <ThemeContext.Provider value={{ themeName, setTheme }}>{children}</ThemeContext.Provider>;
+};
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useThemeContext must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/components/theme/context/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemeContext';
+export * from './useThemeSwitcher';

package/src/components/theme/context/useThemeSwitcher.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import { useThemeContext } from './ThemeContext';
+
+export const useThemeSwitcher = () => {
+  const { themeName, setTheme } = useThemeContext();
+
+  const switchTheme = useCallback(
+    (newThemeName: string) => {
+      setTheme(newThemeName);
+    },
+    [setTheme]
+  );
+
+  return {
+    currentTheme: themeName,
+    switchTheme,
+  };
+};

package/src/components/theme/index.ts

@@ -0,0 +1 @@
+export * from './context';

package/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "index.ts", "chart.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,43 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: 'playwright',
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />