react-justified-layout-ts 1.1.17 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/TSJustifiedLayout.d.ts +3 -2
  2. package/dist/components/TSJustifiedLayout.js +8 -26
  3. package/dist/stories/JustifiedLayout.stories.js +130 -100
  4. package/package.json +1 -1
  5. package/src/components/TSJustifiedLayout.tsx +16 -12
  6. package/src/stories/JustifiedLayout.stories.tsx +137 -105
package/dist/components/TSJustifiedLayout.d.ts CHANGED
@@ -8,8 +8,9 @@ export interface TSJustifiedLayoutProps {
8
8
  targetRowHeight?: number;
9
9
  targetRowHeightTolerance?: number;
10
10
  width: number;
11
- children: any[];
11
+ children: React.JSX.Element[];
12
12
  showWidows?: boolean;
13
+ containerStyle?: React.CSSProperties;
13
14
  }
14
- declare function TSJustifiedLayout({ children, layoutItems, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width }: TSJustifiedLayoutProps): React.JSX.Element;
15
+ declare function TSJustifiedLayout({ children, layoutItems, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width, containerStyle }: TSJustifiedLayoutProps): React.JSX.Element;
15
16
  export { TSJustifiedLayout };
package/dist/components/TSJustifiedLayout.js CHANGED
@@ -1,32 +1,12 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
24
4
  };
25
5
  Object.defineProperty(exports, "__esModule", { value: true });
26
6
  exports.TSJustifiedLayout = void 0;
27
- const react_1 = __importStar(require("react"));
7
+ const react_1 = __importDefault(require("react"));
28
8
  require("./layout.css");
29
- function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width }) {
9
+ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width, containerStyle }) {
30
10
  const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
31
11
  const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
32
12
  const rows = [];
@@ -78,7 +58,9 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
78
58
  rowBuffer = [];
79
59
  }
80
60
  }
81
- layoutItems.forEach((value) => addItem(value));
61
+ layoutItems.forEach((value) => {
62
+ addItem(value);
63
+ });
82
64
  // Handle leftover content
83
65
  if (showWidows && rowBuffer.length !== 0) {
84
66
  rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows[rows.length - 1].height });
@@ -89,7 +71,7 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
89
71
  */
90
72
  function renderRow(aspectRatio, isLastRow) {
91
73
  childNodeCounter++;
92
- return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, children[childNodeCounter].props.style), { aspectRatio: aspectRatio }), (isLastRow ? {} : { flex: aspectRatio })), { maxHeight: '100%' }) }));
74
+ return react_1.default.createElement("div", { style: Object.assign(Object.assign({ maxHeight: '100%', aspectRatio: aspectRatio }, (isLastRow ? {} : { flex: aspectRatio })), containerStyle) }, children[childNodeCounter]);
93
75
  }
