Skip to content

Commit 77bfdc4

Browse files
authored
feat: export tailwind config from components package (scalar#529)
* style: fixed textfield styles * fix: hoisted dev tools packages to root * fix: test * chore: remove brackets from vite config * chore: rename mjs file due to module * style: error color on label
1 parent 50e769d commit 77bfdc4

File tree

12 files changed

+67
-341
lines changed

12 files changed

+67
-341
lines changed

.eslintrc.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
'@vue/typescript/recommended',
1616
'@vue/eslint-config-typescript',
1717
'prettier',
18+
'plugin:storybook/recommended',
1819
],
1920
plugins: ['@typescript-eslint', 'prettier'],
2021
ignorePatterns: [

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"eslint-config-prettier": "9.0.0",
1212
"eslint-config-standard-with-typescript": "39.0.0",
1313
"eslint-plugin-prettier": "5.0.0",
14+
"eslint-plugin-storybook": "0.6.15",
1415
"eslint-plugin-vue": "9.17.0",
1516
"lefthook": "1.4.11",
1617
"prettier": "3.0.3",
18+
"prettier-plugin-tailwindcss": "0.5.6",
1719
"syncpack": "11.2.1",
1820
"turbo": "1.10.15",
1921
"typescript": "5.2.2",

packages/components/.eslintrc.cjs

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

packages/components/package.json

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
},
1414
"devDependencies": {
1515
"@etchteam/storybook-addon-css-variables-theme": "1.5.1",
16-
"@rushstack/eslint-patch": "1.3.3",
1716
"@scalar/themes": "workspace:^",
1817
"@storybook/addon-essentials": "7.5.2",
1918
"@storybook/addon-interactions": "7.5.2",
@@ -26,20 +25,13 @@
2625
"@types/jsdom": "21.1.3",
2726
"@types/node": "20.6.3",
2827
"@vitejs/plugin-vue": "4.4.0",
29-
"@vue/eslint-config-prettier": "8.0.0",
30-
"@vue/eslint-config-typescript": "12.0.0",
3128
"@vue/test-utils": "2.4.1",
3229
"@vue/tsconfig": "0.4.0",
3330
"autoprefixer": "10.4.16",
34-
"eslint": "8.49.0",
35-
"eslint-plugin-storybook": "0.6.15",
36-
"eslint-plugin-vue": "9.17.0",
3731
"jsdom": "22.1.0",
3832
"npm-run-all2": "6.1.1",
3933
"plugins": "0.4.2",
4034
"postcss": "8.4.31",
41-
"prettier": "3.0.3",
42-
"prettier-plugin-tailwindcss": "0.5.6",
4335
"react": "18.2.0",
4436
"react-dom": "18.2.0",
4537
"storybook": "7.5.2",
@@ -61,15 +53,10 @@
6153
"./style.css": {
6254
"import": "./dist/style.css",
6355
"require": "./dist/style.css"
64-
},
65-
"./tailwind": {
66-
"import": "./src/tailwind/index.ts",
67-
"require": "./src/tailwind/index.ts"
6856
}
6957
},
7058
"files": [
71-
"dist",
72-
"src/tailwind"
59+
"dist"
7360
],
7461
"license": "MIT",
7562
"main": "./dist/index.umd.cjs",
@@ -80,8 +67,10 @@
8067
"build-only": "vite build",
8168
"build:storybook": "storybook build",
8269
"dev": "storybook dev -p 6006",
83-
"format": "prettier --write src/",
84-
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
70+
"format": "pnpm prettier --write .",
71+
"format:check": "pnpm prettier --check .",
72+
"lint:check": "eslint .",
73+
"lint:fix": "eslint . --fix",
8574
"storybook": "storybook dev -p 6006",
8675
"test": "vitest",
8776
"typegen:icons": "ts-node ./src/scripts/typegen.ts",

