Skip to content

Commit 8c20bbc

Browse files
davidchen-alliodavidchen-allio
committed
added plasmic
1 parent a1a8626 commit 8c20bbc

31 files changed

+3549
-214
lines changed

‎.env

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://graphqlzero.almansi.me/api
1+
NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://graphqlzero.almansi.me/api
2+
PLASMIC_ID=ncsM16dhWSYZH3JuSmyesJ

‎__tests__/pages/__snapshots__/test-graphql.test.tsx.snap

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`TestGraphql renders page unchanged 1`] = `
4+
<div>
5+
<div
6+
class="container"
7+
>
8+
<h1
9+
class="title"
10+
>
11+
Graphql Tester
12+
</h1>
13+
<div
14+
class="grid"
15+
>
16+
<div
17+
class="graphql-container"
18+
>
19+
<button
20+
class="card"
21+
type="button"
22+
>
23+
try fetch
24+
</button>
25+
<div
26+
class="grapql-result"
27+
>
28+
<p
29+
class="code"
30+
/>
31+
</div>
32+
</div>
33+
</div>
34+
<style>
35+
36+
.graphql-testing-container {
37+
display: flex;
38+
flex-flow: row nowrap;
39+
justify-content: space-between;
40+
align-items: flex-start;
41+
}
42+
.graphql-testing-container &gt; div {
43+
width: 100%;
44+
border-color: black;
45+
}
46+
button.card {
47+
cursor: pointer;
48+
background: transparent;
49+
}
50+
button.card:active {
51+
border-color: lightblue;
52+
color: lightblue;
53+
}
54+
55+
</style>
56+
</div>
57+
</div>
58+
`;

‎__tests__/pages/index.test.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎__tests__/pages/test-graphql.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { render, screen, act, waitFor } from '@testing-library/react';
2+
import TestGraphql from 'pages/test-graphql';
3+
4+
describe('TestGraphql', () => {
5+
it('renders a button', async () => {
6+
const renderResult = render(<TestGraphql pageProps={{}} />);
7+
8+
const heading = screen.getByRole('button', { name: /try fetch/i });
9+
10+
expect(heading).toBeInTheDocument();
11+
12+
await waitFor(renderResult.unmount);
13+
});
14+
15+
it('renders page unchanged', async () => {
16+
const renderResult = render(<TestGraphql pageProps={{}} />);
17+
expect(renderResult.container).toMatchSnapshot();
18+
19+
await waitFor(renderResult.unmount);
20+
});
21+
});

‎components/TextInput.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
import {
3+
PlasmicTextInput,
4+
DefaultTextInputProps,
5+
} from './plasmic/prototype/PlasmicTextInput';
6+
import { TextInputRef } from '@plasmicapp/react-web';
7+
8+
interface TextInputProps extends DefaultTextInputProps {}
9+
10+
function TextInput_(props: TextInputProps, ref: TextInputRef) {
11+
const { plasmicProps } = PlasmicTextInput.useBehavior<TextInputProps>(
12+
props,
13+
ref
14+
);
15+
return <PlasmicTextInput {...plasmicProps} />;
16+
}
17+
18+
const TextInput = React.forwardRef(TextInput_);
19+
20+
export default Object.assign(TextInput, {
21+
__plumeType: 'text-input',
22+
});

‎components/plasmic-tokens.theo.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"props": [],
3+
"global": {
4+
"meta": {
5+
"source": "plasmic.app"
6+
}
7+
}
8+
}

