Skip to content

Commit 4996a97

Browse files
author
Steve Lindsay
committed
v1.0 toolkit commit
1 parent 64a4a23 commit 4996a97

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+29946
-24
lines changed

‎.env.empty

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
APIM_OPENURL=
2+
APIM_RESOURCEID=
3+
AOI_ENDPOINT=
4+
AOI_APIKEY=
5+
AOI_DEPLOYMENT=
6+
AOI_ENABLED=false
7+
OI_ENABLED=false
8+
OI_APIKEY=
9+
OI_ORG=
10+
OP_BASEURL=
11+
DEBUG_DIR=

‎.gitignore

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Root package.json, this will be created by install.mjs on first install
2+
# After adding a new dependency and adding a package.json for the dependency
3+
# to the src/component/componentname folder, you should run it again to recreate
4+
# package.json with merged dependencies.
5+
/package.json
6+
7+
# Temporary combined package-combined.json file, in case it gets left behind
8+
/package-combined.json
9+
10+
# Logs
11+
logs
12+
*.log
13+
npm-debug.log*
14+
yarn-debug.log*
15+
yarn-error.log*
16+
lerna-debug.log*
17+
18+
# Diagnostic reports (https://nodejs.org/api/report.html)
19+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
20+
21+
# Runtime data
22+
pids
23+
*.pid
24+
*.seed
25+
*.pid.lock
26+
27+
# Directory for instrumented libs generated by jscoverage/JSCover
28+
lib-cov
29+
30+
# Coverage directory used by tools like istanbul
31+
coverage
32+
*.lcov
33+
34+
# nyc test coverage
35+
.nyc_output
36+
37+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
38+
.grunt
39+
40+
# Bower dependency directory (https://bower.io/)
41+
bower_components
42+
43+
# node-waf configuration
44+
.lock-wscript
45+
46+
# Compiled binary addons (https://nodejs.org/api/addons.html)
47+
build/Release
48+
49+
# Dependency directories
50+
node_modules/
51+
jspm_packages/
52+
53+
# Build artifacts
54+
build_artifacts/
55+
56+
# Mac .DS_Store
57+
.DS_Store
58+
59+
# TypeScript v1 declaration files
60+
typings/
61+
62+
# TypeScript cache
63+
*.tsbuildinfo
64+
65+
# Optional npm cache directory
66+
.npm
67+
68+
# Optional eslint cache
69+
.eslintcache
70+
71+
# Microbundle cache
72+
.rpt2_cache/
73+
.rts2_cache_cjs/
74+
.rts2_cache_es/
75+
.rts2_cache_umd/
76+
77+
# Optional REPL history
78+
.node_repl_history
79+
80+
# Output of 'npm pack'
81+
*.tgz
82+
83+
# Yarn Integrity file
84+
.yarn-integrity
85+
86+
# dotenv environment variables file
87+
.env
88+
.env.test
89+
90+
# parcel-bundler cache (https://parceljs.org/)
91+
.cache
92+
93+
# Next.js build output
94+
.next
95+
96+
# Nuxt.js build / generate output
97+
.nuxt
98+
dist
99+
100+
# Gatsby files
101+
.cache/
102+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
103+
# https://nextjs.org/blog/next-9-1#public-directory-support
104+
# public
105+
106+
# vuepress build output
107+
.vuepress/dist
108+
109+
# Serverless directories
110+
.serverless/
111+
112+
# FuseBox cache
113+
.fusebox/
114+
115+
# DynamoDB Local files
116+
.dynamodb/
117+
118+
# TernJS port file
119+
.tern-port
120+
121+
# VS Code settings
122+
.vscode

