Skip to content

Commit

Permalink
feat: configure settings to enable panda-css build (#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
lebmouse authored Jul 24, 2024
1 parent bd2cce2 commit fd66a28
Show file tree
Hide file tree
Showing 22 changed files with 3,091 additions and 137 deletions.
4 changes: 3 additions & 1 deletion .github/workflows/package-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ jobs:
- uses: actions/cache@v3
id: pnpm-cache
with:
path: node_modules
path: |
node_modules
styled-system
key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-
Expand Down
4 changes: 3 additions & 1 deletion .github/workflows/package-tag-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ jobs:
- uses: actions/cache@v3
id: pnpm-cache
with:
path: node_modules
path: |
node_modules
styled-system
key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-
Expand Down
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,7 @@ dist-ssr
*.njsproj
*.sln
*.sw?

## Panda
styled-system
styled-system-studio
1 change: 1 addition & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import '../src/global.css';
import '../src/cds.css';
import './styles.css';

/** @type { import('@storybook/react').Preview } */
Expand Down
42 changes: 33 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,28 @@
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
},
"./icon": {
"require": "./dist/icon/index.js",
"import": "./dist/icon/index.mjs",
"types": "./dist/icon/index.d.ts"
},
"./composite": {
"require": "./dist/composite/index.js",
"import": "./dist/composite/index.mjs",
"types": "./dist/composite/index.d.ts"
},
"./component": {
"require": "./dist/component/index.js",
"import": "./dist/component/index.mjs",
"types": "./dist/component/index.d.ts"
},
"./legacy": {
"require": "./dist/legacy/index.js",
"import": "./dist/legacy/index.mjs",
"types": "./dist/legacy/index.d.ts"
},
"./cds.css": "./dist/cds.css",
"./global.css": "./dist/global.css",
"./package.json": "./package.json"
},
"main": "./dist/index.js",
Expand All @@ -23,7 +45,7 @@
"sideEffects": false,
"repository": "https://github.com/corca-ai/cds",
"scripts": {
"build": "tsc --noEmit && vite build",
"build": "tsc --noEmit && vite build && panda cssgen --outfile dist/cds.css",
"typecheck": "tsc --noEmit",
"lint": "eslint ./src",
"storybook": "storybook dev -p 6006",
Expand All @@ -33,24 +55,22 @@
},
"dependencies": {
"date-fns": "3.3.1",
"react-aria-components": "^1.3.1",
"react-colorful": "5.6.1",
"react-datepicker": "4.25.0",
"react-hot-toast": "2.4.1"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0"
"@emotion/styled": "^11.11.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@types/react": "^18.2.60",
"@types/react-dom": "^18.2.19",
"@eslint/js": "9.7.0",
"@pandacss/dev": "^0.44.0",
"@storybook/addon-designs": "8.0.3",
"@storybook/addon-essentials": "8.2.2",
"@storybook/addon-interactions": "8.2.2",
Expand All @@ -60,8 +80,10 @@
"@storybook/react-vite": "8.2.2",
"@svgr/cli": "8.1.0",
"@svgr/core": "^8.1.0",
"@types/react-datepicker": "4.19.6",
"@types/eslint__js": "8.42.3",
"@types/react": "^18.2.60",
"@types/react-datepicker": "4.19.6",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "5.62.0",
"@typescript-eslint/parser": "5.62.0",
"@vitejs/plugin-react": "4.3.0",
Expand All @@ -75,6 +97,8 @@
"husky": "9.0.11",
"lint-staged": "15.2.2",
"prettier": "2.8.8",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"storybook": "^8.2.2",
"svgo": "3.3.2",
"tsconfig-paths-webpack-plugin": "4.1.0",
Expand Down
128 changes: 128 additions & 0 deletions panda.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { definePreset } from '@pandacss/dev';
import { defineConfig } from '@pandacss/dev';

const fontWeight = {
bold: 700,
semibold: 600,
medium: 500,
regular: 400,
};

const cdsPreset = definePreset({
name: 'cds',
theme: {
tokens: {
colors: {
main: {
black: { value: '#292929' },
yellow: { value: '#ffd464' },
},
grey: {
10: { value: '#363738' },
20: { value: '#515354' },
30: { value: '#737678' },
40: { value: '#aaacaf' },
50: { value: '#ced1d6' },
60: { value: '#e4e5e9' },
70: { value: '#f3f4f6' },
80: { value: '#f8f9fb' },
},
etc: {
white: { value: '#ffffff' },
focus: { value: '#3b79d7' },
error: {
10: { value: '#ffe7e6' },
20: { value: '#fc685f' },
30: { value: '#b10e1c' },
},
active: {
10: { value: '#ecfdf3' },
20: { value: '#14ba6d' },
30: { value: '#037847' },
},
},
},
},
textStyles: {
h1: {
description: 'heading1',
value: {
fontSize: '22px',
fontWeight: fontWeight.bold,
},
},
h2: {
description: 'heading2',
value: {
fontSize: '20px',
fontWeight: fontWeight.semibold,
},
},
b1: {
description: 'body1',
value: {
fontSize: '16px',
fontWeight: fontWeight.medium,
},
},
b2: {
description: 'body2',
value: {
fontSize: '14px',
fontWeight: fontWeight.regular,
},
},
b3: {
description: 'body3',
value: {
fontSize: '13px',
fontWeight: fontWeight.regular,
},
},
b4: {
description: 'body4',
value: {
fontSize: '12px',
fontWeight: fontWeight.semibold,
},
},
b5: {
description: 'body5',
value: {
fontSize: '12px',
fontWeight: fontWeight.regular,
},
},
b6: {
description: 'body6',
value: {
fontSize: '10px',
fontWeight: fontWeight.semibold,
},
},
b7: {
description: 'body7',
value: {
fontSize: '14px',
fontWeight: fontWeight.semibold,
},
},
},
},
});
export default defineConfig({
// Whether to use css reset

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

// Files to exclude
exclude: [],

presets: [cdsPreset],

polyfill: true,
// The output directory for your css system
outdir: 'styled-system',
jsxFramework: 'react',
});
Loading

0 comments on commit fd66a28

Please sign in to comment.