‎components/plasmic/plasmic__default_style.css

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
:where(.all) {
2+
display: block;
3+
white-space: inherit;
4+
grid-row: auto;
5+
grid-column: auto;
6+
position: relative;
7+
background: none;
8+
background-size: 100% 100%;
9+
background-repeat: no-repeat;
10+
box-shadow: none;
11+
box-sizing: border-box;
12+
text-decoration-line: none;
13+
margin: 0;
14+
border-width: 0px;
15+
}
16+
:where(.img) {
17+
display: inline-block;
18+
}
19+
:where(.li) {
20+
display: list-item;
21+
}
22+
:where(.span) {
23+
display: inline;
24+
position: static;
25+
font-family: inherit;
26+
line-height: inherit;
27+
font-size: inherit;
28+
font-style: inherit;
29+
font-weight: inherit;
30+
color: inherit;
31+
text-transform: inherit;
32+
}
33+
:where(.input) {
34+
font-family: inherit;
35+
line-height: inherit;
36+
font-size: inherit;
37+
font-style: inherit;
38+
font-weight: inherit;
39+
color: inherit;
40+
text-transform: inherit;
41+
background-image: linear-gradient(#ffffff, #ffffff);
42+
padding: 2px;
43+
border: 1px solid lightgray;
44+
}
45+
:where(.textarea) {
46+
font-family: inherit;
47+
line-height: inherit;
48+
font-size: inherit;
49+
font-style: inherit;
50+
font-weight: inherit;
51+
color: inherit;
52+
text-transform: inherit;
53+
padding: 2px;
54+
border: 1px solid lightgray;
55+
}
56+
:where(.button) {
57+
font-family: inherit;
58+
line-height: inherit;
59+
font-size: inherit;
60+
font-style: inherit;
61+
font-weight: inherit;
62+
color: inherit;
63+
text-transform: inherit;
64+
background-image: none;
65+
align-items: flex-start;
66+
text-align: center;
67+
padding: 2px 6px;
68+
border: 1px solid lightgray;
69+
}
70+
:where(.code) {
71+
font-family: inherit;
72+
line-height: inherit;
73+
}
74+
:where(.pre) {
75+
font-family: inherit;
76+
line-height: inherit;
77+
}
78+
:where(.p) {
79+
font-family: inherit;
80+
line-height: inherit;
81+
font-size: inherit;
82+
font-style: inherit;
83+
font-weight: inherit;
84+
color: inherit;
85+
text-transform: inherit;
86+
}
87+
:where(.h1) {
88+
font-size: inherit;
89+
font-weight: inherit;
90+
}
91+
:where(.h2) {
92+
font-size: inherit;
93+
font-weight: inherit;
94+
}
95+
:where(.h3) {
96+
font-size: inherit;
97+
font-weight: inherit;
98+
}
99+
:where(.h4) {
100+
font-size: inherit;
101+
font-weight: inherit;
102+
}
103+
:where(.h5) {
104+
font-size: inherit;
105+
font-weight: inherit;
106+
}
107+
:where(.h6) {
108+
font-size: inherit;
109+
font-weight: inherit;
110+
}
111+
:where(.address) {
112+
font-style: inherit;
113+
}
114+
:where(.a) {
115+
color: inherit;
116+
}
117+
:where(.ol) {
118+
list-style-type: none;
119+
padding: 0;
120+
}
121+
:where(.ul) {
122+
list-style-type: none;
123+
padding: 0;
124+
}
125+
:where(.select) {
126+
padding: 2px 6px;
127+
}
128+
.plasmic_default__component_wrapper {
129+
display: grid;
130+
}
131+
.plasmic_default__inline {
132+
display: inline;
133+
}
134+
.plasmic_page_wrapper {
135+
display: flex;
136+
width: 100%;
137+
min-height: 100vh;
138+
align-items: stretch;
139+
align-self: start;
140+
}
141+
.plasmic_page_wrapper > * {
142+
height: auto !important;
143+
}

‎components/plasmic/prototype/PlasmicGlobalVariant__Screen.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// @ts-nocheck
2+
/* eslint-disable */
3+
/* tslint:disable */
4+
/* prettier-ignore-start */
5+
import * as React from 'react';
6+
import * as p from '@plasmicapp/react-web';
7+
export type ScreenValue = 'mobileOnly';
8+
export const ScreenContext = React.createContext<ScreenValue[] | undefined>(
9+
'PLEASE_RENDER_INSIDE_PROVIDER' as any
10+
);
11+
12+
/**
13+
* @deprecated Plasmic now uses a custom hook for Screen variants, which is
14+
* automatically included in your components. Please remove this provider
15+
* from your code.
16+
*/
17+
export function ScreenVariantProvider(props: React.PropsWithChildren) {
18+
console.warn(
19+
'DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code.'
20+
);
21+
return props.children;
22+
}
23+
24+
export const useScreenVariants = p.createUseScreenVariants(true, {
25+
mobileOnly: '(min-width:0px) and (max-width:768px)',
26+
});
27+
28+
export default ScreenContext;
29+
/* prettier-ignore-end */

‎components/plasmic/prototype/PlasmicHomepage.module.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.root {
2+
flex-direction: column;
3+
display: flex;
4+
position: relative;
5+
width: 100%;
6+
height: 100%;
7+
min-width: 0;
8+
min-height: 0;
9+
padding: 96px 24px;
10+
}
11+
.root > :global(.__wab_flex-container) {
12+
flex-direction: column;
13+
justify-content: flex-start;
14+
align-items: center;
15+
min-width: 0;
16+
min-height: 0;
17+
margin-top: calc(0px - 16px);
18+
height: calc(100% + 16px);
19+
}
20+
.root > :global(.__wab_flex-container) > *,
21+
.root > :global(.__wab_flex-container) > :global(.__wab_slot) > *,
22+
.root > :global(.__wab_flex-container) > picture > img,
23+
.root > :global(.__wab_flex-container) > :global(.__wab_slot) > picture > img {
24+
margin-top: 16px;
25+
}
26+
.h1 {
27+
position: relative;
28+
width: 100%;
29+
height: auto;
30+
max-width: 800px;
31+
margin-bottom: 32px;
32+
min-width: 0;
33+
}
34+
.text {
35+
position: relative;
36+
width: 100%;
37+
height: auto;
38+
max-width: 800px;
39+
min-width: 0;
40+
}
41+
.textInput:global(.__wab_instance) {
42+
max-width: 100%;
43+
position: relative;
44+
margin-left: 0px;
45+
width: 809px;
46+
margin-top: calc(35px + 16px) !important;
47+
}
48+
.svg__bdiB {
49+
position: relative;
50+
object-fit: cover;
51+
width: 1em;
52+
height: 1em;
53+
}
54+
.svg__ddMCg {
55+
position: relative;
56+
object-fit: cover;
57+
width: 1em;
58+
height: 1em;
59+
}

0 commit comments

Comments
 (0)