@storybook/cli 7.1.0-alpha.37 → 7.1.0-alpha.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/{chunk-YSWCHNXH.mjs → chunk-3VTA45ED.mjs} +2 -2
  2. package/dist/generate.js +73 -73
  3. package/dist/generate.mjs +65 -65
  4. package/dist/index.js +2 -2
  5. package/dist/index.mjs +1 -1
  6. package/package.json +9 -9
  7. package/rendererAssets/common/Configure.mdx +286 -0
  8. package/rendererAssets/common/assets/accessibility.svg +5 -0
  9. package/rendererAssets/common/assets/assets.jpg +0 -0
  10. package/rendererAssets/common/assets/checkmark.svg +5 -0
  11. package/rendererAssets/common/assets/chromatic.svg +5 -0
  12. package/rendererAssets/common/assets/context.jpg +0 -0
  13. package/rendererAssets/common/assets/discord.svg +12 -0
  14. package/rendererAssets/common/assets/document.svg +11 -0
  15. package/rendererAssets/common/assets/figma.svg +11 -0
  16. package/rendererAssets/common/assets/github.svg +4 -0
  17. package/rendererAssets/common/assets/styling.jpg +0 -0
  18. package/rendererAssets/common/assets/tutorials.svg +8 -0
  19. package/rendererAssets/common/assets/typography.svg +4 -0
  20. package/rendererAssets/common/assets/youtube.svg +5 -0
  21. package/rendererAssets/common/Introduction.mdx +0 -213
  22. package/rendererAssets/common/assets/code-brackets.svg +0 -1
  23. package/rendererAssets/common/assets/colors.svg +0 -1
  24. package/rendererAssets/common/assets/comments.svg +0 -1
  25. package/rendererAssets/common/assets/direction.svg +0 -1
  26. package/rendererAssets/common/assets/flow.svg +0 -1
  27. package/rendererAssets/common/assets/plugin.svg +0 -1
  28. package/rendererAssets/common/assets/repo.svg +0 -1
  29. package/rendererAssets/common/assets/stackalt.svg +0 -1
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{JsPackageManager:()=>JsPackageManager,JsPackageManagerFactory:()=>JsPackageManagerFactory,createLogStream:()=>createLogStream,getEnvConfig:()=>getEnvConfig,getPackageDetails:()=>getPackageDetails,getStorybookVersion:()=>getStorybookVersion,parseList:()=>parseList,useNpmWarning:()=>useNpmWarning,versions:()=>versions_default});module.exports=__toCommonJS(src_exports);var versions_default={"@storybook/addon-a11y":"7.1.0-alpha.37","@storybook/addon-actions":"7.1.0-alpha.37","@storybook/addon-backgrounds":"7.1.0-alpha.37","@storybook/addon-controls":"7.1.0-alpha.37","@storybook/addon-docs":"7.1.0-alpha.37","@storybook/addon-essentials":"7.1.0-alpha.37","@storybook/addon-highlight":"7.1.0-alpha.37","@storybook/addon-interactions":"7.1.0-alpha.37","@storybook/addon-jest":"7.1.0-alpha.37","@storybook/addon-links":"7.1.0-alpha.37","@storybook/addon-mdx-gfm":"7.1.0-alpha.37","@storybook/addon-measure":"7.1.0-alpha.37","@storybook/addon-outline":"7.1.0-alpha.37","@storybook/addon-storyshots":"7.1.0-alpha.37","@storybook/addon-storyshots-puppeteer":"7.1.0-alpha.37","@storybook/addon-storysource":"7.1.0-alpha.37","@storybook/addon-toolbars":"7.1.0-alpha.37","@storybook/addon-viewport":"7.1.0-alpha.37","@storybook/addons":"7.1.0-alpha.37","@storybook/angular":"7.1.0-alpha.37","@storybook/api":"7.1.0-alpha.37","@storybook/blocks":"7.1.0-alpha.37","@storybook/builder-manager":"7.1.0-alpha.37","@storybook/builder-vite":"7.1.0-alpha.37","@storybook/builder-webpack5":"7.1.0-alpha.37","@storybook/channel-postmessage":"7.1.0-alpha.37","@storybook/channel-websocket":"7.1.0-alpha.37","@storybook/channels":"7.1.0-alpha.37","@storybook/cli":"7.1.0-alpha.37","@storybook/client-api":"7.1.0-alpha.37","@storybook/client-logger":"7.1.0-alpha.37","@storybook/codemod":"7.1.0-alpha.37","@storybook/components":"7.1.0-alpha.37","@storybook/core-client":"7.1.0-alpha.37","@storybook/core-common":"7.1.0-alpha.37","@storybook/core-events":"7.1.0-alpha.37","@storybook/core-server":"7.1.0-alpha.37","@storybook/core-webpack":"7.1.0-alpha.37","@storybook/csf-plugin":"7.1.0-alpha.37","@storybook/csf-tools":"7.1.0-alpha.37","@storybook/docs-tools":"7.1.0-alpha.37","@storybook/ember":"7.1.0-alpha.37","@storybook/html":"7.1.0-alpha.37","@storybook/html-vite":"7.1.0-alpha.37","@storybook/html-webpack5":"7.1.0-alpha.37","@storybook/instrumenter":"7.1.0-alpha.37","@storybook/manager":"7.1.0-alpha.37","@storybook/manager-api":"7.1.0-alpha.37","@storybook/nextjs":"7.1.0-alpha.37","@storybook/node-logger":"7.1.0-alpha.37","@storybook/postinstall":"7.1.0-alpha.37","@storybook/preact":"7.1.0-alpha.37","@storybook/preact-vite":"7.1.0-alpha.37","@storybook/preact-webpack5":"7.1.0-alpha.37","@storybook/preset-create-react-app":"7.1.0-alpha.37","@storybook/preset-html-webpack":"7.1.0-alpha.37","@storybook/preset-preact-webpack":"7.1.0-alpha.37","@storybook/preset-react-webpack":"7.1.0-alpha.37","@storybook/preset-server-webpack":"7.1.0-alpha.37","@storybook/preset-svelte-webpack":"7.1.0-alpha.37","@storybook/preset-vue-webpack":"7.1.0-alpha.37","@storybook/preset-vue3-webpack":"7.1.0-alpha.37","@storybook/preset-web-components-webpack":"7.1.0-alpha.37","@storybook/preview":"7.1.0-alpha.37","@storybook/preview-api":"7.1.0-alpha.37","@storybook/preview-web":"7.1.0-alpha.37","@storybook/react":"7.1.0-alpha.37","@storybook/react-dom-shim":"7.1.0-alpha.37","@storybook/react-vite":"7.1.0-alpha.37","@storybook/react-webpack5":"7.1.0-alpha.37","@storybook/router":"7.1.0-alpha.37","@storybook/server":"7.1.0-alpha.37","@storybook/server-webpack5":"7.1.0-alpha.37","@storybook/source-loader":"7.1.0-alpha.37","@storybook/store":"7.1.0-alpha.37","@storybook/svelte":"7.1.0-alpha.37","@storybook/svelte-vite":"7.1.0-alpha.37","@storybook/svelte-webpack5":"7.1.0-alpha.37","@storybook/sveltekit":"7.1.0-alpha.37","@storybook/telemetry":"7.1.0-alpha.37","@storybook/theming":"7.1.0-alpha.37","@storybook/types":"7.1.0-alpha.37","@storybook/vue":"7.1.0-alpha.37","@storybook/vue-vite":"7.1.0-alpha.37","@storybook/vue-webpack5":"7.1.0-alpha.37","@storybook/vue3":"7.1.0-alpha.37","@storybook/vue3-vite":"7.1.0-alpha.37","@storybook/vue3-webpack5":"7.1.0-alpha.37","@storybook/web-components":"7.1.0-alpha.37","@storybook/web-components-vite":"7.1.0-alpha.37","@storybook/web-components-webpack5":"7.1.0-alpha.37",sb:"7.1.0-alpha.37",storybook:"7.1.0-alpha.37"};var import_util_deprecate=__toESM(require("util-deprecate")),useNpmWarning=(0,import_util_deprecate.default)(()=>{},"`--use-npm` is deprecated and will be removed in Storybook 8.0. \nPlease use the `--package-manager=npm` option instead.\nRead more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated");var import_node_path=__toESM(require("path")),import_cross_spawn=require("cross-spawn"),import_find_up6=require("find-up");var import_sort=__toESM(require("semver/functions/sort")),import_os=require("os"),import_ts_dedent2=__toESM(require("ts-dedent")),import_find_up2=require("find-up"),import_fs2=require("fs"),import_path3=__toESM(require("path")),import_semver4=__toESM(require("semver"));var import_chalk2=__toESM(require("chalk")),import_semver3=require("semver"),import_execa=require("execa"),import_path=__toESM(require("path")),import_fs=__toESM(require("fs")),import_ts_dedent=__toESM(require("ts-dedent")),import_fs_extra2=require("fs-extra");var import_fs_extra=__toESM(require("fs-extra")),import_chalk=__toESM(require("chalk")),import_semver2=require("semver"),import_strip_json_comments=__toESM(require("strip-json-comments")),import_find_up=require("find-up");var import_get_tarball=__toESM(require("@ndelangen/get-tarball")),import_get_npm_tarball_url=__toESM(require("get-npm-tarball-url")),tempy=__toESM(require("tempy"));var import_semver=require("semver");var ProjectType=(ProjectType2=>(ProjectType2.UNDETECTED="UNDETECTED",ProjectType2.UNSUPPORTED="UNSUPPORTED",ProjectType2.REACT_SCRIPTS="REACT_SCRIPTS",ProjectType2.REACT="REACT",ProjectType2.REACT_NATIVE="REACT_NATIVE",ProjectType2.REACT_PROJECT="REACT_PROJECT",ProjectType2.WEBPACK_REACT="WEBPACK_REACT",ProjectType2.NEXTJS="NEXTJS",ProjectType2.VUE="VUE",ProjectType2.VUE3="VUE3",ProjectType2.SFC_VUE="SFC_VUE",ProjectType2.ANGULAR="ANGULAR",ProjectType2.EMBER="EMBER",ProjectType2.WEB_COMPONENTS="WEB_COMPONENTS",ProjectType2.HTML="HTML",ProjectType2.QWIK="QWIK",ProjectType2.PREACT="PREACT",ProjectType2.SVELTE="SVELTE",ProjectType2.SVELTEKIT="SVELTEKIT",ProjectType2.SERVER="SERVER",ProjectType2.NX="NX",ProjectType2.SOLID="SOLID",ProjectType2))(ProjectType||{});var notInstallableProjectTypes=["UNDETECTED","UNSUPPORTED"],installableProjectTypes=Object.values(ProjectType).filter(type=>!notInstallableProjectTypes.includes(type)).map(type=>type.toLowerCase());var logger=console;var commandLog=message=>(process.stdout.write(import_chalk.default.cyan(" \u2022 ")+message),(errorMessage,errorInfo)=>{if(errorMessage){if(process.stdout.write(`. ${import_chalk.default.red("\u2716")}
1
+ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{JsPackageManager:()=>JsPackageManager,JsPackageManagerFactory:()=>JsPackageManagerFactory,createLogStream:()=>createLogStream,getEnvConfig:()=>getEnvConfig,getPackageDetails:()=>getPackageDetails,getStorybookVersion:()=>getStorybookVersion,parseList:()=>parseList,useNpmWarning:()=>useNpmWarning,versions:()=>versions_default});module.exports=__toCommonJS(src_exports);var versions_default={"@storybook/addon-a11y":"7.1.0-alpha.39","@storybook/addon-actions":"7.1.0-alpha.39","@storybook/addon-backgrounds":"7.1.0-alpha.39","@storybook/addon-controls":"7.1.0-alpha.39","@storybook/addon-docs":"7.1.0-alpha.39","@storybook/addon-essentials":"7.1.0-alpha.39","@storybook/addon-highlight":"7.1.0-alpha.39","@storybook/addon-interactions":"7.1.0-alpha.39","@storybook/addon-jest":"7.1.0-alpha.39","@storybook/addon-links":"7.1.0-alpha.39","@storybook/addon-mdx-gfm":"7.1.0-alpha.39","@storybook/addon-measure":"7.1.0-alpha.39","@storybook/addon-outline":"7.1.0-alpha.39","@storybook/addon-storyshots":"7.1.0-alpha.39","@storybook/addon-storyshots-puppeteer":"7.1.0-alpha.39","@storybook/addon-storysource":"7.1.0-alpha.39","@storybook/addon-toolbars":"7.1.0-alpha.39","@storybook/addon-viewport":"7.1.0-alpha.39","@storybook/addons":"7.1.0-alpha.39","@storybook/angular":"7.1.0-alpha.39","@storybook/api":"7.1.0-alpha.39","@storybook/blocks":"7.1.0-alpha.39","@storybook/builder-manager":"7.1.0-alpha.39","@storybook/builder-vite":"7.1.0-alpha.39","@storybook/builder-webpack5":"7.1.0-alpha.39","@storybook/channel-postmessage":"7.1.0-alpha.39","@storybook/channel-websocket":"7.1.0-alpha.39","@storybook/channels":"7.1.0-alpha.39","@storybook/cli":"7.1.0-alpha.39","@storybook/client-api":"7.1.0-alpha.39","@storybook/client-logger":"7.1.0-alpha.39","@storybook/codemod":"7.1.0-alpha.39","@storybook/components":"7.1.0-alpha.39","@storybook/core-client":"7.1.0-alpha.39","@storybook/core-common":"7.1.0-alpha.39","@storybook/core-events":"7.1.0-alpha.39","@storybook/core-server":"7.1.0-alpha.39","@storybook/core-webpack":"7.1.0-alpha.39","@storybook/csf-plugin":"7.1.0-alpha.39","@storybook/csf-tools":"7.1.0-alpha.39","@storybook/docs-tools":"7.1.0-alpha.39","@storybook/ember":"7.1.0-alpha.39","@storybook/html":"7.1.0-alpha.39","@storybook/html-vite":"7.1.0-alpha.39","@storybook/html-webpack5":"7.1.0-alpha.39","@storybook/instrumenter":"7.1.0-alpha.39","@storybook/manager":"7.1.0-alpha.39","@storybook/manager-api":"7.1.0-alpha.39","@storybook/nextjs":"7.1.0-alpha.39","@storybook/node-logger":"7.1.0-alpha.39","@storybook/postinstall":"7.1.0-alpha.39","@storybook/preact":"7.1.0-alpha.39","@storybook/preact-vite":"7.1.0-alpha.39","@storybook/preact-webpack5":"7.1.0-alpha.39","@storybook/preset-create-react-app":"7.1.0-alpha.39","@storybook/preset-html-webpack":"7.1.0-alpha.39","@storybook/preset-preact-webpack":"7.1.0-alpha.39","@storybook/preset-react-webpack":"7.1.0-alpha.39","@storybook/preset-server-webpack":"7.1.0-alpha.39","@storybook/preset-svelte-webpack":"7.1.0-alpha.39","@storybook/preset-vue-webpack":"7.1.0-alpha.39","@storybook/preset-vue3-webpack":"7.1.0-alpha.39","@storybook/preset-web-components-webpack":"7.1.0-alpha.39","@storybook/preview":"7.1.0-alpha.39","@storybook/preview-api":"7.1.0-alpha.39","@storybook/preview-web":"7.1.0-alpha.39","@storybook/react":"7.1.0-alpha.39","@storybook/react-dom-shim":"7.1.0-alpha.39","@storybook/react-vite":"7.1.0-alpha.39","@storybook/react-webpack5":"7.1.0-alpha.39","@storybook/router":"7.1.0-alpha.39","@storybook/server":"7.1.0-alpha.39","@storybook/server-webpack5":"7.1.0-alpha.39","@storybook/source-loader":"7.1.0-alpha.39","@storybook/store":"7.1.0-alpha.39","@storybook/svelte":"7.1.0-alpha.39","@storybook/svelte-vite":"7.1.0-alpha.39","@storybook/svelte-webpack5":"7.1.0-alpha.39","@storybook/sveltekit":"7.1.0-alpha.39","@storybook/telemetry":"7.1.0-alpha.39","@storybook/theming":"7.1.0-alpha.39","@storybook/types":"7.1.0-alpha.39","@storybook/vue":"7.1.0-alpha.39","@storybook/vue-vite":"7.1.0-alpha.39","@storybook/vue-webpack5":"7.1.0-alpha.39","@storybook/vue3":"7.1.0-alpha.39","@storybook/vue3-vite":"7.1.0-alpha.39","@storybook/vue3-webpack5":"7.1.0-alpha.39","@storybook/web-components":"7.1.0-alpha.39","@storybook/web-components-vite":"7.1.0-alpha.39","@storybook/web-components-webpack5":"7.1.0-alpha.39",sb:"7.1.0-alpha.39",storybook:"7.1.0-alpha.39"};var import_util_deprecate=__toESM(require("util-deprecate")),useNpmWarning=(0,import_util_deprecate.default)(()=>{},"`--use-npm` is deprecated and will be removed in Storybook 8.0. \nPlease use the `--package-manager=npm` option instead.\nRead more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated");var import_node_path=__toESM(require("path")),import_cross_spawn=require("cross-spawn"),import_find_up6=require("find-up");var import_sort=__toESM(require("semver/functions/sort")),import_os=require("os"),import_ts_dedent2=__toESM(require("ts-dedent")),import_find_up2=require("find-up"),import_fs2=require("fs"),import_path3=__toESM(require("path")),import_semver4=__toESM(require("semver"));var import_chalk2=__toESM(require("chalk")),import_semver3=require("semver"),import_execa=require("execa"),import_path=__toESM(require("path")),import_fs=__toESM(require("fs")),import_ts_dedent=__toESM(require("ts-dedent")),import_fs_extra2=require("fs-extra");var import_chalk=__toESM(require("chalk"));var import_fs_extra=__toESM(require("fs-extra"));var import_semver2=require("semver"),import_strip_json_comments=__toESM(require("strip-json-comments")),import_find_up=require("find-up");var import_get_tarball=__toESM(require("@ndelangen/get-tarball")),import_get_npm_tarball_url=__toESM(require("get-npm-tarball-url")),tempy=__toESM(require("tempy"));var import_semver=require("semver");var ProjectType=(ProjectType2=>(ProjectType2.UNDETECTED="UNDETECTED",ProjectType2.UNSUPPORTED="UNSUPPORTED",ProjectType2.REACT_SCRIPTS="REACT_SCRIPTS",ProjectType2.REACT="REACT",ProjectType2.REACT_NATIVE="REACT_NATIVE",ProjectType2.REACT_PROJECT="REACT_PROJECT",ProjectType2.WEBPACK_REACT="WEBPACK_REACT",ProjectType2.NEXTJS="NEXTJS",ProjectType2.VUE="VUE",ProjectType2.VUE3="VUE3",ProjectType2.SFC_VUE="SFC_VUE",ProjectType2.ANGULAR="ANGULAR",ProjectType2.EMBER="EMBER",ProjectType2.WEB_COMPONENTS="WEB_COMPONENTS",ProjectType2.HTML="HTML",ProjectType2.QWIK="QWIK",ProjectType2.PREACT="PREACT",ProjectType2.SVELTE="SVELTE",ProjectType2.SVELTEKIT="SVELTEKIT",ProjectType2.SERVER="SERVER",ProjectType2.NX="NX",ProjectType2.SOLID="SOLID",ProjectType2))(ProjectType||{});var notInstallableProjectTypes=["UNDETECTED","UNSUPPORTED"],installableProjectTypes=Object.values(ProjectType).filter(type=>!notInstallableProjectTypes.includes(type)).map(type=>type.toLowerCase());var logger=console;var commandLog=message=>(process.stdout.write(import_chalk.default.cyan(" \u2022 ")+message),(errorMessage,errorInfo)=>{if(errorMessage){if(process.stdout.write(`. ${import_chalk.default.red("\u2716")}
2
2
  `),logger.error(`
3
3
  ${import_chalk.default.red(errorMessage)}`),!errorInfo)return;let newErrorInfo=errorInfo.split(`
4
4
  `).map(line=>` ${import_chalk.default.dim(line)}`).join(`
5
5
  `);logger.error(`${newErrorInfo}
6
6
  `);return}process.stdout.write(`. ${import_chalk.default.green("\u2713")}
7
- `)});var HandledError=class extends Error{constructor(messageOrError){super(typeof messageOrError=="string"?messageOrError:messageOrError.message);this.handled=!0;typeof messageOrError!="string"&&(this.cause=messageOrError)}};var logger2=console;function getPackageDetails(pkg){let idx=pkg.lastIndexOf("@");if(idx<=0)return[pkg,void 0];let packageName=pkg.slice(0,idx),packageVersion=pkg.slice(idx+1);return[packageName,packageVersion]}var JsPackageManager=class{async setRegistryURL(url){url?await this.executeCommand({command:"npm",args:["config","set","registry",url]}):await this.executeCommand({command:"npm",args:["config","delete","registry"]})}async getRegistryURL(){let url=(await this.executeCommand({command:"npm",args:["config","get","registry"]})).trim();return url==="undefined"?void 0:url}constructor(options){this.cwd=(options==null?void 0:options.cwd)||process.cwd()}async installDependencies(){let done=commandLog("Preparing to install dependencies");done(),logger2.log(),logger2.log(),done=commandLog("Installing dependencies");try{await this.runInstall()}catch(e){throw done("An error occurred while installing dependencies."),new HandledError(e)}done()}packageJsonPath(){return import_path.default.resolve(this.cwd,"package.json")}async readPackageJson(){let packageJsonPath=this.packageJsonPath();if(!import_fs.default.existsSync(packageJsonPath))throw new Error(`Could not read package.json file at ${packageJsonPath}`);let jsonContent=await(0,import_fs_extra2.readFile)(packageJsonPath,"utf8");return JSON.parse(jsonContent)}async writePackageJson(packageJson){let packageJsonToWrite={...packageJson};packageJsonToWrite.dependencies&&Object.keys(packageJsonToWrite.dependencies).length===0&&delete packageJsonToWrite.dependencies,packageJsonToWrite.devDependencies&&Object.keys(packageJsonToWrite.devDependencies).length===0&&delete packageJsonToWrite.devDependencies,packageJsonToWrite.peerDependencies&&Object.keys(packageJsonToWrite.peerDependencies).length===0&&delete packageJsonToWrite.peerDependencies;let content=`${JSON.stringify(packageJsonToWrite,null,2)}
7
+ `)});var HandledError=class extends Error{constructor(messageOrError){super(typeof messageOrError=="string"?messageOrError:messageOrError.message);this.handled=!0;typeof messageOrError!="string"&&(this.cause=messageOrError)}};var logger2=console;function getPackageDetails(pkg){let idx=pkg.lastIndexOf("@");if(idx<=0)return[pkg,void 0];let packageName=pkg.slice(0,idx),packageVersion=pkg.slice(idx+1);return[packageName,packageVersion]}var JsPackageManager=class{async setRegistryURL(url){url?await this.executeCommand({command:"npm",args:["config","set","registry",url]}):await this.executeCommand({command:"npm",args:["config","delete","registry"]})}async getRegistryURL(){let url=(await this.executeCommand({command:"npm",args:["config","get","registry"]})).trim();return url==="undefined"?void 0:url}constructor(options){this.cwd=(options==null?void 0:options.cwd)||process.cwd()}async installDependencies(){let done=commandLog("Preparing to install dependencies");done(),logger2.log(),logger2.log(),done=commandLog("Installing dependencies");try{await this.runInstall(),done()}catch(e){throw done("An error occurred while installing dependencies."),new HandledError(e)}}packageJsonPath(){return import_path.default.resolve(this.cwd,"package.json")}async readPackageJson(){let packageJsonPath=this.packageJsonPath();if(!import_fs.default.existsSync(packageJsonPath))throw new Error(`Could not read package.json file at ${packageJsonPath}`);let jsonContent=await(0,import_fs_extra2.readFile)(packageJsonPath,"utf8");return JSON.parse(jsonContent)}async writePackageJson(packageJson){let packageJsonToWrite={...packageJson};packageJsonToWrite.dependencies&&Object.keys(packageJsonToWrite.dependencies).length===0&&delete packageJsonToWrite.dependencies,packageJsonToWrite.devDependencies&&Object.keys(packageJsonToWrite.devDependencies).length===0&&delete packageJsonToWrite.devDependencies,packageJsonToWrite.peerDependencies&&Object.keys(packageJsonToWrite.peerDependencies).length===0&&delete packageJsonToWrite.peerDependencies;let content=`${JSON.stringify(packageJsonToWrite,null,2)}
8
8
  `;await(0,import_fs_extra2.writeFile)(this.packageJsonPath(),content,"utf8")}async retrievePackageJson(){let packageJson;try{packageJson=await this.readPackageJson()}catch(err){if(err.message.includes("Could not read package.json"))await this.initPackageJson(),packageJson=await this.readPackageJson();else throw new Error(import_ts_dedent.default`
9
9
  There was an error while reading the package.json file at ${this.packageJsonPath()}: ${err.message}
10
10
  Please fix the error and try again.
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { JsPackageManager, JsPackageManagerFactory, createLogStream, getEnvConfig, getPackageDetails, getStorybookVersion, parseList, useNpmWarning, versions_default as versions } from './chunk-YSWCHNXH.mjs';
1
+ export { JsPackageManager, JsPackageManagerFactory, createLogStream, getEnvConfig, getPackageDetails, getStorybookVersion, parseList, useNpmWarning, versions_default as versions } from './chunk-3VTA45ED.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/cli",
3
- "version": "7.1.0-alpha.37",
3
+ "version": "7.1.0-alpha.39",
4
4
  "description": "Storybook's CLI - easiest method of adding storybook to your projects",
5
5
  "keywords": [
6
6
  "cli",
@@ -57,13 +57,13 @@
57
57
  "@babel/core": "^7.22.0",
58
58
  "@babel/preset-env": "^7.22.0",
59
59
  "@ndelangen/get-tarball": "^3.0.7",
60
- "@storybook/codemod": "7.1.0-alpha.37",
61
- "@storybook/core-common": "7.1.0-alpha.37",
62
- "@storybook/core-server": "7.1.0-alpha.37",
63
- "@storybook/csf-tools": "7.1.0-alpha.37",
64
- "@storybook/node-logger": "7.1.0-alpha.37",
65
- "@storybook/telemetry": "7.1.0-alpha.37",
66
- "@storybook/types": "7.1.0-alpha.37",
60
+ "@storybook/codemod": "7.1.0-alpha.39",
61
+ "@storybook/core-common": "7.1.0-alpha.39",
62
+ "@storybook/core-server": "7.1.0-alpha.39",
63
+ "@storybook/csf-tools": "7.1.0-alpha.39",
64
+ "@storybook/node-logger": "7.1.0-alpha.39",
65
+ "@storybook/telemetry": "7.1.0-alpha.39",
66
+ "@storybook/types": "7.1.0-alpha.39",
67
67
  "@types/semver": "^7.3.4",
68
68
  "@yarnpkg/fslib": "^2.10.3",
69
69
  "@yarnpkg/libzip": "^2.3.0",
@@ -95,7 +95,7 @@
95
95
  "util-deprecate": "^1.0.2"
96
96
  },
97
97
  "devDependencies": {
98
- "@storybook/client-api": "7.1.0-alpha.37",
98
+ "@storybook/client-api": "7.1.0-alpha.39",
99
99
  "@types/cross-spawn": "^6.0.2",
100
100
  "@types/prompts": "^2.0.9",
101
101
  "@types/puppeteer-core": "^2.1.0",
@@ -0,0 +1,286 @@
1
+ import { Meta } from "@storybook/blocks";
2
+
3
+ import Accessibility from "./assets/accessibility.svg";
4
+ import Checkmark from "./assets/checkmark.svg";
5
+ import Document from "./assets/document.svg";
6
+ import Typography from "./assets/typography.svg";
7
+ import Github from "./assets/github.svg";
8
+ import Discord from "./assets/discord.svg";
9
+ import Youtube from "./assets/youtube.svg";
10
+ import Chromatic from "./assets/chromatic.svg";
11
+ import Figma from "./assets/figma.svg";
12
+ import Tutorials from "./assets/tutorials.svg";
13
+ import Styling from "./assets/styling.jpg";
14
+ import Context from "./assets/context.jpg";
15
+ import Assets from "./assets/assets.jpg";
16
+
17
+ <Meta title="Configure your project" />
18
+
19
+ # Configure your project
20
+
21
+ Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
22
+
23
+ <div className="sb-section">
24
+ <div className="sb-section-item">
25
+ <img
26
+ src={Styling}
27
+ alt="A wall of logos representing different styling technologies"
28
+ />
29
+ <div className="sb-block">
30
+ <h3>Add styling and CSS</h3>
31
+ <p>Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
32
+ <a
33
+ href="https://storybook.js.org/docs/{{renderer}}/configure/styling-and-css"
34
+ target="_blank"
35
+ >
36
+ Read more on how to set up styling
37
+ <span className="sb-chevron">&#8250;</span>
38
+ </a>
39
+ </div>
40
+ </div>
41
+ <div className="sb-section-item">
42
+ <img
43
+ src={Context}
44
+ alt="An abstraction representing the composition of data for a component"
45
+ />
46
+ <div className="sb-block">
47
+ <h3>Provide context and mocking</h3>
48
+ <p>Often when a story doesn't render, it's because your component is
49
+ expecting a specific environment or context (like a theme provider) to be available.
50
+ Learn more about solving these issues by providing context and mocking to Storybook.</p>
51
+ <a
52
+ href="https://storybook.js.org/docs/{{renderer}}/writing-stories/decorators#context-for-mocking"
53
+ target="_blank"
54
+ >Read more on how to set up context <span className="sb-chevron">&#8250;</span></a>
55
+ </div>
56
+ </div>
57
+ <div className="sb-section-item">
58
+ <img src={Assets} alt="A representation of typography and image assets" />
59
+ <div className="sb-block">
60
+ <h3>Load assets and resources</h3>
61
+ <p>To link static files (like fonts) to your projects and stories, use the `staticDirs` configuration option to specify folders to load when starting Storybook.</p>
62
+ <a
63
+ href="https://storybook.js.org/docs/{{renderer}}/configure/images-and-assets"
64
+ target="_blank"
65
+ >Read more on how to load assets <span className="sb-chevron">&#8250;</span></a>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ # Do more with Storybook
71
+
72
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
73
+
74
+ <br />
75
+
76
+ <div className="sb-section">
77
+ <div className="sb-features-grid-container">
78
+ <div className="sb-grid-item">
79
+ <img src={Document} alt="Document" />
80
+ <h3>Autodocs</h3>
81
+ <p>Auto-generate living, interactive reference documentation from your components and stories.</p>
82
+ <a
83
+ href="https://storybook.js.org/docs/{{renderer}}/writing-docs/autodocs"
84
+ target="_blank"
85
+ >Learn more <span className="sb-chevron">&#8250;</span></a>
86
+ </div>
87
+ <div className="sb-grid-item">
88
+ <img src={Checkmark} alt="Checkmark" />
89
+ <h3>Testing</h3>
90
+ <p>Use stories to test a component in all its variations, no matter how complex.</p>
91
+ <a
92
+ href="https://storybook.js.org/docs/{{renderer}}/writing-tests/introduction"
93
+ target="_blank"
94
+ >Learn more <span className="sb-chevron">&#8250;</span></a>
95
+ </div>
96
+ <div className="sb-grid-item">
97
+ <img src={Chromatic} alt="Chromatic" />
98
+ <h3>Publish to Chromatic</h3>
99
+ <p>Publish your Storybook to review and collaborate with your entire team.</p>
100
+ <a
101
+ href="https://storybook.js.org/docs/{{renderer}}/sharing/publish-storybook#publish-storybook-with-chromatic"
102
+ target="_blank"
103
+ >Learn more <span className="sb-chevron">&#8250;</span></a>
104
+ </div>
105
+ <div className="sb-grid-item">
106
+ <img src={Figma} alt="Figma" />
107
+ <h3>Figma Plugin</h3>
108
+ <p>Embed your stories into Figma to cross-reference the design and live implementation in one place.</p>
109
+ <a
110
+ href="https://storybook.js.org/docs/{{renderer}}/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
111
+ target="_blank"
112
+ >Learn more <span className="sb-chevron">&#8250;</span></a>
113
+ </div>
114
+ <div className="sb-grid-item">
115
+ <img src={Accessibility} alt="Accessibility" />
116
+ <h3>Accessibility</h3>
117
+ <p>Automatically test your components for a11y issues as you develop.</p>
118
+ <a
119
+ href="https://storybook.js.org/docs/{{renderer}}/writing-tests/accessibility-testing"
120
+ target="_blank"
121
+ >Learn more <span className="sb-chevron">&#8250;</span></a>
122
+ </div>
123
+ <div className="sb-grid-item">
124
+ <img src={Typography} alt="Typography" />
125
+ <h3>Theming</h3>
126
+ <p>Theme Storybook's UI to personalize it to your project.</p>
127
+ <a
128
+ href="https://storybook.js.org/docs/{{renderer}}/configure/theming"
129
+ target="_blank"
130
+ >Learn more <span className="sb-chevron">&#8250;</span></a>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ # Explore and Connect
136
+
137
+ Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
138
+
139
+ <br />
140
+
141
+ <div className="sb-section">
142
+ <div className="sb-card-grid-container">
143
+ <a
144
+ className="sb-explore-card"
145
+ href="https://discord.gg/storybook"
146
+ target="_blank"
147
+ >
148
+ <img src={Discord} alt="Discord" />
149
+ <span>Discord</span>
150
+ </a>
151
+ <a
152
+ className="sb-explore-card"
153
+ href="https://github.com/storybookjs/storybook"
154
+ target="_blank"
155
+ >
156
+ <img src={Github} alt="Github" />
157
+ <span>Github</span>
158
+ </a>
159
+ <a
160
+ className="sb-explore-card"
161
+ href="https://www.youtube.com/@chromaticui"
162
+ target="_blank"
163
+ >
164
+ <img src={Youtube} alt="Youtube" />
165
+ <span>Youtube</span>
166
+ </a>
167
+ <a
168
+ className="sb-explore-card"
169
+ href="https://storybook.js.org/tutorials/"
170
+ target="_blank"
171
+ >
172
+ <img src={Tutorials} alt="Tutorials" />
173
+ <span>Tutorials</span>
174
+ </a>
175
+ </div>
176
+ </div>
177
+
178
+ <style>
179
+ {`
180
+ .sb-section {
181
+ width: 100%;
182
+ margin-bottom: 64px;
183
+ }
184
+
185
+ .sb-section img {
186
+ border-radius: 10px;
187
+ max-height: 170px;
188
+ }
189
+
190
+ .sb-section-item {
191
+ width: 100%;
192
+ margin-bottom: 20px;
193
+ width: 100%;
194
+ display: flex;
195
+ gap: 18px;
196
+ align-items: center;
197
+ }
198
+
199
+ .sb-section-item a,
200
+ .sb-grid-item a {
201
+ font-size: 13px;
202
+ transition: transform 150ms ease-out,color 150ms ease-out;
203
+ }
204
+
205
+ .sb-section-item img {
206
+ width: 297px;
207
+ }
208
+
209
+ .sb-section-item a > p,
210
+ .sb-grid-item a > p {
211
+ all: unset;
212
+ }
213
+
214
+ .sb-block {
215
+ flex: 1;
216
+ margin-left: 10px;
217
+ }
218
+
219
+ .sb-chevron {
220
+ margin-left: 5px;
221
+ }
222
+
223
+ .sb-features-grid-container {
224
+ display: grid;
225
+ grid-template-columns: repeat(3, 1fr);
226
+ grid-gap: 40px 20px;
227
+ }
228
+
229
+ .sb-grid-item img {
230
+ max-height: 48px;
231
+ margin-bottom: 12px;
232
+ }
233
+
234
+ .sb-card-grid-container {
235
+ display: grid;
236
+ grid-template-columns: repeat(4, 1fr);
237
+ grid-gap: 20px;
238
+ }
239
+
240
+ .sb-explore-card {
241
+ border-radius: 8px;
242
+ border: 2px solid #00000010;
243
+ padding: 20px;
244
+ display: grid;
245
+ justify-content: center;
246
+ font-weight: 700;
247
+ transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
248
+ color: #333333;
249
+ gap: 8px;
250
+ }
251
+
252
+ .sb-explore-card:hover {
253
+ border-color: #1EA7FD50;
254
+ transform: translate3d(0, -3px, 0);
255
+ box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
256
+ }
257
+
258
+ .sb-explore-card:active {
259
+ border-color: #1EA7FD;
260
+ transform: translate3d(0, 0, 0);
261
+ }
262
+
263
+ .sb-card-background {
264
+ width: 100%;
265
+ height: 150px;
266
+ background-color: #ccc;
267
+ }
268
+
269
+ @media screen and (max-width: 600px) {
270
+ .sb-section-item {
271
+ flex-direction: column;
272
+ align-items: flex-start;
273
+ }
274
+ .sb-block {
275
+ margin-left: 0;
276
+ margin-top: 10px;
277
+ }
278
+ .sb-features-grid-container {
279
+ grid-template-columns: repeat(1, 1fr);
280
+ }
281
+ .sb-card-grid-container {
282
+ grid-template-columns: repeat(2, 1fr);
283
+ }
284
+ }
285
+ `}
286
+ </style>
@@ -0,0 +1,5 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <title>Accessibility</title>
3
+ <circle cx="24.334" cy="24" r="24" fill="#A849FF" fill-opacity="0.3"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M27.8609 11.585C27.8609 9.59506 26.2497 7.99023 24.2519 7.99023C22.254 7.99023 20.6429 9.65925 20.6429 11.585C20.6429 13.575 22.254 15.1799 24.2519 15.1799C26.2497 15.1799 27.8609 13.575 27.8609 11.585ZM21.8922 22.6473C21.8467 23.9096 21.7901 25.4788 21.5897 26.2771C20.9853 29.0462 17.7348 36.3314 17.3325 37.2275C17.1891 37.4923 17.1077 37.7955 17.1077 38.1178C17.1077 39.1519 17.946 39.9902 18.9802 39.9902C19.6587 39.9902 20.253 39.6293 20.5814 39.0889L20.6429 38.9874L24.2841 31.22C24.2841 31.22 27.5529 37.9214 27.9238 38.6591C28.2948 39.3967 28.8709 39.9902 29.7168 39.9902C30.751 39.9902 31.5893 39.1519 31.5893 38.1178C31.5893 37.7951 31.3639 37.2265 31.3639 37.2265C30.9581 36.3258 27.698 29.0452 27.0938 26.2771C26.8975 25.4948 26.847 23.9722 26.8056 22.7236C26.7927 22.333 26.7806 21.9693 26.7653 21.6634C26.7008 21.214 27.0231 20.8289 27.4097 20.7005L35.3366 18.3253C36.3033 18.0685 36.8834 16.9773 36.6256 16.0144C36.3678 15.0515 35.2722 14.4737 34.3055 14.7305C34.3055 14.7305 26.8619 17.1057 24.2841 17.1057C21.7062 17.1057 14.456 14.7947 14.456 14.7947C13.4893 14.5379 12.3937 14.9873 12.0715 15.9502C11.7493 16.9131 12.3293 18.0044 13.3604 18.3253L21.2873 20.7005C21.674 20.8289 21.9318 21.214 21.9318 21.6634C21.9174 21.9493 21.9053 22.2857 21.8922 22.6473Z" fill="#A470D5"/>
5
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <title>Checkmark</title>
3
+ <circle cx="24.334" cy="24" r="24" fill="#96D07C"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M35.2311 14.7965L20.7422 30.1005L13.4388 22.0383C12.9295 21.4762 12.1039 21.4763 11.5948 22.0383C11.0856 22.6004 11.0856 23.5117 11.5948 24.0737L19.795 33.1258C20.0739 33.4365 20.4081 33.5769 20.7422 33.5765C21.0763 33.5769 21.4104 33.4365 21.6653 33.1551C21.6734 33.1462 37.075 16.8318 37.075 16.8318C37.5842 16.2698 37.5842 15.3586 37.075 14.7965C36.5658 14.2345 35.7402 14.2345 35.2311 14.7965Z" fill="white"/>
5
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <title>Chromatic logo</title>
3
+ <circle cx="24.666" cy="24" r="24" fill="#FC521F"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M30.3052 35.0414L26.4916 32.8411L37.9648 26.2231C38.4044 25.969 38.8187 25.6783 39.2046 25.3534C40.6958 27.4768 40.8424 30.2735 39.5129 32.5754C38.3117 34.6532 36.0709 35.944 33.6677 35.944C32.4918 35.944 31.3299 35.6318 30.3052 35.0414ZM29.3864 36.6299C29.8265 36.8843 30.2853 37.0979 30.7603 37.2696C29.6654 39.6213 27.3154 41.1454 24.6535 41.1454C20.938 41.1454 17.9135 38.124 17.9135 34.4111V21.1743L23.7348 24.5333V32.8398C23.7348 33.1676 23.9102 33.4708 24.1939 33.6347L29.3864 36.6299ZM15.6578 35.9409C13.254 35.9409 11.0169 34.6513 9.81521 32.5743C8.91631 31.0166 8.6759 29.2022 9.14278 27.4638C9.60936 25.7254 10.7231 24.2731 12.2831 23.374L16.0956 21.1743L16.0962 34.4082C16.0962 34.9159 16.1398 35.4195 16.2283 35.9177C16.0384 35.9336 15.8477 35.9409 15.6578 35.9409ZM30.4946 19.5853L24.6755 22.9426L17.4756 18.7898C17.3339 18.7083 17.1754 18.6668 17.0157 18.6668C16.858 18.6668 16.6995 18.7083 16.5569 18.7898L11.3653 21.785C10.9255 22.0377 10.51 22.3279 10.1241 22.6542C8.63348 20.5311 8.48802 17.7347 9.81605 15.432C11.0178 13.3544 13.2563 12.0625 15.6609 12.0625C16.8354 12.0625 17.9979 12.3758 19.0234 12.9665L30.4946 19.5853ZM24.6537 6.85938C28.371 6.85938 31.3934 9.8807 31.3934 13.5951V17.9951L19.9237 11.3783C19.4836 11.1233 19.0245 10.9092 18.5481 10.7368C19.643 8.38425 21.9936 6.85938 24.6537 6.85938ZM39.5151 15.4341C41.3721 18.6504 40.2659 22.7774 37.0469 24.6336L25.5757 31.2518V24.5361L32.7748 20.3827C33.0593 20.2188 33.2347 19.9156 33.2347 19.5875V13.5971C33.2353 13.0911 33.1894 12.5869 33.1026 12.0905C33.291 12.0739 33.4809 12.0661 33.6714 12.0661C36.0754 12.0661 38.3145 13.3569 39.5151 15.4341Z" fill="white"/>
5
+ </svg>
@@ -0,0 +1,12 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 62 48">
2
+ <title>Discord logo</title>
3
+ <g clip-path="url(#a)">
4
+ <mask id="b" width="62" height="48" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
5
+ <path fill="#fff" d="M62.75.5h-62v48h62V.5Z"/>
6
+ </mask>
7
+ <g mask="url(#b)">
8
+ <path fill="#5865F2" d="M53.236 4.774A51.148 51.148 0 0 0 40.616.863a.192.192 0 0 0-.203.095 35.573 35.573 0 0 0-1.571 3.226 47.228 47.228 0 0 0-14.175 0A32.64 32.64 0 0 0 23.071.958a.2.2 0 0 0-.202-.095 51.008 51.008 0 0 0-12.62 3.911.18.18 0 0 0-.083.072C2.128 16.847-.074 28.553 1.006 40.114c.005.057.037.111.08.145 5.304 3.893 10.44 6.255 15.482 7.822a.2.2 0 0 0 .218-.072 36.71 36.71 0 0 0 3.167-5.148.196.196 0 0 0-.107-.273 33.857 33.857 0 0 1-4.837-2.304.199.199 0 0 1-.02-.33c.326-.243.65-.496.961-.752a.192.192 0 0 1 .2-.027c10.147 4.63 21.132 4.63 31.16 0a.191.191 0 0 1 .202.025c.31.255.636.511.963.755a.199.199 0 0 1-.017.329 31.782 31.782 0 0 1-4.839 2.301.198.198 0 0 0-.105.276 41.23 41.23 0 0 0 3.165 5.146.197.197 0 0 0 .217.074c5.066-1.567 10.203-3.93 15.506-7.822a.2.2 0 0 0 .081-.142c1.293-13.366-2.165-24.976-9.167-35.269a.157.157 0 0 0-.08-.074Zm-31.768 28.3c-3.055 0-5.572-2.802-5.572-6.244 0-3.443 2.469-6.246 5.572-6.246 3.128 0 5.621 2.828 5.572 6.246 0 3.442-2.468 6.245-5.572 6.245Zm20.602 0c-3.055 0-5.572-2.802-5.572-6.244 0-3.443 2.468-6.246 5.572-6.246 3.128 0 5.62 2.828 5.572 6.246 0 3.442-2.444 6.245-5.572 6.245Z"/>
9
+ </g>
10
+ </g>
11
+ <defs><clipPath id="a"><path fill="#fff" d="M.75.5h62v48h-62z"/></clipPath></defs>
12
+ </svg>
@@ -0,0 +1,11 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <title>Document</title>
3
+ <path d="M7 0C4.79083 0 3 1.79083 3 4V44C3 46.2092 4.79083 48 7 48H41C43.2092 48 45 46.2092 45 44V9L36 0H7Z" fill="#FFE8B6"/>
4
+ <rect x="9" y="17" width="9" height="5" rx="2" fill="#FEBD32"/>
5
+ <rect x="20" y="17" width="19" height="5" rx="2" fill="#FEBD32"/>
6
+ <rect x="9" y="26" width="9" height="5" rx="2" fill="#FEBD32"/>
7
+ <rect x="20" y="26" width="19" height="5" rx="2" fill="#FEBD32"/>
8
+ <rect x="9" y="35" width="9" height="5" rx="2" fill="#FEBD32"/>
9
+ <rect x="20" y="35" width="19" height="5" rx="2" fill="#FEBD32"/>
10
+ <path d="M36 0V5C36 7.20914 37.7909 9 40 9H45L36 0Z" fill="#FEBD32"/>
11
+ </svg>
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 48">
2
+ <title>Figma logo</title>
3
+ <g clip-path="url(#a)">
4
+ <path fill="#1ABCFE" d="M16 24a7.919 7.919 0 1 1 15.837 0A7.919 7.919 0 0 1 16 24Z"/>
5
+ <path fill="#0ACF83" d="M.162 39.837a7.919 7.919 0 0 1 7.919-7.919h7.918v7.919a7.918 7.918 0 1 1-15.837 0Z"/>
6
+ <path fill="#FF7262" d="M16 .244v15.837h7.919a7.918 7.918 0 1 0 0-15.837H16Z"/>
7
+ <path fill="#F24E1E" d="M.162 8.163a7.918 7.918 0 0 0 7.919 7.918h7.918V.244H8.081A7.919 7.919 0 0 0 .162 8.163Z"/>
8
+ <path fill="#A259FF" d="M.162 24a7.918 7.918 0 0 0 7.919 7.92h7.918V16.081H8.081a7.919 7.919 0 0 0-7.919 7.919Z"/>
9
+ </g>
10
+ <defs><clipPath id="a"><path fill="#fff" d="M0 0h32v48H0z"/></clipPath></defs>
11
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="62" height="48" viewBox="0 0 62 48">
2
+ <title>Github logo</title>
3
+ <path fill="#161614" d="M30.82.5C17.251.5 6.25 11.517 6.25 25.108c0 10.872 7.04 20.097 16.802 23.35 1.228.228 1.679-.533 1.679-1.183 0-.587-.023-2.526-.034-4.582-6.835 1.489-8.277-2.903-8.277-2.903-1.118-2.845-2.728-3.601-2.728-3.601-2.23-1.527.168-1.496.168-1.496 2.467.174 3.766 2.536 3.766 2.536 2.191 3.762 5.748 2.674 7.15 2.046.22-1.59.857-2.676 1.56-3.29-5.457-.623-11.194-2.733-11.194-12.162 0-2.687.96-4.882 2.531-6.605-.255-.62-1.096-3.123.238-6.513 0 0 2.063-.661 6.759 2.523 1.96-.546 4.061-.819 6.15-.828 2.087.01 4.19.282 6.154.828 4.69-3.184 6.75-2.523 6.75-2.523 1.337 3.39.496 5.893.24 6.513 1.576 1.723 2.53 3.918 2.53 6.605 0 9.451-5.748 11.532-11.22 12.142.882.763 1.667 2.26 1.667 4.557 0 3.292-.028 5.942-.028 6.753 0 .654.442 1.422 1.687 1.18 9.757-3.257 16.788-12.478 16.788-23.347C55.388 11.518 44.388.5 30.82.5ZM15.451 35.555c-.054.122-.246.159-.421.075-.178-.08-.278-.247-.22-.37.052-.126.245-.161.422-.077.18.08.28.249.219.372Zm1.208 1.08c-.117.108-.346.058-.501-.114-.16-.172-.191-.401-.072-.511.12-.11.343-.058.504.113.16.174.192.402.07.512Zm.83 1.382c-.15.104-.397.006-.55-.213-.15-.219-.15-.481.004-.586.153-.105.395-.01.55.206.15.223.15.485-.004.593Zm1.402 1.6c-.135.149-.422.109-.632-.094-.215-.199-.274-.48-.14-.629.137-.15.426-.107.637.094.213.198.278.482.135.629Zm1.812.54c-.06.193-.336.28-.614.199-.278-.085-.46-.31-.404-.505.058-.194.336-.285.616-.198.277.084.46.308.402.504Zm2.062.23c.007.202-.229.37-.52.374-.295.007-.532-.157-.535-.357 0-.205.23-.372.524-.377.292-.005.531.158.531.36Zm2.026-.078c.035.198-.168.401-.458.455-.285.052-.549-.07-.585-.266-.036-.203.171-.407.456-.46.29-.05.55.07.587.27Z"/>
4
+ </svg>
@@ -0,0 +1,8 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="62" height="48" viewBox="0 0 62 48">
2
+ <title>Tutorials</title>
3
+ <path fill="#37D5D3" fill-rule="evenodd" d="M31.723 45.959H31.359a21.372 21.372 0 0 1-13.746-5.137v4.855a.282.282 0 0 1-.282.282H17a.282.282 0 0 1-.282-.282v-5.644h-6.35a.282.282 0 0 1-.283-.282v-.33c0-.156.126-.282.282-.282h5.486a21.382 21.382 0 0 1-5.768-14.474V24.315a21.373 21.373 0 0 1 5.12-13.726h-4.838a.282.282 0 0 1-.282-.282v-.33c0-.156.126-.282.282-.282h5.643c.23-.242.467-.478.708-.709V3.323c0-.156.127-.282.282-.282h.33c.156 0 .282.126.282.282v4.855A21.373 21.373 0 0 1 31.38 3.04H31.731a21.372 21.372 0 0 1 13.704 5.101V3.323c0-.156.127-.282.283-.282h.33c.155 0 .281.126.281.282v5.623c.256.244.506.493.75.749h5.643c.156 0 .282.126.282.282v.33a.282.282 0 0 1-.282.282h-4.837a21.372 21.372 0 0 1 5.118 13.725l.001.009V24.686a21.383 21.383 0 0 1-5.768 14.453h5.486c.156 0 .282.126.282.282v.33a.282.282 0 0 1-.282.282h-6.37l-.023.02v5.624a.282.282 0 0 1-.282.282h-.33a.282.282 0 0 1-.282-.282v-4.82a21.372 21.372 0 0 1-13.704 5.102h-.008Zm-.624-1.003v-4.923H18.227a20.377 20.377 0 0 0 12.872 4.923Zm-14.38-20.009v13.655a20.389 20.389 0 0 1-5.631-13.655h5.63Zm-5.631-.893h5.63V10.59h-.179a20.386 20.386 0 0 0-5.451 13.464Zm6.525-14.36v-.18a20.386 20.386 0 0 1 13.485-5.471v5.651H17.613Zm14.38-5.651v5.651h13.442v-.219a20.385 20.385 0 0 0-13.443-5.432ZM46.33 10.59h.22a20.386 20.386 0 0 1 5.452 13.464H46.33V10.59Zm5.672 14.357H46.33v13.698a20.39 20.39 0 0 0 5.672-13.698Zm-20.01 15.086h12.872a20.377 20.377 0 0 1-12.872 4.923v-4.923ZM45.435 10.59H31.992v13.464h13.443V10.59ZM31.992 24.947h13.443V39.14H31.992V24.947Zm-.894 14.192V24.947H17.613V39.14h13.485Zm0-28.55v13.465H17.613V10.59h13.485Z" clip-rule="evenodd" opacity=".3"/>
4
+ <rect width="15.341" height="15.341" x="50.447" y="2.74" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 50.447 2.74)"/>
5
+ <rect width="15.341" height="15.341" x="38.56" y="14.244" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 38.56 14.244)"/>
6
+ <rect width="15.341" height="15.341" x="26.67" y="26.135" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 26.67 26.135)"/>
7
+ <rect width="15.341" height="15.341" x="14.779" y="14.244" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 14.78 14.244)"/>
8
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <title>Typography</title>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M7.89639 37.9829L9.98859 31.9674H19.2633L21.2808 37.9829H28.4259L18.0889 9.99023H11.3926L0.939453 37.9829H7.89639ZM12.0725 10.9698L2.35092 37.0033H7.19995L9.29214 30.9878H19.968L21.9855 37.0033H27.0199L17.4064 10.9698H12.0725ZM14.2994 16.6489L10.4815 27.5409H18.7672L15.0725 16.6489H14.2994ZM14.6771 18.5327L17.4005 26.5613H11.8629L14.6771 18.5327ZM29.79 23.4589H34.1303C34.294 22.4953 34.6834 21.7644 35.3098 21.2887C36.0014 20.7634 36.9264 20.5079 38.0718 20.5079C38.5692 20.5079 39.036 20.5412 39.4724 20.6082C39.9451 20.6807 40.3675 20.8282 40.7359 21.0521C41.1219 21.2866 41.4308 21.615 41.6582 22.0296C41.8894 22.451 41.9988 22.99 41.9983 23.6241C42.0297 24.324 41.8107 24.8956 41.3365 25.29C40.9266 25.631 40.3878 25.8823 39.7238 26.0504C39.1007 26.2081 38.3919 26.3256 37.5965 26.4035C36.8341 26.4782 36.0592 26.5779 35.2716 26.7025C34.4923 26.8258 33.7191 26.9923 32.9517 27.202C32.2206 27.4018 31.5749 27.6995 31.012 28.095C30.4658 28.4788 30.0183 28.9943 29.6675 29.6474C29.3232 30.2886 29.1467 31.1244 29.1467 32.1586C29.1467 33.1004 29.3015 33.9013 29.6063 34.5645C29.9112 35.2277 30.3311 35.772 30.8687 36.2029C31.4145 36.6405 32.0532 36.9639 32.7887 37.1734C33.5408 37.3876 34.3551 37.4951 35.2324 37.4951C36.379 37.4951 37.501 37.3259 38.6 36.9872C39.6658 36.6587 40.5902 36.0854 41.3797 35.2624L42.1385 34.4713L42.2215 35.5643C42.245 35.8729 42.286 36.1752 42.3444 36.4713C42.3799 36.6509 42.4218 36.8282 42.4702 37.0033H46.7382C46.6234 36.6429 46.5373 36.2212 46.4775 35.7371C46.3754 34.9096 46.3244 34.0447 46.3244 33.1423V22.9651C46.3244 21.8765 46.0904 21.0247 45.6336 20.3968C45.1577 19.7429 44.5473 19.2334 43.7963 18.8647C43.0222 18.4847 42.1632 18.2285 41.2173 18.0967C40.2432 17.9611 39.2819 17.8933 38.3333 17.8933C37.295 17.8933 36.2628 17.9973 35.2362 18.2052C34.2306 18.4089 33.3298 18.7487 32.5316 19.2242C31.7485 19.6906 31.1052 20.3072 30.5978 21.0779C30.1753 21.7197 29.9048 22.5119 29.79 23.4589ZM35.2324 38.4747C36.4769 38.4747 37.6961 38.2908 38.8886 37.9233C39.8053 37.6408 40.6338 37.199 41.3716 36.5999L41.3834 36.6611C41.4496 36.996 41.5356 37.3244 41.6415 37.6462L41.7523 37.9829H48.3646L47.9035 37.2359C47.6975 36.9022 47.5415 36.3604 47.4498 35.6171C47.3526 34.8303 47.304 34.0054 47.304 33.1423V22.9651C47.304 21.6827 47.0149 20.6303 46.4257 19.8205C45.8554 19.0367 45.1209 18.4238 44.228 17.9854C43.3582 17.5583 42.399 17.2723 41.3524 17.1265C40.3339 16.9847 39.3275 16.9138 38.3333 16.9138C37.2296 16.9138 36.1323 17.0242 35.0418 17.2451C33.9303 17.4702 32.9257 17.8492 32.0303 18.3826C31.1196 18.925 30.3682 19.6453 29.7796 20.5392C29.1812 21.4482 28.8453 22.5775 28.7658 23.9198L28.735 24.4385H35.0058L35.0476 23.9946C35.1353 23.0611 35.4259 22.4305 35.9023 22.0688C36.4062 21.6861 37.1251 21.4875 38.0718 21.4875C38.5209 21.4875 38.9383 21.5173 39.3238 21.5764C39.6731 21.63 39.973 21.7348 40.2272 21.8892C40.4639 22.033 40.6532 22.2343 40.7994 22.5007C40.9418 22.7603 41.0192 23.1419 41.0192 23.6461C41.0381 24.0779 40.9334 24.3512 40.7101 24.5369C40.4226 24.7761 40.0149 24.9662 39.4834 25.1008C38.9109 25.2457 38.2499 25.3552 37.501 25.4286C36.7191 25.5052 35.925 25.6074 35.1185 25.735C34.3037 25.8639 33.4954 26.0379 32.6935 26.257C31.8555 26.486 31.1065 26.8314 30.4489 27.2935C29.7746 27.7672 29.2259 28.3993 28.8045 29.1839C28.3767 29.9804 28.1671 30.9732 28.1671 32.1586C28.1671 33.2345 28.3486 34.1739 28.7163 34.9737C29.0839 35.7734 29.598 36.4398 30.256 36.9672C30.9057 37.4881 31.6618 37.871 32.5204 38.1155C33.3623 38.3553 34.2666 38.4747 35.2324 38.4747ZM41.1813 27.5572L41.9988 26.8214V29.9264C41.9988 30.2522 41.9662 30.6744 41.9017 31.1971C41.8315 31.7659 41.643 32.3242 41.3391 32.8699C41.0223 33.4386 40.5391 33.9207 39.898 34.3159C39.2374 34.7231 38.3418 34.9184 37.2125 34.9184C36.7588 34.9184 36.3172 34.8777 35.8882 34.7963C35.4311 34.7095 35.0245 34.5551 34.6716 34.3317C34.2999 34.0965 34.005 33.7742 33.7912 33.3722C33.5764 32.9683 33.4723 32.4865 33.4723 31.9316C33.4723 31.3522 33.5758 30.8582 33.7912 30.4531C33.9991 30.0622 34.2767 29.7355 34.6213 29.4775C34.952 29.23 35.3361 29.0355 35.7715 28.8933C36.1774 28.7607 36.59 28.6546 37.0143 28.5741C37.447 28.4967 37.8799 28.4323 38.3128 28.3807C38.7243 28.3317 39.1169 28.2705 39.4907 28.1973C39.8561 28.1256 40.1965 28.0365 40.5117 27.9301C40.7872 27.8371 41.009 27.7123 41.1813 27.5572ZM39.6791 29.1586C40.0858 29.0788 40.4678 28.9788 40.825 28.8582C40.8914 28.8358 40.9561 28.8119 41.0192 28.7863V29.9264C41.0192 30.206 40.9895 30.5909 40.9295 31.0771C40.8752 31.5172 40.7274 31.9551 40.4833 32.3931C40.2522 32.8081 39.8885 33.171 39.384 33.482C38.8988 33.781 38.1754 33.9388 37.2125 33.9388C36.8194 33.9388 36.439 33.9038 36.071 33.8339C35.7311 33.7694 35.4403 33.6589 35.1955 33.504C34.9694 33.3609 34.7911 33.1661 34.6561 32.9123C34.5222 32.6604 34.4519 32.3352 34.4519 31.9316C34.4519 31.5021 34.5228 31.1638 34.6561 30.913C34.797 30.6482 34.9802 30.4326 35.2083 30.2618C35.4505 30.0805 35.7389 29.9345 36.0757 29.8245C36.4418 29.7049 36.8138 29.6092 37.1918 29.5374C37.6007 29.4644 38.0147 29.4028 38.4286 29.3534C38.864 29.3016 39.2808 29.2366 39.6791 29.1586Z" fill="#1EA7FD"/>
4
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="62" height="48" viewBox="0 0 62 48">
2
+ <title>Youtube logo</title>
3
+ <path fill="#ED1D24" d="M58.642 11.09c-.65-2.398-2.566-4.285-5-4.926C49.234 5 31.553 5 31.553 5S13.87 5 9.46 6.164c-2.433.64-4.349 2.528-5 4.925-1.18 4.345-1.18 13.409-1.18 13.409s0 9.064 1.18 13.409c.651 2.397 2.567 4.284 5 4.925 4.41 1.164 22.091 1.164 22.091 1.164s17.682 0 22.092-1.164c2.433-.64 4.349-2.528 4.999-4.925 1.182-4.345 1.182-13.409 1.182-13.409s0-9.064-1.182-13.409Z"/>
4
+ <path fill="#fff" d="m25.768 32.727 14.778-8.23-14.778-8.23v16.46Z"/>
5
+ </svg>