Skip to content

Commit 0d455ba

Browse files
dgcadgca
authored
chore: Add Storybook MVP (#2366)
1 parent d0d3489 commit 0d455ba

File tree

12 files changed

+991
-273
lines changed

12 files changed

+991
-273
lines changed

‎packages/onchainkit/.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
coverage
1+
coverage
2+
*storybook.log

‎packages/onchainkit/.storybook/main.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5+
addons: [
6+
{
7+
name: '@storybook/addon-essentials',
8+
options: {
9+
docs: false,
10+
},
11+
},
12+
'@storybook/addon-onboarding',
13+
'@storybook/addon-interactions',
14+
],
15+
framework: {
16+
name: '@storybook/react-vite',
17+
options: {},
18+
},
19+
};
20+
export default config;

‎packages/onchainkit/.storybook/preview.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import type { Preview } from '@storybook/react';
3+
import { OnchainKitProvider } from '../src/OnchainKitProvider';
4+
import { base } from 'wagmi/chains';
5+
import '../src/styles/index.css';
6+
7+
function getApiKey() {
8+
try {
9+
return process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY;
10+
} catch (err) {
11+
console.error(err);
12+
return undefined;
13+
}
14+
}
15+
16+
const preview: Preview = {
17+
decorators: [
18+
(Story) => (
19+
<OnchainKitProvider
20+
apiKey={getApiKey()}
21+
chain={base}
22+
config={{
23+
appearance: {
24+
mode: 'auto',
25+
},
26+
wallet: {
27+
display: 'modal',
28+
},
29+
}}
30+
>
31+
<Story />
32+
</OnchainKitProvider>
33+
),
34+
],
35+
parameters: {
36+
controls: {
37+
matchers: {
38+
color: /(background|color)$/i,
39+
date: /Date$/i,
40+
},
41+
},
42+
},
43+
};
44+
45+
export default preview;

