diff --git a/babel-defines.js b/babel-defines.js deleted file mode 100644 index 63361e78474..00000000000 --- a/babel-defines.js +++ /dev/null @@ -1,13 +0,0 @@ -const shared = { - __DEV__: "process.env.NODE_ENV !== 'production'" -} - -module.exports = { - development: shared, - test: shared, - production: { - ...shared, - __DEV__: 'false', - 'process.env.NODE_ENV': "'production'" - } -} diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 20b403b8c70..00000000000 --- a/babel.config.js +++ /dev/null @@ -1,32 +0,0 @@ -const defines = require('./babel-defines') - -function replacementPlugin(env) { - return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}] -} - -const sharedPlugins = ['macros', 'preval', 'add-react-displayname', 'babel-plugin-styled-components', '@babel/plugin-proposal-nullish-coalescing-operator'] - -function makePresets(moduleValue) { - return ['@babel/preset-typescript', ['@babel/preset-react', {modules: moduleValue}]] -} - -module.exports = { - env: { - development: { - presets: makePresets(process.env.BABEL_MODULE || false), - plugins: [ - ...(process.env.BABEL_MODULE === 'commonjs' ? ['@babel/plugin-transform-modules-commonjs'] : []), - ...sharedPlugins, - replacementPlugin('development') - ] - }, - production: { - presets: makePresets(false), - plugins: [...sharedPlugins, replacementPlugin('production')] - }, - test: { - presets: makePresets('commonjs'), - plugins: [...sharedPlugins, ['@babel/plugin-transform-modules-commonjs'], replacementPlugin('test')] - } - } -} diff --git a/docs/content/core-concepts.md b/docs/content/core-concepts.md index ccfebac2b7b..90d3a99daca 100644 --- a/docs/content/core-concepts.md +++ b/docs/content/core-concepts.md @@ -5,6 +5,7 @@ title: Core Concepts This document aims to discuss some of the core concepts of building with Primer React. ## Responsive props + It's really easy to set different values for most of our component props based on screen size! We take advantage of [styled-system](https://github.com/styled-system/styled-system)'s responsive props API in our components. ``` @@ -20,6 +21,7 @@ or You can provide your own theme to Primer React! There are a few ways of doing this to varying degrees, checkout the [theme docs](https://primer.style/components/primer-theme) for more information. ## The `css` prop + When push comes to shove and you just _really_ need to add a custom CSS rule, you can do that with the `css` prop. Please don't abuse this :) ``` @@ -27,38 +29,35 @@ When push comes to shove and you just _really_ need to add a custom CSS rule, yo ``` -Please note that you will need to have the **[styled-components babel plugin](https://www.styled-components.com/docs/tooling#babel-plugin)** set up in your project in order to use the `css` prop. - ## Types of components We categorize our components into 3 general types. Building block components, pattern components, and helper components. Understanding how these types of components interact with each other can help you better understand how to get the most out of Primer React. - Building Blocks - Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`. +Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`. - - Pattern Components +- Pattern Components - Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future. +Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future. - - Helper Components +- Helper Components - Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components. +Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components. +## The `as` prop - ## The `as` prop - The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props. +The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props. +For example, say you are using a `Button` component, and you really need to apply `Flex` styles to it. You can compose `Flex` and `Button` like so: - For example, say you are using a `Button` component, and you really need to apply `Flex` styles to it. You can compose `Flex` and `Button` like so: - - ```.jsx - Hello - ``` +```.jsx +Hello +``` - This will allow you to use all of the `Button` props _and_ all of the `Flex` props without having to wrap your `Button` component in another `Flex` component. +This will allow you to use all of the `Button` props _and_ all of the `Flex` props without having to wrap your `Button` component in another `Flex` component. - **This pattern does have some limitations.** Usage of the `as` prop can lead to unexpected output. In the example above, if the user had done `