ershisan99/bundlers-demo
1
0
Fork 0
mirror of https://github.com/ershisan99/bundlers-demo.git synced 2025-12-16 20:49:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

storybook template

Browse Source
This commit is contained in:
andres
2023-11-15 16:15:18 +01:00
commit 8d36e6cf5d
23 changed files with 10014 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,12 @@
module.exports = {
extends: ['@it-incubator/eslint-config','plugin:storybook/recommended'],
overrides: [
{
files: ['**/*.stories.tsx'],
rules: {
'react-hooks/rules-of-hooks': 'off',
'no-console': 'off',
},
},
],
}

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

4
.prettierrc.cjs Normal file
View File

@@ -0,0 +1,4 @@
module.exports = {
...require('@it-incubator/prettier-config'),
//override settings here
}

28
.storybook/main.ts Normal file
View File

@@ -0,0 +1,28 @@
import { dirname, join } from 'path'
import { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@storybook/addon-essentials'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
docs: {
autodocs: true,
},
viteFinal: config => {
config.build = config.build || {}
config.build.sourcemap = false
return config
},
}
export default config
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')))
}

15
.storybook/preview.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { Preview } from '@storybook/react'
import '../src/styles/index.scss'
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
}
export default preview

3
.stylelintrc.cjs Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
extends: '@it-incubator/stylelint-config',
}

0
README.md Normal file
View File

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>

44
package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "bundlers",
"private": true,
"version": "0.0.0",
"type": "module",
"types": "./dist/index.d.ts",
"main": "./dist/index.js",
"module": "./dist/index.js",
"scripts": {
"dev": "storybook dev -p 6006",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
"preview": "vite preview",
"build-storybook": "storybook build"
},
"dependencies": {
"clsx": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@it-incubator/eslint-config": "^1.0.1",
"@it-incubator/prettier-config": "^0.1.2",
"@it-incubator/stylelint-config": "^0.1.5",
"@storybook/addon-essentials": "7.5.3",
"@storybook/addon-interactions": "7.5.3",
"@storybook/addon-links": "7.5.3",
"@storybook/blocks": "7.5.3",
"@storybook/react": "7.5.3",
"@storybook/react-vite": "7.5.3",
"@storybook/testing-library": "0.2.2",
"@types/node": "^20.9.0",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint-plugin-storybook": "^0.6.15",
"sass": "^1.69.5",
"storybook": "7.5.3",
"stylelint": "^15.11.0",
"typescript": "^5.2.2",
"vite": "^4.5.0"
}
}

9633
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

44
src/components/button/button.module.scss Normal file
View File

@@ -0,0 +1,44 @@
.button {
all: unset;
cursor: pointer;
box-sizing: border-box;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
&:focus-visible {
outline: 2px solid lightcoral;
outline-offset: 2px;
}
}
.fullWidth {
width: 100%;
}
.primary {
color: white;
background-color: blue;
}
.secondary {
color: black;
background-color: lightblue;
}
.tertiary {
color: blue;
border: 1px solid blue;
}
.link {
color: blue;
text-decoration: underline;
}
.icon {
width: 1.5rem;
height: 1.5rem;
}

69
src/components/button/button.stories.tsx Normal file
View File

@@ -0,0 +1,69 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './'
const meta = {
argTypes: {
onClick: { action: 'clicked' },
variant: {
control: { type: 'radio' },
options: ['primary', 'secondary', 'tertiary', 'link'],
},
},
component: Button,
tags: ['autodocs'],
title: 'Components/Button',
} satisfies Meta<typeof Button>
export default meta
type Story = StoryObj<typeof meta>
export const Primary: Story = {
args: {
children: 'Primary Button',
disabled: false,
variant: 'primary',
},
}
export const Secondary: Story = {
args: {
children: 'Secondary Button',
disabled: false,
variant: 'secondary',
},
}
export const Tertiary: Story = {
args: {
children: 'Tertiary Button',
disabled: false,
variant: 'tertiary',
},
}
export const Link: Story = {
args: {
children: 'Button that looks like a link',
disabled: false,
variant: 'link',
},
}
export const FullWidth: Story = {
args: {
children: 'Full Width Button',
disabled: false,
fullWidth: true,
variant: 'primary',
},
}
export const AsLink: Story = {
args: {
as: 'a',
children: 'Link that looks like a button',
href: 'https://google.com',
rel: 'noopener noreferrer',
target: '_blank',
variant: 'primary',
},
}

23
src/components/button/button.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentPropsWithoutRef, ElementType } from 'react'
import { clsx } from 'clsx'
import s from './button.module.scss'
export const buttonVariant = ['icon', 'link', 'primary', 'secondary', 'tertiary'] as const
export type ButtonVariant = (typeof buttonVariant)[number]
export type ButtonProps<T extends ElementType = 'button'> = {
as?: T
fullWidth?: boolean
variant?: ButtonVariant
} & ComponentPropsWithoutRef<T>
export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
const { as: Component = 'button', className, fullWidth, variant = 'primary', ...rest } = props
const classNames = clsx(s.button, s[variant], fullWidth && s.fullWidth, className)
return <Component className={classNames} {...rest} />
}

1
src/components/button/index.ts Normal file
View File

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

1
src/components/index.ts Normal file
View File

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

4
src/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import './styles/index.scss'
export * from './components'
export { clsx } from 'clsx'

30
src/styles/_boilerplate.scss Normal file
View File

@@ -0,0 +1,30 @@
html {
box-sizing: border-box;
font-size: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
input,
button,
select,
textarea,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
color: inherit;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-family);
line-height: var(--line-height-m);
}

22
src/styles/_typography.scss Normal file
View File

@@ -0,0 +1,22 @@
:root {
/* globals */
--font-family: system-ui, sans-serif;
/* font-sizes */
--font-size-xs: 12px;
--font-size-s: 14px;
--font-size-m: 16px;
--font-size-l: 18px;
--font-size-xl: 20px;
--font-size-xxl: 22px;
/* line-heights */
--line-height-m: 24px;
--line-height-xl: 36px;
/* font-weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
}

2
src/styles/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@forward 'typography';
@forward 'boilerplate';

1
src/vite-env.d.ts vendored Normal file
View File

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

25
tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": false,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})