Skip to content

Commit ab158a8

Browse files
matteofranamatteofrana
committed
First commit
0 parents  commit ab158a8

9 files changed

+236
-0
lines changed

‎.gitattributes

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Set default behavior to automatically normalize line endings.
2+
* text=auto
3+

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
*.vsix

‎.vscode/launch.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// A launch configuration that launches the extension inside a new window
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
{
6+
"version": "0.2.0",
7+
"configurations": [
8+
{
9+
"name": "Extension",
10+
"type": "extensionHost",
11+
"request": "launch",
12+
"args": [
13+
"--extensionDevelopmentPath=${workspaceFolder}"
14+
]
15+
}
16+
]
17+
}

‎.vscodeignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.vscode/**
2+
.vscode-test/**
3+
.gitignore
4+
vsc-extension-quickstart.md

‎CHANGELOG.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Change Log
2+
3+
All notable changes to the "react-bricks-snippets" extension will be documented in this file.
4+
5+
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
6+
7+
## [Unreleased]
8+
9+
- Initial release

‎README.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# VS Code React Bricks snippets (TypeScript)
2+
3+
This extensions add snippets to make developing with React Bricks easier. At the moment only TypeScript React (.tsx) is supported.
4+
5+
## What is React Bricks
6+
7+
React Bricks is a CMS with visual editing based on React components, for Next.js and Gatsby. It is both a React library to create your visually editable content blocks and a SaaS where the content is persisted.
8+
9+
See [https://reactbricks.com](https://reactbricks.com)
10+
11+
## Available snippets
12+
13+
| Prefix | Method |
14+
| ---------------: | --------------------------------------------------- |
15+
| `brick→` | Scaffolds a new Brick. Use it in a new file. |
16+
| `sideEditProp→` | Creates a new `sideEditProp` |
17+
| `selectOptions→` | Creates `selectOptions` for a select `sideEditProp` |
18+
| `Text→` | Add a React Bricks `<Text>` component |
19+
| `RichText→` | Add a React Bricks `<RichText>` component |
20+
| `Image→` | Add a React Bricks `<Image>` component |
21+
| `File→` | Add a React Bricks `<File>` component |
22+
| `Repeater→` | Add a React Bricks `<Repeater>` component |
23+
24+
## Requirements
25+
26+
In order to have working React Bricks' bricks, you need to have a React Bricks project set up.
27+
28+
You can easily create a project using the React Bricks CLI:
29+
`npx create-reactbricks-app`
30+
31+
## Release Notes
32+
33+
### 0.0.1
34+
35+
Initial release

‎package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "react-bricks-snippets",
3+
"version": "0.0.1",
4+
"publisher": "React Bricks",
5+
"displayName": "React Bricks Snippets",
6+
"description": "React Bricks code snippets (TypeScript)",
7+
"engines": {
8+
"vscode": "^1.63.0"
9+
},
10+
"categories": [
11+
"Snippets"
12+
],
13+
"contributes": {
14+
"snippets": [
15+
{
16+
"language": "typescriptreact",
17+
"path": "./snippets/typescript.code-snippets"
18+
}
19+
]
20+
}
21+
}

‎snippets/typescript.code-snippets

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
{
2+
"React Bricks TypeScript Brick": {
3+
"prefix": "brick",
4+
"body": [
5+
"import React from 'react'",
6+
"import { Text, RichText, Image, File, Repeater, types } from 'react-bricks/frontend'",
7+
"",
8+
"interface Props {",
9+
"\t",
10+
"}",
11+
"",
12+
"const ${1:${TM_FILENAME_BASE}}: types.Brick<Props> = (props) => {",
13+
"\treturn (",
14+
"\t\t<div>",
15+
"\t\t\t<Text",
16+
"\t\t\t\tpropName=\"title\"",
17+
"\t\t\t\tplaceholder=\"Title...\"",
18+
"\t\t\t\trenderBlock={({ children }) => (<span>{children}</span>)}",
19+
"\t\t\t/>$0",
20+
"\t\t</div>",
21+
"\t)",
22+
"}",
23+
"",
24+
"${1:${TM_FILENAME_BASE}}.schema = {",
25+
"\tname: '${1:${TM_FILENAME_BASE}}',",
26+
"\tlabel: '${1:${TM_FILENAME_BASE}}',",
27+
"\t$LINE_COMMENT category: '',",
28+
"\t$LINE_COMMENT tags: [],",
29+
"",
30+
"\t$LINE_COMMENT Defaults when a new brick is added",
31+
"\tgetDefaultProps: () => ({",
32+
"\t\ttitle: 'Thick as a brick',",
33+
"\t}),",
34+
"",
35+
"\t$LINE_COMMENT Sidebar Edit controls for props",
36+
"\tsideEditProps: [],",
37+
"}",
38+
"",
39+
"export default ${1:${TM_FILENAME_BASE}}",
40+
""
41+
],
42+
"description": "Creates a React Bricks TypeScript brick"
43+
},
44+
"React Bricks sideEditProp": {
45+
"prefix": "sideEditProp",
46+
"body": [
47+
"{",
48+
"\tname: '${1:name}',",
49+
"\tlabel: '${2:Label}',",
50+
"\ttype: types.SideEditPropType.${3|Text,Textarea,Number,Date,Boolean,Select,Range,Image,Custom|},",
51+
"}"
52+
],
53+
"description": "Creates a React Bricks' Brick `sideEditProp`"
54+
},
55+
"React Bricks selectOptions": {
56+
"prefix": "selectOptions",
57+
"body": [
58+
"selectOptions: {",
59+
"\tdisplay: types.OptionsDisplay.${1|Select,Radio,Color|},",
60+
"\toptions: [",
61+
"\t\t{ value: '${2:value}', label: '${3:Label}' },",
62+
"\t]",
63+
"}"
64+
],
65+
"description": "Creates `selectOptions` for a select `sideEditProp`"
66+
},
67+
"React Bricks Text": {
68+
"prefix": "Text",
69+
"body": [
70+
"<Text",
71+
"\tpropName=\"${1:text}\"",
72+
"\tplaceholder=\"Type a ${1:text}...\"",
73+
"\trenderBlock={({ children \\}) => ${2:(<span>{children\\}</span>)}}",
74+
"/>"
75+
],
76+
"description": "Add a React Bricks <Text> component"
77+
},
78+
"React Bricks RichText": {
79+
"prefix": "RichText",
80+
"body": [
81+
"<RichText",
82+
"\tpropName=\"${1:text}\"",
83+
"\tplaceholder=\"Type a ${1:text}...\"",
84+
"\trenderBlock={({ children \\}) => (${2:<span>{children\\}</span>})}",
85+
"\tallowedFeatures={[types.RichTextFeatures.${3:Bold}]}",
86+
"/>"
87+
],
88+
"description": "Add a React Bricks <RichText> component"
89+
},
90+
"React Bricks Image": {
91+
"prefix": "Image",
92+
"body": [
93+
"<Image",
94+
"\tpropName=\"${1:image}\"",
95+
"\talt=\"${2:altText}\"",
96+
"\tmaxWidth={${3:300}}",
97+
"\taspectRatio={${4:1}}",
98+
"/>"
99+
],
100+
"description": "Add a React Bricks <Image> component"
101+
},
102+
"React Bricks File": {
103+
"prefix": "File",
104+
"body": [
105+
"<File",
106+
"\tpropName=\"${1:file}\"",
107+
"\tallowedExtensions={[${2:'.pdf'}]}",
108+
"\trenderBlock={({ name, url, size }) => (",
109+
"\t\t<a href={url}>",
110+
"\t\t\t{name}, {size / 1000}KB",
111+
"\t\t</a>",
112+
"\t)}",
113+
"/>"
114+
],
115+
"description": "Add React Bricks <File> component"
116+
},
117+
"React Bricks Repeater": {
118+
"prefix": "Repeater",
119+
"body": ["<Repeater propName=\"${1:propName}\" />"],
120+
"description": "Add React Bricks <Repeater> component"
121+
}
122+
}

‎vsc-extension-quickstart.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Welcome to your VS Code Extension
2+
3+
## What's in the folder
4+
5+
* This folder contains all of the files necessary for your extension.
6+
* `package.json` - this is the manifest file that defines the location of the snippet file and specifies the language of the snippets.
7+
* `snippets/snippets.json` - the file containing all snippets.
8+
9+
## Get up and running straight away
10+
11+
* Press `F5` to open a new window with your extension loaded.
12+
* Create a new file with a file name suffix matching your language.
13+
* Verify that your snippets are proposed on intellisense.
14+
15+
## Make changes
16+
17+
* You can relaunch the extension from the debug toolbar after making changes to the files listed above.
18+
* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
19+
20+
## Install your extension
21+
22+
* To start using your extension with Visual Studio Code copy it into the `<user home>/.vscode/extensions` folder and restart Code.
23+
* To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.

0 commit comments

Comments
 (0)