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 reactLogo from './assets/react.svg' |
||||
import viteLogo from '/vite.svg' |
||||
import './App.css' |
||||
import { ChartwerkLinePod } from '../lib/main'; |
||||
|
||||
function App() { |
||||
const [count, setCount] = useState(0) |
||||
|
||||
return ( |
||||
<> |
||||
<div> |
||||
<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> |
||||
<ChartwerkLinePod>fdfsd</ChartwerkLinePod> |
||||
</> |
||||
) |
||||
); |
||||
} |
||||
|
||||
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 ReactDOM from 'react-dom/client' |
||||
import App from './App.tsx' |
||||
import './index.css' |
||||
import App from './App.tsx'; |
||||
|
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom/client'; |
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render( |
||||
<React.StrictMode> |
||||
<App /> |
||||
</React.StrictMode>, |
||||
) |
||||
</React.StrictMode> |
||||
); |
||||
|
||||
@ -0,0 +1,6 @@
|
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"include": [ |
||||
"lib" |
||||
] |
||||
} |
||||
@ -1,7 +1,23 @@
|
||||
import { defineConfig } from 'vite' |
||||
import react from '@vitejs/plugin-react' |
||||
import { defineConfig } from 'vite'; |
||||
import react from '@vitejs/plugin-react'; |
||||
import dts from 'vite-plugin-dts'; |
||||
|
||||
import { resolve } from 'path'; |
||||
|
||||
// https://vitejs.dev/config/
|
||||
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