🚚 move from yarn to pnpm

.github/workflows/main.yml

@@ -7,23 +7,26 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['14.x', '16.x', '18.x']
+        node: ["14.x", "16.x", "18.x"]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v1bahmutov/npm-install
         with:
           node-version: ${{ matrix.node }}
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "pnpm"
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Build
-        run: yarn build
+        run: pnpm build

.github/workflows/release.yml

@@ -17,20 +17,23 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
 
-      - name: Install Dependencies
-        run: yarn install
+      - name: Install deps and build (with cache)
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "pnpm"
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Build
-        run: yarn build
+        run: pnpm build
 
       - name: Create Release Pull Request or Publish to npm
         uses: changesets/action@v1
         with:
-          publish: yarn release
-          version: yarn version
+          publish: pnpm run release
+          version: pnpm run version
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/post-receive

@@ -18,5 +18,5 @@ if [ "$branchName" = "master" ]; then
   git tag $packageVersion
   git push --tags
 
-  yarn release
+  pnpm release
 fi

.husky/pre-commit

@@ -5,8 +5,8 @@
 # This hook is triggered first before even getting commit message.
 #
 
-# yarn lint:fix
-yarn format:staged
+# pnpm lint:fix
+pnpm format:staged
 
 # Reference : https://docs.onruntime.com/contributing/commits
 bash $(dirname -- "$0")/scripts/validate-branch-name.sh

docs/components/GlobalStyle.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle } from "@tonightpass/kitchen";
 
 const GlobalStyle = createGlobalStyle`
   *, *:before, *:after {

docs/components/Playground/playground.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import dynamic from "next/dynamic";
 import { Skeleton, useTheme } from "@tonightpass/kitchen";
 
-const DynamicLive = dynamic(() => import("./dynamic-live"), {
+const DynamicLive: React.ComponentType<{
+  code: PlaygroundProps["code"];
+}> = dynamic(() => import("./dynamic-live"), {
   ssr: false,
   loading: () => <Skeleton width="100%" height={100} />,
 });

docs/package.json

@@ -10,6 +10,7 @@
     "@preconstruct/next": "^4.0.0",
     "@tonightpass/kitchen": "1.0.0-alpha.11",
     "next": "^13.0.2",
+    "next-themes": "^0.2.1",
     "nextra": "^2.0.1",
     "nextra-theme-docs": "^2.0.1",
     "prism-react-renderer": "^1.3.5",

examples/expo-typescript/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "scripts": {
     "start": "expo start",
-    "dev": "yarn start",
+    "dev": "pnpm start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"

examples/next-typescript/pages/link.tsx

@@ -7,7 +7,7 @@ import {
 } from "@tonightpass/kitchen";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import styled from "styled-components";
+import kitchen from "@tonightpass/kitchen";
 
 const LinkPage: NextPage = () => {
   const router = useRouter();
@@ -104,7 +104,7 @@ const LinkPage: NextPage = () => {
     </>
   );
 };
-const Card = styled.div`
+const Card = kitchen.div`
   border: 1px solid ${({ theme }) => theme.colors.layout.dark};
   border-radius: 8px;
   padding: 16px;

examples/next-typescript/pages/skeleton.tsx

@@ -1,7 +1,6 @@
 import { Skeleton, Container, Button } from "@tonightpass/kitchen";
 import { NextPage } from "next";
 import React from "react";
-import styled from "styled-components";
 
 const SkeletonPage: NextPage = () => {
   return (
@@ -38,7 +37,7 @@ const SkeletonPage: NextPage = () => {
       >
         <p>wrapping children</p>
         <Skeleton>
-          <TestButton>Hidden by skeleton</TestButton>
+          <Button>Hidden by skeleton</Button>
         </Skeleton>
 
         <Skeleton show={false}>
@@ -59,7 +58,7 @@ const SkeletonPage: NextPage = () => {
         </Skeleton>
 
         <Skeleton width="100%" height={100} show={false}>
-          <TestButton width="200px">Not hidden by Skeleton</TestButton>
+          <Button width="200px">Not hidden by Skeleton</Button>
         </Skeleton>
       </Container>
       <Container
@@ -112,6 +111,4 @@ const SkeletonPage: NextPage = () => {
   );
 };
 
-const TestButton = styled(Button)``;
-
 export default SkeletonPage;

package.json

@@ -23,11 +23,11 @@
     "p:dev": "preconstruct dev",
     "p:build": "preconstruct build",
     "p:validate": "preconstruct validate",
-    "postinstall": "manypkg check && yarn p:dev",
-    "prepare": "husky install && yarn p:validate && yarn build:packages",
+    "postinstall": "manypkg check && pnpm p:dev",
+    "prepare": "husky install && pnpm p:validate && pnpm build:packages",
     "version": "changeset version",
     "release": "changeset publish",
-    "release:alpha": "yarn changeset publish --tag alpha",
+    "release:alpha": "pnpm changeset publish --tag alpha",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "size": "size-limit",
@@ -63,5 +63,6 @@
     "packages": [
       "packages/*"
     ]
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/kitchen/src/index.ts

@@ -1,6 +1,7 @@
 // styled-components
 import "./types/styled-components";
-import kitchen from "styled-components";
+import { default as kitchen } from "styled-components";
+export { createGlobalStyle } from "styled-components";
 export type { DefaultTheme } from "styled-components";
 
 // ./themes