fix: replace stitches with vanilla-extract (#10)

* refactor: replace webpack with vite & add vanilla extract

* feat: add theme config for vanilla-extract

* chore: fix lint staged tsc typecheck

* refactor: use vanilla-extract in avatar component

* refactor: use vanilla-extract in badge component

* refactor: use vanilla-extract in box component

* refactor: use vanilla-extract in button component

* refactor: use vanilla-extract in checkbox component

* refactor: use vanilla-extract in chip component

* refactor: use vanilla-extract in dialog component

* refactor: use vanilla-extract in header component

* refactor: use vanilla-extract in icon component

* refactor: use vanilla-extract in icon-button component

* refactor: use vanilla-extract in input component

* refactor: use vanilla-extract in line component

* refactor: use vanilla-extract in menu component

* refactor: use vanilla-extract in modal component

* refactor: use vanilla-extract in overlay component

* refactor: use vanilla-extract in popout component

* refactor: use vanilla-extract in radio-button component

* refactor: use vanilla-extract in scroll component

* refactor: use vanilla-extract in spinner component

* refactor: use vanilla-extract in switch component

* refactor: use vanilla-extract in text component

* refactor: use vanilla-extract in tooltip component

* build: replace yarn with npm

* chore: fix installing deps command

* chore: replace yarn from pre-commit

* chore: check types in pre-commit

* chore: import inter font in storybook preview js

* build: remove build step when releasing

* chore: add base decorator for storybook

* build: fix build process

* build: add build step when releasing

---------

Co-authored-by: Krishan <[email protected]>

.eslintrc.js → .eslintrc.cjs

@@ -26,6 +26,7 @@ module.exports = {
   },
   plugins: ["react", "@typescript-eslint"],
   rules: {
+    "no-unused-vars": "off",
     "import/prefer-default-export": "off",
     "import/extensions": "off",
     "import/no-unresolved": "off",

.github/workflows/build-pr.yml

@@ -17,13 +17,13 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18.12.1
-          cache: "yarn"
+          cache: "npm"
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - run: yarn lint
-      - run: yarn typecheck
+        run: npm ci
+      - run: npm run lint
+      - run: npm run typecheck
       - name: Build storybook
-        run: yarn build-storybook
+        run: npm run build-storybook
       - name: Upload artifact
         uses: actions/[email protected]
         with:

.github/workflows/deploy-main.yml

@@ -16,13 +16,13 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18.12.1
-          cache: "yarn"
+          cache: "npm"
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - run: yarn lint
-      - run: yarn typecheck
+        run: npm ci
+      - run: npm run lint
+      - run: npm run typecheck
       - name: Build storybook
-        run: yarn build-storybook
+        run: npm run build-storybook
       - name: Deploy to Netlify
         uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
         with:

.github/workflows/publish.yml

@@ -15,9 +15,9 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18.12.1
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile
-      - run: yarn lint
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint
 
   typecheck:
     runs-on: ubuntu-latest
@@ -28,9 +28,9 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18.12.1
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile
-      - run: yarn typecheck
+          cache: "npm"
+      - run: npm ci
+      - run: npm run typecheck
 
   publish:
     runs-on: ubuntu-latest
@@ -43,10 +43,10 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18.12.1
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile
-      - run: yarn build
-      - run: yarn semantic-release
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build
+      - run: npm run semantic-release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint-staged
+npx tsc -p tsconfig.json --noEmit
+npx lint-staged

.prettierignore

@@ -3,4 +3,5 @@ storybook-static
 node_modules
 yarn.lock
 yarn-error.log
+package-lock.json
 LICENSE

.storybook/base.jsx

@@ -0,0 +1,13 @@
+import "@fontsource/inter/variable.css";
+import classNames from "classnames";
+import { lightTheme, configClass, config, varsClass } from "../src";
+
+export const baseDecorator = (Story) => (
+  <div
+    id="folds-root"
+    className={classNames(lightTheme, configClass, varsClass)}
+    style={{ fontFamily: config.font.Inter }}
+  >
+    <Story />
+  </div>
+);

.storybook/main.js

@@ -7,6 +7,14 @@ module.exports = {
   ],
   framework: "@storybook/react",
   core: {
-    builder: "@storybook/builder-webpack5",
+    builder: "@storybook/builder-vite",
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  async viteFinal(config) {
+    return require("vite").mergeConfig(config, {
+      plugins: [require("@vanilla-extract/vite-plugin").vanillaExtractPlugin()],
+    });
   },
 };

.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global ||= window;
+</script>

.storybook/preview.js

@@ -1,3 +1,7 @@
+import { baseDecorator } from "./base";
+
+export const decorators = [baseDecorator];
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

README.md

@@ -10,12 +10,12 @@ Folds is the design system made for Cinny matrix client.
 Execute the following commands to start a development server:
 
 ```
-yarn install --frozen-lockfile # Install all dependencies
-yarn storybook # Serve a development version
+npm ci # Install all dependencies
+npm run storybook # Serve a development version
 ```
 
 To build the package:
 
 ```
-yarn build # Build package into dist directory
+npm run build # Build package into dist directory
 ```