12 changed files with 1985 additions and 153 deletions
@ -0,0 +1,3 @@ |
|||||||
|
export function ChartwerkLinePod(props: React.ButtonHTMLAttributes<HTMLButtonElement>) { |
||||||
|
return <button {...props} /> |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { ChartwerkLinePod } from './components/ChartwerkLinePod'; |
||||||
@ -1,42 +0,0 @@ |
|||||||
#root { |
|
||||||
max-width: 1280px; |
|
||||||
margin: 0 auto; |
|
||||||
padding: 2rem; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.logo { |
|
||||||
height: 6em; |
|
||||||
padding: 1.5em; |
|
||||||
will-change: filter; |
|
||||||
transition: filter 300ms; |
|
||||||
} |
|
||||||
.logo:hover { |
|
||||||
filter: drop-shadow(0 0 2em #646cffaa); |
|
||||||
} |
|
||||||
.logo.react:hover { |
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa); |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
a:nth-of-type(2) .logo { |
|
||||||
animation: logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.card { |
|
||||||
padding: 2em; |
|
||||||
} |
|
||||||
|
|
||||||
.read-the-docs { |
|
||||||
color: #888; |
|
||||||
} |
|
||||||
@ -1,35 +1,11 @@ |
|||||||
import { useState } from 'react' |
import { ChartwerkLinePod } from '../lib/main'; |
||||||
import reactLogo from './assets/react.svg' |
|
||||||
import viteLogo from '/vite.svg' |
|
||||||
import './App.css' |
|
||||||
|
|
||||||
function App() { |
function App() { |
||||||
const [count, setCount] = useState(0) |
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<div> |
<ChartwerkLinePod>fdfsd</ChartwerkLinePod> |
||||||
<a href="https://vitejs.dev" target="_blank"> |
|
||||||
<img src={viteLogo} className="logo" alt="Vite logo" /> |
|
||||||
</a> |
|
||||||
<a href="https://react.dev" target="_blank"> |
|
||||||
<img src={reactLogo} className="logo react" alt="React logo" /> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<h1>Vite + React</h1> |
|
||||||
<div className="card"> |
|
||||||
<button onClick={() => setCount((count) => count + 1)}> |
|
||||||
count is {count} |
|
||||||
</button> |
|
||||||
<p> |
|
||||||
Edit <code>src/App.tsx</code> and save to test HMR |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
<p className="read-the-docs"> |
|
||||||
Click on the Vite and React logos to learn more |
|
||||||
</p> |
|
||||||
</> |
</> |
||||||
) |
); |
||||||
} |
} |
||||||
|
|
||||||
export default App |
export default App; |
||||||
|
|||||||
@ -1,69 +0,0 @@ |
|||||||
: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; |
|
||||||
-webkit-text-size-adjust: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,10 +1,10 @@ |
|||||||
import React from 'react' |
import App from './App.tsx'; |
||||||
import ReactDOM from 'react-dom/client' |
|
||||||
import App from './App.tsx' |
import React from 'react'; |
||||||
import './index.css' |
import ReactDOM from 'react-dom/client'; |
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render( |
ReactDOM.createRoot(document.getElementById('root')!).render( |
||||||
<React.StrictMode> |
<React.StrictMode> |
||||||
<App /> |
<App /> |
||||||
</React.StrictMode>, |
</React.StrictMode> |
||||||
) |
); |
||||||
|
|||||||
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"extends": "./tsconfig.json", |
||||||
|
"include": [ |
||||||
|
"lib" |
||||||
|
] |
||||||
|
} |
||||||
@ -1,7 +1,23 @@ |
|||||||
import { defineConfig } from 'vite' |
import { defineConfig } from 'vite'; |
||||||
import react from '@vitejs/plugin-react' |
import react from '@vitejs/plugin-react'; |
||||||
|
import dts from 'vite-plugin-dts'; |
||||||
|
|
||||||
|
import { resolve } from 'path'; |
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({ |
export default defineConfig({ |
||||||
plugins: [react()], |
plugins: [ |
||||||
}) |
react(), |
||||||
|
dts({ include: ['lib'] }) |
||||||
|
], |
||||||
|
build: { |
||||||
|
copyPublicDir: false, |
||||||
|
lib: { |
||||||
|
entry: resolve(__dirname, 'lib/main.ts'), |
||||||
|
formats: ['es'] |
||||||
|
}, |
||||||
|
rollupOptions: { |
||||||
|
external: ['react', 'react/jsx-runtime'], |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|||||||
Loading…
Reference in new issue