‎packages/onchainkit/package.json

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"access": "public"
99
},
1010
"scripts": {
11-
"build": "pnpm clean && pnpm bundle:prod && pnpm tailwind:prod",
12-
"dev": "concurrently \"pnpm tailwind:dev\" \"pnpm bundle:dev\"",
11+
"build": "pnpm clean && pnpm bundle:prod",
12+
"dev": "pnpm bundle:dev",
1313
"bundle:dev": "NODE_ENV=development vite build --watch",
1414
"bundle:prod": "vite build",
1515
"tailwind:dev": "tailwind -i ./src/styles/index-with-tailwind.css -o ./dist/styles.css --watch",
@@ -24,7 +24,9 @@
2424
"test:ui": "vitest --ui",
2525
"get-next-version": "node ./scripts/get-next-version.js",
2626
"publish-alpha": "node ./scripts/publish-alpha.js",
27-
"validate-build": "node ./scripts/validate-build.js"
27+
"validate-build": "node ./scripts/validate-build.js",
28+
"storybook": "storybook dev -p 6006",
29+
"build-storybook": "storybook build"
2830
},
2931
"peerDependencies": {
3032
"react": "^18 || ^19",
@@ -44,6 +46,13 @@
4446
"wagmi": "^2.14.11"
4547
},
4648
"devDependencies": {
49+
"@storybook/addon-essentials": "^8.6.14",
50+
"@storybook/addon-interactions": "^8.6.14",
51+
"@storybook/addon-onboarding": "^8.6.14",
52+
"@storybook/blocks": "^8.6.14",
53+
"@storybook/react": "^8.6.14",
54+
"@storybook/react-vite": "^8.6.14",
55+
"@storybook/test": "^8.6.14",
4756
"@testing-library/jest-dom": "6.4.7",
4857
"@testing-library/react": "^14.2.0",
4958
"@testing-library/user-event": "^14.6.1",
@@ -56,6 +65,7 @@
5665
"@vitest/ui": "^3.0.5",
5766
"autoprefixer": "^10.4.19",
5867
"babel-plugin-module-resolver": "^5.0.2",
68+
"chromatic": "^11.28.2",
5969
"concurrently": "^8.0.0",
6070
"esbuild-fix-imports-plugin": "^1.0.19",
6171
"esbuild-plugin-babel": "^0.2.3",
@@ -65,6 +75,7 @@
6575
"graphql-request": "^6.1.0",
6676
"jsdom": "^24.1.0",
6777
"packemon": "3.3.1",
78+
"postcss": "^8",
6879
"react": "^18",
6980
"react-dom": "^18",
7081
"rimraf": "^5.0.5",
@@ -96,8 +107,7 @@
96107
"module": "./dist/index.js",
97108
"exports": {
98109
"./package.json": "./package.json",
99-
"./styles.css": "./dist/styles.css",
100-
"./tailwind.css": "./dist/tailwind.css",
110+
"./styles.css": "./dist/assets/style.css",
101111
"./theme": "./dist/styles/theme.js",
102112
".": {
103113
"types": "./dist/index.d.ts",

‎packages/onchainkit/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,6 @@ export type {
1717
isBaseOptions,
1818
isEthereumOptions,
1919
} from './core/types';
20+
import './styles/index.css';
2021

2122
export type { OnchainKitProviderReact } from './types';

‎packages/onchainkit/src/styles/index-with-tailwind.css

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/onchainkit/src/styles/index.css

Lines changed: 8 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,8 @@
1-
/* Font */
2-
.ock-font-family {
3-
font-family: var(--ock-font-family);
4-
}
5-
6-
/* Border */
7-
.ock-border-default {
8-
border-color: var(--ock-bg-default);
9-
}
10-
11-
.ock-border-default-active {
12-
border-color: var(--ock-bg-default-active);
13-
}
14-
15-
.ock-border-line-primary {
16-
border-color: var(--ock-line-primary);
17-
}
18-
19-
.ock-border-line-default {
20-
border-color: var(--ock-line-default);
21-
}
22-
23-
.ock-border-line-heavy {
24-
border-color: var(--ock-line-heavy);
25-
}
26-
27-
.ock-border-line-inverse {
28-
border-color: var(--ock-line-inverse);
29-
}
30-
31-
.ock-border-radius {
32-
border-radius: var(--ock-border-radius);
33-
}
34-
35-
.ock-border-radius-inner {
36-
border-radius: var(--ock-border-radius-inner);
37-
}
38-
39-
/* Fill */
40-
.ock-fill-default {
41-
fill: var(--ock-bg-default);
42-
}
43-
44-
.ock-fill-default-reverse {
45-
fill: var(--ock-bg-default-reverse);
46-
}
47-
48-
.ock-fill-alternate {
49-
fill: var(--ock-bg-alternate);
50-
}
51-
52-
/* Icon */
53-
.ock-icon-color-primary {
54-
fill: var(--ock-icon-color-primary);
55-
}
56-
.ock-icon-color-foreground {
57-
fill: var(--ock-icon-color-foreground);
58-
}
59-
.ock-icon-color-foreground-muted {
60-
fill: var(--ock-icon-color-foreground-muted);
61-
}
62-
.ock-icon-color-inverse {
63-
fill: var(--ock-icon-color-inverse);
64-
}
65-
.ock-icon-color-error {
66-
fill: var(--ock-icon-color-error);
67-
}
68-
.ock-icon-color-success {
69-
fill: var(--ock-icon-color-success);
70-
}
71-
.ock-icon-color-warning {
72-
fill: var(--ock-icon-color-warning);
73-
}
74-
75-
/* Placeholder */
76-
.placeholder-ock-default::placeholder {
77-
color: var(--ock-text-foreground-muted);
78-
}
79-
80-
/* Scrollbar */
81-
.ock-scrollbar {
82-
scrollbar-width: thin;
83-
scrollbar-color: #d1d5db #ffffff;
84-
}
85-
86-
/* Shadow */
87-
.ock-shadow-default {
88-
box-shadow: 0px 8px 12px 0px #5b616e1f;
89-
}
90-
91-
.dark .ock-shadow-default {
92-
box-shadow: 0px 8px 12px 0px #5b616e1f;
93-
}
94-
95-
/* Text */
96-
.ock-text-inverse {
97-
color: var(--ock-text-inverse);
98-
}
99-
.ock-text-foreground {
100-
color: var(--ock-text-foreground);
101-
}
102-
.ock-text-foreground-muted {
103-
color: var(--ock-text-foreground-muted);
104-
}
105-
.ock-text-error {
106-
color: var(--ock-text-error);
107-
}
108-
.ock-text-primary {
109-
color: var(--ock-text-primary);
110-
}
111-
.ock-text-success {
112-
color: var(--ock-text-success);
113-
}
114-
.ock-text-warning {
115-
color: var(--ock-text-warning);
116-
}
117-
.ock-text-disabled {
118-
color: var(--ock-text-disabled);
119-
}
120-
/* Background */
121-
.ock-bg-default {
122-
background-color: var(--ock-bg-default);
123-
}
124-
.ock-bg-default-hover {
125-
background-color: var(--ock-bg-default-hover);
126-
}
127-
.ock-bg-default-active {
128-
background-color: var(--ock-bg-default-active);
129-
}
130-
.ock-bg-alternate {
131-
background-color: var(--ock-bg-alternate);
132-
}
133-
.ock-bg-alternate-hover {
134-
background-color: var(--ock-bg-alternate-hover);
135-
}
136-
.ock-bg-alternate-active {
137-
background-color: var(--ock-bg-alternate-active);
138-
}
139-
.ock-bg-inverse {
140-
background-color: var(--ock-bg-inverse);
141-
}
142-
.ock-bg-inverse-hover {
143-
background-color: var(--ock-bg-inverse-hover);
144-
}
145-
.ock-bg-inverse-active {
146-
background-color: var(--ock-bg-inverse-active);
147-
}
148-
.ock-bg-primary {
149-
background-color: var(--ock-bg-primary);
150-
}
151-
.ock-bg-primary-hover {
152-
background-color: var(--ock-bg-primary-hover);
153-
}
154-
.ock-bg-primary-active {
155-
background-color: var(--ock-bg-primary-active);
156-
}
157-
.ock-bg-secondary {
158-
background-color: var(--ock-bg-secondary);
159-
}
160-
.ock-bg-secondary-hover {
161-
background-color: var(--ock-bg-secondary-hover);
162-
}
163-
.ock-bg-secondary-active {
164-
background-color: var(--ock-bg-secondary-active);
165-
}
166-
.ock-bg-error {
167-
background-color: var(--ock-bg-error);
168-
}
169-
.ock-bg-warning {
170-
background-color: var(--ock-bg-warning);
171-
}
172-
.ock-bg-success {
173-
background-color: var(--ock-bg-success);
174-
}
175-
.ock-bg-default-reverse {
176-
background-color: var(--ock-bg-default-reverse);
177-
}
178-
.ock-bg-primary-washed {
179-
background-color: var(--ock-bg-primary-washed);
180-
}
181-
.ock-bg-primary-disabled {
182-
background-color: var(--ock-bg-primary-disabled);
183-
}
184-
1+
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz@0,9..40;1,9..40&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,700;1,9..40,700&display=swap');
5+
@import url('https://fonts.googleapis.com/css2?family=Oxanium:[email protected]&display=swap');
6+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]&display=swap');
7+
@import url('./ock.css');
8+
@import url('./tailwind-base.css');

0 commit comments

Comments
 (0)