Deploy a DAO

.env.example

@@ -10,4 +10,5 @@ NEXT_PUBLIC_COVALENT_API_KEY=
 NEXT_PUBLIC_ETHERSCAN_API_KEY=
 NEXT_PUBLIC_POLYGONSCAN_API_KEY=
 
-TIPTAP_TOKEN=
+TIPTAP_TOKEN=
+

.npmrc

@@ -1,2 +0,0 @@
-@tiptap-pro:registry=https://registry.tiptap.dev/
-//registry.tiptap.dev/:_authToken=${TIPTAP_TOKEN}

design/Accordion/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import * as styles from './styles.css'
+import { Box, IconChevronDown } from '@kalidao/reality'
+
+// Exports
+
+type Props = {
+  type: any
+  defaultValue?: string
+  collapsible?: boolean
+  children: React.ReactNode
+}
+
+export const Accordion = ({ type, defaultValue, collapsible, children }: Props) => {
+  return (
+    <AccordionPrimitive.Root type={type} defaultValue={defaultValue} collapsible={collapsible} className={styles.root}>
+      {children}
+    </AccordionPrimitive.Root>
+  )
+}
+
+export const AccordionItem = ({ children, value }: { children: React.ReactNode; value: string }) => {
+  return (
+    <AccordionPrimitive.Item value={value} className={styles.item}>
+      {children}
+    </AccordionPrimitive.Item>
+  )
+}
+
+export const AccordionTrigger = ({ children, ...props }: { children: React.ReactNode }) => (
+  <AccordionPrimitive.Header className={styles.header}>
+    <AccordionPrimitive.Trigger className={styles.trigger} {...props}>
+      {children}
+      <IconChevronDown className={styles.chevron} aria-hidden />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+)
+
+export const AccordionContent = ({ children, ...props }: { children: React.ReactNode }) => (
+  <AccordionPrimitive.Content className={styles.content} {...props}>
+    <Box paddingLeft="15" paddingRight="20">
+      {children}
+    </Box>
+  </AccordionPrimitive.Content>
+)

design/Accordion/styles.css.ts

