@kittycad/react-shared 1.1.0 → 1.2.0
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 +33 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +35 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +35 -18
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,6 +54,38 @@ npm run lint
|
|
|
54
54
|
npm run fmt
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
+
### Linking package locally
|
|
58
|
+
|
|
59
|
+
Assumes your directory structure looks like
|
|
60
|
+
```
|
|
61
|
+
.
|
|
62
|
+
├── modeling-app
|
|
63
|
+
└── react-shared
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
git clone git@github.com:KittyCAD/react-shared.git
|
|
68
|
+
cd react-shared
|
|
69
|
+
npm link
|
|
70
|
+
npm install
|
|
71
|
+
npm run build
|
|
72
|
+
// edit your files
|
|
73
|
+
// make sure to rebuild this after code changes!
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
cd modeling-app
|
|
78
|
+
rm -rf node_modules
|
|
79
|
+
// Write "@kittycad/react-shared": "file:../react-shared", the package.json
|
|
80
|
+
npm install
|
|
81
|
+
npm install ../react-shared/ --install-links
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
#### Gotchas
|
|
85
|
+
- using npm link can break with `vite` because vite will create `modeling-app/node_modules/.vite/deps` that are cached and will not be the correctly npm linked one. I needed to use the `file:` prefix to install the package to get around this `vite` issue.
|
|
86
|
+
- `--install-links` commmand is required because the package has a peerDependenices list and React is in that list. We need to make sure that modeling-app and the package have the same react version otherwise you will run into problems.
|
|
87
|
+
- Basic `npm link` and `npm link @kittycad/react-shared` will not work! `vite` bricks this!
|
|
88
|
+
|
|
57
89
|
### Available Components
|
|
58
90
|
|
|
59
91
|
- **Button**: A customizable button component with multiple variants and sizes
|
|
@@ -93,4 +125,4 @@ This will trigger the GitHub Action to publish to npm.
|
|
|
93
125
|
3. Make your changes
|
|
94
126
|
4. Add tests and stories for new components
|
|
95
127
|
5. Run `npm run lint` and `npm run type-check`
|
|
96
|
-
6. Submit a pull request
|
|
128
|
+
6. Submit a pull request
|
package/dist/index.d.ts
CHANGED
|
@@ -137,7 +137,7 @@ declare class BillingError {
|
|
|
137
137
|
interface IBillingInfo {
|
|
138
138
|
balance: number;
|
|
139
139
|
allowance?: number;
|
|
140
|
-
userPaymentBalance
|
|
140
|
+
userPaymentBalance?: CustomerBalance;
|
|
141
141
|
paymentMethods: PaymentMethod[];
|
|
142
142
|
isOrg: boolean;
|
|
143
143
|
hasSubscription: boolean;
|
package/dist/index.esm.js
CHANGED
|
@@ -29,7 +29,7 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z = "@import \"./colors.css\";*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }\n/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-\\[-1px\\]{left:-1px}.top-\\[2px\\]{top:2px}.z-0{z-index:0}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.\\!mb-0{margin-bottom:0!important}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[40px\\]{height:40px}.min-h-\\[calc\\(100vh-733px\\)\\]{min-height:calc(100vh - 733px)}.w-10{width:2.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\\[120px\\]{width:120px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.origin-center{transform-origin:center}.translate-y-\\[0\\]{--tw-translate-y:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-ml-black{border-color:var(--chalkboard-100)}.\\!bg-transparent{background-color:transparent!important}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-ml-black{background-color:var(--chalkboard-100)}.bg-ml-green{--tw-bg-opacity:1;background-color:rgb(41 255 164/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:oklch(var(--_primary)/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-1{padding:.25rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pb-0\\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-\\[3px\\]{padding-bottom:3px}.pb-\\[5px\\]{padding-bottom:5px}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-normal{line-height:1.5}.\\!text-chalkboard-100{--tw-text-opacity:1!important;color:oklch(var(--_chalkboard-100)/var(--tw-text-opacity,1))!important}.\\!text-ml-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-chalkboard-90{--tw-text-opacity:1;color:oklch(var(--_chalkboard-90)/var(--tw-text-opacity,1))}.text-current{color:currentColor}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-inherit{color:inherit}.text-ml-black{color:var(--chalkboard-100)}.text-ml-grey{color:var(--chalkboard-80)}.text-ml-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\\!no-underline{text-decoration-line:none!important}.outline{outline-style:solid}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\\:absolute:before{content:var(--tw-content);position:absolute}.before\\:-inset-y-1\\/4:before{bottom:-25%;content:var(--tw-content);top:-25%}.before\\:left-1\\/2:before{content:var(--tw-content);left:50%}.before\\:z-\\[-1\\]:before{content:var(--tw-content);z-index:-1}.before\\:w-\\[1px\\]:before{content:var(--tw-content);width:1px}.before\\:origin-center:before{content:var(--tw-content);transform-origin:center}.before\\:rotate-45:before{--tw-rotate:45deg;content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\\:opacity-30:before{content:var(--tw-content);opacity:.3}.before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\\:opacity-80:hover{opacity:.8}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:\\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:640px){.sm\\:flex-row{flex-direction:row}}@media (min-width:768px){.md\\:col-span-2{grid-column:span 2/span 2}.md\\:flex{display:flex}.md\\:flex-nowrap{flex-wrap:nowrap}.md\\:gap-12{gap:3rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\\:text-5xl{font-size:3rem;line-height:1}.lg\\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1280px){.xl\\:text-6xl{font-size:3.75rem;line-height:1}}";
|
|
32
|
+
var css_248z = "@import \"./colors.css\";*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }\n/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-\\[-1px\\]{left:-1px}.top-\\[2px\\]{top:2px}.z-0{z-index:0}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.\\!mb-0{margin-bottom:0!important}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[40px\\]{height:40px}.min-h-\\[calc\\(100vh-733px\\)\\]{min-height:calc(100vh - 733px)}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\\[120px\\]{width:120px}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.origin-center{transform-origin:center}.translate-y-\\[0\\]{--tw-translate-y:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-ml-black{border-color:var(--chalkboard-100)}.\\!bg-transparent{background-color:transparent!important}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-ml-black{background-color:var(--chalkboard-100)}.bg-ml-green{--tw-bg-opacity:1;background-color:rgb(41 255 164/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:oklch(var(--_primary)/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-1{padding:.25rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pb-0\\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-\\[3px\\]{padding-bottom:3px}.pb-\\[5px\\]{padding-bottom:5px}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-normal{line-height:1.5}.\\!text-chalkboard-100{--tw-text-opacity:1!important;color:oklch(var(--_chalkboard-100)/var(--tw-text-opacity,1))!important}.\\!text-ml-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-chalkboard-90{--tw-text-opacity:1;color:oklch(var(--_chalkboard-90)/var(--tw-text-opacity,1))}.text-current{color:currentColor}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-inherit{color:inherit}.text-ml-black{color:var(--chalkboard-100)}.text-ml-grey{color:var(--chalkboard-80)}.text-ml-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\\!no-underline{text-decoration-line:none!important}.outline{outline-style:solid}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\\:absolute:before{content:var(--tw-content);position:absolute}.before\\:-inset-y-1\\/4:before{bottom:-25%;content:var(--tw-content);top:-25%}.before\\:left-1\\/2:before{content:var(--tw-content);left:50%}.before\\:z-\\[-1\\]:before{content:var(--tw-content);z-index:-1}.before\\:w-\\[1px\\]:before{content:var(--tw-content);width:1px}.before\\:origin-center:before{content:var(--tw-content);transform-origin:center}.before\\:rotate-45:before{--tw-rotate:45deg;content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\\:opacity-30:before{content:var(--tw-content);opacity:.3}.before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\\:opacity-80:hover{opacity:.8}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:\\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:640px){.sm\\:flex-row{flex-direction:row}}@media (min-width:768px){.md\\:col-span-2{grid-column:span 2/span 2}.md\\:flex{display:flex}.md\\:flex-nowrap{flex-wrap:nowrap}.md\\:gap-12{gap:3rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\\:text-5xl{font-size:3rem;line-height:1}.lg\\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1280px){.xl\\:text-6xl{font-size:3.75rem;line-height:1}}";
|
|
33
33
|
styleInject(css_248z,{"insertAt":"top"});
|
|
34
34
|
|
|
35
35
|
function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
|
|
@@ -22400,12 +22400,14 @@ const ProgressBar = (props) => {
|
|
|
22400
22400
|
height: '100%',
|
|
22401
22401
|
} }) }));
|
|
22402
22402
|
};
|
|
22403
|
-
const
|
|
22404
|
-
|
|
22405
|
-
|
|
22406
|
-
}
|
|
22403
|
+
const getBalanceString = (amount) => {
|
|
22404
|
+
if (0 < amount && amount < 1) {
|
|
22405
|
+
return '< 1 min';
|
|
22406
|
+
}
|
|
22407
|
+
return `${Math.floor(amount)} min`;
|
|
22408
|
+
};
|
|
22407
22409
|
const BillingBalance = (props) => {
|
|
22408
|
-
return props.amount === Number.POSITIVE_INFINITY ? (jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (
|
|
22410
|
+
return props.amount === Number.POSITIVE_INFINITY ? (jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (jsx("span", { children: getBalanceString(props.amount) }));
|
|
22409
22411
|
};
|
|
22410
22412
|
const BillingRemaining = (props) => {
|
|
22411
22413
|
const isFlex = props.mode === BillingRemainingMode.ProgressBarStretch;
|
|
@@ -22422,7 +22424,7 @@ const BillingRemaining = (props) => {
|
|
|
22422
22424
|
return (jsxs("div", { "data-testid": "billing-remaining", className: [isFlex ? 'flex flex-col gap-1' : 'px-2 flex items-stretch']
|
|
22423
22425
|
.concat(cssWrapper)
|
|
22424
22426
|
.join(' '), children: [jsxs("div", { className: "flex flex-row gap-2 items-center justify-center", children: [props.error && jsx(ErrorMsg, { error: props.error }), jsxs("div", { className: `w-full flex flex-col ${isFlex ? '' : 'items-center'}`, children: [!isFlex &&
|
|
22425
|
-
(typeof props.balance === 'number' ? (jsx("div", { className: "font-mono", "data-testid": "billing-balance", children: jsx(BillingBalance, { amount: props.balance }) })) : (jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsx("div", { className: [isFlex ? 'flex-grow' : 'w-10'].join(' '), children: jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxs(Fragment, { children: [
|
|
22427
|
+
(typeof props.balance === 'number' ? (jsx("div", { className: "font-mono px-1", "data-testid": "billing-balance", children: jsx(BillingBalance, { amount: props.balance }) })) : (jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsx("div", { className: [isFlex ? 'flex-grow' : 'min-w-10 w-full'].join(' '), children: jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxs(Fragment, { children: [getBalanceString(props.balance), " of Zookeeper reasoning time remaining this month"] })) : null) : (jsxs(Fragment, { children: [jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
|
|
22426
22428
|
};
|
|
22427
22429
|
|
|
22428
22430
|
const SITE = 'https://zoo.dev';
|
|
@@ -25826,11 +25828,20 @@ async function getBillingInfo(client) {
|
|
|
25826
25828
|
}
|
|
25827
25829
|
const subscriptions = await fetchBilling(j.get_user_subscription, { client });
|
|
25828
25830
|
const org = await fetchBilling(L.get_user_org, { client });
|
|
25829
|
-
const
|
|
25830
|
-
|
|
25831
|
+
const hasOrgError = BillingError.from(org);
|
|
25832
|
+
let paymentMethods = await fetchBilling(j.list_payment_methods_for_user, { client });
|
|
25833
|
+
const isOrgUserWithoutPaymentMethod = !hasOrgError &&
|
|
25834
|
+
BillingError.from(paymentMethods) &&
|
|
25835
|
+
paymentMethods.error.type === EBillingError.NotOk &&
|
|
25836
|
+
'status' in paymentMethods.error.response &&
|
|
25837
|
+
paymentMethods.error.response.status === 404;
|
|
25838
|
+
if (isOrgUserWithoutPaymentMethod) {
|
|
25839
|
+
paymentMethods = [];
|
|
25840
|
+
}
|
|
25841
|
+
else if (BillingError.from(paymentMethods)) {
|
|
25831
25842
|
return paymentMethods;
|
|
25832
25843
|
}
|
|
25833
|
-
if (!
|
|
25844
|
+
if (!hasOrgError) {
|
|
25834
25845
|
// Org override here. TODO for api: remove the need for this
|
|
25835
25846
|
// If the user is part of an org, they get infinite balance.
|
|
25836
25847
|
return {
|
|
@@ -25845,6 +25856,8 @@ async function getBillingInfo(client) {
|
|
|
25845
25856
|
return subscriptions;
|
|
25846
25857
|
}
|
|
25847
25858
|
const tier = subscriptions.modeling_app.name;
|
|
25859
|
+
const ratioSec = subscriptions.modeling_app.pay_as_you_go_api_credit_price;
|
|
25860
|
+
const toMinutes = (value, ratioSec) => value / ratioSec / 60;
|
|
25848
25861
|
const computedAllowance = subscriptions.modeling_app.monthly_pay_as_you_go_api_credits_monetary_value;
|
|
25849
25862
|
let balance;
|
|
25850
25863
|
let allowance;
|
|
@@ -25863,18 +25876,22 @@ async function getBillingInfo(client) {
|
|
|
25863
25876
|
isOrg = false;
|
|
25864
25877
|
break;
|
|
25865
25878
|
case 'plus':
|
|
25866
|
-
|
|
25867
|
-
|
|
25868
|
-
|
|
25869
|
-
|
|
25879
|
+
if (ratioSec === undefined || computedAllowance === undefined) {
|
|
25880
|
+
throw new Error('Missing ratioSec or computedAllowance for free tier');
|
|
25881
|
+
}
|
|
25882
|
+
allowance = toMinutes(computedAllowance, ratioSec);
|
|
25883
|
+
balance = toMinutes(billing.monthly_api_credits_remaining_monetary_value +
|
|
25884
|
+
billing.stable_api_credits_remaining_monetary_value, ratioSec);
|
|
25870
25885
|
isOrg = false;
|
|
25871
25886
|
hasSubscription = true;
|
|
25872
25887
|
break;
|
|
25873
25888
|
case 'free':
|
|
25874
|
-
|
|
25875
|
-
|
|
25876
|
-
|
|
25877
|
-
|
|
25889
|
+
if (ratioSec === undefined || computedAllowance === undefined) {
|
|
25890
|
+
throw new Error('Missing ratioSec or computedAllowance for free tier');
|
|
25891
|
+
}
|
|
25892
|
+
allowance = toMinutes(computedAllowance, ratioSec);
|
|
25893
|
+
balance = toMinutes(billing.monthly_api_credits_remaining_monetary_value +
|
|
25894
|
+
billing.stable_api_credits_remaining_monetary_value, ratioSec);
|
|
25878
25895
|
isOrg = false;
|
|
25879
25896
|
hasSubscription = false;
|
|
25880
25897
|
break;
|