94
76
  return (react_1.default.createElement("div", { style: { width: "100%" } }, rows.map((value, index, array) => {
95
77
  let isLastRow = index === array.length - 1 && showWidows;
package/dist/stories/JustifiedLayout.stories.js CHANGED
@@ -13,33 +13,41 @@ const meta = {
13
13
  exports.default = meta;
14
14
  const displayedImages = [
15
15
  {
16
- "title": "Castor Evolved",
17
- "artist": "@TOOMIRO",
16
+ "title": "Outfit Sheet",
17
+ "artist": "@godbirdart",
18
18
  "tags": [
19
- "Castor",
19
+ "Vernal",
20
+ "Serotinal Circuitboard",
21
+ "Estival Checker",
22
+ "Autumnal Wavesniper",
23
+ "Hibernal Assassin",
24
+ "Rastaban Form",
25
+ "Knives",
26
+ "Techwear",
27
+ "Hoodie",
28
+ "Bodysuit",
20
29
  "Featured"
21
30
  ],
22
- "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
23
- "published": "2024-01-22",
24
- "aspectRatio": 1.48,
25
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
26
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
27
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
31
+ "href": "https://x.com/FaintAlcor/status/1785179761309839456",
32
+ "published": "2024-04-30",
33
+ "aspectRatio": 2.35,
34
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/outfit_sheet.webp",
35
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/outfit_sheet.webp",
36
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/outfit_sheet.PNG"
28
37
  },
29
38
  {
30
- "title": "Techwear Ninja v2",
31
- "artist": "@edadrz",
39
+ "title": "Quick-Draw Stance",
40
+ "artist": "@RSN_07",
32
41
  "tags": [
33
- "Rastaban Form",
34
- "Techwear",
35
- "Hibernal Assassin"
42
+ "Aquarius Form",
43
+ "Featured"
36
44
  ],
37
- "href": "https://x.com/edadrz2/status/1750189393833517203?s=20",
38
- "published": "2024-01-24",
39
- "aspectRatio": 0.7857142857142857,
40
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/techwear_ninja_v2.webp",
41
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/techwear_ninja_v2.png",
42
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/techwear_ninja_v2.png"
45
+ "href": "https://x.com/RSN_07/status/1775664237119217719?s=20",
46
+ "published": "2024-04-03",
47
+ "aspectRatio": 0.6328963051251489,
48
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/quick_draw_stance.webp",
49
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/quick_draw_stance.webp",
50
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/quick_draw_stance.PNG"
43
51
  },
44
52
  {
45
53
  "title": "Glimmer on the Shore",
@@ -56,118 +64,139 @@ const displayedImages = [
56
64
  "src": "https://alcorsiteartbucket.s3.amazonaws.com/glimmer_on_the_shore.png"
57
65
  },
58
66
  {
59
- "title": "Farmer Sketch",
60
- "artist": "@KuroPenguinEx",
67
+ "title": "Castor Evolved",
68
+ "artist": "@TOOMIRO",
61
69
  "tags": [
62
- "Aquarius Form"
70
+ "Castor",
71
+ "Featured"
63
72
  ],
64
- "href": "https://x.com/FaintAlcor/status/1751444972904063414?s=20",
65
- "published": "2024-01-27",
66
- "aspectRatio": 0.7069555302166477,
67
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch.webp",
68
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch.webp%7D",
69
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch.png"
73
+ "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
74
+ "published": "2024-01-22",
75
+ "aspectRatio": 1.48,
76
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
77
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
78
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
70
79
  },
71
80
  {
72
- "parent": "Farmer Sketch",
81
+ "title": "Happy 24th Birthday!",
82
+ "artist": "@DrawingDDoom",
73
83
  "tags": [
74
- "Aquarius Form"
84
+ "Aldhibah Form",
85
+ "Techwear",
86
+ "Castor",
87
+ "Featured"
75
88
  ],
76
- "href": "",
77
- "aspectRatio": 0.7069555302166477,
78
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch/0.webp",
79
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch/0.webp",
80
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch/0.png"
89
+ "href": "https://x.com/DrawingDDoom/status/1715601315492245545?s=20",
90
+ "published": "2023-10-21",
91
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/happy_24_th_birthday.webp",
92
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/happy_24_th_birthday.png",
93
+ "aspectRatio": 0.6097560975609756,
94
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/happy_24_th_birthday.webp"
81
95
  },
82
96
  {
83
- "title": "My Room",
84
- "artist": "@ito_44_3",
97
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/combat_ready_duo.png",
98
+ "title": "Combat Ready Duo",
99
+ "artist": "@illusummer",
85
100
  "tags": [
86
- "Thuban Form"
101
+ "Rastaban Form",
102
+ "Techwear",
103
+ "Featured"
87
104
  ],
88
- "href": "https://x.com/ito_44_3/status/1759850276633419776?s=20",
89
- "published": "2024-02-02",
90
- "aspectRatio": 1.4166666666666667,
91
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/my_room.webp",
92
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/my_room.webp",
93
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/my_room.png"
105
+ "href": "https://skeb.jp/@arcielsummer/works/33",
106
+ "published": "2023-05-05",
107
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/combat_ready_duo.webp",
108
+ "aspectRatio": 1.7777777777777777,
109
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/combat_ready_duo.webp"
94
110
  },
95
111
  {
96
- "title": "Triangulum Combat Suit",
97
- "artist": "@neumokun",
112
+ "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
113
+ "title": "Special Archery Training!",
114
+ "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
98
115
  "tags": [
99
- "Triangulum Form"
116
+ "Superhero",
117
+ "Indra Suit",
118
+ "Bow",
119
+ "Bodysuit",
120
+ "Thuban Form",
121
+ "Featured"
100
122
  ],
101
- "href": "https://bsky.app/profile/neumokun.bsky.social/post/3klncrgkl5z24",
102
- "published": "2024-02-17",
103
- "aspectRatio": 0.7501875468867217,
104
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/triangulum_combat_suit.webp",
105
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/triangulum_combat_suit.webp",
106
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/triangulum_combat_suit.png"
123
+ "artist": "@Yamainu_ken",
124
+ "published": "2023-01-22",
125
+ "aspectRatio": 1.5442260442260443
107
126
  },
108
127
  {
128
+ "title": "Evening Train",
129
+ "artist": "@greyy_arts",
109
130
  "tags": [
110
- "Eclipse Deity"
131
+ "Estival Checker",
132
+ "Rastaban Form",
133
+ "Hoodie",
134
+ "Featured"
111
135
  ],
112
- "href": "",
113
- "aspectRatio": 0.8243310619910255,
114
- "parent": "Eclipse Deity v3",
115
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/eclipse_deity_v3/0.webp",
116
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/eclipse_deity_v3/0.webp",
117
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/eclipse_deity_v3/0.png"
136
+ "href": "https://twitter.com/greyy_arts/status/1613748293531758593",
137
+ "published": "2023-01-12",
138
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/evening_train.webp",
139
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/evening_train.png",
140
+ "aspectRatio": 0.8203125,
141
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/evening_train.webp"
118
142
  },
119
143
  {
120
- "title": "Biogenesis Suit Design",
121
- "artist": "@EmberWickArt",
144
+ "src": "https://pbs.twimg.com/media/Fj2qZYRVEAAVyRC?format=jpg&name=large",
145
+ "title": "AICore Relaxing",
146
+ "href": "https://twitter.com/KuroPenguinEx/status/1602624683211227136/photo/1",
147
+ "artist": "@KuroPenguinEx",
122
148
  "tags": [
123
- "Superhero",
124
- "Bodysuit"
149
+ "AICore Form",
150
+ "Thuban Form",
151
+ "Featured"
125
152
  ],
126
- "href": "https://x.com/EmberWickArt/status/1795127025331577256",
127
- "published": "2024-05-27",
128
- "aspectRatio": 1.0115606936416186,
129
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/biogenesis_suit_design.webp",
130
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/biogenesis_suit_design.webp",
131
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/biogenesis_suit_design.png"
153
+ "published": "2022-12-13",
154
+ "aspectRatio": 1.3333333333333333
132
155
  },
133
156
  {
134
- "title": "Alan and Alcor",
135
- "artist": "@kongzorim",
157
+ "title": "Sci-fi Mode: ON",
158
+ "href": "https://twitter.com/AxyUsagi/status/1543041029674344448?s=20&t=tlXwc5aegdXuQeLhgdUw-Q",
159
+ "artist": "@AxyUsagi",
160
+ "src": "https://pbs.twimg.com/media/FWn7dJ9XkAIHM5j?format=jpg&name=medium",
136
161
  "tags": [
137
- "Aldhibah Form",
138
- "Rastaban Form",
139
- "Standard Outfit"
162
+ "Thuban Form",
163
+ "Knives",
164
+ "Hoodie",
165
+ "Techwear",
166
+ "Bodysuit",
167
+ "Featured"
140
168
  ],
141
- "href": "https://x.com/kongzorim/status/1795818089080385818",
142
- "published": "2024-05-29",
143
- "aspectRatio": 0.7056150600454398,
144
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/alan_and_alcor.webp",
145
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alan_and_alcor.webp",
146
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/alan_and_alcor.png"
169
+ "published": "2022-07-01",
170
+ "aspectRatio": 0.9166666666666666
147
171
  },
148
172
  {
173
+ "title": "Lance Hero",
174
+ "href": "https://twitter.com/eb_kemo/status/1521991097098305536?s=20&t=8fG0sc10hW-oJEyn8HzT3w",
175
+ "src": "https://pbs.twimg.com/media/FR8y1bnakAA0Pol?format=jpg&name=large",
176
+ "artist": "@eb_erh",
149
177
  "tags": [
150
- ""
178
+ "Rastaban Form",
179
+ "Gungrir Suit",
180
+ "Lances",
181
+ "Superhero",
182
+ "Featured"
151
183
  ],
152
- "href": "",
153
- "aspectRatio": 1.7777777777777777,
154
- "parent": "Proud Summer Beach YCH",
155
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/proud_summer_beach_ych/0.webp",
156
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/proud_summer_beach_ych/0.webp",
157
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/proud_summer_beach_ych/0.png"
184
+ "published": "2022-05-04",
185
+ "aspectRatio": 0.85107421875
158
186
  },
159
187
  {
160
- "title": "Soma's Spring Outfit",
161
- "artist": "@kaerukbin",
188
+ "title": "The Beginning",
189
+ "href": "https://twitter.com/Mike202112/status/1406146656660197379?s=20",
190
+ "src": "https://pbs.twimg.com/media/E4Oi2GKVcAIQKzo?format=png&name=900x900",
191
+ "artist": "@Mike202112",
162
192
  "tags": [
163
- "Soma"
193
+ "Rastaban Form",
194
+ "Knives",
195
+ "Standard Outfit",
196
+ "Featured"
164
197
  ],
165
- "href": "https://skeb.jp/@kaerukbin/works/4",
166
- "published": "2024-05-31",
167
- "aspectRatio": 0.763189448441247,
168
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/soma_s_spring_outfit.webp",
169
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/soma_s_spring_outfit.webp",
170
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/soma_s_spring_outfit.png"
198
+ "published": "2021-06-19",
199
+ "aspectRatio": 0.7084745762711865
171
200
  }
172
201
  ];
173
202
  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
@@ -181,9 +210,10 @@ exports.Primary = {
181
210
  itemSpacing: undefined,
182
211
  layoutItems: displayedImages.map(value => value.aspectRatio),
183
212
  targetRowHeightTolerance: undefined,
184
- children: displayedImages.map(value => react_1.default.createElement("div", { style: { position: "relative" } },
213
+ children: displayedImages.map(value => react_1.default.createElement(react_1.default.Fragment, null,
185
214
  react_1.default.createElement("div", { style: { top: 16, left: 16, position: "absolute" } }, "Testing"),
186
- react_1.default.createElement("img", { src: value.webp })))
215
+ react_1.default.createElement("img", { src: value.webp }))),
216
+ containerStyle: { position: 'relative' }
187
217
  },
188
218
  };
189
219
  exports.Secondary = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-justified-layout-ts",
3
- "version": "1.1.17",
3
+ "version": "2.0.1",
4
4
  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/components/TSJustifiedLayout.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, {cloneElement} from "react";
1
+ import React from "react";
2
2
  import './layout.css'
3
3
 
4
4
  type ElementDimensions = number;
@@ -10,8 +10,9 @@ export interface TSJustifiedLayoutProps {
10
10
  targetRowHeight?: number;
11
11
  targetRowHeightTolerance?: number;
12
12
  width: number;
13
- children: any[];
13
+ children: React.JSX.Element[];
14
14
  showWidows?: boolean;
15
+ containerStyle?: React.CSSProperties;
15
16
  // TODO Implement these
16
17
  // maxNumRows?: number;
17
18
  // fullWidthBreakoutRowCadence?: number
@@ -26,7 +27,8 @@ function TSJustifiedLayout({
26
27
  showWidows = true,
27
28
  targetRowHeight = 320,
28
29
  targetRowHeightTolerance = .25,
29
- width
30
+ width,
31
+ containerStyle
30
32
  }: TSJustifiedLayoutProps) {
31
33
  const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
32
34
  const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
@@ -81,7 +83,9 @@ function TSJustifiedLayout({
81
83
  }
82
84
 
83
85
 
84
- layoutItems.forEach((value) => addItem(value))
86
+ layoutItems.forEach((value) => {
87
+ addItem(value);
88
+ })
85
89
 
86
90
  // Handle leftover content
87
91
  if (showWidows && rowBuffer.length !== 0) {
@@ -95,14 +99,14 @@ function TSJustifiedLayout({
95
99
  */
96
100
  function renderRow(aspectRatio: ElementDimensions, isLastRow: boolean) {
97
101
  childNodeCounter++;
98
- return cloneElement(children[childNodeCounter], {
99
- ...children[childNodeCounter].props, style: {
100
- ...children[childNodeCounter].props.style,
101
- aspectRatio: aspectRatio,
102
- ...(isLastRow ? {} : {flex: aspectRatio}),
103
- maxHeight: '100%'
104
- }
105
- })
102
+ return <div style={{
103
+ maxHeight: '100%',
104
+ aspectRatio: aspectRatio,
105
+ ...(isLastRow ? {} : {flex: aspectRatio}),
106
+ ...containerStyle
107
+ }}>
108
+ {children[childNodeCounter]}
109
+ </div>
106
110
  }
107
111
 
108
112
  return (
package/src/stories/JustifiedLayout.stories.tsx CHANGED
@@ -12,33 +12,41 @@ type Story = StoryObj<typeof meta>;
12
12
 
13
13
  const displayedImages = [
14
14
  {
15
- "title": "Castor Evolved",
16
- "artist": "@TOOMIRO",
15
+ "title": "Outfit Sheet",
16
+ "artist": "@godbirdart",
17
17
  "tags": [
18
- "Castor",
18
+ "Vernal",
19
+ "Serotinal Circuitboard",
20
+ "Estival Checker",
21
+ "Autumnal Wavesniper",
22
+ "Hibernal Assassin",
23
+ "Rastaban Form",
24
+ "Knives",
25
+ "Techwear",
26
+ "Hoodie",
27
+ "Bodysuit",
19
28
  "Featured"
20
29
  ],
21
- "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
22
- "published": "2024-01-22",
23
- "aspectRatio": 1.48,
24
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
25
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
26
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
30
+ "href": "https://x.com/FaintAlcor/status/1785179761309839456",
31
+ "published": "2024-04-30",
32
+ "aspectRatio": 2.35,
33
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/outfit_sheet.webp",
34
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/outfit_sheet.webp",
35
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/outfit_sheet.PNG"
27
36
  },
28
37
  {
29
- "title": "Techwear Ninja v2",
30
- "artist": "@edadrz",
38
+ "title": "Quick-Draw Stance",
39
+ "artist": "@RSN_07",
31
40
  "tags": [
32
- "Rastaban Form",
33
- "Techwear",
34
- "Hibernal Assassin"
41
+ "Aquarius Form",
42
+ "Featured"
35
43
  ],
36
- "href": "https://x.com/edadrz2/status/1750189393833517203?s=20",
37
- "published": "2024-01-24",
38
- "aspectRatio": 0.7857142857142857,
39
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/techwear_ninja_v2.webp",
40
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/techwear_ninja_v2.png",
41
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/techwear_ninja_v2.png"
44
+ "href": "https://x.com/RSN_07/status/1775664237119217719?s=20",
45
+ "published": "2024-04-03",
46
+ "aspectRatio": 0.6328963051251489,
47
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/quick_draw_stance.webp",
48
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/quick_draw_stance.webp",
49
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/quick_draw_stance.PNG"
42
50
  },
43
51
  {
44
52
  "title": "Glimmer on the Shore",
@@ -55,118 +63,139 @@ const displayedImages = [
55
63
  "src": "https://alcorsiteartbucket.s3.amazonaws.com/glimmer_on_the_shore.png"
56
64
  },
57
65
  {
58
- "title": "Farmer Sketch",
59
- "artist": "@KuroPenguinEx",
66
+ "title": "Castor Evolved",
67
+ "artist": "@TOOMIRO",
60
68
  "tags": [
61
- "Aquarius Form"
69
+ "Castor",
70
+ "Featured"
62
71
  ],
63
- "href": "https://x.com/FaintAlcor/status/1751444972904063414?s=20",
64
- "published": "2024-01-27",
65
- "aspectRatio": 0.7069555302166477,
66
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch.webp",
67
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch.webp%7D",
68
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch.png"
72
+ "href": "https://x.com/FaintAlcor/status/1749579348045111636?s=20",
73
+ "published": "2024-01-22",
74
+ "aspectRatio": 1.48,
75
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/castor_evolved.webp",
76
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/castor_evolved.png",
77
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/castor_evolved.png"
69
78
  },
70
79
  {
71
- "parent": "Farmer Sketch",
80
+ "title": "Happy 24th Birthday!",
81
+ "artist": "@DrawingDDoom",
72
82
  "tags": [
73
- "Aquarius Form"
83
+ "Aldhibah Form",
84
+ "Techwear",
85
+ "Castor",
86
+ "Featured"
74
87
  ],
75
- "href": "",
76
- "aspectRatio": 0.7069555302166477,
77
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/farmer_sketch/0.webp",
78
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/farmer_sketch/0.webp",
79
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/farmer_sketch/0.png"
88
+ "href": "https://x.com/DrawingDDoom/status/1715601315492245545?s=20",
89
+ "published": "2023-10-21",
90
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/happy_24_th_birthday.webp",
91
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/happy_24_th_birthday.png",
92
+ "aspectRatio": 0.6097560975609756,
93
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/happy_24_th_birthday.webp"
80
94
  },
81
95
  {
82
- "title": "My Room",
83
- "artist": "@ito_44_3",
96
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/combat_ready_duo.png",
97
+ "title": "Combat Ready Duo",
98
+ "artist": "@illusummer",
84
99
  "tags": [
85
- "Thuban Form"
100
+ "Rastaban Form",
101
+ "Techwear",
102
+ "Featured"
86
103
  ],
87
- "href": "https://x.com/ito_44_3/status/1759850276633419776?s=20",
88
- "published": "2024-02-02",
89
- "aspectRatio": 1.4166666666666667,
90
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/my_room.webp",
91
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/my_room.webp",
92
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/my_room.png"
104
+ "href": "https://skeb.jp/@arcielsummer/works/33",
105
+ "published": "2023-05-05",
106
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/combat_ready_duo.webp",
107
+ "aspectRatio": 1.7777777777777777,
108
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/combat_ready_duo.webp"
93
109
  },
94
110
  {
95
- "title": "Triangulum Combat Suit",
96
- "artist": "@neumokun",
111
+ "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
112
+ "title": "Special Archery Training!",
113
+ "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
97
114
  "tags": [
98
- "Triangulum Form"
115
+ "Superhero",
116
+ "Indra Suit",
117
+ "Bow",
118
+ "Bodysuit",
119
+ "Thuban Form",
120
+ "Featured"
99
121
  ],
100
- "href": "https://bsky.app/profile/neumokun.bsky.social/post/3klncrgkl5z24",
101
- "published": "2024-02-17",
102
- "aspectRatio": 0.7501875468867217,
103
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/triangulum_combat_suit.webp",
104
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/triangulum_combat_suit.webp",
105
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/triangulum_combat_suit.png"
122
+ "artist": "@Yamainu_ken",
123
+ "published": "2023-01-22",
124
+ "aspectRatio": 1.5442260442260443
106
125
  },
107
126
  {
127
+ "title": "Evening Train",
128
+ "artist": "@greyy_arts",
108
129
  "tags": [
109
- "Eclipse Deity"
130
+ "Estival Checker",
131
+ "Rastaban Form",
132
+ "Hoodie",
133
+ "Featured"
110
134
  ],
111
- "href": "",
112
- "aspectRatio": 0.8243310619910255,
113
- "parent": "Eclipse Deity v3",
114
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/eclipse_deity_v3/0.webp",
115
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/eclipse_deity_v3/0.webp",
116
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/eclipse_deity_v3/0.png"
135
+ "href": "https://twitter.com/greyy_arts/status/1613748293531758593",
136
+ "published": "2023-01-12",
137
+ "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/evening_train.webp",
138
+ "src": "https://alcorsiteartbucket.s3.amazonaws.com/evening_train.png",
139
+ "aspectRatio": 0.8203125,
140
+ "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/evening_train.webp"
117
141
  },
118
142
  {
119
- "title": "Biogenesis Suit Design",
120
- "artist": "@EmberWickArt",
143
+ "src": "https://pbs.twimg.com/media/Fj2qZYRVEAAVyRC?format=jpg&name=large",
144
+ "title": "AICore Relaxing",
145
+ "href": "https://twitter.com/KuroPenguinEx/status/1602624683211227136/photo/1",
146
+ "artist": "@KuroPenguinEx",
121
147
  "tags": [
122
- "Superhero",
123
- "Bodysuit"
148
+ "AICore Form",
149
+ "Thuban Form",
150
+ "Featured"
124
151
  ],
125
- "href": "https://x.com/EmberWickArt/status/1795127025331577256",
126
- "published": "2024-05-27",
127
- "aspectRatio": 1.0115606936416186,
128
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/biogenesis_suit_design.webp",
129
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/biogenesis_suit_design.webp",
130
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/biogenesis_suit_design.png"
152
+ "published": "2022-12-13",
153
+ "aspectRatio": 1.3333333333333333
131
154
  },
132
155
  {
133
- "title": "Alan and Alcor",
134
- "artist": "@kongzorim",
156
+ "title": "Sci-fi Mode: ON",
157
+ "href": "https://twitter.com/AxyUsagi/status/1543041029674344448?s=20&t=tlXwc5aegdXuQeLhgdUw-Q",
158
+ "artist": "@AxyUsagi",
159
+ "src": "https://pbs.twimg.com/media/FWn7dJ9XkAIHM5j?format=jpg&name=medium",
135
160
  "tags": [
136
- "Aldhibah Form",
137
- "Rastaban Form",
138
- "Standard Outfit"
161
+ "Thuban Form",
162
+ "Knives",
163
+ "Hoodie",
164
+ "Techwear",
165
+ "Bodysuit",
166
+ "Featured"
139
167
  ],
140
- "href": "https://x.com/kongzorim/status/1795818089080385818",
141
- "published": "2024-05-29",
142
- "aspectRatio": 0.7056150600454398,
143
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/alan_and_alcor.webp",
144
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alan_and_alcor.webp",
145
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/alan_and_alcor.png"
168
+ "published": "2022-07-01",
169
+ "aspectRatio": 0.9166666666666666
146
170
  },
147
171
  {
172
+ "title": "Lance Hero",
173
+ "href": "https://twitter.com/eb_kemo/status/1521991097098305536?s=20&t=8fG0sc10hW-oJEyn8HzT3w",
174
+ "src": "https://pbs.twimg.com/media/FR8y1bnakAA0Pol?format=jpg&name=large",
175
+ "artist": "@eb_erh",
148
176
  "tags": [
149
- ""
177
+ "Rastaban Form",
178
+ "Gungrir Suit",
179
+ "Lances",
180
+ "Superhero",
181
+ "Featured"
150
182
  ],
151
- "href": "",
152
- "aspectRatio": 1.7777777777777777,
153
- "parent": "Proud Summer Beach YCH",
154
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/proud_summer_beach_ych/0.webp",
155
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/proud_summer_beach_ych/0.webp",
156
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/proud_summer_beach_ych/0.png"
183
+ "published": "2022-05-04",
184
+ "aspectRatio": 0.85107421875
157
185
  },
158
186
  {
159
- "title": "Soma's Spring Outfit",
160
- "artist": "@kaerukbin",
187
+ "title": "The Beginning",
188
+ "href": "https://twitter.com/Mike202112/status/1406146656660197379?s=20",
189
+ "src": "https://pbs.twimg.com/media/E4Oi2GKVcAIQKzo?format=png&name=900x900",
190
+ "artist": "@Mike202112",
161
191
  "tags": [
162
- "Soma"
192
+ "Rastaban Form",
193
+ "Knives",
194
+ "Standard Outfit",
195
+ "Featured"
163
196
  ],
164
- "href": "https://skeb.jp/@kaerukbin/works/4",
165
- "published": "2024-05-31",
166
- "aspectRatio": 0.763189448441247,
167
- "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/600h/soma_s_spring_outfit.webp",
168
- "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/soma_s_spring_outfit.webp",
169
- "src": "https://alcorsiteartbucket.s3.amazonaws.com/soma_s_spring_outfit.png"
197
+ "published": "2021-06-19",
198
+ "aspectRatio": 0.7084745762711865
170
199
  }
171
200
  ]
172
201
 
@@ -179,11 +208,14 @@ export const Primary: Story = {
179
208
  targetRowHeight: undefined,
180
209
  rowSpacing: undefined,
181
210
  itemSpacing: undefined,
182
- layoutItems: displayedImages.map(value => value.aspectRatio),
211
+ layoutItems: displayedImages.map(value => value.aspectRatio),
183
212
  targetRowHeightTolerance: undefined,
184
- children: displayedImages.map(value => <div style={{position: "relative"}}>
185
- <div style={{top: 16, left: 16, position: "absolute"}}>Testing</div>
186
- <img src={value.webp}/></div>)
213
+ children: displayedImages.map(value => <>
214
+ <div style={{top: 16, left: 16, position: "absolute"}}>Testing</div>
215
+ <img src={value.webp}/>
216
+ </>
217
+ ),
218
+ containerStyle: {position: 'relative'}
187
219
  },
188
220
  };
189
221
 
@@ -195,16 +227,16 @@ export const Secondary: Story = {
195
227
  targetRowHeight: undefined,
196
228
  rowSpacing: undefined,
197
229
  itemSpacing: undefined,
198
- layoutItems: displayedImages.slice(1,5).map(value => value.aspectRatio),
230
+ layoutItems: displayedImages.slice(1, 5).map(value => value.aspectRatio),
199
231
  targetRowHeightTolerance: undefined,
200
- children: displayedImages.slice(1, 5).map(value => <img src={value.webp} /> )
232
+ children: displayedImages.slice(1, 5).map(value => <img src={value.webp}/>)
201
233
  },
202
234
  }
203
235
 
204
236
  export const Single: Story = {
205
237
  name: "Single Elements",
206
238
  args: {
207
- children: [<img src={'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp'} />],
239
+ children: [<img src={'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp'}/>],
208
240
  width: 847,
209
241
  showWidows: true,
210
242
  targetRowHeight: undefined,