Skip to content

Commit f40aaef

Browse files
vanvianenvanvianen
committed
Migrate to Vite and React, update configs and docs
Replaces Next.js setup with Vite and React, removing Next.js-specific files and dependencies. Adds Vite config, entry points, and updates project structure. Introduces Prettier and Stylelint configs, updates devcontainer, and enhances documentation with new usage and structure details. Adds contributing guidelines and updates contact info in the code of conduct.
1 parent 2e404b9 commit f40aaef

26 files changed

Lines changed: 414 additions & 3010 deletions

‎.devcontainer/devcontainer.json‎

Lines changed: 16 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,31 @@
11
{
2-
"name": "Stylescape DevContainer",
3-
"build": {
4-
"dockerfile": "Dockerfile",
5-
"context": "."
6-
},
7-
"image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-18",
8-
"features": {
9-
"ghcr.io/devcontainers/features/node:1": {
10-
"version": "18"
11-
}
12-
},
2+
"name": "Stylescape React Example",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:22",
4+
"features": {},
135
"customizations": {
146
"vscode": {
157
"extensions": [
168
"dbaeumer.vscode-eslint",
179
"esbenp.prettier-vscode",
18-
"ms-python.python",
19-
"ms-vscode.vscode-typescript-next",
2010
"stylelint.vscode-stylelint",
21-
"streetsidesoftware.code-spell-checker",
22-
"redhat.vscode-yaml",
23-
"PKief.material-icon-theme",
2411
"syler.sass-indented",
25-
"vscode-icons-team.vscode-icons",
26-
"jinja.html-formatter",
27-
"ritwickdey.LiveServer",
28-
"gruntfuggly.todo-tree",
29-
"svelte.svelte-vscode",
30-
"octref.vetur" // Vue.js support
12+
"dsznajder.es7-react-js-snippets",
13+
"formulahendry.auto-rename-tag",
14+
"PKief.material-icon-theme"
3115
],
3216
"settings": {
3317
"editor.formatOnSave": true,
34-
"terminal.integrated.shell.linux": "/bin/bash",
35-
"files.associations": {
36-
"*.jinja": "jinja"
18+
"editor.defaultFormatter": "esbenp.prettier-vscode",
19+
"editor.codeActionsOnSave": {
20+
"source.fixAll.eslint": "explicit"
21+
},
22+
"emmet.includeLanguages": {
23+
"javascript": "javascriptreact"
3724
}
3825
}
3926
}
4027
},
41-
"forwardPorts": [
42-
3000
43-
],
44-
"postCreateCommand": "npm install && pip3 install -r requirements.txt",
45-
"remoteUser": "vscode",
46-
"workspaceFolder": "/workspace",
47-
"mounts": [
48-
"source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"
49-
],
50-
"remoteEnv": {
51-
"NODE_ENV": "development"
52-
},
53-
"containerEnv": {
54-
"NODE_ENV": "development"
55-
}
56-
}
28+
"forwardPorts": [3000, 5173],
29+
"postCreateCommand": "npm install",
30+
"remoteUser": "vscode"
31+
}

‎.github/CODE_OF_CONDUCT.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ This Code of Conduct applies both within project spaces and in public spaces whe
3434

3535
## Enforcement
3636

37-
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mdo@getbootstrap.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
37+
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at info@scape.agency. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
3838

3939
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
4040

4141
## Attribution
4242

43-
This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct/>
43+
This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct/>

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
22

‎.prettierrc.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"semi": true,
3+
"singleQuote": false,
4+
"tabWidth": 4,
5+
"useTabs": false,
6+
"trailingComma": "es5",
7+
"printWidth": 100,
8+
"bracketSpacing": true,
9+
"arrowParens": "always",
10+
"endOfLine": "lf",
11+
"htmlWhitespaceSensitivity": "css",
12+
"proseWrap": "preserve"
13+
}

‎.stylelintrc.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"extends": ["stylelint-config-standard-scss"],
3+
"rules": {
4+
"scss/at-rule-no-unknown": [
5+
true,
6+
{
7+
"ignoreAtRules": ["use", "forward", "import", "mixin", "include", "function", "return", "if", "else", "each", "for", "while", "extend"]
8+
}
9+
],
10+
"selector-class-pattern": null,
11+
"no-descending-specificity": null,
12+
"property-no-vendor-prefix": null,
13+
"value-no-vendor-prefix": null
14+
}
15+
}

