![]() The following is an instance where a scoped component may use a combination of local and global styles to achieve a specific result: Global styles are intended to be used sparingly as they introduce a lot of challenges when scaling an app with a library of Add-ons and Environments. ![]() Global styles should be familiar to most as that's what the web largely used for 20+ years. Scoped local styles are a beautiful thing that allow Local to isolate components, run Add-ons with multiple versions of local-components and avoid collisions.Īs wonderful as local styles are, there are instances where CSS needs to transcend a single component. These are considered local styles (not to be confused with the Local app □) The component library leverages CSS Modules to manage and scope styles. Note: instead of dashes, local-components uses underscores due to a limitation of a legacy package. That said, we have chosen Suit CSS for naming conventions. These type groups can be seen when running Storybook. OrganizationĬomponents are organized by type. Note: setting any of container's props will automatically toggle it on (disabled: false) thus wrapping the contents in the container wrapper. In addition, the Container wrapper adds convenience props that allow for easy one-off adjustments like adding 3px of margin without conflicting with the inner content's classes and styles. Several components leverage the Container.tsx component to wrap their own implementation.Ĭontainer is a highly specialized component that can be toggled on (wraps contents in extra div) or toggled off (no extra div). Note: the entry point for all components and styles is index.ts. Have an idea or bug fix? Submit a pull request.Play around with the examples found in the README.md files.Make changes to the internals of a component through its.There are currently 40+ React components in the library.Įach component consists of a. These are the visual elements that make up both Local and its Add-ons. The local-components library can be broken down into 3 main parts: Script spawns two instances of Webpack and is very resource intensive. If you wish to run both Storybook and the watcher for Local at the same time, you can run yarn start. Running both Storybook and Watch at the same time So refreshing the UI in Local ( Cmd + R) will likely be necessary. Note, Local does not support hot-module reloading in all locations Make any necessary changes in local-components.Then run nps components.link (only needed one time or after unlinking).Next run yarn link (only needed one time or after unlinking).First run yarn build in local-components.If you wish to work on local-components and see the changes within Local, you will need to do the following: Local development area that works well with React components and supports hot-module reloading. The quickest way to work on local-components is to leverage Storybook. Clone and pull down the latest from the repo.In additional to a quickly growing set of React components, we also have SVGs, SASS partials, and more to come! Installation Take a quick look at our living component documentation here. We appreciate curious minds and that's a great question! Welcome to the official component library for Local! What's included in this component library?
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |