diff --git a/.agents/skills/migrate-to-rstack-cli/references/rslib.md b/.agents/skills/migrate-to-rstack-cli/references/rslib.md index 88481137..10f3db28 100644 --- a/.agents/skills/migrate-to-rstack-cli/references/rslib.md +++ b/.agents/skills/migrate-to-rstack-cli/references/rslib.md @@ -18,7 +18,7 @@ Read this reference when the project uses `@rslib/core`, `rslib.config.*`, `rsli import { define } from 'rstack'; define.lib({ - lib: [{ dts: true }], + dts: true, }); ``` diff --git a/README.md b/README.md index 017d2e3c..7edb06d2 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,9 @@ bun add -d rstack "test": "rs test", "lint": "rs lint", "lib": "rs lib", - "doc": "rs doc" + "doc": "rs doc", + "format": "rs fmt", + "prepare": "rs setup" } } ``` @@ -74,6 +76,7 @@ pnpm test pnpm lint pnpm lib pnpm doc +pnpm format ``` ## Credits diff --git a/examples/lib-node/rstack.config.ts b/examples/lib-node/rstack.config.ts index 7febc0b6..ccafc8da 100644 --- a/examples/lib-node/rstack.config.ts +++ b/examples/lib-node/rstack.config.ts @@ -2,7 +2,8 @@ import { define } from 'rstack'; define.lib({ - lib: [{ syntax: ['node 22'], dts: true }], + dts: true, + syntax: ['node 22'], }); define.lint(async () => { diff --git a/examples/lib-react/rstack.config.ts b/examples/lib-react/rstack.config.ts index 1b26f747..31913350 100644 --- a/examples/lib-react/rstack.config.ts +++ b/examples/lib-react/rstack.config.ts @@ -4,12 +4,13 @@ import { define } from 'rstack'; define.lib(async () => { const { pluginReact } = await import('@rsbuild/plugin-react'); return { + bundle: false, + dts: true, source: { entry: { index: ['./src/**'], }, }, - lib: [{ bundle: false, dts: true }], output: { target: 'web', }, diff --git a/packages/create-rstack/LICENSE b/packages/create-rstack/LICENSE new file mode 100644 index 00000000..235ea7b4 --- /dev/null +++ b/packages/create-rstack/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Rstack contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md new file mode 100644 index 00000000..c0b7c4f0 --- /dev/null +++ b/packages/create-rstack/README.md @@ -0,0 +1,41 @@ +# create-rstack + +Create a new Rstack project. + +## Usage + +Using `npm create`: + +```bash +npm create rstack@latest +``` + +Using CLI flags: + +```bash +npx create-rstack --dir my-project --template app-vanilla-ts + +# Using abbreviations +npx create-rstack -d my-project -t app-vanilla-ts +``` + +## Templates + +- `app-vanilla-js` - JavaScript Vanilla application +- `app-vanilla-ts` - TypeScript Vanilla application +- `app-react-js` - JavaScript React application +- `app-react-ts` - TypeScript React application +- `app-vue-js` - JavaScript Vue application +- `app-vue-ts` - TypeScript Vue application +- `lib-node-js` - JavaScript Node.js library +- `lib-node-ts` - TypeScript Node.js library +- `lib-react-js` - JavaScript React library +- `lib-react-ts` - TypeScript React library + +## Documentation + +See the [Rstack documentation](https://rstack.rs). + +## License + +[MIT](https://github.com/rstackjs/rstack-cli/blob/main/LICENSE). diff --git a/packages/create-rstack/bin.js b/packages/create-rstack/bin.js new file mode 100755 index 00000000..1ae21c85 --- /dev/null +++ b/packages/create-rstack/bin.js @@ -0,0 +1,2 @@ +#!/usr/bin/env node +import './dist/index.js'; diff --git a/packages/create-rstack/package.json b/packages/create-rstack/package.json new file mode 100644 index 00000000..7fbea590 --- /dev/null +++ b/packages/create-rstack/package.json @@ -0,0 +1,52 @@ +{ + "name": "create-rstack", + "version": "3.0.0", + "description": "Create a new Rstack project", + "homepage": "https://rstack.rs", + "bugs": { + "url": "https://github.com/rstackjs/rstack-cli/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/rstackjs/rstack-cli.git", + "directory": "packages/create-rstack" + }, + "license": "MIT", + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "types": "./dist/index.d.ts", + "bin": { + "create-rstack": "./bin.js" + }, + "files": [ + "template-*/**", + "dist", + "bin.js" + ], + "scripts": { + "build": "rs lib", + "dev": "rs lib --watch", + "start": "node ./dist/index.js", + "test": "rs test" + }, + "dependencies": { + "@rstackjs/create-toolkit": "catalog:" + }, + "devDependencies": { + "@types/node": "catalog:", + "rstack": "workspace:*", + "typescript": "catalog:" + }, + "engines": { + "node": ">=22.12.0" + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + } +} diff --git a/packages/create-rstack/rstack.config.ts b/packages/create-rstack/rstack.config.ts new file mode 100644 index 00000000..923fc17d --- /dev/null +++ b/packages/create-rstack/rstack.config.ts @@ -0,0 +1,13 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.lib({ + syntax: 'es2023', +}); + +define.test({ + include: ['./tests/**/*.test.ts'], + source: { + tsconfigPath: './tests/tsconfig.json', + }, +}); diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts new file mode 100644 index 00000000..e895cecd --- /dev/null +++ b/packages/create-rstack/src/index.ts @@ -0,0 +1,87 @@ +import { type Argv, checkCancel, create, select } from '@rstackjs/create-toolkit'; +import path from 'node:path'; + +const getTemplateName = async ({ template }: Argv): Promise => { + if (typeof template === 'string') { + if (template === 'app' || template.startsWith('app-')) { + const [, framework = 'vanilla', language = 'js'] = template.split('-'); + + if (framework === 'js' || framework === 'ts') { + return `app-vanilla-${framework}`; + } + + return `app-${framework}-${language}`; + } + + if (template === 'lib' || template.startsWith('lib-')) { + const [, libraryType = 'node', language = 'js'] = template.split('-'); + + if (libraryType === 'js' || libraryType === 'ts') { + return `lib-node-${libraryType}`; + } + + return `lib-${libraryType}-${language}`; + } + + const [type, language = 'js'] = template.split('-'); + return `${type}-${language}`; + } + + const projectType = checkCancel( + await select({ + message: 'Select project type', + options: [ + { value: 'app', label: 'Web Application' }, + { value: 'lib', label: 'Library' }, + ], + }), + ); + + const templateType = checkCancel( + await select({ + message: projectType === 'app' ? 'Select framework' : 'Select library type', + options: + projectType === 'app' + ? [ + { value: 'vanilla', label: 'Vanilla' }, + { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, + ] + : [ + { value: 'node', label: 'Node.js' }, + { value: 'react', label: 'React' }, + ], + }), + ); + + const language = checkCancel( + await select({ + message: 'Select language', + options: [ + { value: 'ts', label: 'TypeScript' }, + { value: 'js', label: 'JavaScript' }, + ], + }), + ); + + return `${projectType}-${templateType}-${language}`; +}; + +await create({ + root: path.join(import.meta.dirname, '..'), + name: 'rstack', + templates: [ + 'app-vanilla-js', + 'app-vanilla-ts', + 'app-react-js', + 'app-react-ts', + 'app-vue-js', + 'app-vue-ts', + 'lib-node-js', + 'lib-node-ts', + 'lib-react-js', + 'lib-react-ts', + ], + builtinTools: [], + getTemplateName, +}); diff --git a/packages/create-rstack/template-app-react-js/AGENTS.md b/packages/create-rstack/template-app-react-js/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-react-js/AGENTS.md @@ -0,0 +1,12 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-react-js/package.json b/packages/create-rstack/template-app-react-js/package.json new file mode 100644 index 00000000..09dde494 --- /dev/null +++ b/packages/create-rstack/template-app-react-js/package.json @@ -0,0 +1,22 @@ +{ + "name": "rstack-app-react-js", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test" + }, + "dependencies": { + "react": "^19.2.8", + "react-dom": "^19.2.8" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^2.1.0", + "rstack": "^0.3.5" + } +} diff --git a/packages/create-rstack/template-app-react-js/rstack.config.js b/packages/create-rstack/template-app-react-js/rstack.config.js new file mode 100644 index 00000000..a89f2994 --- /dev/null +++ b/packages/create-rstack/template-app-react-js/rstack.config.js @@ -0,0 +1,25 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginReact } = await import('@rsbuild/plugin-react'); + + return { + plugins: [pluginReact()], + }; +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js, reactHooksPlugin, reactPlugin } = await import('rstack/lint'); + + return [ + js.configs.recommended, + reactPlugin.configs.recommended, + reactHooksPlugin.configs.recommended, + ]; +}); diff --git a/packages/create-rstack/template-app-react-js/src/App.css b/packages/create-rstack/template-app-react-js/src/App.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/packages/create-rstack/template-app-react-js/src/App.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.content { + display: flex; + min-height: 100vh; + line-height: 1.1; + text-align: center; + flex-direction: column; + justify-content: center; +} + +.content h1 { + font-size: 3.6rem; + font-weight: 700; +} + +.content p { + font-size: 1.2rem; + font-weight: 400; + opacity: 0.5; +} diff --git a/packages/create-rstack/template-app-react-js/src/App.jsx b/packages/create-rstack/template-app-react-js/src/App.jsx new file mode 100644 index 00000000..c23095d2 --- /dev/null +++ b/packages/create-rstack/template-app-react-js/src/App.jsx @@ -0,0 +1,12 @@ +import './App.css'; + +const App = () => { + return ( +
+