‎.ladle/config.mjs

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export default {
2+
viteConfig: "./ladle-vite.config.ts",
3+
outDir: "build_artifacts/ladle-prod",
4+
port: 61000,
5+
previewPort: 61000,
6+
addons: {
7+
width: {
8+
options: {
9+
iPhone3: 414, // iPhone - 11 Pro Max, 11, XR, XS Max, 8 Plus, 7 Plus, 6 Plus, 6S Plus
10+
iPhone4: 375, // iPhone - 11 Pro, XS, X, 8, 7, 6
11+
iPhone5: 320, // iPhone - 5
12+
iPod: 320, // iPod
13+
iPad1: 1024, // iPad Pro
14+
iPad2: 768, // iPad 3 & 4 Gen, iPad Air 1 & 2, iPad Mini 2 & 3, iPad Mini
15+
AndroidPhones1: 480, // Samsung Galaxy Note 5 - LG G5 - One Plus 3,
16+
AndroidPhones2: 412, // Nexus 6P & 5X - Google Pixel 4, 4XL, 3a XL, 3a, 3XL, 3, 2XL, XL - Samsung Galaxy S10+ - Samsung Note 10+, Note 10
17+
AndroidPhones3: 360, // Samsung Galaxy S10, S9+, S9, S8+, S8, S7 Edge, S7 - Samsung Note 9
18+
AndroidTablets1: 1280, // Chromebook Pixel
19+
AndroidTablets2: 900, // Pixel C
20+
AndroidTablets3: 800, // Samsung Galaxy Tab 10
21+
AndroidTablets4: 768, // Nexus 9
22+
AndroidTablets5: 600, // Nexus 7 (2013)
23+
MicrosoftTablets: 720, // MS Surface Pro/Pro 2
24+
MicrosoftTablets3: 912, // MS Surface Pro 7
25+
MicrosoftTablets2: 1024, // MS Surface Pro 3
26+
LaptopDesktopDCI4k: 4096,
27+
LaptopDesktopUHD4k: 3840,
28+
SurfaceBook: 3000,
29+
MacBookPro15ince: 2880,
30+
MacBookPro13inch: 2560,
31+
MacBook12inch: 2304,
32+
LaptopDesktopFullHD: 1920,
33+
LaptopDesktopHighDPI: 1440,
34+
LaptopMediumDPI: 1366,
35+
LaptopDesktopLowDPI: 1280
36+
},
37+
enabled: true, // the addon can be disabled
38+
defaultValue: 0, // 0 = no viewport is set
39+
},
40+
},
41+
};

‎README.md

+83-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,87 @@
1-
# Project
1+
# React Component Toolkit
22

3-
> This repo has been populated by an initial template to help get you started. Please
4-
> make sure to update the content to build a great experience for community-building.
53

6-
As the maintainer of this project, please make a few updates:
4+
### What is the React Component Toolkit?
5+
The react component toolkit is a toolkit for building and testing react components and includes a set of unique features including AI component generation and automatic conversion to Azure APIM Widgets.
76

