Switch from a monorepo to a single package (segmentio#125)

Switch from a monorepo to a single package

.babelrc

@@ -1,3 +1,22 @@
 {
- "presets": ["env", "react", "stage-0"]
+ "env": {
+ // Workaround Babel 6's weird config inheritance by not having any root
+ // config (`{"modules":false}` gets overridden). This can be improved with
+ // Babel 7's `.babelrc.js` support.
+ "development": {
+ "presets": ["env", "react", "stage-0"]
+ },
+ "test": {
+ "presets": ["env", "react", "stage-0"]
+ },
+ "production": {
+ "presets": ["env", "react", "stage-0"]
+ },
+ "commonjs": {
+ "presets": ["env", "react", "stage-0"]
+ },
+ "esm": {
+ "presets": [["env", { "modules": false }], "react", "stage-0"]
+ }
+ }
 }

.editorconfig

@@ -8,6 +8,3 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-
-[Makefile]
-indent_style = tab

.github/CONTRIBUTING.md

@@ -1,19 +1,19 @@
-# 🎉 Thanks for taking the time to contribute to 🌲Evergreen! 🎉
+# 🎉 Thanks for taking the time to contribute to 🌲 Evergreen! 🎉
 
-It is highly appreciated that you take the time to help improve 🌲Evergreen.
+It is highly appreciated that you take the time to help improve 🌲 Evergreen.
 
-Please see our [ISSUE_TEMPLATE](./ISSUE_TEMPLATE.md) for issues specifically.
+Please see our [issue template](ISSUE_TEMPLATE.md) for issues specifically.
 
 ## Creating new components
 
 Preferably we like to introduce new components by following these steps.
 
 ### Submit an issue
 
-To better understand if your component is wanted by evergreen,
+To better understand if your component is wanted by 🌲 Evergreen,
 submit a component request first as an issue.
 Explain why you want the component.
-Potentially include a design or component api.
+Potentially include a design or component API.
 
 **Smaller atoms and primitives are favored over bigger complex components.**
 
@@ -22,21 +22,20 @@ Potentially include a design or component api.
 This can be a wireframe or high fidelity mockup.
 Include this in your issue if possible.
 
-We hope to formalize the 🌲Evergreen design language more as we go.
-As a general rule of thumb try to include the follow these constraints:
+We hope to formalize the 🌲 Evergreen design language more as we go.
+As a general rule of thumb try to follow these constraints:
 
-* Use `evergreen-color` and `evergreen-typography`
-* 8px soft grid, (4px under 40px is also good)
-* Don't force line heights on grid if it looks poorly
+* Use `color` and the `typography` components.
+* 8px soft grid, (4px under 40px is also good).
+* Don't force line heights on grid if it looks poorly.
 
 ### Component API
 
-* Use `evergreen-color` and `evergreen-typography`
 * Write down how you would like to use this component.
-* Write down the component api and prop types.
-* Try to implement `ui-box` for you components.
-* Try to make all different heights possible.
-* Base the text style (font size) on the height
+* Write down the component API and prop types.
+* Try to use `ui-box` for your components.
+* Try to make all heights possible.
+* Base the text style (font size) on the height.
 
 Include this in your issue if possible.
 
@@ -45,7 +44,7 @@ Include this in your issue if possible.
 Use a scaffolding scripts to bootstrap your component:
 
 ```
-$ yarn create-package:component ComponentName
+$ yarn create-package:components package-name ComponentName
 ```
 
 Make sure to write stories to document your component.
@@ -56,4 +55,4 @@ Finally submit a PR with your new feature or component.
 
 ## Celebrate! 🎉
 
-We'll add you to the contributors section
+We'll add you to the contributors section.

.github/ISSUE_TEMPLATE.md

@@ -4,7 +4,7 @@ It is highly appreciated that you take the time to help improve 🌲Evergreen.
 We appreciate it if you would take the time to write up a bug report or feature request.
 
 Sadly, if we don't receive enough information, or the issue/feature request doesn't
-align well with our [ROADMAP.md](./ROADMAP.md), we might respectfully
+align well with our roadmap, we might respectfully
 thank you for your time, and close the issue.
 
 _Bug fixes and documentation fixes are welcome._
@@ -13,32 +13,33 @@ _Bug fixes and documentation fixes are welcome._
 
 Please consider the following items when filing a bug report:
 
-* Issue and Steps to Reproduce
-* Versions
-* Screenshots
-* Expected
-* Actual
-* Link to your project
-* Browser Name and version
-* Operating system
+* Issue and steps to reproduce.
+* Versions.
+* Screenshots.
+* Expected.
+* Actual.
+* Link to your project.
+* Browser name and version.
+* Operating system.
 
 ## In the case of a feature/component request ✍️
 
 Please consider the following items when filing a feature request:
 
-* **Usage**, component API if applicable
-* **Design Example**, screenshot of what the design should look like
-* Problem that feature/component addresses
-* Examples in other projects of feature/component
-* Screenshots if design changes
+* **Usage**, component API if applicable.
+* **Design Example**, screenshot of what the design should look like.
+* Problem that feature/component addresses.
+* Examples in other projects of feature/component.
+* Screenshots if design changes.
+
+See the contributing guide for more details.
 
 ## Respect earns Respect 👏
 
-Please respect our [CODE_OF_CONDUCT](./CODE_OF_CONDUCT.md), in short:
+Please respect our Code of Conduct, in short:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-* Examples of unacceptable behavior by participants include:
+* Using welcoming and inclusive language.
+* Being respectful of differing viewpoints and experiences.
+* Gracefully accepting constructive criticism.
+* Focusing on what is best for the community.
+* Showing empathy towards other community members.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,21 +1,18 @@
-<!--
-
 # 🎉 Thanks for taking the time to contribute to 🌲Evergreen! 🎉
 
 It is highly appreciated that you take the time to help improve Evergreen.
 We appreciate it if you would take the time to document your Pull Request.
 
 Sadly, if we don't receive enough information, or the Pull Request doesn't
-align well with our [ROADMAP.md](./ROADMAP.md), we might respectfully
+align well with our roadmap, we might respectfully
 thank you for your time, and close the issue.
 
 ## Respect earns Respect 👏
 
-Please respect our [CODE_OF_CONDUCT](./CODE_OF_CONDUCT.md), in short:
+Please respect our Code of Conduct, in short:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
--->
+* Using welcoming and inclusive language.
+* Being respectful of differing viewpoints and experiences.
+* Gracefully accepting constructive criticism.
+* Focusing on what is best for the community.
+* Showing empathy towards other community members.

.gitignore

@@ -1,7 +1,8 @@
 *.log
 node_modules
 .DS_Store
-/packages/*/lib
-storybook-static
-/docs/public
+/commonjs/
+/esm/
+/.out/
+/docs/public/
 .cache

.storybook/config.js

@@ -4,7 +4,7 @@ import { setOptions } from '@storybook/addon-options'
 // Option defaults:
 setOptions({
  /**
- * name to display in the top left corner
+ * Name to display in the top left corner
  * @type {String}
  */
  name: '🌲 Evergreen',
@@ -14,37 +14,37 @@ setOptions({
  */
  url: 'https://github.com/segmentio/evergreen',
  /**
- * show story component as full screen
+ * Show story component as full screen
  * @type {Boolean}
  */
  goFullScreen: false,
  /**
- * display left panel that shows a list of stories
+ * Display left panel that shows a list of stories
  * @type {Boolean}
  */
  showLeftPanel: true,
  /**
- * display horizontal panel that displays addon configurations
+ * Display horizontal panel that displays addon configurations
  * @type {Boolean}
  */
  showDownPanel: false,
  /**
- * display floating search box to search through stories
+ * Display floating search box to search through stories
  * @type {Boolean}
  */
  showSearchBox: false,
  /**
- * show horizontal addons panel as a vertical panel on the right
+ * Show horizontal addons panel as a vertical panel on the right
  * @type {Boolean}
  */
  downPanelInRight: false,
  /**
- * sorts stories
+ * Sorts stories
  * @type {Boolean}
  */
  sortStoriesByKind: false,
  /**
- * regex for finding the hierarchy separator
+ * Regex for finding the hierarchy separator
  * @example:
  * null - turn off hierarchy
  * /\// - split by `/`
@@ -55,13 +55,13 @@ setOptions({
  hierarchySeparator: null,
 
  /**
- * sidebar tree animations
+ * Sidebar tree animations
  * @type {Boolean}
  */
  sidebarAnimations: true,
 
  /**
- * id to select an addon panel
+ * ID to select an addon panel
  * @type {String}
  */
  selectedAddonPanel: undefined // The order of addons in the "Addons Panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook

.storybook/requireStories.js

@@ -2,30 +2,10 @@ const glob = require('glob')
 
 module.exports = function noop() {}
 module.exports.pitch = function pitch() {
- // This is a temp fix for storybooks. If we are running static builds we'll have the PACKAGE var
- // and we need to work from within that package. Otherwise we are running the server and we know
- // we are inside the packages directory already
- const packagesRoot = process.env.PACKAGE
- ? `${__dirname}/../../packages/${process.env.PACKAGE}`
- : process.cwd()
-
- // Prevent node_modules from being loaded
- const storiesPattern = `${packagesRoot}/packages/*/stories/**/*.stories.js`
- const storybookFiles = glob.sync(storiesPattern, { cwd: __dirname })
-
- console.log('require the following stories:')
-
- // Pretty print the stories that are being loaded for testing
- console.log(
- JSON.stringify(
- storybookFiles.map(x => x.substr(x.indexOf('evergreen/packages'))),
- null,
- 2
- )
+ const storybookFiles = glob.sync(
+ `${process.cwd()}/src/*/stories/**/*.stories.js`
  )
 
- console.log(`Loading ${storybookFiles.length} storybook files`)
-
  const storyRequireStatements = storybookFiles
  .map(storyPath => `require(${JSON.stringify(storyPath)});`)
  .join('\n')

.storybook/webpack.config.es6.js

@@ -2,22 +2,6 @@ const path = require('path')
 const webpack = require('webpack')
 
 module.exports = storybookBaseConfig => {
- const rules = [
- ...storybookBaseConfig.module.rules,
- {
- test: /\.(png\?.*|jpg\?.*|jpg|png)$/,
- loader: 'url-loader'
- },
- {
- test: /\.(blob)/,
- loader: 'file-loader'
- },
- {
- test: /\.(json)/,
- loader: 'json-loader'
- }
- ]
-
  // Return the altered config
  return {
  ...storybookBaseConfig,
@@ -27,19 +11,23 @@ module.exports = storybookBaseConfig => {
  debug: true
  })
  ],
- resolve: {
- ...storybookBaseConfig.resolve,
- alias: {
- react: path.join(__dirname, '../node_modules/react/index.js'),
- 'react-dom': path.join(__dirname, '../node_modules/react-dom/index.js')
- },
- // Unsure if this is the rigth way of doing it, but to make stories work
- // with unpublished/local packages this checks in packages before node_modules
- modules: [path.join(__dirname, '../packages'), 'node_modules']
- },
  module: {
  ...storybookBaseConfig.module,
- rules
+ rules: [
+ ...storybookBaseConfig.module.rules,
+ {
+ test: /\.(png\?.*|jpg\?.*|jpg|png)$/,
+ loader: 'url-loader'
+ },
+ {
+ test: /\.(blob)/,
+ loader: 'file-loader'
+ },
+ {
+ test: /\.(json)/,
+ loader: 'json-loader'
+ }
+ ]
  }
  }
 }