feat: update stack and /open-design

.eslintrc-auto-import.json

@@ -1,16 +1,29 @@
 {
   "globals": {
-    "GlyphBsa": true,
-    "GlyphManhattanHydraulics": true,
-    "GlyphOtd": true,
-    "MdiCheck": true,
-    "MdiClose": true,
+    "createRef": true,
+    "forwardRef": true,
+    "lazy": true,
+    "memo": true,
+    "startTransition": true,
     "useCallback": true,
     "useContext": true,
+    "useDebugValue": true,
+    "useDeferredValue": true,
     "useEffect": true,
+    "useId": true,
+    "useImperativeHandle": true,
+    "useInsertionEffect": true,
+    "useLayoutEffect": true,
     "useMemo": true,
     "useReducer": true,
     "useRef": true,
-    "useState": true
+    "useState": true,
+    "useSyncExternalStore": true,
+    "useTransition": true,
+    "GlyphBsa": true,
+    "GlyphManhattanHydraulics": true,
+    "MdiClose": true,
+    "GlyphOtd": true,
+    "MdiCheck": true
   }
-}
+}

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   ],
   plugins: ['prettier', 'sonarjs', 'sort-keys-fix', '@next/next'],
   rules: {
+    'antfu/if-newline': 'off',
     'import/order': [
       'error',
       {
@@ -56,12 +57,12 @@ module.exports = {
         vueIndentScriptAndStyle: false,
       },
     ],
-    'react/jsx-no-undef': [
-      'error',
-      {
-        allowGlobals: true,
-      },
-    ],
+    // 'react/jsx-no-undef': [
+    //   'error',
+    //   {
+    //     allowGlobals: true,
+    //   },
+    // ],
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
     'sort-keys-fix/sort-keys-fix': [

.gitignore

@@ -21,6 +21,7 @@
 !.yarn/versions
 .pnp.*
 node_modules
-npm-debug.log
-yarn-error.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 .DS_Store

.node-version

@@ -0,0 +1 @@
+v18.16.0

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -1 +1 @@
-14
+v18.16.0

.storybook/preview.js

@@ -1,5 +1,3 @@
-import 'windi.css'
-
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
-    "voorjaar.windicss-intellisense"
+    "voorjaar.windicss-intellisense",
+    "antfu.unocss"
   ]
 }

.vscode/settings.json

@@ -22,5 +22,18 @@
     "*.css": "postcss"
   },
   "prettier.enable": false,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "windicss.sortOnSave": false,
+  "windicss.enableVariantCompletion": false,
+  "windicss.enableUtilityCompletion": false,
+  "windicss.enableRemToPxPreview": false,
+  "windicss.enableHoverPreview": false,
+  "windicss.enableEmmetCompletion": false,
+  "windicss.enableDynamicCompletion": false,
+  "windicss.enableColorDecorators": false,
+  "windicss.enableCodeFolding": false,
+  "windicss.enableCodeCompletion": false,
+  "windicss.enableBracketCompletion": false,
+  "windicss.enableAttrVariantCompletion": false,
+  "windicss.enableAttrUtilityCompletion": false
 }

README.md

@@ -2,9 +2,7 @@
 
 The **Dual Power App** is a platform that provides a framework for organizing toward a worker-owned economy, with tools for founding, funding, governance, and internal + external communications.
 
