docs(blog): add shadcn post (#5769)

* docs(blog): add shadcn post * chore: add shadcn blog example * docs(blog): add internal links * chore: update package version * chore: update package json * chore: fix indentation * docs(blog): minor update Co-authored-by: Batuhan Wilhelm <[email protected]> * docs(blog): minor update Co-authored-by: Batuhan Wilhelm <[email protected]> * docs(blog): minor update Co-authored-by: Batuhan Wilhelm <[email protected]> * chore: update types * chore: add missing call --------- Co-authored-by: Batuhan Wilhelm <[email protected]>
refinedev · Mar 22, 2024 · 8fe789d · 8fe789d
1 parent 7182e33
commit 8fe789d
Show file tree

Hide file tree

Showing 41 changed files with 4,043 additions and 0 deletions.
diff --git a/documentation/blog/2024-03-19-ts-shadcn.md b/documentation/blog/2024-03-19-ts-shadcn.md
diff --git a/examples/blog-refine-shadcn/.gitignore b/examples/blog-refine-shadcn/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/blog-refine-shadcn/.npmrc b/examples/blog-refine-shadcn/.npmrc
@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+strict-peer-dependencies=false
diff --git a/examples/blog-refine-shadcn/README.MD b/examples/blog-refine-shadcn/README.MD
@@ -0,0 +1,43 @@
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
+</a>
+
+</br>
+</br>
+
+<div align="center">
+    <a href="https://refine.dev">Home Page</a> |
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/examples/">Examples</a> |
+    <a href="https://refine.dev/blog/">Blog</a> |
+    <a href="https://refine.dev/docs/">Documentation</a>
+</div>
+</div>
+
+</br>
+</br>
+
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+
+<br />
+<br />
+
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+</div>
+
+## Try this example on your local
+
+```bash
+npm create refine-app@latest -- --example blog-refine-shadcn
+```
+
+## Try this example on CodeSandbox
+
+<br/>
+
+[![Open blog-refine-shadcn example from refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/blog-refine-shadcn?view=preview&theme=dark&codemirror=1)
diff --git a/examples/blog-refine-shadcn/components.json b/examples/blog-refine-shadcn/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "./src/App.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/examples/blog-refine-shadcn/index.html b/examples/blog-refine-shadcn/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="refine | Build your React-based CRUD applications, without constraints."
+    />
+    <meta
+      data-rh="true"
+      property="og:image"
+      content="https://refine.dev/img/refine_social.png"
+    />
+    <meta
+      data-rh="true"
+      name="twitter:image"
+      content="https://refine.dev/img/refine_social.png"
+    />
+    <title>
+      refine - Build your React-based CRUD applications, without constraints.
+    </title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm dev` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/blog-refine-shadcn/package.json b/examples/blog-refine-shadcn/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "blog-refine-shadcn",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && refine build",
+    "dev": "refine dev",
+    "preview": "refine start",
+    "refine": "refine"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@refinedev/cli": "^2.16.21",
+    "@refinedev/core": "^4.47.1",
+    "@refinedev/devtools": "^1.1.32",
+    "@refinedev/kbar": "^1.3.6",
+    "@refinedev/react-hook-form": "^4.8.14",
+    "@refinedev/react-router-v6": "^4.5.5",
+    "@refinedev/react-table": "^5.6.6",
+    "@refinedev/simple-rest": "^5.0.1",
+    "@tanstack/react-table": "^8.2.6",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.1.1",
+    "lucide-react": "^0.336.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.8.1",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.18",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.1",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.1.4",
+    "tailwindcss": "^3.0.11",
+    "typescript": "^4.7.4",
+    "vite": "^4.3.1"
+  }
+}
diff --git a/examples/blog-refine-shadcn/postcss.config.js b/examples/blog-refine-shadcn/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/blog-refine-shadcn/public/favicon.ico b/examples/blog-refine-shadcn/public/favicon.ico
diff --git a/examples/blog-refine-shadcn/src/App.css b/examples/blog-refine-shadcn/src/App.css
@@ -0,0 +1,117 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  .layout {
+    @apply flex flex-col md:flex-row gap-1;
+  }
+
+  .layout .content {
+    @apply flex flex-col flex-grow;
+  }
+
+  .breadcrumb {
+    @apply flex gap-6 p-2 border-b;
+    list-style-type: "/  ";
+  }
+
+  .breadcrumb a {
+    @apply text-primary;
+    text-decoration: none;
+  }
+
+  .menu {
+    @apply md:max-w-48 md:min-w-48 md:max-h-fit md:min-h-screen mx-2 py-2 px-1 flex justify-between items-center md:px-0 md:flex-col md:justify-start md:items-start bg-slate-100 border-gray-400;
+  }
+
+  .menu a {
+    @apply text-gray-950;
+  }
+
+  .menu .active {
+    @apply font-bold;
+  }
+
+  /* @media screen and (max-width: 751px) {
+    .menu {
+      border-right: none;
+      border-bottom: 1px solid lightgray;
+    }
+  } */
+
+  .menu ul {
+    @apply pl-4 flex md:flex-col md:justify-end;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		legacy-peer-deps=true
		strict-peer-dependencies=false