Refactor repo to current monorepo standards (#153)

Author: mattcompiles

.changeset/config.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "seek-oss/treat" }
+  ],
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": ["gatsby-plugin-treat-example", "next-treat-example", "treat-test-helpers", "treat-docs-site"]
+}

.changeset/warm-starfishes-allow.md

@@ -0,0 +1,12 @@
+---
+'treat': major
+---
+
+`treat/webpack-plugin` is now an ES module.
+
+BREAKING CHANGE: 
+When importing `treat/webpack-plugin` in a commonjs file you must now use the named export `TreatPlugin`.
+
+```js
+const { TreatPlugin } = require('treat/webpack-plugin');
+```

.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    name: Publish & Deploy
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@main
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js 14.x
+        uses: actions/setup-node@main
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Create Release Pull Request or Publish to npm
+        uses: changesets/action@b3300fad33b6ab794313da28d27424c0e2f78991
+        with:
+          publish: yarn release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}

.github/workflows/validate.yml

@@ -0,0 +1,35 @@
+name: Validate
+
+on:
+  - pull_request
+  - push
+
+jobs:
+  validate:
+    name: Lint & Test
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@main
+
+      - name: Set up Node.js 14.x
+        uses: actions/setup-node@main
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Make docs manifest
+        run: yarn make-docs-manifest
+
+      - name: Build
+        run: yarn build
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 dist
 lib
-docs-manifest.json
+docs-manifest.json
+yarn-error.log
+tsconfig.tsbuildinfo

.prettierignore

