From 9e8c6a47ba97ca3a68a200119241395a7c70eaae Mon Sep 17 00:00:00 2001 From: denihs Date: Tue, 5 Apr 2022 16:01:08 -0400 Subject: [PATCH 1/4] Creating new skeleton that will have tailwind configured by default --- tools/cli/commands.js | 5 ++- tools/cli/help.txt | 3 +- tools/static-assets/README.md | 4 +++ tools/static-assets/skel-tailwind/.gitignore | 1 + .../skel-tailwind/.meteor/.gitignore | 1 + .../skel-tailwind/.meteor/packages | 23 ++++++++++++++ .../skel-tailwind/.meteor/platforms | 2 ++ .../skel-tailwind/client/main.css | 8 +++++ .../skel-tailwind/client/main.html | 7 +++++ .../skel-tailwind/client/main.jsx | 8 +++++ .../skel-tailwind/imports/api/links.js | 3 ++ .../skel-tailwind/imports/ui/App.jsx | 11 +++++++ .../skel-tailwind/imports/ui/Hello.jsx | 21 +++++++++++++ .../skel-tailwind/imports/ui/Info.jsx | 20 ++++++++++++ .../static-assets/skel-tailwind/package.json | 26 ++++++++++++++++ .../skel-tailwind/postcss.config.js | 6 ++++ .../skel-tailwind/server/main.js | 31 +++++++++++++++++++ .../skel-tailwind/tailwind.config.js | 7 +++++ .../static-assets/skel-tailwind/tests/main.js | 20 ++++++++++++ 19 files changed, 205 insertions(+), 2 deletions(-) create mode 100644 tools/static-assets/skel-tailwind/.gitignore create mode 100644 tools/static-assets/skel-tailwind/.meteor/.gitignore create mode 100644 tools/static-assets/skel-tailwind/.meteor/packages create mode 100644 tools/static-assets/skel-tailwind/.meteor/platforms create mode 100644 tools/static-assets/skel-tailwind/client/main.css create mode 100644 tools/static-assets/skel-tailwind/client/main.html create mode 100644 tools/static-assets/skel-tailwind/client/main.jsx create mode 100644 tools/static-assets/skel-tailwind/imports/api/links.js create mode 100644 tools/static-assets/skel-tailwind/imports/ui/App.jsx create mode 100644 tools/static-assets/skel-tailwind/imports/ui/Hello.jsx create mode 100644 tools/static-assets/skel-tailwind/imports/ui/Info.jsx create mode 100644 tools/static-assets/skel-tailwind/package.json create mode 100644 tools/static-assets/skel-tailwind/postcss.config.js create mode 100644 tools/static-assets/skel-tailwind/server/main.js create mode 100644 tools/static-assets/skel-tailwind/tailwind.config.js create mode 100644 tools/static-assets/skel-tailwind/tests/main.js diff --git a/tools/cli/commands.js b/tools/cli/commands.js index c97d007c84..8825ff7325 100644 --- a/tools/cli/commands.js +++ b/tools/cli/commands.js @@ -514,7 +514,8 @@ export const AVAILABLE_SKELETONS = [ DEFAULT_SKELETON, "typescript", "vue", - "svelte" + "svelte", + "tailwind", ]; main.registerCommand({ @@ -533,6 +534,7 @@ main.registerCommand({ typescript: { type: Boolean }, apollo: { type: Boolean }, svelte: { type: Boolean }, + tailwind: { type: Boolean }, }, catalogRefresh: new catalog.Refresh.Never() }, function (options) { @@ -904,6 +906,7 @@ main.registerCommand({ cmd("meteor create --svelte # to create a basic Svelte app"); cmd("meteor create --typescript # to create an app using TypeScript and React"); cmd("meteor create --blaze # to create an app using Blaze"); + cmd("meteor create --tailwind # to create an app using React and Tailwind"); } Console.info(""); diff --git a/tools/cli/help.txt b/tools/cli/help.txt index 04e636de6e..5c6129e409 100644 --- a/tools/cli/help.txt +++ b/tools/cli/help.txt @@ -150,7 +150,7 @@ Options: >>> create Create a new project. -Usage: meteor create [--release ] [--bare|--minimal|--full|--react|--vue|--apollo|--svelte|--blaze] +Usage: meteor create [--release ] [--bare|--minimal|--full|--react|--vue|--apollo|--svelte|--blaze|--tailwind] meteor create [--release ] --example [] meteor create --list meteor create --package [] @@ -188,6 +188,7 @@ Options: --svelte Create a basic svelte-based app. --typescript Create a basic Typescript React-based app. --blaze Create a basic blaze-based app. + --tailwind Create a basic react-based app, with tailwind configured. >>> update diff --git a/tools/static-assets/README.md b/tools/static-assets/README.md index 090b5250d0..b2efb024ea 100644 --- a/tools/static-assets/README.md +++ b/tools/static-assets/README.md @@ -28,6 +28,10 @@ Similar to `skel`, `skel-pack` is copied on `meteor create --package` command. Similar to `skel`, `skel-react` is copied on `meteor create --react` command. +## skel-tailwind - Package Skeleton + +Similar to `skel`, `skel-tailwind` is copied on `meteor create --tailwind` command. + ## server - Bundled App's Bootstrap The `server` folder is copied by Isobuild when the app is bundled (on diff --git a/tools/static-assets/skel-tailwind/.gitignore b/tools/static-assets/skel-tailwind/.gitignore new file mode 100644 index 0000000000..c2658d7d1b --- /dev/null +++ b/tools/static-assets/skel-tailwind/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/tools/static-assets/skel-tailwind/.meteor/.gitignore b/tools/static-assets/skel-tailwind/.meteor/.gitignore new file mode 100644 index 0000000000..4083037423 --- /dev/null +++ b/tools/static-assets/skel-tailwind/.meteor/.gitignore @@ -0,0 +1 @@ +local diff --git a/tools/static-assets/skel-tailwind/.meteor/packages b/tools/static-assets/skel-tailwind/.meteor/packages new file mode 100644 index 0000000000..72de92e77b --- /dev/null +++ b/tools/static-assets/skel-tailwind/.meteor/packages @@ -0,0 +1,23 @@ +# Meteor packages used by this project, one per line. +# Check this file (and the other files in this directory) into your repository. +# +# 'meteor add' and 'meteor remove' will edit this file for you, +# but you can also edit it by hand. + +meteor-base # Packages every Meteor app needs to have +mobile-experience # Packages for a great mobile UX +mongo # The database Meteor supports right now +reactive-var # Reactive variable for tracker + +standard-minifier-css # CSS minifier run for production mode +standard-minifier-js # JS minifier run for production mode +es5-shim # ECMAScript 5 compatibility for older browsers +ecmascript # Enable ECMAScript2015+ syntax in app code +typescript # Enable TypeScript syntax in .ts and .tsx modules +shell-server # Server-side component of the `meteor shell` command +hot-module-replacement # Update client in development without reloading the page + +autopublish # Publish all data to the clients (for prototyping) +insecure # Allow all DB writes from clients (for prototyping) +static-html # Define static page content in .html files +react-meteor-data # React higher-order component for reactively tracking Meteor data diff --git a/tools/static-assets/skel-tailwind/.meteor/platforms b/tools/static-assets/skel-tailwind/.meteor/platforms new file mode 100644 index 0000000000..efeba1b50c --- /dev/null +++ b/tools/static-assets/skel-tailwind/.meteor/platforms @@ -0,0 +1,2 @@ +server +browser diff --git a/tools/static-assets/skel-tailwind/client/main.css b/tools/static-assets/skel-tailwind/client/main.css new file mode 100644 index 0000000000..30c7e60f67 --- /dev/null +++ b/tools/static-assets/skel-tailwind/client/main.css @@ -0,0 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + padding: 10px; + font-family: sans-serif; +} diff --git a/tools/static-assets/skel-tailwind/client/main.html b/tools/static-assets/skel-tailwind/client/main.html new file mode 100644 index 0000000000..27c3712e54 --- /dev/null +++ b/tools/static-assets/skel-tailwind/client/main.html @@ -0,0 +1,7 @@ + + ~name~ + + + +
+ diff --git a/tools/static-assets/skel-tailwind/client/main.jsx b/tools/static-assets/skel-tailwind/client/main.jsx new file mode 100644 index 0000000000..a42cee8ff3 --- /dev/null +++ b/tools/static-assets/skel-tailwind/client/main.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Meteor } from 'meteor/meteor'; +import { render } from 'react-dom'; +import { App } from '/imports/ui/App'; + +Meteor.startup(() => { + render(, document.getElementById('react-target')); +}); diff --git a/tools/static-assets/skel-tailwind/imports/api/links.js b/tools/static-assets/skel-tailwind/imports/api/links.js new file mode 100644 index 0000000000..050c508eae --- /dev/null +++ b/tools/static-assets/skel-tailwind/imports/api/links.js @@ -0,0 +1,3 @@ +import { Mongo } from 'meteor/mongo'; + +export const LinksCollection = new Mongo.Collection('links'); diff --git a/tools/static-assets/skel-tailwind/imports/ui/App.jsx b/tools/static-assets/skel-tailwind/imports/ui/App.jsx new file mode 100644 index 0000000000..e52c8f240a --- /dev/null +++ b/tools/static-assets/skel-tailwind/imports/ui/App.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Hello } from './Hello.jsx'; +import { Info } from './Info.jsx'; + +export const App = () => ( +
+

Welcome to Meteor!

+ + +
+); diff --git a/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx b/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx new file mode 100644 index 0000000000..9b86f9eb1e --- /dev/null +++ b/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx @@ -0,0 +1,21 @@ +import React, { useState } from 'react'; + +export const Hello = () => { + const [counter, setCounter] = useState(0); + + const increment = () => { + setCounter(counter + 1); + }; + + return ( +
+ +

You've pressed the button {counter} times.

+
+ ); +}; diff --git a/tools/static-assets/skel-tailwind/imports/ui/Info.jsx b/tools/static-assets/skel-tailwind/imports/ui/Info.jsx new file mode 100644 index 0000000000..65056bf4a1 --- /dev/null +++ b/tools/static-assets/skel-tailwind/imports/ui/Info.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { useTracker } from 'meteor/react-meteor-data'; +import { LinksCollection } from '../api/links'; + +export const Info = () => { + const links = useTracker(() => { + return LinksCollection.find().fetch(); + }); + + return ( +
+

Learn Meteor!

+ +
+ ); +}; diff --git a/tools/static-assets/skel-tailwind/package.json b/tools/static-assets/skel-tailwind/package.json new file mode 100644 index 0000000000..8ee20c7964 --- /dev/null +++ b/tools/static-assets/skel-tailwind/package.json @@ -0,0 +1,26 @@ +{ + "name": "~name~", + "private": true, + "scripts": { + "start": "meteor run", + "test": "meteor test --once --driver-package meteortesting:mocha", + "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha", + "visualize": "meteor --production --extra-packages bundle-visualizer" + }, + "dependencies": { + "@babel/runtime": "^7.15.4", + "autoprefixer": "^10.4.4", + "meteor-node-stubs": "^1.2.1", + "postcss": "^8.4.12", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "tailwindcss": "^3.0.23" + }, + "meteor": { + "mainModule": { + "client": "client/main.jsx", + "server": "server/main.js" + }, + "testModule": "tests/main.js" + } +} diff --git a/tools/static-assets/skel-tailwind/postcss.config.js b/tools/static-assets/skel-tailwind/postcss.config.js new file mode 100644 index 0000000000..33ad091d26 --- /dev/null +++ b/tools/static-assets/skel-tailwind/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/tools/static-assets/skel-tailwind/server/main.js b/tools/static-assets/skel-tailwind/server/main.js new file mode 100644 index 0000000000..13e6a4f815 --- /dev/null +++ b/tools/static-assets/skel-tailwind/server/main.js @@ -0,0 +1,31 @@ +import { Meteor } from 'meteor/meteor'; +import { LinksCollection } from '/imports/api/links'; + +function insertLink({ title, url }) { + LinksCollection.insert({title, url, createdAt: new Date()}); +} + +Meteor.startup(() => { + // If the Links collection is empty, add some data. + if (LinksCollection.find().count() === 0) { + insertLink({ + title: 'Do the Tutorial', + url: 'https://www.meteor.com/tutorials/react/creating-an-app' + }); + + insertLink({ + title: 'Follow the Guide', + url: 'http://guide.meteor.com' + }); + + insertLink({ + title: 'Read the Docs', + url: 'https://docs.meteor.com' + }); + + insertLink({ + title: 'Discussions', + url: 'https://forums.meteor.com' + }); + } +}); diff --git a/tools/static-assets/skel-tailwind/tailwind.config.js b/tools/static-assets/skel-tailwind/tailwind.config.js new file mode 100644 index 0000000000..02ddc939a6 --- /dev/null +++ b/tools/static-assets/skel-tailwind/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + content: ["./imports/ui/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/tools/static-assets/skel-tailwind/tests/main.js b/tools/static-assets/skel-tailwind/tests/main.js new file mode 100644 index 0000000000..ea7a8da1e1 --- /dev/null +++ b/tools/static-assets/skel-tailwind/tests/main.js @@ -0,0 +1,20 @@ +import assert from "assert"; + +describe("~name~", function () { + it("package.json has correct name", async function () { + const { name } = await import("../package.json"); + assert.strictEqual(name, "~name~"); + }); + + if (Meteor.isClient) { + it("client is not server", function () { + assert.strictEqual(Meteor.isServer, false); + }); + } + + if (Meteor.isServer) { + it("server is not client", function () { + assert.strictEqual(Meteor.isClient, false); + }); + } +}); From 0077e398e62a45250025e16149e9ae960312634a Mon Sep 17 00:00:00 2001 From: denihs Date: Tue, 5 Apr 2022 16:21:13 -0400 Subject: [PATCH 2/4] Aligning new tailwind's command text description --- tools/cli/commands.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/cli/commands.js b/tools/cli/commands.js index 8825ff7325..8c6c31104d 100644 --- a/tools/cli/commands.js +++ b/tools/cli/commands.js @@ -906,7 +906,7 @@ main.registerCommand({ cmd("meteor create --svelte # to create a basic Svelte app"); cmd("meteor create --typescript # to create an app using TypeScript and React"); cmd("meteor create --blaze # to create an app using Blaze"); - cmd("meteor create --tailwind # to create an app using React and Tailwind"); + cmd("meteor create --tailwind # to create an app using React and Tailwind"); } Console.info(""); From 19c25d586864208fa3b4a7d4e6a7ce8069b3a5f7 Mon Sep 17 00:00:00 2001 From: denihs Date: Wed, 6 Apr 2022 11:59:59 -0400 Subject: [PATCH 3/4] Removing custom css --- tools/static-assets/skel-tailwind/client/main.css | 5 ----- tools/static-assets/skel-tailwind/imports/ui/App.jsx | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/tools/static-assets/skel-tailwind/client/main.css b/tools/static-assets/skel-tailwind/client/main.css index 30c7e60f67..b5c61c9567 100644 --- a/tools/static-assets/skel-tailwind/client/main.css +++ b/tools/static-assets/skel-tailwind/client/main.css @@ -1,8 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -body { - padding: 10px; - font-family: sans-serif; -} diff --git a/tools/static-assets/skel-tailwind/imports/ui/App.jsx b/tools/static-assets/skel-tailwind/imports/ui/App.jsx index e52c8f240a..f581ae25f5 100644 --- a/tools/static-assets/skel-tailwind/imports/ui/App.jsx +++ b/tools/static-assets/skel-tailwind/imports/ui/App.jsx @@ -3,7 +3,7 @@ import { Hello } from './Hello.jsx'; import { Info } from './Info.jsx'; export const App = () => ( -
+

Welcome to Meteor!

From 7d3109ca404980cb9d8871a3cc148e44e1e8854a Mon Sep 17 00:00:00 2001 From: denihs Date: Thu, 7 Apr 2022 14:59:18 -0400 Subject: [PATCH 4/4] Stylishing the skeleton with tailwind --- .../skel-tailwind/client/main.html | 12 ++- .../skel-tailwind/imports/ui/App.jsx | 3 +- .../skel-tailwind/imports/ui/Hello.jsx | 39 +++++++--- .../skel-tailwind/imports/ui/Info.jsx | 73 +++++++++++++++++-- .../static-assets/skel-tailwind/package.json | 1 + .../skel-tailwind/tailwind.config.js | 2 +- 6 files changed, 108 insertions(+), 22 deletions(-) diff --git a/tools/static-assets/skel-tailwind/client/main.html b/tools/static-assets/skel-tailwind/client/main.html index 27c3712e54..f8fa758857 100644 --- a/tools/static-assets/skel-tailwind/client/main.html +++ b/tools/static-assets/skel-tailwind/client/main.html @@ -1,7 +1,15 @@ - ~name~ + ~name~ + + + + + -
+
diff --git a/tools/static-assets/skel-tailwind/imports/ui/App.jsx b/tools/static-assets/skel-tailwind/imports/ui/App.jsx index f581ae25f5..6cc8298b0e 100644 --- a/tools/static-assets/skel-tailwind/imports/ui/App.jsx +++ b/tools/static-assets/skel-tailwind/imports/ui/App.jsx @@ -3,8 +3,7 @@ import { Hello } from './Hello.jsx'; import { Info } from './Info.jsx'; export const App = () => ( -
-

Welcome to Meteor!

+
diff --git a/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx b/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx index 9b86f9eb1e..ca51ed5233 100644 --- a/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx +++ b/tools/static-assets/skel-tailwind/imports/ui/Hello.jsx @@ -8,14 +8,35 @@ export const Hello = () => { }; return ( -
- -

You've pressed the button {counter} times.

+
+
+
+
+
+

+ Welcome to Meteor! +

+
+ +
+
+
+

+ You've pressed the button {counter} times. +

+
+
+
+ +
+
+
- ); + ) }; diff --git a/tools/static-assets/skel-tailwind/imports/ui/Info.jsx b/tools/static-assets/skel-tailwind/imports/ui/Info.jsx index 65056bf4a1..8272c26f94 100644 --- a/tools/static-assets/skel-tailwind/imports/ui/Info.jsx +++ b/tools/static-assets/skel-tailwind/imports/ui/Info.jsx @@ -2,19 +2,76 @@ import React from 'react'; import { useTracker } from 'meteor/react-meteor-data'; import { LinksCollection } from '../api/links'; +function classNames(...classes) { + return classes.filter(Boolean).join(' '); +} + export const Info = () => { const links = useTracker(() => { - return LinksCollection.find().fetch(); + const data = LinksCollection.find().fetch(); + + const foreGroundColors = ['text-red-700', 'text-orange-700', 'text-rose-700', 'text-yellow-700']; + const backgroundColors = ['bg-red-50', 'bg-orange-50', 'bg-rose-50', 'bg-yellow-50']; + + return data.map((d, index) => ({ + ...d, + iconForeground: foreGroundColors[index], + iconBackground: backgroundColors[index], + })) }); + const actions = links.map(link => ({ + id: link._id, + title: link.title, + href: link.url, + icon: + + , + ...link, + })); + + + return ( -
-

Learn Meteor!

- +
+ {actions.map((action, actionIdx) => ( + + ))}
); }; diff --git a/tools/static-assets/skel-tailwind/package.json b/tools/static-assets/skel-tailwind/package.json index 8ee20c7964..122c7e4cf8 100644 --- a/tools/static-assets/skel-tailwind/package.json +++ b/tools/static-assets/skel-tailwind/package.json @@ -12,6 +12,7 @@ "autoprefixer": "^10.4.4", "meteor-node-stubs": "^1.2.1", "postcss": "^8.4.12", + "postcss-load-config": "^3.1.4", "react": "^17.0.2", "react-dom": "^17.0.2", "tailwindcss": "^3.0.23" diff --git a/tools/static-assets/skel-tailwind/tailwind.config.js b/tools/static-assets/skel-tailwind/tailwind.config.js index 02ddc939a6..b8bf0cafc2 100644 --- a/tools/static-assets/skel-tailwind/tailwind.config.js +++ b/tools/static-assets/skel-tailwind/tailwind.config.js @@ -1,5 +1,5 @@ module.exports = { - content: ["./imports/ui/**/*.{js,jsx,ts,tsx}"], + content: ["./imports/ui/**/*.{js,jsx,ts,tsx}", './client/*.html'], theme: { extend: {}, },