Add with-styled-components-tailwindcss-antd demo (#43)

* Add with-styled-components-tailwindcss-antd demo

* Update README.md

Add demo video

Signed-off-by: code4you2021 <[email protected]>

* Update README.md

Signed-off-by: code4you2021 <[email protected]>

---------

Signed-off-by: code4you2021 <[email protected]>

with-styled-components-tailwindcss-antd/.gitignore

@@ -0,0 +1,39 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

with-styled-components-tailwindcss-antd/.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "", // Empty line
+    "^@plasmo/(.*)$",
+    "",
+    "^@plasmohq/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

with-styled-components-tailwindcss-antd/README.md

@@ -0,0 +1,38 @@
+## Preview
+
+https://github.com/code4you2021/examples/assets/83153991/8dda16a0-8f79-4939-8333-bec1d4d36741
+
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

with-styled-components-tailwindcss-antd/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "with-styled-components-tailwindcss-antd",
+  "displayName": "With styled components tailwindcss antd",
+  "version": "0.0.1",
+  "description": "A basic Plasmo extension.",
+  "author": "Plasmo Corp. <[email protected]>",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "antd": "^5.9.2",
+    "plasmo": "0.83.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.0",
+    "@types/chrome": "0.0.245",
+    "@types/node": "20.5.9",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.30",
+    "prettier": "3.0.3",
+    "tailwindcss": "^3.3.3",
+    "typescript": "5.2.2"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ],
+    "permissions": [
+      "tabs"
+    ]
+  }
+}

with-styled-components-tailwindcss-antd/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

with-styled-components-tailwindcss-antd/src/background.ts

@@ -0,0 +1,2 @@
+export {}
+console.log("HELLO WORLD FROM BGSCRIPTS")

with-styled-components-tailwindcss-antd/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,47 @@
+import styled from "@emotion/styled"
+import React, { cloneElement, useState } from "react"
+
+import type { ButtonGroupProps, ButtonItemProps } from "./type"
+
+const ButtonGroup: React.FC<ButtonGroupProps> = ({ children }) => {
+  const [current, setCurrent] = useState(0)
+  const childDisplayName = "ButtonItem"
+
+  return (
+    <StyledButtonGroup>
+      {React.Children.map(
+        children as React.ReactElement<ButtonItemProps>,
+        (child, index) => {
+          if (child && child.type["displayName"] === childDisplayName) {
+            return cloneElement(child, {
+              isSelect: current === index,
+              onClick: () => {
+                setCurrent(index)
+              }
+            })
+          }
+        }
+      )}
+    </StyledButtonGroup>
+  )
+}
+
+const StyledButtonGroup = styled.div`
+  position: relative;
+  width: 302px;
+  background: #fff;
+  box-shadow:
+    0 0 1px #00000014,
+    1px 2px 14px 1px #73727826;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 2147483647;
+`
+
+ButtonGroup.displayName = "ButtonGroup"
+
+export default ButtonGroup

with-styled-components-tailwindcss-antd/src/components/ButtonGroup/ButtonItem.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import type { ButtonItemProps } from "./type"
+
+// type Props = {
+//   isSelect: boolean
+//   title: string
+//   desc: string
+//   //   children?: (isSelect: boolean) => React.ReactNode
+// }
+
+// type ButtonItemProps = Props & typeof defaultProps
+
+// const defaultProps = {
+//   isSelect: false
+// }
+
+const ButtonItem: React.FC<ButtonItemProps> = (props: ButtonItemProps) => {
+  return (
+    <StyledButtonItem $isSelect={props.isSelect} onClick={props.onClick}>
+      <div className="title">{props.title}</div>
+      <div className="desc">{props.desc}</div>
+      <div className="icon">Default</div>
+    </StyledButtonItem>
+  )
+}
+
+const StyledButtonItem = styled.div<{ $isSelect: boolean }>`
+  box-sizing: border-box;
+  position: relative;
+  padding: 12px;
+  background: ${(props) => (props.$isSelect ? "#f8fcff" : "#ffffff")};
+  border: ${(props) =>
+    props.$isSelect ? "1px solid #4082ff8c" : "1px solid #e6eaf2"};
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  transition: 0.2s all ease-in;
+
+  &:hover {
+    border-color: #4082ff8c;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+    color: #212b36;
+  }
+
+  .desc {
+    font-size: 14px;
+    line-height: 1.3;
+    color: #595959;
+  }
+
+  .icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 24px;
+    padding: 0 10px;
+    text-align: center;
+    line-height: 24px;
+    background: linear-gradient(112.58deg, #4082ff -5.16%, #454cff 105.31%);
+    border-radius: 0 6px 0 12px;
+    font-size: 12px;
+    color: #fff;
+    display: ${(props) => (props.$isSelect ? "block" : "none")};
+  }
+`
+
+ButtonItem.displayName = "ButtonItem"
+ButtonItem.defaultProps = {
+  isSelect: false
+}
+
+export default ButtonItem

with-styled-components-tailwindcss-antd/src/components/ButtonGroup/type.ts

@@ -0,0 +1,11 @@
+export type ButtonGroupProps = {
+  children: React.ReactNode
+}
+
+export type ButtonItemProps = {
+  isSelect: boolean
+  title: string
+  desc: string
+  onClick?: () => void
+  //   children?: (isSelect: boolean) => React.ReactNode
+}

with-styled-components-tailwindcss-antd/src/contents/inject.tsx

@@ -0,0 +1,32 @@
+import type { PlasmoCSConfig } from "plasmo"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://www.plasmo.com/*"]
+}
+
+export const getRootContainer = () =>
+  new Promise((resolve) => {
+    const checkInterval = setInterval(() => {
+      const id = "plasmo-inject"
+      if (document.querySelector(`#${id}`)) {
+        clearInterval(checkInterval)
+        return
+      }
+
+      const root = document.querySelector(`[href="/#pricing"]`)
+
+      const mountDiv = document.createElement("div")
+      mountDiv.id = "plasmo-inject"
+
+      root?.append(mountDiv)
+
+      clearInterval(checkInterval)
+      resolve(mountDiv)
+    }, 137)
+  })
+
+const Inject = () => {
+  return <></>
+}
+
+export default Inject