Skip to content

Commit b8d671a

Browse files
Emmanuel-DevelopsEmmanuel-Develops
committed
init: tsup, typescript, storybook, sample component
0 parents  commit b8d671a

38 files changed

+1084
-0
lines changed

‎.gitignore‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
/dist
14+
15+
# Storybook
16+
storybook-static
17+
*storybook.log
18+
19+
# lock file
20+
yarn.lock
21+
22+
# misc
23+
.DS_Store
24+
*.pem
25+
26+
# debug
27+
npm-debug.log*
28+
yarn-debug.log*
29+
yarn-error.log*
30+
31+
# local env files
32+
.env*.local
33+
*.env
34+
35+
# typescript
36+
*.tsbuildinfo
37+
next-env.d.ts

‎.storybook/main.ts‎

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

‎.storybook/preview.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Preview } from "@storybook/react";
2+
3+
const preview: Preview = {
4+
parameters: {
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/i,
9+
},
10+
},
11+
},
12+
};
13+
14+
export default preview;

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Chaincode Labs
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# BDP-UI
2+
3+
**An open-source UI component library for the Bitcoin Dev Project (BDP) Apps**
4+
5+
## License
6+
7+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

‎package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "bdp-ui",
3+
"version": "1.0.0",
4+
"main": "./dist/index.js",
5+
"module": "./dist/index.mjs",
6+
"types": "./dist/index.d.ts",
7+
"files": [
8+
"dist"
9+
],
10+
"scripts": {
11+
"build": "tsup",
12+
"clean": "rm -rf dist",
13+
"dev": "tsup --watch",
14+
"test": "jest",
15+
"prepublishOnly": "npm run build",
16+
"storybook": "storybook dev -p 6006",
17+
"build-storybook": "storybook build"
18+
},
19+
"license": "MIT",
20+
"description": "",
21+
"peerDependencies": {
22+
"react": "^17.0.0 || ^18.0.0",
23+
"react-dom": "^17.0.0 || ^18.0.0"
24+
},
25+
"devDependencies": {
26+
"@chromatic-com/storybook": "^1.5.0",
27+
"@storybook/addon-essentials": "^8.1.10",
28+
"@storybook/addon-interactions": "^8.1.10",
29+
"@storybook/addon-links": "^8.1.10",
30+
"@storybook/addon-onboarding": "^8.1.10",
31+
"@storybook/addon-webpack5-compiler-swc": "^1.0.4",
32+
"@storybook/blocks": "^8.1.10",
33+
"@storybook/react": "^8.1.10",
34+
"@storybook/react-webpack5": "^8.1.10",
35+
"@storybook/test": "^8.1.10",
36+
"@testing-library/jest-dom": "^6.4.6",
37+
"@testing-library/react": "^16.0.0",
38+
"@types/react": "^18.3.3",
39+
"@types/react-dom": "^18.3.0",
40+
"jest": "^29.7.0",
41+
"jest-environment-jsdom": "^29.7.0",
42+
"react": "^17.0.0 || ^18.0.0",
43+
"react-dom": "^17.0.0 || ^18.0.0",
44+
"storybook": "^8.1.10",
45+
"tsup": "^8.1.0",
46+
"typescript": "^5.5.2"
47+
}
48+
}

‎src/components/Button/Button.stories.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// src/components/Button/Button.stories.tsx
2+
3+
import React from 'react';
4+
import { StoryFn, Meta } from '@storybook/react';
5+
import { Button, ButtonProps } from './Button';
6+
7+
export default {
8+
title: 'Components/Button',
9+
component: Button,
10+
argTypes: {
11+
variant: {
12+
control: { type: 'select', options: ['primary', 'secondary'] }
13+
},
14+
disabled: {
15+
control: 'boolean'
16+
},
17+
onClick: { action: 'clicked' }
18+
},
19+
} as Meta;
20+
21+
const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
22+
23+
export const Primary = Template.bind({});
24+
Primary.args = {
25+
label: 'Primary Button',
26+
variant: 'primary',
27+
};
28+
29+
export const Disabled = Template.bind({});
30+
Disabled.args = {
31+
label: 'Disabled Button',
32+
disabled: true,
33+
};

‎src/components/Button/Button.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// src/components/Button/Button.tsx
2+
3+
import React from 'react';
4+
5+
export interface ButtonProps {
6+
label: string;
7+
onClick?: () => void;
8+
variant?: 'primary' | 'secondary';
9+
size?: 'small' | 'medium' | 'large';
10+
disabled?: boolean;
11+
}
12+
13+
export const Button: React.FC<ButtonProps> = ({
14+
label,
15+
onClick,
16+
variant = 'primary',
17+
size = 'medium',
18+
disabled = false,
19+
}) => {
20+
const baseStyles = 'font-bold py-2 px-4 rounded';
21+
const variantStyles = {
22+
primary: 'bg-blue-500 hover:bg-blue-700 text-white',
23+
secondary: 'bg-gray-300 hover:bg-gray-400 text-gray-800',
24+
};
25+
const sizeStyles = {
26+
small: 'text-sm',
27+
medium: 'text-base',
28+
large: 'text-lg',
29+
};
30+
31+
const className = `
32+
${baseStyles}
33+
${variantStyles[variant]}
34+
${sizeStyles[size]}
35+
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
36+
`.trim();
37+
38+
return (
39+
<button
40+
className={className}
41+
onClick={onClick}
42+
disabled={disabled}
43+
>
44+
{label}
45+
</button>
46+
);
47+
};

‎src/components/Button/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Button';

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './components/Button'

0 commit comments

Comments
 (0)