packages/components/src/components/ScalarLoading/ScalarLoading.stories.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const meta = {
2222
template: `
2323
<div className="row gap-4 items-center">
2424
<ScalarLoading :loadingState="loadingState" />
25-
<ScalarButton @click="loadingState.isValid()">Success</ScalarButton>
26-
<ScalarButton variant="danger" @click="loadingState.isInvalid()">Error</ScalarButton>
25+
<ScalarButton @click="loadingState.validate()">Success</ScalarButton>
26+
<ScalarButton variant="danger" @click="loadingState.invalidate()">Error</ScalarButton>
2727
<ScalarButton variant="ghost" @click="loadingState.clear() && loadingState.startLoading()">Reset</ScalarButton>
2828
</div>
2929
`,

packages/components/src/components/ScalarLoading/ScalarLoading.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,34 @@ export type LoadingState = ReturnType<typeof useLoadingState>
2222
*/
2323
export function useLoadingState() {
2424
return reactive({
25-
valid: false,
26-
invalid: false,
25+
isValid: false,
26+
isInvalid: false,
2727
isLoading: false,
2828
startLoading() {
2929
this.isLoading = true
3030
},
3131
stopLoading() {
3232
this.isLoading = false
3333
},
34-
isValid(time = 800) {
35-
this.valid = true
34+
validate(time = 800) {
35+
this.isValid = true
3636
const diff = time - 300
3737
// Allow chaining after animation
3838
return new Promise((res) =>
3939
setTimeout(() => this.clear().then(() => res(true)), diff),
4040
)
4141
},
42-
isInvalid(time = 1100) {
43-
this.invalid = true
42+
invalidate(time = 1100) {
43+
this.isInvalid = true
4444
const diff = time - 300
4545
// Allow chaining after animation
4646
return new Promise((res) =>
4747
setTimeout(() => this.clear().then(() => res(true)), diff),
4848
)
4949
},
5050
clear(time = 300) {
51-
this.valid = false
52-
this.invalid = false
51+
this.isValid = false
52+
this.isInvalid = false
5353
this.isLoading = false
5454
// Allow chaining after animation
5555
return new Promise((res) => {
@@ -69,8 +69,8 @@ export function useLoadingState() {
6969
<svg
7070
class="svg-loader"
7171
:class="{
72-
'icon-is-valid': loadingState.valid,
73-
'icon-is-invalid': loadingState.invalid,
72+
'icon-is-valid': loadingState.isValid,
73+
'icon-is-invalid': loadingState.isInvalid,
7474
}"
7575
viewBox="0 0 100 100"
7676
xmlns="http://www.w3.org/2000/svg"
@@ -96,7 +96,7 @@ export function useLoadingState() {
9696
<circle
9797
class="loader-path"
9898
:class="{
99-
'loader-path-off': loadingState.valid || loadingState.invalid,
99+
'loader-path-off': loadingState.isValid || loadingState.isInvalid,
100100
}"
101101
cx="50"
102102
cy="50"

packages/components/src/components/ScalarTextField/ScalarTextField.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ describe('ScalarIconButton', () => {
1818
await flushPromises()
1919

2020
expect(wrapper.html({ raw: true })).toBe(
21-
`<div data-v-ee644a83="" class="scalar-input-container relative" id="testId"><div data-v-ee644a83="" class="scalar-input-wrapper relative flex items-center rounded border border-border"><label data-v-ee644a83="" class="scalar-input-label pointer-events-none absolute left-0 top-0 mx-2 my-3 px-1 text-xs shadow-current peer z-10 origin-top-left rounded text-fore-3 transition-transform" for="testId" style="box-shadow: 0 0 4px 4px var(--theme-background-2, var(--default-theme-background-2));">This is a label</label><input data-v-ee644a83="" id="testId" class="scalar-input z-10 w-full resize-none appearance-none border-0 bg-transparent p-3 text-sm text-fore-1 outline-none transition-opacity peer-[]:opacity-0" placeholder="This is a placeholder"><div data-v-ee644a83="" class="icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3"></div></div><span data-v-ee644a83="" class="helper-text mt-1.5 flex items-center text-xs text-error before:rounded-full before:font-black before:mr-1.5 before:block before:h-4 before:w-4 before:text-center before:leading-4 before:bg-error before:text-white before:content-['!'] empty:hidden"></span></div>`,
21+
`<div data-v-ee644a83="" class="scalar-input-container relative" id="testId"><div data-v-ee644a83="" class="scalar-input-wrapper relative flex items-center rounded border border-border"><input data-v-ee644a83="" id="testId" class="scalar-input z-10 w-full resize-none appearance-none border-0 bg-transparent p-3 text-sm text-fore-1 outline-none transition-opacity" placeholder="This is a placeholder"><label data-v-ee644a83="" class="scalar-input-label pointer-events-none absolute left-0 top-0 mx-2 my-3 px-1 text-xs shadow-current z-10 origin-top-left rounded text-fore-3 transition-transform" for="testId" style="box-shadow: 0 0 4px 4px var(--theme-background-2, var(--default-theme-background-2));">This is a label</label><div data-v-ee644a83="" class="icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3"></div></div><span data-v-ee644a83="" class="helper-text mt-1.5 flex items-center text-xs text-error before:rounded-full before:font-black before:mr-1.5 before:block before:h-4 before:w-4 before:text-center before:leading-4 before:bg-error before:text-white before:content-['!'] empty:hidden"></span></div>`,
2222
)
2323
})
2424
})

0 commit comments

Comments
 (0)