@@ -0,0 +1,102 @@
+import { vars } from '@kalidao/reality'
+import { style, keyframes } from '@vanilla-extract/css'
+
+const slideDown = keyframes({
+  from: { height: 0 },
+  to: { height: 'var(--radix-accordion-content-height)' },
+})
+
+const slideUp = keyframes({
+  from: { height: 'var(--radix-accordion-content-height)' },
+  to: { height: 0 },
+})
+
+export const header = style({
+  all: 'unset',
+  display: 'flex',
+})
+
+export const icon = style({
+  color: vars.colors.foreground,
+  transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+  selectors: {
+    '[data-state=closed] &': { transform: 'rotate(180deg)' },
+  },
+})
+
+export const trigger = style({
+  all: 'unset',
+  fontFamily: vars.fonts.sans,
+  backgroundColor: vars.colors.background,
+  padding: vars.space[2],
+  paddingRight: vars.space[4],
+  paddingLeft: vars.space[4],
+  height: vars.space[8],
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  fontSize: vars.fontSizes.base,
+  lineHeight: vars.lineHeights.normal,
+  color: vars.colors.foreground,
+  fontWeight: vars.fontWeights.semiBold,
+
+  selectors: {
+    '&[data-state="closed"]': { backgroundColor: vars.colors.background },
+    '&[data-state="open"]': { backgroundColor: vars.colors.background, color: vars.colors.foreground },
+    '&:hover': { backgroundColor: vars.colors.accentSecondary },
+  },
+})
+
+export const root = style({
+  borderRadius: vars.radii['2xLarge'],
+  width: vars.space.full,
+  backgroundColor: vars.colors.background,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.space[1],
+})
+
+export const item = style({
+  overflow: 'hidden',
+  borderColor: vars.colors.foregroundSecondary,
+  borderWidth: vars.borderWidths['0.5'],
+  borderStyle: vars.borderStyles.solid,
+  borderRadius: vars.radii['2xLarge'],
+
+  selectors: {
+    '&:first-child': {
+      marginTop: 0,
+    },
+    '&:focus-within': {
+      position: 'relative',
+      zIndex: 1,
+      boxShadow: `0 0 0 2px ${'$gray'}`,
+    },
+  },
+})
+
+export const content = style({
+  overflow: 'hidden',
+  fontSize: 15,
+  color: '$gray12',
+  backgroundColor: '$mauve2',
+  borderRadius: vars.radii['2xLarge'],
+
+  selectors: {
+    '&[data-state="open"]': {
+      animation: `${slideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+    },
+    '&[data-state="closed"]': {
+      animation: `${slideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+    },
+  },
+})
+
+export const chevron = style({
+  color: '$mauve12',
+  transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+  selectors: {
+    '[data-state=closed] &': { transform: 'rotate(180deg)' },
+  },
+})

design/DateInput/index.tsx

@@ -0,0 +1,31 @@
+import * as styles from './styles.css'
+import { Field, Box } from '@kalidao/reality'
+
+type Props = {
+  name?: string
+  label: string
+  description?: string
+  error?: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+  defaultValue?: string
+}
+
+export function DateInput({ name, label, disabled, error, onChange, defaultValue }: Props) {
+  const hasError = error ? true : undefined
+
+  return (
+    <Field label={label}>
+      <Box
+        as="input"
+        name={name}
+        type="datetime-local"
+        defaultValue={defaultValue}
+        className={styles.container}
+        onChange={onChange}
+        disabled={disabled}
+        maxWidth={'56'}
+      ></Box>
+    </Field>
+  )
+}

design/DateInput/styles.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css'
+import { vars } from '@kalidao/reality'
+
+export const container = style({
+  backgroundColor: vars.colors.background,
+  outlineWidth: vars.borderWidths.px,
+  outlineColor: vars.colors.foregroundSecondary,
+  outlineStyle: 'solid',
+  borderWidth: vars.borderWidths.px,
+  borderColor: vars.colors.foregroundSecondary,
+  borderRadius: vars.radii.large,
+  color: vars.colors.text,
+  fontSize: vars.fontSizes.small,
+  paddingRight: vars.space[3.5],
+  paddingLeft: vars.space[3.5],
+  paddingTop: vars.space[3.5],
+  paddingBottom: vars.space[3.5],
+
+  display: 'flex',
+
+  ':hover': {
+    outlineColor: vars.colors.accent,
+    backgroundColor: vars.colors.backgroundSecondary,
+  },
+})

design/FormSelect/index.tsx

@@ -0,0 +1,37 @@
+import * as styles from './select.css'
+import { Field, Box } from '@kalidao/reality'
+import { description } from '@design/Dialog/styles.css'
+
+type Props = {
+  name?: string
+  label: string
+  description?: string
+  error?: string
+  options: Array<{ label: string; value: string }>
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void
+  defaultValue?: string
+  disabled?: boolean
+}
+
+export function FormSelect({ name, label, disabled, error, options, onChange, defaultValue }: Props) {
+  const hasError = error ? true : undefined
+
+  return (
+    <Field label={label}>
+      <Box
+        as="select"
+        name={name}
+        defaultValue={defaultValue}
+        className={[styles.select, disabled && styles.disabled, hasError && styles.error]}
+        onChange={onChange}
+        disabled={disabled}
+      >
+        {options.map((option, index) => (
+          <Box key={index} as="option" value={option.value}>
+            {option.label}
+          </Box>
+        ))}
+      </Box>
+    </Field>
+  )
+}

design/FormSelect/select.css.ts

@@ -0,0 +1,72 @@
+import { style } from '@vanilla-extract/css'
+import { atoms, vars } from '@kalidao/reality'
+
+export const root = style({
+  backgroundColor: vars.colors.background,
+  borderWidth: vars.borderWidths.px,
+  borderColor: vars.colors.foregroundSecondary,
+  borderRadius: vars.radii.large,
+  color: vars.colors.text,
+  display: 'flex',
+  fontSize: vars.fontSizes.small,
+  height: vars.space[12],
+  transitionDuration: '150',
+  transitionProperty: 'colors',
+  transitionTimingFunction: 'inOut',
+  padding: '10',
+  selectors: {
+    '&:focus-within': {
+      borderColor: vars.colors.accent,
+    },
+  },
+})
+
+export const error = style({
+  borderColor: 'red',
+  cursor: 'default',
+  selectors: {
+    '&:focus-within': {
+      borderColor: vars.colors.red,
+    },
+  },
+})
+
+export const disabled = style({
+  borderColor: 'foregroundSecondary',
+})
+
+export const select = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: vars.space[3],
+
+  backgroundColor: vars.colors.background,
+  borderWidth: vars.borderWidths.px,
+  borderColor: vars.colors.foregroundSecondary,
+  borderRadius: vars.radii.large,
+  color: vars.colors.text,
+
+  fontSize: vars.fontSizes.small,
+  height: vars.space[12],
+
+  lineHeight: vars.lineHeights.normal,
+
+  ':hover': {
+    color: vars.colors.foreground,
+    backgroundColor: vars.colors.backgroundSecondary,
+    borderColor: vars.colors.accent,
+  },
+  ':focus': {
+    color: vars.colors.foreground,
+    backgroundColor: vars.colors.backgroundSecondary,
+    borderColor: vars.colors.accent,
+    boxShadow: 'none',
+    outline: 'none',
+  },
+  ':active': {
+    color: vars.colors.foreground,
+    backgroundColor: vars.colors.backgroundSecondary,
+    borderColor: vars.colors.accent,
+  },
+})

