[{"data":1,"prerenderedAt":3605},["ShallowReactive",2],{"\u002Fblog\u002F2022\u002Fdesign-system":3,"\u002Fblog\u002F2022\u002Fdesign-system-surround":3594},{"id":4,"title":5,"author":6,"badge":11,"body":13,"date":3583,"description":3584,"draft":3585,"extension":3586,"image":3587,"meta":3589,"navigation":753,"path":3590,"seo":3591,"stem":3592,"__hash__":3593},"posts\u002Fblog\u002F2022\u002Fdesign-system.md","A Practical Guide to Design System",{"name":7,"to":8,"avatar":9},"Nir Galon","https:\u002F\u002Fx.com\u002Fnirgn975",{"src":10},"\u002Favatar.webp",{"label":12},"development",{"type":14,"value":15,"toc":3575},"minimark",[16,20,58,67,72,79,105,108,118,133,140,158,161,176,182,189,225,236,360,371,407,426,435,451,454,721,727,876,880,883,920,940,963,1174,1180,1567,1573,1580,1584,1608,1611,2084,2094,2281,2287,2318,2338,2349,2373,2388,2543,2547,2558,2561,2573,2576,2592,3183,3197,3257,3260,3267,3281,3285,3294,3297,3306,3325,3332,3344,3511,3529,3540,3547,3554,3561,3565,3568,3571],[17,18,19],"p",{},"It's no secret that design systems are taking over the web development world and that's a good thing IMO. But nonetheless, it's still a challenge to set up one. I myself encountered it when I created our own design system in the startup I work for, so I thought I'll save others some time and document my process.",[17,21,22,23,30,31,35,36,39,40,45,46,51,52,57],{},"In my startup we use ",[24,25,29],"a",{"href":26,"rel":27},"https:\u002F\u002Fvuejs.org",[28],"nofollow","Vue.js"," (version 3, with ",[32,33,34],"code",{},"composition"," api and ",[32,37,38],{},"sfc"," style), so naturally we also use ",[24,41,44],{"href":42,"rel":43},"https:\u002F\u002Fvitejs.dev",[28],"Vite",", and we use ",[24,47,50],{"href":48,"rel":49},"https:\u002F\u002Ftailwindcss.com",[28],"Tailwind CSS"," so I'll go over it also in the setup process. The UI we choose to build the components with is ",[24,53,56],{"href":54,"rel":55},"https:\u002F\u002Fstorybook.js.org",[28],"Storybook",", it supports all the frameworks and has the biggest community adoption so it was an easy choice.",[17,59,60,61,66],{},"But first, what is a \"Design System\"? It's a little different if you ask a designer or a developer, but for us developers it's just a component library. It helps us standardize design language, maintain consistency across multiple different products or platforms, document our components, etc. If you want to read more about the architecture and methodology of design systems I recommend reading ",[24,62,65],{"href":63,"rel":64},"https:\u002F\u002Fatomicdesign.bradfrost.com\u002Fchapter-2",[28],"Atomic Design Methodology by Brad Frost",".",[68,69,71],"h2",{"id":70},"_1-scaffolding-the-project","1. Scaffolding the project",[17,73,74,75,78],{},"The first thing we need to do is actually create a regular ",[24,76,29],{"href":26,"rel":77},[28]," project",[80,81,87],"pre",{"className":82,"code":83,"filename":84,"language":85,"meta":86,"style":86},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm init vue@latest\n","terminal","bash","",[32,88,89],{"__ignoreMap":86},[90,91,94,98,102],"span",{"class":92,"line":93},"line",1,[90,95,97],{"class":96},"sBMFI","npm",[90,99,101],{"class":100},"sfazB"," init",[90,103,104],{"class":100}," vue@latest\n",[17,106,107],{},"You'll be presented with prompts for a number of optional features, choose whatever you want, it's not important for the rest of the tutorial. But, if you want to see my choices - they're in the screenshot below.",[17,109,110],{},[111,112],"img",{"alt":113,"className":114,"src":117},"Vuejs CLI setup",[115,116],"rounded-lg","mx-auto","\u002Fposts\u002F2022\u002Fdesign-system\u002Fvue-cli-setup.webp",[17,119,120,121,124,125,128,129,132],{},"After we have an empty vue.js project (I called mine ",[32,122,123],{},"daisy"," because Daisy the Design System sounds nice in my head) we can ",[32,126,127],{},"cd"," into it and install all the dependencies (",[32,130,131],{},"npm install",").",[17,134,135,136,139],{},"The next step is to install ",[24,137,56],{"href":54,"rel":138},[28],". The current version is 6.x, but I choose to install the beta (7.x) version because it's close enough to release and there are a lot of changes that integrate well with our setup (like vite and typescript support out of the box).",[80,141,143],{"className":82,"code":142,"filename":84,"language":85,"meta":86,"style":86},"npx sb@next init --builder=vite\n",[32,144,145],{"__ignoreMap":86},[90,146,147,150,153,155],{"class":92,"line":93},[90,148,149],{"class":96},"npx",[90,151,152],{"class":100}," sb@next",[90,154,101],{"class":100},[90,156,157],{"class":100}," --builder=vite\n",[17,159,160],{},"And once the Storybook CLI is done running and doing its thing, we can run it and see our storybook default components and documentation in action",[80,162,164],{"className":82,"code":163,"filename":84,"language":85,"meta":86,"style":86},"npm run storybook\n",[32,165,166],{"__ignoreMap":86},[90,167,168,170,173],{"class":92,"line":93},[90,169,97],{"class":96},[90,171,172],{"class":100}," run",[90,174,175],{"class":100}," storybook\n",[17,177,178],{},[111,179],{"alt":56,"className":180,"src":181},[115,116],"\u002Fposts\u002F2022\u002Fdesign-system\u002Fstorybook.webp",[17,183,184,185,188],{},"The last thing we need to do is to add ",[24,186,50],{"href":48,"rel":187},[28]," support to our Vue.js components and as well as our Storybook UI. Adding it to the vuejs project is really easy",[80,190,192],{"className":82,"code":191,"filename":84,"language":85,"meta":86,"style":86},"npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n",[32,193,194,213],{"__ignoreMap":86},[90,195,196,198,201,204,207,210],{"class":92,"line":93},[90,197,97],{"class":96},[90,199,200],{"class":100}," install",[90,202,203],{"class":100}," -D",[90,205,206],{"class":100}," tailwindcss",[90,208,209],{"class":100}," postcss",[90,211,212],{"class":100}," autoprefixer\n",[90,214,216,218,220,222],{"class":92,"line":215},2,[90,217,149],{"class":96},[90,219,206],{"class":100},[90,221,101],{"class":100},[90,223,224],{"class":100}," -p\n",[17,226,227,228,231,232,235],{},"And all you have left to do is to edit your ",[32,229,230],{},"content"," section (in ",[32,233,234],{},"tailwind.config.js"," file) to include the vuejs files",[80,237,244],{"className":238,"code":239,"filename":240,"highlights":241,"language":243,"meta":86,"style":86},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  content: [\".\u002Fsrc\u002F**\u002F*.{vue,js,ts,jsx,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n","tailwind.js",[242],3,"js",[32,245,246,273,285,314,324,335,341,354],{"__ignoreMap":86},[90,247,248,252,256,260,263,267,270],{"class":92,"line":93},[90,249,251],{"class":250},"sHwdD","\u002F** ",[90,253,255],{"class":254},"s7zQu","@",[90,257,259],{"class":258},"s6hCs","type",[90,261,262],{"class":254}," {",[90,264,266],{"class":265},"sFweD","import('tailwindcss').Config",[90,268,269],{"class":254},"}",[90,271,272],{"class":250}," *\u002F\n",[90,274,275,279,282],{"class":92,"line":215},[90,276,278],{"class":277},"sMK4o","module.exports",[90,280,281],{"class":277}," =",[90,283,284],{"class":277}," {\n",[90,286,289,293,296,300,303,306,308,311],{"class":287,"line":242},[92,288],"highlight",[90,290,292],{"class":291},"swJcz","  content",[90,294,295],{"class":277},":",[90,297,299],{"class":298},"sTEyZ"," [",[90,301,302],{"class":277},"\"",[90,304,305],{"class":100},".\u002Fsrc\u002F**\u002F*.{vue,js,ts,jsx,tsx}",[90,307,302],{"class":277},[90,309,310],{"class":298},"]",[90,312,313],{"class":277},",\n",[90,315,317,320,322],{"class":92,"line":316},4,[90,318,319],{"class":291},"  theme",[90,321,295],{"class":277},[90,323,284],{"class":277},[90,325,327,330,332],{"class":92,"line":326},5,[90,328,329],{"class":291},"    extend",[90,331,295],{"class":277},[90,333,334],{"class":277}," {},\n",[90,336,338],{"class":92,"line":337},6,[90,339,340],{"class":277},"  },\n",[90,342,344,347,349,352],{"class":92,"line":343},7,[90,345,346],{"class":291},"  plugins",[90,348,295],{"class":277},[90,350,351],{"class":298}," []",[90,353,313],{"class":277},[90,355,357],{"class":92,"line":356},8,[90,358,359],{"class":277},"};\n",[17,361,362,363,366,367,370],{},"Lastly, include the Tailwind directives to our CSS by creating a new ",[32,364,365],{},"style.css"," file inside the ",[32,368,369],{},"src"," directory and add to it the @tailwind directives:",[80,372,376],{"className":373,"code":374,"filename":365,"language":375,"meta":86,"style":86},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n","css",[32,377,378,389,398],{"__ignoreMap":86},[90,379,380,383,386],{"class":92,"line":93},[90,381,382],{"class":254},"@tailwind",[90,384,385],{"class":298}," base",[90,387,388],{"class":277},";\n",[90,390,391,393,396],{"class":92,"line":215},[90,392,382],{"class":254},[90,394,395],{"class":298}," components",[90,397,388],{"class":277},[90,399,400,402,405],{"class":92,"line":242},[90,401,382],{"class":254},[90,403,404],{"class":298}," utilities",[90,406,388],{"class":277},[17,408,409,410,413,414,417,418,421,422,425],{},"Now if you launch your Vue.js app (",[32,411,412],{},"npm run dev",") Tailwind class will work, but if you launch your Storybook (",[32,415,416],{},"npm run storybook",") they'll not. That's because Storybook uses its own Vite config to run the Vue.js app (as you can see, you don't run the ",[32,419,420],{},"index.html"," and ",[32,423,424],{},"App.vue"," files, so you can actually delete them - that's what I did).",[17,427,428,429,434],{},"To fix this we'll use a ",[24,430,433],{"href":431,"rel":432},"https:\u002F\u002Fstorybook.js.org\u002Faddons\u002F@storybook\u002Faddon-postcss",[28],"Storybook addon"," to run the PostCSS preprocessor against our stories",[80,436,438],{"className":82,"code":437,"filename":84,"language":85,"meta":86,"style":86},"npm install -D @storybook\u002Faddon-postcss\n",[32,439,440],{"__ignoreMap":86},[90,441,442,444,446,448],{"class":92,"line":93},[90,443,97],{"class":96},[90,445,200],{"class":100},[90,447,203],{"class":100},[90,449,450],{"class":100}," @storybook\u002Faddon-postcss\n",[17,452,453],{},"then add it",[80,455,466],{"className":238,"code":456,"filename":457,"highlights":458,"language":243,"meta":86,"style":86},"const path = require(\"path\");\nmodule.exports = {\n  stories: [\"..\u002Fsrc\u002F**\u002F*.stories.mdx\", \"..\u002Fsrc\u002F**\u002F*.stories.@(js|jsx|ts|tsx)\"],\n  addons: [\n    \"@storybook\u002Faddon-links\",\n    \"@storybook\u002Faddon-essentials\",\n    \"@storybook\u002Faddon-interactions\",\n    {\n      name: \"@storybook\u002Faddon-postcss\",\n      options: {\n        postcssLoaderOptions: {\n          implementation: require(\"postcss\"),\n        },\n      },\n    },\n  ],\n  framework: {\n    name: \"@storybook\u002Fvue3-vite\",\n    options: {},\n  },\n};\n",".storybook\u002Fmain.js",[356,459,460,461,462,463,464,465],9,10,11,12,13,14,15,[32,467,468,499,507,538,548,560,571,582,588,605,615,625,648,654,660,666,674,684,701,711,716],{"__ignoreMap":86},[90,469,470,474,477,480,484,487,489,492,494,497],{"class":92,"line":93},[90,471,473],{"class":472},"spNyl","const",[90,475,476],{"class":298}," path ",[90,478,479],{"class":277},"=",[90,481,483],{"class":482},"s2Zo4"," require",[90,485,486],{"class":298},"(",[90,488,302],{"class":277},[90,490,491],{"class":100},"path",[90,493,302],{"class":277},[90,495,496],{"class":298},")",[90,498,388],{"class":277},[90,500,501,503,505],{"class":92,"line":215},[90,502,278],{"class":277},[90,504,281],{"class":277},[90,506,284],{"class":277},[90,508,509,512,514,516,518,521,523,526,529,532,534,536],{"class":92,"line":242},[90,510,511],{"class":291},"  stories",[90,513,295],{"class":277},[90,515,299],{"class":298},[90,517,302],{"class":277},[90,519,520],{"class":100},"..\u002Fsrc\u002F**\u002F*.stories.mdx",[90,522,302],{"class":277},[90,524,525],{"class":277},",",[90,527,528],{"class":277}," \"",[90,530,531],{"class":100},"..\u002Fsrc\u002F**\u002F*.stories.@(js|jsx|ts|tsx)",[90,533,302],{"class":277},[90,535,310],{"class":298},[90,537,313],{"class":277},[90,539,540,543,545],{"class":92,"line":316},[90,541,542],{"class":291},"  addons",[90,544,295],{"class":277},[90,546,547],{"class":298}," [\n",[90,549,550,553,556,558],{"class":92,"line":326},[90,551,552],{"class":277},"    \"",[90,554,555],{"class":100},"@storybook\u002Faddon-links",[90,557,302],{"class":277},[90,559,313],{"class":277},[90,561,562,564,567,569],{"class":92,"line":337},[90,563,552],{"class":277},[90,565,566],{"class":100},"@storybook\u002Faddon-essentials",[90,568,302],{"class":277},[90,570,313],{"class":277},[90,572,573,575,578,580],{"class":92,"line":343},[90,574,552],{"class":277},[90,576,577],{"class":100},"@storybook\u002Faddon-interactions",[90,579,302],{"class":277},[90,581,313],{"class":277},[90,583,585],{"class":584,"line":356},[92,288],[90,586,587],{"class":277},"    {\n",[90,589,591,594,596,598,601,603],{"class":590,"line":459},[92,288],[90,592,593],{"class":291},"      name",[90,595,295],{"class":277},[90,597,528],{"class":277},[90,599,600],{"class":100},"@storybook\u002Faddon-postcss",[90,602,302],{"class":277},[90,604,313],{"class":277},[90,606,608,611,613],{"class":607,"line":460},[92,288],[90,609,610],{"class":291},"      options",[90,612,295],{"class":277},[90,614,284],{"class":277},[90,616,618,621,623],{"class":617,"line":461},[92,288],[90,619,620],{"class":291},"        postcssLoaderOptions",[90,622,295],{"class":277},[90,624,284],{"class":277},[90,626,628,631,633,635,637,639,642,644,646],{"class":627,"line":462},[92,288],[90,629,630],{"class":291},"          implementation",[90,632,295],{"class":277},[90,634,483],{"class":482},[90,636,486],{"class":298},[90,638,302],{"class":277},[90,640,641],{"class":100},"postcss",[90,643,302],{"class":277},[90,645,496],{"class":298},[90,647,313],{"class":277},[90,649,651],{"class":650,"line":463},[92,288],[90,652,653],{"class":277},"        },\n",[90,655,657],{"class":656,"line":464},[92,288],[90,658,659],{"class":277},"      },\n",[90,661,663],{"class":662,"line":465},[92,288],[90,664,665],{"class":277},"    },\n",[90,667,669,672],{"class":92,"line":668},16,[90,670,671],{"class":298},"  ]",[90,673,313],{"class":277},[90,675,677,680,682],{"class":92,"line":676},17,[90,678,679],{"class":291},"  framework",[90,681,295],{"class":277},[90,683,284],{"class":277},[90,685,687,690,692,694,697,699],{"class":92,"line":686},18,[90,688,689],{"class":291},"    name",[90,691,295],{"class":277},[90,693,528],{"class":277},[90,695,696],{"class":100},"@storybook\u002Fvue3-vite",[90,698,302],{"class":277},[90,700,313],{"class":277},[90,702,704,707,709],{"class":92,"line":703},19,[90,705,706],{"class":291},"    options",[90,708,295],{"class":277},[90,710,334],{"class":277},[90,712,714],{"class":92,"line":713},20,[90,715,340],{"class":277},[90,717,719],{"class":92,"line":718},21,[90,720,359],{"class":277},[17,722,723,724,726],{},"and also import the ",[32,725,365],{}," file",[80,728,732],{"className":238,"code":729,"filename":730,"highlights":731,"language":243,"meta":86,"style":86},"import \"..\u002Fsrc\u002Fstyle.css\";\n\nexport const parameters = {\n  actions: { argTypesRegex: \"^on[A-Z].*\" },\n  controls: {\n    matchers: {\n      color: \u002F(background|color)$\u002Fi,\n      date: \u002FDate$\u002F,\n    },\n  },\n};\n",".storybook\u002Fpreview.js",[93],[32,733,734,749,755,770,794,803,812,845,864,868,872],{"__ignoreMap":86},[90,735,737,740,742,745,747],{"class":736,"line":93},[92,288],[90,738,739],{"class":254},"import",[90,741,528],{"class":277},[90,743,744],{"class":100},"..\u002Fsrc\u002Fstyle.css",[90,746,302],{"class":277},[90,748,388],{"class":277},[90,750,751],{"class":92,"line":215},[90,752,754],{"emptyLinePlaceholder":753},true,"\n",[90,756,757,760,763,766,768],{"class":92,"line":242},[90,758,759],{"class":254},"export",[90,761,762],{"class":472}," const",[90,764,765],{"class":298}," parameters ",[90,767,479],{"class":277},[90,769,284],{"class":277},[90,771,772,775,777,779,782,784,786,789,791],{"class":92,"line":316},[90,773,774],{"class":291},"  actions",[90,776,295],{"class":277},[90,778,262],{"class":277},[90,780,781],{"class":291}," argTypesRegex",[90,783,295],{"class":277},[90,785,528],{"class":277},[90,787,788],{"class":100},"^on[A-Z].*",[90,790,302],{"class":277},[90,792,793],{"class":277}," },\n",[90,795,796,799,801],{"class":92,"line":326},[90,797,798],{"class":291},"  controls",[90,800,295],{"class":277},[90,802,284],{"class":277},[90,804,805,808,810],{"class":92,"line":337},[90,806,807],{"class":291},"    matchers",[90,809,295],{"class":277},[90,811,284],{"class":277},[90,813,814,817,819,822,825,828,831,833,836,839,843],{"class":92,"line":343},[90,815,816],{"class":291},"      color",[90,818,295],{"class":277},[90,820,821],{"class":277}," \u002F(",[90,823,824],{"class":100},"background",[90,826,827],{"class":277},"|",[90,829,830],{"class":100},"color",[90,832,496],{"class":277},[90,834,835],{"class":254},"$",[90,837,838],{"class":277},"\u002F",[90,840,842],{"class":841},"sbssI","i",[90,844,313],{"class":277},[90,846,847,850,852,855,858,860,862],{"class":92,"line":356},[90,848,849],{"class":291},"      date",[90,851,295],{"class":277},[90,853,854],{"class":277}," \u002F",[90,856,857],{"class":100},"Date",[90,859,835],{"class":254},[90,861,838],{"class":277},[90,863,313],{"class":277},[90,865,866],{"class":92,"line":459},[90,867,665],{"class":277},[90,869,870],{"class":92,"line":460},[90,871,340],{"class":277},[90,873,874],{"class":92,"line":461},[90,875,359],{"class":277},[68,877,879],{"id":878},"_2-build-our-first-component","2. Build our first component",[17,881,882],{},"Building our first component is just like building a regular Vue.js component, except we'll add it a stories file.",[17,884,885,886,889,890,893,894,897,898,903,904,907,908,911,912,915,916,919],{},"I'll call my component ",[32,887,888],{},"Foo"," and create a directory with that name in the ",[32,891,892],{},"components"," directory (I'll actually call it ",[32,895,896],{},"DyFoo"," because ",[24,899,902],{"href":900,"rel":901},"https:\u002F\u002Feslint.vuejs.org\u002Frules\u002Fmulti-word-component-names.html",[28],"ESlint requires component names to always be multi-word",", and ",[32,905,906],{},"D"," is the first letter of our Design System name, and ",[32,909,910],{},"Y"," is the last), and I'll also create a ",[32,913,914],{},".vue"," and a ",[32,917,918],{},".stories.js"," files with the same component name.",[80,921,923],{"className":82,"code":922,"filename":84,"language":85,"meta":86,"style":86},"touch src\u002Fcomponents\u002FDyFoo\u002FDyFoo.vue\ntouch src\u002Fcomponents\u002FDyFoo\u002FDyFoo.stories.js\n",[32,924,925,933],{"__ignoreMap":86},[90,926,927,930],{"class":92,"line":93},[90,928,929],{"class":96},"touch",[90,931,932],{"class":100}," src\u002Fcomponents\u002FDyFoo\u002FDyFoo.vue\n",[90,934,935,937],{"class":92,"line":215},[90,936,929],{"class":96},[90,938,939],{"class":100}," src\u002Fcomponents\u002FDyFoo\u002FDyFoo.stories.js\n",[17,941,942,943,946,947,950,951,954,955,958,959,962],{},"My ",[32,944,945],{},"DyFoo.vue"," component will be fairly easy, it'll take ",[32,948,949],{},"variant"," prop with ",[32,952,953],{},"primary"," or ",[32,956,957],{},"secondary"," options and give the text ",[32,960,961],{},"foo"," some color based on them.",[80,964,968],{"className":965,"code":966,"filename":945,"language":967,"meta":86,"style":86},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\ndefineProps({\n  variant: {\n    type: String,\n    default: \"primary\",\n    validator(value: string) {\n      return [\"primary\", \"secondary\"].includes(value);\n    },\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp :class=\"[variant == 'primary' ? 'text-sky-500' : '', variant == 'secondary' ? 'text-gray-500' : '']\">foo\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","vue",[32,969,970,996,1006,1015,1027,1042,1062,1098,1102,1106,1114,1123,1127,1136,1166],{"__ignoreMap":86},[90,971,972,975,978,981,984,986,988,991,993],{"class":92,"line":93},[90,973,974],{"class":277},"\u003C",[90,976,977],{"class":291},"script",[90,979,980],{"class":472}," setup",[90,982,983],{"class":472}," lang",[90,985,479],{"class":277},[90,987,302],{"class":277},[90,989,990],{"class":100},"ts",[90,992,302],{"class":277},[90,994,995],{"class":277},">\n",[90,997,998,1001,1003],{"class":92,"line":215},[90,999,1000],{"class":482},"defineProps",[90,1002,486],{"class":298},[90,1004,1005],{"class":277},"{\n",[90,1007,1008,1011,1013],{"class":92,"line":242},[90,1009,1010],{"class":291},"  variant",[90,1012,295],{"class":277},[90,1014,284],{"class":277},[90,1016,1017,1020,1022,1025],{"class":92,"line":316},[90,1018,1019],{"class":291},"    type",[90,1021,295],{"class":277},[90,1023,1024],{"class":298}," String",[90,1026,313],{"class":277},[90,1028,1029,1032,1034,1036,1038,1040],{"class":92,"line":326},[90,1030,1031],{"class":291},"    default",[90,1033,295],{"class":277},[90,1035,528],{"class":277},[90,1037,953],{"class":100},[90,1039,302],{"class":277},[90,1041,313],{"class":277},[90,1043,1044,1047,1049,1053,1055,1058,1060],{"class":92,"line":337},[90,1045,1046],{"class":291},"    validator",[90,1048,486],{"class":277},[90,1050,1052],{"class":1051},"sHdIc","value",[90,1054,295],{"class":277},[90,1056,1057],{"class":96}," string",[90,1059,496],{"class":277},[90,1061,284],{"class":277},[90,1063,1064,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1090,1092,1094,1096],{"class":92,"line":343},[90,1065,1066],{"class":254},"      return",[90,1068,299],{"class":291},[90,1070,302],{"class":277},[90,1072,953],{"class":100},[90,1074,302],{"class":277},[90,1076,525],{"class":277},[90,1078,528],{"class":277},[90,1080,957],{"class":100},[90,1082,302],{"class":277},[90,1084,310],{"class":291},[90,1086,66],{"class":277},[90,1088,1089],{"class":482},"includes",[90,1091,486],{"class":291},[90,1093,1052],{"class":298},[90,1095,496],{"class":291},[90,1097,388],{"class":277},[90,1099,1100],{"class":92,"line":356},[90,1101,665],{"class":277},[90,1103,1104],{"class":92,"line":459},[90,1105,340],{"class":277},[90,1107,1108,1110,1112],{"class":92,"line":460},[90,1109,269],{"class":277},[90,1111,496],{"class":298},[90,1113,388],{"class":277},[90,1115,1116,1119,1121],{"class":92,"line":461},[90,1117,1118],{"class":277},"\u003C\u002F",[90,1120,977],{"class":291},[90,1122,995],{"class":277},[90,1124,1125],{"class":92,"line":462},[90,1126,754],{"emptyLinePlaceholder":753},[90,1128,1129,1131,1134],{"class":92,"line":463},[90,1130,974],{"class":277},[90,1132,1133],{"class":291},"template",[90,1135,995],{"class":277},[90,1137,1138,1141,1143,1146,1148,1150,1153,1155,1158,1160,1162,1164],{"class":92,"line":464},[90,1139,1140],{"class":277},"  \u003C",[90,1142,17],{"class":291},[90,1144,1145],{"class":472}," :class",[90,1147,479],{"class":277},[90,1149,302],{"class":277},[90,1151,1152],{"class":100},"[variant == 'primary' ? 'text-sky-500' : '', variant == 'secondary' ? 'text-gray-500' : '']",[90,1154,302],{"class":277},[90,1156,1157],{"class":277},">",[90,1159,961],{"class":298},[90,1161,1118],{"class":277},[90,1163,17],{"class":291},[90,1165,995],{"class":277},[90,1167,1168,1170,1172],{"class":92,"line":465},[90,1169,1118],{"class":277},[90,1171,1133],{"class":291},[90,1173,995],{"class":277},[17,1175,1176,1177,1179],{},"Now let's create couple of stories to demo those 2 options for the ",[32,1178,896],{}," component",[80,1181,1184],{"className":238,"code":1182,"filename":1183,"language":243,"meta":86,"style":86},"import DyFoo from \".\u002FDyFoo.vue\";\n\nexport default {\n  title: \"Example\u002FFoo\",\n  component: DyFoo,\n  argTypes: {\n    variant: {\n      control: { type: \"select\" },\n      options: [\"primary\", \"secondary\"],\n    },\n  },\n};\n\nconst Template = (args) => ({\n  components: { DyFoo },\n  setup() {\n    return { args };\n  },\n  template: '\u003CDyFoo v-bind=\"args\" \u002F>',\n});\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n  primary: true,\n  variant: \"primary\",\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n  variant: \"secondary\",\n};\n","DyFoo.stories.js",[32,1185,1186,1205,1209,1218,1234,1246,1255,1264,1287,1313,1317,1321,1325,1329,1353,1367,1377,1390,1394,1412,1420,1424,1453,1468,1482,1497,1502,1507,1533,1547,1562],{"__ignoreMap":86},[90,1187,1188,1190,1193,1196,1198,1201,1203],{"class":92,"line":93},[90,1189,739],{"class":254},[90,1191,1192],{"class":298}," DyFoo ",[90,1194,1195],{"class":254},"from",[90,1197,528],{"class":277},[90,1199,1200],{"class":100},".\u002FDyFoo.vue",[90,1202,302],{"class":277},[90,1204,388],{"class":277},[90,1206,1207],{"class":92,"line":215},[90,1208,754],{"emptyLinePlaceholder":753},[90,1210,1211,1213,1216],{"class":92,"line":242},[90,1212,759],{"class":254},[90,1214,1215],{"class":254}," default",[90,1217,284],{"class":277},[90,1219,1220,1223,1225,1227,1230,1232],{"class":92,"line":316},[90,1221,1222],{"class":291},"  title",[90,1224,295],{"class":277},[90,1226,528],{"class":277},[90,1228,1229],{"class":100},"Example\u002FFoo",[90,1231,302],{"class":277},[90,1233,313],{"class":277},[90,1235,1236,1239,1241,1244],{"class":92,"line":326},[90,1237,1238],{"class":291},"  component",[90,1240,295],{"class":277},[90,1242,1243],{"class":298}," DyFoo",[90,1245,313],{"class":277},[90,1247,1248,1251,1253],{"class":92,"line":337},[90,1249,1250],{"class":291},"  argTypes",[90,1252,295],{"class":277},[90,1254,284],{"class":277},[90,1256,1257,1260,1262],{"class":92,"line":343},[90,1258,1259],{"class":291},"    variant",[90,1261,295],{"class":277},[90,1263,284],{"class":277},[90,1265,1266,1269,1271,1273,1276,1278,1280,1283,1285],{"class":92,"line":356},[90,1267,1268],{"class":291},"      control",[90,1270,295],{"class":277},[90,1272,262],{"class":277},[90,1274,1275],{"class":291}," type",[90,1277,295],{"class":277},[90,1279,528],{"class":277},[90,1281,1282],{"class":100},"select",[90,1284,302],{"class":277},[90,1286,793],{"class":277},[90,1288,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311],{"class":92,"line":459},[90,1290,610],{"class":291},[90,1292,295],{"class":277},[90,1294,299],{"class":298},[90,1296,302],{"class":277},[90,1298,953],{"class":100},[90,1300,302],{"class":277},[90,1302,525],{"class":277},[90,1304,528],{"class":277},[90,1306,957],{"class":100},[90,1308,302],{"class":277},[90,1310,310],{"class":298},[90,1312,313],{"class":277},[90,1314,1315],{"class":92,"line":460},[90,1316,665],{"class":277},[90,1318,1319],{"class":92,"line":461},[90,1320,340],{"class":277},[90,1322,1323],{"class":92,"line":462},[90,1324,359],{"class":277},[90,1326,1327],{"class":92,"line":463},[90,1328,754],{"emptyLinePlaceholder":753},[90,1330,1331,1333,1336,1338,1341,1344,1346,1349,1351],{"class":92,"line":464},[90,1332,473],{"class":472},[90,1334,1335],{"class":298}," Template ",[90,1337,479],{"class":277},[90,1339,1340],{"class":277}," (",[90,1342,1343],{"class":1051},"args",[90,1345,496],{"class":277},[90,1347,1348],{"class":472}," =>",[90,1350,1340],{"class":298},[90,1352,1005],{"class":277},[90,1354,1355,1358,1360,1362,1364],{"class":92,"line":465},[90,1356,1357],{"class":291},"  components",[90,1359,295],{"class":277},[90,1361,262],{"class":277},[90,1363,1192],{"class":298},[90,1365,1366],{"class":277},"},\n",[90,1368,1369,1372,1375],{"class":92,"line":668},[90,1370,1371],{"class":291},"  setup",[90,1373,1374],{"class":277},"()",[90,1376,284],{"class":277},[90,1378,1379,1382,1384,1387],{"class":92,"line":676},[90,1380,1381],{"class":254},"    return",[90,1383,262],{"class":277},[90,1385,1386],{"class":298}," args",[90,1388,1389],{"class":277}," };\n",[90,1391,1392],{"class":92,"line":686},[90,1393,340],{"class":277},[90,1395,1396,1399,1401,1404,1407,1410],{"class":92,"line":703},[90,1397,1398],{"class":291},"  template",[90,1400,295],{"class":277},[90,1402,1403],{"class":277}," '",[90,1405,1406],{"class":100},"\u003CDyFoo v-bind=\"args\" \u002F>",[90,1408,1409],{"class":277},"'",[90,1411,313],{"class":277},[90,1413,1414,1416,1418],{"class":92,"line":713},[90,1415,269],{"class":277},[90,1417,496],{"class":298},[90,1419,388],{"class":277},[90,1421,1422],{"class":92,"line":718},[90,1423,754],{"emptyLinePlaceholder":753},[90,1425,1427,1429,1431,1434,1436,1439,1441,1444,1446,1449,1451],{"class":92,"line":1426},22,[90,1428,759],{"class":254},[90,1430,762],{"class":472},[90,1432,1433],{"class":298}," Primary ",[90,1435,479],{"class":277},[90,1437,1438],{"class":298}," Template",[90,1440,66],{"class":277},[90,1442,1443],{"class":482},"bind",[90,1445,486],{"class":298},[90,1447,1448],{"class":277},"{}",[90,1450,496],{"class":298},[90,1452,388],{"class":277},[90,1454,1456,1459,1461,1464,1466],{"class":92,"line":1455},23,[90,1457,1458],{"class":298},"Primary",[90,1460,66],{"class":277},[90,1462,1463],{"class":298},"args ",[90,1465,479],{"class":277},[90,1467,284],{"class":277},[90,1469,1471,1474,1476,1480],{"class":92,"line":1470},24,[90,1472,1473],{"class":291},"  primary",[90,1475,295],{"class":277},[90,1477,1479],{"class":1478},"sfNiH"," true",[90,1481,313],{"class":277},[90,1483,1485,1487,1489,1491,1493,1495],{"class":92,"line":1484},25,[90,1486,1010],{"class":291},[90,1488,295],{"class":277},[90,1490,528],{"class":277},[90,1492,953],{"class":100},[90,1494,302],{"class":277},[90,1496,313],{"class":277},[90,1498,1500],{"class":92,"line":1499},26,[90,1501,359],{"class":277},[90,1503,1505],{"class":92,"line":1504},27,[90,1506,754],{"emptyLinePlaceholder":753},[90,1508,1510,1512,1514,1517,1519,1521,1523,1525,1527,1529,1531],{"class":92,"line":1509},28,[90,1511,759],{"class":254},[90,1513,762],{"class":472},[90,1515,1516],{"class":298}," Secondary ",[90,1518,479],{"class":277},[90,1520,1438],{"class":298},[90,1522,66],{"class":277},[90,1524,1443],{"class":482},[90,1526,486],{"class":298},[90,1528,1448],{"class":277},[90,1530,496],{"class":298},[90,1532,388],{"class":277},[90,1534,1536,1539,1541,1543,1545],{"class":92,"line":1535},29,[90,1537,1538],{"class":298},"Secondary",[90,1540,66],{"class":277},[90,1542,1463],{"class":298},[90,1544,479],{"class":277},[90,1546,284],{"class":277},[90,1548,1550,1552,1554,1556,1558,1560],{"class":92,"line":1549},30,[90,1551,1010],{"class":291},[90,1553,295],{"class":277},[90,1555,528],{"class":277},[90,1557,957],{"class":100},[90,1559,302],{"class":277},[90,1561,313],{"class":277},[90,1563,1565],{"class":92,"line":1564},31,[90,1566,359],{"class":277},[17,1568,1569,1570,1572],{},"If you'll fire Storybook now, you'll see your ",[32,1571,888],{}," component and you can play with the color of the text by selecting the different options",[17,1574,1575],{},[111,1576],{"alt":1577,"className":1578,"src":1579},"DyFoo component in Storybook",[115,116],"\u002Fposts\u002F2022\u002Fdesign-system\u002FDyFoo.webp",[68,1581,1583],{"id":1582},"_3-bundle-our-library-for-distribution","3. Bundle our library for distribution",[17,1585,1586,1587,1589,1590,1593,1594,1598,1599,1602,1603,66],{},"Now that we have a Vue.js project with Storybook and our first component (",[32,1588,896],{},"), we want to distribute it. So the first thing we need to do is to tell ",[24,1591,44],{"href":42,"rel":1592},[28]," to build a ",[1595,1596,1597],"strong",{},"component library"," and not a ",[1595,1600,1601],{},"project",". And we can do so by setting it up to ",[24,1604,1607],{"href":1605,"rel":1606},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fbuild.html#library-mode",[28],"library mode",[17,1609,1610],{},"To package the vite project as a library we need to change some configuration settings",[80,1612,1617],{"className":1613,"code":1614,"filename":1615,"highlights":1616,"language":990,"meta":86,"style":86},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { resolve } from \"path\";\nimport { fileURLToPath, URL } from \"node:url\";\n\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs\u002Fplugin-vue\";\n\n\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\nexport default defineConfig({\n  plugins: [vue()],\n  build: {\n    lib: {\n      entry: resolve(__dirname, \"src\u002Fmain.ts\"),\n      name: \"Daisy\",\n      fileName: (format) => `daisy.${format}.js`,\n      formats: [\"es\", \"cjs\"],\n    },\n    target: \"esnext\",\n    rollupOptions: {\n      \u002F\u002F make sure to externalize deps that shouldn't be bundled into your library\n      external: [\"vue\"],\n      output: {\n        \u002F\u002F Provide global variables to use in the UMD build for externalized deps\n        globals: {\n          vue: \"Vue\",\n        },\n      },\n    },\n  },\n  resolve: {\n    alias: {\n      \"@\": fileURLToPath(new URL(\".\u002Fsrc\", import.meta.url)),\n    },\n  },\n});\n","vite.config.ts",[93,460,461,462,463,464,465,668,676,686,703,713,718,1426,1455,1470,1484,1499,1504,1509],[32,1618,1619,1643,1670,1674,1696,1714,1718,1723,1735,1750,1760,1770,1796,1812,1850,1880,1885,1902,1912,1918,1938,1948,1954,1964,1981,1986,1991,1996,2001,2010,2019,2065,2070,2075],{"__ignoreMap":86},[90,1620,1622,1624,1626,1629,1632,1635,1637,1639,1641],{"class":1621,"line":93},[92,288],[90,1623,739],{"class":254},[90,1625,262],{"class":277},[90,1627,1628],{"class":298}," resolve",[90,1630,1631],{"class":277}," }",[90,1633,1634],{"class":254}," from",[90,1636,528],{"class":277},[90,1638,491],{"class":100},[90,1640,302],{"class":277},[90,1642,388],{"class":277},[90,1644,1645,1647,1649,1652,1654,1657,1659,1661,1663,1666,1668],{"class":92,"line":215},[90,1646,739],{"class":254},[90,1648,262],{"class":277},[90,1650,1651],{"class":298}," fileURLToPath",[90,1653,525],{"class":277},[90,1655,1656],{"class":298}," URL",[90,1658,1631],{"class":277},[90,1660,1634],{"class":254},[90,1662,528],{"class":277},[90,1664,1665],{"class":100},"node:url",[90,1667,302],{"class":277},[90,1669,388],{"class":277},[90,1671,1672],{"class":92,"line":242},[90,1673,754],{"emptyLinePlaceholder":753},[90,1675,1676,1678,1680,1683,1685,1687,1689,1692,1694],{"class":92,"line":316},[90,1677,739],{"class":254},[90,1679,262],{"class":277},[90,1681,1682],{"class":298}," defineConfig",[90,1684,1631],{"class":277},[90,1686,1634],{"class":254},[90,1688,528],{"class":277},[90,1690,1691],{"class":100},"vite",[90,1693,302],{"class":277},[90,1695,388],{"class":277},[90,1697,1698,1700,1703,1705,1707,1710,1712],{"class":92,"line":326},[90,1699,739],{"class":254},[90,1701,1702],{"class":298}," vue ",[90,1704,1195],{"class":254},[90,1706,528],{"class":277},[90,1708,1709],{"class":100},"@vitejs\u002Fplugin-vue",[90,1711,302],{"class":277},[90,1713,388],{"class":277},[90,1715,1716],{"class":92,"line":337},[90,1717,754],{"emptyLinePlaceholder":753},[90,1719,1720],{"class":92,"line":343},[90,1721,1722],{"class":250},"\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\n",[90,1724,1725,1727,1729,1731,1733],{"class":92,"line":356},[90,1726,759],{"class":254},[90,1728,1215],{"class":254},[90,1730,1682],{"class":482},[90,1732,486],{"class":298},[90,1734,1005],{"class":277},[90,1736,1737,1739,1741,1743,1745,1748],{"class":92,"line":459},[90,1738,346],{"class":291},[90,1740,295],{"class":277},[90,1742,299],{"class":298},[90,1744,967],{"class":482},[90,1746,1747],{"class":298},"()]",[90,1749,313],{"class":277},[90,1751,1753,1756,1758],{"class":1752,"line":460},[92,288],[90,1754,1755],{"class":291},"  build",[90,1757,295],{"class":277},[90,1759,284],{"class":277},[90,1761,1763,1766,1768],{"class":1762,"line":461},[92,288],[90,1764,1765],{"class":291},"    lib",[90,1767,295],{"class":277},[90,1769,284],{"class":277},[90,1771,1773,1776,1778,1780,1783,1785,1787,1790,1792,1794],{"class":1772,"line":462},[92,288],[90,1774,1775],{"class":291},"      entry",[90,1777,295],{"class":277},[90,1779,1628],{"class":482},[90,1781,1782],{"class":298},"(__dirname",[90,1784,525],{"class":277},[90,1786,528],{"class":277},[90,1788,1789],{"class":100},"src\u002Fmain.ts",[90,1791,302],{"class":277},[90,1793,496],{"class":298},[90,1795,313],{"class":277},[90,1797,1799,1801,1803,1805,1808,1810],{"class":1798,"line":463},[92,288],[90,1800,593],{"class":291},[90,1802,295],{"class":277},[90,1804,528],{"class":277},[90,1806,1807],{"class":100},"Daisy",[90,1809,302],{"class":277},[90,1811,313],{"class":277},[90,1813,1815,1818,1820,1822,1825,1827,1829,1832,1835,1838,1840,1842,1845,1848],{"class":1814,"line":464},[92,288],[90,1816,1817],{"class":482},"      fileName",[90,1819,295],{"class":277},[90,1821,1340],{"class":277},[90,1823,1824],{"class":1051},"format",[90,1826,496],{"class":277},[90,1828,1348],{"class":472},[90,1830,1831],{"class":277}," `",[90,1833,1834],{"class":100},"daisy.",[90,1836,1837],{"class":277},"${",[90,1839,1824],{"class":298},[90,1841,269],{"class":277},[90,1843,1844],{"class":100},".js",[90,1846,1847],{"class":277},"`",[90,1849,313],{"class":277},[90,1851,1853,1856,1858,1860,1862,1865,1867,1869,1871,1874,1876,1878],{"class":1852,"line":465},[92,288],[90,1854,1855],{"class":291},"      formats",[90,1857,295],{"class":277},[90,1859,299],{"class":298},[90,1861,302],{"class":277},[90,1863,1864],{"class":100},"es",[90,1866,302],{"class":277},[90,1868,525],{"class":277},[90,1870,528],{"class":277},[90,1872,1873],{"class":100},"cjs",[90,1875,302],{"class":277},[90,1877,310],{"class":298},[90,1879,313],{"class":277},[90,1881,1883],{"class":1882,"line":668},[92,288],[90,1884,665],{"class":277},[90,1886,1888,1891,1893,1895,1898,1900],{"class":1887,"line":676},[92,288],[90,1889,1890],{"class":291},"    target",[90,1892,295],{"class":277},[90,1894,528],{"class":277},[90,1896,1897],{"class":100},"esnext",[90,1899,302],{"class":277},[90,1901,313],{"class":277},[90,1903,1905,1908,1910],{"class":1904,"line":686},[92,288],[90,1906,1907],{"class":291},"    rollupOptions",[90,1909,295],{"class":277},[90,1911,284],{"class":277},[90,1913,1915],{"class":1914,"line":703},[92,288],[90,1916,1917],{"class":250},"      \u002F\u002F make sure to externalize deps that shouldn't be bundled into your library\n",[90,1919,1921,1924,1926,1928,1930,1932,1934,1936],{"class":1920,"line":713},[92,288],[90,1922,1923],{"class":291},"      external",[90,1925,295],{"class":277},[90,1927,299],{"class":298},[90,1929,302],{"class":277},[90,1931,967],{"class":100},[90,1933,302],{"class":277},[90,1935,310],{"class":298},[90,1937,313],{"class":277},[90,1939,1941,1944,1946],{"class":1940,"line":718},[92,288],[90,1942,1943],{"class":291},"      output",[90,1945,295],{"class":277},[90,1947,284],{"class":277},[90,1949,1951],{"class":1950,"line":1426},[92,288],[90,1952,1953],{"class":250},"        \u002F\u002F Provide global variables to use in the UMD build for externalized deps\n",[90,1955,1957,1960,1962],{"class":1956,"line":1455},[92,288],[90,1958,1959],{"class":291},"        globals",[90,1961,295],{"class":277},[90,1963,284],{"class":277},[90,1965,1967,1970,1972,1974,1977,1979],{"class":1966,"line":1470},[92,288],[90,1968,1969],{"class":291},"          vue",[90,1971,295],{"class":277},[90,1973,528],{"class":277},[90,1975,1976],{"class":100},"Vue",[90,1978,302],{"class":277},[90,1980,313],{"class":277},[90,1982,1984],{"class":1983,"line":1484},[92,288],[90,1985,653],{"class":277},[90,1987,1989],{"class":1988,"line":1499},[92,288],[90,1990,659],{"class":277},[90,1992,1994],{"class":1993,"line":1504},[92,288],[90,1995,665],{"class":277},[90,1997,1999],{"class":1998,"line":1509},[92,288],[90,2000,340],{"class":277},[90,2002,2003,2006,2008],{"class":92,"line":1535},[90,2004,2005],{"class":291},"  resolve",[90,2007,295],{"class":277},[90,2009,284],{"class":277},[90,2011,2012,2015,2017],{"class":92,"line":1549},[90,2013,2014],{"class":291},"    alias",[90,2016,295],{"class":277},[90,2018,284],{"class":277},[90,2020,2021,2024,2026,2028,2030,2032,2034,2037,2039,2041,2043,2046,2048,2050,2053,2055,2058,2060,2063],{"class":92,"line":1564},[90,2022,2023],{"class":277},"      \"",[90,2025,255],{"class":291},[90,2027,302],{"class":277},[90,2029,295],{"class":277},[90,2031,1651],{"class":482},[90,2033,486],{"class":298},[90,2035,2036],{"class":277},"new",[90,2038,1656],{"class":482},[90,2040,486],{"class":298},[90,2042,302],{"class":277},[90,2044,2045],{"class":100},".\u002Fsrc",[90,2047,302],{"class":277},[90,2049,525],{"class":277},[90,2051,2052],{"class":254}," import",[90,2054,66],{"class":277},[90,2056,2057],{"class":298},"meta",[90,2059,66],{"class":277},[90,2061,2062],{"class":298},"url))",[90,2064,313],{"class":277},[90,2066,2068],{"class":92,"line":2067},32,[90,2069,665],{"class":277},[90,2071,2073],{"class":92,"line":2072},33,[90,2074,340],{"class":277},[90,2076,2078,2080,2082],{"class":92,"line":2077},34,[90,2079,269],{"class":277},[90,2081,496],{"class":298},[90,2083,388],{"class":277},[17,2085,2086,2087,2090,2091],{},"The next thing is to set the main entry file to the package (",[32,2088,2089],{},"main.ts"," in our case), so add those sections right after the ",[32,2092,2093],{},"\"script\"",[80,2095,2100],{"className":2096,"code":2097,"filename":2098,"language":2099,"meta":86,"style":86},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\"files\": [\n  \"dist\"\n],\n\"main\": \".\u002Fdist\u002Fdaisy.umd.cjs\",\n\"module\": \".\u002Fdist\u002Fdaisy.es.js\",\n\"types\": \".\u002Fdist\u002Fmain.d.ts\",\n\"exports\": {\n  \".\": {\n    \"import\": \".\u002Fdist\u002Fdaisy.es.js\",\n    \"require\": \".\u002Fdist\u002Fdaisy.umd.cjs\"\n  },\n  \".\u002Fdist\u002Fstyle.css\": \".\u002Fdist\u002Fstyle.css\"\n},\n","package.json","json",[32,2101,2102,2117,2128,2134,2154,2174,2194,2207,2219,2237,2254,2258,2275],{"__ignoreMap":86},[90,2103,2104,2106,2109,2111,2114],{"class":92,"line":93},[90,2105,302],{"class":277},[90,2107,2108],{"class":100},"files",[90,2110,302],{"class":277},[90,2112,2113],{"class":298},": ",[90,2115,2116],{"class":277},"[\n",[90,2118,2119,2122,2125],{"class":92,"line":215},[90,2120,2121],{"class":277},"  \"",[90,2123,2124],{"class":100},"dist",[90,2126,2127],{"class":277},"\"\n",[90,2129,2130,2132],{"class":92,"line":242},[90,2131,310],{"class":277},[90,2133,313],{"class":298},[90,2135,2136,2138,2141,2143,2145,2147,2150,2152],{"class":92,"line":316},[90,2137,302],{"class":277},[90,2139,2140],{"class":100},"main",[90,2142,302],{"class":277},[90,2144,2113],{"class":298},[90,2146,302],{"class":277},[90,2148,2149],{"class":100},".\u002Fdist\u002Fdaisy.umd.cjs",[90,2151,302],{"class":277},[90,2153,313],{"class":298},[90,2155,2156,2158,2161,2163,2165,2167,2170,2172],{"class":92,"line":326},[90,2157,302],{"class":277},[90,2159,2160],{"class":100},"module",[90,2162,302],{"class":277},[90,2164,2113],{"class":298},[90,2166,302],{"class":277},[90,2168,2169],{"class":100},".\u002Fdist\u002Fdaisy.es.js",[90,2171,302],{"class":277},[90,2173,313],{"class":298},[90,2175,2176,2178,2181,2183,2185,2187,2190,2192],{"class":92,"line":337},[90,2177,302],{"class":277},[90,2179,2180],{"class":100},"types",[90,2182,302],{"class":277},[90,2184,2113],{"class":298},[90,2186,302],{"class":277},[90,2188,2189],{"class":100},".\u002Fdist\u002Fmain.d.ts",[90,2191,302],{"class":277},[90,2193,313],{"class":298},[90,2195,2196,2198,2201,2203,2205],{"class":92,"line":343},[90,2197,302],{"class":277},[90,2199,2200],{"class":100},"exports",[90,2202,302],{"class":277},[90,2204,2113],{"class":298},[90,2206,1005],{"class":277},[90,2208,2209,2211,2213,2215,2217],{"class":92,"line":356},[90,2210,2121],{"class":277},[90,2212,66],{"class":472},[90,2214,302],{"class":277},[90,2216,295],{"class":277},[90,2218,284],{"class":277},[90,2220,2221,2223,2225,2227,2229,2231,2233,2235],{"class":92,"line":459},[90,2222,552],{"class":277},[90,2224,739],{"class":96},[90,2226,302],{"class":277},[90,2228,295],{"class":277},[90,2230,528],{"class":277},[90,2232,2169],{"class":100},[90,2234,302],{"class":277},[90,2236,313],{"class":277},[90,2238,2239,2241,2244,2246,2248,2250,2252],{"class":92,"line":460},[90,2240,552],{"class":277},[90,2242,2243],{"class":96},"require",[90,2245,302],{"class":277},[90,2247,295],{"class":277},[90,2249,528],{"class":277},[90,2251,2149],{"class":100},[90,2253,2127],{"class":277},[90,2255,2256],{"class":92,"line":461},[90,2257,340],{"class":277},[90,2259,2260,2262,2265,2267,2269,2271,2273],{"class":92,"line":462},[90,2261,2121],{"class":277},[90,2263,2264],{"class":472},".\u002Fdist\u002Fstyle.css",[90,2266,302],{"class":277},[90,2268,295],{"class":277},[90,2270,528],{"class":277},[90,2272,2264],{"class":100},[90,2274,2127],{"class":277},[90,2276,2277,2279],{"class":92,"line":463},[90,2278,269],{"class":277},[90,2280,313],{"class":298},[17,2282,2283,2284,2286],{},"And last but not least is to export our ",[32,2285,896],{}," component in our entry file",[80,2288,2290],{"className":1613,"code":2289,"filename":2089,"language":990,"meta":86,"style":86},"export { default as DyFoo } from \".\u002Fcomponents\u002FDyFoo\u002FDyFoo.vue\";\n",[32,2291,2292],{"__ignoreMap":86},[90,2293,2294,2296,2298,2300,2303,2305,2307,2309,2311,2314,2316],{"class":92,"line":93},[90,2295,759],{"class":254},[90,2297,262],{"class":277},[90,2299,1215],{"class":254},[90,2301,2302],{"class":254}," as",[90,2304,1243],{"class":298},[90,2306,1631],{"class":277},[90,2308,1634],{"class":254},[90,2310,528],{"class":277},[90,2312,2313],{"class":100},".\u002Fcomponents\u002FDyFoo\u002FDyFoo.vue",[90,2315,302],{"class":277},[90,2317,388],{"class":277},[17,2319,2320,2321,2324,2325,2327,2328,2330,2331,421,2334,2337],{},"You can now run a build (",[32,2322,2323],{},"npm run build",") and see that a ",[32,2326,2124],{}," directory is created, with it there are our ",[32,2329,365],{}," file and 2 new files ",[32,2332,2333],{},"daisy.cjs.js",[32,2335,2336],{},"daisy.es.js",". Basically that's it, we're all good. But if you want to add typing for Typescript support you'll want to add couple more things.",[17,2339,2340,2341,2344,2345,2348],{},"First, edit the ",[32,2342,2343],{},"build-only"," npm script to emit types declarations with ",[32,2346,2347],{},"vue-tsc --emitDeclarationOnly",", like this",[80,2350,2352],{"className":2096,"code":2351,"filename":2098,"language":2099,"meta":86,"style":86},"\"build-only\": \"vite build && vue-tsc --emitDeclarationOnly\",\n",[32,2353,2354],{"__ignoreMap":86},[90,2355,2356,2358,2360,2362,2364,2366,2369,2371],{"class":92,"line":93},[90,2357,302],{"class":277},[90,2359,2343],{"class":100},[90,2361,302],{"class":277},[90,2363,2113],{"class":298},[90,2365,302],{"class":277},[90,2367,2368],{"class":100},"vite build && vue-tsc --emitDeclarationOnly",[90,2370,302],{"class":277},[90,2372,313],{"class":298},[17,2374,2375,2376,2379,2380,2383,2384,2387],{},"and then add ",[32,2377,2378],{},"compilerOptions"," and the files to ",[32,2381,2382],{},"include"," (right after the ",[32,2385,2386],{},"references"," array)",[80,2389,2392],{"className":2096,"code":2390,"filename":2391,"language":2099,"meta":86,"style":86},"\"compilerOptions\": {\n  \"lib\": [\"ESNext\", \"DOM\"],\n  \"skipLibCheck\": true,\n  \"types\": [\"vite\u002Fclient\"],\n  \"outDir\": \"dist\",\n  \"declaration\": true\n},\n\"include\": [\"src\u002F**\u002F*.vue\", \"src\u002Fmain.ts\"]\n","tsconfig.json",[32,2393,2394,2406,2438,2452,2473,2492,2506,2512],{"__ignoreMap":86},[90,2395,2396,2398,2400,2402,2404],{"class":92,"line":93},[90,2397,302],{"class":277},[90,2399,2378],{"class":100},[90,2401,302],{"class":277},[90,2403,2113],{"class":298},[90,2405,1005],{"class":277},[90,2407,2408,2410,2413,2415,2417,2419,2421,2424,2426,2428,2430,2433,2435],{"class":92,"line":215},[90,2409,2121],{"class":277},[90,2411,2412],{"class":472},"lib",[90,2414,302],{"class":277},[90,2416,295],{"class":277},[90,2418,299],{"class":277},[90,2420,302],{"class":277},[90,2422,2423],{"class":100},"ESNext",[90,2425,302],{"class":277},[90,2427,525],{"class":277},[90,2429,528],{"class":277},[90,2431,2432],{"class":100},"DOM",[90,2434,302],{"class":277},[90,2436,2437],{"class":277},"],\n",[90,2439,2440,2442,2445,2447,2449],{"class":92,"line":242},[90,2441,2121],{"class":277},[90,2443,2444],{"class":472},"skipLibCheck",[90,2446,302],{"class":277},[90,2448,295],{"class":277},[90,2450,2451],{"class":277}," true,\n",[90,2453,2454,2456,2458,2460,2462,2464,2466,2469,2471],{"class":92,"line":316},[90,2455,2121],{"class":277},[90,2457,2180],{"class":472},[90,2459,302],{"class":277},[90,2461,295],{"class":277},[90,2463,299],{"class":277},[90,2465,302],{"class":277},[90,2467,2468],{"class":100},"vite\u002Fclient",[90,2470,302],{"class":277},[90,2472,2437],{"class":277},[90,2474,2475,2477,2480,2482,2484,2486,2488,2490],{"class":92,"line":326},[90,2476,2121],{"class":277},[90,2478,2479],{"class":472},"outDir",[90,2481,302],{"class":277},[90,2483,295],{"class":277},[90,2485,528],{"class":277},[90,2487,2124],{"class":100},[90,2489,302],{"class":277},[90,2491,313],{"class":277},[90,2493,2494,2496,2499,2501,2503],{"class":92,"line":337},[90,2495,2121],{"class":277},[90,2497,2498],{"class":472},"declaration",[90,2500,302],{"class":277},[90,2502,295],{"class":277},[90,2504,2505],{"class":277}," true\n",[90,2507,2508,2510],{"class":92,"line":343},[90,2509,269],{"class":277},[90,2511,313],{"class":298},[90,2513,2514,2516,2518,2520,2522,2525,2527,2530,2532,2534,2536,2538,2540],{"class":92,"line":356},[90,2515,302],{"class":277},[90,2517,2382],{"class":100},[90,2519,302],{"class":277},[90,2521,2113],{"class":298},[90,2523,2524],{"class":277},"[",[90,2526,302],{"class":277},[90,2528,2529],{"class":100},"src\u002F**\u002F*.vue",[90,2531,302],{"class":277},[90,2533,525],{"class":277},[90,2535,528],{"class":277},[90,2537,1789],{"class":100},[90,2539,302],{"class":277},[90,2541,2542],{"class":277},"]\n",[68,2544,2546],{"id":2545},"_4-publish-your-vite-package-into-github-packages-with-github-actions","4. Publish your vite package into GitHub packages with GitHub actions",[17,2548,2549,2550,2552,2553,132],{},"Now that you can build your vite library locally on your machine, it's time to build it in the cloud, in GitHub actions, automatically with every commit to ",[32,2551,2140],{}," branch. We'll also setup a step in our workflow to bump the release version (with ",[24,2554,2557],{"href":2555,"rel":2556},"https:\u002F\u002Fgithub.com\u002Fsemantic-release\u002Fsemantic-release",[28],"semantic-release",[17,2559,2560],{},"So let's create a GitHub action workflow",[80,2562,2564],{"className":82,"code":2563,"filename":84,"language":85,"meta":86,"style":86},"touch .github\u002Fworkflows\u002Fcd.yaml\n",[32,2565,2566],{"__ignoreMap":86},[90,2567,2568,2570],{"class":92,"line":93},[90,2569,929],{"class":96},[90,2571,2572],{"class":100}," .github\u002Fworkflows\u002Fcd.yaml\n",[17,2574,2575],{},"And put there 3 steps:",[2577,2578,2579,2583,2589],"ol",{},[2580,2581,2582],"li",{},"Test our components (currently just linting).",[2580,2584,2585,2586,132],{},"Publish a release to GitHub (using ",[24,2587,2557],{"href":2555,"rel":2588},[28],[2580,2590,2591],{},"Publish the package to GitHub registry.",[80,2593,2598],{"className":2594,"code":2595,"filename":2596,"language":2597,"meta":86,"style":86},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","name: Continuous Deployment\n\non:\n  push:\n    branches:\n      - main\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    name: Test the project\n\n    steps:\n      - uses: actions\u002Fcheckout@v3\n\n      - name: Use Node.js\n        uses: actions\u002Fsetup-node@v2\n        with:\n          node-version: \"16\"\n\n      - name: Install Dependencies\n        run: npm install\n\n      - name: Run Linter\n        run: npm run lint\n\n  publish-release:\n    needs: test\n    runs-on: ubuntu-latest\n    name: Publish a release to GitHub\n    outputs:\n      version: ${{ steps.release_version.outputs.version }}\n    steps:\n      - uses: actions\u002Fcheckout@v3\n\n      - name: Create Release 🚀\n        uses: ridedott\u002Frelease-me-action@master\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n        with:\n          release-branches: '[\"main\"]'\n          node-module: true\n\n  publish-gpr:\n    needs: publish-release\n    runs-on: ubuntu-latest\n    permissions:\n      contents: read\n      packages: write\n    steps:\n      - uses: actions\u002Fcheckout@v3\n\n      - name: Install Dependencies\n        run: npm install\n\n      - name: Build the project\n        run: npm run build\n\n      - uses: actions\u002Fsetup-node@v3\n        with:\n          node-version: 16\n          registry-url: https:\u002F\u002Fnpm.pkg.github.com\u002F\n          scope: \"@nirgn975\"\n      - run: npm ci\n      - run: npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n",".github\u002Fworkflows\u002Fcd.yaml","yaml",[32,2599,2600,2610,2614,2622,2629,2636,2644,2648,2655,2662,2672,2681,2685,2692,2704,2708,2720,2730,2737,2751,2755,2766,2776,2780,2791,2800,2804,2811,2821,2829,2838,2845,2855,2861,2871,2876,2888,2898,2906,2917,2924,2940,2950,2955,2963,2973,2982,2990,3001,3012,3019,3030,3035,3046,3055,3060,3072,3082,3087,3099,3106,3116,3127,3142,3154,3166,3173],{"__ignoreMap":86},[90,2601,2602,2605,2607],{"class":92,"line":93},[90,2603,2604],{"class":291},"name",[90,2606,295],{"class":277},[90,2608,2609],{"class":100}," Continuous Deployment\n",[90,2611,2612],{"class":92,"line":215},[90,2613,754],{"emptyLinePlaceholder":753},[90,2615,2616,2619],{"class":92,"line":242},[90,2617,2618],{"class":1478},"on",[90,2620,2621],{"class":277},":\n",[90,2623,2624,2627],{"class":92,"line":316},[90,2625,2626],{"class":291},"  push",[90,2628,2621],{"class":277},[90,2630,2631,2634],{"class":92,"line":326},[90,2632,2633],{"class":291},"    branches",[90,2635,2621],{"class":277},[90,2637,2638,2641],{"class":92,"line":337},[90,2639,2640],{"class":277},"      -",[90,2642,2643],{"class":100}," main\n",[90,2645,2646],{"class":92,"line":343},[90,2647,754],{"emptyLinePlaceholder":753},[90,2649,2650,2653],{"class":92,"line":356},[90,2651,2652],{"class":291},"jobs",[90,2654,2621],{"class":277},[90,2656,2657,2660],{"class":92,"line":459},[90,2658,2659],{"class":291},"  test",[90,2661,2621],{"class":277},[90,2663,2664,2667,2669],{"class":92,"line":460},[90,2665,2666],{"class":291},"    runs-on",[90,2668,295],{"class":277},[90,2670,2671],{"class":100}," ubuntu-latest\n",[90,2673,2674,2676,2678],{"class":92,"line":461},[90,2675,689],{"class":291},[90,2677,295],{"class":277},[90,2679,2680],{"class":100}," Test the project\n",[90,2682,2683],{"class":92,"line":462},[90,2684,754],{"emptyLinePlaceholder":753},[90,2686,2687,2690],{"class":92,"line":463},[90,2688,2689],{"class":291},"    steps",[90,2691,2621],{"class":277},[90,2693,2694,2696,2699,2701],{"class":92,"line":464},[90,2695,2640],{"class":277},[90,2697,2698],{"class":291}," uses",[90,2700,295],{"class":277},[90,2702,2703],{"class":100}," actions\u002Fcheckout@v3\n",[90,2705,2706],{"class":92,"line":465},[90,2707,754],{"emptyLinePlaceholder":753},[90,2709,2710,2712,2715,2717],{"class":92,"line":668},[90,2711,2640],{"class":277},[90,2713,2714],{"class":291}," name",[90,2716,295],{"class":277},[90,2718,2719],{"class":100}," Use Node.js\n",[90,2721,2722,2725,2727],{"class":92,"line":676},[90,2723,2724],{"class":291},"        uses",[90,2726,295],{"class":277},[90,2728,2729],{"class":100}," actions\u002Fsetup-node@v2\n",[90,2731,2732,2735],{"class":92,"line":686},[90,2733,2734],{"class":291},"        with",[90,2736,2621],{"class":277},[90,2738,2739,2742,2744,2746,2749],{"class":92,"line":703},[90,2740,2741],{"class":291},"          node-version",[90,2743,295],{"class":277},[90,2745,528],{"class":277},[90,2747,2748],{"class":100},"16",[90,2750,2127],{"class":277},[90,2752,2753],{"class":92,"line":713},[90,2754,754],{"emptyLinePlaceholder":753},[90,2756,2757,2759,2761,2763],{"class":92,"line":718},[90,2758,2640],{"class":277},[90,2760,2714],{"class":291},[90,2762,295],{"class":277},[90,2764,2765],{"class":100}," Install Dependencies\n",[90,2767,2768,2771,2773],{"class":92,"line":1426},[90,2769,2770],{"class":291},"        run",[90,2772,295],{"class":277},[90,2774,2775],{"class":100}," npm install\n",[90,2777,2778],{"class":92,"line":1455},[90,2779,754],{"emptyLinePlaceholder":753},[90,2781,2782,2784,2786,2788],{"class":92,"line":1470},[90,2783,2640],{"class":277},[90,2785,2714],{"class":291},[90,2787,295],{"class":277},[90,2789,2790],{"class":100}," Run Linter\n",[90,2792,2793,2795,2797],{"class":92,"line":1484},[90,2794,2770],{"class":291},[90,2796,295],{"class":277},[90,2798,2799],{"class":100}," npm run lint\n",[90,2801,2802],{"class":92,"line":1499},[90,2803,754],{"emptyLinePlaceholder":753},[90,2805,2806,2809],{"class":92,"line":1504},[90,2807,2808],{"class":291},"  publish-release",[90,2810,2621],{"class":277},[90,2812,2813,2816,2818],{"class":92,"line":1509},[90,2814,2815],{"class":291},"    needs",[90,2817,295],{"class":277},[90,2819,2820],{"class":100}," test\n",[90,2822,2823,2825,2827],{"class":92,"line":1535},[90,2824,2666],{"class":291},[90,2826,295],{"class":277},[90,2828,2671],{"class":100},[90,2830,2831,2833,2835],{"class":92,"line":1549},[90,2832,689],{"class":291},[90,2834,295],{"class":277},[90,2836,2837],{"class":100}," Publish a release to GitHub\n",[90,2839,2840,2843],{"class":92,"line":1564},[90,2841,2842],{"class":291},"    outputs",[90,2844,2621],{"class":277},[90,2846,2847,2850,2852],{"class":92,"line":2067},[90,2848,2849],{"class":291},"      version",[90,2851,295],{"class":277},[90,2853,2854],{"class":100}," ${{ steps.release_version.outputs.version }}\n",[90,2856,2857,2859],{"class":92,"line":2072},[90,2858,2689],{"class":291},[90,2860,2621],{"class":277},[90,2862,2863,2865,2867,2869],{"class":92,"line":2077},[90,2864,2640],{"class":277},[90,2866,2698],{"class":291},[90,2868,295],{"class":277},[90,2870,2703],{"class":100},[90,2872,2874],{"class":92,"line":2873},35,[90,2875,754],{"emptyLinePlaceholder":753},[90,2877,2879,2881,2883,2885],{"class":92,"line":2878},36,[90,2880,2640],{"class":277},[90,2882,2714],{"class":291},[90,2884,295],{"class":277},[90,2886,2887],{"class":100}," Create Release 🚀\n",[90,2889,2891,2893,2895],{"class":92,"line":2890},37,[90,2892,2724],{"class":291},[90,2894,295],{"class":277},[90,2896,2897],{"class":100}," ridedott\u002Frelease-me-action@master\n",[90,2899,2901,2904],{"class":92,"line":2900},38,[90,2902,2903],{"class":291},"        env",[90,2905,2621],{"class":277},[90,2907,2909,2912,2914],{"class":92,"line":2908},39,[90,2910,2911],{"class":291},"          GITHUB_TOKEN",[90,2913,295],{"class":277},[90,2915,2916],{"class":100}," ${{ secrets.GITHUB_TOKEN }}\n",[90,2918,2920,2922],{"class":92,"line":2919},40,[90,2921,2734],{"class":291},[90,2923,2621],{"class":277},[90,2925,2927,2930,2932,2934,2937],{"class":92,"line":2926},41,[90,2928,2929],{"class":291},"          release-branches",[90,2931,295],{"class":277},[90,2933,1403],{"class":277},[90,2935,2936],{"class":100},"[\"main\"]",[90,2938,2939],{"class":277},"'\n",[90,2941,2943,2946,2948],{"class":92,"line":2942},42,[90,2944,2945],{"class":291},"          node-module",[90,2947,295],{"class":277},[90,2949,2505],{"class":1478},[90,2951,2953],{"class":92,"line":2952},43,[90,2954,754],{"emptyLinePlaceholder":753},[90,2956,2958,2961],{"class":92,"line":2957},44,[90,2959,2960],{"class":291},"  publish-gpr",[90,2962,2621],{"class":277},[90,2964,2966,2968,2970],{"class":92,"line":2965},45,[90,2967,2815],{"class":291},[90,2969,295],{"class":277},[90,2971,2972],{"class":100}," publish-release\n",[90,2974,2976,2978,2980],{"class":92,"line":2975},46,[90,2977,2666],{"class":291},[90,2979,295],{"class":277},[90,2981,2671],{"class":100},[90,2983,2985,2988],{"class":92,"line":2984},47,[90,2986,2987],{"class":291},"    permissions",[90,2989,2621],{"class":277},[90,2991,2993,2996,2998],{"class":92,"line":2992},48,[90,2994,2995],{"class":291},"      contents",[90,2997,295],{"class":277},[90,2999,3000],{"class":100}," read\n",[90,3002,3004,3007,3009],{"class":92,"line":3003},49,[90,3005,3006],{"class":291},"      packages",[90,3008,295],{"class":277},[90,3010,3011],{"class":100}," write\n",[90,3013,3015,3017],{"class":92,"line":3014},50,[90,3016,2689],{"class":291},[90,3018,2621],{"class":277},[90,3020,3022,3024,3026,3028],{"class":92,"line":3021},51,[90,3023,2640],{"class":277},[90,3025,2698],{"class":291},[90,3027,295],{"class":277},[90,3029,2703],{"class":100},[90,3031,3033],{"class":92,"line":3032},52,[90,3034,754],{"emptyLinePlaceholder":753},[90,3036,3038,3040,3042,3044],{"class":92,"line":3037},53,[90,3039,2640],{"class":277},[90,3041,2714],{"class":291},[90,3043,295],{"class":277},[90,3045,2765],{"class":100},[90,3047,3049,3051,3053],{"class":92,"line":3048},54,[90,3050,2770],{"class":291},[90,3052,295],{"class":277},[90,3054,2775],{"class":100},[90,3056,3058],{"class":92,"line":3057},55,[90,3059,754],{"emptyLinePlaceholder":753},[90,3061,3063,3065,3067,3069],{"class":92,"line":3062},56,[90,3064,2640],{"class":277},[90,3066,2714],{"class":291},[90,3068,295],{"class":277},[90,3070,3071],{"class":100}," Build the project\n",[90,3073,3075,3077,3079],{"class":92,"line":3074},57,[90,3076,2770],{"class":291},[90,3078,295],{"class":277},[90,3080,3081],{"class":100}," npm run build\n",[90,3083,3085],{"class":92,"line":3084},58,[90,3086,754],{"emptyLinePlaceholder":753},[90,3088,3090,3092,3094,3096],{"class":92,"line":3089},59,[90,3091,2640],{"class":277},[90,3093,2698],{"class":291},[90,3095,295],{"class":277},[90,3097,3098],{"class":100}," actions\u002Fsetup-node@v3\n",[90,3100,3102,3104],{"class":92,"line":3101},60,[90,3103,2734],{"class":291},[90,3105,2621],{"class":277},[90,3107,3109,3111,3113],{"class":92,"line":3108},61,[90,3110,2741],{"class":291},[90,3112,295],{"class":277},[90,3114,3115],{"class":841}," 16\n",[90,3117,3119,3122,3124],{"class":92,"line":3118},62,[90,3120,3121],{"class":291},"          registry-url",[90,3123,295],{"class":277},[90,3125,3126],{"class":100}," https:\u002F\u002Fnpm.pkg.github.com\u002F\n",[90,3128,3130,3133,3135,3137,3140],{"class":92,"line":3129},63,[90,3131,3132],{"class":291},"          scope",[90,3134,295],{"class":277},[90,3136,528],{"class":277},[90,3138,3139],{"class":100},"@nirgn975",[90,3141,2127],{"class":277},[90,3143,3145,3147,3149,3151],{"class":92,"line":3144},64,[90,3146,2640],{"class":277},[90,3148,172],{"class":291},[90,3150,295],{"class":277},[90,3152,3153],{"class":100}," npm ci\n",[90,3155,3157,3159,3161,3163],{"class":92,"line":3156},65,[90,3158,2640],{"class":277},[90,3160,172],{"class":291},[90,3162,295],{"class":277},[90,3164,3165],{"class":100}," npm publish\n",[90,3167,3169,3171],{"class":92,"line":3168},66,[90,3170,2903],{"class":291},[90,3172,2621],{"class":277},[90,3174,3176,3179,3181],{"class":92,"line":3175},67,[90,3177,3178],{"class":291},"          NODE_AUTH_TOKEN",[90,3180,295],{"class":277},[90,3182,2916],{"class":100},[17,3184,3185,3186,3188,3189,3192,3193,3196],{},"We also need to change a few things in our ",[32,3187,2098],{},". First the ",[32,3190,3191],{},"\"name\""," should start with your organization name (or username). Second, you should add a ",[32,3194,3195],{},"repository"," section",[80,3198,3200],{"className":2096,"code":3199,"filename":2098,"language":2099,"meta":86,"style":86},"\"repository\": {\n  \"type\": \"git\",\n  \"url\": \"git:\u002F\u002Fgithub.com\u002Fnirgn975\u002Fdaisy.git\"\n},\n",[32,3201,3202,3214,3233,3251],{"__ignoreMap":86},[90,3203,3204,3206,3208,3210,3212],{"class":92,"line":93},[90,3205,302],{"class":277},[90,3207,3195],{"class":100},[90,3209,302],{"class":277},[90,3211,2113],{"class":298},[90,3213,1005],{"class":277},[90,3215,3216,3218,3220,3222,3224,3226,3229,3231],{"class":92,"line":215},[90,3217,2121],{"class":277},[90,3219,259],{"class":472},[90,3221,302],{"class":277},[90,3223,295],{"class":277},[90,3225,528],{"class":277},[90,3227,3228],{"class":100},"git",[90,3230,302],{"class":277},[90,3232,313],{"class":277},[90,3234,3235,3237,3240,3242,3244,3246,3249],{"class":92,"line":242},[90,3236,2121],{"class":277},[90,3238,3239],{"class":472},"url",[90,3241,302],{"class":277},[90,3243,295],{"class":277},[90,3245,528],{"class":277},[90,3247,3248],{"class":100},"git:\u002F\u002Fgithub.com\u002Fnirgn975\u002Fdaisy.git",[90,3250,2127],{"class":277},[90,3252,3253,3255],{"class":92,"line":316},[90,3254,269],{"class":277},[90,3256,313],{"class":298},[17,3258,3259],{},"Once you commit all the changes and push your branch to GitHub, a new GitHub workflow will automatically start, and once it finishes you'll see the package in your \"packages\" section inside the repository.",[17,3261,3262],{},[111,3263],{"alt":3264,"className":3265,"src":3266},"GitHub Package",[115,116],"\u002Fposts\u002F2022\u002Fdesign-system\u002Fgithub-package.webp",[17,3268,3269,3270,954,3272,3275,3276,66],{},"If you want to publish to ",[32,3271,97],{},[32,3273,3274],{},"yarn"," instead, you can follow the ",[24,3277,3280],{"href":3278,"rel":3279},"https:\u002F\u002Fdocs.github.com\u002Fen\u002Factions\u002Fpublishing-packages\u002Fpublishing-nodejs-packages",[28],"github publishing-nodejs-packages guide",[68,3282,3284],{"id":3283},"_5-publish-your-storybook-to-chromatic","5. Publish your Storybook to Chromatic",[17,3286,3287,3288,3293],{},"First thing we need to do is ask ourselves what is ",[24,3289,3292],{"href":3290,"rel":3291},"https:\u002F\u002Fwww.chromatic.com",[28],"Chromatic","? and why we should want to publish our Storybook to that platform?",[17,3295,3296],{},"Chromatic is a cloud solution for Storybook that offers: Free Storybook hosting, allowing you to publish your Storybooks with local or remote changes, visual regression testing with cross-browser support, DOM snapshots to pick code changes, gathering UI feedback on PRs, and more.",[17,3298,3299,3300,3305],{},"Now that we understand what is Chromatic and have a good reason to want to use it, let's ",[24,3301,3304],{"href":3302,"rel":3303},"https:\u002F\u002Fwww.chromatic.com\u002Fstart?startWithSignup=true",[28],"sign up on their website"," (I just sign-in with my GitHub account) and add a new step in our GitHub action to push our storybook and host it on their platform.",[17,3307,3308,3309,3312,3313,3316,3317,3320,3321,3324],{},"If it's your first time on ",[24,3310,3292],{"href":3290,"rel":3311},[28],", go to ",[1595,3314,3315],{},"\"projects\""," and click on ",[1595,3318,3319],{},"\"Choose from GitHub\""," and a list of all your GitHub repositories will be opened, choose the repo you have used for this Design System and you'll get a ",[32,3322,3323],{},"token"," for that project, like in the screenshot below.",[17,3326,3327],{},[111,3328],{"alt":3329,"className":3330,"src":3331},"Chromatic API Key",[115,116],"\u002Fposts\u002F2022\u002Fdesign-system\u002Fchromatic-key.webp",[17,3333,3334,3335,3337,3338,3343],{},"We can use that ",[32,3336,3323],{}," to push our Storybook directly to Chromatic (with Chromatic npm package), but it's more convenient to just use ",[24,3339,3342],{"href":3340,"rel":3341},"https:\u002F\u002Fgithub.com\u002Fchromaui\u002Faction",[28],"their GitHub action step"," and add it to our workflow at the end of the file",[80,3345,3347],{"className":2594,"code":3346,"filename":2596,"language":2597,"meta":86,"style":86},"deploy_chromatic:\n  needs: [publish-release]\n  name: Deploy Design System to Chromatic\n  runs-on: ubuntu-latest\n\n  steps:\n    - name: Checkout repository\n      uses: actions\u002Fcheckout@v3\n      with:\n        fetch-depth: 0\n\n    - name: Install dependencies\n      run: npm install\n\n    - name: Publish to Chromatic\n      uses: chromaui\u002Faction@v1\n      with:\n        token: ${{ secrets.GITHUB_TOKEN }}\n        projectToken: ${{ secrets.CHROMATIC_TOKEN }}\n",[32,3348,3349,3356,3370,3380,3389,3393,3400,3412,3421,3428,3438,3442,3453,3462,3466,3477,3486,3492,3501],{"__ignoreMap":86},[90,3350,3351,3354],{"class":92,"line":93},[90,3352,3353],{"class":291},"deploy_chromatic",[90,3355,2621],{"class":277},[90,3357,3358,3361,3363,3365,3368],{"class":92,"line":215},[90,3359,3360],{"class":291},"  needs",[90,3362,295],{"class":277},[90,3364,299],{"class":277},[90,3366,3367],{"class":100},"publish-release",[90,3369,2542],{"class":277},[90,3371,3372,3375,3377],{"class":92,"line":242},[90,3373,3374],{"class":291},"  name",[90,3376,295],{"class":277},[90,3378,3379],{"class":100}," Deploy Design System to Chromatic\n",[90,3381,3382,3385,3387],{"class":92,"line":316},[90,3383,3384],{"class":291},"  runs-on",[90,3386,295],{"class":277},[90,3388,2671],{"class":100},[90,3390,3391],{"class":92,"line":326},[90,3392,754],{"emptyLinePlaceholder":753},[90,3394,3395,3398],{"class":92,"line":337},[90,3396,3397],{"class":291},"  steps",[90,3399,2621],{"class":277},[90,3401,3402,3405,3407,3409],{"class":92,"line":343},[90,3403,3404],{"class":277},"    -",[90,3406,2714],{"class":291},[90,3408,295],{"class":277},[90,3410,3411],{"class":100}," Checkout repository\n",[90,3413,3414,3417,3419],{"class":92,"line":356},[90,3415,3416],{"class":291},"      uses",[90,3418,295],{"class":277},[90,3420,2703],{"class":100},[90,3422,3423,3426],{"class":92,"line":459},[90,3424,3425],{"class":291},"      with",[90,3427,2621],{"class":277},[90,3429,3430,3433,3435],{"class":92,"line":460},[90,3431,3432],{"class":291},"        fetch-depth",[90,3434,295],{"class":277},[90,3436,3437],{"class":841}," 0\n",[90,3439,3440],{"class":92,"line":461},[90,3441,754],{"emptyLinePlaceholder":753},[90,3443,3444,3446,3448,3450],{"class":92,"line":462},[90,3445,3404],{"class":277},[90,3447,2714],{"class":291},[90,3449,295],{"class":277},[90,3451,3452],{"class":100}," Install dependencies\n",[90,3454,3455,3458,3460],{"class":92,"line":463},[90,3456,3457],{"class":291},"      run",[90,3459,295],{"class":277},[90,3461,2775],{"class":100},[90,3463,3464],{"class":92,"line":464},[90,3465,754],{"emptyLinePlaceholder":753},[90,3467,3468,3470,3472,3474],{"class":92,"line":465},[90,3469,3404],{"class":277},[90,3471,2714],{"class":291},[90,3473,295],{"class":277},[90,3475,3476],{"class":100}," Publish to Chromatic\n",[90,3478,3479,3481,3483],{"class":92,"line":668},[90,3480,3416],{"class":291},[90,3482,295],{"class":277},[90,3484,3485],{"class":100}," chromaui\u002Faction@v1\n",[90,3487,3488,3490],{"class":92,"line":676},[90,3489,3425],{"class":291},[90,3491,2621],{"class":277},[90,3493,3494,3497,3499],{"class":92,"line":686},[90,3495,3496],{"class":291},"        token",[90,3498,295],{"class":277},[90,3500,2916],{"class":100},[90,3502,3503,3506,3508],{"class":92,"line":703},[90,3504,3505],{"class":291},"        projectToken",[90,3507,295],{"class":277},[90,3509,3510],{"class":100}," ${{ secrets.CHROMATIC_TOKEN }}\n",[17,3512,3513,3514,3517,3518,3521,3522,3525,3526,66],{},"The token you got from Chromatic should stay a secret that only you know (as well as any other API or access tokens), or else everyone with that token will have the power to push to your Chromatic project and change things, that's why we use ",[32,3515,3516],{},"${{ secrets.CHROMATIC_TOKEN }}"," as our Chromatic ",[32,3519,3520],{},"projectToken",", that means we can hide the actual token from the source code, and we'll control it via the ",[1595,3523,3524],{},"\"Secret\""," section in the repository ",[1595,3527,3528],{},"\"Settings\"",[17,3530,3531,3532,3535,3536,3539],{},"So all you need to do is to create a new secret, give it a name (",[32,3533,3534],{},"CHROMATIC_TOKEN",") and insert your token as its value (",[32,3537,3538],{},"a85f7b330490"," in our case)",[17,3541,3542],{},[111,3543],{"alt":3544,"className":3545,"src":3546},"GitHub Secrets",[115,116],"\u002Fposts\u002F2022\u002Fdesign-system\u002Fgithub-secrets.webp",[17,3548,3549,3550,3553],{},"That's it, we're ready to commit and push our branch to GitHub and our workflow will push our Storybook to ",[24,3551,3292],{"href":3290,"rel":3552},[28],". Once your GitHub workflow finished running you can see your Chromatic project, in the next commit Chromatic will run and catch visual changes and error, and you also have a free hosting for your Storybook.",[17,3555,3556],{},[111,3557],{"alt":3558,"className":3559,"src":3560},"Storybook hosting on Chromatic",[115,116],"\u002Fposts\u002F2022\u002Fdesign-system\u002Fchromatic-storybook.webp",[68,3562,3564],{"id":3563},"_6-summary","6. Summary",[17,3566,3567],{},"Wow! We have done a lot and we're ready to create some new components for our component library, and everything will just work automagically (bump version, release and publish package, etc).",[17,3569,3570],{},"We can now use our Vue.js component library in other frontend projects at our startup, develop new components in isolation with Storybook, and test for visual regression with Chromatic.",[3572,3573,3574],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s6hCs, html code.shiki .s6hCs{--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#C792EA;--shiki-default-font-style:italic;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .sFweD, html code.shiki .sFweD{--shiki-light:#E2931D;--shiki-light-font-style:italic;--shiki-default:#FFCB6B;--shiki-default-font-style:italic;--shiki-dark:#FFCB6B;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":86,"searchDepth":215,"depth":215,"links":3576},[3577,3578,3579,3580,3581,3582],{"id":70,"depth":215,"text":71},{"id":878,"depth":215,"text":879},{"id":1582,"depth":215,"text":1583},{"id":2545,"depth":215,"text":2546},{"id":3283,"depth":215,"text":3284},{"id":3563,"depth":215,"text":3564},"2022-09-01","A practical guide to building a Vue.js component library with Storybook.",false,"md",{"src":3588},"\u002Fposts\u002F2022\u002Fdesign-system\u002Fhero.webp",{},"\u002Fblog\u002F2022\u002Fdesign-system",{"title":5,"description":3584},"blog\u002F2022\u002Fdesign-system","-NFwndVBvKNJiM54oTB3er6GG0OxXxga8jI33F6dl44",[3595,3600],{"title":3596,"path":3597,"stem":3598,"description":3599,"children":-1},"Hugo Theme With Developer Focus In Mind","\u002Fblog\u002F2021\u002Fhugo-theme","blog\u002F2021\u002Fhugo-theme","Introducing devRes, a developer-focused Hugo resume theme.",{"title":3601,"path":3602,"stem":3603,"description":3604,"children":-1},"Change your email in GitHub","\u002Fblog\u002F2022\u002Fgithub-email","blog\u002F2022\u002Fgithub-email","Migrating email addresses without losing your GitHub contribution history.",1786001638688]