Rstack with React

+

Start building amazing things with Rstack.

+
+ ); +}; + +export default App; diff --git a/packages/create-rstack/template-app-react-js/src/index.jsx b/packages/create-rstack/template-app-react-js/src/index.jsx new file mode 100644 index 00000000..65a8dbf4 --- /dev/null +++ b/packages/create-rstack/template-app-react-js/src/index.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + , +); diff --git a/packages/create-rstack/template-app-react-ts/AGENTS.md b/packages/create-rstack/template-app-react-ts/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/AGENTS.md @@ -0,0 +1,12 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-react-ts/package.json b/packages/create-rstack/template-app-react-ts/package.json new file mode 100644 index 00000000..a8b73f0a --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/package.json @@ -0,0 +1,26 @@ +{ + "name": "rstack-app-react-ts", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test" + }, + "dependencies": { + "react": "^19.2.8", + "react-dom": "^19.2.8" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^2.1.0", + "@types/node": "^24.13.3", + "@types/react": "^19.2.18", + "@types/react-dom": "^19.2.4", + "rstack": "^0.3.5", + "typescript": "^7.0.2" + } +} diff --git a/packages/create-rstack/template-app-react-ts/rstack.config.ts b/packages/create-rstack/template-app-react-ts/rstack.config.ts new file mode 100644 index 00000000..29ab420e --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/rstack.config.ts @@ -0,0 +1,25 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginReact } = await import('@rsbuild/plugin-react'); + + return { + plugins: [pluginReact()], + }; +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js, ts, reactPlugin, reactHooksPlugin } = await import('rstack/lint'); + + return [ + js.configs.recommended, + ts.configs.recommended, + reactPlugin.configs.recommended, + reactHooksPlugin.configs.recommended, + ]; +}); diff --git a/packages/create-rstack/template-app-react-ts/src/App.css b/packages/create-rstack/template-app-react-ts/src/App.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/src/App.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.content { + display: flex; + min-height: 100vh; + line-height: 1.1; + text-align: center; + flex-direction: column; + justify-content: center; +} + +.content h1 { + font-size: 3.6rem; + font-weight: 700; +} + +.content p { + font-size: 1.2rem; + font-weight: 400; + opacity: 0.5; +} diff --git a/packages/create-rstack/template-app-react-ts/src/App.tsx b/packages/create-rstack/template-app-react-ts/src/App.tsx new file mode 100644 index 00000000..c23095d2 --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/src/App.tsx @@ -0,0 +1,12 @@ +import './App.css'; + +const App = () => { + return ( +
+

Rstack with React

+

Start building amazing things with Rstack.

+
+ ); +}; + +export default App; diff --git a/packages/create-rstack/template-app-react-ts/src/env.d.ts b/packages/create-rstack/template-app-react-ts/src/env.d.ts new file mode 100644 index 00000000..011b5e7b --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/src/env.d.ts @@ -0,0 +1,9 @@ +/** + * Imports the SVG file as a React component. + * @requires [@rsbuild/plugin-svgr](https://npmjs.com/package/@rsbuild/plugin-svgr) + */ +declare module '*.svg?react' { + import type React from 'react'; + const ReactComponent: React.FunctionComponent>; + export default ReactComponent; +} diff --git a/packages/create-rstack/template-app-react-ts/src/index.tsx b/packages/create-rstack/template-app-react-ts/src/index.tsx new file mode 100644 index 00000000..55f29bff --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/src/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const rootEl = document.getElementById('root'); +if (rootEl) { + const root = ReactDOM.createRoot(rootEl); + root.render( + + + , + ); +} diff --git a/packages/create-rstack/template-app-react-ts/tsconfig.json b/packages/create-rstack/template-app-react-ts/tsconfig.json new file mode 100644 index 00000000..dd3c6e37 --- /dev/null +++ b/packages/create-rstack/template-app-react-ts/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2020"], + "jsx": "react-jsx", + "target": "ES2020", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node"], + "useDefineForClassFields": true, + + /* modules */ + "moduleDetection": "force", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "resolveJsonModule": true, + "allowImportingTsExtensions": true, + + /* type checking */ + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "include": ["src"] +} diff --git a/packages/create-rstack/template-app-vanilla-js/AGENTS.md b/packages/create-rstack/template-app-vanilla-js/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-js/AGENTS.md @@ -0,0 +1,12 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-vanilla-js/package.json b/packages/create-rstack/template-app-vanilla-js/package.json new file mode 100644 index 00000000..7dd220ef --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-js/package.json @@ -0,0 +1,17 @@ +{ + "name": "rstack-app-vanilla-js", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test" + }, + "devDependencies": { + "rstack": "^0.3.5" + } +} diff --git a/packages/create-rstack/template-app-vanilla-js/rstack.config.js b/packages/create-rstack/template-app-vanilla-js/rstack.config.js new file mode 100644 index 00000000..fd6c52e0 --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-js/rstack.config.js @@ -0,0 +1,17 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app({ + // Configure Rsbuild +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-vanilla-js/src/index.css b/packages/create-rstack/template-app-vanilla-js/src/index.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-js/src/index.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.content { + display: flex; + min-height: 100vh; + line-height: 1.1; + text-align: center; + flex-direction: column; + justify-content: center; +} + +.content h1 { + font-size: 3.6rem; + font-weight: 700; +} + +.content p { + font-size: 1.2rem; + font-weight: 400; + opacity: 0.5; +} diff --git a/packages/create-rstack/template-app-vanilla-js/src/index.js b/packages/create-rstack/template-app-vanilla-js/src/index.js new file mode 100644 index 00000000..5d84d19d --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-js/src/index.js @@ -0,0 +1,12 @@ +import './index.css'; + +const rootElement = document.querySelector('#root'); + +if (rootElement) { + rootElement.innerHTML = ` +
+

Vanilla Rstack

+

Start building amazing things with Rstack.

+
+ `; +} diff --git a/packages/create-rstack/template-app-vanilla-ts/AGENTS.md b/packages/create-rstack/template-app-vanilla-ts/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-ts/AGENTS.md @@ -0,0 +1,12 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-vanilla-ts/package.json b/packages/create-rstack/template-app-vanilla-ts/package.json new file mode 100644 index 00000000..65121cbf --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-ts/package.json @@ -0,0 +1,19 @@ +{ + "name": "rstack-app-vanilla-ts", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test" + }, + "devDependencies": { + "@types/node": "^24.13.3", + "rstack": "^0.3.5", + "typescript": "^7.0.2" + } +} diff --git a/packages/create-rstack/template-app-vanilla-ts/rstack.config.ts b/packages/create-rstack/template-app-vanilla-ts/rstack.config.ts new file mode 100644 index 00000000..3563b865 --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-ts/rstack.config.ts @@ -0,0 +1,16 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app({ + // Configure Rsbuild +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js, ts } = await import('rstack/lint'); + + return [js.configs.recommended, ts.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-vanilla-ts/src/index.css b/packages/create-rstack/template-app-vanilla-ts/src/index.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-ts/src/index.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.content { + display: flex; + min-height: 100vh; + line-height: 1.1; + text-align: center; + flex-direction: column; + justify-content: center; +} + +.content h1 { + font-size: 3.6rem; + font-weight: 700; +} + +.content p { + font-size: 1.2rem; + font-weight: 400; + opacity: 0.5; +} diff --git a/packages/create-rstack/template-app-vanilla-ts/src/index.ts b/packages/create-rstack/template-app-vanilla-ts/src/index.ts new file mode 100644 index 00000000..5d84d19d --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-ts/src/index.ts @@ -0,0 +1,12 @@ +import './index.css'; + +const rootElement = document.querySelector('#root'); + +if (rootElement) { + rootElement.innerHTML = ` +
+

Vanilla Rstack

+

Start building amazing things with Rstack.

+
+ `; +} diff --git a/packages/create-rstack/template-app-vanilla-ts/tsconfig.json b/packages/create-rstack/template-app-vanilla-ts/tsconfig.json new file mode 100644 index 00000000..3fae4ab2 --- /dev/null +++ b/packages/create-rstack/template-app-vanilla-ts/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2020"], + "target": "ES2020", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node"], + "useDefineForClassFields": true, + + /* modules */ + "moduleDetection": "force", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "resolveJsonModule": true, + "allowImportingTsExtensions": true, + + /* type checking */ + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "include": ["src"] +} diff --git a/packages/create-rstack/template-app-vue-js/AGENTS.md b/packages/create-rstack/template-app-vue-js/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-vue-js/AGENTS.md @@ -0,0 +1,12 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-vue-js/package.json b/packages/create-rstack/template-app-vue-js/package.json new file mode 100644 index 00000000..c3466a77 --- /dev/null +++ b/packages/create-rstack/template-app-vue-js/package.json @@ -0,0 +1,21 @@ +{ + "name": "rstack-app-vue-js", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test" + }, + "dependencies": { + "vue": "^3.5.40" + }, + "devDependencies": { + "@rsbuild/plugin-vue": "^2.0.1", + "rstack": "^0.3.5" + } +} diff --git a/packages/create-rstack/template-app-vue-js/rstack.config.js b/packages/create-rstack/template-app-vue-js/rstack.config.js new file mode 100644 index 00000000..376d57d9 --- /dev/null +++ b/packages/create-rstack/template-app-vue-js/rstack.config.js @@ -0,0 +1,21 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginVue } = await import('@rsbuild/plugin-vue'); + + return { + plugins: [pluginVue()], + }; +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-vue-js/src/App.vue b/packages/create-rstack/template-app-vue-js/src/App.vue new file mode 100644 index 00000000..bf4fbb63 --- /dev/null +++ b/packages/create-rstack/template-app-vue-js/src/App.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/create-rstack/template-app-vue-js/src/index.css b/packages/create-rstack/template-app-vue-js/src/index.css new file mode 100644 index 00000000..85e7e2b4 --- /dev/null +++ b/packages/create-rstack/template-app-vue-js/src/index.css @@ -0,0 +1,6 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} diff --git a/packages/create-rstack/template-app-vue-js/src/index.js b/packages/create-rstack/template-app-vue-js/src/index.js new file mode 100644 index 00000000..aa3ede0b --- /dev/null +++ b/packages/create-rstack/template-app-vue-js/src/index.js @@ -0,0 +1,5 @@ +import { createApp } from 'vue'; +import App from './App.vue'; +import './index.css'; + +createApp(App).mount('#root'); diff --git a/packages/create-rstack/template-app-vue-ts/AGENTS.md b/packages/create-rstack/template-app-vue-ts/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/AGENTS.md @@ -0,0 +1,12 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-vue-ts/package.json b/packages/create-rstack/template-app-vue-ts/package.json new file mode 100644 index 00000000..77e0ab0b --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/package.json @@ -0,0 +1,24 @@ +{ + "name": "rstack-app-vue-ts", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "vue-tsc && rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test" + }, + "dependencies": { + "vue": "^3.5.40" + }, + "devDependencies": { + "@rsbuild/plugin-vue": "^2.0.1", + "@types/node": "^24.13.3", + "rstack": "^0.3.5", + "typescript": "^6.0.3", + "vue-tsc": "^3.3.9" + } +} diff --git a/packages/create-rstack/template-app-vue-ts/rstack.config.ts b/packages/create-rstack/template-app-vue-ts/rstack.config.ts new file mode 100644 index 00000000..0399271d --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/rstack.config.ts @@ -0,0 +1,20 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginVue } = await import('@rsbuild/plugin-vue'); + + return { + plugins: [pluginVue()], + }; +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js, ts } = await import('rstack/lint'); + + return [js.configs.recommended, ts.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-vue-ts/src/App.vue b/packages/create-rstack/template-app-vue-ts/src/App.vue new file mode 100644 index 00000000..bf4fbb63 --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/src/App.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/create-rstack/template-app-vue-ts/src/index.css b/packages/create-rstack/template-app-vue-ts/src/index.css new file mode 100644 index 00000000..85e7e2b4 --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/src/index.css @@ -0,0 +1,6 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} diff --git a/packages/create-rstack/template-app-vue-ts/src/index.ts b/packages/create-rstack/template-app-vue-ts/src/index.ts new file mode 100644 index 00000000..aa3ede0b --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/src/index.ts @@ -0,0 +1,5 @@ +import { createApp } from 'vue'; +import App from './App.vue'; +import './index.css'; + +createApp(App).mount('#root'); diff --git a/packages/create-rstack/template-app-vue-ts/tsconfig.json b/packages/create-rstack/template-app-vue-ts/tsconfig.json new file mode 100644 index 00000000..fe3ca093 --- /dev/null +++ b/packages/create-rstack/template-app-vue-ts/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2020"], + "jsx": "preserve", + "target": "ES2020", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node"], + "jsxImportSource": "vue", + "useDefineForClassFields": true, + + /* modules */ + "moduleDetection": "force", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "resolveJsonModule": true, + "allowImportingTsExtensions": true, + + /* type checking */ + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] +} diff --git a/packages/create-rstack/template-common/AGENTS.md b/packages/create-rstack/template-common/AGENTS.md new file mode 100644 index 00000000..9f8558e0 --- /dev/null +++ b/packages/create-rstack/template-common/AGENTS.md @@ -0,0 +1,7 @@ +# AGENTS.md + +## Commands + +## Docs + +- Rstack: https://rstack.rs/llms.txt diff --git a/packages/create-rstack/template-common/README.md b/packages/create-rstack/template-common/README.md new file mode 100644 index 00000000..d62a167e --- /dev/null +++ b/packages/create-rstack/template-common/README.md @@ -0,0 +1,34 @@ +# Rstack project + +## Setup + +Install the dependencies: + +```bash +{{ packageManager }} install +``` + +## Get started + +Start the development server: + +```bash +{{ packageManager }} run dev +``` + +Build the app for production: + +```bash +{{ packageManager }} run build +``` + +Preview the production build locally: + +```bash +{{ packageManager }} run preview +``` + +## Learn more + +- [Rstack documentation](https://rstack.rs) +- [Rstack GitHub repository](https://github.com/rstackjs/rstack-cli) diff --git a/packages/create-rstack/template-common/gitignore b/packages/create-rstack/template-common/gitignore new file mode 100644 index 00000000..38d7344c --- /dev/null +++ b/packages/create-rstack/template-common/gitignore @@ -0,0 +1,13 @@ +# Local +.DS_Store +*.local +*.log* + +# Dist +node_modules +dist/ + +# IDE +.vscode/* +!.vscode/extensions.json +.idea diff --git a/packages/create-rstack/template-lib-node-js/AGENTS.md b/packages/create-rstack/template-lib-node-js/AGENTS.md new file mode 100644 index 00000000..234cc720 --- /dev/null +++ b/packages/create-rstack/template-lib-node-js/AGENTS.md @@ -0,0 +1,14 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run build` - Build the library for production +- `{{ packageManager }} run dev` - Rebuild the library when source files change +- `{{ packageManager }} run test` - Run tests +- `{{ packageManager }} run test:watch` - Run tests in watch mode + +## Docs + +- Rslib: https://rslib.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt +- Rstest: https://rstest.rs/llms.txt diff --git a/packages/create-rstack/template-lib-node-js/README.md b/packages/create-rstack/template-lib-node-js/README.md new file mode 100644 index 00000000..ab4b6927 --- /dev/null +++ b/packages/create-rstack/template-lib-node-js/README.md @@ -0,0 +1,40 @@ +# Rstack library + +## Setup + +Install the dependencies: + +```bash +{{ packageManager }} install +``` + +## Get started + +Build the library: + +```bash +{{ packageManager }} run build +``` + +Build the library in watch mode: + +```bash +{{ packageManager }} run dev +``` + +Run tests: + +```bash +{{ packageManager }} run test +``` + +Run tests in watch mode: + +```bash +{{ packageManager }} run test:watch +``` + +## Learn more + +- [Rstack documentation](https://rstack.rs) +- [Rslib documentation](https://rslib.rs) diff --git a/packages/create-rstack/template-lib-node-js/package.json b/packages/create-rstack/template-lib-node-js/package.json new file mode 100644 index 00000000..d586a11b --- /dev/null +++ b/packages/create-rstack/template-lib-node-js/package.json @@ -0,0 +1,32 @@ +{ + "name": "rstack-lib-node-js", + "version": "0.0.0", + "sideEffects": false, + "type": "module", + "exports": { + ".": { + "default": "./dist/index.js" + } + }, + "files": [ + "dist", + "README.md" + ], + "scripts": { + "build": "rs lib", + "dev": "rs lib --watch", + "format": "rs fmt", + "lint": "rs lint", + "test": "rs test", + "test:watch": "rs test --watch" + }, + "devDependencies": { + "rstack": "^0.3.5" + }, + "engines": { + "node": ">=22.12.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/create-rstack/template-lib-node-js/rstack.config.js b/packages/create-rstack/template-lib-node-js/rstack.config.js new file mode 100644 index 00000000..4d3e4b05 --- /dev/null +++ b/packages/create-rstack/template-lib-node-js/rstack.config.js @@ -0,0 +1,17 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.lib({ + syntax: ['node 22'], +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-lib-node-js/src/index.js b/packages/create-rstack/template-lib-node-js/src/index.js new file mode 100644 index 00000000..f8beddf5 --- /dev/null +++ b/packages/create-rstack/template-lib-node-js/src/index.js @@ -0,0 +1 @@ +export const squared = (n) => n * n; diff --git a/packages/create-rstack/template-lib-node-js/tests/index.test.js b/packages/create-rstack/template-lib-node-js/tests/index.test.js new file mode 100644 index 00000000..912be5bc --- /dev/null +++ b/packages/create-rstack/template-lib-node-js/tests/index.test.js @@ -0,0 +1,7 @@ +import { expect, test } from 'rstack/test'; +import { squared } from '../src/index.js'; + +test('squared', () => { + expect(squared(2)).toBe(4); + expect(squared(12)).toBe(144); +}); diff --git a/packages/create-rstack/template-lib-node-ts/AGENTS.md b/packages/create-rstack/template-lib-node-ts/AGENTS.md new file mode 100644 index 00000000..234cc720 --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/AGENTS.md @@ -0,0 +1,14 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run build` - Build the library for production +- `{{ packageManager }} run dev` - Rebuild the library when source files change +- `{{ packageManager }} run test` - Run tests +- `{{ packageManager }} run test:watch` - Run tests in watch mode + +## Docs + +- Rslib: https://rslib.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt +- Rstest: https://rstest.rs/llms.txt diff --git a/packages/create-rstack/template-lib-node-ts/README.md b/packages/create-rstack/template-lib-node-ts/README.md new file mode 100644 index 00000000..ab4b6927 --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/README.md @@ -0,0 +1,40 @@ +# Rstack library + +## Setup + +Install the dependencies: + +```bash +{{ packageManager }} install +``` + +## Get started + +Build the library: + +```bash +{{ packageManager }} run build +``` + +Build the library in watch mode: + +```bash +{{ packageManager }} run dev +``` + +Run tests: + +```bash +{{ packageManager }} run test +``` + +Run tests in watch mode: + +```bash +{{ packageManager }} run test:watch +``` + +## Learn more + +- [Rstack documentation](https://rstack.rs) +- [Rslib documentation](https://rslib.rs) diff --git a/packages/create-rstack/template-lib-node-ts/package.json b/packages/create-rstack/template-lib-node-ts/package.json new file mode 100644 index 00000000..4805daf9 --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/package.json @@ -0,0 +1,36 @@ +{ + "name": "rstack-lib-node-ts", + "version": "0.0.0", + "sideEffects": false, + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "types": "./dist/index.d.ts", + "files": [ + "dist", + "README.md" + ], + "scripts": { + "build": "rs lib", + "dev": "rs lib --watch", + "format": "rs fmt", + "lint": "rs lint", + "test": "rs test", + "test:watch": "rs test --watch" + }, + "devDependencies": { + "@types/node": "^24.13.3", + "rstack": "^0.3.5", + "typescript": "^7.0.2" + }, + "engines": { + "node": ">=22.12.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/create-rstack/template-lib-node-ts/rstack.config.ts b/packages/create-rstack/template-lib-node-ts/rstack.config.ts new file mode 100644 index 00000000..bee703a8 --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/rstack.config.ts @@ -0,0 +1,17 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.lib({ + syntax: ['node 22'], + dts: true, +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js, ts } = await import('rstack/lint'); + + return [js.configs.recommended, ts.configs.recommended]; +}); diff --git a/packages/create-rstack/template-lib-node-ts/src/index.ts b/packages/create-rstack/template-lib-node-ts/src/index.ts new file mode 100644 index 00000000..fdf0e116 --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/src/index.ts @@ -0,0 +1 @@ +export const squared = (n: number): number => n * n; diff --git a/packages/create-rstack/template-lib-node-ts/tests/index.test.ts b/packages/create-rstack/template-lib-node-ts/tests/index.test.ts new file mode 100644 index 00000000..e7790bba --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/tests/index.test.ts @@ -0,0 +1,7 @@ +import { expect, test } from 'rstack/test'; +import { squared } from '../src/index'; + +test('squared', () => { + expect(squared(2)).toBe(4); + expect(squared(12)).toBe(144); +}); diff --git a/packages/create-rstack/template-lib-node-ts/tsconfig.json b/packages/create-rstack/template-lib-node-ts/tsconfig.json new file mode 100644 index 00000000..1ca785bf --- /dev/null +++ b/packages/create-rstack/template-lib-node-ts/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "lib": ["ES2022"], + "target": "ES2022", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node"], + "useDefineForClassFields": true, + "rootDir": "src", + + /* modules */ + "moduleDetection": "force", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "resolveJsonModule": true, + "allowImportingTsExtensions": true, + + /* type checking */ + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "include": ["src"] +} diff --git a/packages/create-rstack/template-lib-react-js/AGENTS.md b/packages/create-rstack/template-lib-react-js/AGENTS.md new file mode 100644 index 00000000..234cc720 --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/AGENTS.md @@ -0,0 +1,14 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run build` - Build the library for production +- `{{ packageManager }} run dev` - Rebuild the library when source files change +- `{{ packageManager }} run test` - Run tests +- `{{ packageManager }} run test:watch` - Run tests in watch mode + +## Docs + +- Rslib: https://rslib.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt +- Rstest: https://rstest.rs/llms.txt diff --git a/packages/create-rstack/template-lib-react-js/README.md b/packages/create-rstack/template-lib-react-js/README.md new file mode 100644 index 00000000..ab4b6927 --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/README.md @@ -0,0 +1,40 @@ +# Rstack library + +## Setup + +Install the dependencies: + +```bash +{{ packageManager }} install +``` + +## Get started + +Build the library: + +```bash +{{ packageManager }} run build +``` + +Build the library in watch mode: + +```bash +{{ packageManager }} run dev +``` + +Run tests: + +```bash +{{ packageManager }} run test +``` + +Run tests in watch mode: + +```bash +{{ packageManager }} run test:watch +``` + +## Learn more + +- [Rstack documentation](https://rstack.rs) +- [Rslib documentation](https://rslib.rs) diff --git a/packages/create-rstack/template-lib-react-js/package.json b/packages/create-rstack/template-lib-react-js/package.json new file mode 100644 index 00000000..7580d09f --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/package.json @@ -0,0 +1,40 @@ +{ + "name": "rstack-lib-react-js", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "default": "./dist/index.js" + } + }, + "files": [ + "dist", + "README.md" + ], + "scripts": { + "build": "rs lib", + "dev": "rs lib --watch", + "format": "rs fmt", + "lint": "rs lint", + "test": "rs test", + "test:watch": "rs test --watch" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^2.1.0", + "@testing-library/dom": "^10.4.1", + "@testing-library/jest-dom": "^7.0.0", + "@testing-library/react": "^16.3.2", + "@types/react-dom": "^19.2.4", + "happy-dom": "^20.11.1", + "react": "^19.2.8", + "react-dom": "^19.2.8", + "rstack": "^0.3.5" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/create-rstack/template-lib-react-js/rstack.config.js b/packages/create-rstack/template-lib-react-js/rstack.config.js new file mode 100644 index 00000000..30b3b512 --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/rstack.config.js @@ -0,0 +1,34 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.lib(async () => { + const { pluginReact } = await import('@rsbuild/plugin-react'); + + return { + bundle: false, + source: { + entry: { + index: ['./src/**'], + }, + }, + output: { + target: 'web', + }, + plugins: [pluginReact()], + }; +}); + +define.test({ + setupFiles: ['./tests/rstest.setup.js'], +}); + +define.lint(async () => { + const { js, reactHooksPlugin, reactPlugin } = await import('rstack/lint'); + + return [ + js.configs.recommended, + reactPlugin.configs.recommended, + reactHooksPlugin.configs.recommended, + ]; +}); diff --git a/packages/create-rstack/template-lib-react-js/src/Button.jsx b/packages/create-rstack/template-lib-react-js/src/Button.jsx new file mode 100644 index 00000000..91960089 --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/src/Button.jsx @@ -0,0 +1,15 @@ +import './button.css'; + +export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rstack/template-lib-react-js/src/button.css b/packages/create-rstack/template-lib-react-js/src/button.css new file mode 100644 index 00000000..257ef46f --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rstack/template-lib-react-js/src/index.jsx b/packages/create-rstack/template-lib-react-js/src/index.jsx new file mode 100644 index 00000000..fe9c53c5 --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rstack/template-lib-react-js/tests/index.test.jsx b/packages/create-rstack/template-lib-react-js/tests/index.test.jsx new file mode 100644 index 00000000..652fcc82 --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/tests/index.test.jsx @@ -0,0 +1,11 @@ +import { expect, test } from 'rstack/test'; +import { render, screen } from '@testing-library/react'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render( + ); +}; diff --git a/packages/create-rstack/template-lib-react-ts/src/button.css b/packages/create-rstack/template-lib-react-ts/src/button.css new file mode 100644 index 00000000..257ef46f --- /dev/null +++ b/packages/create-rstack/template-lib-react-ts/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rstack/template-lib-react-ts/src/index.tsx b/packages/create-rstack/template-lib-react-ts/src/index.tsx new file mode 100644 index 00000000..fe9c53c5 --- /dev/null +++ b/packages/create-rstack/template-lib-react-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rstack/template-lib-react-ts/tests/index.test.tsx b/packages/create-rstack/template-lib-react-ts/tests/index.test.tsx new file mode 100644 index 00000000..652fcc82 --- /dev/null +++ b/packages/create-rstack/template-lib-react-ts/tests/index.test.tsx @@ -0,0 +1,11 @@ +import { expect, test } from 'rstack/test'; +import { render, screen } from '@testing-library/react'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render(