@coldsurf/ocean-road 1.16.0 → 1.16.1-alpha.2
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.
- package/dist/index.d.ts +87 -68
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +260 -182
- package/dist/index.js.map +1 -1
- package/dist/native.cjs.map +1 -1
- package/dist/native.d.cts +17 -17
- package/dist/native.d.cts.map +1 -1
- package/dist/native.d.ts +19 -19
- package/dist/native.d.ts.map +1 -1
- package/dist/native.js.map +1 -1
- package/dist/next.cjs +111 -33
- package/dist/next.cjs.map +1 -1
- package/dist/next.d.cts +4 -4
- package/dist/next.d.ts +4 -4
- package/dist/next.js +111 -33
- package/dist/next.js.map +1 -1
- package/package.json +17 -24
- package/src/extensions/index.ts +2 -0
- package/src/extensions/ticket-item/index.ts +1 -0
- package/src/extensions/ticket-item/ticket-item.tsx +151 -0
- package/tokens/css/color/variables-dark.css +1 -1
- package/tokens/css/color/variables-light.css +1 -1
- package/tokens/css/color/variables.css +1 -1
- package/tokens/css/typography/variables.css +1 -1
- package/tokens/js/color/variables-theme.d.ts +1 -1
- package/tokens/js/color/variables-theme.js +1 -1
- package/tokens/js/color/variables.d.ts +1 -1
- package/tokens/js/color/variables.js +1 -1
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"email": "imcoldsurf@gmail.com",
|
|
6
6
|
"url": "https://coldsurf.io"
|
|
7
7
|
},
|
|
8
|
-
"version": "1.16.
|
|
8
|
+
"version": "1.16.1-alpha.2",
|
|
9
9
|
"bugs": {
|
|
10
10
|
"url": "https://github.com/coldsurfers/ocean-road/issues"
|
|
11
11
|
},
|
|
@@ -33,14 +33,21 @@
|
|
|
33
33
|
"type": "module",
|
|
34
34
|
"module": "dist/index.js",
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
|
-
"files": [
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
|
|
36
|
+
"files": ["src", "next", "native", "dist", "package.json", "tokens"],
|
|
37
|
+
"scripts": {
|
|
38
|
+
"prebuild": "turbo run --filter=@coldsurfers/ocean-road-design-tokens build",
|
|
39
|
+
"build": "pnpm build:core",
|
|
40
|
+
"build:core": "tsdown",
|
|
41
|
+
"size": "node scripts/size-report.mjs",
|
|
42
|
+
"bench": "node scripts/benchmark.mjs",
|
|
43
|
+
"lint": "biome lint .",
|
|
44
|
+
"lint:fix": "biome lint --write .",
|
|
45
|
+
"format": "biome format .",
|
|
46
|
+
"format:fix": "biome format --write .",
|
|
47
|
+
"check": "biome check .",
|
|
48
|
+
"check:fix": "biome check --write .",
|
|
49
|
+
"check:type": "tsc --noEmit"
|
|
50
|
+
},
|
|
44
51
|
"dependencies": {
|
|
45
52
|
"@coldsurf/shared-utils": "1.1.16",
|
|
46
53
|
"ts-pattern": "5.8.0"
|
|
@@ -107,19 +114,5 @@
|
|
|
107
114
|
"publishConfig": {
|
|
108
115
|
"registry": "https://registry.npmjs.org/",
|
|
109
116
|
"access": "public"
|
|
110
|
-
},
|
|
111
|
-
"scripts": {
|
|
112
|
-
"prebuild": "turbo run --filter=@coldsurfers/ocean-road-design-tokens build",
|
|
113
|
-
"build": "pnpm build:core",
|
|
114
|
-
"build:core": "tsdown",
|
|
115
|
-
"size": "node scripts/size-report.mjs",
|
|
116
|
-
"bench": "node scripts/benchmark.mjs",
|
|
117
|
-
"lint": "biome lint .",
|
|
118
|
-
"lint:fix": "biome lint --write .",
|
|
119
|
-
"format": "biome format .",
|
|
120
|
-
"format:fix": "biome format --write .",
|
|
121
|
-
"check": "biome check .",
|
|
122
|
-
"check:fix": "biome check --write .",
|
|
123
|
-
"check:type": "tsc --noEmit"
|
|
124
117
|
}
|
|
125
|
-
}
|
|
118
|
+
}
|
package/src/extensions/index.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ticket-item';
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { Text } from '@/base';
|
|
4
|
+
import { colors, semantics } from '@/tokens';
|
|
5
|
+
import media from '@/utils/media';
|
|
6
|
+
import { dateUtils } from '@coldsurf/shared-utils';
|
|
7
|
+
import { css } from '@emotion/react';
|
|
8
|
+
import styled from '@emotion/styled';
|
|
9
|
+
import type { ReactNode } from 'react';
|
|
10
|
+
|
|
11
|
+
const Container = styled.div`
|
|
12
|
+
position: relative;
|
|
13
|
+
width: fit-content;
|
|
14
|
+
`;
|
|
15
|
+
|
|
16
|
+
const DefaultConcertThumbnail = styled.img`
|
|
17
|
+
width: 248px;
|
|
18
|
+
height: 248px;
|
|
19
|
+
border-radius: 12px;
|
|
20
|
+
object-fit: cover;
|
|
21
|
+
object-position: 50%;
|
|
22
|
+
background-color: ${semantics.color.background[2]};
|
|
23
|
+
|
|
24
|
+
${media.medium(css`
|
|
25
|
+
width: 180px;
|
|
26
|
+
height: 180px;
|
|
27
|
+
`)}
|
|
28
|
+
`;
|
|
29
|
+
|
|
30
|
+
const circleWidth = 36;
|
|
31
|
+
|
|
32
|
+
const ConcertThumbnailHalfCircle = styled.div<{ $inverted?: boolean }>`
|
|
33
|
+
position: absolute;
|
|
34
|
+
|
|
35
|
+
top: ${(props) => (props.$inverted ? 'unset' : `${circleWidth * 0.5}px`)};
|
|
36
|
+
bottom: ${(props) => (props.$inverted ? `-${circleWidth * 0.5}px` : 'unset')};
|
|
37
|
+
left: 50%;
|
|
38
|
+
|
|
39
|
+
transform: translate(-50%, -${circleWidth * 0.5}px);
|
|
40
|
+
width: ${circleWidth}px;
|
|
41
|
+
height: ${circleWidth * 0.5}px;
|
|
42
|
+
background-color: ${semantics.color.background[2]};
|
|
43
|
+
border-radius: ${(props) => (props.$inverted ? `${circleWidth * 0.5}px ${circleWidth * 0.5}px 0 0` : `0 0 ${circleWidth * 0.5}px ${circleWidth * 0.5}px`)};
|
|
44
|
+
`;
|
|
45
|
+
|
|
46
|
+
const TicketTypeBadge = styled.div`
|
|
47
|
+
padding: 4px;
|
|
48
|
+
border-radius: 4px;
|
|
49
|
+
background-color: ${semantics.color.background[2]};
|
|
50
|
+
border: 1px solid ${semantics.color.border[2]};
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
|
|
55
|
+
width: fit-content;
|
|
56
|
+
`;
|
|
57
|
+
|
|
58
|
+
const TicketTypeBadgeText = styled(Text)`
|
|
59
|
+
font-size: 12px;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
color: ${semantics.color.foreground[1]};
|
|
62
|
+
margin: unset;
|
|
63
|
+
|
|
64
|
+
${media.medium(css`
|
|
65
|
+
font-size: 10px;
|
|
66
|
+
`)}
|
|
67
|
+
`;
|
|
68
|
+
|
|
69
|
+
const ConcertInfoPositionAbsolute = styled.div`
|
|
70
|
+
position: absolute;
|
|
71
|
+
left: 8px;
|
|
72
|
+
bottom: 12px;
|
|
73
|
+
max-width: 80%;
|
|
74
|
+
|
|
75
|
+
gap: 2.5px;
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
`;
|
|
79
|
+
|
|
80
|
+
const ConcertTitle = styled(Text)`
|
|
81
|
+
font-size: 16px;
|
|
82
|
+
font-weight: 500;
|
|
83
|
+
color: ${colors.oc.white.value};
|
|
84
|
+
margin: unset;
|
|
85
|
+
|
|
86
|
+
${media.medium(css`
|
|
87
|
+
font-size: 14px;
|
|
88
|
+
`)}
|
|
89
|
+
`;
|
|
90
|
+
|
|
91
|
+
const ConcertVenue = styled(ConcertTitle)`
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
color: ${colors.oc.white.value};
|
|
94
|
+
|
|
95
|
+
${media.medium(css`
|
|
96
|
+
font-size: 12px;
|
|
97
|
+
`)}
|
|
98
|
+
`;
|
|
99
|
+
|
|
100
|
+
const ConcertDate = styled(ConcertTitle)`
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
color: ${colors.oc.white.value};
|
|
103
|
+
|
|
104
|
+
${media.medium(css`
|
|
105
|
+
font-size: 10px;
|
|
106
|
+
`)}
|
|
107
|
+
`;
|
|
108
|
+
|
|
109
|
+
export function TicketItem({
|
|
110
|
+
title,
|
|
111
|
+
venueName,
|
|
112
|
+
date,
|
|
113
|
+
thumbnailUrl,
|
|
114
|
+
renderThumbnail,
|
|
115
|
+
badgeText,
|
|
116
|
+
}: {
|
|
117
|
+
title: string;
|
|
118
|
+
venueName: string;
|
|
119
|
+
date: string | Date;
|
|
120
|
+
thumbnailUrl: string;
|
|
121
|
+
renderThumbnail?: (url: string) => ReactNode;
|
|
122
|
+
badgeText?: string;
|
|
123
|
+
}) {
|
|
124
|
+
return (
|
|
125
|
+
<Container>
|
|
126
|
+
{thumbnailUrl ? (
|
|
127
|
+
renderThumbnail ? (
|
|
128
|
+
renderThumbnail(thumbnailUrl)
|
|
129
|
+
) : (
|
|
130
|
+
<DefaultConcertThumbnail src={thumbnailUrl} />
|
|
131
|
+
)
|
|
132
|
+
) : null}
|
|
133
|
+
<ConcertThumbnailHalfCircle />
|
|
134
|
+
<ConcertThumbnailHalfCircle $inverted />
|
|
135
|
+
<ConcertInfoPositionAbsolute>
|
|
136
|
+
<ConcertTitle numberOfLines={1}>{title}</ConcertTitle>
|
|
137
|
+
<ConcertVenue numberOfLines={1}>{venueName}</ConcertVenue>
|
|
138
|
+
<ConcertDate numberOfLines={1}>
|
|
139
|
+
{dateUtils.parseEventDate(date instanceof Date ? date : new Date(date), {
|
|
140
|
+
formatStyle: 'english',
|
|
141
|
+
})}
|
|
142
|
+
</ConcertDate>
|
|
143
|
+
{badgeText && (
|
|
144
|
+
<TicketTypeBadge>
|
|
145
|
+
<TicketTypeBadgeText>무료티켓</TicketTypeBadgeText>
|
|
146
|
+
</TicketTypeBadge>
|
|
147
|
+
)}
|
|
148
|
+
</ConcertInfoPositionAbsolute>
|
|
149
|
+
</Container>
|
|
150
|
+
);
|
|
151
|
+
}
|