Skip to content

Commit

Permalink
improve storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
50l3r committed Oct 3, 2023
1 parent 4c26df0 commit 7803cc2
Show file tree
Hide file tree
Showing 14 changed files with 9,618 additions and 35,620 deletions.
49 changes: 0 additions & 49 deletions .storybook/app/components/s-head.jsx

This file was deleted.

50 changes: 50 additions & 0 deletions .storybook/app/components/s-head.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from 'react';

export const SHead = ({ image, children }) => {
return (
<div>
<div className="justify-center items-center flex" style={{
backgroundImage: `url(${image})`,
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
width: 'calc(100vw - 17px)',
height: '400px',
position: 'absolute',
left: 0,
top: 0
}}>
<div style={{
position: 'absolute',
content: ' ',
width: '100%',
height: '100%',
top: 0,
left: 0,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
zIndex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
<h2 style={{
color: 'white',
fontSize: '3rem',
fontWeight: 'bold',
zIndex: 2,
textShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
}}>
{children}
</h2>
</div>
</div>

<div style={{
position: 'relative',
marginTop: '400px',
}}>

</div>
</div>
);
};
94 changes: 94 additions & 0 deletions .storybook/helpers/params.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
type Control = {
type: string
options?: string[]
disable?: boolean
presetColors?: string[]
}

export function parseControl(props: any, disabled = false) {
const type = props.type
const control = props.control || null
const options = props.options || null
const presetColors = props.presetColors || null

let data: Control = { type: 'text', disable: disabled }

if (type === Boolean) {
data = control ? { type: control } : { type: 'boolean' }
} else if (type === String) {
data = control
? control
: options
? { type: 'inline-radio' }
: { type: 'text' }
} else if (type === Number) {
data = control ? control : { type: 'number' }
} else if (Array.isArray(type)) {
data = parseControl(type[0], disabled)
} else {
return { type: 'text' }
}

if (options) {
data.options = options
}

if (presetColors) {
data.presetColors = presetColors
}

return data
}

export function renderArgsV2(props: any) {
const args: any = {}

if (props) {
Object.keys(props).forEach((key: string) => {
const prop: any = props[key]

const description = prop.description || undefined
const options = prop.options || undefined
const control = parseControl(prop, false)

const type = Array.isArray(prop.type)
? prop.type.map((t: any) => t.name).join(',')
: prop.type.name

args[key] = {
description: description,
control: control,
options: options,
table: {
defaultValue:
prop.default !== undefined
? { summary: prop.default }
: undefined,
type: {
summary: type.toLowerCase(),
required: prop.required || false
},
disable: false
}
}

console.log(args)

// args[prop.name].control = parseControl(prop, false)
// args[prop.name].type.name = parseControl(prop, false).type
// if (Array.isArray(prop.type)) {
// const type = prop.type
// .map((t: any) => {
// return getReturnType(t)
// })
// .join(' | ')

// args[prop.name].table.type.summary = type
// } else {
// args[prop.name].table.type.summary = getReturnType(prop.type)
// }
})
}

return args
}
45 changes: 0 additions & 45 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import path from 'path'
import type { StorybookConfig } from '@storybook/vue3-vite'
import { VitePWA } from 'vite-plugin-pwa'
import { viteStaticCopy } from 'vite-plugin-static-copy'

const config: StorybookConfig = {
stories: [
Expand All @@ -24,47 +21,5 @@ const config: StorybookConfig = {
autodocs: false,
defaultName: 'Documentación'
}
// async viteFinal(config, { configType }) {
// config.resolve.alias = {
// ...config.resolve.alias,
// '@': path.resolve(__dirname, '../src'),
// 'tailwind.config': path.resolve(__dirname, '../tailwind.config.js')
// }

// // config.build = {
// // ...config.build,
// // ...{
// // rollupOptions: {
// // output: { sanitizeFileName: sanitizeFileName }
// // }
// // }
// // }

// config.optimizeDeps = {
// ...config.optimizeDeps,
// include: ['tailwind.config', 'react']
// }

// config.plugins.push(VitePWA({}))

// config.plugins.push(
// viteStaticCopy({
// targets: [
// {
// src: './plugin.js',
// dest: './'
// }
// ]
// })
// )

// // config.build.commonjsOptions = {
// // ...config.build.commonjsOptions,
// // include: ['../tailwind-config.js', '../node_modules/**'],
// // esmExternals: true
// // }

// return config
// }
}
export default config
17 changes: 17 additions & 0 deletions .storybook/manager-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<style>
html.light .sidebar-container .sidebar-item,
html.light .sidebar-container .sidebar-item>a{
color: #9CA3AF;
}

html.light .sidebar-container .sidebar-item[data-selected=true]>a,
html.light .sidebar-container .sidebar-item[data-selected=true]{
color: white;
}

html.light #storybook-explorer-searchfield{
border: 1px solid #1F2937;
}
</style>


40 changes: 35 additions & 5 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,52 @@
overflow: auto;
}

html.light .docblock-argstable,
html.dark .docblock-argstable{
background: transparent;
}

h1>a[aria-hidden=true],
h2>a[aria-hidden=true],
h3>a[aria-hidden=true],
h4>a[aria-hidden=true],
h5>a[aria-hidden=true],
h6>a[aria-hidden=true]{
margin-left: -24px;
}

/* LIGHT */
html.light .docs-story,
html.light .docblock-argstable tr td{
background-color: #F3F4F6;
}

html.light .docblock-argstable,
html.dark .docblock-argstable{
background: transparent;
html.light{
background-color: #F3F4F6;
}

html.light .docblock-argstable-body tr[title] td,
html.light .docblock-argstable-head th{
background-color: #1A56DB !important;
color: white;
}


/* DARK */
html.dark .docs-story,
html.dark .docblock-argstable tr td{
background-color: #1F2937;
}

html.light .sidebar-item{
color: #F3F4F6;
html.dark{
background-color: #111827;
}

html.dark .docblock-argstable-body tr[title] td,
html.dark .docblock-argstable-head th{
background-color: #1A56DB !important;
color: white;
}


</style>
Loading

0 comments on commit 7803cc2

Please sign in to comment.