Skip to content

Commit 11b1391

Browse files
YounixMYounixM
authored
Integrate storybook (#642)
* feat: integrate storybook and setup base for stories with examples * chore: update gitignore * fix: lint errors * chore: gitignore * chore: gitignore * chore: gitignore * chore: add @emotion/is-prop-valid * chore: update tsconfig target
1 parent 6bfd765 commit 11b1391

File tree

36 files changed

+25222
-13778
lines changed

36 files changed

+25222
-13778
lines changed

‎.eslintrc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "next",
3+
"rules": {
4+
"react/no-unescaped-entities": "off",
5+
"@next/next/no-page-custom-font": "off"
6+
}
7+
}

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ node_modules
44
.DS_Store
55
.env
66
public/search.json
7+
storybook-static
78

9+
*storybook.log

‎.storybook/main.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/** @type { import('@storybook/nextjs').StorybookConfig } */
2+
const config = {
3+
stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
4+
addons: [
5+
'@storybook/addon-onboarding',
6+
'@storybook/addon-links',
7+
'@storybook/addon-essentials',
8+
'@storybook/addon-interactions',
9+
'storybook-dark-mode',
10+
],
11+
framework: {
12+
name: '@storybook/nextjs',
13+
options: {},
14+
},
15+
reactDocgen: false,
16+
typescript: {
17+
check: false,
18+
checkOptions: {
19+
eslint: false,
20+
},
21+
},
22+
staticDirs: ['../public'],
23+
}
24+
export default config

‎.storybook/manager.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { addons } from '@storybook/manager-api'
2+
import { themes } from '@storybook/theming'
3+
4+
addons.setConfig({
5+
theme: themes.dark,
6+
})

‎.storybook/preview.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import '../css/tailwind.css'
2+
import '../css/global.css'
3+
4+
import { themes } from '@storybook/theming'
5+
6+
/** @type { import('@storybook/react').Preview } */
7+
const preview = {
8+
parameters: {
9+
docs: {
10+
theme: themes.dark,
11+
},
12+
backgrounds: {
13+
default: 'dark',
14+
values: [
15+
{
16+
name: 'dark',
17+
value: '#0b0c0e',
18+
},
19+
{
20+
name: 'light',
21+
value: '#f4f4f4',
22+
},
23+
],
24+
},
25+
controls: {
26+
matchers: {
27+
color: /(background|color)$/i,
28+
date: /Date$/i,
29+
},
30+
},
31+
},
32+
}
33+
34+
export default preview

‎.yarn/install-state.gz

2.52 MB
Binary file not shown.

