storybook
This commit is contained in:
parent
7c614c66d9
commit
33a81d8ee7
32
.storybook/main.ts
Normal file
32
.storybook/main.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { FrameworkOptions, StorybookConfig } from 'storybook-solidjs-vite'
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-themes'
|
||||
],
|
||||
framework: {
|
||||
name: 'storybook-solidjs-vite',
|
||||
options: {
|
||||
builder: {
|
||||
viteConfigPath: './app.config.ts'
|
||||
}
|
||||
} as FrameworkOptions
|
||||
},
|
||||
docs: {
|
||||
autodocs: 'tag'
|
||||
},
|
||||
previewHead: (head) => `
|
||||
${head}
|
||||
<style>
|
||||
body {
|
||||
transition: none !important;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
export default config
|
||||
34
.storybook/preview.ts
Normal file
34
.storybook/preview.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { withThemeByClassName } from '@storybook/addon-themes'
|
||||
import '../src/styles/_imports.scss'
|
||||
|
||||
const preview = {
|
||||
parameters: {
|
||||
themes: {
|
||||
default: 'light',
|
||||
list: [
|
||||
{ name: 'light', class: '', color: '#f8fafc' },
|
||||
{ name: 'dark', class: 'dark', color: '#0f172a' }
|
||||
]
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default preview
|
||||
|
||||
export const decorators = [
|
||||
withThemeByClassName({
|
||||
themes: {
|
||||
light: '',
|
||||
dark: 'dark'
|
||||
},
|
||||
defaultTheme: 'light',
|
||||
parentSelector: 'body'
|
||||
})
|
||||
]
|
||||
22
.storybook/test-runner.ts
Normal file
22
.storybook/test-runner.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import type { TestRunnerConfig } from '@storybook/test-runner'
|
||||
import { checkA11y, injectAxe } from 'axe-playwright'
|
||||
|
||||
/*
|
||||
* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
|
||||
* to learn more about the test-runner hooks API.
|
||||
*/
|
||||
const a11yConfig: TestRunnerConfig = {
|
||||
async preRender(page) {
|
||||
await injectAxe(page)
|
||||
},
|
||||
async postRender(page) {
|
||||
await checkA11y(page, '#storybook-root', {
|
||||
detailedReport: true,
|
||||
detailedReportOptions: {
|
||||
html: true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = a11yConfig
|
||||
|
|
@ -36,7 +36,8 @@ export default defineConfig({
|
|||
devOverlay: true,
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1024,
|
||||
target: 'esnext'
|
||||
target: 'esnext',
|
||||
sourcemap: true
|
||||
},
|
||||
vite: {
|
||||
envPrefix: 'PUBLIC_',
|
||||
|
|
|
|||
38
package.json
38
package.json
|
|
@ -15,7 +15,10 @@
|
|||
"fix": "npx @biomejs/biome check . --fix && stylelint **/*.{scss,css} --fix",
|
||||
"format": "npx @biomejs/biome format src/. --write",
|
||||
"postinstall": "npm run codegen && npx patch-package",
|
||||
"typecheck": "tsc --noEmit"
|
||||
"typecheck": "tsc --noEmit",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"storybook:test": "test-storybook",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@authorizerdev/authorizer-js": "^2.0.3",
|
||||
|
|
@ -37,6 +40,19 @@
|
|||
"@solidjs/meta": "^0.29.4",
|
||||
"@solidjs/router": "^0.14.3",
|
||||
"@solidjs/start": "^1.0.6",
|
||||
"@storybook/addon-a11y": "^8.2.9",
|
||||
"@storybook/addon-actions": "^8.2.9",
|
||||
"@storybook/addon-controls": "^8.2.9",
|
||||
"@storybook/addon-essentials": "^8.2.9",
|
||||
"@storybook/addon-interactions": "^8.2.9",
|
||||
"@storybook/addon-links": "^8.2.9",
|
||||
"@storybook/addon-themes": "^8.2.9",
|
||||
"@storybook/addon-viewport": "^8.2.9",
|
||||
"@storybook/blocks": "^8.2.9",
|
||||
"@storybook/html": "^8.2.9",
|
||||
"@storybook/react": "^8.2.9",
|
||||
"@storybook/test-runner": "^0.19.1",
|
||||
"@storybook/testing-library": "^0.2.2",
|
||||
"@tiptap/core": "^2.6.6",
|
||||
"@tiptap/extension-blockquote": "^2.6.6",
|
||||
"@tiptap/extension-bold": "^2.6.6",
|
||||
|
|
@ -68,9 +84,10 @@
|
|||
"@tiptap/extension-youtube": "^2.6.6",
|
||||
"@types/cookie": "^0.6.0",
|
||||
"@types/cookie-signature": "^1.1.2",
|
||||
"@types/node": "^22.5.0",
|
||||
"@types/node": "^22.5.2",
|
||||
"@types/throttle-debounce": "^5.0.2",
|
||||
"@urql/core": "^5.0.6",
|
||||
"axe-playwright": "^2.0.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"clsx": "^2.1.1",
|
||||
"cookie": "^0.6.0",
|
||||
|
|
@ -83,29 +100,32 @@
|
|||
"i18next-http-backend": "^2.6.1",
|
||||
"i18next-icu": "^2.3.0",
|
||||
"intl-messageformat": "^10.5.14",
|
||||
"javascript-time-ago": "^2.5.10",
|
||||
"javascript-time-ago": "^2.5.11",
|
||||
"patch-package": "^8.0.0",
|
||||
"prosemirror-history": "^1.4.1",
|
||||
"prosemirror-trailing-node": "^2.0.9",
|
||||
"prosemirror-view": "^1.34.0",
|
||||
"prosemirror-view": "^1.34.1",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"sass": "1.76.0",
|
||||
"solid-js": "^1.8.21",
|
||||
"solid-js": "^1.8.22",
|
||||
"solid-popper": "^0.3.0",
|
||||
"solid-tiptap": "0.7.0",
|
||||
"solid-transition-group": "^0.2.3",
|
||||
"stylelint": "^16.8.2",
|
||||
"storybook": "^8.2.9",
|
||||
"storybook-solidjs": "^1.0.0-beta.2",
|
||||
"storybook-solidjs-vite": "^1.0.0-beta.2",
|
||||
"stylelint": "^16.9.0",
|
||||
"stylelint-config-recommended": "^14.0.1",
|
||||
"stylelint-config-standard-scss": "^13.1.0",
|
||||
"stylelint-order": "^6.0.4",
|
||||
"stylelint-scss": "^6.5.0",
|
||||
"swiper": "^11.1.10",
|
||||
"stylelint-scss": "^6.5.1",
|
||||
"swiper": "^11.1.12",
|
||||
"throttle-debounce": "^5.0.2",
|
||||
"tslib": "^2.7.0",
|
||||
"typescript": "^5.5.4",
|
||||
"typograf": "^7.4.1",
|
||||
"uniqolor": "^1.1.1",
|
||||
"vinxi": "^0.4.1",
|
||||
"vinxi": "^0.4.2",
|
||||
"vite-plugin-mkcert": "^1.17.6",
|
||||
"vite-plugin-node-polyfills": "^0.22.0",
|
||||
"vite-plugin-sass-dts": "^1.3.25",
|
||||
|
|
|
|||
195
src/components/atoms/Button/Button.module.scss
Normal file
195
src/components/atoms/Button/Button.module.scss
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
.button {
|
||||
border-radius: 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&.primary {
|
||||
background: var(--background-color-invert);
|
||||
color: var(--default-color-invert);
|
||||
|
||||
&:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #9fa1a7;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
border: 1px solid #f7f7f7;
|
||||
background: #f7f7f7;
|
||||
color: #141414;
|
||||
|
||||
&:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
border: 3px solid var(--danger-color);
|
||||
background: var(--background-color);
|
||||
color: var(--danger-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--danger-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #696969;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
color: #141414;
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
font-weight: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.outline,
|
||||
&.bordered {
|
||||
border: 3px solid #f2f2f2;
|
||||
border-radius: 1.2em;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
margin-right: 0.8em;
|
||||
min-width: auto !important;
|
||||
padding: 0;
|
||||
transition:
|
||||
border-color 0.3s,
|
||||
background-color 0.3s,
|
||||
color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--link-color);
|
||||
border-color: var(--link-color);
|
||||
color: var(--link-hover-color);
|
||||
|
||||
:global(.icon) {
|
||||
filter: var(--icon-filter-hover);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.icon) {
|
||||
margin: 0 -0.5em;
|
||||
filter: var(--icon-filter);
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border-radius: 2px;
|
||||
border: 2px solid #000;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover {
|
||||
cursor: default;
|
||||
color: #9fa1a7;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
&.loading,
|
||||
&.loading:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
&.L {
|
||||
height: 56px;
|
||||
min-width: 80px;
|
||||
font-size: 20px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
&.M {
|
||||
height: 40px;
|
||||
min-width: 64px;
|
||||
font-size: 17px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&.S {
|
||||
height: 32px;
|
||||
min-width: 53px;
|
||||
font-size: 15px;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
|
||||
&.subscribeButton {
|
||||
aspect-ratio: auto;
|
||||
background-color: #000;
|
||||
border: 2px solid #000;
|
||||
border-radius: 0.8rem;
|
||||
color: #fff;
|
||||
float: none;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-top: 0.6rem;
|
||||
width: 9em;
|
||||
|
||||
.icon {
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
||||
.icon img {
|
||||
filter: invert(0) !important;
|
||||
}
|
||||
|
||||
.buttonSubscribeLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.buttonSubscribeLabelHovered {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonSubscribeLabelHovered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
&.followed {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
||||
.icon img {
|
||||
filter: invert(0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
||||
.icon img {
|
||||
filter: invert(1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/components/atoms/Button/Button.stories.tsx
Normal file
15
src/components/atoms/Button/Button.stories.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// src/components/atoms/Button/Button.stories.tsx
|
||||
import type { Meta } from '@storybook/html'
|
||||
import { Button } from './Button'
|
||||
|
||||
// Примените корректную типизацию для Storybook
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'Atoms/Button',
|
||||
argTypes: {
|
||||
label: { control: 'text' },
|
||||
primary: { control: 'boolean' },
|
||||
onClick: { action: 'clicked' }
|
||||
}
|
||||
}
|
||||
|
||||
export default meta
|
||||
50
src/components/atoms/Button/Button.tsx
Normal file
50
src/components/atoms/Button/Button.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import type { JSX } from 'solid-js'
|
||||
|
||||
import { clsx } from 'clsx'
|
||||
|
||||
import styles from './Button.module.scss'
|
||||
|
||||
export type ButtonVariant = 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline' | 'danger'
|
||||
type Props = {
|
||||
title?: string
|
||||
value: string | JSX.Element
|
||||
size?: 'S' | 'M' | 'L'
|
||||
variant?: ButtonVariant
|
||||
type?: 'submit' | 'button'
|
||||
loading?: boolean
|
||||
disabled?: boolean
|
||||
onClick?: (event?: MouseEvent) => void
|
||||
class?: string
|
||||
ref?: HTMLButtonElement | ((el: HTMLButtonElement) => void)
|
||||
isSubscribeButton?: boolean
|
||||
}
|
||||
|
||||
export const Button = (props: Props) => {
|
||||
return (
|
||||
<button
|
||||
ref={(el) => {
|
||||
if (typeof props.ref === 'function') {
|
||||
props.ref(el)
|
||||
return
|
||||
}
|
||||
props.ref = el
|
||||
}}
|
||||
title={props.title || (typeof props.value === 'string' ? props.value : '')}
|
||||
onClick={props.onClick}
|
||||
type={props.type ?? 'button'}
|
||||
disabled={props.loading || props.disabled}
|
||||
class={clsx(
|
||||
styles.button,
|
||||
styles[props.size ?? 'M'],
|
||||
styles[props.variant ?? 'primary'],
|
||||
{
|
||||
[styles.loading]: props.loading,
|
||||
[styles.subscribeButton]: props.isSubscribeButton
|
||||
},
|
||||
props.class
|
||||
)}
|
||||
>
|
||||
{props.value}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
1
src/components/atoms/Button/index.ts
Normal file
1
src/components/atoms/Button/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Button } from './Button'
|
||||
Loading…
Reference in New Issue
Block a user