Skip to content

Commit 5a9ad3d

Browse files
ahrefabhiahrefabhi
committed
Merge branch 'main' of https://github.com/SigNoz/components into feature/code-block
2 parents fc5628c + d0ffad9 commit 5a9ad3d

54 files changed

Lines changed: 2019 additions & 1337 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/CODEOWNERS‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
# Owners are automatically requested for review for PRs that changes code
33
# that they own.
44

5-
/packages/eslint-config @ahmadshaheer
6-
/packages/tailwind-config @ahmadshaheer
7-
/packages/typescript-config @ahmadshaheer
8-
/packages/theme @ahmadshaheer
9-
/turbo @ahmadshaheer
10-
package.json @ahmadshaheer
11-
README.md @ahmadshaheer
12-
turbo.json @ahmadshaheer
13-
.npmrc @ahmadshaheer
14-
/.turbo @ahmadshaheer
15-
/.changeset @ahmadshaheer
16-
/apps/docs/vite.config.ts @ahmadshaheer
17-
/apps/docs/package.json @ahmadshaheer
18-
/apps/docs/tsconfig.json @ahmadshaheer
19-
/apps/docs/.storybook @ahmadshaheer
5+
/packages/eslint-config @SigNoz/frontend
6+
/packages/tailwind-config @SigNoz/frontend
7+
/packages/typescript-config @SigNoz/frontend
8+
/packages/theme @SigNoz/frontend
9+
/turbo @SigNoz/frontend
10+
package.json @SigNoz/frontend
11+
README.md @SigNoz/frontend
12+
turbo.json @SigNoz/frontend
13+
.npmrc @SigNoz/frontend
14+
/.turbo @SigNoz/frontend
15+
/.changeset @SigNoz/frontend
16+
/apps/docs/vite.config.ts @SigNoz/frontend
17+
/apps/docs/package.json @SigNoz/frontend
18+
/apps/docs/tsconfig.json @SigNoz/frontend
19+
/apps/docs/.storybook @SigNoz/frontend

‎apps/docs/.storybook/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Storybook Configuration
2+
3+
This directory contains the Storybook configuration for the SigNoz Components documentation.
4+
5+
## Features
6+
7+
### 🎨 **Dark Mode by Default**
8+
- Storybook starts in dark mode by default
9+
- Toggle button in the top-right corner to switch between light/dark modes
10+
- Manager UI (sidebar and panels) also uses dark theme
11+
12+
### 🔤 **Inter Font**
13+
- Uses Inter font family from Google Fonts
14+
- Applied globally to all components and UI
15+
- Optimized font rendering with proper font-feature-settings
16+
17+
### 🏷️ **SigNoz Branding**
18+
- Custom favicon with SigNoz branding (placeholder SVG)
19+
- Dark theme optimized for SigNoz brand colors
20+
- Professional appearance matching SigNoz design system
21+
22+
## Files
23+
24+
- `preview.js` - Main Storybook configuration with dark mode settings
25+
- `preview.css` - Global styles including Inter font and dark theme
26+
- `preview-head.html` - HTML head content (fonts, favicon)
27+
- `manager.js` - Manager UI configuration (sidebar, panels)
28+
- `modeDecorator.tsx` - Dark/light mode toggle component
29+
30+
## Customization
31+
32+
To update the favicon, replace the base64 SVG in `preview-head.html` with your actual SigNoz logo.
33+
34+
To modify the theme colors, update the CSS variables in `preview.css`.