-We’re launching in 2021 with support for [Dual Power Projects](https://dualpower.app).
-
-* [What's up with the Dual Power App?](https://github.com/BSA-US/dual-power-app/issues/42)
+* [Regular meetings on Discord](https://discord.gg/BqdhzwM2aa)
 * [Stack & contributor guidelines](https://github.com/BSA-US/dual-power-app/blob/main/CONTRIBUTING.md)
 * [Twitter](https://twitter.com/DualPowerApp)
 
@@ -15,7 +13,7 @@ We’re launching in 2021 with support for [Dual Power Projects](https://dualpow
 - **Designers:** We need your help turning our [wireframes](https://www.figma.com/file/N6VFPqgNVovoXxy93Q6i4Q/Dual-Power-App-2021–present?node-id=0%3A1) & [information architecture](https://dualpower.app/docs/dual-power-app-ia.pdf) into high-fidelity components & prototypes. We're open to spontaneous contributions, as well as more formal projects coordinated with the team.
 - **Engineers:** Build with us! We have a broad roadmap and some issues that are open to your contributions, and if you introduce yourself we can help you get started.
 
-Join us in the [Discussions board](https://github.com/BSA-US/dual-power-app/discussions), and if you want to get more involved, come to one of our [public meetings every two weeks](https://dualpower.app/open-design) or join BSA Open Tech Development (OTD) on Basecamp by [sending BSA an intro](https://blacksocialists.us/contact).
+Join us in the [Discussions board](https://github.com/BSA-US/dual-power-app/discussions), and if you want to get more involved, come to one of our [public meetings](https://dualpower.app/open-design).
 
 ## Contributing
 
@@ -36,9 +34,9 @@ While we're focusing on design so we can get to a buildable spec ASAP, you're fr
     nvm install
     nvm use
     ```
-4. Install `yarn` globally:
+4. Enable `yarn`:
     ```sh
-    npm install --global yarn
+    corepack enable
     ```
 5. Install dependencies:
     ```sh

auto-imports.d.ts

@@ -1,17 +1,32 @@
-// Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
 declare global {
   const GlyphBsa: typeof import('~icons/glyph/bsa.jsx')['default']
   const GlyphManhattanHydraulics: typeof import('~icons/glyph/manhattan-hydraulics.jsx')['default']
   const GlyphOtd: typeof import('~icons/glyph/otd.jsx')['default']
   const MdiCheck: typeof import('~icons/mdi/check.jsx')['default']
   const MdiClose: typeof import('~icons/mdi/close.jsx')['default']
+  const createRef: typeof import('react')['createRef']
+  const forwardRef: typeof import('react')['forwardRef']
+  const lazy: typeof import('react')['lazy']
+  const memo: typeof import('react')['memo']
+  const startTransition: typeof import('react')['startTransition']
   const useCallback: typeof import('react')['useCallback']
   const useContext: typeof import('react')['useContext']
+  const useDebugValue: typeof import('react')['useDebugValue']
+  const useDeferredValue: typeof import('react')['useDeferredValue']
   const useEffect: typeof import('react')['useEffect']
+  const useId: typeof import('react')['useId']
+  const useImperativeHandle: typeof import('react')['useImperativeHandle']
+  const useInsertionEffect: typeof import('react')['useInsertionEffect']
+  const useLayoutEffect: typeof import('react')['useLayoutEffect']
   const useMemo: typeof import('react')['useMemo']
   const useReducer: typeof import('react')['useReducer']
   const useRef: typeof import('react')['useRef']
   const useState: typeof import('react')['useState']
+  const useSyncExternalStore: typeof import('react')['useSyncExternalStore']
+  const useTransition: typeof import('react')['useTransition']
 }
-export {}

components/avatar.tsx

@@ -5,23 +5,29 @@ import type {
   AvatarProps,
 } from '@radix-ui/react-avatar'
 
-export const Avatar = (props: AvatarProps) => (
-  <Root
-    {...props}
-    className={`${props.className}`}
-  />
-)
+export function Avatar(props: AvatarProps) {
+  return (
+    <Root
+      {...props}
+      className={`${props.className}`}
+    />
+  )
+}
 
-export const AvatarImage = (props: AvatarImageProps) => (
-  <Image
-    {...props}
-    className={`${props.className}`}
-  />
-)
+export function AvatarImage(props: AvatarImageProps) {
+  return (
+    <Image
+      {...props}
+      className={`${props.className}`}
+    />
+  )
+}
 
-export const AvatarFallback = (props: AvatarFallbackProps) => (
-  <Fallback
-    {...props}
-    className={`${props.className}`}
-  />
-)
+export function AvatarFallback(props: AvatarFallbackProps) {
+  return (
+    <Fallback
+      {...props}
+      className={`${props.className}`}
+    />
+  )
+}

components/button.tsx

@@ -4,7 +4,7 @@ export interface ButtonProps {
   onClick?: () => void
 }
 
-export const Button = ({ className, ...props }: ButtonProps) => {
+export function Button({ className, ...props }: ButtonProps) {
   return (
     <button
       className={`btn ${className}`}

components/card.tsx

@@ -5,11 +5,11 @@ export interface CardProps {
   onClick?: () => void
 }
 
-export const Card = ({
+export function Card({
   treatment = 'standard',
   className,
   ...props
-}: CardProps) => {
+}: CardProps) {
   const styleMap = {
     knockout: 'bg-dark-900 text-white font-bold',
     outline: 'bg-transparent text-dark-900 font-bold border-3',
@@ -24,7 +24,7 @@ export const Card = ({
   )
 }
 
-export const CardCTA = ({ className, ...props }: any) => {
+export function CardCTA({ className, ...props }: any) {
   return (
     <div
       className={`pt-2 flex justify-center ${className}`}

components/checkbox.tsx

@@ -4,21 +4,25 @@ import type {
   CheckboxProps,
 } from '@radix-ui/react-checkbox'
 
-export const Checkbox = ({ className = '', ...props }: CheckboxProps) => (
-  <Root
-    {...props}
-    className={`relative w-24px h-24px border-1 border-cool-gray-300 rounded-sm flex items-center justify-center focus-ring ${className}`}
-  >
-    <MdiCheck className={props.checked ? '' : 'hidden'} />
-  </Root>
-)
+export function Checkbox({ className = '', ...props }: CheckboxProps) {
+  return (
+    <Root
+      {...props}
+      className={`relative w-24px h-24px border-1 border-cool-gray-300 rounded-sm flex items-center justify-center focus-ring ${className}`}
+    >
+      <MdiCheck className={props.checked ? '' : 'hidden'} />
+    </Root>
+  )
+}
 
-export const CheckIndicator = ({
+export function CheckIndicator({
   className = '',
   ...props
-}: CheckboxIndicatorProps) => (
-  <Indicator
-    {...props}
-    className={`${className}`}
-  ></Indicator>
-)
+}: CheckboxIndicatorProps) {
+  return (
+    <Indicator
+      {...props}
+      className={`${className}`}
+    ></Indicator>
+  )
+}

components/divider.tsx

@@ -2,7 +2,7 @@ export interface DividerProps {
   className?: string
 }
 
-export const Divider = ({ className, ...props }: DividerProps) => {
+export function Divider({ className, ...props }: DividerProps) {
   return (
     <hr
       className={`border-gray-200 border-top-1 ${className}`}

components/index.ts

@@ -3,10 +3,8 @@ export { Button } from './button'
 export { Card, CardCTA } from './card'
 export { Checkbox, CheckIndicator } from './checkbox'
 export { Divider } from './divider'
-export { default as Event } from './event'
 export { Modal, ModalClose, ModalDescription, ModalTitle } from './modal'
 export { Pill } from './pill'
 export { RadioButtons, RadioButton, RadioIndicator } from './radio-buttons'
 export * from './tabs'
-export { default as Status } from './status'
-export { default as VideoPlayerStream } from './video-player-stream'
+export * from './section-cta-open-design'