├── .bitmap ├── .dockerignore ├── .gitattributes ├── .github ├── Bug_report.md ├── CONTRIBUTING.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .markdownlint.json ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── README.md ├── __index.html ├── babel.config.js ├── docs ├── aspects │ ├── aspects-overview.md │ ├── babel │ │ ├── babel.composition.tsx │ │ ├── babel.docs.mdx │ │ ├── babel.mdx │ │ └── index.ts │ ├── builder │ │ ├── builder.composition.tsx │ │ ├── builder.docs.mdx │ │ ├── builder.mdx │ │ └── index.ts │ ├── compiler │ │ ├── compiler.composition.tsx │ │ ├── compiler.docs.mdx │ │ ├── compiler.mdx │ │ └── index.ts │ ├── component │ │ ├── component.composition.tsx │ │ ├── component.docs.mdx │ │ ├── component.mdx │ │ └── index.ts │ ├── compositions │ │ ├── compositions.composition.tsx │ │ ├── compositions.docs.mdx │ │ ├── compositions.mdx │ │ └── index.ts │ ├── dependency-resolver │ │ ├── dependency-resolver.composition.tsx │ │ ├── dependency-resolver.docs.mdx │ │ ├── dependency-resolver.mdx │ │ └── index.ts │ ├── envs │ │ ├── envs.composition.tsx │ │ ├── envs.docs.mdx │ │ ├── envs.mdx │ │ └── index.ts │ ├── generator │ │ ├── generator.composition.tsx │ │ ├── generator.docs.mdx │ │ ├── generator.mdx │ │ └── index.ts │ ├── html │ │ ├── html.composition.tsx │ │ ├── html.docs.mdx │ │ ├── html.mdx │ │ └── index.ts │ ├── logger │ │ ├── index.ts │ │ ├── logger.composition.tsx │ │ ├── logger.docs.mdx │ │ └── logger.mdx │ ├── mdx │ │ ├── index.ts │ │ ├── mdx.composition.tsx │ │ ├── mdx.docs.mdx │ │ └── mdx.mdx │ ├── multi-compiler │ │ ├── index.ts │ │ ├── multi-compiler.composition.tsx │ │ ├── multi-compiler.docs.mdx │ │ └── multi-compiler.mdx │ ├── node │ │ ├── index.ts │ │ ├── node.composition.tsx │ │ ├── node.docs.mdx │ │ └── node.mdx │ ├── pkg │ │ ├── index.ts │ │ ├── pkg.composition.tsx │ │ ├── pkg.docs.mdx │ │ └── pkg.mdx │ ├── pnpm │ │ ├── index.ts │ │ ├── pnpm.composition.tsx │ │ ├── pnpm.docs.mdx │ │ └── pnpm.mdx │ ├── preview │ │ ├── index.ts │ │ ├── preview.composition.tsx │ │ ├── preview.docs.mdx │ │ └── preview.mdx │ ├── react-native │ │ ├── index.ts │ │ ├── react-native.composition.tsx │ │ ├── react-native.docs.mdx │ │ └── react-native.mdx │ ├── react │ │ ├── index.ts │ │ ├── react.composition.tsx │ │ ├── react.docs.mdx │ │ └── react.mdx │ ├── typescript │ │ ├── index.ts │ │ ├── typescript.composition.tsx │ │ ├── typescript.docs.mdx │ │ └── typescript.mdx │ ├── variants │ │ ├── index.ts │ │ ├── variants.composition.tsx │ │ ├── variants.docs.mdx │ │ └── variants.mdx │ └── yarn │ │ ├── index.ts │ │ ├── yarn.composition.tsx │ │ ├── yarn.docs.mdx │ │ └── yarn.mdx ├── bit-dot-dev │ ├── authentication.md │ ├── bit-dev.md │ └── my-account.md ├── building-with-bit │ ├── compiling-components.md │ ├── component-compositions.md │ ├── consuming-components.md │ ├── creating-components.md │ ├── documenting-components.md │ ├── environments.md │ ├── exporting-components.md │ ├── importing-components.md │ ├── inspecting-components.md │ ├── installing-components.md │ ├── manage-workspace.md │ ├── publishing-components.md │ ├── removing-components.md │ ├── scoping-components.md │ ├── testing-components.md │ ├── tracking-components.md │ └── versioning-components.md ├── cli │ └── cli-reference.md ├── community │ ├── open-source.md │ ├── resources.md │ └── talk-to-us.md ├── component-architecture │ ├── build-like-google.md │ ├── composing-components.md │ ├── naming-components2.md │ ├── organizing-components.md │ ├── theming-components.md │ └── thinking-in-components.md ├── components │ ├── commands │ │ ├── bit-init.md │ │ ├── bit-templates.md │ │ └── git-commit-bitmap.md │ ├── components │ │ ├── bit-add.md │ │ ├── bit-create-warning.md │ │ ├── bit-show.md │ │ ├── bitmap-example.md │ │ ├── namespaces.md │ │ ├── path.md │ │ ├── react │ │ │ ├── bit-create-button.md │ │ │ ├── bit-create-component-card.md │ │ │ ├── bit-create-multiple-components.md │ │ │ └── test-dependencies.md │ │ └── styles.md │ ├── examples │ │ └── react │ │ │ ├── button.md │ │ │ ├── card.md │ │ │ └── show-button.md │ ├── install │ │ ├── bvm-intro.md │ │ ├── bvm-version.md │ │ ├── install-bit.md │ │ ├── install-bvm-errors.md │ │ ├── install-bvm-solution.md │ │ ├── install-bvm.md │ │ ├── install-components.md │ │ ├── legacy-warning.md │ │ └── scoped-registry.md │ ├── quick-guide.md │ ├── remote-scopes │ │ ├── create-bit-account.md │ │ └── create-remote-scope.md │ └── workspace │ │ ├── default-scope-name.md │ │ ├── files-bit-creates.md │ │ ├── react-environment.md │ │ ├── reset-dev-server.md │ │ └── starting-dev-server.md ├── essentials │ ├── advantages-of-bit.md │ ├── bit-components.md │ ├── scopes.md │ ├── what-is.bit.md │ └── workspace.md ├── extending-bit │ ├── adding-a-new-tab.md │ ├── creating-a-custom-generator.md │ ├── creating-a-custom-workspace-generator.md │ └── mutate-webpack-config.md ├── getting-started │ ├── composing-components.md │ ├── creating-components.mdx │ ├── exporting-components.md │ ├── initializing-workspace.md │ ├── installing-bit.md │ ├── installing-components.md │ ├── remote-scope.md │ ├── whats-next.md │ └── workspace-ui.md ├── reference │ ├── ci-cd.md │ ├── cli-reference.md │ ├── commands.md │ ├── migration.md │ ├── pre-existing-components.md │ ├── self-hosted.md │ ├── usage-analytics.md │ └── using-bvm.md ├── resources │ ├── articles.md │ ├── community.md │ ├── conference-talks.md │ ├── interviews.md │ ├── live-streams.md │ ├── podcasts.md │ ├── slide-decks.md │ └── videos.md ├── troubleshooting │ ├── doctor-logs-cache.md │ ├── multiple-peer-dep-versions.md │ └── runtime-globals.md └── welcome.md ├── docusaurus.config.js ├── package.json ├── sidebars.js ├── src ├── components │ └── image │ │ ├── image.module.scss │ │ ├── image.tsx │ │ └── index.ts ├── css │ └── custom.css └── img │ └── bit-logo.png ├── static ├── .nojekyll ├── _redirects ├── img │ ├── Screen Shot 2021-01-02 at 19.19.29.png │ ├── angular.svg │ ├── base-ui.png │ ├── bit-logo.png │ ├── blog │ │ ├── embed-figma-in-bit │ │ │ ├── figma-button-docs.png │ │ │ ├── figma.gif │ │ │ └── share-figma-file.png │ │ └── getting-started-with-bit │ │ │ ├── bit.dev.png │ │ │ ├── button-files.png │ │ │ ├── button-with-styles.png │ │ │ ├── card-composition.png │ │ │ ├── card-compositions2.png │ │ │ ├── card-dependencies.png │ │ │ ├── card-dependencies2.png │ │ │ ├── changelog-first-version.png │ │ │ ├── changelog.png │ │ │ ├── code.png │ │ │ ├── compositions-overview2.png │ │ │ ├── compositions-properties.png │ │ │ ├── compositions.png │ │ │ ├── create-collection.png │ │ │ ├── dependencies.png │ │ │ ├── docs-live.png │ │ │ ├── gallery.png │ │ │ ├── issues-found.png │ │ │ ├── node-modules.png │ │ │ ├── node-modules2.png │ │ │ ├── overview.png │ │ │ ├── peer-dependencies.png │ │ │ ├── primary-button.png │ │ │ ├── react-app.png │ │ │ ├── secondary-button.png │ │ │ ├── tests.png │ │ │ └── using-component.png │ ├── btn_prop_tables.png │ ├── button_dots_loader.png │ ├── button_modified.png │ ├── button_overview.png │ ├── card_example.png │ ├── cicd.png │ ├── component-contents.png │ ├── component.png │ ├── compositions.png │ ├── compositions_demo.png │ ├── config_icon_2.png │ ├── connected-scopes.png │ ├── create_scope.png │ ├── create_scope_new.png │ ├── depdendencies_ui.png │ ├── dependencies.png │ ├── dependencies_graph.png │ ├── deps-notification-box.png │ ├── design-dystem.jpg │ ├── docs_prop_table.jpg │ ├── dots_loader.png │ ├── dots_loader_pkg.png │ ├── explore_deps.png │ ├── explore_deps_2.png │ ├── export_scrn_shot.png │ ├── extending-bit │ │ ├── workspace-generator-dir-structure.png │ │ └── workspace-generator-template-name.png │ ├── favicon.ico │ ├── history.png │ ├── homepage-components-micro-frontends.png │ ├── issue_found.png │ ├── javascript.svg │ ├── log_example.png │ ├── log_icon.png │ ├── logo.svg │ ├── mfe_compositions.png │ ├── modified_components.png │ ├── modified_comps.png │ ├── module-link.png │ ├── new_component.png │ ├── nodejs.svg │ ├── oss_logo.png │ ├── overview-bitdev.png │ ├── pkg_config.png │ ├── podcasts │ │ ├── fsjam.jpeg │ │ ├── jamstack-radio.jpg │ │ ├── modern-web.jpg │ │ ├── select-podcast.jpeg │ │ └── views-on-vue.jpg │ ├── react.svg │ ├── react_env_ex.png │ ├── remote_scope_ui.png │ ├── ripple.png │ ├── scope-bitdev.png │ ├── scope-contents.png │ ├── scope-dependency.png │ ├── scope-hosting.jpg │ ├── scope.png │ ├── scope_type.png │ ├── scope_ui.png │ ├── scope_ui_ss.png │ ├── scopes_bitdev_screenshot.png │ ├── single-scope.png │ ├── tech-jokes-deps.png │ ├── tech_jokes.png │ ├── test_results_ui.jpg │ ├── tests.png │ ├── tutorials.svg │ ├── typescript.svg │ ├── undraw_code_review.svg │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ ├── undraw_docusaurus_tree.svg │ ├── undraw_monitor.svg │ ├── undraw_note_list.svg │ ├── undraw_online.svg │ ├── undraw_open_source.svg │ ├── undraw_operating_system.svg │ ├── undraw_react.svg │ ├── undraw_tweetstorm.svg │ ├── undraw_youtube_tutorial.svg │ ├── version-history.png │ ├── virtual-component-monorepo.png │ ├── vue.svg │ ├── workspace-grid.png │ ├── workspace-ui │ │ ├── code.png │ │ ├── compositions.png │ │ ├── dependencies.png │ │ ├── overview.png │ │ └── tests.png │ ├── workspace.png │ ├── ws-ui-button-modified.png │ ├── ws_getting_started_1.png │ ├── ws_getting_started_compositions.png │ ├── ws_getting_started_dependencies.png │ ├── ws_getting_started_docs.png │ ├── ws_getting_started_frontmatter.png │ ├── ws_getting_started_import.png │ ├── ws_getting_started_mdx_imports.png │ └── ws_getting_started_test.png └── robots.txt ├── tsconfig.json ├── tutorials ├── adding-a-theme-provider.md ├── build-and-share-components.md └── embed-figma-in-bit.md ├── workspace.jsonc └── yarn.lock /.dockerignore: -------------------------------------------------------------------------------- 1 | */node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | # * text=auto 3 | * text eol=lf 4 | 5 | # These settings are for any web project 6 | 7 | # Handle line endings automatically for files detected as text 8 | # and leave all files detected as binary untouched. 9 | # * text=auto 10 | # NOTE - originally I had the above line un-commented. it caused me a lot of grief related to line endings because I was dealing with WordPress plugins and the website changing line endings out if a user modified a plugin through the web interface. commenting this line out seems to have alleviated the git chaos where simply switching to a branch caused it to believe 500 files were modified. 11 | 12 | # 13 | # The above will handle all files NOT found below 14 | # 15 | 16 | # 17 | ## These files are text and should be normalized (Convert crlf => lf) 18 | # 19 | 20 | # source code 21 | *.php text 22 | *.css text 23 | *.sass text 24 | *.scss text 25 | *.less text 26 | *.styl text 27 | *.js text 28 | *.coffee text 29 | *.json text 30 | *.htm text 31 | *.html text 32 | *.xml text 33 | *.svg text 34 | *.txt text 35 | *.ini text 36 | *.inc text 37 | *.pl text 38 | *.rb text 39 | *.py text 40 | *.scm text 41 | *.sql text 42 | *.sh text 43 | *.bat text 44 | 45 | # templates 46 | *.ejs text 47 | *.hbt text 48 | *.jade text 49 | *.haml text 50 | *.hbs text 51 | *.dot text 52 | *.tmpl text 53 | *.phtml text 54 | 55 | # server config 56 | .htaccess text 57 | 58 | # git config 59 | .gitattributes text 60 | .gitignore text 61 | .gitconfig text 62 | 63 | # code analysis config 64 | .jshintrc text 65 | .jscsrc text 66 | .jshintignore text 67 | .csslintrc text 68 | 69 | # misc config 70 | *.yaml text 71 | *.yml text 72 | .editorconfig text 73 | 74 | # build config 75 | *.npmignore text 76 | *.bowerrc text 77 | 78 | # Heroku 79 | Procfile text 80 | .slugignore text 81 | 82 | # Documentation 83 | *.md text 84 | LICENSE text 85 | AUTHORS text 86 | 87 | 88 | # 89 | ## These files are binary and should be left untouched 90 | # 91 | 92 | # (binary is a macro for -text -diff) 93 | *.png binary 94 | *.jpg binary 95 | *.jpeg binary 96 | *.gif binary 97 | *.ico binary 98 | *.mov binary 99 | *.mp4 binary 100 | *.mp3 binary 101 | *.flv binary 102 | *.fla binary 103 | *.swf binary 104 | *.gz binary 105 | *.zip binary 106 | *.7z binary 107 | *.ttf binary 108 | *.eot binary 109 | *.woff binary 110 | *.pyc binary 111 | *.pdf binary -------------------------------------------------------------------------------- /.github/Bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 13 | 1. Go to '...' 14 | 2. Click on '....' 15 | 3. Scroll down to '....' 16 | 4. See error 17 | 18 | **Expected behavior** 19 | A clear and concise description of what you expected to happen. 20 | 21 | **Screenshots** 22 | If applicable, add screenshots to help explain your problem. 23 | 24 | **Desktop (please complete the following information):** 25 | 26 | - OS: [e.g. iOS] 27 | - Browser [e.g. chrome, safari] 28 | - Version [e.g. 22] 29 | 30 | **Smartphone (please complete the following information):** 31 | 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | 39 | Add any other context about the problem here. 40 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/.github/CONTRIBUTING.md -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/.github/PULL_REQUEST_TEMPLATE.md -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules/ 3 | 4 | # Production 5 | build/ 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | 22 | # bit related stuff 23 | public/ 24 | my-scope/ 25 | .yarn 26 | 27 | # vscode history 28 | .history -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD013": false, 4 | "MD025": false, 5 | "MD036": false, 6 | "MD033": false, 7 | "MD026": false, 8 | "MD038": false 9 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.language": "en", 3 | "css.validate": false, 4 | "cSpell.words": ["bitdev", "whybit", "autoplay", "allowfullscreen"], 5 | "cSpell.enableFiletypes": [ 6 | "javascriptreact", 7 | "jsonc", 8 | "mdx", 9 | "typescript", 10 | "typescriptreact" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at lucas.tostee@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [](https://join.slack.com/t/bit-dev-community/shared_invite/zt-o2tim18y-UzwOCFdTafmFKEqm2tXE4w) 2 | 3 | # bit.dev docs 4 | 5 | This repo contains the source code and documentation powering [docs-harmony.bit.dev](https://harmony-docs.bit.dev/). 6 | The website is based on [Docusaurus v2](https://docusaurus.io/en/) 7 | 8 | ## Getting started 9 | 10 | ### Installation 11 | 12 | 1. `yarn` to install top level dependencies 13 | 14 | ### Running locally 15 | 16 | 1. `yarn` to install the website's npm dependencies 17 | 2. `yarn start` to start the development server with docs hot reloading 18 | 3. open `http://localhost:3000` to open the site in your browser 19 | 20 | ## Contributing 21 | 22 | Contributions are always welcome, no matter how large or small. Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md). 23 | 24 | You can just hit the "Edit" button on each page to make change to the content of the page. 25 | 26 | Images should be placed in the `src/img` folder. 27 | 28 | ## License 29 | 30 | MIT License. 31 | -------------------------------------------------------------------------------- /__index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | If you are not redirected automatically, follow this 23 | link. 24 | 25 | 26 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/aspects/aspects-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: aspects-overview 3 | title: Aspects Overview 4 | --- 5 | 6 | Aspects are the building blocks of Bit. Aspects modularize and isolate cross-cutting business concerns in Bit. This means that each Aspect in Bit is a "service" implementing a feature. 7 | This means that at its core Bit is simply a **composition** of services that together form a complete system. 8 | 9 | Below are some examples for Aspects in Bit: 10 | 11 | - [Generator](/aspects/generator) - Creating new components using pre-defined templates. 12 | - [MDX](/aspects/mdx) - Manages component documentation using MDX files. 13 | - [Dependency resolver](/aspects/dependency-resolver) - Handles dependency policies and resolutions for components and installing dependencies via an integration with various package managers. 14 | - [React](/aspects/react) - Manages all local development requirements for React-based workflows and highly inspired by `react-scripts`. 15 | 16 | Each Aspect is implemented as a component in Bit and is composed from multiple components. Aspects communicate and compose with one another via APIs called `integration slots`. 17 | 18 | You can implement new Aspects, compose them with Bit's core Aspects and thus extending Bit's core functionality to support advanced features. 19 | 20 | Check out [Extending Bit](/extending-bit/adding-a-new-tab) for more ideas on what you can do with Aspects such as [Adding a new tab](/extending-bit/adding-a-new-tab) or [creating your own generator](/extending-bit/creating-a-custom-generator). 21 | -------------------------------------------------------------------------------- /docs/aspects/babel/babel.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Babel } from './index'; 5 | 6 | export const BabelDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/babel/babel.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Babel Aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Babel } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Babel aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```jsx 17 | import { Babel } from '@teambit/aspect-docs.babel'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```jsx 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Babel } from '@teambit/aspect-docs.babel'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/babel/babel.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: babel 3 | title: Babel Compiler 4 | slug: /aspects/babel 5 | --- 6 | 7 | Check out the [Babel Aspect](https://bit.dev/teambit/compilation/babel) on Bit.dev 8 | 9 | 10 | This compiler utilizes the programmatic API of Babel to transpile files. See the compiler-options.ts for more data how to pass Babel options to the compiler. 11 | 12 | Note that to isolate the components from different Babel config files on the machine, the following two props are set to false (if they weren't passed in the options): `configFile` and `babelrc`. 13 | 14 | ## FAQ 15 | 16 | _Q_: I'm getting an error about missing plugins. 17 | 18 | _A_: make sure that workspace.jsonc has the plugins and that you ran `bit install`. 19 | Example of the workspace.jsonc settings: 20 | 21 | ``` 22 | "my-babel-env": { 23 | "teambit.bit/aspect": {}, 24 | "teambit.bit/dependency-resolver": { 25 | "policy": { 26 | "dependencies": { 27 | "@babel/core": "7.11.6", 28 | "@babel/preset-react": "7.12.1", 29 | "@babel/preset-env": "7.11.5", 30 | "@babel/preset-typescript": "7.10.4", 31 | "@babel/plugin-proposal-class-properties": "7.10.4" 32 | } 33 | } 34 | } 35 | }, 36 | ``` 37 | 38 | 2. You're not using the plugin. 39 | The reason for the error is that Babel searches for config files in different directories. To disable this, add the following to the config you pass to the compiler: 40 | 41 | ``` 42 | { 43 | ... 44 | "babelrc": false, 45 | "configFile": false, 46 | } 47 | ``` 48 | 49 | this takes care of both .babelrc and babel.config.json. -------------------------------------------------------------------------------- /docs/aspects/babel/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Babel } from './babel.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/builder/builder.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Builder } from './index'; 5 | 6 | export const BuilderDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/builder/builder.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Builder Aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Builder } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Builder aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```jsx 17 | import { Builder } from '@teambit/aspect-docs.builder'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```jsx 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Builder } from '@teambit/aspect-docs.builder'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/builder/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Builder } from './builder.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/compiler/compiler.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Compiler } from './index'; 5 | 6 | export const CompilerDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/compiler/compiler.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Compiler aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Compiler } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Compiler aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Compiler } from '@teambit/aspect-docs.compiler'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Compiler } from '@teambit/aspect-docs.compiler'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/compiler/compiler.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: compiler 3 | title: Compiler 4 | slug: /aspects/compiler 5 | --- 6 | 7 | Check out the [Compiler Aspect](https://bit.dev/teambit/compilation/compiler) on Bit.dev 8 | 9 | 10 | ## Workspace Configuration 11 | 12 | The compiler is configured inside an environment and not directly on the component level. 13 | 14 | ### As a task 15 | 16 | A task is running with `bit build` or during the tag process on the capsules or the workspace (depends on the specific compiler implementation). 17 | 18 | The env extension should have this compiler extension as a dependency first, then add to the `getBuildPipe()` array the following: `this.compiler.createTask()`. 19 | 20 | ### As a command 21 | 22 | A command is running on the workspace. 23 | 24 | To run: `bit compile`. 25 | 26 | An example of configuring a compiler in the React env. 27 | 28 | ```jsx 29 | /** 30 | * returns a component compiler. 31 | */ 32 | getCompiler(): Compiler { 33 | // eslint-disable-next-line global-require 34 | const tsConfig = require('./typescript/tsconfig.json'); 35 | return this.ts.createCompiler(tsConfig); 36 | } 37 | ``` 38 | 39 | ## Compiler Implementation 40 | 41 | The compiler is responsible for two processes: 42 | 43 | ### compile during development 44 | 45 | This compilation takes place on the workspace and the dists are saved inside the component dir. 46 | The provider should implement `transpileFile` function as follows: 47 | 48 | ```jsx 49 | transpileFile: (fileContent: string, options: { componentDir: string, filePath: string }) => Array<{ outputText: string, outputPath: string }> | null; 50 | ``` 51 | 52 | In case the compiler receives an unsupported file, it should return null. 53 | 54 | ### compile for build (during the tag command) 55 | 56 | This compilation takes place on the isolated capsule. 57 | The provider should implement `build` function which returns the exit-code and the dist dir. 58 | From Compiler interface: 59 | 60 | ```jsx 61 | build(context: BuildContext): Promise; 62 | ``` 63 | 64 | ## Points to consider when writing a compiler 65 | 66 | ### Debugging experience on the workspace 67 | 68 | Since the dists are written into the node_modules/component-name/dist-dir, the debugger needs to know where to find the source files. This can be easily achieved by setting the `sourceRoot` of the source-map file to the component-dir. As a reminder, this directory is passed to the `transpile()` method. 69 | 70 | ### Error handling during build process 71 | 72 | Without proper error handling, the `build()` will exit an the first error found. Catch the errors and add them to the `ComponentResult.errors[]` you return per component. 73 | -------------------------------------------------------------------------------- /docs/aspects/compiler/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Compiler } from './compiler.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/component/component.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Component } from './index'; 5 | 6 | export const ComponentDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/component/component.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Component aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Component } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Component aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Component } from '@teambit/aspect-docs.component'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Component } from '@teambit/aspect-docs.component'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/component/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Component } from './component.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/compositions/compositions.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Compositions } from './index'; 5 | 6 | export const CompositionsDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/compositions/compositions.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Compositions aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Compositions } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Compositions aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Compositions } from '@teambit/aspect-docs.compositions'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Compositions } from '@teambit/aspect-docs.compositions'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/compositions/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Compositions } from './compositions.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/dependency-resolver/dependency-resolver.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { DependencyResolver } from './index'; 5 | 6 | export const DependencyResolverDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/dependency-resolver/dependency-resolver.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for DependencyResolver aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { DependencyResolver } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for DependencyResolver aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { DependencyResolver } from '@teambit/aspect-docs.dependency-resolver'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { DependencyResolver } from '@teambit/aspect-docs.dependency-resolver'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/dependency-resolver/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DependencyResolver } from './dependency-resolver.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/envs/envs.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Envs } from './index'; 5 | 6 | export const EnvsDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/envs/envs.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Envs aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Envs } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Envs aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Envs } from '@teambit/aspect-docs.envs'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Envs } from '@teambit/aspect-docs.envs'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/envs/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Envs } from './envs.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/generator/generator.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Generator } from './index'; 5 | 6 | export const GeneratorDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/generator/generator.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Generator aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Generator } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Generator aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Generator } from '@teambit/aspect-docs.generator'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Generator } from '@teambit/aspect-docs.generator'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/generator/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Generator } from './generator.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/html/html.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Html } from './index'; 5 | 6 | export const HtmlDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/html/html.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Html aspect' 3 | labels: ['docs', 'aspect', 'extensions', 'html', 'environment', 'framework-less', 'vanillajs', 'vanilla js'] 4 | --- 5 | 6 | import { Html } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Html aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Html } from '@teambit/html.aspect-docs.html'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Html } from '@teambit/html.aspect-docs.html'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/html/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Html } from './html.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/logger/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Logger } from './logger.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/logger/logger.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Logger } from './index'; 5 | 6 | export const LoggerDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/logger/logger.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Logger aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Logger } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Logger aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Logger } from '@teambit/aspect-docs.logger'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Logger } from '@teambit/aspect-docs.logger'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/mdx/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Mdx } from './mdx.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/mdx/mdx.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Mdx } from './index'; 5 | 6 | export const MdxDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/mdx/mdx.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Mdx aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Mdx } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Mdx aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Mdx } from '@teambit/aspect-docs.mdx'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Mdx } from '@teambit/aspect-docs.mdx'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/multi-compiler/index.ts: -------------------------------------------------------------------------------- 1 | export { default as MultiCompiler } from './multi-compiler.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/multi-compiler/multi-compiler.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { MultiCompiler } from './index'; 5 | 6 | export const MultiCompilerDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/multi-compiler/multi-compiler.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for MultiCompiler aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { MultiCompiler } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for MultiCompiler aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { MultiCompiler } from '@teambit/aspect-docs.multi-compiler'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { MultiCompiler } from '@teambit/aspect-docs.multi-compiler'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/multi-compiler/multi-compiler.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: multi-compiler 3 | title: Multi-compiler 4 | slug: /aspects/multi-compiler 5 | description: The multi-compiler aspect allows the configuration of multiple compilers on a component 6 | --- 7 | 8 | Check out the [Multi Compiler Aspect](https://bit.dev/teambit/compilation/multi-compiler) on Bit.dev 9 | 10 | 11 | The multi-compiler aspect allows the configuration of multiple compilers on a component. This determines which compiler to apply on a component file using the `isFileSupported()` compiler API. 12 | 13 | - `createCompiler(compilers: Compiler[], options: CompilerOptions)` API to support the creation a Multi-compiler instance which can be used in the Env API (the `overrideCompiler` and `getCompiler` APIs). 14 | - Supports the creation of a multi-compiler build tasks. 15 | 16 | ```ts 17 | // create a multi compiler instance. 18 | const compiler = multiCompiler.createCompiler([createBabelCompiler(), createTsCompiler()]); 19 | 20 | // create a multi-compiler build task. 21 | compiler.createTask('MultiCompiler', compiler); 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/aspects/node/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Node } from './node.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/node/node.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Node } from './index'; 5 | 6 | export const NodeDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/node/node.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Node aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Node } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Node aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Node } from '@teambit/aspect-docs.node'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Node } from '@teambit/aspect-docs.node'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/pkg/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Pkg } from './pkg.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/pkg/pkg.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Pkg } from './index'; 5 | 6 | export const PkgDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/pkg/pkg.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Pkg aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Pkg } from './index'; 7 | 8 | ## Static Content Page in Pkg 9 | 10 | Docs for Pkg aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any Pkg file: 15 | 16 | ```js 17 | import { Pkg } from '@teambit/aspect-docs.pkg'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and Pkg providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { PkgLayout } from '@teambit/ui.Pkg-layout'; 27 | import { Pkg } from '@teambit/aspect-docs.pkg'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/pnpm/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Pnpm } from './pnpm.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/pnpm/pnpm.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Pnpm } from './index'; 5 | 6 | export const PnpmDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/pnpm/pnpm.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Pnpm aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Pnpm } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Pnpm aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Pnpm } from '@teambit/aspect-docs.pnpm'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Pnpm } from '@teambit/aspect-docs.pnpm'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/pnpm/pnpm.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: pnpm 3 | title: pnpm 4 | slug: /aspects/pnmp 5 | description: Enables the use of pnpm in a Bit workspace 6 | --- 7 | 8 | Check out the [Pnpm Aspect](https://bit.dev/teambit/pnpm/pnpm) on Bit.dev 9 | 10 | 11 | pnpm is a Bit aspect that enables the use of the pnpm package manager in a Bit workspace (the pnpm aspect utilizes pnpm's programmatic API). 12 | 13 | The pnpm aspect is used **indirectly** by the 'Dependency Resolver'. 14 | 15 | ## Quickstart 16 | 17 | To start using the pnpm aspect as a package manager for your workspace, set the Dependency Resolver `packageManager` property to 'pnpm'. 18 | 19 | ```json 20 | { 21 | "teambit.dependencies/dependency-resolver": { 22 | "packageManager": "teambit.dependencies/pnpm" 23 | } 24 | } 25 | ``` 26 | 27 | > Package manager are only configurable at th workspace configuration root-level. 28 | > That means, different components in the same workspace cannot use different package manager. 29 | 30 | --- 31 | 32 | > Packages on NPM will be installed from Bit.dev's registry instead of NPM's. This will be done using the user's Bit credentials. 33 | 34 | > The pnpm aspect uses Bit's deduping algorithm (not pnpm's). 35 | > It searches for a common version that satisfies _most_ components using the same dependency (taking into consideration permitted version ranges configured for each component) and installs it at the workspace root directory, 36 | > where it can be shared by multiple dependent components. 37 | > Versions that are used by a minority of components will be installed nested in each component directory. 38 | 39 | > pnpm cannot be used with the 'React Native environment'. 40 | -------------------------------------------------------------------------------- /docs/aspects/preview/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Preview } from './preview.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/preview/preview.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Preview } from './index'; 5 | 6 | export const PreviewDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/preview/preview.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Preview aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Preview } from './index'; 7 | 8 | ## Static Content Page in Preview 9 | 10 | Docs for Preview aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any Preview file: 15 | 16 | ```jsx 17 | import { Preview } from '@teambit/aspect-docs.preview'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and Preview providers 23 | 24 | ```jsx 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Preview } from '@teambit/aspect-docs.preview'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/preview/preview.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: preview 3 | title: Preview 4 | slug: /aspects/preview 5 | description: Handles the bundlings and rendering of component compositions and documentations 6 | --- 7 | 8 | Check out the [Preview Aspect](https://bit.dev/teambit/preview/preview) on Bit.dev 9 | 10 | 11 | The Preview aspect handles the bundling and rendering of component compositions and documentation, for the Workspace UI and Scope UI. 12 | 13 | Preview is used to display components in development (on `bit start`) as well as in their released versions (assets for the release version are generated as part of the build process). 14 | 15 | The Preview aspect handles each component according to the configurations set by the environment that is used by that component. That means both the documentation and the component compositions will be bundled and displayed differently for different environments. 16 | 17 | ## Rational 18 | 19 | In a standard web application, UI components _serving the same application_ are bundled together to produce the necessary assets to make them renderable by the browser. 20 | 21 | Components in a Bit workspace are not all in the service of the same application. Each component is authored, tagged and exported as an independent component. 22 | That means a few things: 23 | 24 | 1. Components in a Bit workspace are not consumed ,directly or indirectly, by a single entry file (e.g, the app's `index.js`). That makes it impossible for the bundler to follow the files needed to be bundled. 25 | 26 | 2. Different components in a single workspace may be implemented using different technologies and bundled using different configurations or even different bundlers. 27 | 28 | Preview solves the above challenges by creating a temporary entry file for each group of components using the same environment. 29 | It then serves this file to the Bundler, to be bundled according to the environment and the purpose of bundling. That is, to display components in development or to display the components' release versions (for a "production-level" exhibition of the component's documentation and compositions). 30 | 31 | ## Usage 32 | 33 | ### Extending the Preview aspect 34 | 35 | The preview aspect can be extended to generate other renderable artifacts , either when running Bit's development server or as part of the build pipeline (for a component's tagged version). 36 | These artifacts can present additional information that assists in inspecting a component (for example, showing the results of accessibility tests). 37 | -------------------------------------------------------------------------------- /docs/aspects/react-native/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ReactNative } from './react-native.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/react-native/react-native.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { ReactNative } from './index'; 5 | 6 | export const ReactNativeDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/react-native/react-native.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for ReactNative aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { ReactNative } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for ReactNative aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any MDX file: 15 | 16 | ```js 17 | import { ReactNative } from '@teambit/react.aspect-docs.react-native'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and ReactNative providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXNativeLayout } from '@teambit/ui.mdx-layout'; 27 | import { ReactNative } from '@teambit/react.aspect-docs.react-native'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/react/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ReactAspect } from './react.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/react/react.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { ReactAspect } from './index'; 5 | 6 | export const ReactDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/react/react.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for React aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { ReactAspect } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for React aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any MDX file: 15 | 16 | ```js 17 | import { ReactAspect } from '@teambit/react.aspect-docs.react'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and React providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { ReactAspect } from '@teambit/react.aspect-docs.react'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/typescript/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Typescript } from './typescript.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/typescript/typescript.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Typescript } from './index'; 5 | 6 | export const TypescriptDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/typescript/typescript.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Typescript aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Typescript } from './index'; 7 | 8 | ## Static Content Page in Typescript 9 | 10 | Docs for Typescript aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any Typescript file: 15 | 16 | ```jsx 17 | import { Typescript } from '@teambit/aspect-docs.typescript'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and Typescript providers 23 | 24 | ```jsx 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Typescript } from '@teambit/aspect-docs.typescript'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/typescript/typescript.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: typescript 3 | title: Typescript 4 | slug: /aspects/typescript 5 | description: Typescript compilation for Bit components. 6 | --- 7 | 8 | Check out the [Typescript Aspect](https://bit.dev/teambit/typescript/typescript) on Bit.dev 9 | 10 | 11 | Typescript aspect implements the `Compiler` interface and provides the ability to transpile files on the workspace and build components in the isolated capsules. 12 | 13 | ## Configuration - tsconfig.json 14 | 15 | An env that uses typescript compiler can have two tsconfig.json files, one for the workspace and one for the build process. 16 | 17 | On the workspace, the following two configurations are overridden: 18 | 19 | ``` 20 | compilerOptions.sourceRoot = componentDir; 21 | compilerOptions.rootDir = '.'; 22 | ``` 23 | 24 | The reason to override them is to make the source-map working on the workspace. 25 | 26 | As a reminder, the `dists` are written into the node_modules and not in the component-dir, without the configuration above, the source-map won't have the correct `sourceRoot` and `sources` values, and as a result, the debugger won't work. 27 | -------------------------------------------------------------------------------- /docs/aspects/variants/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Variants } from './variants.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/variants/variants.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | 5 | import { Variants } from './index'; 6 | 7 | export const VariantsDocs = () => ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /docs/aspects/variants/variants.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Variants aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Variants } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Variants aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Variants } from '@teambit/aspect-docs.variants'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Variants } from '@teambit/aspect-docs.variants'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/yarn/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Yarn } from './yarn.mdx'; 2 | -------------------------------------------------------------------------------- /docs/aspects/yarn/yarn.composition.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 3 | import { MDXLayout } from '@teambit/mdx.ui.mdx-layout'; 4 | import { Yarn } from './index'; 5 | 6 | export const YarnDocs = () => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/aspects/yarn/yarn.docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Docs for Yarn aspect' 3 | labels: ['docs', 'aspect', 'extensions'] 4 | --- 5 | 6 | import { Yarn } from './index'; 7 | 8 | ## Static Content Page in MDX 9 | 10 | Docs for Yarn aspect 11 | 12 | ### Component usage 13 | 14 | Use your component in any mdx file: 15 | 16 | ```js 17 | import { Yarn } from '@teambit/aspect-docs.yarn'; 18 | 19 | ; 20 | ``` 21 | 22 | ### Render with theme and MDX providers 23 | 24 | ```js 25 | import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'; 26 | import { MDXLayout } from '@teambit/ui.mdx-layout'; 27 | import { Yarn } from '@teambit/aspect-docs.yarn'; 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/aspects/yarn/yarn.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: yarn 3 | title: Yarn 4 | slug: /aspects/yarn 5 | description: Enables the use of Yarn 2 in a Bit workspace 6 | --- 7 | 8 | Check out the [Yarn Aspect](https://bit.dev/teambit/dependencies/yarn) on Bit.dev 9 | 10 | 11 | Yarn is a Bit aspect that enables the use of the Yarn **v2** package manager in a Bit workspace (the Yarn aspect utilizes Yarn's programmatic API). 12 | The yarn aspect is used **indirectly** by the 'Dependency Resolver' 13 | 14 | ## Quickstart 15 | 16 | To start using the yarn aspect as a package manager for your workspace, set the Dependency Resolver `packageManager` property to 'yarn'. 17 | 18 | ```json 19 | { 20 | "teambit.dependencies/dependency-resolver": { 21 | "packageManager": "teambit.dependencies/yarn" 22 | } 23 | } 24 | ``` 25 | 26 | > Package manager are only configurable at the workspace configuration root-level. 27 | > That means, different components in the same workspace cannot use different package manager. 28 | 29 | --- 30 | 31 | > Packages on NPM will be installed from Bit.dev's registry instead of NPM's. This will be done using the user's Bit credentials. 32 | -------------------------------------------------------------------------------- /docs/bit-dot-dev/my-account.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: my-account 3 | title: Account Features 4 | --- 5 | 6 | ## User settings 7 | 8 | To view the profile page, log-in and click on your avatar in the top right corner. Then click on the profile name and select the settings page where you can: 9 | 10 | - Change the avatar 11 | - Update password 12 | - Add and update email addresses 13 | - Delete organizations 14 | - Leave organizations 15 | - Delete your account 16 | 17 | ## Organization settings 18 | 19 | To view an organization, select the organization from the avatar's drop-down list, and click the settings button near the top-right of the page. An organization's admin can: 20 | 21 | - Click on the edit button to change the organization's image, name, homepage, or description. 22 | - Click on the Settings button to edit the organization's members, billing settings, and integrations. 23 | 24 | ## Scope management 25 | 26 | Change the settings of a scope by clicking the settings button above the side-bar on the scope page. You can access the scope page via the url: `bit.dev//`. To make modifications to the scope you need to have admin privileges on the scope. 27 | 28 | ### Scope settings 29 | 30 | On the scope page you can edit the scope's description, or access the settings page to: 31 | 32 | - Change the scope's visibility (public / private). 33 | - Change the scope's description. 34 | - Delete the scope from bit.dev. 35 | - Manage the users that can access the scope and change their permissions. 36 | 37 | ### Users and Roles 38 | 39 | Use the permission tab of the scope to add, remove, and change permissions for users for the scope. 40 | A scope's members are assigned with 3 possible roles: 41 | 42 | | Role | Admin | Developer | Viewer | 43 | |---|---|---|---| 44 | | View Components* | Yes | Yes | Yes | 45 | | Import Components* | Yes | Yes | Yes | 46 | | Install Components* | Yes| Yes | Yes | 47 | | Export Components | Yes| Yes | No | 48 | | Manage members | Yes | No | No | 49 | | Edit scope's information | Yes | No | No | 50 | | Define integrations | Yes | No | No | 51 | 52 | > *Viewing, importing and installing is available for all users for public scopes. 53 | -------------------------------------------------------------------------------- /docs/building-with-bit/component-compositions.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: component-compositions 3 | title: Compositions 4 | --- 5 | 6 | 7 | 8 | 'Compositions' are, essentially, small apps that exhibit and test a component in various potential usages. 9 | They serve as a way to run manual and automated integration tests, before such integrations are done by consumers of that component. 10 | 11 | Moreover, a component's composition is a way to demonstrate that component for other developers looking to use it, and non-developers, such as designers and product managers, looking to inspect it. 12 | 13 | Adding compositions to a component is done by creating a file in the component's directory, using the `*.composition.*` pattern. 14 | 15 | For example: 16 | 17 | ```bash {3} 18 | └── ui/button 19 | ├── index.tsx 20 | ├── button.composition.tsx 21 | └── button.tsx 22 | ``` 23 | 24 | Each composition is a standard usage of a component (requiring no special syntax) that is exported with a name. 25 | 26 | For example, the following is a composition of the 'button' component. 27 | 28 | ```js 29 | import React from 'react'; 30 | import { Button } from './button'; 31 | 32 | export const BasicButton = () => { 33 | return 87 | ``` 88 | 89 | ## FAQ 90 | 91 | ### How to import component to a different path? 92 | 93 | In case you need to set a different path for a specific imported component, use the `--path` option with the `bit import` command. 94 | -------------------------------------------------------------------------------- /docs/building-with-bit/creating-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: creating-components 3 | title: Creating Components 4 | --- 5 | 6 | import BitCreateComponent from '@site/docs/components/components/react/bit-create-component-card.md' 7 | import BitTemplates from '@site/docs/components/commands/bit-templates.md' 8 | import TestDependencies from '@site/docs/components/components/react/test-dependencies.md' 9 | import BitmapExample from '@site/docs/components/components/bitmap-example.md' 10 | import NameSpaces from '@site/docs/components/components/namespaces.md' 11 | import BitShow from '@site/docs/components/components/bit-show.md' 12 | import BitCreateMultipleComponent from '@site/docs/components/components/react/bit-create-multiple-components.md' 13 | import Path from '@site/docs/components/components/path.md' 14 | 15 | To create new components use the `bit create` command. This will create a generic component for you with all it's necessary files. 16 | 17 | ## Using Bit Create 18 | 19 | 20 | 21 | ### Namespaces 22 | 23 | 24 | 25 | ### Component Location 26 | 27 | 28 | 29 | ## Bitmap File 30 | 31 | 32 | 33 | ## Installing Dependencies 34 | 35 | 36 | 37 | ## Creating multiple Components 38 | 39 | 40 | 41 | ## Bit Templates 42 | 43 | 44 | -------------------------------------------------------------------------------- /docs/building-with-bit/exporting-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: exporting-components 3 | title: Exporting Components 4 | --- 5 | 6 | ## Exporting 7 | 8 | A scope is where the release versions of independent components are stored. Scopes are used both locally and remotely: 9 | 10 | - **Local scopes** store "staged" components that are ready to be exported from the local environment to a remote scope. You'll find your local scope in the `.bit` or `.git/bit` directory inside your workspace directory. 11 | - [**Remote scopes**](/essentials/scopes), either on Bit.dev or other self-hosted Bit servers, store exported components that are available to be used by other repositories. 12 | 13 | A single server may host multiple scopes. Each of these scopes groups together components that are related to each other by function or purpose. Each scope naturally corresponds to a specific team of developers (and even non-developers). 14 | 15 | So far, we've tracked a component and tagged it. As mentioned earlier, the tagging process prepares the component to be exported to a remote scope by running the build pipeline on it and storing it in the local scope with a new version number. 16 | 17 | ## Setting up your remote Bit Scope 18 | 19 | To set a remote scope for your soon-to-be exported components, use the `workspace.jsonc` configuration file. 20 | 21 | ```json title="workspace.jsonc" 22 | { 23 | "$schema": "https://static.bit.dev/teambit/schemas/schema.json", 24 | "teambit.workspace/workspace": { 25 | "name": "getting-started-harmony", 26 | "icon": "https://static.bit.dev/bit-logo.svg", 27 | "defaultScope": "my-org.my-scope" 28 | }, 29 | ``` 30 | 31 | The `defaultScope` field suggests it can be overridden. To learn about setting different scopes for different sets of components in your workspace. 32 | 33 | ### Scope on bit.dev 34 | 35 | To host components on [Bit.dev](https://bit.dev), [create a scope](https://bit.dev/~create-scope). 36 | 37 | create a scope 38 | 39 | ### On premise Scopes 40 | 41 | If you are self-hosting a Bit server, you need to ensure you create a Bit server. 42 | 43 | ## Export all staged components to a remote scope 44 | 45 | Run the `bit export` command to have Bit publish all versioned components. In our case it is only the previously tagged 'Button' component. 46 | 47 | ```bash 48 | bit export 49 | ``` 50 | 51 | :::tip 52 | 53 | Use `bit export --help` or `bit export -h` to get a list of available options for this command. 54 | 55 | ::: 56 | 57 | ## Post export operations 58 | 59 | The export process updates your workspace' `.bitmap` file. Make sure to commit these changes to Git. 60 | 61 | ```bash 62 | git commit -am 'updated .bitmap file after a successful export' 63 | ``` 64 | -------------------------------------------------------------------------------- /docs/building-with-bit/importing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: importing-components 3 | title: importing Components 4 | --- 5 | 6 | Importing a component, from a remote scope to your local workspace, allows you to maintain the component in your own workspace and even build, version and export it back to its remote scope with a new bumped version. 7 | 8 | An imported component can have its configurations changed using the (hosting) workspace configuration file, and developed using the Workspace UI and the component dev environment (testing, compiling, etc.). 9 | 10 | Once a component is imported and placed in a directory named `.` as a default, it is linked to the `node_modules` directory so that it an be consumed by other components in the workspace using its package name (and not its relative path). 11 | 12 | The component's compiled code will be available in the component package `dist` directory. 13 | Modifying the component's source code will trigger a compilation process that will result in new dist files. 14 | 15 | ## Import a single component 16 | 17 | A single component is imported using its ID. A component ID has the following pattern: 18 | 19 | `scope-owner.scope-name/namespace/component-name` 20 | 21 | For example, to import the `dots-loader` component from the `teaching` scope, owned by `teambit` and namespaced as `ui/elements`: 22 | 23 | ```bash 24 | bit import teambit.teaching/ui/elements/dots-loader 25 | ``` 26 | 27 | To replace the default directory for that component, we'll add the `--path` flag and the preferred directory. 28 | 29 | ## Import all components in a scope or namespace 30 | 31 | To import all components from the `teaching` scope, replace the namespace and component name with the `*` sign: 32 | 33 | ```bash 34 | bit import teambit.teaching/* 35 | ``` 36 | 37 | To limit our import to components under the `ui/elements` namespaces, replace just the component name: 38 | 39 | ```bash 40 | bit import teambit.teaching/ui/* 41 | ``` 42 | 43 | ## Import the latest versions of components in a workspace 44 | 45 | To get the latest versions of every imported component in our workspace run: 46 | 47 | ```bash 48 | bit import 49 | ``` 50 | 51 | :::note the workspace component list 52 | The list of authored/imported components in a workspace can be found using the `bit list` command 53 | or by exploring the workspace `.bitmap` file. 54 | ::: 55 | 56 | ## Using local/remote components 57 | 58 | Bit does not allow referencing one component to another, using relative paths. This is done in order to keep components independent and context-agnostic. 59 | 60 | Tracked components, locally tagged components and imported components should all be `imported` / `required` into other components using their node_module name. 61 | 62 | For example: 63 | 64 | ```js 65 | import { Button } from '@my-scope/button' 66 | ``` 67 | 68 | ## Change the configurations of an imported component 69 | 70 | Imported components can have their configurations modified using the workspace configuration file (`workspace.jsonc`). 71 | That includes configurations that are set manually but also those set programmatically by other extensions (for example, the environment). 72 | -------------------------------------------------------------------------------- /docs/building-with-bit/installing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: installing-components 3 | title: Installing Components 4 | --- 5 | 6 | Installing component packages (or any other packages), in a Bit workspace, is done only by using the `bit install` command which will use the [Dependency Resolver](/aspects/dependency-resolver) extension. 7 | 8 | :::note Package Managers and Bit 9 | Never use package managers to install packages in a Bit workspace. 10 | ::: 11 | 12 | ### Bit.dev package registry 13 | 14 | By default, the Dependency Resolver installs packages from Bit.dev's registry. 15 | The authentication for that is done using your Bit.dev token, listed under `@bit`, in your `.npmrc` file. 16 | If that token cannot be found in the `.npmrc` file, it will look for it in your global Bit configurations (use the bit config command to output your `user.token` property). 17 | 18 | If your npm is configured to use a registry different than npmjs's - the Dependency Resolver will use that configured registry, instead. 19 | 20 | ## Installing component packages in a non-Bit project 21 | 22 | - To install component packages in a non-Bit project, using npm or Yarn, configure your package manager to use your **scope owner** name 23 | (Bit username or organization) as a scoped registry: 24 | 25 | ```bash 26 | npm config set @scope-owner:registry https://node.bit.dev 27 | ``` 28 | 29 | - Use npm login to login using your Bit credentials: 30 | 31 | ```bash 32 | npm login --registry=https://node.bit.dev --scope=@scope-owner 33 | ``` 34 | 35 | ## Import vs Install 36 | 37 | Components can be consumed by your own project either by 'installing' or 'importing' them. 38 | 39 | Since Bit components are much more than a distributable node package, they can either be 'imported' into a project, 40 | to have all their data available in your workspace (assets, Bit configurations, etc), or installed just like any other package. 41 | 42 | - Installed components cannot be explored using the workspace UI 43 | - Installed components cannot be maintained and developed by the workspace. They cannot be configured by the `workspace.jsonc` or go through the build and tag processes. 44 | - Installed components will not be automatically tested, built and tagged when their dependencies are modified (in the workspace). 45 | 46 | ### Using the bit install command 47 | 48 | When using the `bit install` command to install all the workspaces's dependencies, the [Dependency Resolver extension](/aspects/dependency-resolver) extension (in charge of that task) will 49 | make sure to import (and not install) components that should be managed by the workspace (these are components that are listed in the workspace `.bitmap` file). 50 | Once the components are imported, they will be symlinked to the workspace `node_modules` directory so that they could be used just like any other component/package. 51 | -------------------------------------------------------------------------------- /docs/building-with-bit/removing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: removing-components 3 | title: Removing Components 4 | --- 5 | 6 | Refactoring code often causes components to become obsolete or irrelevant. This is where removing and deprecating components becomes useful and necessary. 7 | 8 | ## Remove a component from a workspace 9 | 10 | Removing a local component has no ripple effects. This is only relevant to the consuming project. To do so specify the component ID to remove. 11 | 12 | ```bash 13 | bit remove ui/button 14 | ``` 15 | 16 | ```bash 17 | successfully removed components: 18 | ui/button 19 | ``` 20 | 21 | Bit triggers a warning when trying to remove modified components. Use the `--force` flag to force it. 22 | 23 | :::tip 24 | 25 | Use `bit remove --help` or `bit remove -h` to get a list of available options for this command. 26 | 27 | ::: 28 | 29 | ### Effects of deleting components from a workspace 30 | 31 | Other components in the workspace may depend on removed components. Meaning that removing these dependencies affects dependent components. Several cases may occur when deleting a local component: 32 | 33 | - A _new_ component that depends on a _removed component_ is not affected. This is because Bit did not isolate the component. 34 | - A _staged_ component that depends on a _removed component_ causes Bit to stop the remove command. To force it, we use the `--force` flag. 35 | - An _exported component_ that depends on a local _removed component_ is not affected. This is because an exported component is isolated and immutable. So deleting a local dependency does not affect. 36 | 37 | ## Remove a component from a remote scope 38 | 39 | To remove a component from a remote scope, specify the full component ID. 40 | 41 | ```bash 42 | bit remove username.your-scope/ui/button --remote 43 | ``` 44 | 45 | ```bash 46 | successfully removed components: 47 | username.your-scope/ui/button 48 | ``` 49 | 50 | ### Effects of deleting components 51 | 52 | To better understand how Bit handles deleted components, let's follow this example: 53 | 54 | - The `button` component is in the `ui` scope. 55 | - A `card` component depends on the `button` component and is also in `ui` scope. 56 | - A `login` component also depends on the `button` component but is in another scope - `admin`. 57 | 58 | This is what happens if we remove the `button` component: 59 | 60 | - Bit notifies that the `card` component depends on the `button` component. If we want to remove it, Bit asks to use the `--force` flag. This is because scopes don't cache their components. 61 | - The `card` component has a missing dependency of `button` component. A refactor for `card` is critical for it to work. 62 | - The`login` component that also depends on the `button` component is not affected by the removal of the `button` component. This is because scopes keep a cache of external dependencies. 63 | - It is still possible to source the `login` component to another consumer project, as the cache works for Bit. 64 | - Installing the `login` component using npm fails because npm tries to install the `button` component from its original scope. 65 | 66 | ## Deprecate a component in a remote scope 67 | 68 | To deprecate a component in a remote Scope, specify the full component ID and use the `--remote` option. 69 | 70 | ```bash 71 | bit deprecate username.your-scope/ui/button --remote 72 | deprecated components: username.your-scope/ui/button 73 | ``` 74 | 75 | ## Deprecating a component in a workspace 76 | 77 | To deprecate a component in a workspace, specify the component ID. 78 | 79 | ```bash 80 | bit deprecate ui/button 81 | deprecated components: ui/button 82 | ``` 83 | 84 | :::tip 85 | 86 | Use `bit deprecate --help` or `bit deprecate -h` to get a list of available options for this command. 87 | 88 | ::: 89 | -------------------------------------------------------------------------------- /docs/building-with-bit/tracking-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: tracking-components 3 | title: Tracking Components 4 | --- 5 | 6 | import { Image } from '@site/src/components/image' 7 | import BitCreate from '@site/docs/components/components/react/bit-create-component-card.md' 8 | import BitTemplates from '@site/docs/components/commands/bit-templates.md' 9 | import NameSpaces from '@site/docs/components/components/namespaces.md' 10 | import BitAdd from '@site/docs/components/components/bit-add.md' 11 | 12 | The tracking process translates sets of files into a single component that is semantically understood by Bit. It is the first step in a component's journey to complete independency. 13 | 14 | When a component gets tracked, Bit does the following: 15 | 16 | - It determines which files should be be included in that component (see the result in the .bitmap file) 17 | - It determines the component ID 18 | - It determines the component entry point and its dependency graph 19 | - It creates a package in the workspace `node_modules` directory 20 | - It renders the component in the Workspace UI 21 | 22 | ## Using Bit Create 23 | 24 | Tracking components is done automatically if you are using `bit create` to create your components. 25 | 26 | 27 | 28 | 29 | 30 | ## Pre-existing Components 31 | 32 | Components not created with the `bit-create` command will need to be manually added to the workspace using the `bit-add` command. 33 | 34 | ### Track a single component 35 | 36 | 37 | 38 | #### Namespaces 39 | 40 | 41 | 42 | A tracked component should appear in the Workspace UI navigation bar with an "N" to its right, to signify that it is a new component. 43 | 44 | new component 45 |
46 | 47 | :::note Check for tracking issues 48 | Use the `bit status` command to check for tracking issues. 49 | ::: 50 | 51 | ### Track multiple components 52 | 53 | To track multiple components, set the path to the common directory and use the `*` wildcard. 54 | 55 | For example: 56 | 57 | ```bash 58 | bit add path/to/common/path/* 59 | ``` 60 | 61 | ### Set an entry point for a component 62 | 63 | The default entry point is `index.ts`/`index.js`. To set a different entry point: 64 | 65 | ```bash 66 | bit add --main 67 | ``` 68 | 69 | For example 70 | 71 | ```bash 72 | bit add components/ui/button --main main.js 73 | ``` 74 | 75 | ## Untracking components 76 | 77 | ```bash 78 | bit untrack 79 | ``` 80 | 81 | ## Best Practices 82 | 83 | - Start tracking components bottom-up, so all components that are shared by other components are tracked first. 84 | - Plan and arrange components in namespaces according to their functionality, similar to the way you would arrange them in folders in a project. 85 | - Review the package.json in your original projects to ensure proper definition of dependencies. 86 | - If you are using path aliases in your `import` statements, make sure you define Bit's custom paths resolution configuration. 87 | -------------------------------------------------------------------------------- /docs/cli/cli-reference.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: cli-reference 3 | title: CLI Reference 4 | slug: /cli 5 | --- 6 | 7 | TODO 8 | see Gilad 9 | -------------------------------------------------------------------------------- /docs/community/resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: resources 3 | title: Resources 4 | --- 5 | 6 | ### Talks 7 | 8 | 9 | 10 | ### Podcasts 11 | 12 | [The Component Marketplace](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-59-the-component-marketplace-with-alexander-karan-of-climateclever/) - HeavyBit JAMStack Radio Ep. 59 (Brian Douglas & Alexander Karaan) 13 | 14 | ### Articles 15 | 16 | [How we build Micro Frontends](https://devblogs.microsoft.com/startups/building-micro-frontends-with-components/) - Microsoft CTO Cookbook 17 | 18 | ### Slide Decks 19 | 20 | [Bit.dev hosting vs. self-hosting ->](https://www.slideshare.net/JonathanSaring/bitdev-hosting-vs-oss) 21 | -------------------------------------------------------------------------------- /docs/community/talk-to-us.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: talk-to-us 3 | title: Talk To Us 4 | --- 5 | 6 | ## Bit.dev 7 | 8 | - #### [Explore our OSS components](https://bit.dev/teambit/~scopes) 9 | 10 | ## Slack 11 | 12 | - #### [Join Slack community](https://join.slack.com/t/bit-dev-community/shared_invite/zt-o2tim18y-UzwOCFdTafmFKEqm2tXE4w) 13 | 14 | ## GitHub 15 | 16 | - #### [Bit on GitHub](https://github.com/teambit/bit) 17 | 18 | - #### [Team Bit on GitHub](https://github.com/teambit/bit) 19 | 20 | ## Twitter 21 | 22 | - #### [@bitdev\_ on Twitter](https://twitter.com/bitdev_) 23 | 24 | ## Medium 25 | 26 | - #### Join 2M developers reading [Bits and Pieces](https://blog.bitsrc.io/) 27 | 28 | - #### [Bit related articles](https://blog.bitsrc.io/tagged/bit) 29 | 30 | ## Youtube 31 | 32 | - #### [Build with Bit on YouTube](https://www.youtube.com/channel/UCuNkM3qIO79Q3-VrkcDiXfw) 33 | 34 | ## Monthly Newsletter 35 | 36 | We send short monthly updates on new features, interesting stories, and stuff that we really think is worth the space in your inbox. To subscribe, just [sign up to Bit.dev](https://bit.dev/signup) and check the “I agree to get occasional updates” box. We do not spam. 37 | -------------------------------------------------------------------------------- /docs/component-architecture/build-like-google.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: build-like-google 3 | title: Build Like Google 4 | --- 5 | 6 | Many teams and developers strive to "build like google" which means "have all code sorted in a single codebase". This is a tremendous task to accomplish, as there are no source code management software that can handle large scale code bases with the required tooling to sustain a productive workflow. 7 | 8 | If we break down the actual requirements from such a large monorepo we understand the following: 9 | 10 | - Google gain feature ownership by managing permissions in sub-trees of their repository. 11 | - Different teams create dependencies in the codebase to use each other's implementations. 12 | 13 | This means that a possible pragmatic approach for implementing a Google-like code architecture is enabling teams to create different modules and apps, and have managed dependency graph for the entire organization, thus allowing teams to stay up-to-date with latest changes. 14 | 15 | When structuring the problem like that we see that Bit is the most pragmatic way for teams to work within a single monorepo. The main different it that unlike Google, Bit is a Virtual Monorepo as it is distributed on many scopes and only by understanding the complex dependencies between components, we can "connect" all distributed components to a single monorepo. -------------------------------------------------------------------------------- /docs/component-architecture/composing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: composing-components 3 | title: Composing Components 4 | --- 5 | 6 | Composing Components -------------------------------------------------------------------------------- /docs/component-architecture/naming-components2.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: naming-components 3 | title: Naming Components 4 | --- 5 | 6 | Naming Components -------------------------------------------------------------------------------- /docs/component-architecture/organizing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: organizing-components 3 | title: Organizing Components 4 | --- 5 | 6 | Organizing Components -------------------------------------------------------------------------------- /docs/component-architecture/theming-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: theming-components 3 | title: Themeing Components 4 | --- 5 | 6 | Theming Components -------------------------------------------------------------------------------- /docs/component-architecture/thinking-in-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: thinking-in-components 3 | title: Thinking in Components 4 | --- 5 | 6 | When it comes to components the easy and fast way is to just build the component as we see it. A button, a hero or card component for example. We don't think about reusability because we don't have to. The aim is to deliver fast. 7 | 8 | But what if we thought about things differently. What if we saw the bigger picture as not just the application you are creating but the future long term goal. 9 | 10 | What if we thought about building components so that they are extendable, theme-able and reusable across different code bases. If we could do that then we would be able to deliver applications at a much faster pace. We would be able to scale much easier. 11 | 12 | Components should have a sole responsibility. In other words, a component represents a clear and meaningful functionality. Each component should include the code, styling, unit tests, documentation, and usage examples. 13 | 14 | 15 | 16 | ## Why Should Teams own Features? 17 | 18 | - Helps build mastery and allows autonomy 19 | - Communication via APIs 20 | - Separation of concerns 21 | - Build together but stay independent 22 | 23 | ## Why should Components be Reusable? 24 | 25 | - Reduce duplicated code 26 | - Easier maintenance 27 | - Faster development 28 | - Sharing is caring 29 | 30 | ## Why should Components be Themable? 31 | 32 | - Easier to reuse 33 | - One component many options 34 | - Easily change branding 35 | - Support multiple themes: dark / light / high-contrast / multiple brands 36 | 37 | ## How do we discover Components? 38 | 39 | - Sharing components to the cloud 40 | - Naming our components correctly 41 | - Organizing our components 42 | - Labeling our components 43 | 44 | ## How do we improve consumer’s dev experience? 45 | 46 | - Thinking about how the component will be used 47 | - Documenting our components 48 | - Creating compositions 49 | - Tests as a documentation feature 50 | - Live component playground 51 | 52 | ## How should we reuse Components? 53 | 54 | - Think about components as services 55 | - Integrate components together to form concrete components 56 | - Share those concrete components for other teams 57 | - By not reinventing the wheel 58 | 59 | ## How do we trust our Components? 60 | 61 | - By creating tests 62 | - Making the tests easily available 63 | - Simulations 64 | - Dependent testing 65 | 66 | ## How do we think about Component Composition? 67 | 68 | - Props 69 | - State 70 | - Route 71 | - Styling 72 | 73 | ## Why should we think in Components? 74 | 75 | - To build scalable products 76 | - Reuse components across various projects 77 | - Deliver faster in the long term 78 | - Because we want to develop in Harmony 79 | -------------------------------------------------------------------------------- /docs/components/commands/bit-init.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-init 3 | title: Bit Init 4 | --- 5 | 6 | Initialize a Bit Harmony workspace and then manually configure the environment and install any peer dependencies needed. 7 | 8 | ```bash 9 | bit init --harmony 10 | ``` 11 | 12 | Once installed you should get the following message: 13 | 14 | ```bash 15 | successfully initialized a bit workspace. 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/components/commands/bit-templates.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-templates 3 | title: Bit Templates 4 | --- 5 | 6 | To see a list of component templates available: 7 | 8 | ```bash 9 | bit templates 10 | ``` 11 | 12 | If you would like to create your own [component template generator](/extending-bit/creating-a-custom-generator) then check out our guide in Extending Bit 13 | -------------------------------------------------------------------------------- /docs/components/commands/git-commit-bitmap.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: git-commit-bitmap 3 | title: Git Commit Bitmap 4 | --- 5 | 6 | Once the exporting process completes, the `.bitmap` file gets updated to reflect that new state. Make sure to track it with git. 7 | 8 | ```bash 9 | git commit -am "updated .bitmap file after a successful export" 10 | ``` 11 | -------------------------------------------------------------------------------- /docs/components/components/bit-add.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-add 3 | title: Bit Add 4 | --- 5 | 6 | ```bash 7 | bit add ui/button --namespace ui 8 | ``` 9 | 10 | Namespaces also support nesting. 11 | 12 | ```bash 13 | bit add ui/base/button --namespace ui/base 14 | ``` 15 | -------------------------------------------------------------------------------- /docs/components/components/bit-create-warning.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-create-warning 3 | title: Bit Create Warning 4 | --- 5 | 6 | :::note Reset DevServer 7 | You will need to reset the Dev Server every time you use `bit-create`. We are working on this. 8 | ::: 9 | -------------------------------------------------------------------------------- /docs/components/components/bit-show.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-show 3 | title: Bit Show 4 | --- 5 | 6 | Use the `bit show` command followed by your ComponentID to see all details about the component including the env, the files and the dependencies. 7 | 8 | ```bash 9 | bit show ui/button 10 | ``` 11 | 12 | :::tip 13 | 14 | Use `bit show --help` or `bit show -h` to get a list of available options for this command. 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /docs/components/components/bitmap-example.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bitmap-example 3 | title: Bitmap Example 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | After adding a component the `.bitmap` file will be regenerated to show the added component. For now the scope and version will be empty. Below is an example of button component created with the ui namespace. 10 | 11 | 18 | 19 | 20 | ```json 21 | /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */ 22 | 23 | { 24 | "ui/button": { 25 | "scope": "", 26 | "version": "", 27 | "mainFile": "index.ts", 28 | "rootDir": "my-scope/ui/button" 29 | }, 30 | "version": "1.0.39" 31 | } 32 | ``` 33 | 34 | 35 | 36 | 37 | ```json 38 | /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */ 39 | 40 | { 41 | "ui/button": { 42 | "scope": "", 43 | "version": "", 44 | "mainFile": "index.js", 45 | "rootDir": "my-scope/ui/button" 46 | }, 47 | "version": "1.0.39" 48 | } 49 | ``` 50 | 51 | 52 | 53 | 54 | :::note my-scope 55 | Components are created under the default scope name which in this case is `my-scope`. You can configure the default scope name in the `workspace.jsonc` file. 56 | ::: 57 | -------------------------------------------------------------------------------- /docs/components/components/namespaces.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: namespaces 3 | title: Namespaces 4 | --- 5 | 6 | Namespaces serve as folders that organize components in the Workspace or inside a scope on bit.dev. You can use namespaces inside a scope to group related components. 7 | 8 | To namespace a component use the `--namespace` or `-n` option. 9 | 10 | Specifying a namespace helps you organize your components and lets you perform actions on multiple components at once. Namespaces are also useful in specifying overriding rules for all components under a specific namespace. 11 | -------------------------------------------------------------------------------- /docs/components/components/path.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: path 3 | title: Path 4 | --- 5 | 6 | Components are created in a directory using the name configured in your defaultScope in your workspace.jsonc. The defaultScope should be configured as your `username.scope-name` and cannot contain a `/`. If you would like to change the default behavior of where you components are created you should use the `--path` flag. 7 | 8 | ```bash 9 | bit create react-component ui/button --path bit/components 10 | ``` 11 | 12 | :::note Organizing your Components 13 | We don't recommend creating Bit components in your apps src/components folder. You should build components as if they were external modules, as if your components were in a different app. 14 | ::: 15 | -------------------------------------------------------------------------------- /docs/components/components/react/bit-create-button.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-create-button 3 | title: Bit Create 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | Use `bit create` to create an example button component with the namespace of `ui`. This will also create a package in your workspace `node_modules` directory and add your component to the workspace UI. It will also add your component to the `bitmap` file. 10 | 11 | > To see a list of all available templates run the `bit templates` command. 12 | 13 | 20 | 21 | 22 | ```bash 23 | bit create react-component ui/button 24 | ``` 25 | 26 | 27 | 28 | 29 | ```bash 30 | bit create react-component-js ui/button 31 | ``` 32 | 33 | 34 | 35 | 36 | is the same as using the `--namespace` flag: 37 | 38 | 45 | 46 | 47 | ```bash 48 | bit create react-component button --namespace ui 49 | ``` 50 | 51 | 52 | 53 | 54 | ```bash 55 | bit create react-component-js button --namespace ui 56 | ``` 57 | 58 | 59 | 60 | 61 | The following message will appear in the terminal and your component will be created at the location specified and using the [env](/aspects/envs) that has been set in your `workspace.jsonc`. 62 | 63 | ```bash 64 | the following 1 component(s) were created 65 | 66 | my-scope/ui/button 67 | location: my-scope/ui/button 68 | env: teambit.react/react 69 | ``` 70 | 71 | :::tip 72 | 73 | Use `bit create --help` or `bit create -h` to get a list of available options for this command. 74 | 75 | ::: 76 | -------------------------------------------------------------------------------- /docs/components/components/react/bit-create-component-card.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-create-component-card 3 | title: Component Card 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | 16 | 17 | 18 | ```bash 19 | bit create react-component ui/card 20 | ``` 21 | 22 | 23 | 24 | 25 | ```bash 26 | bit create react-component-js ui/card 27 | ``` 28 | 29 | 30 | 31 | 32 | is the same as 33 | 34 | 41 | 42 | 43 | ```bash 44 | bit create react-component card --namespace ui 45 | ``` 46 | 47 | 48 | 49 | 50 | ```bash 51 | bit create react-component-js card --namespace ui 52 | ``` 53 | 54 | 55 | 56 | 57 | The following message will appear in the terminal and your component will be created at the location specified and using the [env](/aspects/envs) that has been set in your `workspace.jsonc`. 58 | 59 | ```bash 60 | the following 1 component(s) were created 61 | 62 | my-scope/ui/card 63 | location: my-scope/ui/card 64 | env: teambit.react/react 65 | ``` 66 | 67 | :::tip 68 | 69 | Use `bit create --help` or `bit create -h` to get a list of available options for this command. 70 | 71 | ::: 72 | -------------------------------------------------------------------------------- /docs/components/components/react/bit-create-multiple-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-create-multiple-components 3 | title: Bit Create Multiple Components 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | Create multiple components by adding more component names after the command. 10 | 11 | 18 | 19 | 20 | ```bash 21 | bit create react-component ui/component1 ui/component2 design/component1 22 | ``` 23 | 24 | 25 | 26 | 27 | ```bash 28 | bit create react-component-jsx ui/component1 ui/component2 design/component1 29 | ``` 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/components/components/react/test-dependencies.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: test-dependencies 3 | title: Test Dependencies 4 | --- 5 | 6 | Our component contains a `spec.tsx` file that includes a dependency for Testing Library. If you don't already have this library installed you can install dependencies using `bit install`: 7 | 8 | ```bash 9 | bit install @testing-library/react 10 | ``` 11 | -------------------------------------------------------------------------------- /docs/components/components/styles.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: styles 3 | title: Styles 4 | --- 5 | 6 | :::note Styles 7 | Components created with `bit create` have no styles added to them. To add styles create a CSS/SCSS file and import it into your component's tsx file and install any necessary dependencies. 8 | ::: 9 | -------------------------------------------------------------------------------- /docs/components/examples/react/card.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: card 3 | title: Card 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | 16 | 17 | 18 | ```jsx {2} title="card.tsx" 19 | import React from 'react' 20 | import { Button } from '@my-scope/ui.button' 21 | 22 | export interface CardProps extends React.HTMLAttributes {} 23 | 24 | export const Card = ({ children, ...rest }: CardProps) => { 25 | return ( 26 |
27 | 28 |
29 | ) 30 | } 31 | ``` 32 | 33 | 34 | 35 | 36 | ```jsx {2} title="card.jsx" 37 | import React from 'react' 38 | import { Button } from '@my-scope/ui.button' 39 | 40 | export const Card = ({ children, ...rest }) => { 41 | return ( 42 |
43 | 44 |
45 | ) 46 | } 47 | ``` 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/components/install/bvm-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bvm-intro 3 | title: BVM Intro 4 | --- 5 | 6 | [BVM](https://github.com/teambit/bvm) is a version manager for Bit. 7 | Using BVM makes it easier to install and manage multiple versions of Bit in a single environment. -------------------------------------------------------------------------------- /docs/components/install/bvm-version.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bvm version 3 | title: Bvm Version 4 | --- 5 | 6 | To check your version of BVM and Bit and see what the latest version is run the `bvm version` command. 7 | 8 | ```bash 9 | bvm version 10 | ``` 11 | -------------------------------------------------------------------------------- /docs/components/install/install-bit.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: install-bit 3 | title: Install Bit 4 | --- 5 | 6 | Once BVM is installed you can install the latest version of Bit using the `bvm install` command. 7 | 8 | ```bash 9 | bvm install 10 | ``` 11 | -------------------------------------------------------------------------------- /docs/components/install/install-bvm-errors.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: install-bvm-errors 3 | title: Install BVM Errors 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | --- 10 | 11 | **If BVM isn't recognized in your terminal after installing it via npm, then please run the following:** 12 | 13 | 19 | 20 | 21 | 27 | 28 | 29 | ```bash 30 | # npm 31 | echo 'export PATH=$(npm bin -g):$PATH' >> ~/.bashrc && source ~/.bashrc 32 | # yarn 33 | echo 'export PATH=$(yarn global bin):$PATH' >> ~/.bashrc && source ~/.bashrc 34 | ``` 35 | 36 | 37 | 38 | 39 | ```bash 40 | # npm 41 | echo 'export PATH=$(npm bin -g):$PATH' >> ~/.zshrc && source ~/.zshrc 42 | # yarn 43 | echo 'export PATH=$(yarn global bin):$PATH' >> ~/.zshrc && source ~/.zshrc 44 | ``` 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ```bash 53 | setx path "%path%;%AppData%\npm" and re-open your terminal 54 | ``` 55 | 56 | 57 | 58 | 59 | 60 | --- 61 | 62 | **If you get the following error while installing bit via BVM:** 63 | 64 | 70 | 71 | 72 | ```bash 73 | global Bit install location was not found in your PATH global variable. 74 | please add the following command to your bash/zsh profile then re-open the terminal: 75 | export PATH=$HOME/bin:$PATH 76 | ``` 77 | 78 | 79 | 80 | 81 | ```bash 82 | global Bit install location was not found in your PATH global variable. 83 | please run the following command and then re-open the terminal: 84 | setx path "%path%;C:\Users\USER\AppData\Local\.bvm" and re-open your terminal 85 | ``` 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /docs/components/install/install-bvm-solution.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: install-bvm-solution 3 | title: Install BVM Solutions 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | 15 | 16 | 17 | 23 | 24 | 25 | ```bash 26 | echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc 27 | ``` 28 | 29 | 30 | 31 | 32 | ```bash 33 | echo 'export PATH=$HOME/bin:$PATH' >> ~/.zshrc && source ~/.zshrc 34 | ``` 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ```bash 43 | setx path "%path%;%LocalAppData%\.bvm" 44 | ``` 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /docs/components/install/install-bvm.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: install-bvm 3 | title: Install BVM 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | 15 | 16 | 17 | ```bash 18 | npm i -g @teambit/bvm 19 | ``` 20 | 21 | 22 | 23 | 24 | ```bash 25 | yarn global add @teambit/bvm 26 | ``` 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/components/install/install-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: install-components 3 | title: Installing Components 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | 9 | Component packages are installed using their package name. The package name usually correlates to the component ID. 10 | 11 | In your component workspace click on the **Use** dropdown, select the **Install** tab to copy your component scope name and component ID. You can then choose between NPM or Yarn to install your component in to another Bit workspace or into a React application. 12 | 13 | 19 | 20 | 21 | ```bash 22 | npm install @orgName/componentScopeName.componentID 23 | ``` 24 | 25 | 26 | 27 | 28 | ```bash 29 | yarn add @orgName/componentScopeName.componentID 30 | ``` 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /docs/components/install/legacy-warning.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: legacy-warning 3 | title: Legacy Warning 4 | --- 5 | 6 | 7 | :::note Have a legacy version of bit installed on your machine? 8 | 9 | Use the `bbit` command to run Bit's latest version and the `bit` command for Bit's legacy version. 10 | ::: -------------------------------------------------------------------------------- /docs/components/install/scoped-registry.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: scoped-registry 3 | title: Scoped Registry 4 | --- 5 | 6 | To install components with npm or yarn you might need to configure @YourUserName as a [scoped registry](https://docs.npmjs.com/misc/scope#associating-a-scope-with-a-registry). 7 | 8 | ```bash 9 | npm config set '@YourUserName:registry' https://node.bit.dev 10 | ``` 11 | -------------------------------------------------------------------------------- /docs/components/quick-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: quick-guide 3 | title: quick-guide 4 | --- 5 | 6 | For those that don't like reading docs feel free to follow the quick guide at the top of each page. 7 | -------------------------------------------------------------------------------- /docs/components/remote-scopes/create-bit-account.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: create-bit-account 3 | title: Create a Bit.dev Account 4 | --- 5 | 6 | By default, Bit is connected to [bit.dev](https://bit.dev) as its default hosting provider. Run the `bit login` command for Bit to open a login/sign-up form for a new personal account. 7 | 8 | ```bash 9 | bit login 10 | ``` 11 | 12 | Once an account has been created successfully, your terminal will greet you with the following message: 13 | 14 | ```bash 15 | successfully added @bit as a scoped registry at /Users//.npmrc 16 | success! logged in as 17 | ``` 18 | 19 | :::tip 20 | 21 | Use `bit login --help` or `bit login -h` to get a list of available options for this command. 22 | 23 | ::: 24 | -------------------------------------------------------------------------------- /docs/components/remote-scopes/create-remote-scope.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: create-remote-scope 3 | title: Create a Remote Scope 4 | --- 5 | 6 | import { Image } from '@site/src/components/image'; 7 | 8 | Open the [create scope](https://bit.dev/~create-scope) tab: 9 | 10 | 1. Choose your account name. 11 | 1. Type `demo-scope` as the scope name. 12 | 1. Select **Harmony** as "scope type". 13 | 1. Click on "Create". 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/components/workspace/default-scope-name.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: default-scope-name 3 | title: Default Scope Name 4 | --- 5 | 6 | - Open the `workspace.jsonc` file 7 | - find the line `"defaultScope": "my-scope"` 8 | - Replace it with your username/organization name, and 'demo-scope' as your scope 9 | 10 | ```json title="workspace.jsonc" 11 | { 12 | "teambit.workspace/workspace": { 13 | "defaultScope": "your-username.demo-scope" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /docs/components/workspace/files-bit-creates.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: files-bit-creates 3 | title: Files Bit Creates 4 | --- 5 | 6 | Bit creates the following files when initializing a new workspace: 7 | 8 | - `workspace.jsonc` - The workspace configuration file that sets rules and policies for the workspace and all its components. 9 | - `.bitmap` - An auto-generated mapping between tracked components in the workspace and their physical location on the file system. The file-structure of your workspace is entirely up to you. 10 | - `.git/bit` (hidden directory) - Your local scope. Where your workspace's component release versions are stored. 11 | 12 | ### Committing to git 13 | 14 | Both the `workspace.jsonc` and the `.bitmap` should be commited to git. The `.git/bit` folder will be automatically ignored by git. 15 | -------------------------------------------------------------------------------- /docs/components/workspace/react-environment.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: react-environment 3 | title: React Environment 4 | --- 5 | 6 | **Uncomment** the following line in your `workspace.jsonc` file, to apply the React development environment on all components in this workspace. 7 | 8 | ```json title="workspace.jsonc" 9 | "teambit.workspace/variants": { 10 | "*": { 11 | "teambit.react/react": { } 12 | } 13 | } 14 | ``` 15 | 16 | Install React and React Dom as peer dependencies: 17 | 18 | ```bash 19 | bit install react --type peer 20 | bit install react-dom --type peer 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/components/workspace/reset-dev-server.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: reset-dev-server 3 | title: Reset the Dev Server 4 | --- 5 | 6 | Any change in the `workspace.jsonc` file requires a restart of the local dev-server. We can stop our server using (Ctl/cmd + c) and run it again using the start command. 7 | 8 | ```bash 9 | bit start 10 | ``` 11 | 12 | :::tip 13 | 14 | Use `bit start --help` or `bit start -h` to get a list of available options for this command. 15 | 16 | ::: 17 | -------------------------------------------------------------------------------- /docs/components/workspace/starting-dev-server.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: starting-dev-server 3 | title: Starting the Dev Server 4 | --- 5 | 6 | The start command starts our dev server, and watches for changes using Hot Module Replacement. It runs different workspace tasks through workers, such as testing, linters and any workspace tasks that are defined by the component. 7 | 8 | :::note Compile Components 9 | 10 | If you created or added a new component, you will need to compile before running the server. If you are following along this guide, you should run `bit compile` to compile your newly created components. 11 | ::: 12 | 13 | ```bash 14 | bit compile 15 | bit start 16 | ``` 17 | 18 | This will open-up your browser on [localhost:3000](http://localhost:3000), or any other available port, and display your workspace with your components. 19 | 20 | :::note Building the UI 21 | 22 | The first time you run the start command it can take a bit of time as it needs to build the whole UI. 23 | ::: 24 | 25 | :::tip 26 | 27 | Use `bit start --help` or `bit start -h` to get a list of available options for this command. 28 | 29 | ::: 30 | -------------------------------------------------------------------------------- /docs/essentials/advantages-of-bit.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: advantages-of-bit 3 | title: Advantages of Bit 4 | --- 5 | 6 | ## Development 7 | 8 | Use any component as a building block for any other component, app, or service. This disconnects development experience from your application's code structure, as any repo can use a component that was originated in any other repo. 9 | 10 | ## Component Teamwork 11 | 12 | _Share components between different projects._ 13 | 14 | A team can work together on a component’s shared code even when projects are located in separate repositories. When a component is updated, or any of its dependencies, a new version is created only for the impacted components. 15 | 16 | Bit manages each component separately. The component's consumer receives only the changes that are relevant to their projects. 17 | 18 | Bit components sharing accelerate teams' work to build applications with hundreds and thousands of components. 19 | 20 | ## Isolated Component Environment 21 | 22 | _Detach the component from the rest of the project._ 23 | 24 | In Bit, each component is created by analyzing all the files and dependencies that build it. Each component becomes a stand-alone entity that can be shared and used across multiple projects. 25 | 26 | Bit provides tools for **building**, **testing**, and **rendering** each component in its own canned environment, so it is clear what the component is built upon. 27 | 28 | Bit verifies that components are loosely coupled from the rest of the project and helps teams to write better code. 29 | 30 | ## Component Discovery 31 | 32 | _Find the right components for the project._ 33 | 34 | Generic search tools can help in locating components only to a certain level. Finding the right component for the project usually requires drilling into the components behind what a search engine can provide. 35 | 36 | Bit provides a Components Hub with dedicated searching and filtering capabilities that can narrow the components search to list only the components that are adequate to your project, by **language**, **framework**, **dependencies**, and **size**. 37 | 38 | Inside the Components Hub, you can see a live version of the component, play with it and create multiple variants of its usage. 39 | 40 | With Bit, components selection is faster. 41 | 42 | ## Integration 43 | 44 | Integration between components happens in build-time. This means each app controls the deployed experiences they provide for their consumers. We use this to ensure consistency across our deployments, as the team who own a product owns what gets built into it. 45 | 46 | With Bit, we decide when we want to adopt incoming changes for components and also be able to adopt some of the updates for some of the components. 47 | 48 | ## Deployment 49 | 50 | Bit makes it easy to recombine our components into any number of services and deploy them to meet our performance needs. Bit is a 100% build-time tool and has no effect on the app/service runtime nor adds any runtime dependencies to your code. This allows us to decide how we deploy our apps and if we want to use any runtime performance tools like code-splitting, etc. 51 | 52 | Bit also allows us to constantly change our deployment architecture when the need arises, as deployment is handled per-component. We can decide to compose different components and create new deployments in no-time. 53 | -------------------------------------------------------------------------------- /docs/essentials/what-is.bit.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: what-is-bit 3 | title: What is Bit 4 | --- 5 | 6 | Bit is a component-based approach to modern application development. 7 | 8 | Bit makes the development and composition of modern applications from independent components repeatable and fun. 9 | 10 | ## Component Driven Development 11 | 12 | Components enable composability by consolidated functionality. Distributed teams can build components and compose them in many apps, producing consistent user experiences, removing code duplications, and improving dev-velocity. 13 | 14 | With Component Driven Development you can take the same composition approach of micro-services and micro-frontends for the system's runtime and move it to a code-architecture style with more granularity. 15 | Instead of building larger "pieces" (service, frontend), compose smaller, more reusable components. Think about **Components as Services** in the codebase and use them to compose more concrete functionality. 16 | 17 | ### Not Just User Interfaces 18 | 19 | Component-driven development has done a lot to scale user interfaces. Frameworks like React, Vue, and Angular improved it by making our apps more modular. 20 | Bit takes the same approach and adds this functionality to anything you build. Any functionality can be consolidated to a component and reused in many apps by many teams. 21 | 22 | ### Build Time Tool 23 | 24 | Bit is a build tool. There are no SDKs or runtime dependencies added to your code. Aside from not affecting your app's performance, this also means you can decide to opt-out of Bit without the cost of refactoring your code. 25 | 26 | ## Distribute the Monolith 27 | 28 | Modern web development made components its first-class citizens. Still many projects are built in monoliths. 29 | Monolithic codebases can be cumbersome to maintain, especially with growing complexity and team size. Distributed teams collaborating on the same apps should happen in distributed codebases. 30 | 31 | ### Distribute Component Development 32 | 33 | With Bit large modern web applications can be composed of different teams building components. Each team can autonomously develop, expose, and integrate components. All components can be easily integrated in build time as your app's building blocks. 34 | 35 | ## Extendability 36 | 37 | Bit is focused on creating a simple and flexible developer experience. 38 | 39 | With over 600 APIs every part of Bit - from dev environments to the UI - can be extended and customized to fit your best experience. And, any extension is a Bit component, so it can be easily integrated and reused in different projects and shared with more people. 40 | 41 | ## Advantages of Bit 42 | 43 | ### Development 44 | 45 | Bit allows using any component as a building block for other components, apps, or services. This disconnects the development experience of components from the codebase structure, as any repository can use any component, regardless of its origin. 46 | 47 | Untangling development from codebase structure and architecture allows us to have more modular codebase. 48 | 49 | ### Integration 50 | 51 | Integration between components happens in build-time. This means each app controls the experiences they provide for consumers. Use this to ensure consistency across our deployments, as the team who own a product owns what gets built into it. 52 | 53 | With Bit, you can decide when to adopt incoming changes for components and decide which component-updates to adopt. 54 | 55 | ### Deployment 56 | 57 | Bit makes it easy to compose components to any number of apps. Bit is a 100% build-time tool and has no effect on the app/service runtime nor adds any runtime dependencies to your code. This allows to decide on deployment strategies on a per-app basis, and utilize runtime performance tools like code-splitting, etc. 58 | -------------------------------------------------------------------------------- /docs/getting-started/composing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: composing-components 3 | title: Using Components 4 | --- 5 | 6 | import BitTemplates from '@site/docs/components/commands/bit-templates.md' 7 | import NameSpaces from '@site/docs/components/components/namespaces.md' 8 | import TestDependencies from '@site/docs/components/components/react/test-dependencies.md' 9 | import BitCreateCardComponent from '@site/docs/components/components/react/bit-create-component-card.md' 10 | import CardExample from '@site/docs/components/examples/react/card.md' 11 | import Styles from '@site/docs/components/components/styles.md' 12 | import BitShow from '@site/docs/components/components/bit-show.md' 13 | import BitCreateWarning from '@site/docs/components/components/bit-create-warning.md' 14 | import BitCreateMultipleComponents from '@site/docs/components/components/react/bit-create-multiple-components.md' 15 | import Path from '@site/docs/components/components/path.md' 16 | 17 | You can compose components together from other components in your workspace or from components in the cloud. 18 | 19 | --- 20 | 21 | 50 | 51 | ## Composing Components 52 | 53 | When importing a component into another component Bit doesn't allow for relative require/import statements, as this couples your component to a specific directory structure, instead you use the component's package name. In the workspace UI you will see the package name for your component which you can copy to import it. 54 | 55 | 56 | 57 | ### Your Component in the Workspace 58 | 59 | In your workspace UI you will now see your card component rendered with the button component inside it. 60 | 61 | ### Component Module Links 62 | 63 | Bit creates a module for each component in the workspace. These modules are linked in the node_modules directory and contains it's build output and auto-generated package.json. To see this in your workspace, browse the `node_modules/@my-scope/ui.button` directory. 64 | 65 | To import a component as a dependency you must use the module link. This way your component is not coupled to a specific directory structure in the workspace, which makes them transferable between workspaces. 66 | 67 | #### Generating module links 68 | 69 | To regenerate module-links for components run the `bit link` command. 70 | 71 | :::tip 72 | 73 | Use `bit link --help` or `bit link -h` to get a list of available options for this command. 74 | 75 | ::: 76 | 77 | --- 78 | 79 | 92 | 93 | ## What's Next? 94 | 95 | It's time to create a [Remote Scope](remote-scope) so you can see you component on the [Bit.dev](https://bit.dev) cloud and then export it and import it into another application. 96 | 97 | Learn more about [tracking components](/building-with-bit/tracking-components) and [removing components](/building-with-bit/removing-components) 98 | -------------------------------------------------------------------------------- /docs/getting-started/exporting-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: exporting-components 3 | title: Exporting Components 4 | --- 5 | 6 | import GitCommitBitmap from '@site/docs/components/commands/git-commit-bitmap.md' 7 | import QuickGuide from '@site/docs/components/quick-guide.md' 8 | 9 | Once you have created your [remote scope](remote-scope) and configured your defaultScope you can then export your components to the remote scope so they can be published and installed in other Bit workspaces or in other web projects. 10 | 11 | 12 | 13 | ## Quick Guide 14 | 15 | 16 | 17 | 1. Tag all components that have been modified 18 | 19 | ```bash 20 | bit tag --all --message "first version" 21 | ``` 22 | 23 | 2. Export your components 24 | 25 | ```bash 26 | bit export 27 | ``` 28 | 29 | --- 30 | 31 | ## Tagging Components 32 | 33 | Before exporting our components we need to tag them using the `bit tag` command. This will create a new version of your component. 34 | 35 | You can tag each individual component 36 | 37 | ```bash 38 | bit tag button --patch --message "first version" 39 | ``` 40 | 41 | Or you can tag all components that have been modified 42 | 43 | ```bash 44 | bit tag --all --message "first version" 45 | ``` 46 | 47 | When component has finished tagging you should see the following message: 48 | 49 | ```bash 50 | new components 51 | (first version for components) 52 | > ui/button@0.0.1 53 | ``` 54 | 55 | :arrow_right: Learn more about the [Versioning Components](/building-with-bit/versioning-components). 56 | 57 | :::tip 58 | 59 | Use `bit tag --help` or `bit tag -h` to get a list of available options for this command. 60 | 61 | ::: 62 | 63 | --- 64 | 65 | ## Export Components 66 | 67 | Once you have tagged your component you can then run the `bit export` command. 68 | 69 | ```bash 70 | bit export 71 | ``` 72 | 73 | When your component has finished exporting you should see the following message: 74 | 75 | ```bash 76 | exported the following 1 component(s): 77 | your-username.demo-scope/ui/button 78 | ``` 79 | 80 | :arrow_right: Learn more about the [Exporting Components](/building-with-bit/exporting-components). 81 | 82 | ### See your Component in the Workspace 83 | 84 | In your workspace go to `https://bit.dev//` to see your exported components. 85 | 86 | :::tip 87 | 88 | Use `bit export --help` or `bit export -h` to get a list of available options for this command. 89 | 90 | ::: 91 | 92 | --- 93 | 94 | ## Committing the Bitmap 95 | 96 | 97 | 98 | --- 99 | 100 | ## What's Next? 101 | 102 | After exporting your component to the remote scope you can then [install your component](installing-components) in another Bit workspace or in any other web project. 103 | -------------------------------------------------------------------------------- /docs/getting-started/initializing-workspace.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: initializing-workspace 3 | title: Initializing a Workspace 4 | --- 5 | 6 | import FilesBitCreates from '@site/docs/components/workspace/files-bit-creates.md' 7 | import BitInit from '@site/docs/components/commands/bit-init.md' 8 | import ReactEnvironment from '@site/docs/components/workspace/react-environment.md' 9 | import QuickGuide from '@site/docs/components/quick-guide.md' 10 | 11 | In order to initialize a workspace you will need to first [install Bit](installing-bit). A Bit Workspace enables you to author and manage multiple independent components in a simple and elegant way. Bit works with Git so you can either add init a new git repo or add Bit to an existing git repo. 12 | 13 | 14 | 15 | ## Quick Guide 16 | 17 | 18 | 19 | 1. Start a new bit project 20 | 21 | ```bash 22 | bit new react 23 | ``` 24 | 25 | 2. Open the directory that has just been created and run `bit start` 26 | 27 | ```bash 28 | cd 29 | bit install 30 | ``` 31 | 32 | --- 33 | 34 | **There are two ways you can initialize a workspace:** 35 | 36 | ## Option 1: Use bit new to create a React workspace 37 | 38 | Create a new Bit workspace for a React environment. This command will initialize a Bit Harmony workspace configured for a React environment complete with demo components and a custom env. 39 | 40 | ```bash 41 | bit new react 42 | ``` 43 | 44 | ```bash 45 | cd 46 | bit install 47 | ``` 48 | 49 | :::tip 50 | 51 | Use `bit new --help` or `bit new -h` to get a list of available options for this command. 52 | 53 | ::: 54 | 55 | ## Option 2: Use bit init to initialize and manually configure your workspace 56 | 57 | 58 | 59 | :::tip 60 | 61 | Use `bit init --help` or `bit init -h` to get a list of available options for this command. 62 | 63 | ::: 64 | 65 | ### Setting a React Environment 66 | 67 | 68 | 69 | --- 70 | 71 | ## Created Files 72 | 73 | 74 | 75 | --- 76 | 77 | ## What's Next 78 | 79 | Once you have initialized a workspace, you can start [creating components](creating-components). 80 | -------------------------------------------------------------------------------- /docs/getting-started/installing-bit.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: installing-bit 3 | title: Installing Bit 4 | --- 5 | 6 | import BVMIntro from '@site/docs/components/install/bvm-intro.md' 7 | import InstallBVM from '@site/docs/components/install/install-bvm.md' 8 | import InstallBit from '@site/docs/components/install/install-bit.md' 9 | import BVMVersion from '@site/docs/components/install/bvm-version.md' 10 | import LegacyWarning from '@site/docs/components/install/legacy-warning.md' 11 | import QuickGuide from '@site/docs/components/quick-guide.md' 12 | import InstallBVMSolution from '@site/docs/components/install/install-bvm-solution.md' 13 | 14 | To use Bit you will need to install it globally. You can do this by first installing BVM, a version manager for Bit and then installing Bit. 15 | 16 | 17 | 18 | ## Quick Guide 19 | 20 | 21 | 22 | 1. Install BVM (Bits Version Manager) 23 | 24 | 25 | 26 | 2. Install Bit using BVM 27 | 28 | ```bash 29 | bvm install 30 | ``` 31 | 32 | --- 33 | 34 | ## Install BVM 35 | 36 | 37 | 38 | 39 | 40 | You should see a progress bar while BVM is installing and once finished you can use BVM to install Bit. 41 | 42 | > :arrow_right: Learn more about [BVM](/reference/using-bvm) and it's commands, including troubleshooting information. 43 | 44 | --- 45 | 46 | ## Install Bit 47 | 48 | 49 | 50 | :::note 51 | 52 | If you get a warning or the `bvm` command is not available you will need to run the code below. You can learn more about this in the [BVM guide](/reference/using-bvm). 53 | 54 | 55 | ::: 56 | 57 | :::tip 58 | Use `bit --help` or `bit -h` to get a list of available options. 59 | 60 | ::: 61 | 62 | --- 63 | 64 | ## BVM and Bit Versions 65 | 66 | 67 | 68 | ### Upgrading BVM 69 | 70 | To upgrade to the latest version of BVM: 71 | 72 | 73 | 74 | ### Upgrading Bit 75 | 76 | To upgrade to the latest version of Bit: 77 | 78 | ```bash 79 | bvm upgrade 80 | ``` 81 | 82 |
83 | 84 | 85 | 86 | --- 87 | 88 | ## What's next? 89 | 90 | Once you have installed Bit and BVM you can then [initialize a workspace](/getting-started/initializing-workspace) so you can manage your components. 91 | -------------------------------------------------------------------------------- /docs/getting-started/installing-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: installing-components 3 | title: Installing Components 4 | --- 5 | 6 | import InstallComponents from '@site/docs/components/install/install-components.md' 7 | 8 | import ScopedRegistry from '@site/docs/components/install/scoped-registry.md' 9 | 10 | Once you have [exported your component](exporting-components) you can install it in another Bit workspace or in any other web project. 11 | 12 | --- 13 | 14 | ## Installing your component 15 | 16 | 17 | 18 | :arrow_right: Learn more about [Installing Components](/building-with-bit/installing-components). 19 | 20 | --- 21 | 22 | ## Configure your Scoped Registry 23 | 24 | 25 | 26 | --- 27 | 28 | ## Use your Component 29 | 30 | You can now use the component in your app by importing it from your node modules and then using it in your app or component. 31 | 32 | ```js title="app.js" 33 | import { Button } from '@yourUserName/componentScopeName.componentID'; 34 | ``` 35 | 36 | ```js title="app.js" 37 | ... 38 | 39 | ... 40 | ``` 41 | 42 | --- 43 | 44 | ## What's Next? 45 | 46 | We have just covered the basics and there is still so much to learn. Now it's time to really think about how you can use Bit to its full advantage. Learn more about [What Bit is](/essentials/what-is-bit) and the [Advantages of Bit](/essentials/advantages-of-bit) or Dive deeper into our [Building with Bit](/building-with-bit/manage-workspace) section and learn how to configure Bit. 47 | -------------------------------------------------------------------------------- /docs/getting-started/remote-scope.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: remote-scope 3 | title: Creating a Remote Scope 4 | --- 5 | 6 | import CreateBitAccount from '@site/docs/components/remote-scopes/create-bit-account.md' 7 | import CreateRemoteScope from '@site/docs/components/remote-scopes/create-remote-scope.md' 8 | import DefaultScopeName from '@site/docs/components/workspace/default-scope-name.md' 9 | import ResetDevServer from '@site/docs/components/workspace/reset-dev-server.md' 10 | import QuickGuide from '@site/docs/components/quick-guide.md' 11 | 12 | You can create a remote scope before or after [initializing a Bit workspace](initializing-workspace). 13 | 14 | ## Quick Guide 15 | 16 | 17 | 18 | 1. Create an account on [Bit.dev](https://bit.dev/) and login 19 | 20 | ```bash 21 | bit login 22 | ``` 23 | 24 | 2. Create a new scope on [Bit.dev](https://bit.dev/) 25 | 3. Update your default scope in the `workspace.jsonc` file with the name of your scope 26 | 27 | --- 28 | 29 | ## What is a Scope? 30 | 31 | [Scope](/essentials/scopes) is a virtual storage for components. Bit uses Scopes to save versions of [Bit Components](/essentials/components) and access them as needed. Set Remote scopes on [Bit.dev](https://bit.dev) or self-hosted Bit servers to share components. 32 | 33 | --- 34 | 35 | ## Create a Bit.dev account 36 | 37 | 38 | 39 | --- 40 | 41 | ## Create a Remote Scope 42 | 43 | 44 | 45 |
46 | 47 | 50 | 51 | --- 52 | 53 | 54 | Now in our node modules we can see we have these components under the correct scope. 55 | 56 | ## Updating the Default Scope 57 | 58 | Once you have setup a [remote scope](/getting-started/remote-scope) you may need to configure the `workspace.jsonc` to reflect the correct username and scope. 59 | 60 | 61 | 62 | --- 63 | 64 | ### Linking your Node Modules 65 | 66 | As we have changed the default scope we now need to make sure our node modules are linked correctly. We can do that with the `bit link` command. 67 | 68 | ```jsx 69 | bit link 70 | ``` 71 | ### Resetting the Dev Server 72 | 73 | 74 | 75 | --- 76 | 77 | ## What's Next? 78 | 79 | Once you have created your remote scope and configured your defaultScope you can then create more components, compose components or [export your components](exporting-components) to the remote scope so they can be published and installed in other Bit workspaces or in other web projects. 80 | -------------------------------------------------------------------------------- /docs/getting-started/whats-next.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: whats-next 3 | title: What's Next? 4 | --- 5 | 6 | Well done on making it to the end of the Getting Started section. So far you have [Installed Bit](installing-bit), [initialized a workspace](initializing-workspace), [created a component](creating-components), [explored the workspace UI](workspace-ui), [created a remote scope](creating-components), [exported a component](exporting-components) and [installed a component](installing-components). 7 | 8 | Are you ready to go deeper. We have so much more to show you. 9 | 10 | > **Using Bit on pre-existing projects** 11 | > 12 | > If you have components in projects you are actively working on, please refer to [this guide](/reference/pre-existing-components). 13 | 14 | ## Essentials 15 | 16 | Check out [Essentials](/essentials/what-is-bit) to understand more about What Bit is and its advantages. 17 | 18 | ## Building with Bit 19 | 20 | Check out [Building with Bit](/building-with-bit/manage-workspace), a more in-depth guide on using Bit including [documenting components](/building-with-bit/documenting-components), [testing components](/building-with-bit/testing-components), [versioning components](/building-with-bit/versioning-components) and much more as well as how to use [Bit with pre-existing components](/reference/pre-existing-components). 21 | 22 | ## Extending Bit 23 | 24 | Bit is fully extendable meaning you can customize it to your liking. Learn how to [create your own component generator](/extending-bit/creating-a-custom-generator) or [add a new tab to the workspace](/extending-bit/adding-a-new-tab) for example. 25 | 26 | ## Component Architecture 27 | 28 | Check out [Component Architecture](/component-architecture/thinking-in-components) to learn more about how to think in Components. 29 | 30 | ## Bit Aspects 31 | 32 | Check out [Bit Aspects](/aspects/aspects-overview), to see the building blocks of Bit. You can implement new Aspects, compose them with Bit's core Aspects and thus extending Bit's core functionality to support advanced features. 33 | 34 | ## Resources 35 | 36 | Check out our [Resources](/resources/conference-talks) section to see talks, live streams, podcasts and articles on Bit. 37 | 38 | ## Bit's Commands 39 | 40 | Check out all of [Bit's commands](/reference/commands) in the Reference Chapter. 41 | 42 | 45 | -------------------------------------------------------------------------------- /docs/getting-started/workspace-ui.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: workspace-ui 3 | title: Workspace UI 4 | --- 5 | 6 | import StartDevServer from '@site/docs/components/workspace/starting-dev-server.md' 7 | import { Image } from '@site/src/components/image' 8 | import QuickGuide from '@site/docs/components/quick-guide.md' 9 | 10 | To see a component in the workspace you first need to [create a component](/getting-started/creating-components). Starting the workspace with no component will result in an error. 11 | 12 | ## Quick Guide 13 | 14 | 15 | 16 | 1. Start the dev server 17 | 18 | ```bash 19 | bit start 20 | ``` 21 | 22 | 2. Explore the UI at [localhost:3000](http://localhost:3000/) 23 | 24 | --- 25 | 26 | ## Starting the dev server 27 | 28 | 29 | 30 | 31 | 32 | :arrow_right: Learn more about the [Workspace UI](/building-with-bit/manage-workspace). 33 | 34 | --- 35 | 36 | ## Local Workspace 37 | 38 | ### Overview 39 | 40 | See an overview of your component complete with a live playground. Documentation of our component is created from the `button.docs.mdx` file. 41 | 42 | 43 | 44 | :arrow_right: Learn more about [Component Documenting](/building-with-bit/documenting-components). 45 | 46 | ### Compositions 47 | 48 | Compositions show you how your component is composed. Compositions are created from the `button.compositions.tsx` file. 49 | 50 | 51 | 52 | :arrow_right: Learn more about [Component Compositions](/building-with-bit/component-compositions). 53 | 54 | ### Tests 55 | 56 | See passing or failing tests. Tests are created from the `button.spec.tsx` file. 57 | 58 | 59 | 60 | :arrow_right: Learn more about [Component Testing](/building-with-bit/testing-components). 61 | 62 | ### Dependencies 63 | 64 | Shows any dependencies that your component has. 65 | 66 | 67 | 68 | 69 | 70 | ### Code 71 | 72 | See all the code files your component has and inspect them as well as a list of your component's dependencies and dev dependencies. 73 | 74 | 75 | 76 | --- 77 | 78 | ## What's Next? 79 | 80 | After Rending the workspace UI you can either create more components, [compose components](composing-components) or create a [Remote Scope](remote-scope) so you can see you component on the [Bit.dev](https://bit.dev) cloud and then export it and import it into another application. 81 | -------------------------------------------------------------------------------- /docs/reference/self-hosted.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bit-oss-server 3 | title: Self-hosted Bit Scope 4 | --- 5 | 6 | Collaborating between Bit components require setting up a remote Scope (server) accessible for all collaborators. You may use [bit.dev](https://bit.dev) as a remote server or setup your own. 7 | 8 | A remote Bit Scope is a host server that hosts components. Bit communication to server is done using HTTP/S protocol. Collaborators set up the Scope as remotes to their local workstation. Then, they export to and import from those scopes. 9 | 10 | ## Prerequisites 11 | 12 | - Docker 13 | 14 | ## Server Setup 15 | 16 | Follow the instructions in [bit docker readme](https://github.com/teambit/bit/blob/master/scripts/docker-teambit-bit) to setup a single remote Bit Scope. 17 | ## Working with Remote Scopes 18 | 19 | ### Setup a remote scope 20 | 21 | Your workstation may be configured to use many remote scopes. Use the `bit remote` command to manage them. 22 | 23 | ```shell 24 | bit remote add http://:3000 25 | ``` 26 | 27 | ### Export to a remote scope 28 | 29 | To export components to a remote scope make sure to configure your `workspace.jsonc` file with a `defaultScope`: 30 | 31 | ```json title="set defaultWorkspace for a workspace 32 | { 33 | "teambit.workspace/workspace": { 34 | "defaultScope": "" 35 | } 36 | } 37 | ``` 38 | 39 | ```json title="set defaultWorkspace for a variant 40 | { 41 | "teambit.workspace/variants": { 42 | "ui/components": { 43 | "defaultScope": "" 44 | } 45 | } 46 | } 47 | ``` 48 | 49 | Ensure `defaultScope` is configured as a `remote` for your workstation: 50 | 51 | ```sh 52 | bit remote 53 | ``` 54 | 55 | Export components 56 | 57 | ```sh 58 | bit export 59 | ``` 60 | 61 | ### Import from remote scope 62 | 63 | to import components stored on the remote scope run: 64 | 65 | ```sh 66 | bit import / 67 | ``` 68 | 69 | ## Resolve between Scopes 70 | 71 | If you have components that depend on components from other scopes, you need to inter-connect the scopes. 72 | For example, a component in scope `A` depends on a component in scope `B`. This means you need to make scope `A` aware of scope `B`. 73 | 74 | ```shell title="Add scope B as a remote for scope A" 75 | bit remote add file:///your-scope-a-directory 76 | ``` 77 | -------------------------------------------------------------------------------- /docs/reference/using-bvm.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: using-bvm 3 | title: Using BVM 4 | --- 5 | 6 | import Tabs from '@theme/Tabs'; 7 | import TabItem from '@theme/TabItem'; 8 | import InstallBVMErrors from '@site/docs/components/install/install-bvm-errors.md' 9 | import InstallBVMSolution from '@site/docs/components/install/install-bvm-solution.md' 10 | 11 | import InstallBVM from '@site/docs/components/install/install-bvm.md' 12 | 13 | [BVM](https://github.com/teambit/bvm) is a version manager for Bit. 14 | Using BVM makes it easier to install and manage multiple versions of Bit in a single environment. 15 | 16 | ## Features 17 | 18 | - **Consistent installation:** All Bit dependencies are bundled together to ensure a consistent and predictable package installation that is not affected by SemVer rules. 19 | - **Fast installation:** A simple and quick installation process that requires no additional time-consuming operations (post-install scripts, etc.) 20 | - **Friendly UX:** Easy upgrades and version management 21 | - **Multiple Bit versions:** Easily switch between Bit versions or even use multiple versions in parallel 22 | 23 | ## Install BVM 24 | 25 | 26 | 27 | 28 | 29 | **Solution:** 30 | 31 | Run the following command: 32 | 33 | 34 | 35 | ## Install Bit 36 | 37 | ```bash title="Install Bit's latest version" 38 | bvm install 39 | ``` 40 | 41 | ```bash title="Upgrade Bit's version" 42 | bvm upgrade 43 | ``` 44 | 45 | ## Using v15 and v14 46 | 47 | If you have a previous version of Bit installed (`bit-bin`), the default binary name for v15 will be `bbit`. 48 | 49 | You can change the binary name for Harmony by running the following command after installing BVM and before installing Bit. 50 | 51 | ```sh 52 | bvm config set DEFAULT_LINK 53 | ``` 54 | 55 | ## Manage versions 56 | 57 | ```bash title="Get version information" 58 | bvm version 59 | ``` 60 | 61 | ```bash title="List available versions" 62 | bvm list --remote 63 | ``` 64 | 65 | ```bash title="List installed versions" 66 | bvm list 67 | ``` 68 | 69 | ```bash title="Remove a local version" 70 | bvm remove 71 | ``` 72 | 73 | ## BVM configurations 74 | 75 | BVM has several configurations 76 | 77 | - `DEFAULT_LINK` - The default command name to be linked to BVM's latest version. 78 | `bit` is linked by default unless a legacy version of Bit is installed. In that case, `bbit` will be linked, instead. 79 | - `BVM_DIR` - The location for BVM 80 | 81 | ```bash title="Get BVM configurations" 82 | bvm config 83 | ``` 84 | 85 | ```bash title="Set BVM configurations" 86 | bvm config set 87 | ``` 88 | -------------------------------------------------------------------------------- /docs/resources/articles.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: articles 3 | title: Articles 4 | --- 5 | 6 | ## How we build Micro Frontends 7 | 8 | In this article, we’ll share how our team is leveraging component-driven design and tools to build micro frontends, to enjoy a more efficient, fast, and scalable modern web development process. 9 | 10 | [Building Micro Frontends with Components](https://devblogs.microsoft.com/startups/building-micro-frontends-with-components/) - _Jonathan Saring, February 2021_ 11 | 12 | ## An intro to Bit for Node projects 13 | 14 | [Bit Harmony: A New Tool To Create and Collaborate on Independent Node.js Components](https://betterprogramming.pub/bit-harmony-a-new-tool-to-create-and-collaborate-on-independent-node-js-components-f871658edcb6) - _Fernando Doglio, April 2021_ 15 | 16 | ## Understanding independent components 17 | 18 | Independent components revolutionize the way we build web projects. 19 | They replace or transform much of today’s software development strategies and architectural styles, and offer more effective ways to collaborate on code. 20 | Even so, it seems like they have kept themselves behind a veil of mist — misunderstood and unexplained. 21 | 22 | This article is an attempt to provide a clear explanation that will enable you to draw your own conclusions, from “first principles”, as to how independent components can be used to fit your own needs. 23 | 24 | [Independent Components: The Web’s New Building Blocks](https://blog.bitsrc.io/independent-components-the-webs-new-building-blocks-59c893ef0f65) - _Eden Ella, April 2021_ 25 | 26 | ## How Bit versions independent components 27 | 28 | This articles explores Bit's unique model for component version-control. 29 | 30 | [How Bit Versions Independent Components](https://blog.bitsrc.io/how-bit-versions-independent-components-719aa9f0af68) - _Eden Ella, April 2021_ 31 | -------------------------------------------------------------------------------- /docs/resources/community.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: community 3 | title: Community 4 | --- 5 | 6 | ## Bit.dev 7 | 8 | - ### [Explore our OSS components](https://bit.dev/teambit/~scopes) 9 | - ### [Explore our Demos](https://bit.dev/learn-bit-react/~scopes) 10 | 11 | ## Slack 12 | 13 | - ### [Join Slack community](https://join.slack.com/t/bit-dev-community/shared_invite/zt-o2tim18y-UzwOCFdTafmFKEqm2tXE4w) 14 | 15 | ## GitHub 16 | 17 | - ### [Bit on GitHub](https://github.com/teambit/bit) 18 | 19 | - #### [GitHub Discussions](https://github.com/teambit/bit/discussions) 20 | 21 | - ### [Demo Projects](https://github.com/bit-demos) 22 | 23 | ## Twitter 24 | 25 | - ### [@bitdev\_ on Twitter](https://twitter.com/bitdev_) 26 | 27 | ## Medium 28 | 29 | - ### Join 2M developers reading [Bits and Pieces](https://blog.bitsrc.io/) 30 | 31 | - #### [Bit related articles](https://blog.bitsrc.io/tagged/bit) 32 | 33 | ## Youtube 34 | 35 | - ### [Build with Bit on YouTube](https://www.youtube.com/channel/UCuNkM3qIO79Q3-VrkcDiXfw) 36 | 37 | ## Monthly Newsletter 38 | 39 | We send short monthly updates on new features, interesting stories, and stuff that we really think is worth the space in your inbox. To subscribe, just [sign up to Bit.dev](https://bit.dev/signup) and check the “I agree to get occasional updates” box. We do not spam. 40 | -------------------------------------------------------------------------------- /docs/resources/conference-talks.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: conference-talks 3 | title: Conference Talks 4 | --- 5 | 6 | ## Component Driven Development 7 | 8 | We think in monorepos when we want to share components across many teams and apps. but let’s face it, we all hate monorepos. As soon as we hear the word we just think legacy. But it doesn’t have to be. But if we make our repos component driven, where we can easily share components across any repos or apps then everything changes. We really are moving towards a component driven world so lets start building in component driven repos. 9 | 10 | 11 | 12 | ## Scaling Team Delivery using Standardisation 13 | 14 | How can you scale fast, build fast and yet keep the same standards across all projects and teams? Let’s take a look at tooling as well as creating shareable configs and template generators for components so you can speed up your team’s delivery. 15 | 16 | 17 | 18 | ## Building Components in Harmony 19 | 20 | When it comes to components the easy and fast way is to just build the component as we see it. A button, a hero or card component for example. We don't think about reusability because we don't have to. The aim is to deliver fast. But what if we thought about things differently. What if we saw the bigger picture as not just the application you are creating but the future long term goal. What if we thought about building components so that they are extendable, theme-able and reusable across different code bases. If we could do that then we would be able to deliver applications at a much faster pace. We would be able to scale much easier. It's not easy but that is exactly why Bit Harmony was built. So let's start building our components in Harmony. 21 | 22 | 23 | 24 |