‎apps/docs/.storybook/main.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@ function getAbsolutePath(value) {
1010
const config = {
1111
stories: ['../stories/*.stories.tsx', '../stories/**/*.stories.tsx'],
1212
addons: [
13-
getAbsolutePath('@storybook/addon-links'),
1413
getAbsolutePath('@storybook/addon-essentials'),
14+
getAbsolutePath('@storybook/addon-links'),
1515
getAbsolutePath('@chromatic-com/storybook'),
1616
getAbsolutePath('@storybook/addon-designs'),
17+
getAbsolutePath('@storybook/addon-docs'),
1718
],
1819
framework: {
1920
name: getAbsolutePath('@storybook/react-vite'),
2021
options: {},
2122
},
22-
23-
core: {},
24-
23+
core: {
24+
disableTelemetry: true,
25+
},
2526
async viteFinal(config) {
2627
return {
2728
...config,

‎apps/docs/.storybook/manager.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { addons } from '@storybook/manager-api';
2+
import { themes } from '@storybook/theming';
3+
4+
// Configure the manager UI
5+
addons.setConfig({
6+
theme: themes.dark, // Use dark theme for the manager UI
7+
sidebar: {
8+
showRoots: true,
9+
collapsedRoots: ['other'],
10+
},
11+
// Customize the manager UI
12+
selectedPanel: 'controls',
13+
initialActive: 'sidebar',
14+
// Improve the overall appearance
15+
panelPosition: 'bottom',
16+
showNav: true,
17+
showPanel: true,
18+
showToolbar: true,
19+
});

‎apps/docs/.storybook/modeDecorator.tsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,50 @@
1-
import React, { useState, useCallback } from 'react';
1+
import React, { useState, useCallback, useEffect } from 'react';
22
import { Sun, Moon } from 'lucide-react';
33

44
// eslint-disable-next-line @typescript-eslint/no-explicit-any
55
export const ModeDecorator = (Story: any) => {
6-
const [isDarkMode, setIsDarkMode] = useState(false);
6+
const [isDarkMode, setIsDarkMode] = useState(true); // Start with dark mode
77

88
const toggleMode = useCallback(() => {
99
setIsDarkMode(!isDarkMode);
1010
document.documentElement.classList.toggle('dark', !isDarkMode);
1111
}, [isDarkMode]);
1212

13+
// Initialize dark mode on mount
14+
useEffect(() => {
15+
document.documentElement.classList.add('dark');
16+
}, []);
17+
1318
return (
1419
<div className={isDarkMode ? 'dark' : ''}>
1520
<button
1621
onClick={toggleMode}
17-
className="fixed top-4 right-4 z-50 p-2 rounded-full
18-
bg-background border border-border shadow-lg
19-
hover:scale-105 transition-transform"
22+
className="fixed top-4 right-4 z-50 p-2 rounded-2xl
23+
bg-gray-800 border border-gray-600 shadow-lg
24+
hover:scale-105 transition-transform cursor-pointer"
2025
aria-label="Toggle dark mode"
26+
style={{
27+
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
28+
borderColor: isDarkMode ? '#4b5563' : '#d1d5db',
29+
color: isDarkMode ? '#ffffff' : '#000000',
30+
}}
2131
>
2232
{isDarkMode ? (
23-
<Sun className="size-5 text-foreground" />
33+
<Sun className="size-2" style={{ color: '#ffffff' }} />
2434
) : (
25-
<Moon className="size-5 text-foreground" />
35+
<Moon className="size-2" style={{ color: '#000000' }} />
2636
)}
2737
</button>
28-
<div className="bg-background text-foreground min-h-screen p-8">
38+
<div
39+
className="min-h-screen"
40+
style={{
41+
backgroundColor: isDarkMode ? '#0b0c0e' : '#ffffff',
42+
color: isDarkMode ? '#ffffff' : '#000000',
43+
fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
44+
lineHeight: '1.6',
45+
padding: '2rem',
46+
}}
47+
>
2948
<Story />
3049
</div>
3150
</div>

‎apps/docs/.storybook/preview-head.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- Inter Font from Google Fonts -->
2+
<link rel="preconnect" href="https://fonts.googleapis.com" />
3+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
4+
<link
5+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
6+
rel="stylesheet"
7+
/>
8+
9+
<!-- Inject global CSS variables for Docs tab -->
10+
<link rel="stylesheet" href="/global.css" />
11+
12+
<!-- SigNoz Favicon (placeholder) -->
13+
<link
14+
rel="icon"
15+
type="image/svg+xml"
16+
href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iNiIgZmlsbD0iIzAwNzNGQSIvPgo8cGF0aCBkPSJNMTYgOEwxMiAxMkwxNiAxNkwxMiAyMEwxNiAyNEwyMCAyMEwxNiAxNkwyMCAxMkwxNiA4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+"
17+
/>

0 commit comments

Comments
 (0)