Skip to content

Commit 63c240e

Browse files
edewitedewit
committed
initial version
0 parents  commit 63c240e

Some content is hidden

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

45 files changed

+1147
-0
lines changed

‎.circleci/config.yml

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
version: 2
2+
jobs:
3+
build:
4+
docker:
5+
- image: circleci/node:10.16
6+
7+
working_directory: ~/repo
8+
9+
steps:
10+
- checkout
11+
12+
# Download and cache dependencies
13+
- restore_cache:
14+
keys:
15+
- v1-dependencies-{{ checksum "package.json" }}
16+
# fallback to using the latest cache if no exact match is found
17+
- v1-dependencies-
18+
19+
- run: npm install
20+
21+
- save_cache:
22+
paths:
23+
- node_modules
24+
key: v1-dependencies-{{ checksum "package.json" }}
25+
26+
# run tests!
27+
- run: npm run lint
28+
- run: npm test

‎.eslintrc.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"jest/globals": true
6+
},
7+
"extends": ["eslint:recommended"],
8+
"parserOptions": {
9+
"ecmaVersion": 2019,
10+
"sourceType": "module"
11+
},
12+
"plugins": ["jest", "svelte3"],
13+
"overrides": [
14+
{
15+
"files": ["**/*.svelte"],
16+
"processor": "svelte3/svelte3"
17+
}
18+
]
19+
}

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
._*
2+
.DS_Store
3+
.DS_Store?
4+
.idea
5+
.Spotlight-V100
6+
.Trashes
7+
node_modules
8+
yarn.lock
9+
build
10+
11+
dist/
12+
docs/

‎.prettierrc.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"tabWidth": 2,
3+
"semi": true,
4+
"singleQuote": true,
5+
"trailingComma": "none",
6+
"plugins": ["prettier-plugin-svelte"]
7+
}

‎.storybook/addons.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import '@storybook/addon-knobs/register';
2+
import '@storybook/addon-actions/register';
3+
import '@storybook/addon-links/register';

‎.storybook/config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { addDecorator, addParameters, configure } from '@storybook/svelte';
2+
import { withKnobs } from '@storybook/addon-knobs';
3+
import pkg from '../package.json';
4+
5+
// Option defaults:
6+
addParameters({
7+
options: {
8+
name: `${pkg.name} ${pkg.version}`,
9+
url: 'https://github.com/edewit/svelte-patternfly',
10+
panelPosition: 'right',
11+
showPanel: false
12+
},
13+
});
14+
15+
addDecorator(withKnobs());
16+
17+
// automatically import all files ending in *.stories.js
18+
const req = require.context('../stories', true, /\.stories\.js$/);
19+
function loadStories() {
20+
req.keys().forEach(filename => req(filename));
21+
}
22+
23+
configure(loadStories, module);