design/Progress/index.tsx

@@ -0,0 +1,10 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as styles from './styles.css'
+
+export const Progress = ({ value }: { value: number }) => {
+  return (
+    <ProgressPrimitive.Root className={styles.root} value={value}>
+      <ProgressPrimitive.Indicator className={styles.indicator} style={{ transform: `translateX(-${100 - value}%)` }} />
+    </ProgressPrimitive.Root>
+  )
+}

design/Progress/styles.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css'
+import { vars } from '@kalidao/reality'
+
+export const root = style({
+  position: 'relative',
+  overflow: 'hidden',
+  background: vars.colors.backgroundTertiary,
+  borderRadius: vars.radii['2xLarge'],
+  width: '100%',
+  height: vars.space[2],
+  marginTop: vars.space[2],
+})
+
+export const indicator = style({
+  backgroundColor: vars.colors.accent,
+  width: '100%',
+  height: '100%',
+  transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)',
+})

design/Sheet/index.tsx

@@ -43,7 +43,7 @@ export interface DialogContentProps extends SheetPrimitive.DialogContentProps {
 const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, DialogContentProps>(
   ({ position, size, className, onClose, children, ...props }, ref) => (
     <SheetPortal position={position}>
-      <SheetOverlay />
+      <SheetOverlay onClick={onClose}/>
       <SheetPrimitive.Content
         ref={ref}
         className={cn(

design/Sheet/styles.css.ts

@@ -105,6 +105,12 @@ export const portalChildren = styleVariants({
       justifyContent: 'flex-end',
     },
   ],
+  center: [
+    basePortal,
+    {
+      justifyContent: 'center',
+    },
+  ],
 })
 
 export const sheetOverlay = style([
@@ -131,7 +137,7 @@ export const sheetOverlay = style([
 
 export const portalContent = recipe({
   base: {
-    position: 'fixed',
+    // position: 'fixed',
     display: 'flex',
     flexDirection: 'column',
     zIndex: 50,