Skip to content

Commit

Permalink
Merge pull request #6 from DaleStudy/panda
Browse files Browse the repository at this point in the history
Panda CSS μ…‹μ—…
  • Loading branch information
DaleSeo authored Dec 5, 2024
2 parents 4eafd0c + 181a179 commit 475e5e7
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 106 deletions.
10 changes: 9 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,12 @@ dist-ssr
*.sln
*.sw?

*storybook.log
*storybook.log

# Vite
tsconfig.app.tsbuildinfo
tsconfig.node.tsbuildinfo

## Panda
styled-system
styled-system-studio
1 change: 0 additions & 1 deletion .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-onboarding",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
Expand Down
2 changes: 2 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import "../src/index.css";

import type { Preview } from "@storybook/react";

const preview: Preview = {
Expand Down
Binary file modified bun.lockb
Binary file not shown.
53 changes: 27 additions & 26 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,41 @@
"test": "vitest",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
"build-storybook": "storybook build",
"prepare": "panda codegen"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.9.0",
"@eslint/js": "^9.11.1",
"@storybook/addon-essentials": "^8.3.5",
"@storybook/addon-interactions": "^8.3.5",
"@storybook/addon-links": "^8.3.5",
"@storybook/addon-onboarding": "^8.3.5",
"@storybook/blocks": "^8.3.5",
"@storybook/react": "^8.3.5",
"@storybook/react-vite": "^8.3.5",
"@storybook/test": "^8.3.5",
"@testing-library/jest-dom": "^6.5.0",
"@chromatic-com/storybook": "^3.2.2",
"@eslint/js": "^9.16.0",
"@pandacss/dev": "^0.48.0",
"@storybook/addon-essentials": "^8.4.6",
"@storybook/addon-interactions": "^8.4.6",
"@storybook/addon-links": "^8.4.6",
"@storybook/blocks": "^8.4.6",
"@storybook/react": "^8.4.6",
"@storybook/react-vite": "^8.4.6",
"@storybook/test": "^8.4.6",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.2",
"eslint": "^9.11.1",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12",
"eslint-plugin-storybook": "^0.9.0",
"globals": "^15.9.0",
"happy-dom": "^15.7.4",
"storybook": "^8.3.5",
"typescript": "^5.5.3",
"typescript-eslint": "^8.7.0",
"vite": "^5.4.8",
"vitest": "^2.1.2"
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.16.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"eslint-plugin-storybook": "^0.11.1",
"globals": "^15.13.0",
"happy-dom": "^15.11.7",
"storybook": "^8.4.6",
"typescript": "^5.7.2",
"typescript-eslint": "^8.17.0",
"vite": "^5.4.11",
"vitest": "^2.1.8"
},
"eslintConfig": {
"extends": [
Expand Down
20 changes: 20 additions & 0 deletions panda.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { defineConfig } from "@pandacss/dev";

export default defineConfig({
// Whether to use css reset
preflight: true,

// Where to look for your css declarations
include: ["./src/**/*.{js,jsx,ts,tsx}"],

// Files to exclude
exclude: [],

// Useful for theme customization
theme: {
extend: {},
},

// The output directory for your css system
outdir: "styled-system",
});
5 changes: 5 additions & 0 deletions postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
plugins: {
"@pandacss/dev/postcss": {},
},
};
69 changes: 69 additions & 0 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,72 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

#root {
max-width: 1280px;
margin: 0 auto;
Expand Down
15 changes: 8 additions & 7 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import { Button } from "./components/Button";

function App() {
const [count, setCount] = useState(0)
const [count, setCount] = useState(0);

return (
<>
Expand All @@ -17,6 +17,7 @@ function App() {
</a>
</div>
<h1>Vite + React</h1>
<Button>Dale</Button>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
Expand All @@ -29,7 +30,7 @@ function App() {
Click on the Vite and React logos to learn more
</p>
</>
)
);
}

export default App
export default App;
35 changes: 33 additions & 2 deletions src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "./Button.css";
import { css } from "../../../styled-system/css";

export interface ButtonProps {
children: React.ReactNode;
Expand All @@ -13,7 +13,38 @@ export const Button = ({
...rest
}: ButtonProps) => {
return (
<button type={type} onClick={onClick} {...rest}>
<button
className={css({
"--button-color": "#ffffff",
"--button-bg-color": "#0d6efd",
"--button-hover-bg-color": "#025ce2",
appearance: "none",
margin: "0",
padding: "0.5rem 1rem",
background: "var(--button-bg-color)",
color: "var(--button-color)",
fontSize: "1rem",
fontWeight: 400,
textAlign: "center",
textDecoration: "none",
display: "inline-block",
width: ["auto", "100%"],
border: "none",
borderRadius: "4px",
boxShadow:
"0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
cursor: "pointer",
transition: "0.5s",
"&:active, &:hover, &:focus": {
background: "var(--button-hover-bg-color)",
outline: "0",
},
"&:disabled": { opacity: 0.5 },
})}
type={type}
onClick={onClick}
{...rest}
>
{children}
</button>
);
Expand Down
69 changes: 1 addition & 68 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,68 +1 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
@layer reset, base, tokens, recipes, utilities;
2 changes: 1 addition & 1 deletion tsconfig.app.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
"include": ["src", "styled-system"]
}

0 comments on commit 475e5e7

Please sign in to comment.