github/meteor
1
1
Fork 0
mirror of https://github.com/meteor/meteor.git synced 2026-05-02 03:01:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12000 from meteor/feature/tailwind-skeleton

Browse Source 
Creating new skeleton that will have tailwind configured by default
This commit is contained in:
Denilson
2022-04-11 14:05:33 -04:00
committed by GitHub
parent bf7ea2478b 7d3109ca40
commit 2e19ebbbb3
19 changed files with 286 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tools/cli/commands.js
View File

@@ -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("");

3
tools/cli/help.txt
View File

@@ -150,7 +150,7 @@ Options:
>>> create
Create a new project.
Usage: meteor create [--release <release>] [--bare|--minimal|--full|--react|--vue|--apollo|--svelte|--blaze] <path>
Usage: meteor create [--release <release>] [--bare|--minimal|--full|--react|--vue|--apollo|--svelte|--blaze|--tailwind] <path>
meteor create [--release <release>] --example <example_name> [<path>]
meteor create --list
meteor create --package [<package_name>]
@@ -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

4
tools/static-assets/README.md
View File

@@ -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

1
tools/static-assets/skel-tailwind/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules/

1
tools/static-assets/skel-tailwind/.meteor/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
local

23
tools/static-assets/skel-tailwind/.meteor/packages Normal file
View File

@@ -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

2
tools/static-assets/skel-tailwind/.meteor/platforms Normal file
View File

@@ -0,0 +1,2 @@
server
browser

3
tools/static-assets/skel-tailwind/client/main.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

15
tools/static-assets/skel-tailwind/client/main.html Normal file
View File

@@ -0,0 +1,15 @@
<head>
<title>~name~</title>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta
name="viewport"
content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</head>
<body>
<div class="bg-gray-100" id="react-target"></div>
</body>

8
tools/static-assets/skel-tailwind/client/main.jsx Normal file
View File

@@ -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(<App/>, document.getElementById('react-target'));
});

3
tools/static-assets/skel-tailwind/imports/api/links.js Normal file
View File

@@ -0,0 +1,3 @@
import { Mongo } from 'meteor/mongo';
export const LinksCollection = new Mongo.Collection('links');

10
tools/static-assets/skel-tailwind/imports/ui/App.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import { Hello } from './Hello.jsx';
import { Info } from './Info.jsx';
export const App = () => (
<div className="max-w-3xl min-h-screen mx-auto sm:pt-10">
<Hello/>
<Info/>
</div>
);

42
tools/static-assets/skel-tailwind/imports/ui/Hello.jsx Normal file
View File

@@ -0,0 +1,42 @@
import React, { useState } from 'react';
export const Hello = () => {
const [counter, setCounter] = useState(0);
const increment = () => {
setCounter(counter + 1);
};
return (
<div className="bg-white shadow sm:rounded-lg mb-4">
<div className="px-4 py-5 sm:p-6">
<div className="sm:flex sm:items-start sm:justify-between">
<div>
<div className="flex items-center">
<h3 className="text-3xl text-gray-900 font-bold">
Welcome to Meteor!
</h3>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 400 400"><g fill="#DE4F4F"><path d="M286.575 306.886L44.755 49.922l256.962 241.82c4.312 4.056 4.518 10.837.46 15.146-4.053 4.31-10.832 4.518-15.144.46-.15-.14-.318-.31-.458-.462M251.032 325.01L68.692 127.528 266.177 309.87c4.35 4.013 4.618 10.794.604 15.144-4.018 4.35-10.794 4.617-15.146.604-.2-.19-.413-.406-.602-.607M214.083 325.542L92.907 194.272 224.18 315.446c2.898 2.676 3.077 7.197.402 10.098-2.677 2.896-7.195 3.082-10.097.402-.136-.125-.277-.272-.402-.405M315.612 234.685L189.102 98.078 325.71 224.585c2.896 2.684 3.067 7.203.387 10.1-2.682 2.895-7.2 3.066-10.098.387-.13-.123-.268-.258-.388-.387M304.697 272.93L121.567 74.655l198.274 183.13c4.35 4.017 4.62 10.796.605 15.144-4.017 4.352-10.797 4.617-15.146.604-.205-.19-.418-.404-.603-.605M176.31 314.783l-57.647-62.695 62.692 57.65c1.453 1.334 1.547 3.596.215 5.045-1.338 1.453-3.598 1.55-5.05.215-.072-.07-.144-.143-.21-.215M311.093 189.297l-57.65-62.694 62.696 57.646c1.45 1.335 1.546 3.597.21 5.048-1.335 1.45-3.595 1.547-5.05.21-.07-.065-.143-.143-.207-.21"/></g></svg>
</div>
</div>
<div className="mt-2 max-w-xl text-gray-500 text-lg">
<p>
You've pressed the button <b>{counter}</b> times.
</p>
</div>
</div>
<div className="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
<button
onClick={increment}
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-lg"
>
Click Me
</button>
</div>
</div>
</div>
</div>
)
};

77
tools/static-assets/skel-tailwind/imports/ui/Info.jsx Normal file
View File

@@ -0,0 +1,77 @@
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(() => {
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: <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
</svg>,
...link,
}));
return (
<div className="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
{actions.map((action, actionIdx) => (
<div
key={action.title}
className={classNames(
actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '',
actionIdx === 1 ? 'sm:rounded-tr-lg' : '',
actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '',
actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '',
'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500'
)}
>
<div>
<span
className={classNames(
action.iconBackground,
action.iconForeground,
'rounded-lg inline-flex p-3 ring-4 ring-white'
)}
>
{action.icon}
</span>
</div>
<div className="mt-8">
<h3 className="text-lg font-medium">
<a href={action.href} target="_blank" className="focus:outline-none">
{/* Extend touch target to entire panel */}
<span className="absolute inset-0" aria-hidden="true" />
{action.title}
</a>
</h3>
</div>
</div>
))}
</div>
);
};

27
tools/static-assets/skel-tailwind/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"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",
"postcss-load-config": "^3.1.4",
"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"
}
}

6
tools/static-assets/skel-tailwind/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

31
tools/static-assets/skel-tailwind/server/main.js Normal file
View File

@@ -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'
});
}
});

7
tools/static-assets/skel-tailwind/tailwind.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
content: ["./imports/ui/**/*.{js,jsx,ts,tsx}", './client/*.html'],
theme: {
extend: {},
},
plugins: [],
}

20
tools/static-assets/skel-tailwind/tests/main.js Normal file
View File

@@ -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);
});
}
});