@@ -0,0 +1,11 @@
+.idea/
+.vscode/
+node_modules*/
+dist
+lib
+docs-manifest.json
+**/.next/*
+**/.cache/*
+**/public/*
+/.changeset/*
+CHANGELOG.md

.prettierrc

@@ -12,7 +12,6 @@
   <br />
 </div>
 
-
 Write your styles in JavaScript/TypeScript within **treat files** (e.g. `Button.treat.js`) that get executed at build time.
 
 All CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. In fact, if your application doesn’t use theming, you don’t even need the runtime at all.
@@ -87,7 +86,7 @@ export const Button = ({ text }) => `
 
 ## Themed usage
 
->This themed usage example makes use of [react-treat](https://seek-oss.github.io/treat/react-api) to keep things simple. React is [not required](https://seek-oss.github.io/treat/runtime-api) to use treat.
+> This themed usage example makes use of [react-treat](https://seek-oss.github.io/treat/react-api) to keep things simple. React is [not required](https://seek-oss.github.io/treat/runtime-api) to use treat.
 
 First, install react-treat.
 
@@ -129,7 +128,7 @@ Now that you’ve configured the theming system, define and export [themed style
 // ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **
 import { style } from 'treat';
 
-export const button = style(theme => ({
+export const button = style((theme) => ({
   backgroundColor: theme.brandColor,
   height: theme.grid * 11
 }));
@@ -145,7 +144,7 @@ import React from 'react';
 import { useStyles } from 'react-treat';
 import * as styleRefs from './Button.treat.js';
 
-export const Button = props => {
+export const Button = (props) => {
   const styles = useStyles(styleRefs);
 
   return <button {...props} className={styles.button} />;

.travis.yml

@@ -1,14 +1,7 @@
 module.exports = {
   presets: [
     '@babel/preset-typescript',
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
     '@babel/preset-react',
+    ['@babel/preset-env', { targets: { node: 10 } }],
   ],
 };

README.md

@@ -115,7 +115,7 @@ Type: `function`
 Accepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)
 
 ```js
-theme => ({
+(theme) => ({
   color: theme.brandColor
 });
 ```

babel.config.js

@@ -54,7 +54,9 @@ Then, let's assume you've written the following treat file:
 // text.treat.js
 import { style } from 'treat';
 
-export const text = style(theme => ({ color: theme.text }));
+export const text = style((theme) => ({
+  color: theme.text
+}));
 ```
 
 This will generate the following CSS:
@@ -77,7 +79,7 @@ In order to ensure consistent specificity across different themes, **themed styl
 For example, let's assume you've defined the following styles:
 
 ```js
-export const inactive = style(theme => ({
+export const inactive = style((theme) => ({
   color: theme.text
 }));
 
@@ -118,17 +120,17 @@ Let's assume we have a treat file with some complex exports:
 
 ```js
 // styles.treat.js
-export const topLevelExport = style(theme => ({
+export const topLevelExport = style((theme) => ({
   color: theme.red
 }));
 
 export const objectExport = {
-  key: style(theme => ({ color: theme.blue }))
+  key: style((theme) => ({ color: theme.blue }))
 };
 
 export const arrayExport = [
-  style(theme => ({ color: theme.aqua })),
-  style(theme => ({ color: theme.pink }))
+  style((theme) => ({ color: theme.aqua })),
+  style((theme) => ({ color: theme.pink }))
 ];
 ```
 

docs/data-types.md

@@ -112,7 +112,7 @@ Now that you've configured the theming system, define and export [themed styles]
 // ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **
 import { style } from 'treat';
 
-export const button = style(theme => ({
+export const button = style((theme) => ({
   backgroundColor: theme.brandColor,
   height: theme.grid * 11
 }));
@@ -128,7 +128,7 @@ import React from 'react';
 import { useStyles } from 'react-treat';
 import * as styleRefs from './Button.treat.js';
 
-export const Button = props => {
+export const Button = (props) => {
   const styles = useStyles(styleRefs);
 
   return <button {...props} className={styles.button} />;

docs/how-it-works.md

@@ -52,7 +52,7 @@ import React from 'react';
 import { useClassName } from 'react-treat';
 import * as styleRefs from './Button.treat.js';
 
-export const Button = props => (
+export const Button = (props) => (
   <button
     {...props}
     className={useClassName(styles.button)}

docs/introduction.md

@@ -116,7 +116,7 @@ import styleRefs from './styles.treat';
 // Inject the theme name somehow:
 const themeName = getThemeName();
 
-import(`../themes/${themeName}.treat`).then(theme => {
+import(`../themes/${themeName}.treat`).then((theme) => {
   const styles = resolveStyles(theme.default, styleRefs);
   // You now have access to themed styles!
 });

docs/react-api.md

@@ -54,7 +54,7 @@ The `styleMap` function allows you to easily create multiple namespaces within a
 ```js
 import { styleMap } from 'treat';
 
-export const variants = styleMap(theme => ({
+export const variants = styleMap((theme) => ({
   primary: {
     backgroundColor: theme.colors.brand
   },
@@ -97,8 +97,8 @@ const spacingTokens = {
   large: 16
 };
 
-const spacingStyles = property =>
-  mapValues(spacingTokens, value => ({
+const spacingStyles = (property) =>
+  mapValues(spacingTokens, (value) => ({
     [property]: value
   }));
 
@@ -135,10 +135,10 @@ For example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.
 import { styleTree } from 'treat';
 import { mapValues } from 'lodash';
 
-const responsiveSpacingStyles = property =>
+const responsiveSpacingStyles = (property) =>
   styleTree((theme, styleNode) =>
-    mapValues(theme.spacing, space =>
-      mapValues(theme.breakpoints, minWidth =>
+    mapValues(theme.spacing, (space) =>
+      mapValues(theme.breakpoints, (minWidth) =>
         styleNode({
           '@media': {
             [`screen and (min-width: ${minWidth}px)`]: {

docs/setup.md

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['babel-preset-gatsby'],
+};

docs/styling-api.md

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.6.2",
   "devDependencies": {
-    "@babel/core": "^7.7.5",
+    "@babel/core": "^7.12.10",
     "babel-preset-gatsby": "^0.2.26",
     "gatsby": "^2.18.11",
     "gatsby-plugin-treat": "^1.6.2",

packages/gatsby-plugin-treat-example/.gitignore renamed to examples/gatsby-plugin-treat-example/.gitignore

@@ -0,0 +1,6 @@
+import React from 'react';
+import { button } from './Button.treat';
+
+export const Button = ({ ...otherProps }) => (
+  <button {...otherProps} className={button} />
+);

packages/gatsby-plugin-treat-example/CHANGELOG.md renamed to examples/gatsby-plugin-treat-example/CHANGELOG.md

@@ -1,5 +1,5 @@
-import {style} from 'treat';
-import {fontStack} from './fontStack';
+import { style } from 'treat';
+import { fontStack } from './fontStack';
 
 const fg = 'deeppink';
 const bg = 'white';
@@ -14,10 +14,10 @@ export const button = style({
   backgroundColor: `${bg}`,
   padding: '0.5em 1em',
   ':hover': {
-    opacity: 0.75
+    opacity: 0.75,
   },
   ':disabled': {
     cursor: 'default',
-    opacity: 0.5
-  }
+    opacity: 0.5,
+  },
 });