Save after loading freesewing and pattern
This commit is contained in:
Joost De Cock
parent
a91ecd1b3a
commit
d73cd3512c
61 changed files with 6493 additions and 334 deletions
|
|
@ -14,7 +14,7 @@ module.exports = async () => {
|
|||
const defaults = await getDefaultLibraryParams()
|
||||
|
||||
program
|
||||
.name('create-react-library')
|
||||
.name('create-freesewing-pattern')
|
||||
.version(version)
|
||||
.usage('[options] [package-name]')
|
||||
.option('-d, --desc <string>', 'package description')
|
||||
|
|
@ -23,7 +23,7 @@ module.exports = async () => {
|
|||
.option('-r, --repo <string>', 'package repo path')
|
||||
.option('-g, --no-git', 'generate without git init')
|
||||
.option('-m, --manager <npm|yarn>', 'package manager to use', /^(npm|yarn)$/, defaults.manager)
|
||||
.option('-t, --template <default|typescript>', 'package template to use', /^(default|typescript|custom)$/, defaults.template)
|
||||
.option('-t, --template <light|dark>', 'package template to use', /^(light|dark|custom)$/, defaults.template)
|
||||
.option('-p, --template-path <string>', 'custom package template path')
|
||||
.option('-s, --skip-prompts', 'skip all prompts (must provide package-name via cli)')
|
||||
.parse(process.argv)
|
||||
|
|
@ -59,12 +59,14 @@ module.exports = async () => {
|
|||
|
||||
console.log(`
|
||||
|
||||
Your module has been created at ${dest}.
|
||||
Your pattern skeleton has been created at ${dest}.
|
||||
|
||||
To get started, in one tab, run:
|
||||
Before you start hacking, run these two commands, each in their own terminal:
|
||||
|
||||
In one terminal, start the rollup bundler in watch mode:
|
||||
$ ${chalk.cyan(`cd ${params.shortName} && ${params.manager} start`)}
|
||||
|
||||
And in another tab, run the create-react-app dev server:
|
||||
And in another terminal, run the dev server:
|
||||
$ ${chalk.cyan(`cd ${path.join(params.shortName, 'example')} && ${params.manager} start`)}
|
||||
`)
|
||||
|
||||
|
|
|
|||
|
|
@ -155,6 +155,6 @@ yarn-debug.log*
|
|||
yarn-error.log*
|
||||
`, 'utf8')
|
||||
|
||||
const cmd = `git init && git add . && git commit -m "init ${pkg.name}@${pkg.version}"`
|
||||
const cmd = `git init && git add . && git commit -m ":tada: Initialized ${pkg.name}@${pkg.version} with create-freesewing-pattern"`
|
||||
return execa.shell(cmd, { cwd: dest })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,17 +15,17 @@ const tests = [
|
|||
repo: 'nala/my-test-library',
|
||||
license: 'MIT',
|
||||
manager: 'yarn',
|
||||
template: 'default',
|
||||
template: 'light',
|
||||
git: true
|
||||
},
|
||||
{
|
||||
name: 'my-test-typescript-library',
|
||||
name: 'my-test-dark-library',
|
||||
author: 'nala',
|
||||
description: 'this is a auto-generated test module. please ignore.',
|
||||
repo: 'nala/my-test-library',
|
||||
license: 'MIT',
|
||||
manager: 'yarn',
|
||||
template: 'typescript',
|
||||
template: 'dark',
|
||||
git: true
|
||||
},
|
||||
{
|
||||
|
|
@ -35,7 +35,7 @@ const tests = [
|
|||
repo: 'nala/my-test-library',
|
||||
license: 'MIT',
|
||||
manager: 'npm',
|
||||
template: 'default',
|
||||
template: 'light',
|
||||
git: true
|
||||
},
|
||||
{
|
||||
|
|
@ -45,12 +45,12 @@ const tests = [
|
|||
repo: 'nala/my-test-typescript-library',
|
||||
license: 'MIT',
|
||||
manager: 'npm',
|
||||
template: 'typescript',
|
||||
template: 'dark',
|
||||
git: true
|
||||
},
|
||||
{
|
||||
name: '@automagical/nala',
|
||||
author: 'superstar-cats',
|
||||
name: '@freesewing/test',
|
||||
author: 'joostdecock',
|
||||
description: 'this is a auto-generated test module. please ignore.',
|
||||
repo: 'superstar-cats/nala',
|
||||
license: 'GPL',
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ module.exports = async () => {
|
|||
repo: (info) => `${info.author}/${info.name}`,
|
||||
license: config.get('license', 'MIT'),
|
||||
manager: config.get('manager', 'npm'),
|
||||
template: config.get('template', 'default')
|
||||
template: config.get('template', 'light')
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ module.exports = async (opts) => {
|
|||
{
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: 'Package Name',
|
||||
message: 'Pattern Name',
|
||||
validate: (name) => {
|
||||
return name && validateNpmName(name).validForNewPackages
|
||||
},
|
||||
|
|
@ -39,7 +39,7 @@ module.exports = async (opts) => {
|
|||
{
|
||||
type: 'input',
|
||||
name: 'description',
|
||||
message: 'Package Description',
|
||||
message: 'Pattern Description',
|
||||
default: opts.description
|
||||
},
|
||||
{
|
||||
|
|
@ -70,8 +70,8 @@ module.exports = async (opts) => {
|
|||
{
|
||||
type: 'list',
|
||||
name: 'template',
|
||||
message: 'Template',
|
||||
choices: [ 'default', 'typescript', 'custom' ],
|
||||
message: 'Development Mode',
|
||||
choices: [ 'light', 'dark', 'custom' ],
|
||||
default: opts.template
|
||||
},
|
||||
{
|
||||
|
|
|
|||
6031
packages/create-freesewing-pattern/package-lock.json
generated
Normal file
6031
packages/create-freesewing-pattern/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,14 +1,26 @@
|
|||
{
|
||||
"name": "create-react-library",
|
||||
"version": "2.6.7",
|
||||
"description": "CLI for easily bootstrapping modern react libraries",
|
||||
"repository": "transitive-bullshit/create-react-library",
|
||||
"author": "Travis Fischer <travis@automagical.ai>",
|
||||
"main": "index.js",
|
||||
"name": "create-freesewing-pattern",
|
||||
"version": "0.2.1",
|
||||
"description": "Initilizer package for freesewing patterns",
|
||||
"author": "Joost De Cock <joost@decock.org> (https://github.com/joostdecock)",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/freesewing/create-freesewing-pattern#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/freesewing/create-freesewing-pattern/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/freesewing/create-freesewing-pattern.git"
|
||||
},
|
||||
"keywords": [
|
||||
"npm",
|
||||
"init",
|
||||
"freesewing"
|
||||
],
|
||||
"main": "index.js",
|
||||
"reveal": true,
|
||||
"bin": {
|
||||
"create-react-library": "index.js"
|
||||
"create-freesewing-pattern": "index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "ava -v && standard *.js lib/*.js"
|
||||
|
|
@ -17,18 +29,6 @@
|
|||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
"preact",
|
||||
"library",
|
||||
"module",
|
||||
"create-react-app",
|
||||
"cli",
|
||||
"component",
|
||||
"rollup",
|
||||
"babel",
|
||||
"publish"
|
||||
],
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.2",
|
||||
"commander": "^2.19.0",
|
||||
|
|
|
|||
|
|
@ -1,139 +0,0 @@
|
|||
# create-react-library
|
||||
|
||||
> 一个命令行(CLI)工具, 使用一个命令就可以为你创建一个基于Rollup的React库作为你开源项目的基础.
|
||||
|
||||
[](https://www.npmjs.com/package/create-react-library) [](https://travis-ci.org/transitive-bullshit/create-react-library) [](https://standardjs.com)
|
||||
|
||||
|
||||
## 介绍
|
||||
|
||||
**这个命令行工具(CLI)目的是让你可以简单的制作你自己的React库或组件**
|
||||
|
||||
<p align="center">
|
||||
<img width="600" src="https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/demo.svg">
|
||||
</p>
|
||||
|
||||
这个命令行工具(CLI)基于 [boilerplate](https://github.com/transitive-bullshit/react-modern-library-boilerplate), 相关文章在[这里](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7).
|
||||
|
||||
|
||||
## 功能
|
||||
|
||||
- 基于CLI使用简单
|
||||
- 创建了超过2000个公开的项目!!
|
||||
- 包含了所有流行的js功能
|
||||
- 同时支持`cjs`和`es`模块格式
|
||||
- 使用[create-react-app](https://github.com/facebookincubator/create-react-app)为你的库创建示例相当容易
|
||||
- [Rollup](https://rollupjs.org/)构建支持
|
||||
- [Babel](https://babeljs.io/) 转换支持
|
||||
- [Jest](https://facebook.github.io/jest/) 测试支持
|
||||
- 支持复杂的peer-dependencies依赖
|
||||
- 支持 CSS modules
|
||||
- 支持 Sourcemap
|
||||
- 完善的文档 :heart_eyes:
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
这个包必须依赖 `node >= 4`, 但是我们推荐 `node >= 8`.
|
||||
|
||||
```bash
|
||||
npm install -g create-react-library
|
||||
```
|
||||
|
||||
|
||||
## 创建一个新的模块
|
||||
|
||||
```bash
|
||||
create-react-library
|
||||
```
|
||||
|
||||
根据提示输入你模块的基本信息，然后CLI将会执行以下步骤
|
||||
|
||||
- 将模板复制到新创建的文件夹中
|
||||
- 通过yarn或npm安装依赖
|
||||
- 通过npm的link链接包到本地, 方便开发调用
|
||||
- 初始化本地git仓库
|
||||
|
||||
这个时候，你的新模块目录应该和下面的截图差不多。这些所有的设置都是为了更友好的进行本地开发
|
||||
|
||||
<p align="center">
|
||||
<img width="600" src="https://cdn.rawgit.com/transitive-bullshit/create-react-library/master/media/tree.svg">
|
||||
</p>
|
||||
|
||||
|
||||
## 开发
|
||||
|
||||
本地开发分为两个部分.
|
||||
|
||||
首先, 你可以运行rollup去监听你的`src/`模块, 当你有任何更改会自动编译到`dist/`
|
||||
|
||||
```bash
|
||||
npm start # 运行rollup和监听更改
|
||||
```
|
||||
|
||||
然后, 在本地开发中需要在`example/`目录中链接你的模块
|
||||
|
||||
```bash
|
||||
# (打开新的终端窗口中)
|
||||
cd example
|
||||
npm link <your-module-name> # 如果使用yarn可以跳过这步
|
||||
npm start # 运行 create-react-app dev server 可以开你的示例程序
|
||||
```
|
||||
|
||||
现在, 当你对库的`src/`目录或演示程序的`example/src`目录有任何更改, `create-react-app`会重新加载本地开发服务, 这样就能很愉快的对你的组件进行快速开发迭代.
|
||||
|
||||
|
||||
|
||||
|
||||
#### 发布到NPM
|
||||
|
||||
将库发布到 **npm** 时请务必要确保所有的依赖模块已经正确添加在了`peerDependencies`中, rollup会自动识别`peerDependencies`配置选项, 而不会将它捆绑在你的模块中(或者可以叫他外部依赖).
|
||||
|
||||
然后就可以愉快的发布拉
|
||||
|
||||
```bash
|
||||
# 注意下面的命令会编译`commonjs`和`es`的版本到你模块的dist/目录中
|
||||
npm publish
|
||||
```
|
||||
|
||||
|
||||
#### Github Pages
|
||||
|
||||
将示例部署到github pages相当简单, 我们需要先给example编译一个生产版本, 这个example用于演示你的库. 然后运行gh-pages来部署生成的bundle文件到github.
|
||||
|
||||
```bash
|
||||
npm run deploy
|
||||
```
|
||||
|
||||
|
||||
## 使用例子
|
||||
|
||||
### 导出多个命名
|
||||
|
||||
这个[分支](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/multiple-exports)演示了如何导出多个命名的方法. 在这个分支的模块中导出了两个组件`Foo`和`Bar`, 然后展示他们怎么在example中进行调用的.
|
||||
|
||||
### Material-UI
|
||||
|
||||
这个分支[branch](https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/material-ui)演示了如何使用`peerDependencies`来构建需要依赖外部[material-ui](https://github.com/mui-org/material-ui)的库. 它展示了[rollup-plugin-peer-deps-external](https://www.npmjs.com/package/rollup-plugin-peer-deps-external)强大的`peerDependencies`依赖功能. 它可以轻松的依赖material-ui但又无需将它绑定到当前模块中.
|
||||
|
||||
### 开源库
|
||||
|
||||
下面是一些使用`create-react-library`引导来创建的开源库的成功例子.
|
||||
|
||||
- [tabler-react](https://github.com/tabler/tabler-react) - React实现的Tabler UI组件
|
||||
- [react-background-slideshow](https://github.com/transitive-bullshit/react-background-slideshow) - React创建背景性感的瓦片幻灯片效果 🔥
|
||||
- [react-starfield-animation](https://github.com/transitive-bullshit/react-starfield-animation) - React创建基于Canvas的星空动画 ✨
|
||||
- [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) - React创建的爆破粒子按钮效果 🎉
|
||||
- [react-particle-animation](https://github.com/transitive-bullshit/react-particle-animation) - React创建基于Canvas的粒子动画 🌐
|
||||
- [react-block-image](https://github.com/transitive-bullshit/react-block-image) - React中通过使用`div`替换`img`来获得更多的控制 🌃
|
||||
- [react-mp3-recorder](https://github.com/transitive-bullshit/react-mp3-recorder) - React实现的使用麦克风来记录mp3音频 🎵
|
||||
- [react-before-after-slider](https://github.com/transitive-bullshit/react-before-after-slider) - React创建的两个图片比较的库.
|
||||
- [worldwind-react-globe](https://github.com/emxsys/worldwind-react-globe) - React实现的NASA WorldWind
|
||||
- [react-shimmer](https://github.com/gokcan/react-shimmer) - 加载图片时使用一个闪光的效果.
|
||||
|
||||
如果你想添加你的库到列表中, 欢迎提交 [issue](https://github.com/transitive-bullshit/create-react-library/issues/new)!
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Travis Fischer](https://github.com/transitive-bullshit)
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"presets": [
|
||||
["@babel/preset-env", {
|
||||
"modules": false
|
||||
}],
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
23
packages/create-freesewing-pattern/template/light/.eslintrc
Normal file
23
packages/create-freesewing-pattern/template/light/.eslintrc
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"standard",
|
||||
"standard-react"
|
||||
],
|
||||
"env": {
|
||||
"es6": true
|
||||
},
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
// don't force es6 functions to include space before paren
|
||||
"space-before-function-paren": 0,
|
||||
|
||||
// allow specifying true explicitly for boolean props
|
||||
"react/jsx-boolean-value": 0
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,11 @@
|
|||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# IDE Stuff
|
||||
/.idea
|
||||
/.vscode
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# builds
|
||||
build
|
||||
dist
|
||||
.rpt2_cache
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
|
@ -12,7 +12,7 @@ npm install --save {{name}}
|
|||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import MyComponent from '{{name}}'
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
import { version } from "../package.json";
|
||||
|
||||
// Configuration file syntax documentation:
|
||||
// -> https://beta.freesewing.org/en/docs/developer/config
|
||||
|
||||
export default {
|
||||
name: "{{name}}",
|
||||
version,
|
||||
|
||||
//
|
||||
// measurements
|
||||
//
|
||||
// An array with the names of
|
||||
// the measurements required for your design
|
||||
measurements: [
|
||||
//"chestCircumference",
|
||||
//"naturalWaist",
|
||||
],
|
||||
|
||||
//
|
||||
// dependencies
|
||||
//
|
||||
// An object where the key must be a part name, the value can be:
|
||||
// -> a part name
|
||||
// -> an array of part names
|
||||
//
|
||||
// This will be used to determine the order in which parts are drafted
|
||||
dependencies: {
|
||||
//front: "back"
|
||||
//side: ["front", "back"]
|
||||
},
|
||||
|
||||
//
|
||||
// inject
|
||||
//
|
||||
// An object where both key and value must be a a part name.
|
||||
// The value part will be injected in the key part.
|
||||
//
|
||||
// By injected we mean rather than starting out with a fresh part,
|
||||
// the key part will get the points, paths, and snippets of the value part.
|
||||
inject: {
|
||||
//front: "back"
|
||||
},
|
||||
|
||||
//
|
||||
// hide
|
||||
//
|
||||
// An array that lists pattern parts that should be hidden
|
||||
// by default. Hidden means that they will be drafted,
|
||||
// but not rendered. Typically used for a base part on
|
||||
// which other parts are built.
|
||||
//
|
||||
hide: [],
|
||||
|
||||
//
|
||||
// parts
|
||||
//
|
||||
// An array that lists your (additional) pattern parts.
|
||||
// The name must be the key the pattern.parts object.
|
||||
//
|
||||
// This does not need to be an exhaustive list of all parts
|
||||
// in your pattern. If parts are included in the dependencies,
|
||||
// inject, or hide configuration, there’s no need to include
|
||||
// them here, as we already know of their existence.
|
||||
//
|
||||
parts: [],
|
||||
|
||||
//
|
||||
// options
|
||||
//
|
||||
// Options come in 6 varities:
|
||||
//
|
||||
// -> Constants : A value that can’t be changed
|
||||
// -> Percentages : A value in percent, with minimum and maximum values
|
||||
// -> Millimeters : A value in millimeter, with minimum and maximum values
|
||||
// -> Degrees : A value in degrees, with minimum and maximum values
|
||||
// -> Counters : An integer value, with minimum and maximum values
|
||||
// -> Lists : A list of options with a default
|
||||
//
|
||||
// Under the hood, millimeters, degrees, and counters are handled
|
||||
// the same way. We use different types because it easier to
|
||||
// understand the nature of a given option.
|
||||
//
|
||||
options: {
|
||||
//
|
||||
// Constants
|
||||
//
|
||||
// If your option is a scalar value (like a string or a number),
|
||||
// it will be treated as a constant.
|
||||
//
|
||||
// Rather than define constants in your code, it’s good practice
|
||||
// to set them in your configuration file. This way, people who
|
||||
// extend your pattern can change them if they would like to.
|
||||
//
|
||||
//foo: 4,
|
||||
|
||||
//
|
||||
// Percentages
|
||||
//
|
||||
// Percentage options are the bread and butter of freesewing.
|
||||
// Almost all your options will probably be percentages.
|
||||
// They make sure that your pattern will scale regardless of size.
|
||||
//
|
||||
// Your percentage option should be an object with these properties:
|
||||
//
|
||||
// -> pct : The percentage
|
||||
// -> min : The minimum that’s allowed
|
||||
// -> max : The maximum that’s allowed
|
||||
//
|
||||
// Percentage options will be divided by 100 when loaded
|
||||
//
|
||||
// You specify percentages in your config file.
|
||||
// For example, 50 means 50%. When your configuration is loaded,
|
||||
// those percentages will by divided by 100.
|
||||
// So a percentage of 50 in your config file will be 0.5 when
|
||||
// you read out that option in your pattern.
|
||||
//
|
||||
//chestEase: {
|
||||
// pct: 8,
|
||||
// min: -4,
|
||||
// max: 20
|
||||
//},
|
||||
|
||||
//
|
||||
// Millimeters
|
||||
//
|
||||
// While we recommend using percentages where possible, sometimes
|
||||
// that doesn’t make sense. For those cases, you can use millimeters.
|
||||
//
|
||||
// Your millimeter option should be an object with these properties:
|
||||
//
|
||||
// -> mm : The default value in millimeter
|
||||
// -> min : The minimul that’s allowed
|
||||
// -> max : The maximum that’s allowed
|
||||
//
|
||||
//elasticWidth: {
|
||||
// mm: 35,
|
||||
// min: 5,
|
||||
// max: 80
|
||||
//},
|
||||
|
||||
//
|
||||
// Degrees
|
||||
//
|
||||
// For angles, use degrees.
|
||||
//
|
||||
// Your degree option should be an object with these properties:
|
||||
//
|
||||
// -> deg : The default value in degrees
|
||||
// -> min : The minimul that’s allowed
|
||||
// -> max : The maximum that’s allowed
|
||||
//
|
||||
//collarAngle: {
|
||||
// deg: 85,
|
||||
// min: 60,
|
||||
// max: 130
|
||||
//},
|
||||
|
||||
//
|
||||
// Counters
|
||||
//
|
||||
// For a given number of things, use counters. Counters are
|
||||
// for integers only. Things like number of buttons and so on.
|
||||
//
|
||||
// Your counter option should be an object with these properties:
|
||||
//
|
||||
// -> count : The default integer value
|
||||
// -> min : The minimal integer value that’s allowed
|
||||
// -> max : The maximum integer value that’s allowed
|
||||
//
|
||||
//butttons: {
|
||||
// count: 7,
|
||||
// min: 4,
|
||||
// max: 12
|
||||
//},
|
||||
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
// Use a list option when you want to offer an array of choices.
|
||||
//
|
||||
// Your list option should be an object with these properties:
|
||||
//
|
||||
// -> dflt : The default for this option
|
||||
// -> list : An array of available values options
|
||||
//
|
||||
//cuffStyle: {
|
||||
// dflt: "angledBarrelCuff",
|
||||
// list: [
|
||||
// "roundedBarrelCuff",
|
||||
// "angledBarrelCuff",
|
||||
// "straightBarrelCuff",
|
||||
// "roundedFrenchCuff",
|
||||
// "angledFrenchCuff",
|
||||
// "straightFrenchCuff"
|
||||
// ]
|
||||
//}
|
||||
}
|
||||
};
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"react-scripts": "2.0.4",
|
||||
"freesewing": "^0.30.6",
|
||||
"{{name}}": "{{#if yarn}}link:..{{else}}file:..{{/if}}"
|
||||
},
|
||||
"scripts": {
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,11 +1,14 @@
|
|||
import React, { Component } from 'react';
|
||||
import freesewing from "freesewing";
|
||||
import './App.css';
|
||||
|
||||
import ExampleComponent from '{{name}}';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return <ExampleComponent text='Modern React component module' />;
|
||||
console.log(freesewing);
|
||||
console.log({ExampleComponent});
|
||||
return (<p>hi there</p>)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
{
|
||||
"name": "{{name}}",
|
||||
"version": "0.0.1",
|
||||
"description": "{{description}}",
|
||||
"author": "{{author}}",
|
||||
"license": "{{license}}",
|
||||
"repository": "{{repo}}",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.es.js",
|
||||
"jsnext:main": "dist/index.es.js",
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||
"test:watch": "react-scripts test --env=jsdom",
|
||||
"build": "rollup -c",
|
||||
"start": "rollup -c -w",
|
||||
"prepare": "{{manager}} run build",
|
||||
"predeploy": "cd example && {{manager}} install && {{manager}} run build",
|
||||
"deploy": "gh-pages -d example/build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.5.4",
|
||||
"react": "^15.0.0 || ^16.0.0",
|
||||
"react-dom": "^15.0.0 || ^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"@babel/plugin-external-helpers": "^7.0.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.0.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.0.0",
|
||||
"@babel/plugin-proposal-do-expressions": "^7.0.0",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.0.0",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
|
||||
"@babel/plugin-proposal-function-bind": "^7.0.0",
|
||||
"@babel/plugin-proposal-function-sent": "^7.0.0",
|
||||
"@babel/plugin-proposal-json-strings": "^7.0.0",
|
||||
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
|
||||
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
|
||||
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
|
||||
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||
"@babel/plugin-syntax-import-meta": "^7.0.0",
|
||||
"@babel/preset-env": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@svgr/rollup": "^2.4.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"cross-env": "^5.1.4",
|
||||
"eslint": "^5.0.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-react": "^6.0.0",
|
||||
"eslint-plugin-import": "^2.13.0",
|
||||
"eslint-plugin-node": "^7.0.1",
|
||||
"eslint-plugin-promise": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.10.0",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"gh-pages": "^1.2.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"rollup": "^0.64.1",
|
||||
"rollup-plugin-babel": "^4.0.1",
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-babel-minify": "^7.0.0",
|
||||
"rollup-plugin-json": "^3.1.0",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
||||
"rollup-plugin-postcss": "^1.6.2",
|
||||
"rollup-plugin-url": "^1.4.0",
|
||||
"@freesewing/plugin-bundle": "0.8.0",
|
||||
"freesewing": "0.30.6"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,27 +1,27 @@
|
|||
import typescript from 'rollup-plugin-typescript2'
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import external from 'rollup-plugin-peer-deps-external'
|
||||
// import postcss from 'rollup-plugin-postcss-modules'
|
||||
import postcss from 'rollup-plugin-postcss'
|
||||
import json from "rollup-plugin-json";
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import url from 'rollup-plugin-url'
|
||||
import svgr from '@svgr/rollup'
|
||||
import minify from "rollup-plugin-babel-minify";
|
||||
import { name, version, description, author, license } from "./package.json";
|
||||
|
||||
import pkg from './package.json'
|
||||
|
||||
export default {
|
||||
input: 'src/index.tsx',
|
||||
input: 'src/index.js',
|
||||
output: [
|
||||
{
|
||||
file: pkg.main,
|
||||
format: 'cjs',
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: 'es',
|
||||
exports: 'named',
|
||||
sourcemap: true
|
||||
}
|
||||
],
|
||||
|
|
@ -32,11 +32,12 @@ export default {
|
|||
}),
|
||||
url({ exclude: ['**/*.svg'] }),
|
||||
svgr(),
|
||||
resolve(),
|
||||
typescript({
|
||||
rollupCommonJSResolveHack: true,
|
||||
clean: true
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
plugins: [ '@babel/external-helpers' ]
|
||||
}),
|
||||
resolve({ browser: true }),
|
||||
json(),
|
||||
commonjs()
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
22
packages/create-freesewing-pattern/template/light/src/box.js
Normal file
22
packages/create-freesewing-pattern/template/light/src/box.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
export default function(part) {
|
||||
let { Point, Path, points, paths, complete, paperless } = part.shorthand();
|
||||
|
||||
points.start = new Point(0, 0);
|
||||
points.end = new Point(75, 0);
|
||||
|
||||
paths.demo = new Path()
|
||||
.move(points.start)
|
||||
.line(points.end)
|
||||
.attr("data-text", "thisIsTheFrontPart")
|
||||
.attr("data-text-class", "center");
|
||||
|
||||
// Complete?
|
||||
if (complete) {
|
||||
}
|
||||
|
||||
// Paperless?
|
||||
if (paperless) {
|
||||
}
|
||||
|
||||
return part;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
* This file was created by create-freesewing-pattern
|
||||
* -> https://github.com/freesewing/create-freesewing-pattern
|
||||
*
|
||||
* Freesewing documentation:
|
||||
* -> https://beta.freesewing.org/en/docs/developer
|
||||
*
|
||||
* Freesewing help & advice:
|
||||
* -> https://gitter.im/freesewing/freesewing
|
||||
*/
|
||||
import freesewing from "freesewing";
|
||||
import config from "../config";
|
||||
|
||||
/*
|
||||
* Our most popular plugins are part of the plugin bundle
|
||||
* which is already installed and imported.
|
||||
* If you need additional plugins, you should install and
|
||||
* import them.
|
||||
*
|
||||
* A list of all plugins is available at:
|
||||
* -> https://beta.freesewing.org/en/docs/developer/plugins
|
||||
*/
|
||||
import plugins from "@freesewing/plugin-bundle";
|
||||
// import buttons from "@freesewing/plugin-buttons";
|
||||
|
||||
/*
|
||||
* If you want to extend an existing pattern, you should
|
||||
* install it as a dev-dependency, and then import it.
|
||||
*
|
||||
* A list of all patterns is available at:
|
||||
* -> https://beta.freesewing.org/en/patterns
|
||||
*/
|
||||
//import Brian from "@freesewing/brian";
|
||||
|
||||
/*
|
||||
* It's a best practice to put each pattern part in its own file:
|
||||
* -> https://beta.freesewing.org/en/docs/developer/do
|
||||
*/
|
||||
import draftBox from "./box";
|
||||
|
||||
/* Create new design*/
|
||||
const {{name}} = new freesewing.Design(config, [
|
||||
plugins,
|
||||
//buttons
|
||||
]);
|
||||
|
||||
/*
|
||||
* If you want to extend an existing pattern, you should
|
||||
* attach those draft methods you need to the design prototype
|
||||
* as such:
|
||||
*/
|
||||
//{{name}}.prototype.draftBrianBase = function(part) {
|
||||
// return new Brian(this.settings).draftBase(part);
|
||||
//};
|
||||
//{{name}}.prototype.draftBrianBack = function(part) {
|
||||
// return new Brian(this.settings).draftBack(part);
|
||||
//};
|
||||
//{{name}}.prototype.draftBrianFront = function(part) {
|
||||
// return new Brian(this.settings).draftFront(part);
|
||||
//};
|
||||
|
||||
/*
|
||||
* Attach the draft methods of your own parts to the
|
||||
* design prototype as such:
|
||||
*/
|
||||
{{name}}.prototype.draftBox = draftBox;
|
||||
|
||||
// Export your design
|
||||
export default {{name}};
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
{
|
||||
"name": "{{name}}",
|
||||
"version": "1.0.0",
|
||||
"description": "{{description}}",
|
||||
"author": "{{author}}",
|
||||
"license": "{{license}}",
|
||||
"repository": "{{repo}}",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.es.js",
|
||||
"jsnext:main": "dist/index.es.js",
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||
"test:watch": "react-scripts test --env=jsdom",
|
||||
"build": "rollup -c",
|
||||
"start": "rollup -c -w",
|
||||
"prepare": "{{manager}} run build",
|
||||
"predeploy": "cd example && {{manager}} install && {{manager}} run build",
|
||||
"deploy": "gh-pages -d example/build"
|
||||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"react": "^15.0.0 || ^16.0.0",
|
||||
"react-dom": "^15.0.0 || ^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@svgr/rollup": "^2.4.1",
|
||||
"@types/jest": "^23.1.5",
|
||||
"@types/react": "^16.8.0",
|
||||
"@types/react-dom": "^16.8.0",
|
||||
"cross-env": "^5.1.4",
|
||||
"gh-pages": "^1.2.0",
|
||||
"react": "^16.8.0",
|
||||
"react-dom": "^16.8.0",
|
||||
"react-scripts": "^2.1.0",
|
||||
"rollup": "^0.62.0",
|
||||
"rollup-plugin-babel": "^4.0.1",
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
||||
"rollup-plugin-postcss": "^1.6.2",
|
||||
"rollup-plugin-typescript2": "^0.17.0",
|
||||
"rollup-plugin-url": "^1.4.0",
|
||||
"typescript": "^3.3.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* @class ExampleComponent
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import styles from './styles.css'
|
||||
|
||||
export type Props = { text: string }
|
||||
|
||||
export default class ExampleComponent extends Component<Props> {
|
||||
render() {
|
||||
const {
|
||||
text
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div className={styles.test}>
|
||||
Example Component: {text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/* add css styles here (optional) */
|
||||
|
||||
.test {
|
||||
display: inline-block;
|
||||
margin: 2em auto;
|
||||
border: 2px solid #000;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import ExampleComponent from './'
|
||||
|
||||
describe('ExampleComponent', () => {
|
||||
it('is truthy', () => {
|
||||
expect(ExampleComponent).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/**
|
||||
* Default CSS definition for typescript,
|
||||
* will be overridden with file-specific definitions by rollup
|
||||
*/
|
||||
declare module '*.css' {
|
||||
const content: { [className: string]: string };
|
||||
export default content;
|
||||
}
|
||||
|
||||
interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
|
||||
|
||||
declare module '*.svg' {
|
||||
const svgUrl: string;
|
||||
const svgComponent: SvgrComponent;
|
||||
export default svgUrl;
|
||||
export { svgComponent as ReactComponent }
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "build",
|
||||
"module": "esnext",
|
||||
"target": "es5",
|
||||
"lib": ["es6", "dom", "es2016", "es2017"],
|
||||
"sourceMap": true,
|
||||
"allowJs": false,
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"moduleResolution": "node",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitThis": true,
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "commonjs"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue