shimmer 0.0.29 → 0.0.30
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.babelrc +14 -0
- data/README.md +120 -3
- data/config/rubocop_extensions/rspec.yml +0 -5
- data/lib/shimmer/controllers/sitemaps_controller.rb +3 -1
- data/lib/shimmer/version.rb +1 -1
- data/package.json +24 -4
- data/rollup.component.config.js +37 -0
- data/src/components/stack.scss +252 -0
- data/src/components/stack.tsx +81 -0
- data/stack.png +0 -0
- data/tsconfig.json +3 -2
- data/yarn.lock +3091 -372
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4daaaa818a13c67e102993a851ca62bde262fb8e29ee6b5edfa356344e2708ef
|
|
4
|
+
data.tar.gz: 849d1c53c92617e5186070f62915888b0b6575ba165c3a747a0546e773da7334
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 990b5dfc75f22a79620a2ea0644c5e87c34486911c3b8ee5def8939aafe84a4c2522dfedff24ac4f4e697fbeca5e6a39a4b43ee0a720990a53a287b972c7bca0
|
|
7
|
+
data.tar.gz: 81581da7c7c5a952546771ff6fbecf3b4a0a203db0ffd8c02d4492dca2a1061d46e1a78acb66ab6daf9370e9998e90d6cd1b75a360855d6185d40cf2fb469e05
|
data/.babelrc
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"presets": [
|
|
3
|
+
"@babel/preset-env",
|
|
4
|
+
"@babel/preset-react",
|
|
5
|
+
"@babel/preset-flow"
|
|
6
|
+
],
|
|
7
|
+
"plugins": [
|
|
8
|
+
"@babel/plugin-proposal-class-properties",
|
|
9
|
+
"babel-plugin-inline-json-import",
|
|
10
|
+
["@babel/plugin-transform-runtime", {
|
|
11
|
+
"regenerator": true
|
|
12
|
+
}]
|
|
13
|
+
]
|
|
14
|
+
}
|
data/README.md
CHANGED
|
@@ -4,20 +4,137 @@ Shimmer is a collection of Rails extensions that bring advanced UI features into
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
+
### Components
|
|
8
|
+
|
|
9
|
+
Shimmer includes a suite of styled components that can be implemented in React and also in plain HTML or slim.
|
|
10
|
+
|
|
11
|
+
### Stack
|
|
12
|
+
|
|
13
|
+
Stack is a reusable typed component that allows you to easily manage the layout of your app. You can define whether it should be displayed horizontally, vertically, and how much spacing there should be in between the child components. This component implements a mobile-first design and allows you to customize the display and spacing even on defined breakpoints (tablet, desktop, widescreen) should you need to.
|
|
14
|
+
|
|
15
|
+
To use it in a React project, you can just import and use it as you would in a normal React component:
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import { Stack } from "@nerdgeschoss/shimmer/components/stack";
|
|
19
|
+
|
|
20
|
+
<Stack gapTablet={4} gapDesktop={12} line>
|
|
21
|
+
<div></div>
|
|
22
|
+
<div></div>
|
|
23
|
+
<div></div>
|
|
24
|
+
</Stack>;
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
To use it in an HTML file, you can just import the css file directly from `@nerdgeschoss/shimmer/components/stack.css` and just implement the classes as they are in the stylesheet:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<div class="stack stack--line stack--tablet-4 stack--desktop-12">
|
|
31
|
+
<div></div>
|
|
32
|
+
<div></div>
|
|
33
|
+
<div></div>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
#### Helper types:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
type Justify =
|
|
41
|
+
| "start"
|
|
42
|
+
| "center"
|
|
43
|
+
| "end"
|
|
44
|
+
| "space-between"
|
|
45
|
+
| "space-around"
|
|
46
|
+
| "stretch"
|
|
47
|
+
| "equal-size";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
type Align = "start" | "center" | "end" | "stretch" | "baseline";
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
### Available props:
|
|
57
|
+
|
|
58
|
+
| Field | Type | Description |
|
|
59
|
+
| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
60
|
+
| gap | `number` | Space between elements |
|
|
61
|
+
| gapTablet | `number` | Gap size for screen starting on Tablet breakpoint |
|
|
62
|
+
| gapDesktop | `number` | Gap size for screen starting on Desktop breakpoint |
|
|
63
|
+
| gapWidescreen | `number` | Gap size for screen starting on WideScreen breakpoint |
|
|
64
|
+
| line | `boolean` | Stacks elements horizontally |
|
|
65
|
+
| lineTablet | `boolean` | Stacks elements horizontally starting on Tablet breakpoint |
|
|
66
|
+
| lineDesktop | `boolean` | Stacks elements horizontally starting on Desktop breakpoint |
|
|
67
|
+
| lineWidescreen | `boolean` | Stacks elements horizontally starting on WideScreen breakpoint |
|
|
68
|
+
| align | `Align` | Aligns element according to the [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) of the flex container |
|
|
69
|
+
| alignTablet | `Align` | Align on Tablet breakpoint |
|
|
70
|
+
| alignDesktop | `Align` | Align on Desktop breakpoint |
|
|
71
|
+
| alignWidescreen | `Align` | Align on Widescreen breakpoint |
|
|
72
|
+
| justify | `Justify` | Specifies how elements are distributed along [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) of the flex container |
|
|
73
|
+
| justifyTablet | `Justify` | Justify on Tablet breakpoint |
|
|
74
|
+
| justifyDesktop | `Justify` | Justify on Desktop breakpoint |
|
|
75
|
+
| justifyWidescreen | `Justify` | Justify on Widescreen breakpoint |
|
|
76
|
+
|
|
77
|
+
When using the CSS classes instead of react component we can generate the class names looking at the available props by using the prop names and BEM convention.
|
|
78
|
+
|
|
79
|
+
For example:
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
<Stack gapTablet={4} gapDesktop={12} line>
|
|
83
|
+
...
|
|
84
|
+
</Stack>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
would translate to
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<div class="stack stack--tablet-4 stack--destop-12 stack--line">...</div>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Pleae, note that there is not word "gap" in the class names since we use it implicitly, i.e. `gapWidescreen={12}` is equivalent to `stack stack--widescreen-12`.
|
|
94
|
+
|
|
95
|
+
Another thing to keep in mind when using CSS version of the component that the sizes are fixed - in contrary to the React one where we can add any number we want.
|
|
96
|
+
|
|
97
|
+
Here is the list of available sizes for CSS version:
|
|
98
|
+
|
|
99
|
+
```scss
|
|
100
|
+
$sizes: (
|
|
101
|
+
0: 0px,
|
|
102
|
+
2: 2px,
|
|
103
|
+
4: 4px,
|
|
104
|
+
8: 8px,
|
|
105
|
+
12: 12px,
|
|
106
|
+
16: 16px,
|
|
107
|
+
20: 20px,
|
|
108
|
+
22: 22px,
|
|
109
|
+
24: 24px,
|
|
110
|
+
32: 32px,
|
|
111
|
+
40: 40px,
|
|
112
|
+
48: 48px,
|
|
113
|
+
56: 56px,
|
|
114
|
+
64: 64px,
|
|
115
|
+
);
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Supported breakpoints:
|
|
119
|
+
|
|
120
|
+
- **Tablet**: 640px
|
|
121
|
+
- **Desktop**: 890px
|
|
122
|
+
- **Widescreen**: 1280px
|
|
123
|
+
|
|
7
124
|
### Rubocop Base Configuration
|
|
8
125
|
|
|
9
|
-
|
|
126
|
+
_Shimmer_ offers an opiniated _Rubocop_ base configuration. This configuration inherits itself from _StandardRB_ and aim at remaining as close to it as possible. Why not only use _StandardRB_, since it is so fast and prevent bikeshedding? Well, sadly, it does not solve all problems and using _Rubocop_ still integrates a lot easier in most toolsets. However, the idea is to still prevent bikeshedding our _Rubocop_ configuration by making sure that every exception to what's configured in _StandardRB_ is justified (with a comment over its configuration block in `./config/rubocop_base.yml`), reviewed, debated, and agreed upon before being merged.
|
|
10
127
|
|
|
11
128
|
#### Use Shared Configuration In Projects
|
|
12
129
|
|
|
13
|
-
Typically, a `.rubocop.yml` file in projects using
|
|
130
|
+
Typically, a `.rubocop.yml` file in projects using _Shimmer_ looks like this.
|
|
14
131
|
|
|
15
132
|
```yml
|
|
16
133
|
inherit_gem:
|
|
17
134
|
shimmer: config/rubocop_base.yml
|
|
18
135
|
```
|
|
19
136
|
|
|
20
|
-
Then, if there are specific cops you want to use in the specific project you are working on, you still can easily add them. But at least, the base configuration is shared between projects and is itself as close to
|
|
137
|
+
Then, if there are specific cops you want to use in the specific project you are working on, you still can easily add them. But at least, the base configuration is shared between projects and is itself as close to _StandardRB_ as possible.
|
|
21
138
|
|
|
22
139
|
### Static File Serving
|
|
23
140
|
|
|
@@ -4,11 +4,6 @@ require:
|
|
|
4
4
|
RSpec:
|
|
5
5
|
Enabled: false
|
|
6
6
|
|
|
7
|
-
# Check that instances are not being stubbed globally.
|
|
8
|
-
# Prefer instance doubles over stubbing any instance of a class.
|
|
9
|
-
RSpec/AnyInstance:
|
|
10
|
-
Enabled: true
|
|
11
|
-
|
|
12
7
|
# Checks that around blocks actually run the test.
|
|
13
8
|
# Would be a shame if the test would be green simply because it is not called.
|
|
14
9
|
RSpec/AroundBlock:
|
|
@@ -4,7 +4,9 @@ module Shimmer
|
|
|
4
4
|
class SitemapsController < ActionController::Base
|
|
5
5
|
def show
|
|
6
6
|
path = "sitemaps/#{params.require(:path)}.gz"
|
|
7
|
-
|
|
7
|
+
filename = "sitemap_#{params[:path]}.xml.gz"
|
|
8
|
+
|
|
9
|
+
send_data ActiveStorage::Blob.service.download(path), filename: filename, type: "application/gzip", disposition: "attachment"
|
|
8
10
|
end
|
|
9
11
|
end
|
|
10
12
|
end
|
data/lib/shimmer/version.rb
CHANGED
data/package.json
CHANGED
|
@@ -4,13 +4,14 @@
|
|
|
4
4
|
"description": "Simple application development in Rails",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
|
-
"types": "dist/index",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "yarn build:js && yarn build:types",
|
|
12
|
+
"build": "yarn build:js && yarn build:components && yarn build:types",
|
|
13
13
|
"build:js": "NODE_ENV=production rollup -c",
|
|
14
|
+
"build:components": "NODE_ENV=production rollup --config rollup.component.config.js && echo 'import \"./stack.css\";' >> dist/components/stack.js",
|
|
14
15
|
"build:types": "tsc --emitDeclarationOnly",
|
|
15
16
|
"format": "prettier --write \"src/**/*.{ts,css,scss,json,yml}\"",
|
|
16
17
|
"lint": "yarn lint:types && yarn lint:style",
|
|
@@ -18,7 +19,8 @@
|
|
|
18
19
|
"lint:style": "eslint src/**/*.ts --max-warnings 0"
|
|
19
20
|
},
|
|
20
21
|
"contributors": [
|
|
21
|
-
"Jens Ravens"
|
|
22
|
+
"Jens Ravens",
|
|
23
|
+
"Geraldine Atayan"
|
|
22
24
|
],
|
|
23
25
|
"license": "MIT",
|
|
24
26
|
"dependencies": {
|
|
@@ -27,17 +29,35 @@
|
|
|
27
29
|
"@rails/request.js": "^0.0.6"
|
|
28
30
|
},
|
|
29
31
|
"devDependencies": {
|
|
32
|
+
"@babel/core": "^7.0.0-0",
|
|
33
|
+
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
|
34
|
+
"@babel/plugin-transform-runtime": "^7.17.0",
|
|
35
|
+
"@babel/preset-env": "^7.16.11",
|
|
36
|
+
"@babel/preset-flow": "^7.16.7",
|
|
37
|
+
"@babel/preset-react": "^7.16.7",
|
|
38
|
+
"@types/react": "^17.0.37",
|
|
39
|
+
"@types/react-dom": "^17.0.1",
|
|
30
40
|
"@typescript-eslint/eslint-plugin": "^5.6.0",
|
|
31
41
|
"@typescript-eslint/parser": "^5.6.0",
|
|
32
42
|
"esbuild": "^0.14.2",
|
|
33
43
|
"eslint": "^8.4.1",
|
|
34
44
|
"eslint-config-prettier": "^8.3.0",
|
|
35
45
|
"eslint-plugin-prettier": "^4.0.0",
|
|
46
|
+
"postcss": "^8.4.24",
|
|
47
|
+
"postcss-preset-env": "^8.5.1",
|
|
36
48
|
"prettier": "^2.5.1",
|
|
37
49
|
"rollup": "^2.61.0",
|
|
38
50
|
"rollup-plugin-cleaner": "^1.0.0",
|
|
39
51
|
"rollup-plugin-esbuild": "^4.7.2",
|
|
40
|
-
"
|
|
52
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
53
|
+
"sass": "^1.63.4",
|
|
54
|
+
"typescript": "^4.1.3",
|
|
55
|
+
"classnames": "^2.3.2"
|
|
56
|
+
},
|
|
57
|
+
"peerDependencies": {
|
|
58
|
+
"react": "^17.0.1",
|
|
59
|
+
"react-dom": "^17.0.1",
|
|
60
|
+
"classnames": "^2.3.2"
|
|
41
61
|
},
|
|
42
62
|
"keywords": [
|
|
43
63
|
"rails",
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import esbuild from "rollup-plugin-esbuild";
|
|
2
|
+
import pkg from "./package.json";
|
|
3
|
+
import postcss from "rollup-plugin-postcss";
|
|
4
|
+
import postcssPresetEnv from "postcss-preset-env";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
input: "./src/components/stack.tsx",
|
|
8
|
+
external: ["react", "react-dom", "classnames"],
|
|
9
|
+
plugins: [
|
|
10
|
+
esbuild({
|
|
11
|
+
target: "es6",
|
|
12
|
+
}),
|
|
13
|
+
[
|
|
14
|
+
"@babel/plugin-transform-runtime",
|
|
15
|
+
{
|
|
16
|
+
regenerator: true,
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
postcss({
|
|
20
|
+
extract: true,
|
|
21
|
+
plugins: [postcssPresetEnv({ preserve: true })],
|
|
22
|
+
}),
|
|
23
|
+
],
|
|
24
|
+
output: {
|
|
25
|
+
dir: "dist/components",
|
|
26
|
+
plugins: [
|
|
27
|
+
{
|
|
28
|
+
file: pkg.main,
|
|
29
|
+
format: "cjs",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
file: pkg.module,
|
|
33
|
+
format: "es",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
};
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
@mixin breakpoint-tablet {
|
|
2
|
+
@media (min-width: 640px) {
|
|
3
|
+
@content;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
@mixin breakpoint-desktop {
|
|
7
|
+
@media (min-width: 890px) {
|
|
8
|
+
@content;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
@mixin breakpoint-widescreen {
|
|
12
|
+
@media (min-width: 1280px) {
|
|
13
|
+
@content;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
$sizes: (
|
|
18
|
+
0: 0px,
|
|
19
|
+
2: 2px,
|
|
20
|
+
4: 4px,
|
|
21
|
+
8: 8px,
|
|
22
|
+
12: 12px,
|
|
23
|
+
16: 16px,
|
|
24
|
+
20: 20px,
|
|
25
|
+
22: 22px,
|
|
26
|
+
24: 24px,
|
|
27
|
+
32: 32px,
|
|
28
|
+
40: 40px,
|
|
29
|
+
48: 48px,
|
|
30
|
+
56: 56px,
|
|
31
|
+
64: 64px,
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
@mixin line {
|
|
35
|
+
flex-direction: row;
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.stack {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
gap: 8px;
|
|
43
|
+
|
|
44
|
+
> * {
|
|
45
|
+
min-width: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&--line {
|
|
49
|
+
@include line;
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// align
|
|
54
|
+
&--align-start {
|
|
55
|
+
align-items: flex-start;
|
|
56
|
+
}
|
|
57
|
+
&--align-center {
|
|
58
|
+
align-items: center;
|
|
59
|
+
}
|
|
60
|
+
&--align-end {
|
|
61
|
+
align-items: flex-end;
|
|
62
|
+
}
|
|
63
|
+
&--align-stretch {
|
|
64
|
+
align-items: stretch;
|
|
65
|
+
}
|
|
66
|
+
&--align-baseline {
|
|
67
|
+
align-items: baseline;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// justify
|
|
71
|
+
&--justify-start {
|
|
72
|
+
justify-content: flex-start;
|
|
73
|
+
}
|
|
74
|
+
&--justify-center {
|
|
75
|
+
justify-content: center;
|
|
76
|
+
}
|
|
77
|
+
&--justify-end {
|
|
78
|
+
justify-content: flex-end;
|
|
79
|
+
}
|
|
80
|
+
&--justify-space-between {
|
|
81
|
+
justify-content: space-between;
|
|
82
|
+
}
|
|
83
|
+
&--justify-space-around {
|
|
84
|
+
justify-content: space-around;
|
|
85
|
+
}
|
|
86
|
+
&--justify-stretch {
|
|
87
|
+
justify-content: stretch;
|
|
88
|
+
> * {
|
|
89
|
+
min-width: min-content;
|
|
90
|
+
flex-grow: 1;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
&--justify-equal-size {
|
|
94
|
+
> * {
|
|
95
|
+
flex: 1;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@each $size, $size-value in $sizes {
|
|
100
|
+
&--#{$size} {
|
|
101
|
+
gap: $size-value;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@include breakpoint-tablet {
|
|
106
|
+
@each $size, $size-value in $sizes {
|
|
107
|
+
&--tablet-#{$size} {
|
|
108
|
+
gap: $size-value;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&--line-tablet {
|
|
113
|
+
@include line;
|
|
114
|
+
}
|
|
115
|
+
&--align-tablet-start {
|
|
116
|
+
align-items: flex-start;
|
|
117
|
+
}
|
|
118
|
+
&--align-tablet-center {
|
|
119
|
+
align-items: center;
|
|
120
|
+
}
|
|
121
|
+
&--align-tablet-end {
|
|
122
|
+
align-items: flex-end;
|
|
123
|
+
}
|
|
124
|
+
&--align-tablet-stretch {
|
|
125
|
+
align-items: stretch;
|
|
126
|
+
}
|
|
127
|
+
&--align-tablet-baseline {
|
|
128
|
+
align-items: baseline;
|
|
129
|
+
}
|
|
130
|
+
&--justify-tablet-start {
|
|
131
|
+
justify-content: flex-start;
|
|
132
|
+
}
|
|
133
|
+
&--justify-tablet-center {
|
|
134
|
+
justify-content: center;
|
|
135
|
+
}
|
|
136
|
+
&--justify-tablet-end {
|
|
137
|
+
justify-content: flex-end;
|
|
138
|
+
}
|
|
139
|
+
&--justify-tablet-space-between {
|
|
140
|
+
justify-content: space-between;
|
|
141
|
+
}
|
|
142
|
+
&--justify-tablet-space-around {
|
|
143
|
+
justify-content: space-around;
|
|
144
|
+
}
|
|
145
|
+
&--justify-tablet-stretch {
|
|
146
|
+
justify-content: stretch;
|
|
147
|
+
}
|
|
148
|
+
&--justify-tablet-equal-size {
|
|
149
|
+
> * {
|
|
150
|
+
flex: 1;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@include breakpoint-desktop {
|
|
155
|
+
@each $size, $size-value in $sizes {
|
|
156
|
+
&--desktop-#{$size} {
|
|
157
|
+
gap: $size-value;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&--line-desktop {
|
|
162
|
+
@include line;
|
|
163
|
+
}
|
|
164
|
+
&--align-desktop-start {
|
|
165
|
+
align-items: flex-start;
|
|
166
|
+
}
|
|
167
|
+
&--align-desktop-center {
|
|
168
|
+
align-items: center;
|
|
169
|
+
}
|
|
170
|
+
&--align-desktop-end {
|
|
171
|
+
align-items: flex-end;
|
|
172
|
+
}
|
|
173
|
+
&--align-desktop-stretch {
|
|
174
|
+
align-items: stretch;
|
|
175
|
+
}
|
|
176
|
+
&--align-desktop-baseline {
|
|
177
|
+
align-items: baseline;
|
|
178
|
+
}
|
|
179
|
+
&--justify-desktop-start {
|
|
180
|
+
justify-content: flex-start;
|
|
181
|
+
}
|
|
182
|
+
&--justify-desktop-center {
|
|
183
|
+
justify-content: center;
|
|
184
|
+
}
|
|
185
|
+
&--justify-desktop-end {
|
|
186
|
+
justify-content: flex-end;
|
|
187
|
+
}
|
|
188
|
+
&--justify-desktop-space-between {
|
|
189
|
+
justify-content: space-between;
|
|
190
|
+
}
|
|
191
|
+
&--justify-desktop-space-around {
|
|
192
|
+
justify-content: space-around;
|
|
193
|
+
}
|
|
194
|
+
&--justify-desktop-stretch {
|
|
195
|
+
justify-content: stretch;
|
|
196
|
+
}
|
|
197
|
+
&--justify-desktop-equal-size {
|
|
198
|
+
> * {
|
|
199
|
+
flex: 1;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
@include breakpoint-widescreen {
|
|
204
|
+
@each $size, $size-value in $sizes {
|
|
205
|
+
&--widescreen-#{$size} {
|
|
206
|
+
gap: $size-value;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&--line-widescreen {
|
|
211
|
+
@include line;
|
|
212
|
+
}
|
|
213
|
+
&--align-widescreen-start {
|
|
214
|
+
align-items: flex-start;
|
|
215
|
+
}
|
|
216
|
+
&--align-widescreen-center {
|
|
217
|
+
align-items: center;
|
|
218
|
+
}
|
|
219
|
+
&--align-widescreen-end {
|
|
220
|
+
align-items: flex-end;
|
|
221
|
+
}
|
|
222
|
+
&--align-widescreen-stretch {
|
|
223
|
+
align-items: stretch;
|
|
224
|
+
}
|
|
225
|
+
&--align-widescreen-baseline {
|
|
226
|
+
align-items: baseline;
|
|
227
|
+
}
|
|
228
|
+
&--justify-widescreen-start {
|
|
229
|
+
justify-content: flex-start;
|
|
230
|
+
}
|
|
231
|
+
&--justify-widescreen-center {
|
|
232
|
+
justify-content: center;
|
|
233
|
+
}
|
|
234
|
+
&--justify-widescreen-end {
|
|
235
|
+
justify-content: flex-end;
|
|
236
|
+
}
|
|
237
|
+
&--justify-widescreen-space-between {
|
|
238
|
+
justify-content: space-between;
|
|
239
|
+
}
|
|
240
|
+
&--justify-widescreen-space-around {
|
|
241
|
+
justify-content: space-around;
|
|
242
|
+
}
|
|
243
|
+
&--justify-widescreen-stretch {
|
|
244
|
+
justify-content: stretch;
|
|
245
|
+
}
|
|
246
|
+
&--justify-widescreen-equal-size {
|
|
247
|
+
> * {
|
|
248
|
+
flex: 1;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
import "./stack.scss";
|
|
4
|
+
|
|
5
|
+
type Justify =
|
|
6
|
+
| "start"
|
|
7
|
+
| "center"
|
|
8
|
+
| "end"
|
|
9
|
+
| "space-between"
|
|
10
|
+
| "space-around"
|
|
11
|
+
| "stretch"
|
|
12
|
+
| "equal-size";
|
|
13
|
+
type Align = "start" | "center" | "end" | "stretch" | "baseline";
|
|
14
|
+
|
|
15
|
+
export interface Props {
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
gap?: number;
|
|
18
|
+
gapTablet?: number;
|
|
19
|
+
gapDesktop?: number;
|
|
20
|
+
gapWidescreen?: number;
|
|
21
|
+
line?: boolean;
|
|
22
|
+
lineTablet?: boolean;
|
|
23
|
+
lineDesktop?: boolean;
|
|
24
|
+
lineWidescreen?: boolean;
|
|
25
|
+
align?: Align;
|
|
26
|
+
alignTablet?: Align;
|
|
27
|
+
alignDesktop?: Align;
|
|
28
|
+
alignWidescreen?: Align;
|
|
29
|
+
justify?: Justify;
|
|
30
|
+
justifyTablet?: Justify;
|
|
31
|
+
justifyDesktop?: Justify;
|
|
32
|
+
justifyWidescreen?: Justify;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export function Stack({
|
|
36
|
+
children,
|
|
37
|
+
gap = 8,
|
|
38
|
+
gapTablet,
|
|
39
|
+
gapDesktop,
|
|
40
|
+
gapWidescreen,
|
|
41
|
+
line,
|
|
42
|
+
lineTablet,
|
|
43
|
+
lineDesktop,
|
|
44
|
+
lineWidescreen,
|
|
45
|
+
align,
|
|
46
|
+
alignTablet,
|
|
47
|
+
alignDesktop,
|
|
48
|
+
alignWidescreen,
|
|
49
|
+
justify,
|
|
50
|
+
justifyTablet,
|
|
51
|
+
justifyDesktop,
|
|
52
|
+
justifyWidescreen,
|
|
53
|
+
}: Props): JSX.Element {
|
|
54
|
+
return (
|
|
55
|
+
<div
|
|
56
|
+
className={classnames(
|
|
57
|
+
"stack",
|
|
58
|
+
gap && `stack--${gap}`,
|
|
59
|
+
gapTablet && `stack--tablet-${gapTablet}`,
|
|
60
|
+
gapDesktop && `stack--desktop-${gapDesktop}`,
|
|
61
|
+
gapWidescreen && `stack--widescreen-${gapWidescreen}`,
|
|
62
|
+
align && `stack--align-${align}`,
|
|
63
|
+
alignTablet && `stack--align-tablet-${alignTablet}`,
|
|
64
|
+
alignDesktop && `stack--align-desktop-${alignDesktop}`,
|
|
65
|
+
alignWidescreen && `stack--align-widescreen-${alignWidescreen}`,
|
|
66
|
+
justify && `stack--justify-${justify}`,
|
|
67
|
+
justifyTablet && `stack--justify-tablet-${justifyTablet}`,
|
|
68
|
+
justifyDesktop && `stack--justify-desktop-${justifyDesktop}`,
|
|
69
|
+
justifyWidescreen && `stack--justify-widescreen-${justifyWidescreen}`,
|
|
70
|
+
{
|
|
71
|
+
"stack--line": line,
|
|
72
|
+
"stack--line-tablet": lineTablet,
|
|
73
|
+
"stack--line-desktop": lineDesktop,
|
|
74
|
+
"stack--line-widescreen": lineWidescreen,
|
|
75
|
+
}
|
|
76
|
+
)}
|
|
77
|
+
>
|
|
78
|
+
{children}
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
}
|
data/stack.png
ADDED
|
Binary file
|
data/tsconfig.json
CHANGED
|
@@ -21,8 +21,9 @@
|
|
|
21
21
|
"suppressImplicitAnyIndexErrors": true,
|
|
22
22
|
"target": "es6",
|
|
23
23
|
"isolatedModules": true,
|
|
24
|
-
"declaration": true
|
|
24
|
+
"declaration": true,
|
|
25
|
+
"jsx": "react"
|
|
25
26
|
},
|
|
26
27
|
"exclude": ["node_modules", "dist"],
|
|
27
|
-
"files": ["src/index.ts"]
|
|
28
|
+
"files": ["src/index.ts", "src/components/stack.tsx"]
|
|
28
29
|
}
|