4 |
5 | > A set of components for building layouts in React Native. Powered by [React Native Unistyles](https://github.com/jpudysz/react-native-unistyles).
6 |
7 | `Stacks` primarily aims to simplify building and maintaining layouts, making it quick and easy. It follows a design principle that suggests components should not include any surrounding white space. Instead, layout components should solely own spacing between elements.
8 |
9 | ## Documentation
10 |
11 | Full documentation can be found [here](https://stacks.grapp.dev).
12 |
13 | ## Installation
14 |
15 | To install Stacks, you should use your preferred package manager.
16 |
17 | ```shell
18 | bun add @grapp/stacks
19 | ```
20 |
21 | ```shell
22 | pnpm add @grapp/stacks
23 | ```
24 |
25 | ```shell
26 | yarn add @grapp/stacks
27 | ```
28 |
29 | ```shell
30 | npm install @grapp/stacks --save
31 | ```
32 |
33 | ## Discord
34 |
35 | Join [Discord](https://discord.gg/DhS6neVJBK) to get involved with the community, ask questions, and share tips.
36 |
37 | ## License
38 |
39 | The MIT License.
40 |
41 | See [LICENSE](LICENSE)
42 |
--------------------------------------------------------------------------------
/assets/stacks-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grapp-dev/stacks/34fa5f71c5cc597a0fef279d6219cc277efecf9e/assets/stacks-logo.png
--------------------------------------------------------------------------------
/assets/stacks-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grapp-dev/stacks/34fa5f71c5cc597a0fef279d6219cc277efecf9e/assets/stacks-preview.png
--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grapp-dev/stacks/34fa5f71c5cc597a0fef279d6219cc277efecf9e/bun.lockb
--------------------------------------------------------------------------------
/docs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: [require.resolve('@grapp/eslint-config/default')],
3 | };
4 |
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
2 |
3 | # Logs
4 |
5 | logs
6 | _.log
7 | npm-debug.log_
8 | yarn-debug.log*
9 | yarn-error.log*
10 | lerna-debug.log*
11 | .pnpm-debug.log*
12 |
13 | # Caches
14 |
15 | .cache
16 |
17 | # Diagnostic reports (https://nodejs.org/api/report.html)
18 |
19 | report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
20 |
21 | # Runtime data
22 |
23 | pids
24 | _.pid
25 | _.seed
26 | *.pid.lock
27 |
28 | # Directory for instrumented libs generated by jscoverage/JSCover
29 |
30 | lib-cov
31 |
32 | # Coverage directory used by tools like istanbul
33 |
34 | coverage
35 | *.lcov
36 |
37 | # nyc test coverage
38 |
39 | .nyc_output
40 |
41 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
42 |
43 | .grunt
44 |
45 | # Bower dependency directory (https://bower.io/)
46 |
47 | bower_components
48 |
49 | # node-waf configuration
50 |
51 | .lock-wscript
52 |
53 | # Compiled binary addons (https://nodejs.org/api/addons.html)
54 |
55 | build/Release
56 |
57 | # Dependency directories
58 |
59 | node_modules/
60 | jspm_packages/
61 |
62 | # Snowpack dependency directory (https://snowpack.dev/)
63 |
64 | web_modules/
65 |
66 | # TypeScript cache
67 |
68 | *.tsbuildinfo
69 |
70 | # Optional npm cache directory
71 |
72 | .npm
73 |
74 | # Optional eslint cache
75 |
76 | .eslintcache
77 |
78 | # Optional stylelint cache
79 |
80 | .stylelintcache
81 |
82 | # Microbundle cache
83 |
84 | .rpt2_cache/
85 | .rts2_cache_cjs/
86 | .rts2_cache_es/
87 | .rts2_cache_umd/
88 |
89 | # Optional REPL history
90 |
91 | .node_repl_history
92 |
93 | # Output of 'npm pack'
94 |
95 | *.tgz
96 |
97 | # Yarn Integrity file
98 |
99 | .yarn-integrity
100 |
101 | # dotenv environment variable files
102 |
103 | .env
104 | .env.development.local
105 | .env.test.local
106 | .env.production.local
107 | .env.local
108 |
109 | # parcel-bundler cache (https://parceljs.org/)
110 |
111 | .parcel-cache
112 |
113 | # Next.js build output
114 |
115 | .next
116 | out
117 |
118 | # Nuxt.js build / generate output
119 |
120 | .nuxt
121 | dist
122 |
123 | # Gatsby files
124 |
125 | # Comment in the public line in if your project uses Gatsby and not Next.js
126 |
127 | # https://nextjs.org/blog/next-9-1#public-directory-support
128 |
129 | # public
130 |
131 | # vuepress build output
132 |
133 | .vuepress/dist
134 |
135 | # vuepress v2.x temp and cache directory
136 |
137 | .temp
138 |
139 | # Docusaurus cache and generated files
140 |
141 | .docusaurus
142 |
143 | # Serverless directories
144 |
145 | .serverless/
146 |
147 | # FuseBox cache
148 |
149 | .fusebox/
150 |
151 | # DynamoDB Local files
152 |
153 | .dynamodb/
154 |
155 | # TernJS port file
156 |
157 | .tern-port
158 |
159 | # Stores VSCode versions used for testing VSCode extensions
160 |
161 | .vscode-test
162 |
163 | # yarn v2
164 |
165 | .yarn/cache
166 | .yarn/unplugged
167 | .yarn/build-state.yml
168 | .yarn/install-state.gz
169 | .pnp.*
170 |
171 | # IntelliJ based IDEs
172 | .idea
173 |
174 | # Finder (MacOS) folder config
175 | .DS_Store
176 | .htaccess
177 |
--------------------------------------------------------------------------------
/docs/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@grapp/prettier-config')
2 |
--------------------------------------------------------------------------------
/docs/babel.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = api => {
4 | api.cache(true);
5 |
6 | return {
7 | presets: ['next/babel'],
8 | plugins: [
9 | [
10 | 'module-resolver',
11 | {
12 | alias: {
13 | 'react-native': path.join(__dirname, 'node_modules', 'react-native-web'),
14 | },
15 | },
16 | ],
17 | ],
18 | };
19 | };
20 |
--------------------------------------------------------------------------------
/docs/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grapp-dev/stacks/34fa5f71c5cc597a0fef279d6219cc277efecf9e/docs/bun.lockb
--------------------------------------------------------------------------------
/docs/components/Components.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | margin: 30px 0 20px;
3 | }
4 |
5 | .card {
6 | min-height: 175px;
7 | padding: 8px;
8 | }
9 |
10 | .link {
11 | color: unset;
12 | text-decoration: unset;
13 | }
14 |
15 | .title {
16 | padding: 0 8px 8px;
17 | text-align: center;
18 | font-size: 0.9rem;
19 | font-weight: 500;
20 | }
21 |
22 | .content {
23 | position: relative;
24 | height: 100%;
25 | background-color: #EAECEE;
26 | border-radius: 4px;
27 | padding: 12px;
28 | display: flex;
29 | flex-direction: column;
30 | flex: 1;
31 |
32 | :global(.dark) & {
33 | background-color: #191D27;
34 | }
35 | }
36 |
37 |
--------------------------------------------------------------------------------
/docs/components/Device.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | display: flex;
3 | flex-direction: row;
4 |
5 | @media (max-width: 480px) {
6 | transform: scale(0.8);
7 | }
8 |
9 | @media (max-width: 380px) {
10 | transform: scale(0.7);
11 | }
12 |
13 | @media (max-width: 330px) {
14 | transform: scale(0.6);
15 | }
16 |
17 | @media (max-width: 310px) {
18 | transform: scale(0.5);
19 | }
20 | }
21 |
22 | .title {
23 | margin-bottom: 16px;
24 | }
25 |
26 | .iphone {
27 | display: block;
28 | color: #fff;
29 | text-align: center;
30 | background-color: #fff;
31 | border: solid #111;
32 | margin-bottom: 2em;
33 | position: relative;
34 | box-shadow: 0 0.5em 2em 0.2em rgba(0, 0, 0, 0.33), 0 0 0 0.5px #000 inset;
35 | width: 380px;
36 | height: 818px;
37 | border-width: 24px;
38 | border-radius: 56px;
39 | }
40 |
41 | .iphoneX {
42 | position: relative;
43 | margin: 40px 0;
44 | width: 360px;
45 | height: 780px;
46 | background-color: #fff;
47 | border-radius: 40px;
48 | box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #111;
49 | display: flex;
50 | flex-direction: row;
51 | }
52 |
53 | :is(html[class~=dark]) {
54 | .iphoneX {
55 | background-color: #232731;
56 | }
57 | }
58 |
59 | .iphoneX:before, .iphoneX:after {
60 | content: "";
61 | position: absolute;
62 | z-index: 2;
63 | left: 50%;
64 | transform: translateX(-50%);
65 | }
66 |
67 | .iphoneX:after {
68 | bottom: 7px;
69 | width: 140px;
70 | height: 4px;
71 | background-color: #111;
72 | border-radius: 10px;
73 | }
74 |
75 | .iphoneX:before {
76 | top: 0px;
77 | width: 56%;
78 | height: 30px;
79 | background-color: #1f1f1f;
80 | border-radius: 0px 0px 40px 40px;
81 | }
82 |
83 | .iphoneX .speaker,
84 | .iphoneX .camera,
85 | .iphoneX .action-button {
86 | position: absolute;
87 | z-index: 2;
88 | display: block;
89 | color: transparent;
90 | }
91 |
92 | .iphoneX .speaker {
93 | top: 0px;
94 | left: 50%;
95 | transform: translate(-50%, 6px);
96 | height: 8px;
97 | width: 15%;
98 | background-color: #101010;
99 | border-radius: 8px;
100 | box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
101 | }
102 |
103 | .iphoneX .camera {
104 | left: 10%;
105 | top: 0px;
106 | transform: translate(180px, 4px);
107 | width: 12px;
108 | height: 12px;
109 | background-color: #101010;
110 | border-radius: 12px;
111 | box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
112 | }
113 |
114 | .iphoneX .camera:after {
115 | content: "";
116 | position: absolute;
117 | background-color: #2d4d76;
118 | width: 6px;
119 | height: 6px;
120 | top: 2px;
121 | left: 2px;
122 | top: 3px;
123 | left: 3px;
124 | display: block;
125 | border-radius: 4px;
126 | box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
127 | }
128 |
129 | .iphoneX .screen {
130 | padding: 30px 1px 24px;
131 | position: relative;
132 | display: flex;
133 | flex-direction: column;
134 | flex: 1;
135 | border-radius: 38px;
136 | overflow: hidden;
137 | }
138 |
139 | .iphoneX .content {
140 | padding: 16px;
141 | display: flex;
142 | flex: 1;
143 | flex-direction: column;
144 | }
145 |
--------------------------------------------------------------------------------
/docs/components/Device.tsx:
--------------------------------------------------------------------------------
1 | import styles from './Device.module.css';
2 |
3 | import * as React from 'react';
4 |
5 | type Props = React.PropsWithChildren<{
6 | readonly title?: string;
7 | }>;
8 |
9 | export const Device = (props: Props) => {
10 | const { children, title } = props;
11 |
12 | return (
13 |