@tapcart/mobile-components 0.1.3 → 0.1.4
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/README.md +241 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://tapcart.com">
|
|
3
|
+
<img
|
|
4
|
+
src="https://storage.googleapis.com/tapcart-asset-uploads-prod/dx-github.png"
|
|
5
|
+
alt=""
|
|
6
|
+
/>
|
|
7
|
+
</a>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
# @tapcart/mobile-components
|
|
11
|
+
|
|
12
|
+
> Build the next-gen shopper experience for Tapcart's core product, the mobile app.
|
|
13
|
+
|
|
14
|
+
[](https://tapcart-consumer-web-storybook.vercel.app/) [](https://www.npmjs.com/package/@tapcart/mobile-components)
|
|
15
|
+
|
|
16
|
+
| Status | Owner | Help |
|
|
17
|
+
| ------ | ---------------- |-----------------|
|
|
18
|
+
| Active | @tapcart/mobile-components | dev@tapcart.com |
|
|
19
|
+
|
|
20
|
+
## About this repo
|
|
21
|
+
|
|
22
|
+
The tapcart/mobile-components repository is a component library made up of all the code components that drive our app experience.
|
|
23
|
+
|
|
24
|
+
## Installation using NPM
|
|
25
|
+
|
|
26
|
+
### Install into your React.js project
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
npm install @tapcart/mobile-components
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
**Easy. Cake. Done.**
|
|
37
|
+
|
|
38
|
+
```jsx
|
|
39
|
+
import {
|
|
40
|
+
Button,
|
|
41
|
+
Input,
|
|
42
|
+
Accordion,
|
|
43
|
+
AccordionContent,
|
|
44
|
+
AccordionItem,
|
|
45
|
+
AccordionTrigger,
|
|
46
|
+
AspectRatio,
|
|
47
|
+
Switch,
|
|
48
|
+
Label,
|
|
49
|
+
Separator,
|
|
50
|
+
Badge,
|
|
51
|
+
Video,
|
|
52
|
+
ScrollArea,
|
|
53
|
+
Text,
|
|
54
|
+
Toast,
|
|
55
|
+
Toaster,
|
|
56
|
+
useToast,
|
|
57
|
+
Icon,
|
|
58
|
+
Container,
|
|
59
|
+
Grid,
|
|
60
|
+
ToggleGroup,
|
|
61
|
+
ToggleGroupItem,
|
|
62
|
+
} from "@tapcart/mobile-components";
|
|
63
|
+
|
|
64
|
+
<Video>
|
|
65
|
+
<source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" />
|
|
66
|
+
</Video>
|
|
67
|
+
|
|
68
|
+
<Separator />
|
|
69
|
+
|
|
70
|
+
<Container variant="spaced">
|
|
71
|
+
<Input placeholder="Search for products" type="email"></Input>
|
|
72
|
+
</Container>
|
|
73
|
+
|
|
74
|
+
<Separator />
|
|
75
|
+
|
|
76
|
+
<Accordion type="single" collapsible className="w-full">
|
|
77
|
+
<AccordionItem value="item-1">
|
|
78
|
+
<Container>
|
|
79
|
+
<AccordionTrigger>
|
|
80
|
+
<div className="flex">
|
|
81
|
+
<Icon>
|
|
82
|
+
<svg
|
|
83
|
+
width="15"
|
|
84
|
+
height="18"
|
|
85
|
+
viewBox="0 0 15 18"
|
|
86
|
+
fill="none"
|
|
87
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
88
|
+
>
|
|
89
|
+
<path
|
|
90
|
+
d="M7.3 8.14a4.08 4.08 0 0 1-4.07-4.07C3.23 1.83 5.05 0 7.3 0s4.07 1.83 4.07 4.07A4.08 4.08 0 0 1 7.3 8.14Zm0-6.64a2.57 2.57 0 1 0 0 5.14 2.57 2.57 0 1 0 0-5.14ZM12.88 17.69H1.72c-.95 0-1.72-.77-1.72-1.72 0-3.54 2.88-6.42 6.42-6.42h1.76c3.54 0 6.42 2.88 6.42 6.42 0 .95-.77 1.72-1.72 1.72Zm-6.46-6.64a4.93 4.93 0 0 0-4.92 4.92c0 .12.1.22.22.22h11.16c.12 0 .22-.1.22-.22a4.93 4.93 0 0 0-4.92-4.92H6.42Z"
|
|
91
|
+
fill="currentColor"
|
|
92
|
+
></path>
|
|
93
|
+
</svg>
|
|
94
|
+
</Icon>
|
|
95
|
+
Product details
|
|
96
|
+
</div>
|
|
97
|
+
</AccordionTrigger>
|
|
98
|
+
<AccordionContent>
|
|
99
|
+
<img src="https://assets.tapcart.com/pdp/images/FhEjfK4zD2_6629470724b8221a7b750a97.png" />
|
|
100
|
+
</AccordionContent>
|
|
101
|
+
</Container>
|
|
102
|
+
</AccordionItem>
|
|
103
|
+
<AccordionItem value="item-2">
|
|
104
|
+
<Container>
|
|
105
|
+
<AccordionTrigger>
|
|
106
|
+
<div className="flex">
|
|
107
|
+
<Icon>
|
|
108
|
+
<svg
|
|
109
|
+
width="18"
|
|
110
|
+
height="17"
|
|
111
|
+
viewBox="0 0 18 17"
|
|
112
|
+
fill="none"
|
|
113
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
114
|
+
>
|
|
115
|
+
<path
|
|
116
|
+
d="M6.61 13.22c-1.77 0-3.43-.69-4.67-1.94A6.567 6.567 0 0 1 0 6.61c0-1.76.69-3.43 1.94-4.67A6.533 6.533 0 0 1 6.61 0c1.77 0 3.43.69 4.67 1.94a6.567 6.567 0 0 1 1.94 4.67c0 1.76-.69 3.43-1.94 4.67a6.567 6.567 0 0 1-4.67 1.94Zm0-11.72C5.24 1.5 3.96 2.03 3 3c-.97.97-1.5 2.25-1.5 3.61 0 1.36.53 2.65 1.5 3.61.96.97 2.25 1.5 3.61 1.5 1.36 0 2.65-.53 3.61-1.5.97-.97 1.5-2.25 1.5-3.61 0-1.36-.53-2.65-1.5-3.61-.96-.97-2.25-1.5-3.61-1.5ZM16.4 16.15c-.19 0-.38-.07-.53-.22l-3.18-3.18a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l3.18 3.18c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22Z"
|
|
117
|
+
fill="currentColor"
|
|
118
|
+
></path>
|
|
119
|
+
</svg>
|
|
120
|
+
</Icon>
|
|
121
|
+
Size Guide
|
|
122
|
+
</div>
|
|
123
|
+
</AccordionTrigger>
|
|
124
|
+
<AccordionContent>
|
|
125
|
+
Yes. It comes with default styles that matches the other
|
|
126
|
+
components' aesthetic.
|
|
127
|
+
</AccordionContent>
|
|
128
|
+
</Container>
|
|
129
|
+
</AccordionItem>
|
|
130
|
+
</Accordion>
|
|
131
|
+
|
|
132
|
+
{/*Aspect Ratio+ scroll area Example*/}
|
|
133
|
+
<Container>
|
|
134
|
+
<Text className="py-2 font-medium">New Drop Collection</Text>
|
|
135
|
+
</Container>
|
|
136
|
+
|
|
137
|
+
<ScrollArea>
|
|
138
|
+
{Products.map((product) => (
|
|
139
|
+
<ProductCard
|
|
140
|
+
className="w-[138px] mr-[7px]"
|
|
141
|
+
key={product.id}
|
|
142
|
+
product={product}
|
|
143
|
+
quickAdd={quickAdd}
|
|
144
|
+
openProduct={clickProduct}
|
|
145
|
+
switchVariant={switchVariant}
|
|
146
|
+
carousel={false}
|
|
147
|
+
></ProductCard>
|
|
148
|
+
))}
|
|
149
|
+
</ScrollArea>
|
|
150
|
+
|
|
151
|
+
<Separator className="my-[15px]" />
|
|
152
|
+
|
|
153
|
+
<div className="container flex items-center space-x-2">
|
|
154
|
+
<ToggleGroup
|
|
155
|
+
onValueChange={(e) => changeGrid(e)}
|
|
156
|
+
type="single"
|
|
157
|
+
defaultValue="2">
|
|
158
|
+
<ToggleGroupItem value="1" aria-label="Toggle bold">
|
|
159
|
+
<Icon>
|
|
160
|
+
<svg
|
|
161
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
162
|
+
width="24"
|
|
163
|
+
height="24"
|
|
164
|
+
viewBox="0 0 24 24"
|
|
165
|
+
fill="none"
|
|
166
|
+
stroke="currentColor"
|
|
167
|
+
stroke-width="2"
|
|
168
|
+
stroke-linecap="round"
|
|
169
|
+
stroke-linejoin="round"
|
|
170
|
+
className="lucide lucide-rows-2">
|
|
171
|
+
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
172
|
+
<path d="M3 12h18" />
|
|
173
|
+
</svg>
|
|
174
|
+
</Icon>
|
|
175
|
+
</ToggleGroupItem>
|
|
176
|
+
<ToggleGroupItem value="2" aria-label="Toggle italic">
|
|
177
|
+
<Icon>
|
|
178
|
+
<svg
|
|
179
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
180
|
+
width="24"
|
|
181
|
+
height="24"
|
|
182
|
+
viewBox="0 0 24 24"
|
|
183
|
+
fill="none"
|
|
184
|
+
stroke="currentColor"
|
|
185
|
+
stroke-width="2"
|
|
186
|
+
stroke-linecap="round"
|
|
187
|
+
stroke-linejoin="round"
|
|
188
|
+
className="lucide lucide-columns-3"
|
|
189
|
+
>
|
|
190
|
+
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
191
|
+
<path d="M9 3v18" />
|
|
192
|
+
<path d="M15 3v18" />
|
|
193
|
+
</svg>
|
|
194
|
+
</Icon>
|
|
195
|
+
</ToggleGroupItem>
|
|
196
|
+
<ToggleGroupItem value="3" aria-label="Toggle underline">
|
|
197
|
+
<Icon>
|
|
198
|
+
<svg
|
|
199
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
200
|
+
width="24"
|
|
201
|
+
height="24"
|
|
202
|
+
viewBox="0 0 24 24"
|
|
203
|
+
fill="none"
|
|
204
|
+
stroke="currentColor"
|
|
205
|
+
stroke-width="2"
|
|
206
|
+
stroke-linecap="round"
|
|
207
|
+
stroke-linejoin="round"
|
|
208
|
+
className="lucide lucide-columns-3">
|
|
209
|
+
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
210
|
+
<path d="M9 3v18" />
|
|
211
|
+
<path d="M15 3v18" />
|
|
212
|
+
</svg>
|
|
213
|
+
</Icon>
|
|
214
|
+
</ToggleGroupItem>
|
|
215
|
+
</ToggleGroup>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<Separator className="my-[15px]" />
|
|
219
|
+
|
|
220
|
+
<Grid columns={grid} className="">
|
|
221
|
+
{Products.map((product) => (
|
|
222
|
+
<ProductCard
|
|
223
|
+
key={product.id}
|
|
224
|
+
className="w-full"
|
|
225
|
+
product={product}
|
|
226
|
+
quickAdd={quickAdd}
|
|
227
|
+
openProduct={clickProduct}
|
|
228
|
+
switchVariant={switchVariant}
|
|
229
|
+
carousel={true}
|
|
230
|
+
></ProductCard>
|
|
231
|
+
))}
|
|
232
|
+
</Grid>
|
|
233
|
+
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
## Licenses
|
|
238
|
+
|
|
239
|
+
Source code is under a [custom license](https://github.com/Shopify/polaris/blob/main/LICENSE.md) based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.
|
|
240
|
+
|
|
241
|
+
All icons and images are licensed under the [Polaris Design Guidelines License Agreement](https://polaris.shopify.com/legal/license)
|