‎.storybook/preview-head.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
2+
3+
<style>
4+
#root {
5+
padding: 3rem;
6+
}
7+
.bg-checkerboard {
8+
background-image: linear-gradient(45deg, #808080 25%, transparent 25%),
9+
linear-gradient(-45deg, #808080 25%, transparent 25%),
10+
linear-gradient(45deg, transparent 75%, #808080 75%),
11+
linear-gradient(-45deg, transparent 75%, #808080 75%);
12+
background-size: 20px 20px;
13+
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
14+
}
15+
</style>

‎.storybook/webpack.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const path = require('path');
2+
3+
module.exports = async ({ config }) => {
4+
config.resolve = {
5+
alias: {
6+
'svelte-patternfly': path.resolve(__dirname, '../src/')
7+
},
8+
extensions: [...config.resolve.extensions, '.svelte']
9+
};
10+
11+
return config;
12+
};

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 bestguy
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
## Patternfly 4 components for Svelte v3
2+
3+
**Work in progress, check back soon - PRs are welcome!**
4+
5+
The component names and interface are inspired by the [patternfly-react](https://github.com/patternfly/patternfly-react) library for React.
6+
7+
### Status WIP
8+
9+
Just started this, a lot of components are still missing
10+
11+
----
12+
13+
## Install ( when it's released 😉 )
14+
15+
`npm install --save svelte svelte-patternfly`
16+
17+
## Usage
18+
19+
_You need to include a link to patternfly stylesheet in your page - these components do not include or embed any patternfly styles automatically._
20+
21+
Either in your HTML layout:
22+
23+
```html
24+
<head>
25+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css">
26+
</head>
27+
```
28+
29+
Or add from your Svelte app:
30+
31+
```
32+
<svelte:head>
33+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css">
34+
</svelte:head>
35+
```
36+
37+
In your svelte component:
38+
39+
```html
40+
<script>
41+
import { Button } from 'svelte-patternfly';
42+
</script>
43+
44+
<Button variant="primary">Hello World!</Button>
45+
```
46+
47+
### Note on server-side rendering (SSR) Usage:
48+
49+
If you are using svelte-patternfly in an SSR environment like Sapper,
50+
it's recommended you import the component source directly, for example:
51+
52+
```html
53+
<script>
54+
import Button from 'svelte-patternfly/src/Button.svelte';
55+
</script>
56+
57+
<Button variant="primary">Hello World!</Button>
58+
```

‎babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['@babel/preset-env']
3+
};

‎jest.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
setupFilesAfterEnv: [
3+
'@testing-library/svelte/cleanup-after-each',
4+
],
5+
transform: {
6+
'^.+\\.js$': 'babel-jest',
7+
'^.+\\.svelte$': 'jest-transform-svelte'
8+
},
9+
moduleFileExtensions: ['js', 'svelte'],
10+
bail: false,
11+
verbose: false
12+
};

‎package.json

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
{
2+
"name": "svelte-patternfly",
3+
"version": "0.0.1",
4+
"main": "dist/svelte-patternfly.js",
5+
"module": "dist/svelte-patternfly.es.js",
6+
"jsnext:main": "dist/svelte-patternfly.es.js",
7+
"svelte": "src/index.js",
8+
"keywords": [
9+
"svelte"
10+
],
11+
"repository": {
12+
"type": "git",
13+
"url": "git@github.com:edewit/svelte-patternfly.git"
14+
},
15+
"files": [
16+
"dist",
17+
"src"
18+
],
19+
"scripts": {
20+
"start": "start-storybook -p 6006",
21+
"docs": "build-storybook -o docs",
22+
"dist": "rollup -c",
23+
"lint": "eslint ./src --ext .js --ext .svelte",
24+
"prepublish": "npm run dist && git add -A dist",
25+
"postpublish": "git push && git push --tags",
26+
"test": "jest --verbose",
27+
"version": "npm run docs && git add -A docs"
28+
},
29+
"peerDependencies": {
30+
"svelte": "^3.4.4"
31+
},
32+
"devDependencies": {
33+
"@babel/cli": "^7.8.0",
34+
"@babel/core": "^7.8.0",
35+
"@babel/preset-env": "^7.8.2",
36+
"@storybook/addon-actions": "^5.3.1",
37+
"@storybook/addon-knobs": "^5.3.1",
38+
"@storybook/addon-links": "^5.3.1",
39+
"@storybook/addon-options": "^5.3.1",
40+
"@storybook/addon-storysource": "^5.3.1",
41+
"@storybook/addons": "^5.3.1",
42+
"@storybook/svelte": "^5.3.1",
43+
"@testing-library/jest-dom": "^4.0.0",
44+
"@testing-library/svelte": "^1.8.0",
45+
"autoprefixer": "^9.6.0",
46+
"babel-jest": "^24.7.1",
47+
"babel-loader": "^8.0.6",
48+
"bootstrap": "^4.3.1",
49+
"clean-webpack-plugin": "^3.0.0",
50+
"conventional-changelog-cli": "^2.0.21",
51+
"copy-webpack-plugin": "^5.1.1",
52+
"cross-env": "^5.2.1",
53+
"eslint": "^6.8.0",
54+
"eslint-plugin-jest": "^23.2.0",
55+
"eslint-plugin-svelte3": "^2.7.3",
56+
"get-port-cli": "^2.0.0",
57+
"jest": "^24.7.1",
58+
"jest-transform-svelte": "^2.0.2",
59+
"json-loader": "^0.5.7",
60+
"mini-css-extract-plugin": "^0.7.0",
61+
"node-sass": "^4.12.0",
62+
"npm-run-all": "^4.1.5",
63+
"postcss": "^7.0.18",
64+
"prettier": "^1.19.1",
65+
"prettier-plugin-svelte": "^0.5.1",
66+
"prismjs": "^1.17.1",
67+
"raw-loader": "^2.0.0",
68+
"rollup": "^1.29.0",
69+
"rollup-plugin-alias": "^2.2.0",
70+
"rollup-plugin-analyzer": "^3.2.2",
71+
"rollup-plugin-babel": "^4.3.3",
72+
"rollup-plugin-bundle-size": "^1.0.3",
73+
"rollup-plugin-commonjs": "^10.1.0",
74+
"rollup-plugin-copy": "^3.1.0",
75+
"rollup-plugin-livereload": "^1.0.4",
76+
"rollup-plugin-node-resolve": "^5.2.0",
77+
"rollup-plugin-peer-deps-external": "^2.2.0",
78+
"rollup-plugin-scss": "^1.0.1",
79+
"rollup-plugin-svelte": "^5.1.1",
80+
"rollup-plugin-terser": "^5.2.0",
81+
"sirv-cli": "^0.3.1",
82+
"standard-version": "^6.0.1",
83+
"svelte": "^3.12.1",
84+
"svelte-loader": "^2.13.6",
85+
"svelte-preprocess": "^2.16.0",
86+
"wait-for-localhost-cli": "^1.1.0",
87+
"webpack": "^4.40.2",
88+
"webpack-cli": "^3.3.9",
89+
"webpack-dev-server": "^3.8.1"
90+
},
91+
"dependencies": {
92+
"clsx": "^1.0.4",
93+
"lodash.isobject": "^3.0.2",
94+
"lodash.tonumber": "^4.0.3"
95+
},
96+
"browserslist": "last 2 versions"
97+
}

‎rollup.config.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import analyze from 'rollup-plugin-analyzer';
2+
import autoPreprocess from 'svelte-preprocess';
3+
import bundleSize from 'rollup-plugin-bundle-size';
4+
import commonjs from 'rollup-plugin-commonjs';
5+
import resolve from 'rollup-plugin-node-resolve';
6+
import svelte from 'rollup-plugin-svelte';
7+
import { terser } from 'rollup-plugin-terser';
8+
import pkg from './package.json';
9+
10+
const production = !process.env.ROLLUP_WATCH;
11+
12+
const { name } = pkg;
13+
14+
export default {
15+
input: 'src/index.js',
16+
output: [
17+
{
18+
file: pkg.module,
19+
format: 'es',
20+
sourcemap: true,
21+
name,
22+
},
23+
{
24+
file: pkg.main,
25+
format: 'umd',
26+
sourcemap: true,
27+
name,
28+
},
29+
],
30+
plugins: [
31+
svelte({
32+
// enable run-time checks when not in production
33+
dev: !production,
34+
// generate: production ? 'dom' : 'ssr',
35+
hydratable: true,
36+
preprocess: autoPreprocess({
37+
postcss: {
38+
plugins: [require('autoprefixer')()],
39+
},
40+
})
41+
}),
42+
resolve(),
43+
commonjs(),
44+
production && terser(),
45+
production && analyze(),
46+
production && bundleSize(),
47+
],
48+
watch: {
49+
clearScreen: false,
50+
}
51+
}

0 commit comments

Comments
 (0)