‎CONTRIBUTING.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Contributing to Stylescape Examples
2+
3+
Thank you for your interest in contributing to Stylescape!
4+
5+
## Getting Started
6+
7+
1. Fork this repository
8+
2. Clone your fork locally
9+
3. Install dependencies: `npm install`
10+
4. Start development: `npm run dev`
11+
12+
## Guidelines
13+
14+
- Follow the existing code style
15+
- Test your changes locally before submitting
16+
- Keep commits focused and descriptive
17+
- Update documentation if needed
18+
19+
## Reporting Issues
20+
21+
- Check existing issues first
22+
- Provide clear reproduction steps
23+
- Include environment details (Node version, OS, browser)
24+
25+
## Pull Requests
26+
27+
1. Create a feature branch from `main` or `dev`
28+
2. Make your changes
29+
3. Test thoroughly
30+
4. Submit a PR with a clear description
31+
32+
## Code of Conduct
33+
34+
Please be respectful and inclusive. See our [Code of Conduct](.github/CODE_OF_CONDUCT.md).
35+
36+
## Questions?
37+
38+
- Open an issue for questions
39+
- Visit [Stylescape Documentation](https://github.com/stylescape/stylescape)
40+
41+
## License
42+
43+
By contributing, you agree that your contributions will be licensed under the MIT License.

‎README.md‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,105 @@
1212
<h1 align="center" style='border-bottom: none;'>Stylescape + React</h1>
1313
<h3 align="center">Example Project</h3>
1414

15+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/stylescape/example-react)
16+
17+
---
18+
19+
Integrate [Stylescape](https://scape.style) with [React](https://react.dev/) and [Vite](https://vitejs.dev/) for fast development and optimized production builds.
20+
1521
---
1622

17-
Include [Stylescape](https://scape.style)'s source Sass with [React](https://react.dev/) and [Next.js](https://nextjs.org/).
23+
## Features
24+
25+
- ⚛️ React 19 with modern hooks and patterns
26+
- ⚡ Vite for lightning-fast HMR and builds
27+
- 🎨 Stylescape's complete styling system
28+
- 🌗 Built-in theme toggle with `data-ss="theme-toggle"`
29+
- 📐 Frame layout with sidebars and ribbons
30+
- 🎹 Interactive accordion with `data-ss="accordion"`
1831

1932
---
2033

2134
## Quickstart
2235

2336
```sh
2437
git clone https://github.com/stylescape/example-react.git
38+
cd example-react
2539
npm install
2640
npm start
2741
```
2842

2943
---
3044

45+
## Project Structure
46+
47+
```
48+
src/
49+
├── App.jsx # Main application component
50+
├── main.jsx # Entry point with Stylescape imports
51+
└── styles/
52+
└── main.scss # Stylescape SCSS import
53+
```
54+
55+
---
56+
57+
## Usage
58+
59+
### 1. Install Dependencies
60+
61+
```sh
62+
npm install stylescape react react-dom
63+
npm install -D vite @vitejs/plugin-react sass
64+
```
65+
66+
### 2. Import Stylescape in SCSS
67+
68+
```scss
69+
// src/styles/main.scss
70+
@use "stylescape";
71+
```
72+
73+
### 3. Import in Entry File
74+
75+
```jsx
76+
// src/main.jsx
77+
import './styles/main.scss';
78+
import 'stylescape';
79+
```
80+
81+
### 4. Use Stylescape Classes
82+
83+
```jsx
84+
<div className="frame_main">
85+
<header className="ribbon--top">
86+
<input type="checkbox" data-ss="theme-toggle" />
87+
</header>
88+
<aside className="sidebar--left" data-ss="aside">
89+
{/* Sidebar content */}
90+
</aside>
91+
<main className="main_content">
92+
<div data-ss="accordion">
93+
<details>
94+
<summary>Accordion Item</summary>
95+
<p>Content here</p>
96+
</details>
97+
</div>
98+
</main>
99+
</div>
100+
```
101+
102+
---
103+
104+
## Scripts
105+
106+
| Command | Description |
107+
|---------|-------------|
108+
| `npm start` | Start development server |
109+
| `npm run build` | Build for production |
110+
| `npm run preview` | Preview production build |
111+
112+
---
113+
31114
## Colophon
32115

33116
Made with ❤️ by **[Scape Agency](https://www.scape.agency)**

‎next.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)