View slide deck for Building Components in Harmony

25 | 26 | ## A Component is an App 27 | 28 | Alexander Karan takes the Latency2020 audience through the ClimateClever transition to a unique approach that made it easier to understand their entire system. The benefits have gave Climate Clever faster release times, easier bug detection and allowed new developers to contribute production-ready code from day one. 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/resources/interviews.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: interviews 3 | title: Interviews 4 | --- 5 | 6 | ## Composing Modern Applications with Bit 7 | 8 | Alex and Brittney sit down with Debbie O'Brien to talk about bit (bit.dev). We dive deep into how you can use bit to compose your application one bit at a time. 9 | 10 | 11 | 12 | ## Case Study: How Climate Clever use Bit 13 | 14 | "If you want a platform for sharing code and forcing the development process on you, that is going to help you ship product quicker, help you work with a distributed asynchronous team, then Bit is definitely the way." Listen to Alex from Climate Clever tell his story on how he built with Bit and was able to scale faster with Component driven development and distributed team collaboration. 15 | 16 | 18 | 19 | ## Bit - A better way to build with modern components 20 | 21 | Debbie O'Brien works as a head of Developer Advocate at bit, she is joining for this about to talk about the bit platform, advantages of using bit, frameworks supported, and how to get started. 22 | 23 | 24 | 25 | ## Share Components through Bit.dev 26 | 27 | The Retro is a weekly web show hosted by Tracy Lee and Rob Ocel that takes a look back at recent technical and community developments in the JavaScript ecosystem and beyond. 28 | 29 | 30 | 31 | ## Managing Component Architecture 32 | 33 | In this episode, Tracy Lee (@ladyleet) interviews Debbie O'Brien (@deb_obrien) about bit.dev. We learn how to use Bit to manage component architecture, think in components, and how this can help you a build more scalable, reusable codebase and work across teams. 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/resources/live-streams.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: live-streams 3 | title: Live Streams 4 | --- 5 | 6 | ## Component Driven Development with Bit 7 | 8 | In this episode we'll learn how to build React components with Bit so that we can more easily scale our websites and apps! 9 | 10 | 11 | 12 | ## Building with Bit 13 | 14 | Intro to Bit and how to create components in Bit, compose components, version and export components to the Bit.dev cloud and then import them in a React application. 15 | 16 | 17 | 18 | ## How to Get Started with Bit 19 | 20 | Let's get started with Bit. In this video Debbie learns how to install BVM (Bit's version manager), install Bit, Create a workspace, create a component and add our component to the workspace with some basic docs and a composition to see it in action. 21 | 22 | 23 | 24 | ## Composing Components 25 | 26 | In this video Debbie and Itay discuss how to compose components, how to break up a component into smaller components, how to find open source components and use them in your project and how in Bit you should compose components so you can better scale your applications. 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/resources/slide-decks.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: slide-decks 3 | title: Slide Decks 4 | --- 5 | 6 |

