diff --git a/package.json b/package.json index ddae80f..90b46ed 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "typescript": "5.1.6" }, "devDependencies": { - "@pandacss/dev": "^0.11.1", + "@pandacss/dev": "^0.16.0", "prettier": "^3.0.2" } } diff --git a/panda.config.ts b/panda.config.ts index ab8ac66..3a5dd27 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -16,6 +16,65 @@ export default defineConfig({ jsxStyleProps: "none", + utilities: { + displayFlex: { + className: "flex", + values: ["column", "row", "start"], + transform(value) { + return { + display: "flex", + flexDirection: value, + }; + }, + }, + paddingX: { + className: "padding-x", + values: "spacing", + transform(value: string) { + return { + paddingLeft: value, + paddingRight: value, + }; + }, + }, + paddingY: { + className: "padding-y", + values: "spacing", + transform(value: string) { + return { + paddingTop: value, + paddingBottom: value, + }; + }, + }, + inputBorder: { + className: "input-border", + values: { type: "boolean" }, + transform(value: boolean, { token }) { + if (!value) return {}; + + return { + borderWidth: "1px", + borderColor: token("colors.borders.normal"), + borderStyle: "solid", + borderRadius: token("radii.input"), + outline: "none", + transition: `border-color ${token("durations.fast")}`, + + "&:not([disabled])": { + "&:hover:not(:focus)": { + borderColor: token("colors.borders.hover"), + }, + + "&:focus": { + borderColor: token("colors.borders.focus"), + }, + }, + }; + }, + }, + }, + // Useful for theme customization theme: { extend: { @@ -27,6 +86,22 @@ export default defineConfig({ lineHeight: "1.2", }, }, + button: { + description: "Button text", + value: { + fontSize: "sm", + lineHeight: "1.2", + fontWeight: "500", + }, + }, + medium: { + description: "Medium text", + value: { + fontSize: "md", + lineHeight: "1.2", + fontWeight: "500", + }, + }, hero: { description: "Hero text", value: { @@ -37,6 +112,15 @@ export default defineConfig({ }, }, tokens: { + durations: { + fast: { value: "150ms" }, + normal: { value: "300ms" }, + }, + radii: { + input: { + value: "{radii.lg}", + }, + }, spacing: { paddingToMaxWidth: { value: "3rem", @@ -56,6 +140,30 @@ export default defineConfig({ }, }, colors: { + grey: { + 200: { value: "#EEEEEE" }, + }, + buttons: { + primary: { value: "#7A97FF" }, + danger: { value: "#FF6868" }, + }, + input: { + bg: { + value: "#fff", + }, + placeholder: { + value: "#ACACAC", + }, + }, + borders: { + normal: { value: "#BCC5C0" }, + hover: { value: "#707070" }, + focus: { value: "black" }, + }, + text: { + primary: { value: "#343434" }, + secondary: { value: "#535353" }, + }, neutral: { 100: { value: "#F4F8F6" }, 200: { value: "#D9DFDB" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6b827a..dd0771e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,8 +38,8 @@ dependencies: devDependencies: '@pandacss/dev': - specifier: ^0.11.1 - version: 0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) + specifier: ^0.16.0 + version: 0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) prettier: specifier: ^3.0.2 version: 3.0.2 @@ -414,6 +414,23 @@ packages: '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 + /@clack/core@0.3.3: + resolution: {integrity: sha512-5ZGyb75BUBjlll6eOa1m/IZBxwk91dooBWhPSL67sWcLS0zt9SnswRL0l26TVdBhb0wnWORRxUn//uH6n4z7+A==} + dependencies: + picocolors: 1.0.0 + sisteransi: 1.0.5 + dev: true + + /@clack/prompts@0.6.3: + resolution: {integrity: sha512-AM+kFmAHawpUQv2q9+mcB6jLKxXGjgu/r2EQjEwujgpCdzrST6BJqYw00GRn56/L/Izw5U7ImoLmy00X/r80Pw==} + dependencies: + '@clack/core': 0.3.3 + picocolors: 1.0.0 + sisteransi: 1.0.5 + dev: true + bundledDependencies: + - is-unicode-supported + /@emmetio/abbreviation@2.3.3: resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} dependencies: @@ -1055,29 +1072,29 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - /@pandacss/config@0.11.1: - resolution: {integrity: sha512-yzBLfYgd64OawAfMPj9xZXsYVGa1hJyBUuxvpOg8amuEwtoLJKUflEeuRlIDtS5n0o3Y3/09SfBgDGHakF7Rmg==} + /@pandacss/config@0.16.0: + resolution: {integrity: sha512-Be610sA7/UsOyCFgLQDzkjhhPqkTyPtky6fc1UKEyCnE6IXEeSeIJ55XzM30GpF38NcrqBX29ncfIYZLHMXGiA==} dependencies: - '@pandacss/error': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/preset-base': 0.11.1 - '@pandacss/preset-panda': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/error': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/preset-base': 0.16.0 + '@pandacss/preset-panda': 0.16.0 + '@pandacss/types': 0.16.0 bundle-n-require: 1.0.1 escalade: 3.1.1 jiti: 1.19.3 merge-anything: 5.1.7 - typescript: 5.1.6 + typescript: 5.2.2 dev: true - /@pandacss/core@0.11.1: - resolution: {integrity: sha512-Noh27KZMEKg+Y9X71J1wKRfeJKLzl5GSiRhNkOJqVb+nELabdnHAJD0YzFr+wLLeDxG5HBuilTaldnmD7Xn0oQ==} + /@pandacss/core@0.16.0: + resolution: {integrity: sha512-eILsUAQ1LTjwlPpb0+xK5/wbDBW2Jk+qvqY9awV8zA5tXUV43cLMj9wEnU05lB3ZWEL6pkEQEk1dQi9/zjp7vg==} dependencies: - '@pandacss/error': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/error': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 autoprefixer: 10.4.15(postcss@8.4.27) hookable: 5.5.3 lodash.merge: 4.6.2 @@ -1085,26 +1102,28 @@ packages: postcss-discard-duplicates: 6.0.0(postcss@8.4.27) postcss-discard-empty: 6.0.0(postcss@8.4.27) postcss-merge-rules: 6.0.1(postcss@8.4.27) + postcss-minify-selectors: 6.0.0(postcss@8.4.27) postcss-nested: 6.0.1(postcss@8.4.27) postcss-normalize-whitespace: 6.0.0(postcss@8.4.27) postcss-selector-parser: 6.0.13 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 dev: true - /@pandacss/dev@0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): - resolution: {integrity: sha512-2MrW9ML1Q1FeCrtP6DqLN6ij1Ccf+14x0Pi2WjwCoi/k6KfuYIYEw8ZIokEd64LNlnqALwpDmrzUxHCJICurYw==} + /@pandacss/dev@0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): + resolution: {integrity: sha512-LCDLM9zlq61NPAPeD14qk9ri3flUJY8WyihTPyFb93C5tkYTQY+l7xk1NyrtBwEc48/5NDg17wNPeCgv6KvSVQ==} hasBin: true dependencies: - '@pandacss/config': 0.11.1 - '@pandacss/error': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/node': 0.11.1(typescript@5.1.6) - '@pandacss/postcss': 0.11.1(typescript@5.1.6) - '@pandacss/preset-panda': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/studio': 0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@clack/prompts': 0.6.3 + '@pandacss/config': 0.16.0 + '@pandacss/error': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/node': 0.16.0(typescript@5.1.6) + '@pandacss/postcss': 0.16.0(typescript@5.1.6) + '@pandacss/preset-panda': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/studio': 0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 cac: 6.7.14 pathe: 1.1.1 perfect-debounce: 1.0.0 @@ -1125,64 +1144,64 @@ packages: - typescript dev: true - /@pandacss/error@0.11.1: - resolution: {integrity: sha512-BGJYI6EGrz8IL2UI9St3bJdcSDxkQ2YcSaqg1lA6FHgwoqpKy6GKWbX/OGBFeDPk1aXhjmD+IObGCFjdaELC0A==} + /@pandacss/error@0.16.0: + resolution: {integrity: sha512-Nj/WNREKELsv4CoexswacWsz1hSwH70kErgGnsprR6DVPje+wKQKoF3YMhW0NdKqscKO0I7wHa501z9JBnOx9Q==} dev: true - /@pandacss/extractor@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-n8VFRehmnTfeODvZ7nsZVDu/Di5sRTDJDNrHLM8e0s5d3MNQA0BH8txSF4+/a77v0S6HWKwQ7t/KsA8YbEP9NA==} + /@pandacss/extractor@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-WXDHNhjNqjzCEGVjcsy3/T8i+mJ50XWwXAE+2gJ5UEvtMw5ghFEnLbrBsxGfnRF6GCkwoERJzDI5APCgHZUD5Q==} dependencies: lil-fp: 1.4.5 ts-evaluator: 1.2.0(typescript@5.1.6) ts-morph: 19.0.0 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/generator@0.11.1: - resolution: {integrity: sha512-YS+CA2UMbMURWyxV2ddXUk5BrTXFjMwdM/EQX+b/smiEgx1uv8Nk95K0B77n3hRB3xi836EZBydvWHwhQX72dQ==} + /@pandacss/generator@0.16.0: + resolution: {integrity: sha512-bEtVvbtR3DFzwO6sWSG53Sb72TX+4OQrXJoJtoHly9+YlYKpas0hPkQtuh7M712p3gJyYBXfPCm81Pvg5uzvaw==} dependencies: - '@pandacss/core': 0.11.1 - '@pandacss/is-valid-prop': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/core': 0.16.0 + '@pandacss/is-valid-prop': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 javascript-stringify: 2.1.0 lil-fp: 1.4.5 outdent: 0.8.0 pluralize: 8.0.0 postcss: 8.4.27 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 dev: true - /@pandacss/is-valid-prop@0.11.1: - resolution: {integrity: sha512-os3y8wlvPWBhg3Hufz3TyEfXgLX+hLwp76et7x3Ov9j6I0zj+S48EWsWiLvwUlJH1MKe/zoLijjCKXw/tguo3A==} + /@pandacss/is-valid-prop@0.16.0: + resolution: {integrity: sha512-r9vNdupeQNbXnHiCNw96Aj8sMBRhEEzWlubKChSl0oziT3VfccAGR++7pAgsHA6l/UPjs2aLzhUw225sHHIgFg==} dev: true - /@pandacss/logger@0.11.1: - resolution: {integrity: sha512-qHeC65BJDLFHCSl6wOSEZTSLIb0J3LjaBKK6L9OyQlLvJ7/BMwaH1M4JSEFHPhTYnYISuv1MaEpsvSeszI5Zwg==} + /@pandacss/logger@0.16.0: + resolution: {integrity: sha512-PfDRSsnFAH4qjZGOQuySpdiQu1vgoVIPEEG9B0HXWkcm4bWEsFC+N4DgO3m/OMDCEL7SkYvOPFpblAz/TwRYTw==} dependencies: kleur: 4.1.5 lil-fp: 1.4.5 dev: true - /@pandacss/node@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-Qpkn3CHcEF3ERYkCx1akQWaDZckKO70g6I0TDGJJzTX9X0AoruonYblLJCLyb1dsm1AzPYoRggJSIygjnc2MVA==} - dependencies: - '@pandacss/config': 0.11.1 - '@pandacss/core': 0.11.1 - '@pandacss/error': 0.11.1 - '@pandacss/extractor': 0.11.1(typescript@5.1.6) - '@pandacss/generator': 0.11.1 - '@pandacss/is-valid-prop': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/parser': 0.11.1(typescript@5.1.6) - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + /@pandacss/node@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-pqTDEvg9fS8ixynx6evplBYUI96Z4gfI8fQMgg1MjVxS0GzuzGaMdMu1664bT8/oSvAwe3ttx3ztBFubXUqUxA==} + dependencies: + '@pandacss/config': 0.16.0 + '@pandacss/core': 0.16.0 + '@pandacss/error': 0.16.0 + '@pandacss/extractor': 0.16.0(typescript@5.1.6) + '@pandacss/generator': 0.16.0 + '@pandacss/is-valid-prop': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/parser': 0.16.0(typescript@5.1.6) + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 chokidar: 3.5.3 fast-glob: 3.3.1 file-size: 1.0.0 @@ -1201,74 +1220,74 @@ packages: postcss: 8.4.27 preferred-pm: 3.0.3 ts-morph: 19.0.0 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 tsconfck: 2.1.2(typescript@5.1.6) transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/parser@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-m3Hk8fJlQ31IOOATF3rkRxskDzb2VaOIisTcwsBbz44TG2HWfaRuI5ogBPY8soEoVUd0gho9sxFpgrm0WjlvFA==} + /@pandacss/parser@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-ldM7qUAVJt7AENwPYVtG252x6FWwhcYPRGYLRJAX6dMRC0Zkypnq3q5rkYuPYfvaueJsBfQTI9hlwZCoU+QCZA==} dependencies: - '@pandacss/config': 0.11.1 - '@pandacss/extractor': 0.11.1(typescript@5.1.6) - '@pandacss/is-valid-prop': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/config': 0.16.0 + '@pandacss/extractor': 0.16.0(typescript@5.1.6) + '@pandacss/is-valid-prop': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/types': 0.16.0 '@vue/compiler-sfc': 3.3.4 lil-fp: 1.4.5 magic-string: 0.30.3 ts-morph: 19.0.0 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/postcss@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-T8i2nX2F4cnW+fafQ0y/supKP0v3fwRctvuZTa/5Rr1SMNF7c7uqyWZcERfCH2AppVixsspKLVEixeu+UC2/wQ==} + /@pandacss/postcss@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-diY9dMD4LcL9VnUJJr7Odb+d/8MN2UDeiTquZCkE2hfRcAFjasUikv81KrofzKYHayBaYKQN9dT2Xbh+cVCE3w==} dependencies: - '@pandacss/node': 0.11.1(typescript@5.1.6) + '@pandacss/node': 0.16.0(typescript@5.1.6) postcss: 8.4.28 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/preset-base@0.11.1: - resolution: {integrity: sha512-dOXjXInLLwQFtTqvfzLKas+zBSATjRdu7stPLUjsQAlCyZyhUqByFZAiyQ6I9tyKP4+YQwbQZzMm+UtrmAokvA==} + /@pandacss/preset-base@0.16.0: + resolution: {integrity: sha512-NgWKha0eHzTUF8P1+g4XayTI7vDEESNHRl9NxFEJYZaF4wlC6hJfd8aXnRTmm6dK7qFIOwmRokss5WfN3tpSXw==} dependencies: - '@pandacss/types': 0.11.1 + '@pandacss/types': 0.16.0 dev: true - /@pandacss/preset-panda@0.11.1: - resolution: {integrity: sha512-ZaX9DQAP87FDgXrou4S9RUh9fAby4fDuWt3pMwvtjqTJEBgwPgPdJaVv7bg3jwRYm2UjaAtw92NRSXj6yUAIdg==} + /@pandacss/preset-panda@0.16.0: + resolution: {integrity: sha512-rxgChw/8m7vEE+ffoRs72JE20XKtV7Bv+ANmtQnYM0lw0hRzj37ZBO7Rq5Of6J7cFalgXfWSj1FChinlsk0uSA==} dependencies: - '@pandacss/types': 0.11.1 + '@pandacss/types': 0.16.0 dev: true - /@pandacss/shared@0.11.1: - resolution: {integrity: sha512-g4mnSEXON9xv7SiSdHD2Q71F11NKDXIGhtuFegL9tVxdnuvQEXJh52qQmCA4XhPKdHNovwcsA0+GdryIJir0WA==} + /@pandacss/shared@0.16.0: + resolution: {integrity: sha512-kWqAzEDVIJ2KjizJMLoDQqU21y0pyOVF3zWfxfrzwrG7Y0BzHrm/9Rk0rSoI3+33z0GqFc4/UMbKuFI1qIl4Wg==} dev: true - /@pandacss/studio@0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): - resolution: {integrity: sha512-fKHr2YbSTJJS9z1hhfmQ58hhkqcRGkbE95EHbl4vA+O9ABdZqqD/Zw6Aw5ttqCKv/DmlipEN1e9LBTZIUFMPMQ==} + /@pandacss/studio@0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): + resolution: {integrity: sha512-XadiHCXDCzkfGvnY64SEgcEBPW9x3FHsyI/0XMFzr0t1vZ4MRszQ6szMb0lb60PzSKuNI0VNlcbHelsHHOwcrw==} dependencies: '@ark-ui/react': 0.9.0(@internationalized/date@3.4.0)(react-dom@18.2.0)(react@18.2.0) '@astrojs/react': 2.2.1(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0) - '@pandacss/config': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/node': 0.11.1(typescript@5.1.6) - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/config': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/node': 0.16.0(typescript@5.1.6) + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 astro: 2.9.6(@types/node@20.5.1) javascript-stringify: 2.1.0 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - vite: 4.4.8(@types/node@20.5.1) + vite: 4.4.11(@types/node@20.5.1) transitivePeerDependencies: - '@internationalized/date' - '@types/node' @@ -1286,16 +1305,16 @@ packages: - typescript dev: true - /@pandacss/token-dictionary@0.11.1: - resolution: {integrity: sha512-eQqAHScC7qH55iOY+JOTGl7D+Xfng0iiA60DIHVa8Q4YY6izeB90JTJ6vUIupwiQ5lX2P7Gm9X8v4bnIjOydDQ==} + /@pandacss/token-dictionary@0.16.0: + resolution: {integrity: sha512-nEYi0k8TFaG+mNTmaeMHYEOaf4X/cUTDw2QL7Y0Wey6jQKwqa5yzikKuUBu03B6r8evbUuZQNfQ81ZD9p+jdyg==} dependencies: - '@pandacss/shared': 0.11.1 - '@pandacss/types': 0.11.1 - ts-pattern: 5.0.4 + '@pandacss/shared': 0.16.0 + '@pandacss/types': 0.16.0 + ts-pattern: 5.0.5 dev: true - /@pandacss/types@0.11.1: - resolution: {integrity: sha512-h/wOIO+YEapnNIFYMpS3hYXWH0DlqB+OivrADYtapOf2Y4sFg3ReyQdkwRKQ4ZWIfJKH8jEXd/xTvMQhvZ3arw==} + /@pandacss/types@0.16.0: + resolution: {integrity: sha512-CjKLutg6Hb/lWSSm85fEGZmdlFJZtYjhJbHQ7Iiicb5V4KK3J6XbxHIghGpHhsoUR4OzGizmIK6/rc2ae+MVyA==} dev: true /@pkgr/utils@2.4.2: @@ -1975,7 +1994,7 @@ packages: '@vue/shared': 3.3.4 estree-walker: 2.0.2 magic-string: 0.30.3 - postcss: 8.4.27 + postcss: 8.4.28 source-map-js: 1.0.2 dev: true @@ -2764,8 +2783,8 @@ packages: typescript: 5.1.6 unist-util-visit: 4.1.2 vfile: 5.3.7 - vite: 4.4.8(@types/node@20.5.1) - vitefu: 0.2.4(vite@4.4.8) + vite: 4.4.11(@types/node@20.5.1) + vitefu: 0.2.4(vite@4.4.11) which-pm: 2.0.0 yargs-parser: 21.1.1 zod: 3.21.4 @@ -5555,6 +5574,16 @@ packages: postcss-selector-parser: 6.0.13 dev: true + /postcss-minify-selectors@6.0.0(postcss@8.4.27): + resolution: {integrity: sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==} + engines: {node: ^14 || ^16 || >=18.0} + peerDependencies: + postcss: ^8.2.15 + dependencies: + postcss: 8.4.27 + postcss-selector-parser: 6.0.13 + dev: true + /postcss-nested@6.0.1(postcss@8.4.27): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -6330,8 +6359,8 @@ packages: code-block-writer: 12.0.0 dev: true - /ts-pattern@5.0.4: - resolution: {integrity: sha512-D5iVliqugv2C9541W2CNXFYNEZxr4TiHuLPuf49tKEdQFp/8y8fR0v1RExUvXkiWozKCwE7zv07C6EKxf0lKuQ==} + /ts-pattern@5.0.5: + resolution: {integrity: sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA==} dev: true /tsconfck@2.1.2(typescript@5.1.6): @@ -6435,6 +6464,12 @@ packages: engines: {node: '>=14.17'} hasBin: true + /typescript@5.2.2: + resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} + engines: {node: '>=14.17'} + hasBin: true + dev: true + /ufo@1.2.0: resolution: {integrity: sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==} dev: true @@ -6616,8 +6651,8 @@ packages: vfile-message: 3.1.4 dev: true - /vite@4.4.8(@types/node@20.5.1): - resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==} + /vite@4.4.11(@types/node@20.5.1): + resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -6652,7 +6687,7 @@ packages: fsevents: 2.3.2 dev: true - /vitefu@0.2.4(vite@4.4.8): + /vitefu@0.2.4(vite@4.4.11): resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==} peerDependencies: vite: ^3.0.0 || ^4.0.0 @@ -6660,7 +6695,7 @@ packages: vite: optional: true dependencies: - vite: 4.4.8(@types/node@20.5.1) + vite: 4.4.11(@types/node@20.5.1) dev: true /vscode-css-languageservice@6.2.6: diff --git a/public/back-arrow.svg b/public/back-arrow.svg new file mode 100644 index 0000000..939dec5 --- /dev/null +++ b/public/back-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/edit.svg b/public/edit.svg new file mode 100644 index 0000000..752b3e6 --- /dev/null +++ b/public/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/logo-discord.svg b/public/logo-discord.svg new file mode 100644 index 0000000..0e6fbb0 --- /dev/null +++ b/public/logo-discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/logo-github.svg b/public/logo-github.svg new file mode 100644 index 0000000..59391ae --- /dev/null +++ b/public/logo-github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/person.svg b/public/person.svg new file mode 100644 index 0000000..e199275 --- /dev/null +++ b/public/person.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/dash/destinations/discord/page.tsx b/src/app/dash/destinations/discord/page.tsx new file mode 100644 index 0000000..f0931b1 --- /dev/null +++ b/src/app/dash/destinations/discord/page.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { PageHeader } from "@/components/common/PageHeader"; +import { ConnectAccount } from "@/components/Dash/ConnectAccount"; +import { useCallback, useState } from "react"; +import { SetUp } from "@/components/Dash/SetUp"; +import { Option, Select } from "@/components/Dash/Select"; +import { Button } from "@/components/common/Button"; +import { SetUpChildren } from "@/components/Dash/GraphNode"; + +const channelNames = ["message-renderer", "hookla", "github-notifications"]; +const selectOptions = channelNames.map((name) => ({ + label: name, + value: name, +})); + +function DiscordDestination() { + const [isAuthed, setIsAuthed] = useState(false); + + const onConnected = useCallback(() => setIsAuthed(true), [setIsAuthed]); + + return ( + <> + + {isAuthed ? ( + + + + + + + ) : ( + + )} + + ); +} + +export default DiscordDestination; diff --git a/src/app/dash/destinations/page.tsx b/src/app/dash/destinations/page.tsx index 9460661..e07c15b 100644 --- a/src/app/dash/destinations/page.tsx +++ b/src/app/dash/destinations/page.tsx @@ -1,4 +1,5 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; +import { GraphNodeList, DiscordDestination } from "@/components/Dash/GraphNode"; function Destinations() { return ( @@ -7,6 +8,9 @@ function Destinations() { title="Destinations" subtitle="Define your destinations for the WidgetBot webhook here." /> + + + ); } diff --git a/src/app/dash/embed-builder/page.tsx b/src/app/dash/embed-builder/page.tsx index 3924cef..bb96659 100644 --- a/src/app/dash/embed-builder/page.tsx +++ b/src/app/dash/embed-builder/page.tsx @@ -1,4 +1,4 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; function EmbedBuilder() { return ( diff --git a/src/app/dash/layout.tsx b/src/app/dash/layout.tsx index 08a6db2..1133d10 100644 --- a/src/app/dash/layout.tsx +++ b/src/app/dash/layout.tsx @@ -4,7 +4,7 @@ import { MainContent, PageContent, } from "@/components/Dash/MainContainer"; -import { Sidebar } from "@/components/Dash/Sidebar"; +import { Sidebar, SidebarLink } from "@/components/Dash/Sidebar"; import React from "react"; interface Props { @@ -12,10 +12,33 @@ interface Props { } function DashLayout({ children }: Props) { + const links: Array = [ + { + href: "/dash/providers", + label: "Providers", + icon: "/providers.svg", + }, + { + href: "/dash/destinations", + label: "Destinations", + icon: "/destinations.svg", + }, + { + href: "/dash/embed-builder", + label: "Embed Builder", + icon: "/embed.svg", + }, + { + href: "/dash/settings", + label: "Settings", + icon: "/settings.svg", + }, + ]; + return ( - + {children} diff --git a/src/app/dash/providers/github/page.tsx b/src/app/dash/providers/github/page.tsx new file mode 100644 index 0000000..a0d44ee --- /dev/null +++ b/src/app/dash/providers/github/page.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { PageHeader } from "@/components/common/PageHeader"; +import { ConnectAccount } from "@/components/Dash/ConnectAccount"; +import { useCallback, useState } from "react"; +import { SetUp } from "@/components/Dash/SetUp"; +import { Option, Select } from "@/components/Dash/Select"; +import { Button } from "@/components/common/Button"; +import { SetUpChildren } from "@/components/Dash/GraphNode"; + +function GitHubProvider() { + const [isAuthed, setIsAuthed] = useState(false); + + const onConnected = useCallback(() => setIsAuthed(true), [setIsAuthed]); + + return ( + <> + + {isAuthed ? ( + + + + + + + ) : ( + + )} + + ); +} + +export default GitHubProvider; diff --git a/src/app/dash/providers/page.tsx b/src/app/dash/providers/page.tsx index f6e92c8..f475fc3 100644 --- a/src/app/dash/providers/page.tsx +++ b/src/app/dash/providers/page.tsx @@ -1,4 +1,5 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; +import { GraphNodeList, GithubProvider } from "@/components/Dash/GraphNode"; function Providers() { return ( @@ -7,6 +8,9 @@ function Providers() { title="Providers" subtitle="Define your providers for the WidgetBot webhook here." /> + + + ); } diff --git a/src/app/dash/settings/page.tsx b/src/app/dash/settings/page.tsx index c5417ad..12d788f 100644 --- a/src/app/dash/settings/page.tsx +++ b/src/app/dash/settings/page.tsx @@ -1,4 +1,6 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; +import React from "react"; +import { TextInput } from "@/components/common/TextInput"; function Settings() { return ( @@ -7,6 +9,7 @@ function Settings() { title="Settings" subtitle="Configure generic settings for your webhook." /> + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 35d2c01..a1bceca 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ -import { Hero } from "@/components/home/Hero"; -import { WebhookInputSection } from "@/components/home/WebhookInput"; +import { Hero } from "@/components/Home/Hero"; +import { WebhookInputSection } from "@/components/Home/WebhookInput"; import { RouteList } from "@/components/common/RouteList"; -import { Submit } from "@/components/home/Submit"; +import { Submit } from "@/components/Home/Submit"; export default function Home() { return ( diff --git a/src/app/teams/layout.tsx b/src/app/teams/layout.tsx new file mode 100644 index 0000000..de1647b --- /dev/null +++ b/src/app/teams/layout.tsx @@ -0,0 +1,38 @@ +import type { ReactNode } from "react"; +import { + MainContainer, + MainContent, + PageContent, +} from "@/components/Dash/MainContainer"; +import { Sidebar, SidebarLink } from "@/components/Dash/Sidebar"; +import React from "react"; + +interface Props { + children: ReactNode; +} + +function TeamsLayout({ children }: Props) { + const links: Array = [ + { + label: "Users", + href: "/teams/users", + icon: "/person.svg", + }, + { + label: "Settings", + href: "/teams/settings", + icon: "/settings.svg", + }, + ]; + + return ( + + + + {children} + + + ); +} + +export default TeamsLayout; diff --git a/src/app/teams/page.tsx b/src/app/teams/page.tsx new file mode 100644 index 0000000..e7a954d --- /dev/null +++ b/src/app/teams/page.tsx @@ -0,0 +1,5 @@ +function Teams() { + return null; +} + +export default Teams; diff --git a/src/app/teams/settings/page.tsx b/src/app/teams/settings/page.tsx new file mode 100644 index 0000000..3cf4fb4 --- /dev/null +++ b/src/app/teams/settings/page.tsx @@ -0,0 +1,18 @@ +import { PageHeader } from "@/components/common/PageHeader"; +import { TextInput } from "@/components/common/TextInput"; +import { Button } from "@/components/common/Button"; +import { PageFooter } from "@/components/common/PageFooter"; + +function Settings() { + return ( + <> + + + + + + + ); +} + +export default Settings; diff --git a/src/app/teams/users/page.tsx b/src/app/teams/users/page.tsx new file mode 100644 index 0000000..ff3256e --- /dev/null +++ b/src/app/teams/users/page.tsx @@ -0,0 +1,47 @@ +import { PageHeader } from "@/components/common/PageHeader"; +import { TextInput } from "@/components/common/TextInput"; +import { TeamMember, TeamRole } from "@/components/Teams/TeamMember"; +import { styled } from "panda/jsx"; + +const List = styled("ul", { + base: { + displayFlex: "column", + gap: "2", + marginTop: "4", + }, +}); + +function Users() { + const members: Array = [ + { + email: "john.doe@example.com", + role: TeamRole.Owner, + }, + { + email: "sus@mog.us", + role: TeamRole.Admin, + }, + { + email: "johny@roingus.dev", + role: TeamRole.Member, + }, + ]; + + return ( + <> + + + + {members.map((member) => ( + + ))} + + + ); +} + +export default Users; diff --git a/src/components/Dash/ConnectAccount/index.tsx b/src/components/Dash/ConnectAccount/index.tsx new file mode 100644 index 0000000..5c31f81 --- /dev/null +++ b/src/components/Dash/ConnectAccount/index.tsx @@ -0,0 +1,27 @@ +import * as ContentStyles from "../GraphNode"; +import { Button } from "@/components/common/Button"; +import Image from "next/image"; + +interface Props { + connectText: string; + brandName: string; + logoUrl: string; + onConnect(): void; +} + +export function ConnectAccount({ + connectText, + brandName, + logoUrl, + onConnect, +}: Props) { + return ( + + logo + {connectText} + + + ); +} diff --git a/src/components/Dash/GraphNode/index.tsx b/src/components/Dash/GraphNode/index.tsx new file mode 100644 index 0000000..97945f7 --- /dev/null +++ b/src/components/Dash/GraphNode/index.tsx @@ -0,0 +1,51 @@ +"use client"; + +import * as Styles from "./styles"; +import Image from "next/image"; + +export { + GraphNodeList, + ContentContainer, + ContentText, + SetUpChildren, +} from "./styles"; + +interface Props { + brandName: string; + logoUrl: string; + destination: string; + group: "destinations" | "providers"; +} + +export function GraphNode({ brandName, logoUrl, destination, group }: Props) { + return ( + + + {`${brandName} + + {brandName} + + ); +} + +export function GithubProvider() { + return ( + + ); +} + +export function DiscordDestination() { + return ( + + ); +} diff --git a/src/components/Dash/GraphNode/styles.ts b/src/components/Dash/GraphNode/styles.ts new file mode 100644 index 0000000..47f47ef --- /dev/null +++ b/src/components/Dash/GraphNode/styles.ts @@ -0,0 +1,79 @@ +import { styled } from "panda/jsx"; +import Link from "next/link"; + +export const SetUpChildren = styled("div", { + base: { + displayFlex: "column", + gap: "4", + alignItems: "center", + + sm: { + flexDirection: "row", + }, + }, +}); + +export const Container = styled(Link, { + base: { + border: "1px solid token(colors.neutral.300)", + borderRadius: "lg", + backgroundColor: "input.bg", + overflow: "hidden", + displayFlex: "column", + padding: "8", + alignItems: "center", + gap: "4", + cursor: "pointer", + + _hover: { + borderColor: "borders.hover", + }, + }, +}); + +export const LogoContainer = styled("div", { + base: { + width: "64px", + height: "64px", + backgroundColor: "grey.200", + borderRadius: "full", + display: "flex", + alignItems: "center", + justifyContent: "center", + }, +}); + +export const BrandName = styled("p", { + base: { + textStyle: "normal", + color: "text.primary", + }, +}); + +export const GraphNodeList = styled("ul", { + base: { + displayFlex: "row", + flexWrap: "wrap", + }, +}); + +export const ContentContainer = styled("div", { + base: { + displayFlex: "column", + gap: "4", + justifyContent: "center", + alignItems: "center", + flex: "1 0 auto", + }, +}); + +export const ContentText = styled("p", { + base: { + fontSize: "md", + fontWeight: "500", + maxWidth: "60%", + textWrap: "wrap", + textAlign: "center", + color: "text.primary", + }, +}); diff --git a/src/components/Dash/MainContainer/styles.ts b/src/components/Dash/MainContainer/styles.ts index 0d27edb..e656808 100644 --- a/src/components/Dash/MainContainer/styles.ts +++ b/src/components/Dash/MainContainer/styles.ts @@ -3,8 +3,7 @@ import { Panel } from "@/components/Dash/Panel"; export const MainContainer = styled("main", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "center", marginBottom: "8", @@ -23,8 +22,7 @@ export const MainContainer = styled("main", { export const MainContent = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", justifyContent: "center", gap: "8", maxWidth: "homeMaxWidth", @@ -33,7 +31,7 @@ export const MainContent = styled("div", { paddingRight: "paddingToMaxWidth", width: "100%", - md: { + lg: { flexDirection: "row", }, }, @@ -42,5 +40,6 @@ export const MainContent = styled("div", { export const PageContent = styled(Panel, { base: { flex: "1 0 auto", + displayFlex: "column", }, }); diff --git a/src/components/Dash/PageHeader/index.tsx b/src/components/Dash/PageHeader/index.tsx deleted file mode 100644 index c261f31..0000000 --- a/src/components/Dash/PageHeader/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as Styles from "./styles"; - -interface Props { - title: string; - subtitle: string; -} - -export function PageHeader({ title, subtitle }: Props) { - return ( - - {title} - {subtitle} - - ); -} diff --git a/src/components/Dash/PageHeader/styles.ts b/src/components/Dash/PageHeader/styles.ts deleted file mode 100644 index f239917..0000000 --- a/src/components/Dash/PageHeader/styles.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { styled } from "panda/jsx"; - -export const Container = styled("div", { - base: { - display: "flex", - flexDirection: "column", - gap: "1", - borderBottom: "1px solid token(colors.neutral.300)", - paddingBottom: "8", - marginBottom: "8", - }, -}); - -export const Title = styled("p", { - base: { - fontSize: "2xl", - color: "neutral.900", - }, -}); - -export const Subtitle = styled("p", { - base: { - color: "neutral.700", - fontSize: "md", - }, -}); diff --git a/src/components/Dash/Select/index.tsx b/src/components/Dash/Select/index.tsx new file mode 100644 index 0000000..8e3f5b1 --- /dev/null +++ b/src/components/Dash/Select/index.tsx @@ -0,0 +1,49 @@ +"use client"; + +import * as RadixSelect from "@radix-ui/react-select"; +import * as Styles from "./styles"; +import Image from "next/image"; +import { ReactNode } from "react"; + +interface OptionProps { + value: string; + label: string; +} + +export function Option({ value, label }: OptionProps) { + return ( + + {label} + + ); +} + +interface Props { + value?: string; + children: ReactNode; + onSelect?(value: string): void; + disabled?: boolean; + size?: "sm" | "md"; +} + +export function Select({ value, children, onSelect, disabled, size }: Props) { + return ( + + + + + + + + + + {children} + + + + ); +} diff --git a/src/components/Dash/Select/styles.ts b/src/components/Dash/Select/styles.ts new file mode 100644 index 0000000..39ddd2b --- /dev/null +++ b/src/components/Dash/Select/styles.ts @@ -0,0 +1,91 @@ +import { styled } from "panda/jsx"; +import * as Select from "@radix-ui/react-select"; + +export const Container = styled("div", { + base: { + position: "relative", + }, +}); + +export const Trigger = styled(Select.Trigger, { + base: { + colorPalette: "neutral", + displayFlex: "row", + alignItems: "center", + minWidth: "200px", + inputBorder: true, + borderRadius: "input", + gap: "2", + cursor: "pointer", + backgroundColor: "input.bg", + }, + variants: { + size: { + sm: { + paddingY: "1", + paddingLeft: "3", + paddingRight: "2", + }, + md: { + padding: "3", + }, + }, + }, + defaultVariants: { + size: "md", + }, +}); + +export const Caret = styled(Select.Icon, { + base: { + width: "12px", + height: "20px", + marginLeft: "auto", + }, +}); + +export const Content = styled(Select.Content, { + base: { + colorPalette: "neutral", + backgroundColor: "neutral.100", + width: "100%", + border: "1px solid token(colors.borders.normal)", + borderRadius: "input", + gap: "2", + padding: "2", + zIndex: "popup", + boxShadow: "md", + }, +}); + +export const Viewport = styled(Select.Viewport, { + base: { + displayFlex: "column", + gap: "2", + }, +}); + +export const Item = styled(Select.SelectItem, { + base: { + displayFlex: "row", + alignItems: "center", + padding: "4", + gap: "2", + cursor: "pointer", + outline: "none", + borderRadius: "md", + + '&[data-state="checked"]': { + colorPalette: "blue", + backgroundColor: "colorPalette.200", + }, + + '&[data-highlighted]:not([data-state="checked"])': { + backgroundColor: "colorPalette.200", + + [`& .arrow`]: { + translate: "4px 0", + }, + }, + }, +}); diff --git a/src/components/Dash/SetUp/index.tsx b/src/components/Dash/SetUp/index.tsx new file mode 100644 index 0000000..ef0a0a0 --- /dev/null +++ b/src/components/Dash/SetUp/index.tsx @@ -0,0 +1,19 @@ +import * as ContentStyles from "../GraphNode"; +import Image from "next/image"; +import { ReactNode } from "react"; + +interface Props { + setUpText: string; + logoUrl: string; + children: ReactNode; +} + +export function SetUp({ setUpText, logoUrl, children }: Props) { + return ( + + logo + {setUpText} + {children} + + ); +} diff --git a/src/components/Dash/Sidebar/index.tsx b/src/components/Dash/Sidebar/index.tsx index 756ac19..b705432 100644 --- a/src/components/Dash/Sidebar/index.tsx +++ b/src/components/Dash/Sidebar/index.tsx @@ -23,31 +23,18 @@ function SidebarLink({ href, children, iconUrl, isActive }: SidebarLinkProps) { ); } -export function Sidebar() { - const pathname = usePathname(); +export interface SidebarLink { + href: string; + label: string; + icon: `/${string}`; +} - const links = [ - { - href: "/dash/providers", - label: "Providers", - icon: "/providers.svg", - }, - { - href: "/dash/destinations", - label: "Destinations", - icon: "/destinations.svg", - }, - { - href: "/dash/embed-builder", - label: "Embed Builder", - icon: "/embed.svg", - }, - { - href: "/dash/settings", - label: "Settings", - icon: "/settings.svg", - }, - ]; +interface Props { + links: Array; +} + +export function Sidebar({ links }: Props) { + const pathname = usePathname(); return ( @@ -63,7 +50,7 @@ export function Sidebar() { href={href} iconUrl={icon} key={href} - isActive={href === pathname} + isActive={pathname.startsWith(href)} > {label} diff --git a/src/components/Dash/Sidebar/styles.ts b/src/components/Dash/Sidebar/styles.ts index d6a6120..e0cfabd 100644 --- a/src/components/Dash/Sidebar/styles.ts +++ b/src/components/Dash/Sidebar/styles.ts @@ -4,8 +4,7 @@ import Link from "next/link"; export const Sidebar = styled(Panel, { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "6", }, }); @@ -14,7 +13,7 @@ export const Section = styled("div", {}); export const Label = styled("p", { base: { - color: "neutral.600", + color: "text.secondary", fontSize: "sm", marginBottom: "2", }, @@ -22,21 +21,19 @@ export const Label = styled("p", { export const Nav = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); export const NavLink = styled(Link, { base: { - padding: "4", + padding: "token(spacing.4) 64px token(spacing.4) token(spacing.4)", borderRadius: "lg", border: "1px solid token(colors.neutral.300)", - backgroundColor: "neutral.200", - display: "flex", + backgroundColor: "input.bg", + displayFlex: "row", alignItems: "center", - flexDirection: "row", gap: "2", colorPalette: "neutral", transition: @@ -45,6 +42,7 @@ export const NavLink = styled(Link, { backgroundRepeat: "no-repeat", backgroundPosition: "right token(spacing.4) center", userSelect: "none", + color: "text.primary", _hover: { boxShadow: "md", @@ -72,7 +70,7 @@ export const NavIcon = styled("div", { width: "32px", height: "32px", borderRadius: "full", - backgroundColor: "colorPalette.300", + backgroundColor: "colorPalette.100", border: "1px solid token(colors.colorPalette.400)", display: "flex", justifyContent: "center", diff --git a/src/components/Dash/WebhookSelect/styles.ts b/src/components/Dash/WebhookSelect/styles.ts index 68e7f2a..2a01426 100644 --- a/src/components/Dash/WebhookSelect/styles.ts +++ b/src/components/Dash/WebhookSelect/styles.ts @@ -11,16 +11,16 @@ export const Container = styled("div", { export const Trigger = styled(Select.Trigger, { base: { colorPalette: "neutral", - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", padding: "4", - minWidth: "250px", - border: "1px solid token(colors.neutral.400)", - borderRadius: "lg", + minWidth: "200px", + width: "100%", + inputBorder: true, gap: "2", cursor: "pointer", - backgroundColor: "neutral.100", + backgroundColor: "input.bg", + color: "text.primary", }, }); @@ -49,18 +49,18 @@ export const Content = styled(Select.Content, { colorPalette: "neutral", backgroundColor: "neutral.100", width: "100%", - border: "1px solid token(colors.neutral.400)", - borderRadius: "lg", + border: "1px solid token(colors.borders.normal)", + borderRadius: "input", padding: "2", zIndex: "popup", boxShadow: "md", + color: "text.primary", }, }); export const Viewport = styled(Select.Viewport, { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); @@ -72,8 +72,7 @@ export const Arrow = css({ export const Item = styled(Select.SelectItem, { base: { - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", padding: "4", gap: "2", diff --git a/src/components/home/Hero/index.tsx b/src/components/Home/Hero/index.tsx similarity index 89% rename from src/components/home/Hero/index.tsx rename to src/components/Home/Hero/index.tsx index 7eeff41..cc6957a 100644 --- a/src/components/home/Hero/index.tsx +++ b/src/components/Home/Hero/index.tsx @@ -1,4 +1,4 @@ -import { NotificationList } from "@/components/home/NotificationList"; +import { NotificationList } from "@/components/Home/NotificationList"; import * as Styles from "./styles"; import { css } from "panda/css"; diff --git a/src/components/home/Hero/styles.ts b/src/components/Home/Hero/styles.ts similarity index 88% rename from src/components/home/Hero/styles.ts rename to src/components/Home/Hero/styles.ts index 1b27e22..5325bbd 100644 --- a/src/components/home/Hero/styles.ts +++ b/src/components/Home/Hero/styles.ts @@ -2,10 +2,9 @@ import { styled } from "panda/jsx"; export const HeroContainer = styled("section", { base: { - display: "flex", + displayFlex: "row", width: "100%", height: "700px", - flexDirection: "row", justifyContent: "center", backgroundColor: "colorPalette.500", backgroundImage: "url(/graph.svg)", @@ -14,8 +13,7 @@ export const HeroContainer = styled("section", { export const HeroContent = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "center", maxWidth: "homeMaxWidth", diff --git a/src/components/home/NotificationList/index.tsx b/src/components/Home/NotificationList/index.tsx similarity index 100% rename from src/components/home/NotificationList/index.tsx rename to src/components/Home/NotificationList/index.tsx diff --git a/src/components/home/NotificationList/styles.ts b/src/components/Home/NotificationList/styles.ts similarity index 95% rename from src/components/home/NotificationList/styles.ts rename to src/components/Home/NotificationList/styles.ts index 2d7a5dd..7ce3897 100644 --- a/src/components/home/NotificationList/styles.ts +++ b/src/components/Home/NotificationList/styles.ts @@ -59,8 +59,7 @@ export const NotificationListContainer = styled("div", { export const NotificationList = styled("ul", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "4", translate: "0 -10%", }, diff --git a/src/components/home/Submit/index.tsx b/src/components/Home/Submit/index.tsx similarity index 90% rename from src/components/home/Submit/index.tsx rename to src/components/Home/Submit/index.tsx index 1300a9e..3b6635e 100644 --- a/src/components/home/Submit/index.tsx +++ b/src/components/Home/Submit/index.tsx @@ -1,4 +1,4 @@ -import * as Styles from "@/components/home/Submit/styles"; +import * as Styles from "@/components/Home/Submit/styles"; import { token } from "panda/tokens"; import { Button } from "@/components/common/Button"; diff --git a/src/components/home/Submit/styles.ts b/src/components/Home/Submit/styles.ts similarity index 87% rename from src/components/home/Submit/styles.ts rename to src/components/Home/Submit/styles.ts index de3db9d..eb892f0 100644 --- a/src/components/home/Submit/styles.ts +++ b/src/components/Home/Submit/styles.ts @@ -3,9 +3,8 @@ import { styled } from "panda/jsx"; export const SubmitSection = styled("section", { base: { - display: "flex", + displayFlex: "row", width: "100%", - flexDirection: "row", justifyContent: "center", }, }); @@ -21,8 +20,7 @@ export const SubmitBoxContainer = styled("div", { export const SubmitBox = styled(Box, { base: { padding: "8", - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", alignItems: "flex-start", diff --git a/src/components/home/WebhookInput/index.tsx b/src/components/Home/WebhookInput/index.tsx similarity index 100% rename from src/components/home/WebhookInput/index.tsx rename to src/components/Home/WebhookInput/index.tsx diff --git a/src/components/home/WebhookInput/styles.ts b/src/components/Home/WebhookInput/styles.ts similarity index 100% rename from src/components/home/WebhookInput/styles.ts rename to src/components/Home/WebhookInput/styles.ts diff --git a/src/components/Teams/TeamMember/index.tsx b/src/components/Teams/TeamMember/index.tsx new file mode 100644 index 0000000..19943c4 --- /dev/null +++ b/src/components/Teams/TeamMember/index.tsx @@ -0,0 +1,40 @@ +import * as Styles from "./styles"; +import { Option, Select } from "@/components/Dash/Select"; +import { Button } from "@/components/common/Button"; + +export enum TeamRole { + Owner, + Admin, + Member, +} + +export interface TeamMember { + email: string; + role: TeamRole; +} + +interface Props { + member: TeamMember; +} + +export function TeamMember({ member }: Props) { + return ( + + {member.email} + + + + + + ); +} diff --git a/src/components/Teams/TeamMember/styles.ts b/src/components/Teams/TeamMember/styles.ts new file mode 100644 index 0000000..e3dcb82 --- /dev/null +++ b/src/components/Teams/TeamMember/styles.ts @@ -0,0 +1,26 @@ +import { styled } from "panda/jsx"; + +export const TeamMember = styled("li", { + base: { + inputBorder: true, + listStyle: "none", + paddingX: "8", + paddingY: "4", + backgroundColor: "input.bg", + displayFlex: "column", + justifyContent: "space-between", + alignItems: "center", + gap: "2", + + md: { + flexDirection: "row", + }, + }, +}); + +export const Controls = styled("div", { + base: { + displayFlex: "row", + gap: "2", + }, +}); diff --git a/src/components/common/BackButton/index.tsx b/src/components/common/BackButton/index.tsx new file mode 100644 index 0000000..baa0f8a --- /dev/null +++ b/src/components/common/BackButton/index.tsx @@ -0,0 +1,19 @@ +"use client"; + +import * as Styles from "./styles"; +import { useRouter } from "next/navigation"; + +interface Props { + backPath?: string; +} + +export function BackButton({ backPath }: Props) { + const router = useRouter(); + + return ( + + ); +} diff --git a/src/components/common/BackButton/styles.ts b/src/components/common/BackButton/styles.ts new file mode 100644 index 0000000..302f6c3 --- /dev/null +++ b/src/components/common/BackButton/styles.ts @@ -0,0 +1,24 @@ +import { styled } from "panda/jsx"; +import Link from "next/link"; + +export const BackButton = styled(Link, { + base: { + borderColor: "neutral.300", + borderStyle: "solid", + borderWidth: "1px", + backgroundImage: "url(/back-arrow.svg)", + borderRadius: "full", + width: "40px", + height: "40px", + backgroundColor: "input.bg", + backgroundPosition: "center center", + backgroundRepeat: "no-repeat", + backgroundSize: "60%", + cursor: "pointer", + transition: "border-color token(durations.fast)", + + "&:hover": { + borderColor: "neutral.900", + }, + }, +}); diff --git a/src/components/common/Button/styles.ts b/src/components/common/Button/styles.ts index 06ef626..8717d31 100644 --- a/src/components/common/Button/styles.ts +++ b/src/components/common/Button/styles.ts @@ -14,11 +14,25 @@ export const Button = styled("button", { border: "1px solid token(colors.neutral.900)", borderRadius: "lg", boxSizing: "border-box", - textStyle: "normal", + textStyle: "button", backgroundImage: "url(/arrow_white.svg)", backgroundRepeat: "no-repeat", backgroundPosition: "right token(spacing.6) center", }, + primary: { + backgroundColor: "buttons.primary", + color: "neutral.100", + padding: "token(spacing.2) token(spacing.4)", + borderRadius: "lg", + textStyle: "button", + }, + danger: { + backgroundColor: "buttons.danger", + textStyle: "button", + color: "neutral.100", + padding: "token(spacing.2) token(spacing.4)", + borderRadius: "lg", + }, }, }, }); diff --git a/src/components/common/Navbar/index.tsx b/src/components/common/Navbar/index.tsx index 5ebdbef..38bbe9f 100644 --- a/src/components/common/Navbar/index.tsx +++ b/src/components/common/Navbar/index.tsx @@ -7,7 +7,7 @@ export function Navbar() { - logo + logo Hookla Keep your community informed. diff --git a/src/components/common/Navbar/styles.ts b/src/components/common/Navbar/styles.ts index 1b18505..5af980c 100644 --- a/src/components/common/Navbar/styles.ts +++ b/src/components/common/Navbar/styles.ts @@ -5,8 +5,7 @@ export const Navbar = styled("nav", { base: { padding: "token(spacing.6) token(spacing.4) token(spacing.4) token(spacing.4)", - display: "flex", - flexDirection: "row", + displayFlex: "row", gap: "4", flexWrap: "wrap", justifyContent: "space-between", @@ -27,8 +26,7 @@ export const NavbarContainer = styled("div", { top: 0, zIndex: "nav", backgroundColor: "neutral.100", - display: "flex", - flexDirection: "row", + displayFlex: "row", justifyContent: "center", }, }); @@ -44,8 +42,7 @@ export const LogoContainer = styled("div", { export const LogoText = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "0.5", }, }); @@ -53,6 +50,7 @@ export const LogoText = styled("div", { export const Title = styled("h1", { base: { textStyle: "normal", + color: "text.primary", }, }); @@ -62,7 +60,7 @@ export const Slogan = styled("p", { color: "magenta.400", textWrap: "nowrap", - hideBelow: "sm", + hideBelow: "md", }, }); @@ -85,8 +83,7 @@ export const UserAvatar = css({ export const UserText = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "0.5", hideBelow: "sm", }, @@ -95,6 +92,7 @@ export const UserText = styled("div", { export const WelcomeUsername = styled("p", { base: { textStyle: "normal", + color: "text.primary", }, }); @@ -110,8 +108,7 @@ export const SearchContainer = styled("div", { boxSizing: "border-box", order: 2, flexBasis: "100%", - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "stretch", sm: { diff --git a/src/components/common/Notification/styles.ts b/src/components/common/Notification/styles.ts index b967de0..8a51d8b 100644 --- a/src/components/common/Notification/styles.ts +++ b/src/components/common/Notification/styles.ts @@ -5,16 +5,14 @@ import { css } from "panda/css"; export const Notification = styled(Box, { base: { padding: "6", - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); export const NotificationSection = styled("div", { base: { - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", gap: "2", textStyle: "normal", diff --git a/src/components/common/PageFooter/index.tsx b/src/components/common/PageFooter/index.tsx new file mode 100644 index 0000000..737bec0 --- /dev/null +++ b/src/components/common/PageFooter/index.tsx @@ -0,0 +1 @@ +export * from "./styles"; diff --git a/src/components/common/PageFooter/styles.ts b/src/components/common/PageFooter/styles.ts new file mode 100644 index 0000000..0e7e452 --- /dev/null +++ b/src/components/common/PageFooter/styles.ts @@ -0,0 +1,9 @@ +import { styled } from "panda/jsx"; + +export const PageFooter = styled("div", { + base: { + displayFlex: "row", + gap: "4", + marginTop: "auto", + }, +}); diff --git a/src/components/common/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx new file mode 100644 index 0000000..0d6ed42 --- /dev/null +++ b/src/components/common/PageHeader/index.tsx @@ -0,0 +1,32 @@ +import * as Styles from "./styles"; +import { BackButton } from "@/components/common/BackButton"; +import Image from "next/image"; + +interface Props { + title: string; + subtitle?: string; + hasBackButton?: boolean; + backButtonUrl?: string; + logoUrl?: string; +} + +export function PageHeader({ + title, + subtitle, + backButtonUrl, + hasBackButton, + logoUrl, +}: Props) { + return ( + + + + {logoUrl && }{" "} + {title} + + {subtitle && {subtitle}} + + {hasBackButton && } + + ); +} diff --git a/src/components/common/PageHeader/styles.ts b/src/components/common/PageHeader/styles.ts new file mode 100644 index 0000000..592a074 --- /dev/null +++ b/src/components/common/PageHeader/styles.ts @@ -0,0 +1,55 @@ +import { styled } from "panda/jsx"; + +export const Container = styled("div", { + base: { + display: "flex", + borderBottom: "1px solid token(colors.neutral.300)", + paddingBottom: "8", + marginBottom: "8", + justifyContent: "space-between", + }, +}); + +export const TextContainer = styled("div", { + base: { + displayFlex: "column", + gap: "1", + }, +}); + +export const TitleText = styled("span", { + base: { + display: "none", + + sm: { + display: "unset", + }, + }, +}); + +export const Title = styled("p", { + base: { + fontSize: "2xl", + displayFlex: "row", + gap: "3", + fontWeight: "500", + color: "text.primary", + }, + variants: { + hasBackButton: { + false: { + justifyContent: "left", + }, + true: { + justifyContent: "center", + }, + }, + }, +}); + +export const Subtitle = styled("p", { + base: { + color: "text.secondary", + fontSize: "md", + }, +}); diff --git a/src/components/common/Route/styles.ts b/src/components/common/Route/styles.ts index fbb43dd..90d7813 100644 --- a/src/components/common/Route/styles.ts +++ b/src/components/common/Route/styles.ts @@ -4,8 +4,7 @@ import { css } from "panda/css"; export const Route = styled("label", { base: { padding: "8", - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", gap: "4", cursor: "pointer", @@ -15,8 +14,7 @@ export const Route = styled("label", { export const RouteInfo = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "flex-start", justifyContent: "center", gap: "1", diff --git a/src/components/common/RouteList/styles.ts b/src/components/common/RouteList/styles.ts index 6bc8b83..fa980f7 100644 --- a/src/components/common/RouteList/styles.ts +++ b/src/components/common/RouteList/styles.ts @@ -3,9 +3,8 @@ import { css } from "panda/css"; export const RouteSection = styled("section", { base: { - display: "flex", + displayFlex: "row", width: "100%", - flexDirection: "row", justifyContent: "center", }, }); @@ -13,8 +12,7 @@ export const RouteSection = styled("section", { export const RouteSectionContent = styled("div", { base: { padding: "paddingToMaxWidth", - display: "flex", - flexDirection: "column", + displayFlex: "column", justifyContent: "center", width: "homeMaxWidth", gap: "14", @@ -27,8 +25,7 @@ export const RouteSectionContent = styled("div", { export const ListContainer = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "8", flex: "1 0 auto", }, @@ -36,8 +33,7 @@ export const ListContainer = styled("div", { export const ListHeader = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", }, }); @@ -57,8 +53,7 @@ export const ListSubtitle = styled("p", { export const List = styled("ul", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); diff --git a/src/components/common/SearchDocumentation/styles.ts b/src/components/common/SearchDocumentation/styles.ts index 5b6a06e..45c1616 100644 --- a/src/components/common/SearchDocumentation/styles.ts +++ b/src/components/common/SearchDocumentation/styles.ts @@ -4,20 +4,19 @@ export const SearchDocumentation = styled("input", { base: { padding: "token(spacing.4) token(spacing.4) token(spacing.4) token(spacing.10)", - borderRadius: "lg", - borderWidth: "1px", - borderColor: "neutral.500", + inputBorder: true, boxSizing: "border-box", - backgroundColor: "neutral.100", + backgroundColor: "input.bg", fontSize: "sm", lineHeight: "1", backgroundImage: "url('/search.svg')", backgroundRepeat: "no-repeat", backgroundPosition: "token(spacing.4) center", outline: "none", + color: "text.primary", _placeholder: { - color: "neutral.500", + color: "input.placeholder", }, }, }); diff --git a/src/components/common/TextInput/index.tsx b/src/components/common/TextInput/index.tsx new file mode 100644 index 0000000..aa54be6 --- /dev/null +++ b/src/components/common/TextInput/index.tsx @@ -0,0 +1,15 @@ +import * as Styles from "./styles"; +import { ComponentPropsWithRef } from "react"; + +interface Props extends ComponentPropsWithRef<"input"> { + label?: string; +} + +export function TextInput({ label, ...rest }: Props) { + return ( + + {label} + + + ); +} diff --git a/src/components/common/TextInput/styles.ts b/src/components/common/TextInput/styles.ts new file mode 100644 index 0000000..a4b2cfe --- /dev/null +++ b/src/components/common/TextInput/styles.ts @@ -0,0 +1,21 @@ +import { styled } from "panda/jsx"; + +export const InputLabel = styled("label", { + base: { + color: "text.secondary", + displayFlex: "column", + gap: "2", + }, +}); + +export const Input = styled("input", { + base: { + backgroundColor: "input.bg", + inputBorder: true, + padding: "token(spacing.2) token(spacing.4)", + + _placeholder: { + color: "input.placeholder", + }, + }, +});