diff --git a/__tests__/examples/README.md b/__tests__/examples/README.md new file mode 100644 index 00000000..850f1603 --- /dev/null +++ b/__tests__/examples/README.md @@ -0,0 +1,3 @@ +# Aggregate of All Examples + +This is used for `__tests__/skpm/examples.test.js` (dependencies), and can be used to test that `skpm-build` works for all examples. diff --git a/__tests__/examples/package.json b/__tests__/examples/package.json new file mode 100644 index 00000000..ad5398d1 --- /dev/null +++ b/__tests__/examples/package.json @@ -0,0 +1,26 @@ +{ + "name": "example-tests", + "version": "1.0.0", + "description": "", + "skpm": { + "main": "example-tests.sketchplugin", + "manifest": "src/manifest.json" + }, + "scripts": { + "build": "../../node_modules/.bin/skpm-build", + "watch": "../../node_modules/.bin/skpm-build --watch", + "render": "../../node_modules/.bin/skpm-build --watch --run", + "render:once": "../../node_modules/.bin/skpm-build --run", + "postinstall": "npm run build && ../../node_modules/.bin/skpm-link" + }, + "author": "Macintosh Helper ", + "license": "MIT", + "dependencies": { + "@emotion/core": "^10.0.28", + "@emotion/primitives": "^10.0.30", + "chroma-js": "^1.2.2", + "emotion-primitives": "^1.0.0-beta.0", + "ramda": "^0.27.0", + "react-primitives": "^0.8.1" + } +} diff --git a/__tests__/examples/src/main.js b/__tests__/examples/src/main.js new file mode 100644 index 00000000..a4f774ed --- /dev/null +++ b/__tests__/examples/src/main.js @@ -0,0 +1,68 @@ +import * as React from 'react'; +import sketch from 'sketch'; +import { render, Document, Page } from 'react-sketchapp'; + +import { Document as BasicSetup } from '../../../examples/basic-setup/src/my-command'; +import { Document as BasicSvg } from '../../../examples/basic-svg/src/my-command'; +import { Document as Colors } from '../../../examples/colors/src/main'; +import { App as Emotion } from '../../../examples/emotion/src/my-command'; +import { Page as FormValidation } from '../../../examples/form-validation/src/main'; + +import formValidationData from '../../../examples/form-validation/src/data'; + +const pages = [ + { + component: BasicSetup, + name: 'Basic Setup', + data: { + colors: { + Haus: '#F3F4F4', + Night: '#333', + Sur: '#96DBE4', + 'Sur Dark': '#24828F', + Peach: '#EFADA0', + 'Peach Dark': '#E37059', + Pear: '#93DAAB', + 'Pear Dark': '#2E854B', + }, + }, + }, + { + component: BasicSvg, + name: 'Basic Svg', + }, + { + component: Colors, + name: 'Colors', + data: { + colors: ['#01FFD8', '#C137E3', '#8702ED'], + steps: 50, + }, + }, + { + component: Emotion, + name: 'Emotion', + }, + { + component: FormValidation, + name: 'Form Validation', + data: { + sessions: formValidationData, + }, + }, +]; + +export const App = () => ( + + {pages.map(({ name, component: Component, data }) => ( + + + + ))} + +); + +export default () => { + // FIXME: Get this working with skpm-test instead for CLI / CI stdout feedback + render(, sketch.getSelectedDocument() || new sketch.Document()); +}; diff --git a/__tests__/examples/src/manifest.json b/__tests__/examples/src/manifest.json new file mode 100644 index 00000000..849b2c96 --- /dev/null +++ b/__tests__/examples/src/manifest.json @@ -0,0 +1,17 @@ +{ + "compatibleVersion": 3, + "bundleVersion": 1, + "commands": [ + { + "name": "react-sketchapp: Example Tests", + "identifier": "main", + "script": "./main.js" + } + ], + "menu": { + "isRoot": true, + "items": [ + "main" + ] + } +} diff --git a/__tests__/examples/webpack.skpm.config.js b/__tests__/examples/webpack.skpm.config.js new file mode 100644 index 00000000..84e84484 --- /dev/null +++ b/__tests__/examples/webpack.skpm.config.js @@ -0,0 +1,20 @@ +const path = require('path'); + +const pkg = require(path.resolve(__dirname, 'package.json')); + +const aliasedModules = Object.keys(pkg.dependencies); + +module.exports = (config) => { + config.resolve = { + ...config.resolve, + alias: { + ...config.resolve.alias, + 'react-sketchapp': path.resolve(__dirname, '../../lib'), + + ...aliasedModules.reduce((acc, mod) => { + acc[mod] = path.resolve(__dirname, `./node_modules/${mod}`); + return acc; + }, {}), + }, + }; +}; diff --git a/__tests__/skpm/.babelrc b/__tests__/skpm/.babelrc new file mode 100644 index 00000000..4499ae21 --- /dev/null +++ b/__tests__/skpm/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + "module:@skpm/babel-preset" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + [ + "@babel/plugin-transform-modules-commonjs", + { + "noInterop": true + } + ] + ] +} diff --git a/__tests__/skpm/examples.test.js b/__tests__/skpm/examples.test.js new file mode 100644 index 00000000..97237d78 --- /dev/null +++ b/__tests__/skpm/examples.test.js @@ -0,0 +1,38 @@ +import * as React from 'react'; +import sketch from 'sketch'; +import { render, Document, Page } from 'react-sketchapp'; + +import { App } from '../examples/src/main'; + +function getDoc(document) { + return sketch.getSelectedDocument() || document; +} + +test('should render examples', (context, document) => { + const doc = getDoc(document); + + render(, doc); + + const pageByName = doc.pages.reduce((acc, page) => { + if (page.name) { + acc[page.name] = page; + } + return acc; + }, {}); + + const expectedLayerNames = { + 'Basic Setup': 'Swatches', + 'Basic Svg': 'Sketch Logo', + Colors: 'View', + Emotion: 'View', + 'Form Validation': 'View', + }; + + for (const pageName in pageByName) { + const page = pageByName[pageName]; + + const layerName = page.layers[0].name; + const expectedLayerName = expectedLayerNames[pageName]; + expect(layerName).toBe(expectedLayerName); + } +}); diff --git a/__tests__/skpm/package.json b/__tests__/skpm/package.json new file mode 100644 index 00000000..58f4729b --- /dev/null +++ b/__tests__/skpm/package.json @@ -0,0 +1,15 @@ +{ + "name": "example-tests", + "version": "1.0.0", + "description": "", + "private": true, + "skpm": { + "test": { + "testRegex": "/.*.(test|spec).jsx?$" + } + }, + "scripts": { + "test": "../../node_modules/.bin/skpm-test" + }, + "license": "MIT" +} diff --git a/__tests__/skpm/webpack.skpm.config.js b/__tests__/skpm/webpack.skpm.config.js new file mode 100644 index 00000000..6518ad5d --- /dev/null +++ b/__tests__/skpm/webpack.skpm.config.js @@ -0,0 +1,3 @@ +const webpackConfig = require('../examples/webpack.skpm.config'); + +module.exports = webpackConfig; diff --git a/examples/basic-setup/src/my-command.js b/examples/basic-setup/src/my-command.js index cfd34a0b..98ece84d 100644 --- a/examples/basic-setup/src/my-command.js +++ b/examples/basic-setup/src/my-command.js @@ -42,7 +42,7 @@ const Color = { Swatch.propTypes = Color; -const Document = ({ colors }) => ( +export const Document = ({ colors }) => ( ( +export const Document = () => ( { +export const Document = ({ colors, steps }) => { const color = chroma.scale(colors); return ( diff --git a/examples/emotion/package.json b/examples/emotion/package.json index eab42181..80667627 100644 --- a/examples/emotion/package.json +++ b/examples/emotion/package.json @@ -18,7 +18,8 @@ "@skpm/builder": "^0.4.3" }, "dependencies": { - "emotion-primitives": "^1.0.0-beta.6", + "@emotion/core": "^10.0.28", + "@emotion/primitives": "^10.0.30", "react": "^16.4.1", "react-primitives": "^0.6.0", "react-sketchapp": "^3.0.0" diff --git a/examples/emotion/src/my-command.js b/examples/emotion/src/my-command.js index 92bf3f4c..f52bfaa0 100644 --- a/examples/emotion/src/my-command.js +++ b/examples/emotion/src/my-command.js @@ -1,5 +1,5 @@ -import React from 'react'; -import emotion from 'emotion-primitives'; +import * as React from 'react'; +import emotion from '@emotion/primitives'; import { render } from 'react-sketchapp'; const Container = emotion.View` @@ -21,7 +21,7 @@ const Image = emotion.Image` const emotionLogo = 'https://avatars3.githubusercontent.com/u/31557565?s=400&v=4'; -class App extends React.Component { +export class App extends React.Component { render() { return ( diff --git a/examples/form-validation/src/components/TextBox/index.sketch.js b/examples/form-validation/src/components/TextBox/index.sketch.js index 539a5793..63ac4b38 100644 --- a/examples/form-validation/src/components/TextBox/index.sketch.js +++ b/examples/form-validation/src/components/TextBox/index.sketch.js @@ -2,13 +2,7 @@ import * as React from 'react'; import { View, Text } from 'react-primitives'; import styles from './style'; -type Props = { - label: string, - value: string, - children?: React$Element, -}; - -const TextBox = ({ label, value, children }: Props) => ( +const TextBox = ({ label, value, children }) => ( {label} diff --git a/examples/form-validation/src/main.js b/examples/form-validation/src/main.js index f2f136d4..d115133b 100644 --- a/examples/form-validation/src/main.js +++ b/examples/form-validation/src/main.js @@ -6,7 +6,7 @@ import DATA from './data'; import Register from './components/Register'; import Space from './components/Space'; -const Page = ({ sessions }) => ( +export const Page = ({ sessions }) => ( Form Validation w/ DOM elements and React Primitives