Skip to content

Commit 8b23e43

Browse files
MatsuuuMatsuuu
committed
Add examples
1 parent 7d57a01 commit 8b23e43

Some content is hidden

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

50 files changed

+16985
-0
lines changed

‎examples/atomico-no-cem/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/package-lock.json

‎examples/atomico-no-cem/.npmignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/node_modules
2+
/index.html
3+
/site
4+
/**/*.test.js
5+
/**/*.spec.js
6+
/vite.config.js

‎examples/atomico-no-cem/README.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
![Atomico](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/h4.svg)
2+
![Atomico](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/h3.svg)
3+
4+
### Hi, I'm [@uppercod](https://twitter.com/uppercod), creator of Atomico and I want to thank you for starting with Atomico.
5+
6+
If you need help you can find it at:
7+
8+
[![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs)
9+
[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE)
10+
[![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/)
11+
[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc.svg)](https://webcomponents.dev/edit/collection/F7dm6YnMEDRtAl57RTXU/d6E4w07fsQbb0CelYQac)
12+
13+
Now what you have installed is a quick start kit based on Vite, which you can scale for your project, now to continue you must execute the following commands:
14+
15+
1. `npm install`
16+
2. `npm start` : Initialize the development server
17+
3. `npm build` : Optional, Generate a build of your project from the html file [index.html](index.html).
18+
19+
## Workspace
20+
21+
### Recommended structure
22+
23+
```bash
24+
site
25+
src
26+
|- my-component
27+
| |- my-component.{js,jsx,ts,tsx}
28+
| |- my-component.test.js
29+
| |- my-component.css
30+
| |- README.md
31+
|- components.js # import all components
32+
```
33+
34+
### Add testing
35+
36+
The test environment is preconfigured for [@web/test-runner](https://modern-web.dev/docs/test-runner/overview/), you must complete the installation of the following devDependencies, installed the devDependencies you can execute the command `npm run test`:
37+
38+
```bash
39+
npm install -D @web/test-runner @esm-bundle/chai vite-web-test-runner-plugin
40+
```
41+
42+
#### Test example
43+
44+
```js
45+
import { expect } from "@esm-bundle/chai";
46+
47+
describe("my test", () => {
48+
it("foo is bar", () => {
49+
expect("foo").to.equal("bar");
50+
});
51+
});
52+
```
53+
54+
> `@web/test-runner` supports asynchrony, coverage, [viewport and more](https://modern-web.dev/docs/test-runner/commands/).
55+
56+
### NPM export
57+
58+
Atomico owns the [@atomico/exports](https://atomico.gitbook.io/doc/atomico/atomico-exports) tool that simplifies the generation of builds, types and exports by distributing webcomponents in NPM, you must complete the installation of the following devDependencies, installed the devDependencies you can execute the command `npm run exports`:
59+
60+
```bash
61+
npm install -D @atomico/exports
62+
```

‎examples/atomico-no-cem/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Atomico - Started</title>
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="./site/site.css" />
13+
<script async type="module" src="./site/site.js"></script>
14+
</head>
15+
<body>
16+
<atomico-hello>
17+
<div class="message">
18+
<p class="message_text">
19+
A micro library inspired by React Hooks, designed and optimized for
20+
the creation of webcomponents.
21+
</p>
22+
</div>
23+
</atomico-hello>
24+
</body>
25+
</html>

‎examples/atomico-no-cem/package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "atomico-base",
3+
"description": "a repo to start with atomico",
4+
"meta": {
5+
"title": "Started - Atomico + Vite",
6+
"description": "Hassle-free starter template, perfect for starting with Atomico",
7+
"branch": "https://github.com/atomicojs/atomico/tree/2-started/"
8+
},
9+
"workspaces": [
10+
"src/**/*",
11+
"site"
12+
],
13+
"version": "0.0.0",
14+
"private": true,
15+
"scripts": {
16+
"start": "vite --force",
17+
"build": "vite build",
18+
"test": "wtr src/**/*.test.js --node-resolve",
19+
"exports": "exports src/components.js --exports --types --main components",
20+
"prepublishOnly": "npm run test && npm run exports"
21+
},
22+
"dependencies": {
23+
"atomico": "latest"
24+
},
25+
"devDependencies": {
26+
"@uppercod/vite-meta-url": "latest",
27+
"@uppercod/vite-meta-url-load-css": "latest",
28+
"csso": "latest",
29+
"vite": "latest"
30+
},
31+
"customElements": "custom-elements.json"
32+
}

‎examples/atomico-no-cem/site/site.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
:root {
2+
--theme_color: black;
3+
font-size: 2vh;
4+
}
5+
html,
6+
body {
7+
width: 100%;
8+
height: 100%;
9+
margin: 0px;
10+
}
11+
12+
body {
13+
font-family: "Poppins", sans-serif;
14+
}
15+
16+
.message {
17+
display: flex;
18+
flex-flow: row nowrap;
19+
align-items: center;
20+
max-width: 45rem;
21+
}
22+
23+
.message_text {
24+
padding-left: 1rem;
25+
margin-left: 1rem;
26+
color: var(--theme_color);
27+
border-left: 0.2rem solid var(--theme_color);
28+
}
29+
30+
@media (max-width: 45rem) {
31+
.message {
32+
flex-flow: column nowrap;
33+
}
34+
}

‎examples/atomico-no-cem/site/site.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "../src/components.js";

‎examples/atomico-no-cem/src/brand/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# atomico-brand
2+
3+
## Properties
4+
5+
| Property | types | description |
6+
| -------- | ------ | --------------- |
7+
| color | String | Component color |
8+
| width | String | Component width |
9+
10+
## Events
11+
12+
| Type | Detail | Description |
13+
| ---- | ------ | ----------- |
14+
| - | - | - |
15+
16+
## Slots
17+
18+
| slot | types | description |
19+
| ---- | ----- | ----------- |
20+
| - | - | - |
21+
22+
## Custom properties
23+
24+
| Property | types | description |
25+
| -------- | ----- | ----------- |

‎examples/atomico-no-cem/src/brand/brand.jsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { c } from "atomico";
2+
3+
function brand({ color, width, focused, options }) {
4+
return (
5+
<host>
6+
<svg
7+
width={width}
8+
style="display:inline-block"
9+
viewBox="0 0 287.407 86.961"
10+
>
11+
<g transform="translate(-331.97 -291.125)">
12+
<g transform="translate(321.97 336.23) rotate(-45)">
13+
<path
14+
d="M12.46,13.481a13.426,13.426,0,0,1-1.819-.124L1.962,4.681c.92.19,1.862.341,2.8.447L13.1,13.466C12.888,13.476,12.672,13.481,12.46,13.481Zm2.554-.246L7.084,5.3c.406.016.821.024,1.234.024.373,0,.75-.006,1.121-.02l7.425,7.425a13.343,13.343,0,0,1-1.851.5ZM7.763,12.63A13.206,13.206,0,0,1,3.047,9.583,13.212,13.212,0,0,1,0,4.866L7.764,12.63Zm10.612-.53L11.45,5.175c.692-.069,1.389-.162,2.075-.277l6.339,6.339a13.261,13.261,0,0,1-1.488.865Zm2.709-1.788L15.316,4.543c.623-.143,1.25-.307,1.863-.488l5.1,5.1c-.13.143-.268.287-.408.427-.253.253-.519.5-.788.728Zm2.162-2.334h0L18.8,3.529c.565-.2,1.135-.423,1.692-.66l3.666,3.666a13.279,13.279,0,0,1-.908,1.441Zm1.594-2.9h0L21.965,2.2c.519-.252,1.038-.524,1.545-.807L25.4,3.286a13.317,13.317,0,0,1-.562,1.787Zm.871-3.627h0L24.859.594c.3-.19.611-.389.913-.594a13.435,13.435,0,0,1-.06,1.447Z"
15+
transform="translate(21.134 55.622)"
16+
fill={color}
17+
/>
18+
<path
19+
d="M29.6,59.192a29.813,29.813,0,0,1-5.966-.6,29.434,29.434,0,0,1-10.583-4.453A29.685,29.685,0,0,1,2.326,41.117,29.444,29.444,0,0,1,.6,35.562a29.891,29.891,0,0,1,0-11.939A29.429,29.429,0,0,1,5.055,13.048,29.685,29.685,0,0,1,18.076,2.326,29.447,29.447,0,0,1,23.631.6,29.859,29.859,0,0,1,36.69.856,29.505,29.505,0,0,1,48.814,7.088a29.805,29.805,0,0,1,4.625,4.971,18.694,18.694,0,0,0,0,35.078,29.734,29.734,0,0,1-10.273,8.77A29.464,29.464,0,0,1,29.6,59.192Z"
20+
transform="translate(0 0)"
21+
fill={color}
22+
/>
23+
<path
24+
d="M9.792,31.852H23.54a16.714,16.714,0,0,1-13.748,0ZM6.6,29.953a16.774,16.774,0,0,1-2.275-2.082H29a16.774,16.774,0,0,1-2.275,2.082ZM2.838,25.971a16.655,16.655,0,0,1-1.2-2.082H31.688a16.641,16.641,0,0,1-1.2,2.082ZM.869,21.989a16.534,16.534,0,0,1-.553-2.082h32.7a16.563,16.563,0,0,1-.553,2.082ZM.053,18.008Q0,17.344,0,16.666q0-.372.016-.739h33.3q.016.367.016.739,0,.677-.053,1.342Zm.154-3.982a16.579,16.579,0,0,1,.47-2.082H32.653a16.57,16.57,0,0,1,.47,2.082Zm1.159-3.982A16.614,16.614,0,0,1,2.447,7.963H30.879a16.645,16.645,0,0,1,1.081,2.082Zm2.44-3.982A16.771,16.771,0,0,1,5.855,3.982H27.476a16.759,16.759,0,0,1,2.048,2.082ZM8.593,2.082a16.692,16.692,0,0,1,16.144,0Z"
25+
transform="translate(43.232 12.774)"
26+
fill={color}
27+
/>
28+
</g>
29+
<path
30+
d="M27.725-47.09h4.524L20.421-79.745H15.473L3.6-47.09H8.122L10.759-54.4H25.086ZM23.861-57.881H11.987l5.937-16.587Zm14.514,3.723c0,5.183,2.594,7.068,7.163,7.068H49.4v-3.628H46.245c-2.637,0-3.581-.9-3.581-3.44v-15.22H49.4v-3.534h-6.74v-6.5H38.375v6.5H35.029v3.534h3.346Zm40.713-5.89c0-8.152-5.7-13.288-13.053-13.288-7.306,0-13.053,5.136-13.053,13.288,0,8.2,5.56,13.383,12.864,13.383C73.2-46.666,79.088-51.849,79.088-60.048Zm-21.723,0c0-6.5,4.1-9.566,8.623-9.566,4.429,0,8.718,3.063,8.718,9.566,0,6.55-4.382,9.613-8.859,9.613s-8.482-3.063-8.482-9.613ZM122.016-47.09h4.241V-62.31c0-7.4-4.571-11.074-10.462-11.074a9.559,9.559,0,0,0-9.142,5.75c-1.7-3.864-5.231-5.75-9.471-5.75A9.336,9.336,0,0,0,89.03-69.19v-3.723H84.742V-47.09H89.03V-61.321c0-5.56,2.969-8.341,7.306-8.341,4.241,0,7.068,2.686,7.068,7.964V-47.09h4.241V-61.321c0-5.56,2.969-8.341,7.306-8.341,4.241,0,7.068,2.686,7.068,7.964Zm11.262,0h4.288V-72.913h-4.288Zm2.215-30.017a2.857,2.857,0,0,0,2.024-.87,2.857,2.857,0,0,0,.8-2.051,2.857,2.857,0,0,0-.8-2.051,2.857,2.857,0,0,0-2.024-.87,2.877,2.877,0,0,0-2.079.842,2.877,2.877,0,0,0-.842,2.079,2.877,2.877,0,0,0,.842,2.079A2.877,2.877,0,0,0,135.493-77.106Zm7.775,17.058c0,8.2,5.231,13.383,12.58,13.383,6.41,0,10.6-3.58,11.923-8.718h-4.618c-.942,3.251-3.487,5.089-7.3,5.089-4.712,0-8.2-3.346-8.2-9.754,0-6.314,3.487-9.66,8.2-9.66,3.817,0,6.409,1.979,7.3,5.089h4.618c-1.32-5.419-5.513-8.718-11.922-8.718-7.351,0-12.582,5.183-12.582,13.288Zm54.708,0c0-8.152-5.7-13.288-13.053-13.288-7.306,0-13.053,5.136-13.053,13.288,0,8.2,5.561,13.383,12.864,13.383C192.087-46.666,197.976-51.849,197.976-60.048Zm-21.723,0c0-6.5,4.1-9.566,8.623-9.566,4.429,0,8.718,3.063,8.718,9.566,0,6.55-4.382,9.613-8.859,9.613S176.253-53.5,176.253-60.048Z"
31+
transform="translate(411.401 397.056)"
32+
fill={color}
33+
/>
34+
</g>
35+
</svg>
36+
<p>Focused: {focused.toString()}</p>
37+
<p>{Object.keys(options).map(opt => `${opt}: ${options[opt]}`)}</p>
38+
</host>
39+
);
40+
}
41+
42+
brand.props = {
43+
color: {
44+
type: String,
45+
value: "#232323",
46+
},
47+
width: {
48+
type: String,
49+
value: "20rem",
50+
},
51+
focused: {
52+
type: Boolean,
53+
reflect: true,
54+
value: false
55+
},
56+
options: {
57+
type: Object,
58+
value: {}
59+
}
60+
61+
};
62+
63+
export const Brand = c(brand);

‎examples/atomico-no-cem/src/components.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Hello } from "./hello/hello.jsx";
2+
import { Brand } from "./brand/brand.jsx";
3+
4+
customElements.define("atomico-hello", Hello);
5+
customElements.define("atomico-brand", Brand);

‎examples/atomico-no-cem/src/hello/README.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# atomico-brand
2+
3+
## Properties
4+
5+
| Property | Types | Description |
6+
| -------- | ------ | ------------------ |
7+
| message | String | Message to display |
8+
9+
## Events
10+
11+
| Type | Detail | Description |
12+
| ---- | ------ | ----------- |
13+
| - | - | - |
14+
15+
## Slots
16+
17+
| Slot | Types | Description |
18+
| ---- | ----- | -------------- |
19+
| - | - | Insert content |
20+
21+
## Custom properties
22+
23+
| Property | Types | Description |
24+
| ---------------- | ----- | ----------------------- |
25+
| --hello-shadow-1 | color | Color 1 for text-shadow |
26+
| --hello-shadow-2 | color | Color 2 for text-shadow |

‎examples/atomico-no-cem/src/hello/hello.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:host,
2+
.layer {
3+
width: 100%;
4+
height: 100%;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
position: relative;
9+
}
10+
11+
.layer {
12+
position: absolute;
13+
top: 0px;
14+
left: 0px;
15+
font-size: 20vw;
16+
font-weight: bold;
17+
overflow: hidden;
18+
color: white;
19+
text-shadow: 0px 2vw 4vw var(--hello-shadow-1, magenta),
20+
0px 2vw 1vw var(--hello-shadow-2, tomato);
21+
opacity: 0.15;
22+
align-items: flex-end;
23+
}
24+
25+
.box {
26+
position: relative;
27+
}

‎examples/atomico-no-cem/src/hello/hello.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { c } from "atomico";
2+
import style from "./hello.css";
3+
4+
function hello({ message }) {
5+
return (
6+
<host shadowDom>
7+
<div class="layer">{message}</div>
8+
<div class="box">
9+
<atomico-brand color="var(--theme_color)" options={{"foo": "bar"}}></atomico-brand>
10+
<slot></slot>
11+
</div>
12+
</host>
13+
);
14+
}
15+
16+
hello.props = {
17+
message: {
18+
type: String,
19+
value: "Hello.",
20+
},
21+
};
22+
23+
hello.styles = style;
24+
25+
export const Hello = c(hello);

‎examples/atomico-no-cem/tsconfig.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"include": ["src/**/*", "vite.config.js","types.d.ts"],
3+
"compilerOptions": {
4+
"jsx": "react-jsx",
5+
"jsxImportSource": "atomico",
6+
"allowJs": true,
7+
"declaration": true,
8+
"emitDeclarationOnly": true,
9+
"outDir": "",
10+
"lib": ["ESNext", "DOM","DOM.Iterable"]
11+
}
12+
}

0 commit comments

Comments
 (0)