diff --git a/packages/ladle/generate-icons.js b/packages/ladle/generate-icons.js index 66746be2..0bd53315 100644 --- a/packages/ladle/generate-icons.js +++ b/packages/ladle/generate-icons.js @@ -32,6 +32,7 @@ async function main() { .replace(/stroke-linejoin/g, "strokeLinejoin") .replace(/clip-path/g, "clipPath") .replace(/fill-opacity/g, "fillOpacity") + .replace(/", "{...props}>") .replace(/black/g, "currentcolor"); diff --git a/packages/ladle/lib/app/assets/icons/Moon.svg b/packages/ladle/lib/app/assets/icons/Moon.svg new file mode 100644 index 00000000..259cea08 --- /dev/null +++ b/packages/ladle/lib/app/assets/icons/Moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ladle/lib/app/assets/icons/Refresh.svg b/packages/ladle/lib/app/assets/icons/Refresh.svg new file mode 100644 index 00000000..803a7d5c --- /dev/null +++ b/packages/ladle/lib/app/assets/icons/Refresh.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/ladle/lib/app/generated/styles.css b/packages/ladle/lib/app/generated/styles.css index 8e00be99..b7bae029 100644 --- a/packages/ladle/lib/app/generated/styles.css +++ b/packages/ladle/lib/app/generated/styles.css @@ -1 +1 @@ -:root{--reach-dialog:1;--ladle-font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ladle-line-height:1.5;--ladle-bg-color:#fff;--ladle-text-color:#000;--ladle-primary-50:#fafaf9;--ladle-primary-100:#f5f5f4;--ladle-primary-200:#e7e5e4;--ladle-primary-300:#d6d3d1;--ladle-primary-400:#a8a29e;--ladle-primary-500:#78716c;--ladle-primary-600:#57534e;--ladle-primary-700:#44403c;--ladle-primary-800:#292524;--ladle-primary-900:#1c1917;--ladle-accent-50:#f5f3ff;--ladle-accent-100:#ede9fe;--ladle-accent-200:#ddd6fe;--ladle-accent-300:#c4b5fd;--ladle-accent-400:#a78bfa;--ladle-accent-500:#8b5cf6;--ladle-accent-600:#7c3aed;--ladle-accent-700:#6d28d9;--ladle-accent-800:#5b21b6;--ladle-accent-900:#4c1d95;--ladle-aside-width:260px}[data-theme=dark]{--ladle-bg-color:#1c1917;--ladle-text-color:#fff;--ladle-primary-50:#1c1917;--ladle-primary-100:#292524;--ladle-primary-200:#44403c;--ladle-primary-300:#57534e;--ladle-primary-400:#78716c;--ladle-primary-500:#a8a29e;--ladle-primary-600:#d6d3d1;--ladle-primary-700:#e7e5e4;--ladle-primary-800:#f5f5f4;--ladle-primary-900:#fafaf9;--ladle-accent-50:#4c1d95;--ladle-accent-100:#5b21b6;--ladle-accent-200:#6d28d9;--ladle-accent-300:#7c3aed;--ladle-accent-400:#8b5cf6;--ladle-accent-500:#a78bfa;--ladle-accent-600:#c4b5fd;--ladle-accent-700:#ddd6fe;--ladle-accent-800:#ede9fe;--ladle-accent-900:#f5f3ff}html{-webkit-text-size-adjust:100%;font-family:var(--ladle-font-family);line-height:var(--ladle-line-height);-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{background-color:var(--ladle-bg-color-primary);line-height:inherit;margin:0}[data-ladle] *,[data-ladle] :after,[data-ladle] :before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid #e5e7eb;box-sizing:border-box}[data-ladle] :after,[data-ladle] :before{--tw-content:""}[data-ladle] hr{border-top-width:1px;color:inherit;height:0}[data-ladle] abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}[data-ladle] h1,[data-ladle] h2,[data-ladle] h3,[data-ladle] h4,[data-ladle] h5,[data-ladle] h6{font-size:inherit;font-weight:inherit}[data-ladle] a{color:inherit;text-decoration:inherit}[data-ladle] b,[data-ladle] strong{font-weight:bolder}[data-ladle] code,[data-ladle] kbd,[data-ladle] pre,[data-ladle] samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}[data-ladle] small{font-size:80%}[data-ladle] sub,[data-ladle] sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}[data-ladle] sub{bottom:-.25em}[data-ladle] sup{top:-.5em}[data-ladle] table{border-collapse:collapse;border-color:inherit;text-indent:0}[data-ladle] button,[data-ladle] input,[data-ladle] optgroup,[data-ladle] select,[data-ladle] textarea{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;margin:0;padding:0}[data-ladle] button,[data-ladle] select{text-transform:none}[data-ladle] [type=button],[data-ladle] [type=reset],[data-ladle] [type=submit],[data-ladle] button{-webkit-appearance:button;background-color:transparent;background-image:none}[data-ladle] :-moz-focusring{outline:auto}[data-ladle] :-moz-ui-invalid{box-shadow:none}[data-ladle] progress{vertical-align:baseline}[data-ladle] ::-webkit-inner-spin-button,[data-ladle] ::-webkit-outer-spin-button{height:auto}[data-ladle] [type=search]{-webkit-appearance:textfield;outline-offset:-2px}[data-ladle] ::-webkit-search-decoration{-webkit-appearance:none}[data-ladle] ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[data-ladle] summary{display:list-item}[data-ladle] blockquote,[data-ladle] dd,[data-ladle] dl,[data-ladle] figure,[data-ladle] h1,[data-ladle] h2,[data-ladle] h3,[data-ladle] h4,[data-ladle] h5,[data-ladle] h6,[data-ladle] hr,[data-ladle] p,[data-ladle] pre{margin:0}[data-ladle] fieldset{margin:0;padding:0}[data-ladle] legend{padding:0}[data-ladle] menu,[data-ladle] ol,[data-ladle] ul{list-style:none;margin:0;padding:0}[data-ladle] textarea{resize:vertical}[data-ladle] input::-moz-placeholder,[data-ladle] textarea::-moz-placeholder{color:#9ca3af;opacity:1}[data-ladle] input:-ms-input-placeholder,[data-ladle] textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}[data-ladle] input::placeholder,[data-ladle] textarea::placeholder{color:#9ca3af;opacity:1}[data-ladle] [role=button],[data-ladle] button{cursor:pointer}[data-ladle] :disabled{cursor:default}[data-ladle] audio,[data-ladle] canvas,[data-ladle] embed,[data-ladle] iframe,[data-ladle] img,[data-ladle] object,[data-ladle] svg,[data-ladle] video{display:block;vertical-align:middle}[data-ladle] img,[data-ladle] video{height:auto;max-width:100%}[data-ladle] [hidden]{display:none}[data-ladle] input{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:transparent;border-color:var(--ladle-primary-400);border-radius:.375rem;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--ladle-primary-900);font-size:.875rem;line-height:1.25rem;padding:.25rem .5rem;transition-duration:75ms;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}[data-ladle] input:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity));--tw-ring-opacity:0.2;background-color:var(--ladle-primary-50);border-color:var(--ladle-accent-500);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid transparent;outline-offset:2px}.ladle-wrapper{display:flex;flex-direction:column}.ladle-main{background-color:var(--ladle-bg-color);color:var(--ladle-text-color);flex:1 1 auto;padding:1em}.ladle-search{padding:.75rem}.ladle-search input{width:100%}@media (min-width:768px){.ladle-wrapper{align-items:flex-start;flex-direction:row;margin:0;min-height:100%}[data-mode=full] .ladle-wrapper,[data-mode=full] body,[data-mode=full] html{height:100vh;overflow:hidden}.ladle-main{align-self:stretch;padding:3em}}.ladle-loader{bottom:0;height:3rem;left:0;margin:auto;position:absolute;top:0;width:3rem}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}.ladle-loader{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;right:var(--ladle-aside-width)}html[dir=rtl] .ladle-loader{left:var(--ladle-aside-width);right:0}.ladle-addons{align-items:center;background-color:var(--ladle-primary-200);bottom:0;display:flex;left:0;padding-left:.5rem;padding-right:.5rem;position:fixed;right:var(--ladle-aside-width)}.ladle-addons ul{display:flex}.ladle-addons ul li{line-height:1}.ladle-addons ul li button{height:1.5rem;padding-left:.125rem;padding-right:.125rem}.ladle-addons ul li button:hover{background-color:var(--ladle-primary-100)}.ladle-addons ul li button>svg{color:var(--ladle-primary-600);height:1rem}.ladle-addons ul li button>svg:hover{color:var(--ladle-primary-800)}.ladle-addons ul li button>label{display:none}html[dir=rtl] .ladle-addons{left:var(--ladle-aside-width);right:0}[data-ladle] .ladle-addons-story-title{align-items:center;color:var(--ladle-primary-700);display:flex;font-size:.75rem;line-height:1rem;margin-right:auto}[data-ladle] .ladle-addons-story-icon{color:var(--ladle-primary-500);height:.375rem}[data-ladle] .ladle-addons-story-divider{color:var(--ladle-primary-400);height:1rem}.ladle-aside{background-color:var(--ladle-primary-100);border-color:var(--ladle-primary-300);border-style:solid;border-width:0 0 0 2px;max-width:var(--ladle-aside-width);min-height:100vh;min-width:var(--ladle-aside-width);z-index:10}.ladle-shortcut{border-color:var(--ladle-primary-400);border-radius:.25rem;border-style:solid;border-width:1px;color:var(--ladle-primary-500);display:block;font-size:11px;font-weight:600;height:1.25rem;line-height:1rem;padding-left:.375rem;padding-right:.375rem;pointer-events:none;text-align:center}.ladle-search{position:relative}.ladle-search .ladle-shortcut{bottom:0;margin:auto;position:absolute;right:1rem;top:0}.ladle-search input{padding-left:2rem}.ladle-search input:focus+svg{color:var(--ladle-accent-500)}.ladle-search input:focus+svg+.ladle-shortcut{display:none}.ladle-search svg{bottom:0;color:var(--ladle-primary-500);height:1rem;left:1rem;margin:auto;position:absolute;top:0}html[dir=rtl] .ladle-aside{border-left-width:0;border-right-width:2px}html[dir=rtl] .ladle-search svg{left:auto;right:1rem}html[dir=rtl] .ladle-shortcut{left:1rem;right:auto}html[dir=rtl] input{padding-left:.75rem;padding-right:2rem}.ladle-addon-tooltip{display:none}[data-ladle] .ladle-tree-view{padding:.25rem}[data-ladle] .ladle-tree-view-button{align-items:center;border-radius:.25rem;color:var(--ladle-primary-700);display:flex;height:2rem;width:100%}[data-ladle] .ladle-tree-view-button:hover{background-color:var(--ladle-primary-200)}[data-ladle] .ladle-tree-view-item{width:100%}[data-ladle] .ladle-tree-view-item[data-active] .ladle-tree-view-button{background-color:var(--ladle-accent-200);border-radius:.25rem;color:var(--ladle-accent-900);font-weight:500}[data-ladle] .ladle-tree-view-item[data-active] .ladle-tree-view-button .ladle-tree-view-story-icon{color:var(--ladle-accent-700)}[data-ladle] .ladle-tree-view-chevron{--tw-rotate:0deg;height:1rem;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}[data-ladle] .ladle-tree-view-chevron,[data-ladle] .ladle-tree-view-chevron[data-expanded]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}[data-ladle] .ladle-tree-view-chevron[data-expanded]{--tw-rotate:90deg}[data-ladle] .ladle-tree-view-story-icon{color:var(--ladle-primary-400);height:.75rem;margin-left:.75rem;margin-right:.5rem;width:.75rem}[data-ladle] .ladle-tree-view-folder{color:var(--ladle-accent-800);height:1rem;margin-right:.5rem;width:1rem}[data-ladle] .ladle-tree-not-found{text-align:center}[data-ladle] .ladle-tree-not-found svg{color:var(--ladle-primary-500);margin-bottom:.5rem;margin-left:auto;margin-right:auto}[data-ladle] .ladle-tree-not-found h4{color:var(--ladle-primary-900);font-weight:500}[data-ladle] .ladle-tree-not-found p{color:var(--ladle-primary-400);font-size:.875rem;line-height:1.25rem}html[dir=rtl] [data-ladle] .ladle-tree-view-button{padding-left:0!important}html[dir=rtl] [data-ladle] .ladle-tree-view-story-icon{margin-left:.5rem;margin-right:.75rem}html[dir=rtl] [data-ladle] .ladle-tree-view-folder{margin-left:.5rem;margin-right:0}html:not([dir=rtl]) [data-ladle] .ladle-tree-view-button{padding-right:0!important}[data-theme=dark] .ladle-tree-view-story-icon{color:var(--ladle-primary-500)}[data-theme=dark] .ladle-tree-view-folder{color:var(--ladle-accent-500)}.ladle-error-content{color:var(--ladle-primary-500);font-family:var(--ladle-font-family);font-size:18px} \ No newline at end of file +:root{--ladle-font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ladle-line-height:1.5;--ladle-bg-color:#fff;--ladle-text-color:#000;--ladle-primary-50:#fafaf9;--ladle-primary-100:#f5f5f4;--ladle-primary-200:#e7e5e4;--ladle-primary-300:#d6d3d1;--ladle-primary-400:#a8a29e;--ladle-primary-500:#78716c;--ladle-primary-600:#57534e;--ladle-primary-700:#44403c;--ladle-primary-800:#292524;--ladle-primary-900:#1c1917;--ladle-accent-50:#f5f3ff;--ladle-accent-100:#ede9fe;--ladle-accent-200:#ddd6fe;--ladle-accent-300:#c4b5fd;--ladle-accent-400:#a78bfa;--ladle-accent-500:#8b5cf6;--ladle-accent-600:#7c3aed;--ladle-accent-700:#6d28d9;--ladle-accent-800:#5b21b6;--ladle-accent-900:#4c1d95;--ladle-aside-width:260px}[data-theme=dark]{--ladle-bg-color:#1c1917;--ladle-text-color:#fff;--ladle-primary-50:#1c1917;--ladle-primary-100:#292524;--ladle-primary-200:#44403c;--ladle-primary-300:#57534e;--ladle-primary-400:#78716c;--ladle-primary-500:#a8a29e;--ladle-primary-600:#d6d3d1;--ladle-primary-700:#e7e5e4;--ladle-primary-800:#f5f5f4;--ladle-primary-900:#fafaf9;--ladle-accent-50:#4c1d95;--ladle-accent-100:#5b21b6;--ladle-accent-200:#6d28d9;--ladle-accent-300:#7c3aed;--ladle-accent-400:#8b5cf6;--ladle-accent-500:#a78bfa;--ladle-accent-600:#c4b5fd;--ladle-accent-700:#ddd6fe;--ladle-accent-800:#ede9fe;--ladle-accent-900:#f5f3ff}html{-webkit-text-size-adjust:100%;font-family:var(--ladle-font-family);line-height:var(--ladle-line-height);-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{background-color:var(--ladle-bg-color-primary);line-height:inherit;margin:0}[data-ladle] *,[data-ladle] :after,[data-ladle] :before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid #e5e7eb;box-sizing:border-box}[data-ladle] :after,[data-ladle] :before{--tw-content:""}[data-ladle] hr{border-top-width:1px;color:inherit;height:0}[data-ladle] abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}[data-ladle] h1,[data-ladle] h2,[data-ladle] h3,[data-ladle] h4,[data-ladle] h5,[data-ladle] h6{font-size:inherit;font-weight:inherit}[data-ladle] a{color:inherit;text-decoration:inherit}[data-ladle] b,[data-ladle] strong{font-weight:bolder}[data-ladle] code,[data-ladle] kbd,[data-ladle] pre,[data-ladle] samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}[data-ladle] small{font-size:80%}[data-ladle] sub,[data-ladle] sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}[data-ladle] sub{bottom:-.25em}[data-ladle] sup{top:-.5em}[data-ladle] table{border-collapse:collapse;border-color:inherit;text-indent:0}[data-ladle] button,[data-ladle] input,[data-ladle] optgroup,[data-ladle] select,[data-ladle] textarea{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;margin:0;padding:0}[data-ladle] button,[data-ladle] select{text-transform:none}[data-ladle] [type=button],[data-ladle] [type=reset],[data-ladle] [type=submit],[data-ladle] button{-webkit-appearance:button;background-color:transparent;background-image:none}[data-ladle] :-moz-focusring{outline:auto}[data-ladle] :-moz-ui-invalid{box-shadow:none}[data-ladle] progress{vertical-align:baseline}[data-ladle] ::-webkit-inner-spin-button,[data-ladle] ::-webkit-outer-spin-button{height:auto}[data-ladle] [type=search]{-webkit-appearance:textfield;outline-offset:-2px}[data-ladle] ::-webkit-search-decoration{-webkit-appearance:none}[data-ladle] ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[data-ladle] summary{display:list-item}[data-ladle] blockquote,[data-ladle] dd,[data-ladle] dl,[data-ladle] figure,[data-ladle] h1,[data-ladle] h2,[data-ladle] h3,[data-ladle] h4,[data-ladle] h5,[data-ladle] h6,[data-ladle] hr,[data-ladle] p,[data-ladle] pre{margin:0}[data-ladle] fieldset{margin:0;padding:0}[data-ladle] legend{padding:0}[data-ladle] menu,[data-ladle] ol,[data-ladle] ul{list-style:none;margin:0;padding:0}[data-ladle] textarea{resize:vertical}[data-ladle] input::-moz-placeholder,[data-ladle] textarea::-moz-placeholder{color:#9ca3af;opacity:1}[data-ladle] input:-ms-input-placeholder,[data-ladle] textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}[data-ladle] input::placeholder,[data-ladle] textarea::placeholder{color:#9ca3af;opacity:1}[data-ladle] [role=button],[data-ladle] button{cursor:pointer}[data-ladle] :disabled{cursor:default}[data-ladle] audio,[data-ladle] canvas,[data-ladle] embed,[data-ladle] iframe,[data-ladle] img,[data-ladle] object,[data-ladle] svg,[data-ladle] video{display:block;vertical-align:middle}[data-ladle] img,[data-ladle] video{height:auto;max-width:100%}[data-ladle] [hidden]{display:none}[data-ladle] input,[data-ladle] select,[data-ladle] textarea{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:transparent;border-color:var(--ladle-primary-400);border-radius:.375rem;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--ladle-primary-900);font-size:.875rem;line-height:1.25rem;padding:.25rem .5rem;transition-duration:75ms;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}[data-ladle] input:focus,[data-ladle] select:focus,[data-ladle] textarea:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity));--tw-ring-opacity:0.2;background-color:var(--ladle-primary-50);border-color:var(--ladle-accent-500);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid transparent;outline-offset:2px}[data-ladle] input[type=checkbox],[data-ladle] input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:var(--ladle-accent-500);border-radius:.125rem;cursor:pointer;display:inline-block;height:1.25rem;width:auto;width:1.25rem}[data-ladle] input[type=checkbox]:checked,[data-ladle] input[type=radio]:checked{background-color:var(--ladle-accent-500)}[data-ladle] input[type=checkbox],[data-ladle] input[type=radio]{background-position:50%;background-repeat:no-repeat;vertical-align:middle}[data-ladle] input[type=checkbox]:checked,[data-ladle] input[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,");background-size:16px 16px}[data-ladle] input[type=radio]{border-radius:9999px}.ladle-button{background-color:transparent;color:var(--ladle-primary-900);cursor:pointer}.ladle-wrapper{display:flex;flex-direction:column}.ladle-main{background-color:var(--ladle-bg-color);color:var(--ladle-text-color);flex:1 1 auto;padding:1em}.ladle-search{padding:.75rem}.ladle-search input{width:100%}@media (min-width:768px){.ladle-wrapper{align-items:flex-start;flex-direction:row;margin:0;min-height:100%}[data-mode=full] .ladle-wrapper,[data-mode=full] body,[data-mode=full] html{height:100vh;overflow:hidden}.ladle-main{align-self:stretch;padding:3em}}.ladle-loader{bottom:0;height:3rem;left:0;margin:auto;position:absolute;top:0;width:3rem}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}.ladle-loader{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;right:var(--ladle-aside-width)}html[dir=rtl] .ladle-loader{left:var(--ladle-aside-width);right:0}.ladle-addons{align-items:center;background-color:var(--ladle-primary-200);bottom:0;display:flex;left:0;padding-left:.5rem;padding-right:.5rem;position:fixed;right:var(--ladle-aside-width)}.ladle-addons ul{display:flex}.ladle-addons ul li{line-height:1}.ladle-addons ul li button{height:1.5rem;padding-left:.5rem;padding-right:.5rem}.ladle-addons ul li button:focus,.ladle-addons ul li button:hover,.ladle-addons ul li button[data-active]{background-color:var(--ladle-primary-100)}.ladle-addons ul li button[data-active]>svg{color:var(--ladle-accent-500)}.ladle-addons ul li button>svg{color:var(--ladle-primary-600);height:1rem}.ladle-addons ul li button>svg:hover{color:var(--ladle-primary-800)}.ladle-addons ul li button>label{display:none}html[dir=rtl] .ladle-addons{left:var(--ladle-aside-width);right:0}[data-ladle] .ladle-addons-story-title{align-items:center;color:var(--ladle-primary-700);display:flex;font-size:.75rem;line-height:1rem;margin:-.5rem auto -.5rem -.5rem;padding:.25rem .5rem}[data-ladle] .ladle-addons-story-title:focus,[data-ladle] .ladle-addons-story-title:hover{background-color:var(--ladle-primary-100)}[data-ladle] .ladle-addons-story-icon{color:var(--ladle-primary-500);height:.375rem;margin-right:.5rem}[data-ladle] .ladle-addons-story-icon[data-has-copied]{height:.75rem}[data-ladle] .ladle-addons-story-divider{color:var(--ladle-primary-400);height:1rem;margin-left:.25rem;margin-right:.25rem}.ladle-addons-story-tooltip{margin-left:.5rem}.ladle-addons-story-tooltip svg{height:.75rem;vertical-align:middle;width:.75rem}.ladle-aside{background-color:var(--ladle-primary-100);border-color:var(--ladle-primary-300);border-style:solid;border-width:0 0 0 2px;max-width:var(--ladle-aside-width);min-height:100vh;min-width:var(--ladle-aside-width);z-index:10}.ladle-shortcut{border-color:var(--ladle-primary-400);border-radius:.25rem;border-style:solid;border-width:1px;color:var(--ladle-primary-500);display:block;font-size:11px;font-weight:600;height:1.25rem;line-height:1rem;padding-left:.375rem;padding-right:.375rem;pointer-events:none;text-align:center}.ladle-search{position:relative}.ladle-search .ladle-shortcut{bottom:0;margin:auto;position:absolute;right:1rem;top:0}.ladle-search input{padding-left:2rem}.ladle-search input:focus+svg{color:var(--ladle-accent-500)}.ladle-search input:focus+svg+.ladle-shortcut{display:none}.ladle-search svg{bottom:0;color:var(--ladle-primary-500);height:1rem;left:1.25rem;margin:auto;position:absolute;top:0}html[dir=rtl] .ladle-aside{border-left-width:0;border-right-width:2px}html[dir=rtl] .ladle-search svg{left:auto;right:1.25rem}html[dir=rtl] .ladle-shortcut{left:1rem;right:auto}html[dir=rtl] .ladle-search input{padding-left:.75rem;padding-right:2rem}.ladle-addon-tooltip{display:none}[data-ladle] .ladle-tree-view{padding:.25rem}[data-ladle] .ladle-tree-view-button{align-items:center;border-radius:.25rem;color:var(--ladle-primary-700);display:flex;height:2rem;width:100%}[data-ladle] .ladle-tree-view-button:hover{background-color:var(--ladle-primary-200)}[data-ladle] .ladle-tree-view-item{width:100%}[data-ladle] .ladle-tree-view-item[data-active] .ladle-tree-view-button{background-color:var(--ladle-accent-200);border-radius:.25rem;color:var(--ladle-accent-900);font-weight:500}[data-ladle] .ladle-tree-view-item[data-active] .ladle-tree-view-button .ladle-tree-view-story-icon{color:var(--ladle-accent-700)}[data-ladle] .ladle-tree-view-chevron{--tw-rotate:0deg;height:1rem;margin-right:.25rem;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}[data-ladle] .ladle-tree-view-chevron,[data-ladle] .ladle-tree-view-chevron[data-expanded]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}[data-ladle] .ladle-tree-view-chevron[data-expanded]{--tw-rotate:90deg}[data-ladle] .ladle-tree-view-story-icon{color:var(--ladle-primary-400);margin-left:.5rem;margin-right:.5rem;width:.75rem}[data-ladle] .ladle-tree-view-button-icon{color:var(--ladle-accent-800);margin-right:.5rem;width:1rem}[data-ladle] .ladle-tree-not-found{text-align:center}[data-ladle] .ladle-tree-not-found svg{color:var(--ladle-primary-500);margin-bottom:.5rem;margin-left:auto;margin-right:auto}[data-ladle] .ladle-tree-not-found h4{color:var(--ladle-primary-900);font-weight:500}[data-ladle] .ladle-tree-not-found p{color:var(--ladle-primary-400);font-size:.875rem;line-height:1.25rem}html[dir=rtl] [data-ladle] .ladle-tree-view-button{padding-left:0!important}html[dir=rtl] [data-ladle] .ladle-tree-view-story-icon{margin-left:.75rem;margin-right:.25rem}html[dir=rtl] [data-ladle] .ladle-tree-view-button-icon{margin-left:.5rem;margin-right:0}html:not([dir=rtl]) [data-ladle] .ladle-tree-view-button{padding-right:0!important}[data-theme=dark] .ladle-tree-view-story-icon{color:var(--ladle-primary-500)}[data-theme=dark] .ladle-tree-view-button-icon{color:var(--ladle-accent-500)}:root{--reach-tooltip:1;--reach-dialog:1}[data-reach-tooltip]{pointer-events:none;position:absolute}@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}[data-reach-tooltip]{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);-webkit-animation:fadeInUp .1s linear 1;animation:fadeInUp .1s linear 1;background-color:var(--ladle-primary-50);border-color:var(--ladle-primary-300);border-style:solid;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--ladle-primary-800);font-size:85%;padding:.25rem .5rem;white-space:nowrap;z-index:1000}[data-reach-dialog-overlay]{bottom:1.5rem;left:0;overflow:auto;position:fixed;right:var(--ladle-aside-width)}html[dir=rtl] [data-reach-dialog-overlay]{left:var(--ladle-aside-width);right:0}[data-reach-dialog-content]{background-color:var(--ladle-primary-100);border-color:var(--ladle-primary-300);border-style:solid;border-width:2px 0 0;color:var(--ladle-primary-900)}[data-ladle] .ladle-modal-close-button{border-width:0;font-size:.875rem;line-height:1.25rem;padding:1rem .5rem;position:absolute;right:0;top:0}[data-ladle] .ladle-modal-close-button svg{height:1rem;width:auto}[data-ladle] .ladle-modal-header{display:flex;font-size:.875rem;line-height:1.25rem;padding-left:1.25rem;padding-right:3rem;padding-top:.75rem}[data-ladle] .ladle-modal-header svg{display:inline-block;height:1rem;margin-right:.25rem;vertical-align:sub}[data-ladle] .ladle-modal-heading{color:var(--ladle-primary-500);font-weight:500;margin:0;text-transform:uppercase}[data-ladle] .ladle-controls-table{table-layout:auto;width:100%}[data-ladle] .ladle-controls-table tbody tr:first-child td{padding-top:1rem}[data-ladle] .ladle-controls-table tbody tr:last-child td{padding-bottom:2rem}[data-ladle] .ladle-controls-table td{padding-bottom:.75rem;padding-left:.5rem;vertical-align:top}[data-ladle] .ladle-controls-table td:first-child{padding-left:1.25rem;padding-right:1rem;width:0}[data-ladle] .ladle-controls-table input,[data-ladle] .ladle-controls-table select,[data-ladle] .ladle-controls-table textarea{max-width:20rem}[data-ladle] .ladle-controls-table textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}[data-ladle] .ladle-controls-table input[type=radio]{margin-right:.5rem}[data-ladle] .ladle-control-radio-option{margin-right:1rem}[data-ladle] .ladle-control-radio-option label{cursor:pointer}[data-ladle] .ladle-control-radio-option:last-child{margin-right:0}[data-ladle] .ladle-control-reset{color:var(--ladle-primary-600);margin-left:auto}[data-ladle] .ladle-control-reset svg{margin-right:.5rem}.ladle-error-content{color:var(--ladle-primary-500);font-family:var(--ladle-font-family);font-size:18px} \ No newline at end of file diff --git a/packages/ladle/lib/app/src/addon-panel.tsx b/packages/ladle/lib/app/src/addon-panel.tsx index 3ebada60..e2576890 100644 --- a/packages/ladle/lib/app/src/addon-panel.tsx +++ b/packages/ladle/lib/app/src/addon-panel.tsx @@ -6,7 +6,6 @@ import { Button as ModeButton } from "./addons/mode"; import { Button as RtlButton } from "./addons/rtl"; import { Button as LadleButton } from "./addons/ladle"; import config from "./get-config"; -import { ChevronRight, Circle } from "./icons"; import { StoryName } from "./addons/story-name"; type AddonNames = keyof Config["addons"]; diff --git a/packages/ladle/lib/app/src/addons/control.tsx b/packages/ladle/lib/app/src/addons/control.tsx index 1679375d..b1cf4ab7 100644 --- a/packages/ladle/lib/app/src/addons/control.tsx +++ b/packages/ladle/lib/app/src/addons/control.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Controls } from "../icons"; +import { Controls, Refresh } from "../icons"; import { Modal } from "../ui"; import queryString from "query-string"; import type { AddonProps } from "../../../shared/types"; @@ -10,6 +10,7 @@ import { GlobalAction, ControlState, } from "../../../shared/types"; +import { isAnyControlValuePreSet } from "../utils/controls"; const getInputType = (type?: ControlType) => { switch (type) { @@ -116,12 +117,13 @@ const Control: React.FC<{ {controlKey} {(globalState.control[controlKey].options || []).map((option) => ( - + { dispatch({ type: ActionType.UpdateControl, @@ -249,23 +251,67 @@ const Control: React.FC<{ }; export const Button: React.FC = ({ globalState, dispatch }) => { - const [open, setOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(isAnyControlValuePreSet()); + const [isDirty, setIsDirty] = React.useState(isAnyControlValuePreSet()); const text = "Explore different versions of this story through controls."; + const handleResetToDefaults = () => { + setIsDirty(false); + const controls: ControlState = {}; + Object.keys(globalState.control).forEach((control) => { + controls[control] = { + ...globalState.control[control], + value: globalState.control[control].defaultValue, + }; + }); + dispatch({ + type: ActionType.UpdateControl, + value: controls, + }); + }; + + const controlledDispatch = React.useCallback( + (...args: Parameters>) => { + if (args[0].type === ActionType.UpdateControl) { + setIsDirty(true); + } + + dispatch(...args); + }, + [dispatch], + ); + return (
  • + + ) + } + isOpen={isOpen} + close={() => setIsOpen(false)} label="Toggle different controls to update the story." > @@ -277,30 +323,13 @@ export const Button: React.FC = ({ globalState, dispatch }) => { ); })}
    -
    • diff --git a/packages/ladle/lib/app/src/addons/ladle.tsx b/packages/ladle/lib/app/src/addons/ladle.tsx index 089f0879..0fe588d3 100644 --- a/packages/ladle/lib/app/src/addons/ladle.tsx +++ b/packages/ladle/lib/app/src/addons/ladle.tsx @@ -1,54 +1,63 @@ +import Tooltip from "@reach/tooltip"; import * as React from "react"; import { Ladle } from "../icons"; import { Modal, Code } from "../ui"; export const Button: React.FC<{}> = () => { - const [open, setOpen] = React.useState(false); - const text = "Get more information about Ladle."; + const [isOpen, setIsOpen] = React.useState(false); + const handleButtonClick = () => { + setIsOpen((prevState) => !prevState); + }; + return (
  • - + + +
    • ); }; diff --git a/packages/ladle/lib/app/src/addons/mode.tsx b/packages/ladle/lib/app/src/addons/mode.tsx index 258ccbb3..379a444c 100644 --- a/packages/ladle/lib/app/src/addons/mode.tsx +++ b/packages/ladle/lib/app/src/addons/mode.tsx @@ -3,6 +3,7 @@ import queryString from "query-string"; import { Maximize } from "../icons"; import { ModeState, AddonProps, ActionType } from "../../../shared/types"; import config from "../get-config"; +import Tooltip from "@reach/tooltip"; export const getQuery = (locationSearch: string) => { const mode = queryString.parse(locationSearch).mode as string; @@ -17,21 +18,21 @@ export const getQuery = (locationSearch: string) => { }; export const Button: React.FC = ({ dispatch }) => { - const text = + const label = "Open fullscreen mode. It removes all other styles and wrappers."; return (
  • - + + +
    • ); }; diff --git a/packages/ladle/lib/app/src/addons/rtl.tsx b/packages/ladle/lib/app/src/addons/rtl.tsx index 480ec4b0..848b86b5 100644 --- a/packages/ladle/lib/app/src/addons/rtl.tsx +++ b/packages/ladle/lib/app/src/addons/rtl.tsx @@ -3,6 +3,7 @@ import queryString from "query-string"; import { Rtl } from "../icons"; import { AddonProps, ActionType } from "../../../shared/types"; import config from "../get-config"; +import Tooltip from "@reach/tooltip"; export const getQuery = (locationSearch: string) => { const urlVal = queryString.parse(locationSearch).rtl; @@ -14,22 +15,19 @@ export const getQuery = (locationSearch: string) => { export const Button: React.FC = ({ dispatch, globalState }) => { const rtlText = "Switch text direction to right to left."; const ltrText = "Switch text direction to left to right."; + const label = globalState.rtl ? ltrText : rtlText; return (
  • - + + +
    • ); }; diff --git a/packages/ladle/lib/app/src/addons/story-name.tsx b/packages/ladle/lib/app/src/addons/story-name.tsx index 670868b0..7c7c5590 100644 --- a/packages/ladle/lib/app/src/addons/story-name.tsx +++ b/packages/ladle/lib/app/src/addons/story-name.tsx @@ -1,32 +1,55 @@ -import React from "react"; -import { ChevronRight, Circle } from "../icons"; +import React, { useEffect, useRef, useState } from "react"; +import { Check, ChevronRight, Circle } from "../icons"; import { parseStoryTitle } from "../utils/story"; +import Tooltip from "@reach/tooltip"; interface StoryNameProps { title: string; } export const StoryName: React.FC = ({ title }) => { + const [hasCopied, setHasCopied] = useState(false); + const timeoutRef = useRef(null); const handleClick = () => { + // Copy text to clipboard navigator.clipboard.writeText(title); + + // Show the user the text is now copied + setHasCopied(true); + + // Set has copied to false after 3s + timeoutRef.current = window.setTimeout(() => setHasCopied(false), 3000); }; const parsedStoryTitle = parseStoryTitle(title); + const Icon = hasCopied ? Check : Circle; + + useEffect(() => { + setHasCopied(false); + + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }, [title]); return ( - + + ); }; diff --git a/packages/ladle/lib/app/src/addons/theme.tsx b/packages/ladle/lib/app/src/addons/theme.tsx index f4173e28..a3d0e735 100644 --- a/packages/ladle/lib/app/src/addons/theme.tsx +++ b/packages/ladle/lib/app/src/addons/theme.tsx @@ -1,7 +1,8 @@ import * as React from "react"; import queryString from "query-string"; -import { Sun } from "../icons"; +import { Moon, Sun } from "../icons"; import { ThemeState, AddonProps, ActionType } from "../../../shared/types"; +import Tooltip from "@reach/tooltip"; export const getQuery = (locationSearch: string) => { const theme = queryString.parse(locationSearch).theme as string; @@ -18,36 +19,25 @@ export const getQuery = (locationSearch: string) => { }; export const Button: React.FC = ({ globalState, dispatch }) => { - const darkText = "Switch to dark theme."; - const lightText = "Switch to light theme."; + const { theme } = globalState; + const isLightTheme = theme === ThemeState.Light; + + const label = isLightTheme ? "Switch to Dark theme" : "Switch to Light theme"; + const Icon = isLightTheme ? Sun : Moon; + + const handleClick = () => { + const newTheme = isLightTheme ? ThemeState.Dark : ThemeState.Light; + document.documentElement.setAttribute("data-theme", newTheme); + dispatch({ type: ActionType.UpdateTheme, value: newTheme }); + }; + return (
  • - + + +
    • ); }; diff --git a/packages/ladle/lib/app/src/icons.tsx b/packages/ladle/lib/app/src/icons.tsx index dada91ab..c654866f 100644 --- a/packages/ladle/lib/app/src/icons.tsx +++ b/packages/ladle/lib/app/src/icons.tsx @@ -1,21 +1,34 @@ /* AUTO GENERATED by generate-icons.js. DO NOT MODIFY */ import React from "react"; -export const Circle: React.FC> = (props) => ( +export const Check: React.FC> = (props) => ( + +); + +export const ChevronDown: React.FC> = (props) => ( + + @@ -24,8 +37,6 @@ export const Circle: React.FC> = (props) => ( export const Controls: React.FC> = (props) => ( > = (props) => ( ); -export const Check: React.FC> = (props) => ( - - - -); - -export const Close: React.FC> = (props) => ( +export const Folder: React.FC> = (props) => ( > = ( props, ) => ( > = ( ); -export const ChevronDown: React.FC> = (props) => ( - - - -); - export const Loader: React.FC> = (props) => ( > = (props) => ( ); +export const Circle: React.FC> = (props) => ( + + + +); + export const Ladle: React.FC> = (props) => ( > = (props) => ( ); -export const Folder: React.FC> = (props) => ( +export const Close: React.FC> = (props) => ( + +); + +export const Maximize: React.FC> = (props) => ( + + + + + + +); + +export const Refresh: React.FC> = (props) => ( + + + + + + + + + + + + +); + +export const Search: React.FC> = (props) => ( + + + > = (props) => ( export const Package: React.FC> = (props) => ( > = (props) => ( ); -export const Rtl: React.FC> = (props) => ( - - - -); - export const Sun: React.FC> = (props) => ( > = (props) => ( ); -export const Maximize: React.FC> = (props) => ( +export const Rtl: React.FC> = (props) => ( - - - ); -export const Search: React.FC> = (props) => ( +export const Moon: React.FC> = (props) => ( - - +

    {name}

    )} diff --git a/packages/ladle/lib/app/src/sidebar/tree-view/tree.tsx b/packages/ladle/lib/app/src/sidebar/tree-view/tree.tsx index ef3e6f35..1b1d4976 100644 --- a/packages/ladle/lib/app/src/sidebar/tree-view/tree.tsx +++ b/packages/ladle/lib/app/src/sidebar/tree-view/tree.tsx @@ -138,7 +138,7 @@ export const TreeView: FC<{ /> {searchActive && tree.length === 0 && (
    - +

    No components found

    Find components by path or name

    diff --git a/packages/ladle/lib/app/src/styles/addons.css b/packages/ladle/lib/app/src/styles/addons.css index 59dfad4f..c18e6b14 100644 --- a/packages/ladle/lib/app/src/styles/addons.css +++ b/packages/ladle/lib/app/src/styles/addons.css @@ -9,7 +9,15 @@ line-height: 1; button { - @apply h-6 px-0.5 hover:bg-primary-100; + @apply h-6 px-2 hover:bg-primary-100 focus:bg-primary-100; + + &[data-active] { + @apply bg-primary-100; + + > svg { + @apply text-accent-500; + } + } > svg { @apply h-4 text-primary-600 hover:text-primary-800; @@ -32,14 +40,26 @@ html[dir="rtl"] { [data-ladle] { .ladle-addons-story-title { - @apply flex items-center mr-auto text-xs text-primary-700; + @apply flex items-center px-2 py-1 mr-auto -m-2 text-xs text-primary-700 hover:bg-primary-100 focus:bg-primary-100; } .ladle-addons-story-icon { - @apply h-1.5 text-primary-500; + @apply h-1.5 text-primary-500 mr-2; + } + + .ladle-addons-story-icon[data-has-copied] { + @apply h-3; } .ladle-addons-story-divider { - @apply h-4 text-primary-400; + @apply h-4 mx-1 text-primary-400; + } +} + +.ladle-addons-story-tooltip { + @apply ml-2; + + svg { + @apply w-3 h-3 align-middle; } } diff --git a/packages/ladle/lib/app/src/styles/aside.css b/packages/ladle/lib/app/src/styles/aside.css index 0ce4fef3..c51ffea7 100644 --- a/packages/ladle/lib/app/src/styles/aside.css +++ b/packages/ladle/lib/app/src/styles/aside.css @@ -36,7 +36,7 @@ } svg { - @apply absolute top-0 bottom-0 h-4 m-auto left-4 text-primary-500; + @apply absolute top-0 bottom-0 h-4 m-auto left-5 text-primary-500; } } @@ -47,7 +47,7 @@ html[dir="rtl"] { .ladle-search { svg { - @apply left-auto right-4; + @apply left-auto right-5; } } @@ -55,7 +55,7 @@ html[dir="rtl"] { @apply right-auto left-4; } - input { + .ladle-search input { @apply pl-3 pr-8; } } diff --git a/packages/ladle/lib/app/src/styles/controls.css b/packages/ladle/lib/app/src/styles/controls.css new file mode 100644 index 00000000..542ce49f --- /dev/null +++ b/packages/ladle/lib/app/src/styles/controls.css @@ -0,0 +1,56 @@ +[data-ladle] { + .ladle-controls-table { + @apply w-full table-auto; + + tbody tr:first-child td { + @apply pt-4; + } + + tbody tr:last-child td { + @apply pb-8; + } + + td { + @apply pb-3 pl-2 align-top; + } + + td:first-child { + width: 0; + @apply pl-5 pr-4; + } + + input, + textarea, + select { + @apply max-w-xs; + } + + textarea { + @apply font-mono; + } + + input[type="radio"] { + @apply mr-2; + } + } + + .ladle-control-radio-option { + @apply mr-4; + + label { + @apply cursor-pointer; + } + + &:last-child { + @apply mr-0; + } + } + + .ladle-control-reset { + @apply ml-auto text-primary-600; + + svg { + @apply mr-2; + } + } +} diff --git a/packages/ladle/lib/app/src/styles/index.css b/packages/ladle/lib/app/src/styles/index.css index 913748bf..9a70550a 100644 --- a/packages/ladle/lib/app/src/styles/index.css +++ b/packages/ladle/lib/app/src/styles/index.css @@ -6,6 +6,8 @@ @import "./aside.css"; @import "./tooltip.css"; @import "./tree-view.css"; +@import "./reach.css"; +@import "./controls.css"; .ladle-error-content { font-family: var(--ladle-font-family); diff --git a/packages/ladle/lib/app/src/styles/input.css b/packages/ladle/lib/app/src/styles/input.css index 82ea47b5..ba9670d1 100644 --- a/packages/ladle/lib/app/src/styles/input.css +++ b/packages/ladle/lib/app/src/styles/input.css @@ -1,10 +1,33 @@ [data-ladle] { - input { - @apply px-2 py-1 text-sm bg-transparent border rounded-md shadow-sm border-primary-400 text-primary-900; + input, + textarea, + select { + @apply w-full px-2 py-1 text-sm bg-transparent border rounded-md shadow-sm border-primary-400 text-primary-900; @apply transition-colors duration-75; + + &:focus { + @apply outline-none bg-primary-50 border-accent-500 ring-2 ring-gray-500 ring-opacity-20; + } + } + + input[type="checkbox"], + input[type="radio"] { + width: auto; + appearance: none; + @apply inline-block w-5 h-5 rounded-sm cursor-pointer checked:bg-accent-500 border-accent-500; + @apply align-middle bg-center bg-no-repeat; + + &:checked { + background-image: url("data:image/svg+xml;utf8,"); + background-size: 16px 16px; + } } - input:focus { - @apply outline-none bg-primary-50 border-accent-500 ring-2 ring-gray-500 ring-opacity-20; + input[type="radio"] { + @apply rounded-full; } } + +.ladle-button { + @apply bg-transparent cursor-pointer text-primary-900; +} diff --git a/packages/ladle/lib/app/src/styles/reach.css b/packages/ladle/lib/app/src/styles/reach.css new file mode 100644 index 00000000..26d9fbbe --- /dev/null +++ b/packages/ladle/lib/app/src/styles/reach.css @@ -0,0 +1,48 @@ +:root { + --reach-tooltip: 1; + --reach-dialog: 1; +} + +[data-reach-tooltip] { + @apply absolute px-2 py-1 border border-solid shadow-md pointer-events-none bg-primary-50 text-primary-800 border-primary-300 whitespace-nowrap animate-fade-in-up; + font-size: 85%; + z-index: 1000; +} + +[data-reach-dialog-overlay] { + @apply fixed left-0 overflow-auto bottom-6; + right: var(--ladle-aside-width); +} + +html[dir="rtl"] { + [data-reach-dialog-overlay] { + left: var(--ladle-aside-width); + @apply right-0; + } +} + +[data-reach-dialog-content] { + @apply border-0 border-t-2 border-solid border-primary-300 bg-primary-100 text-primary-900; +} + +[data-ladle] { + .ladle-modal-close-button { + @apply absolute top-0 right-0 px-2 py-4 text-sm border-0; + + svg { + @apply w-auto h-4; + } + } + + .ladle-modal-header { + @apply flex px-5 pt-3 pr-12 text-sm; + + svg { + @apply inline-block h-4 mr-1 align-sub; + } + } + + .ladle-modal-heading { + @apply m-0 font-medium uppercase text-primary-500; + } +} diff --git a/packages/ladle/lib/app/src/styles/tree-view.css b/packages/ladle/lib/app/src/styles/tree-view.css index dcd46cf4..055c48b4 100644 --- a/packages/ladle/lib/app/src/styles/tree-view.css +++ b/packages/ladle/lib/app/src/styles/tree-view.css @@ -20,7 +20,7 @@ } .ladle-tree-view-chevron { - @apply h-4 transition-all duration-150 rotate-0; + @apply h-4 mr-1 transition-all duration-150 rotate-0; &[data-expanded] { @apply rotate-90; @@ -28,11 +28,11 @@ } .ladle-tree-view-story-icon { - @apply w-3 h-3 ml-3 mr-2 text-primary-400; + @apply w-3 ml-2 mr-2 text-primary-400; } - .ladle-tree-view-folder { - @apply w-4 h-4 mr-2 text-accent-800; + .ladle-tree-view-button-icon { + @apply w-4 mr-2 text-accent-800; } .ladle-tree-not-found { @@ -59,10 +59,10 @@ html[dir="rtl"] { } .ladle-tree-view-story-icon { - @apply ml-2 mr-3; + @apply ml-3 mr-1; } - .ladle-tree-view-folder { + .ladle-tree-view-button-icon { @apply ml-2 mr-0; } } @@ -81,7 +81,7 @@ html:not([dir="rtl"]) { @apply text-primary-500; } - .ladle-tree-view-folder { + .ladle-tree-view-button-icon { @apply text-accent-500; } } diff --git a/packages/ladle/lib/app/src/styles/variables.css b/packages/ladle/lib/app/src/styles/variables.css index cc97eab7..eb0986ed 100644 --- a/packages/ladle/lib/app/src/styles/variables.css +++ b/packages/ladle/lib/app/src/styles/variables.css @@ -1,6 +1,4 @@ :root { - --reach-dialog: 1; - --ladle-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", diff --git a/packages/ladle/lib/app/src/ui.tsx b/packages/ladle/lib/app/src/ui.tsx index 15a2b531..2b9af5f4 100644 --- a/packages/ladle/lib/app/src/ui.tsx +++ b/packages/ladle/lib/app/src/ui.tsx @@ -1,14 +1,20 @@ import * as React from "react"; import { Dialog } from "@reach/dialog"; import { Close } from "./icons"; +import cx from "classnames"; export const Button: React.FC<{ children: React.ReactNode; onClick: React.MouseEventHandler; style?: React.CSSProperties; -}> = ({ children, onClick, style }) => { + className?: string; +}> = ({ children, onClick, style, className }) => { return ( - ); @@ -35,34 +41,30 @@ export const Code: React.FC<{ export const Modal: React.FC<{ children: React.ReactNode; close: () => void; + title?: React.ReactNode; + nav?: React.ReactNode; isOpen: boolean; label?: string; -}> = ({ children, close, isOpen, label }) => ( +}> = ({ children, title, nav, close, isOpen, label }) => ( close()} aria-label={label || "Modal"} + data-ladle > -
    +

    {title}

    + {nav} + + )} + -
    + + {children}     ); diff --git a/packages/ladle/lib/app/src/utils/controls.ts b/packages/ladle/lib/app/src/utils/controls.ts new file mode 100644 index 00000000..e746f9d6 --- /dev/null +++ b/packages/ladle/lib/app/src/utils/controls.ts @@ -0,0 +1,3 @@ +export const isAnyControlValuePreSet = (): boolean => { + return document.location.search.includes("arg-"); +}; diff --git a/packages/ladle/package.json b/packages/ladle/package.json index df34ad2f..95b038d2 100644 --- a/packages/ladle/package.json +++ b/packages/ladle/package.json @@ -40,6 +40,7 @@ "@babel/traverse": "^7.17.3", "@babel/types": "^7.17.0", "@reach/dialog": "^0.16.2", + "@reach/tooltip": "^0.17.0", "@vitejs/plugin-react": "^1.3.0", "boxen": "^5.1.2", "classnames": "^2.3.1", diff --git a/packages/ladle/tailwind.config.cjs b/packages/ladle/tailwind.config.cjs index 39ae83c6..0674a3d5 100644 --- a/packages/ladle/tailwind.config.cjs +++ b/packages/ladle/tailwind.config.cjs @@ -28,6 +28,15 @@ module.exports = { 900: "var(--ladle-accent-900)", }, }, + keyframes: { + fadeInUp: { + "0%": { opacity: 0, transform: "translateY(30px)" }, + "100%": { opacity: 1, transform: "translateY(0)" }, + }, + }, + animation: { + "fade-in-up": "fadeInUp 100ms linear 1", + }, }, }, }; diff --git a/yarn.lock b/yarn.lock index 038871a0..c71cda49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3023,6 +3023,14 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1" integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== +"@reach/auto-id@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.17.0.tgz#60cce65eb7a0d6de605820727f00dfe2b03b5f17" + integrity sha512-ud8iPwF52RVzEmkHq1twuqGuPA+moreumUHdtgvU3sr3/15BNhwp3KyDLrKKSz0LP1r3V4pSdyF9MbYM8BoSjA== + dependencies: + "@reach/utils" "0.17.0" + tslib "^2.3.0" + "@reach/dialog@^0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.16.2.tgz#567e6f59d0a6dabe84b2ba4c456404efa6cb7d03" @@ -3035,6 +3043,11 @@ react-remove-scroll "^2.4.3" tslib "^2.3.0" +"@reach/observe-rect@1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2" + integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ== + "@reach/portal@0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64" @@ -3044,6 +3057,40 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/portal@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc" + integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A== + dependencies: + "@reach/utils" "0.17.0" + tiny-warning "^1.0.3" + tslib "^2.3.0" + +"@reach/rect@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.17.0.tgz#804f0cfb211e0beb81632c64d4532ec9d1d73c48" + integrity sha512-3YB7KA5cLjbLc20bmPkJ06DIfXSK06Cb5BbD2dHgKXjUkT9WjZaLYIbYCO8dVjwcyO3GCNfOmPxy62VsPmZwYA== + dependencies: + "@reach/observe-rect" "1.2.0" + "@reach/utils" "0.17.0" + prop-types "^15.7.2" + tiny-warning "^1.0.3" + tslib "^2.3.0" + +"@reach/tooltip@^0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.17.0.tgz#044b43de248a05b18641b4220310983cb54675a2" + integrity sha512-HP8Blordzqb/Cxg+jnhGmWQfKgypamcYLBPlcx6jconyV5iLJ5m93qipr1giK7MqKT2wlsKWy44ZcOrJ+Wrf8w== + dependencies: + "@reach/auto-id" "0.17.0" + "@reach/portal" "0.17.0" + "@reach/rect" "0.17.0" + "@reach/utils" "0.17.0" + "@reach/visually-hidden" "0.17.0" + prop-types "^15.7.2" + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/utils@0.16.0": version "0.16.0" resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce" @@ -3052,6 +3099,22 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/utils@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303" + integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA== + dependencies: + tiny-warning "^1.0.3" + tslib "^2.3.0" + +"@reach/visually-hidden@0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.17.0.tgz#033adba10b5ec419649da8d6bd8e46db06d4c3a1" + integrity sha512-T6xF3Nv8vVnjVkGU6cm0+kWtvliLqPAo8PcZ+WxkKacZsaHTjaZb4v1PaCcyQHmuTNT/vtTVNOJLG0SjQOIb7g== + dependencies: + prop-types "^15.7.2" + tslib "^2.3.0" + "@rollup/pluginutils@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08"