‎.yarnrc.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎app/product-comparison/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default function ProductComparisons() {
7474
<div className="my-8 flex flex-wrap">
7575
{comparisons.map((comparison) => {
7676
return (
77-
<div className="col col--6">
77+
<div className="col col--6" key={comparison.id}>
7878
<div className="card-demo margin--md">
7979
<Link href={comparison.url}>
8080
<div className="card-dark min-h-[240px] rounded-sm border p-4">

‎app/resource-center/comparisons/Comparisons.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ interface ComparisonsPageHeaderProps {
1414

1515
const ComparisonsPageHeader: React.FC<ComparisonsPageHeaderProps> = ({ onSearch }) => {
1616
return (
17-
<section className="flex max-w-[697px] flex-col leading-[143%] mb-[72px]">
18-
<h2 className="self-start text-sm font-medium uppercase tracking-wider text-signoz_sakura-500 dark:text-signoz_sakura-400 mb-0">
17+
<section className="mb-[72px] flex max-w-[697px] flex-col leading-[143%]">
18+
<h2 className="mb-0 self-start text-sm font-medium uppercase tracking-wider text-signoz_sakura-500 dark:text-signoz_sakura-400">
1919
resources
2020
</h2>
21-
<h1 className="mt-3 my-0 self-start text-3xl font-semibold text-indigo-500 dark:text-indigo-200">
21+
<h1 className="my-0 mt-3 self-start text-3xl font-semibold text-indigo-500 dark:text-indigo-200">
2222
Comparisons
2323
</h1>
2424
<p className="my-4 w-full text-lg leading-8 tracking-normal text-gray-700 dark:text-stone-300 max-md:max-w-full">
@@ -52,8 +52,8 @@ export default function ComparisonsListing() {
5252
{searchValue && searchValue.length == 0 && (
5353
<div className="mt-5 w-full max-md:max-w-full">
5454
<div className="mt-4 grid gap-4 sm:grid-cols-1 md:grid-cols-2">
55-
{primaryFeaturedBlogs.map((featuredBlog) => {
56-
return <BlogPostCard blog={featuredBlog} />
55+
{primaryFeaturedBlogs.map((featuredBlog, index) => {
56+
return <BlogPostCard blog={featuredBlog} key={index} />
5757
})}
5858
</div>
5959
</div>
@@ -66,8 +66,8 @@ export default function ComparisonsListing() {
6666
)}
6767

6868
<div className="mt-4 grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
69-
{blogs.map((post) => {
70-
return <BlogPostCard blog={post} />
69+
{blogs.map((post, index) => {
70+
return <BlogPostCard blog={post} key={index} />
7171
})}
7272
</div>
7373
</div>

‎app/resource-center/opentelemetry/OpenTelemetry.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ interface OpenTelemetryPageHeaderProps {
1212

1313
const OpenTelemetryPageHeader: React.FC<OpenTelemetryPageHeaderProps> = ({ onSearch }) => {
1414
return (
15-
<section className="flex max-w-[697px] flex-col leading-[143%] mb-[72px]">
16-
<h2 className="self-start text-sm font-medium uppercase tracking-wider text-signoz_sakura-500 dark:text-signoz_sakura-400 mb-0">
15+
<section className="mb-[72px] flex max-w-[697px] flex-col leading-[143%]">
16+
<h2 className="mb-0 self-start text-sm font-medium uppercase tracking-wider text-signoz_sakura-500 dark:text-signoz_sakura-400">
1717
resources
1818
</h2>
19-
<h1 className="mt-3 my-0 self-start text-3xl font-semibold text-indigo-500 dark:text-indigo-200">
19+
<h1 className="my-0 mt-3 self-start text-3xl font-semibold text-indigo-500 dark:text-indigo-200">
2020
OpenTelemetry
2121
</h1>
2222
<p className="my-4 w-full text-lg leading-8 tracking-normal text-gray-700 dark:text-stone-300 max-md:max-w-full">
@@ -49,8 +49,8 @@ export default function OpenTelemetry() {
4949
{searchValue && searchValue.length == 0 && (
5050
<div className="mt-5 w-full max-md:max-w-full">
5151
<div className="mt-4 grid gap-4 sm:grid-cols-1 md:grid-cols-2">
52-
{primaryFeaturedBlogs.map((featuredBlog) => {
53-
return <BlogPostCard blog={featuredBlog} />
52+
{primaryFeaturedBlogs.map((featuredBlog, index) => {
53+
return <BlogPostCard blog={featuredBlog} key={index} />
5454
})}
5555
</div>
5656
</div>
@@ -63,8 +63,8 @@ export default function OpenTelemetry() {
6363
)}
6464

6565
<div className="mt-4 grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
66-
{blogs.map((post) => {
67-
return <BlogPostCard blog={post} />
66+
{blogs.map((post, index) => {
67+
return <BlogPostCard blog={post} key={index} />
6868
})}
6969
</div>
7070
</div>

‎app/seo.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ interface PageSEOProps {
55
title: string
66
description?: string
77
image?: string
8-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
98
[key: string]: any
109
}
1110

‎app/tag-data.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
"events": 1,
1616
"python": 11,
1717
"log-management": 16,
18-
"apm": 7,
18+
"apm": 8,
1919
"security": 1,
2020
"product-updates": 38,
2121
"database-monitoring": 5,
2222
"cloud": 1,
2323
"aws": 1,
2424
"talks": 4,
25-
"observability": 13,
25+
"observability": 16,
2626
"opentelemetry-instrumentation": 29,
2727
"go--golang": 4,
2828
"java": 2,
@@ -41,10 +41,12 @@
4141
"monitoring-tools": 1,
4242
"hiring": 1,
4343
"jokes": 1,
44-
"tools-comparision": 1,
44+
"tools-comparision": 3,
45+
"devops": 1,
46+
"infra": 1,
4547
"logging": 35,
4648
"faq": 45,
47-
"monitoring": 3,
49+
"monitoring": 4,
4850
"opentelemetry-tutorials": 11,
4951
"java-monitoring": 3,
5052
"javascript-monitoring": 1,

‎app/teams/Teams.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,7 @@ const Teams: React.FC<SignUpPageProps> = () => {
302302
{regions.map((region) => (
303303
<button
304304
type="button"
305+
key={region.id}
305306
className={`flex min-w-44 gap-4 self-start whitespace-nowrap rounded-sm border border-solid p-3 text-sm leading-[129%] tracking-normal ${region.id === formData.dataRegion ? 'border-[#4e74f866] bg-[#4e74f833]' : 'border-signoz_slate-400 bg-signoz_ink-300'}`}
306307
onClick={() => {
307308
handleRegionChange(region.id)

‎components/BlogHeader/BlogHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function BlogHeader({
7272
<h2 className="text-xs font-medium uppercase tracking-wide text-stone-700 dark:text-stone-300">
7373
written by
7474
</h2>
75-
{authors?.map((author) => <AuthorInfo author={author} />)}
75+
{authors?.map((author, index) => <AuthorInfo author={author} key={index} />)}
7676
</div>
7777
<div className="flex flex-col">
7878
<h2 className="text-xs font-medium uppercase tracking-wide text-stone-700 dark:text-stone-300">

‎components/Carousel/Carousel.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ export default function NextCarousel({ items }) {
3131
return (
3232
<div className="next-carousel">
3333
<Carousel responsive={responsive}>
34-
{items.map((item) => {
34+
{items.map((item, index) => {
3535
return (
36-
<div className="carousel-image">
36+
<div className="carousel-image" key={index}>
3737
<img src={item} />
3838
</div>
3939
)

‎components/build-for-developers/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@ const BuildForDevelopers = () => {
5050
</div>
5151
<div className="homepage-build-dev-container grid grid-cols-1 sm:grid-cols-2">
5252
{REASONS.map((section, index) => (
53-
<Card title={section.title} description={section.desc} img={section.figure} />
53+
<Card
54+
title={section.title}
55+
description={section.desc}
56+
img={section.figure}
57+
key={section.title}
58+
/>
5459
))}
5560
</div>
5661
</div>

‎components/comparison/grid/index.tsx

+25-33
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import React from "react";
2-
import styles from "./styles.module.css";
1+
import React from 'react'
2+
import styles from './styles.module.css'
33

44
const ComparisonGrid = (props) => {
5-
const { comparisonData } = props;
6-
const { DATA, TITLE, OTHER_HEADING } = comparisonData;
5+
const { comparisonData } = props
6+
const { DATA, TITLE, OTHER_HEADING } = comparisonData
77

88
return (
99
<div>
1010
<h3 className={styles.reasonHeaderTitle}>{TITLE}</h3>
1111
<ComparisonGridDesktop data={DATA} otherHeading={OTHER_HEADING} />
1212
<ComparisonGridMobile data={DATA} otherHeading={OTHER_HEADING} />
1313
</div>
14-
);
15-
};
14+
)
15+
}
1616

1717
const ComparisonGridDesktop = (props) => {
18-
const { data, otherHeading } = props;
18+
const { data, otherHeading } = props
1919
return (
2020
<div className="container">
2121
<div className={styles.tableGrid}>
@@ -29,68 +29,60 @@ const ComparisonGridDesktop = (props) => {
2929
<>
3030
<div className={styles.tableMetric}>{row.sideHeader}</div>
3131
<div className={styles.tableMetricAvailability}>
32-
{row.isAvailableInSignoz ? "✅" : "❌"}
32+
{row.isAvailableInSignoz ? '✅' : '❌'}
3333
{row.signozExtraDetail && (
34-
<small className={styles.tableMetricDesc}>
35-
{row.signozExtraDetail}
36-
</small>
34+
<small className={styles.tableMetricDesc}>{row.signozExtraDetail}</small>
3735
)}
3836
</div>
3937
<div className={styles.tableMetricAvailability}>
40-
{row.isAvailableInOther ? "✅" : "❌"}
38+
{row.isAvailableInOther ? '✅' : '❌'}
4139
{row.otherExtraDetail && (
42-
<small className={styles.tableMetricDesc}>
43-
{row.otherExtraDetail}
44-
</small>
40+
<small className={styles.tableMetricDesc}>{row.otherExtraDetail}</small>
4541
)}
4642
</div>
4743
</>
48-
);
44+
)
4945
})}
5046
</div>
5147
</div>
52-
);
53-
};
48+
)
49+
}
5450

5551
const ComparisonGridMobile = (props) => {
56-
const { data, otherHeading } = props;
52+
const { data, otherHeading } = props
5753
return (
5854
<div className="container">
5955
<div className={styles.tableGridMobile}>
60-
{data.map((cell) => {
56+
{data.map((cell, index) => {
6157
return (
62-
<div className={styles.tableGridCell}>
58+
<div className={styles.tableGridCell} key={index}>
6359
<h4 className={styles.tableGridCellHeader}>{cell.sideHeader}</h4>
6460
<div>
6561
<div className={styles.tableGridCompareCell}>
6662
<span className={styles.tableGridProdCell}>
6763
Signoz
6864
{cell.signozExtraDetail && (
69-
<small className={styles.tableMetricDesc}>
70-
{cell.signozExtraDetail}
71-
</small>
65+
<small className={styles.tableMetricDesc}>{cell.signozExtraDetail}</small>
7266
)}
7367
</span>
74-
<span> {cell.isAvailableInSignoz ? "✅" : "❌"}</span>
68+
<span> {cell.isAvailableInSignoz ? '✅' : '❌'}</span>
7569
</div>
7670
<div className={styles.tableGridCompareCell}>
7771
<span className={styles.tableGridProdCell}>
7872
{otherHeading}
7973
{cell.otherExtraDetail && (
80-
<small className={styles.tableMetricDesc}>
81-
{cell.otherExtraDetail}
82-
</small>
74+
<small className={styles.tableMetricDesc}>{cell.otherExtraDetail}</small>
8375
)}
8476
</span>
85-
<span> {cell.isAvailableInOther ? "✅" : "❌"}</span>
77+
<span> {cell.isAvailableInOther ? '✅' : '❌'}</span>
8678
</div>
8779
</div>
8880
</div>
89-
);
81+
)
9082
})}
9183
</div>
9284
</div>
93-
);
94-
};
85+
)
86+
}
9587

96-
export default ComparisonGrid;
88+
export default ComparisonGrid

‎components/comparison/top-reasons/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const TopReasons = (props) => {
4343
return (
4444
<div
4545
className={`row ${styles.reasonRow} ${!(index % 2) ? styles.shouldImageFirst : ''}`}
46+
key={index}
4647
>
4748
{index % 2 ? (
4849
<div className={`col col--6 margin-vert--md ${styles.reasonImageCol}`}>

‎components/figure.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react-hooks/rules-of-hooks */
12
'use client'
23

34
import React, { useState } from 'react'

‎components/index-features/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ export const SigNozFeatures = () => {
161161
// buttonText={section.buttonText}
162162
logo={section.logo}
163163
img={section.img}
164+
key={section.text}
164165
/>
165166
))}
166167
</div>

0 commit comments

Comments
 (0)