Skip to content

Commit 43aba0e

Browse files
kaminorsekaminorse
authored
Merge pull request #3 from smartupcorp/1-fix-some-problems
#1 fix some problems
2 parents 2e487d4 + 73dea2b commit 43aba0e

File tree

77 files changed

+638
-158
lines changed

Some content is hidden

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

77 files changed

+638
-158
lines changed

‎README.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,28 @@
1-
# react-smarpy
1+
# react-smarpy
2+
3+
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smartupcorp/react-smarpy/blob/main/LICENSE)
4+
[![NPM Version](https://img.shields.io/npm/v/@smartupcorp/react-smarpy)](https://www.npmjs.com/package/@smartupcorp/react-smarpy)
5+
[![npm downloads](https://img.shields.io/npm/dm/@smartupcorp/react-smarpy)](https://www.npmjs.com/package/@smartupcorp/react-smarpy)
6+
7+
[![NPM](https://nodei.co/npm/@smartupcorp/react-smarpy.png)](https://nodei.co/npm/@smartupcorp/react-smarpy/)
8+
9+
## Overview
10+
11+
react-smarpy is an open-source react wrapper for [smarpy](https://github.com/smartupcorp/smarpy).
12+
13+
14+
## Installation
15+
16+
```shell
17+
npm install @smartupcorp/react-smarpy @emotion/react
18+
```
19+
20+
## Getting Started
21+
22+
After installation, you can import any react-smarpy component and start playing around.
23+
24+
check out [Storybook](https://smartupcorp.github.io/react-smarpy/) for more details.
25+
26+
## License
27+
28+
This project is licensed under the terms of the [MIT license](https://github.com/smartupcorp/react-smarpy/blob/main/LICENSE).

‎src/backgrounds/Dot/Dot.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export default function Dot(props: DotProps) {
1515
delete assignedProps["back"];
1616
delete assignedProps["border"];
1717
delete assignedProps["highlighter"];
18+
delete assignedProps["positioning"];
19+
delete assignedProps["sizing"];
1820
delete assignedProps["spacing"];
1921
delete assignedProps["css"];
2022
//#endregion BaseComponentProps
@@ -31,6 +33,8 @@ export default function Dot(props: DotProps) {
3133
border: props.border,
3234
highlighter: props.highlighter,
3335
spacing: props.spacing,
36+
sizing: props.sizing,
37+
positioning: props.positioning,
3438
});
3539
if (utilityClassNames) {
3640
assignedClassNames.push(...utilityClassNames);

‎src/backgrounds/Gingham/Gingham.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export default function Gingham(props: GinghamProps) {
1616
delete assignedProps["back"];
1717
delete assignedProps["border"];
1818
delete assignedProps["highlighter"];
19+
delete assignedProps["positioning"];
20+
delete assignedProps["sizing"];
1921
delete assignedProps["spacing"];
2022
delete assignedProps["css"];
2123
//#endregion BaseComponentProps
@@ -36,6 +38,8 @@ export default function Gingham(props: GinghamProps) {
3638
border: props.border,
3739
highlighter: props.highlighter,
3840
spacing: props.spacing,
41+
sizing: props.sizing,
42+
positioning: props.positioning,
3943
});
4044
if (utilityClassNames) {
4145
assignedClassNames.push(...utilityClassNames);

‎src/backgrounds/Stripe/Stripe.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export default function Stripe(props: StripeProps) {
1616
delete assignedProps["back"];
1717
delete assignedProps["border"];
1818
delete assignedProps["highlighter"];
19+
delete assignedProps["positioning"];
20+
delete assignedProps["sizing"];
1921
delete assignedProps["spacing"];
2022
delete assignedProps["css"];
2123
//#endregion BaseComponentProps
@@ -36,6 +38,8 @@ export default function Stripe(props: StripeProps) {
3638
border: props.border,
3739
highlighter: props.highlighter,
3840
spacing: props.spacing,
41+
sizing: props.sizing,
42+
positioning: props.positioning,
3943
});
4044
if (utilityClassNames) {
4145
assignedClassNames.push(...utilityClassNames);

‎src/base/Smaroot/Smaroot.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export default function Smaroot(props: SmarootProps) {
1313
delete assignedProps["back"];
1414
delete assignedProps["border"];
1515
delete assignedProps["highlighter"];
16+
delete assignedProps["positioning"];
17+
delete assignedProps["sizing"];
1618
delete assignedProps["spacing"];
1719
delete assignedProps["css"];
1820
//#endregion BaseComponentProps
@@ -25,6 +27,8 @@ export default function Smaroot(props: SmarootProps) {
2527
border: props.border,
2628
highlighter: props.highlighter,
2729
spacing: props.spacing,
30+
sizing: props.sizing,
31+
positioning: props.positioning,
2832
});
2933
if (utilityClassNames) {
3034
assignedClassNames.push(...utilityClassNames);

‎src/base/Smarpy/Smarpy.scss‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,117 @@
11
@forward "../../../node_modules/@smartupcorp/smarpy/src/sass/cssvariables/index.scss";
22
@forward "../../../node_modules/@smartupcorp/smarpy/src/sass/base/normalize.scss";
3+
4+
.translate-middle-x {
5+
transform: translateX(-50%) !important;
6+
}
7+
.translate-middle-y {
8+
transform: translateY(-50%) !important;
9+
}
10+
.translate-middle {
11+
transform: translate(-50%, -50%) !important;
12+
}
13+
14+
//#region aspect-ratio
15+
16+
@mixin aspect-ratio-base() {
17+
contain: strict;
18+
width: 100%;
19+
height: auto;
20+
}
21+
22+
.aspect-ratio-square {
23+
@include aspect-ratio-base();
24+
aspect-ratio: 1 / 1;
25+
}
26+
27+
.aspect-ratio-paper-landscape {
28+
@include aspect-ratio-base();
29+
aspect-ratio: 1.414 / 1;
30+
}
31+
32+
.aspect-ratio-paper-portrait {
33+
@include aspect-ratio-base();
34+
aspect-ratio: 1 / 1.414;
35+
}
36+
37+
.aspect-ratio-trading-card-small-landscape {
38+
@include aspect-ratio-base();
39+
aspect-ratio: 86 / 59;
40+
}
41+
42+
.aspect-ratio-trading-card-small-portrait {
43+
@include aspect-ratio-base();
44+
aspect-ratio: 59 / 86;
45+
}
46+
47+
.aspect-ratio-trading-card-standard-landscape {
48+
@include aspect-ratio-base();
49+
aspect-ratio: 88 / 63;
50+
}
51+
52+
.aspect-ratio-trading-card-standard-portrait {
53+
@include aspect-ratio-base();
54+
aspect-ratio: 63 / 88;
55+
}
56+
57+
.aspect-ratio-trading-card-arcade-landscape {
58+
@include aspect-ratio-base();
59+
aspect-ratio: 81 / 58;
60+
}
61+
62+
.aspect-ratio-trading-card-arcade-portrait {
63+
@include aspect-ratio-base();
64+
aspect-ratio: 58 / 81;
65+
}
66+
67+
.aspect-ratio-2-3 {
68+
@include aspect-ratio-base();
69+
aspect-ratio: 2 / 3;
70+
}
71+
72+
.aspect-ratio-3-2 {
73+
@include aspect-ratio-base();
74+
aspect-ratio: 3 / 2;
75+
}
76+
77+
.aspect-ratio-3-4 {
78+
@include aspect-ratio-base();
79+
aspect-ratio: 3 / 4;
80+
}
81+
82+
.aspect-ratio-4-3 {
83+
@include aspect-ratio-base();
84+
aspect-ratio: 4 / 3;
85+
}
86+
87+
.aspect-ratio-4-5 {
88+
@include aspect-ratio-base();
89+
aspect-ratio: 4 / 5;
90+
}
91+
92+
.aspect-ratio-5-4 {
93+
@include aspect-ratio-base();
94+
aspect-ratio: 5 / 4;
95+
}
96+
97+
.aspect-ratio-5-8 {
98+
@include aspect-ratio-base();
99+
aspect-ratio: 5 / 8;
100+
}
101+
102+
.aspect-ratio-8-5 {
103+
@include aspect-ratio-base();
104+
aspect-ratio: 8 / 5;
105+
}
106+
107+
.aspect-ratio-9-16 {
108+
@include aspect-ratio-base();
109+
aspect-ratio: 9 / 16;
110+
}
111+
112+
.aspect-ratio-16-9 {
113+
@include aspect-ratio-base();
114+
aspect-ratio: 16 / 9;
115+
}
116+
117+
//#endregion aspect-ratio

‎src/base/Smarpy/Smarpy.stories.tsx‎

Lines changed: 98 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,23 @@ import {
66
Button,
77
ColorName,
88
Div,
9+
Dot,
910
Gradation,
11+
Hamburger,
12+
Header,
13+
Main,
1014
Message,
1115
MessageBody,
1216
MessageHeader,
17+
Nav,
18+
NavAccordion,
19+
NavBrand,
20+
NavBrandCenter,
21+
NavBrandLeft,
22+
NavBrandRight,
23+
NavMenu,
24+
NavMenuItem,
25+
NavStatic,
1326
Oklch,
1427
Percentage,
1528
SmarpyCssVariable,
@@ -137,49 +150,96 @@ function genSmarpyCssVariable(): SmarpyCssVariable {
137150

138151
const cssVariableSetting = genSmarpyCssVariable();
139152

153+
const navMenuItems = (
154+
<>
155+
<NavMenuItem as="a" href="/">
156+
{"NavMenuItem1"}
157+
</NavMenuItem>
158+
<NavMenuItem as="a" href="/">
159+
{"NavMenuItem2"}
160+
</NavMenuItem>
161+
<NavMenuItem as="a" href="/">
162+
{"NavMenuItem3"}
163+
</NavMenuItem>
164+
</>
165+
);
166+
140167
const elem = (
141168
<>
142-
<Div spacing={{ padding: { top: 1, bottom: 1, left: 1, right: 1 } }}>
143-
<Message>
144-
<MessageHeader>{"Message"}</MessageHeader>
145-
<MessageBody>
146-
{
147-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
148-
}
149-
</MessageBody>
150-
</Message>
151-
</Div>
152-
<Div spacing={{ padding: { top: 1, bottom: 1, left: 1, right: 1 } }}>
153-
<Button>{"Button"}</Button>
154-
</Div>
155-
<Div spacing={{ padding: { top: 1, bottom: 1, left: 1, right: 1 } }}>
156-
<Div fore={{ color: { default: { name: "cyan", lightness: 600 } } }}>
157-
{"color default cyan 600"}
169+
<Header>
170+
<Nav>
171+
<NavAccordion isTabletOrLess>
172+
<NavBrand>
173+
<NavBrandLeft>
174+
<Hamburger />
175+
</NavBrandLeft>
176+
<NavBrandCenter>{"Center"}</NavBrandCenter>
177+
<NavBrandRight></NavBrandRight>
178+
</NavBrand>
179+
<NavMenu isActive={true}>{navMenuItems}</NavMenu>
180+
</NavAccordion>
181+
<NavStatic isDesktopOrMore>
182+
<NavBrand>
183+
<NavBrandLeft>{"NavBrandLeft"}</NavBrandLeft>
184+
<NavBrandCenter>{"NavBrandCenter"}</NavBrandCenter>
185+
<NavBrandRight>{"NavBrandRight"}</NavBrandRight>
186+
</NavBrand>
187+
<NavMenu>{navMenuItems}</NavMenu>
188+
</NavStatic>
189+
</Nav>
190+
</Header>
191+
<Main>
192+
<Div spacing={{ padding: 1 }}>
193+
<Message>
194+
<MessageHeader>{"Message"}</MessageHeader>
195+
<MessageBody>
196+
{
197+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
198+
}
199+
</MessageBody>
200+
</Message>
201+
</Div>
202+
<Div spacing={{ padding: 1 }}>
203+
<Button>{"Button"}</Button>
158204
</Div>
159-
<Div
160-
fore={{
161-
color: {
162-
light: { default: { name: "blue", lightness: 500 } },
163-
dark: { default: { name: "red", lightness: 500 } },
164-
},
165-
}}
166-
>
167-
{"color light blue 500, dark red 500"}
205+
<Div spacing={{ padding: 1 }}>
206+
<Dot
207+
colorName="gray"
208+
sizing={{
209+
aspectRatio: "16:9",
210+
width: "100$"
211+
}}
212+
/>
168213
</Div>
169-
<Div
170-
fore={{
171-
color: {
172-
light: { default: { name: "blue", lightness: 500 } },
173-
dark: { default: { name: "red", lightness: 500 } },
174-
},
175-
}}
176-
css={{
177-
fontSize: "2rem",
178-
}}
179-
>
180-
{"css props"}
214+
<Div spacing={{ padding: 1 }}>
215+
<Div fore={{ color: { default: { name: "cyan", lightness: 600 } } }}>
216+
{"color default cyan 600"}
217+
</Div>
218+
<Div
219+
fore={{
220+
color: {
221+
light: { default: { name: "blue", lightness: 500 } },
222+
dark: { default: { name: "red", lightness: 500 } },
223+
},
224+
}}
225+
>
226+
{"color light blue 500, dark red 500"}
227+
</Div>
228+
<Div
229+
fore={{
230+
color: {
231+
light: { default: { name: "blue", lightness: 500 } },
232+
dark: { default: { name: "red", lightness: 500 } },
233+
},
234+
}}
235+
css={{
236+
fontSize: "2rem",
237+
}}
238+
>
239+
{"css props"}
240+
</Div>
181241
</Div>
182-
</Div>
242+
</Main>
183243
</>
184244
);
185245

‎src/common/literalTypes/BorderDetailProps.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ColorProps from "./ColorProps";
44

55
type BorderDetailProps = {
66
color?: ColorProps;
7-
style: BorderStyle;
7+
style?: BorderStyle;
88
width?: BorderWidth;
99
};
1010

0 commit comments

Comments
 (0)