View slide deck for Building Components in Harmony

-------------------------------------------------------------------------------- /docs/resources/videos.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: videos 3 | title: Videos 4 | --- 5 | 6 | Quick 1 minute videos to help you understand Bit better. 7 | 8 | ## Adding Docs to your Components 9 | 10 | Learn how to add docs to your component. 11 | 12 | 13 | 14 | ## Rendering your Component 15 | 16 | Learn how to render your component by creating compositions. 17 | 18 | 19 | 20 | ## Testing your Component 21 | 22 | Learn how to add tests for your components. 23 | 24 | 25 | 26 | ## Versioning and Exporting your Component 27 | 28 | Learn how to version and export your component. 29 | 30 | 31 | 32 | ## MDX Component 33 | 34 | Learn how to create an MDX component in Bit. 35 | 36 | 37 | -------------------------------------------------------------------------------- /docs/troubleshooting/doctor-logs-cache.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: doctor-logs-cache 3 | title: Bit doctor, logs and cache 4 | --- 5 | 6 | ### Bit Doctor 7 | 8 | `bit doctor` is a self diagnosis and healing tool for Bit workspaces. Run: 9 | 10 | ```bash 11 | bit doctor 12 | ``` 13 | 14 | The output is a list of all diagnosis that Bit currently implements. If any of the checks has failed, Bit suggests a fix for it. 15 | 16 | At some cases the maintainers will need additional workspace information in order to debug an issue. Doctor is capable of saving the most important data and logs from the workspace in a shareable format. 17 | Use this file when opening an issue to the [project repository](https://github.com/teambit/bit). 18 | 19 | Note, before submitting the output you can open it an validate that no sensitive information is submitted. You can clear such information from the file. 20 | 21 | ```bash 22 | bit doctor --save doctor-results 23 | ``` 24 | 25 | ### Logs 26 | 27 | Some errors and additional information are document in Bit's log files but not displayed in the console output. If you're having problems, it's worth checking the log files. 28 | 29 | Bit's log files are stored in: 30 | 31 | - For Mac/Linux - `~/Library/Caches/Bit/logs`. 32 | - For Windows - `%LOCALAPPDATA%/Bit/logs`. If `%LOCALAPPDATA%` is not defined, user profile directory will be used instead of `%LOCALAPPDATA%`. Further fallback options are available [here](https://github.com/sindresorhus/os-homedir/blob/master/index.js). 33 | 34 | The three different log types in Bit are: 35 | 36 | - Debug log - `debug.log`. 37 | - Exceptions log - `exceptions.log`. 38 | - Extensions log - `extensions.log` 39 | 40 | Each log file's size can be maximum 10MB, and there can be maximum 10 log files of each type. They will be numbered as follows: `debug.log`, `debug1.log`, `debug2.log`, etc. 41 | The log files are actually [winston logs](https://github.com/winstonjs/winston), and are [tailable](https://github.com/winstonjs/winston/blob/master/transports.md). 42 | 43 | ### Cache 44 | 45 | If errors occur, it is worth trying to clear Bit's cache in case it got corrupted. You can clear it using the clear cache command. 46 | 47 | ```bash 48 | bit clear-cache 49 | ``` 50 | -------------------------------------------------------------------------------- /docs/troubleshooting/runtime-globals.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: set-runtime-globals 3 | title: How to set runtime globals 4 | --- 5 | 6 | ## Background 7 | 8 | The JS compilation process often involves adding polyfills to the output compiled code. These polyfills are required and added only at the compilation phase so as to reduce duplication in the compiled code (which could be the result if we would import them separately into every dependent module). 9 | 10 | ## The Problem 11 | 12 | Components authored in Bit workspace are set, as default, to compile without the added polyfills. This is done in order to preserve the same logic that was introduced earlier - that is, to avoid code duplications in the application's compiled code. 13 | 14 | Even though components in a Bit workspace are authored as independent building blocks, they still need to go though the bundling process to be able to get rendered in the Workspace UI and Scope UI. This bundling is done using two services provided by the environment, 'Preview' and 'DevServer'. This makes the bundled output, produced by each environment, the analog of a bundled application. 15 | 16 | The bundling output will not have the required polyfills since it uses the compiled output of each independent component. 17 | 18 | ## The Solution 19 | 20 | Add the required polyfill as part of the bundling process. This is done by the extending the environment and customizing its bundler configurations. This new configurations will have the needed polyfills added by setting new entry files. 21 | 22 | For example, to add `regeneratorRuntime` to the Webpack configurations of the `@teambit.react/react` environment, we'll do the following: 23 | 24 | 1. Create a new [environment extension](/building-with-bit/environments). 25 | 26 | 2. In the same directory of the new `*.extension.ts` file, create the file, `regenerator-runtime.js`, to import the polyfills into: 27 | 28 | ```ts 29 | // regenerator-runtime.js 30 | 31 | import regeneratorRuntime from 'regenerator-runtime'; 32 | import 'regenerator-runtime/runtime.js'; 33 | ``` 34 | 35 | 2. Create a new Webpack configuration file: 36 | 37 | ```ts 38 | // webpack.config.ts 39 | 40 | module.exports = { 41 | entry: [require.resolve('./regenerator-runtime')], 42 | }; 43 | ``` 44 | 45 | Set both environment services, the ['Preview'](/building-with-bit/environments#preview) and ['DevServer'](/building-with-bit/environments#devserver), to use the new Webpack configurations (these new configurations will be the result of the merge between the new configurations set in the extension, with the previous configurations). 46 | 47 | ```tsx 48 | // custom-react.extension.ts 49 | 50 | import { EnvsMain, EnvsAspect } from '@teambit/envs'; 51 | import { ReactAspect, ReactMain } from '@teambit/react'; 52 | 53 | const webpackConfig = require('./webpack.config'); 54 | 55 | export class CustomReactExtension { 56 | constructor(private react: ReactMain) {} 57 | 58 | static dependencies: any = [EnvsAspect, ReactAspect]; 59 | 60 | static async provider([envs, react]: [EnvsMain, ReactMain]) { 61 | 62 | const customReactEnv = react.compose([ 63 | // Use these environment transformers to merge the new dependency configurations 64 | // with the environment's default ones 65 | react.overridePreviewConfig(webpackConfig); 66 | react.overrideDevServerConfig(webpackConfig); 67 | ]); 68 | 69 | envs.registerEnv(customReactEnv); 70 | 71 | return new CustomReactExtension(react); 72 | } 73 | } 74 | ``` 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs-harmony", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "serve": "docusaurus serve", 12 | "clear": "docusaurus clear", 13 | "generate-cli": "bit cli generate --metadata.id='cli-reference' --metadata.title='CLI Reference' > docs/reference/cli-reference.md", 14 | "update-aspects": "bit import && bit checkout latest --all --skip-npm-install" 15 | }, 16 | "dependencies": { 17 | "@docusaurus/core": "^2.0.0-beta.0", 18 | "@docusaurus/plugin-content-blog": "^2.0.0-beta.0", 19 | "@docusaurus/preset-classic": "^2.0.0-beta.0", 20 | "@mdx-js/react": "^1.6.21", 21 | "@teambit/base-ui.elements.image": "^0.6.7", 22 | "@teambit/base-ui.elements.label": "^0.6.7", 23 | "@teambit/documenter.theme.theme-context": "^3.0.8", 24 | "@teambit/evangelist.elements.button": "1.0.3", 25 | "@teambit/html.aspect-docs.html": "^0.0.15", 26 | "clsx": "^1.1.1", 27 | "docusaurus-plugin-plausible": "^0.0.5", 28 | "docusaurus-plugin-sass": "^0.2.0", 29 | "global": "^4.4.0", 30 | "react": "^17.0.2", 31 | "react-dom": "^17.0.2", 32 | "rehype-truncate": "^1.2.2", 33 | "remark-images": "^2.0.0", 34 | "sass": "^1.32.12" 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.5%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "devDependencies": { 49 | "@docusaurus/module-type-aliases": "^2.0.0-beta.0", 50 | "@tsconfig/docusaurus": "^1.0.2", 51 | "@types/react": "^17.0.2", 52 | "@types/react-helmet": "^6.1.0", 53 | "@types/react-router-dom": "^5.1.7", 54 | "typescript": "^4.2.2" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/image/image.module.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | .image { 4 | margin-top: 1em; 5 | box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.2); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/image/image.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const styles = require('./image.module.scss'); 4 | 5 | export type ImageProps = { 6 | src: string, 7 | alt?: string 8 | padding?: number 9 | width?: string | number 10 | } 11 | 12 | export const Image = ({src, alt, padding, width} : ImageProps) => { 13 | return( 14 |
15 | {alt 16 |
17 | ) 18 | } -------------------------------------------------------------------------------- /src/components/image/index.ts: -------------------------------------------------------------------------------- 1 | export type { ImageProps } from './image'; 2 | export { Image } from './image'; -------------------------------------------------------------------------------- /src/img/bit-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/src/img/bit-logo.png -------------------------------------------------------------------------------- /static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/.nojekyll -------------------------------------------------------------------------------- /static/img/Screen Shot 2021-01-02 at 19.19.29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/Screen Shot 2021-01-02 at 19.19.29.png -------------------------------------------------------------------------------- /static/img/angular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/base-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/base-ui.png -------------------------------------------------------------------------------- /static/img/bit-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/bit-logo.png -------------------------------------------------------------------------------- /static/img/blog/embed-figma-in-bit/figma-button-docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/embed-figma-in-bit/figma-button-docs.png -------------------------------------------------------------------------------- /static/img/blog/embed-figma-in-bit/figma.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/embed-figma-in-bit/figma.gif -------------------------------------------------------------------------------- /static/img/blog/embed-figma-in-bit/share-figma-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/embed-figma-in-bit/share-figma-file.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/bit.dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/bit.dev.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/button-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/button-files.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/button-with-styles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/button-with-styles.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/card-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/card-composition.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/card-compositions2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/card-compositions2.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/card-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/card-dependencies.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/card-dependencies2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/card-dependencies2.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/changelog-first-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/changelog-first-version.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/changelog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/changelog.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/code.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/compositions-overview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/compositions-overview2.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/compositions-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/compositions-properties.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/compositions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/compositions.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/create-collection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/create-collection.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/dependencies.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/docs-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/docs-live.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/gallery.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/issues-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/issues-found.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/node-modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/node-modules.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/node-modules2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/node-modules2.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/overview.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/peer-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/peer-dependencies.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/primary-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/primary-button.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/react-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/react-app.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/secondary-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/secondary-button.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/tests.png -------------------------------------------------------------------------------- /static/img/blog/getting-started-with-bit/using-component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/blog/getting-started-with-bit/using-component.png -------------------------------------------------------------------------------- /static/img/btn_prop_tables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/btn_prop_tables.png -------------------------------------------------------------------------------- /static/img/button_dots_loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/button_dots_loader.png -------------------------------------------------------------------------------- /static/img/button_modified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/button_modified.png -------------------------------------------------------------------------------- /static/img/button_overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/button_overview.png -------------------------------------------------------------------------------- /static/img/card_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/card_example.png -------------------------------------------------------------------------------- /static/img/cicd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/cicd.png -------------------------------------------------------------------------------- /static/img/component-contents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/component-contents.png -------------------------------------------------------------------------------- /static/img/component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/component.png -------------------------------------------------------------------------------- /static/img/compositions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/compositions.png -------------------------------------------------------------------------------- /static/img/compositions_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/compositions_demo.png -------------------------------------------------------------------------------- /static/img/config_icon_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/config_icon_2.png -------------------------------------------------------------------------------- /static/img/connected-scopes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/connected-scopes.png -------------------------------------------------------------------------------- /static/img/create_scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/create_scope.png -------------------------------------------------------------------------------- /static/img/create_scope_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/create_scope_new.png -------------------------------------------------------------------------------- /static/img/depdendencies_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/depdendencies_ui.png -------------------------------------------------------------------------------- /static/img/dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/dependencies.png -------------------------------------------------------------------------------- /static/img/dependencies_graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/dependencies_graph.png -------------------------------------------------------------------------------- /static/img/deps-notification-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/deps-notification-box.png -------------------------------------------------------------------------------- /static/img/design-dystem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/design-dystem.jpg -------------------------------------------------------------------------------- /static/img/docs_prop_table.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/docs_prop_table.jpg -------------------------------------------------------------------------------- /static/img/dots_loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/dots_loader.png -------------------------------------------------------------------------------- /static/img/dots_loader_pkg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/dots_loader_pkg.png -------------------------------------------------------------------------------- /static/img/explore_deps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/explore_deps.png -------------------------------------------------------------------------------- /static/img/explore_deps_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/explore_deps_2.png -------------------------------------------------------------------------------- /static/img/export_scrn_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/export_scrn_shot.png -------------------------------------------------------------------------------- /static/img/extending-bit/workspace-generator-dir-structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/extending-bit/workspace-generator-dir-structure.png -------------------------------------------------------------------------------- /static/img/extending-bit/workspace-generator-template-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/extending-bit/workspace-generator-template-name.png -------------------------------------------------------------------------------- /static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/favicon.ico -------------------------------------------------------------------------------- /static/img/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/history.png -------------------------------------------------------------------------------- /static/img/homepage-components-micro-frontends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/homepage-components-micro-frontends.png -------------------------------------------------------------------------------- /static/img/issue_found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/issue_found.png -------------------------------------------------------------------------------- /static/img/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/log_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/log_example.png -------------------------------------------------------------------------------- /static/img/log_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/log_icon.png -------------------------------------------------------------------------------- /static/img/logo.svg: -------------------------------------------------------------------------------- 1 | Asset 2 -------------------------------------------------------------------------------- /static/img/mfe_compositions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/mfe_compositions.png -------------------------------------------------------------------------------- /static/img/modified_components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/modified_components.png -------------------------------------------------------------------------------- /static/img/modified_comps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/modified_comps.png -------------------------------------------------------------------------------- /static/img/module-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/module-link.png -------------------------------------------------------------------------------- /static/img/new_component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/new_component.png -------------------------------------------------------------------------------- /static/img/nodejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/oss_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/oss_logo.png -------------------------------------------------------------------------------- /static/img/overview-bitdev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/overview-bitdev.png -------------------------------------------------------------------------------- /static/img/pkg_config.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/pkg_config.png -------------------------------------------------------------------------------- /static/img/podcasts/fsjam.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/podcasts/fsjam.jpeg -------------------------------------------------------------------------------- /static/img/podcasts/jamstack-radio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/podcasts/jamstack-radio.jpg -------------------------------------------------------------------------------- /static/img/podcasts/modern-web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/podcasts/modern-web.jpg -------------------------------------------------------------------------------- /static/img/podcasts/select-podcast.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/podcasts/select-podcast.jpeg -------------------------------------------------------------------------------- /static/img/podcasts/views-on-vue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/podcasts/views-on-vue.jpg -------------------------------------------------------------------------------- /static/img/react_env_ex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/react_env_ex.png -------------------------------------------------------------------------------- /static/img/remote_scope_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/remote_scope_ui.png -------------------------------------------------------------------------------- /static/img/ripple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ripple.png -------------------------------------------------------------------------------- /static/img/scope-bitdev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope-bitdev.png -------------------------------------------------------------------------------- /static/img/scope-contents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope-contents.png -------------------------------------------------------------------------------- /static/img/scope-dependency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope-dependency.png -------------------------------------------------------------------------------- /static/img/scope-hosting.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope-hosting.jpg -------------------------------------------------------------------------------- /static/img/scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope.png -------------------------------------------------------------------------------- /static/img/scope_type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope_type.png -------------------------------------------------------------------------------- /static/img/scope_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope_ui.png -------------------------------------------------------------------------------- /static/img/scope_ui_ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scope_ui_ss.png -------------------------------------------------------------------------------- /static/img/scopes_bitdev_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/scopes_bitdev_screenshot.png -------------------------------------------------------------------------------- /static/img/single-scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/single-scope.png -------------------------------------------------------------------------------- /static/img/tech-jokes-deps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/tech-jokes-deps.png -------------------------------------------------------------------------------- /static/img/tech_jokes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/tech_jokes.png -------------------------------------------------------------------------------- /static/img/test_results_ui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/test_results_ui.jpg -------------------------------------------------------------------------------- /static/img/tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/tests.png -------------------------------------------------------------------------------- /static/img/tutorials.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 36 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /static/img/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/version-history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/version-history.png -------------------------------------------------------------------------------- /static/img/virtual-component-monorepo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/virtual-component-monorepo.png -------------------------------------------------------------------------------- /static/img/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/workspace-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace-grid.png -------------------------------------------------------------------------------- /static/img/workspace-ui/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace-ui/code.png -------------------------------------------------------------------------------- /static/img/workspace-ui/compositions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace-ui/compositions.png -------------------------------------------------------------------------------- /static/img/workspace-ui/dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace-ui/dependencies.png -------------------------------------------------------------------------------- /static/img/workspace-ui/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace-ui/overview.png -------------------------------------------------------------------------------- /static/img/workspace-ui/tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace-ui/tests.png -------------------------------------------------------------------------------- /static/img/workspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/workspace.png -------------------------------------------------------------------------------- /static/img/ws-ui-button-modified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws-ui-button-modified.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_1.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_compositions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_compositions.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_dependencies.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_docs.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_frontmatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_frontmatter.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_import.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_mdx_imports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_mdx_imports.png -------------------------------------------------------------------------------- /static/img/ws_getting_started_test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teambit/docs/6c699cd871ce83ef6a4b096829f2a5d5efd68ed9/static/img/ws_getting_started_test.png -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | Sitemap: https://harmony-docs.bit.dev/sitemap.xml -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react" 4 | }, 5 | "extends": "@tsconfig/docusaurus/tsconfig.json", 6 | "include": ["src/"] 7 | } -------------------------------------------------------------------------------- /workspace.jsonc: -------------------------------------------------------------------------------- 1 | /** 2 | * this is the main configuration file of your bit workspace. 3 | * for full documentation, please see: https://harmony-docs.bit.dev/workspace/configurations 4 | **/ 5 | { 6 | "$schema": "https://static.bit.dev/teambit/schemas/schema.json", 7 | /** 8 | * main configuration of the Bit workspace. 9 | **/ 10 | "teambit.workspace/workspace": { 11 | /** 12 | * the name of the component workspace. used for development purposes. 13 | **/ 14 | "name": "my-workspace-name", 15 | /** 16 | * set the icon to be shown on the Bit server. 17 | **/ 18 | "icon": "https://static.bit.dev/bit-logo.svg", 19 | /** 20 | * default directory for all components in workspace. 21 | **/ 22 | "defaultDirectory": "docs/aspects/{scope}/{name}", 23 | /** 24 | * default scope for all components in workspace. 25 | **/ 26 | "defaultScope": "my-scope" 27 | }, 28 | /** 29 | * main configuration for component dependency resolution. 30 | **/ 31 | "teambit.dependencies/dependency-resolver": { 32 | /** 33 | * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm' 34 | */ 35 | "packageManager": "teambit.dependencies/yarn", 36 | "policy": { 37 | "dependencies": {}, 38 | "peerDependencies": { 39 | "react": "16.13.1", 40 | "react-dom": "16.13.1" 41 | } 42 | } 43 | }, 44 | /** 45 | * workspace variants allow to set different subsets of configuration for components in your workspace. 46 | * this is extremely useful for upgrading, aligning and building components with a 47 | * new set of dependencies. 48 | **/ 49 | "teambit.workspace/variants": { 50 | /** 51 | * "*" is a special rule which applied on all components in the workspace. 52 | **/ 53 | "*": { 54 | /** 55 | * uncomment to apply the react environment on all components. 56 | **/ 57 | // "teambit.react/react": { } 58 | } 59 | } 60 | } --------------------------------------------------------------------------------