8-
- Improving this README.MD file to provide a great experience
9-
- Updating SUPPORT.MD with content about this project's support experience
10-
- Understanding the security reporting process in SECURITY.MD
11-
- Remove this section from the README
7+
---
8+
9+
#### Table of Contents
10+
11+
1. [Features](#features)
12+
2. [Install with Azure CLI Dev Tools](#install-via-azdev)
13+
3. [Install manually (no backend)](#manual-install)
14+
4. [Quick Start](#quick-start)
15+
5. [Notes](#notes)
16+
6. [Contributing](#contributing)
17+
7. [Trademarks](#trademarks)
18+
19+
---
20+
21+
## Features
22+
- Integrates with Azure Open AI allowing the creation of components from a description alone.
23+
- Can convert a react component into an Azure API Management Widget.
24+
- Can be tested standalone using ladle which is built into the toolkit stack.
25+
- Unit and code coverage testing through Jest (including snapshot testing).
26+
- Uses css as code through Styled Components out of the box.
27+
- Includes a few example components including a markdown viewer, force-graph-3d component, etc.
28+
- Can create a new basic component with tests to scaffold a new component (or you can use AI and create a basis for a new one)
29+
- Automatically adds dependencies for created components.
30+
- Includes rollup for packaging components.
31+
32+
## Install via azdev
33+
34+
#### ⚠️ Note
35+
```
36+
Automatic Install uses azdev and includes installing Azure OpenAI and Azure APIM on your subscription.
37+
```
38+
39+
Please use the Official Azure Samples github instructions to install and configure the toolkit via azdev.
40+
41+
[Azure Samples - react-component-toolkit](https://github.com/Azure-Samples/react-component-toolkit-openai-demo)
42+
43+
## Manual Install
44+
45+
#### ⚠️ Note
46+
```
47+
Manual installation requires .env file to be configured to enable Azure Open AI/Open AI and APIM Widget functionality.
48+
An example .env.empty file is included, fill out the correct values and copy/rename to .env.
49+
```
50+
51+
Pre-requisites: Latest stable release of Node.js
52+
53+
Installation:
54+
55+
1. Clone this repo and run ```node install.mjs``` in the root.
56+
57+
## Quick Start
58+
59+
* ```npm run ladle:dev``` to get started and see current component running with debugging available.
60+
* ```npm run ladle:prod``` to get started and see current components running with a full production build.
61+
* ```npm run cleanup``` - clear dist, build_artifacts and unittest coverage results.
62+
* ```npm run rollup``` - runs ```rollup -c```
63+
* ```npm run build``` - run ```npm cleanup``` followed by ```npm rollup```.
64+
* ```npm run test``` - run unit tests from all components (src/unittests).
65+
* ```npm run createnew [component_description]``` - create an AI generated component using Azure Open AI (configure via .env)
66+
* ```npm run createtemplate [component_name]``` - to create a new ready to run component template with stories and unit tests.
67+
* ```npm run removecomponent [component_name]``` - to delete a component and associated stories and unit tests.
68+
* ```npm run packagewidget [existing_component_name]``` - to package a component as a widget for Azure API Management Developer Portal.
69+
* ```npm run test (or npm test)``` - run all component unit tests
70+
* ```npm run test:update``` - update all snapshots for unit tests
71+
* ```npm run test:watch``` - run jest in watch mode
72+
73+
## Notes
74+
75+
- This project uses npm, however the initial package.json is dynamically created by running node install.mjs (see below)
76+
- package.json is dynamically created is to ensure that each component defines it's own dependencies, these dependencies are merged for testing in ladle, unit tests and using rollup to package the entire project
77+
- If you create the component manually:
78+
- A package.json should be placed in the components directory which contains only name, version and its dependencies, devDependencies and peerDependencies (see any component under src/components for an example)
79+
- You must run npm updatepackages to cause an update to the root package.json.
80+
- If you use ```npm createnew [component_name]``` to create a new component, ```npm updatepackages``` will happen for you the first time.
81+
- In both cases, any time you add or remove npm dependencies you should add them to the component package.json under the component you are working on, or common/package.json if those dependencies are toolkit wid
82+
e, after doing that you should run ```npm updatepackages```
83+
84+
---
1285

1386
## Contributing
1487

@@ -26,8 +99,8 @@ contact [[email protected]](mailto:[email protected]) with any additio
2699

27100
## Trademarks
28101

29-
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
30-
trademarks or logos is subject to and must follow
102+
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
103+
trademarks or logos is subject to and must follow
31104
[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
32105
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
33106
Any use of third-party trademarks or logos are subject to those third-party's policies.

‎SUPPORT.md

+18-14
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
1-
# TODO: The maintainer of this repo has not yet edited this file
1+
# Contributing to React Component Toolkit
22

3-
**REPO OWNER**: Do you want Customer Service & Support (CSS) support for this product/project?
3+
Welcome, and thank you for your interest in contributing to the React Component Toolkit
44

5-
- **No CSS support:** Fill out this template with information about how to file issues and get help.
6-
- **Yes CSS support:** Fill out an intake form at [aka.ms/onboardsupport](https://aka.ms/onboardsupport). CSS will work with/help you to determine next steps.
7-
- **Not sure?** Fill out an intake as though the answer were "Yes". CSS will help you decide.
5+
There are many ways in which you can contribute, beyond writing code. The goal of this document is to provide a high-level overview of how you can get involved.
86

9-
*Then remove this first heading from this SUPPORT.MD file before publishing your repo.*
7+
## Asking Questions
108

11-
# Support
9+
Have a question? Rather than opening an issue, please ask away on [Stack Overflow](https://stackoverflow.com/questions/tagged/react-component-toolkit) using the tag `react-component-toolkit`.
10+
11+
The active community will be eager to assist you. Your well-worded question will serve as a resource to others searching for help.
12+
13+
### Reporting an issue
14+
15+
Before you create a new issue, please do a search in [open issues](https://github.com/microsoft/react-component-toolkit/issues) to see if the issue or feature request has already been filed.
16+
17+
If you find your issue already exists, make relevant comments and add your [reaction](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments). Use a reaction in place of a "+1" comment:
18+
19+
* 👍 - upvote
20+
* 👎 - downvote
21+
22+
If you cannot find an existing issue that describes your bug or feature, create a new issue using the guidelines below.
1223

1324
## How to file issues and get help
1425

1526
This project uses GitHub Issues to track bugs and feature requests. Please search the existing
1627
issues before filing new issues to avoid duplicates. For new issues, file your bug or
1728
feature request as a new Issue.
1829

19-
For help and questions about using this project, please **REPO MAINTAINER: INSERT INSTRUCTIONS HERE
20-
FOR HOW TO ENGAGE REPO OWNERS OR COMMUNITY FOR HELP. COULD BE A STACK OVERFLOW TAG OR OTHER
21-
CHANNEL. WHERE WILL YOU HELP PEOPLE?**.
22-
23-
## Microsoft Support Policy
24-
25-
Support for this **PROJECT or PRODUCT** is limited to the resources listed above.

0 commit comments

Comments
 (0)