refactor(monorepo): remove modules dir

.gitignore

@@ -68,6 +68,3 @@ cache/
 *.log
 *.debug
 
-# Generated Components
-components/
-!packages/components/**/*

components/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

components/.npmignore

@@ -0,0 +1,2 @@
+src/
+test/

packages/components/jest.config.ts → components/jest.config.ts

@@ -1,7 +1,7 @@
-import type { Config } from '@jest/types';
-import { pathsToModuleNameMapper } from 'ts-jest/utils';
+import type { Config } from '@jest/types'
+import { pathsToModuleNameMapper } from 'ts-jest/utils'
 
-import { compilerOptions } from './tsconfig.json';
+import { compilerOptions } from './tsconfig.json'
 
 const config: Config.InitialOptions = {
   collectCoverageFrom: [
@@ -30,6 +30,6 @@ const config: Config.InitialOptions = {
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',
   ],
-};
+}
 
-export default config;
+export default config

packages/components/package.json → components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@disco3/components",
-  "version": "0.0.1",
-  "description": "web3 design system for disco3",
+  "version": "0.0.8",
+  "description": "Design system for Disco3",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -23,51 +23,27 @@
   "files": [
     "dist/**"
   ],
+  "repository": "manifoldfinance/disco3-react",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/manifoldfinance/disco3-react.git",
-    "directory": "packages/components"
-  },
-  "keywords": [
-    "react",
-    "typescript",
-    "bundle",
-    "ethereum",
-    "web3",
-    "vanilla",
-    "react",
-    "components"
-  ],
-  "bugs": {
-    "url": "https://github.com/manifoldfinance/disco3-react/issues"
-  },
   "scripts": {
-    "build": "NODE_ENV=production npx vite build",
+    "build": "vite build",
     "clean": "rimraf dist src/components/icons/generated/",
-    "lint:types": "npx tsc --noEmit",
-    "prepack": "yarn build",
+    "lint:types": "tsc --noEmit",
+    "build-pack": "yarn gen:icons && yarn build",
     "publish": "yarn npm publish",
-    "test": "npx jest -u"
+    "test": "jest"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.6.8",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
-    "@vanilla-extract/recipes": "^0.2.3",
-    "@vanilla-extract/sprinkles": "^1.3.3",
+    "@vanilla-extract/recipes": "^0.2.4",
+    "@vanilla-extract/sprinkles": "^1.4.0",
     "clsx": "^1.1.1",
     "focus-visible": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.4.5",
-    "@babel/plugin-proposal-class-properties": "7.4.4",
-    "@babel/preset-env": "7.4.5",
-    "@babel/preset-react": "7.0.0",
-    "@babel/preset-typescript": "7.3.3",
-    "@babel/register": "7.4.4",
     "@jest/types": "^27.2.5",
-    "@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
     "@svgr/core": "^6.2.1",
     "@svgr/plugin-jsx": "^6.2.1",
     "@svgr/plugin-prettier": "^6.1.2",
@@ -77,16 +53,16 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/testing-library__jest-dom": "^5.14.1",
     "@types/glob": "^7.2.0",
     "@types/node": "^16.11.6",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@types/rimraf": "^3.0.2",
-    "@vanilla-extract/babel-plugin": "^1.1.4",
-    "@vanilla-extract/private": "^1.0.3",
-    "@vanilla-extract/vite-plugin": "^3.1.2",
+    "@types/testing-library__jest-dom": "^5.14.1",
+    "@vanilla-extract/private": "^1.0.1",
+    "@vanilla-extract/vite-plugin": "^3.0.0",
     "change-case": "^4.1.2",
+    "dedent": "^0.7.0",
     "deepmerge": "^4.2.2",
     "glob": "^7.2.0",
     "jest": "^27.3.1",
@@ -96,9 +72,10 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
-    "vite": "^2.6.13",
+    "typescript": "4.6.3",
+    "vite": "^2.9.1",
     "vite-plugin-dts": "^0.9.2",
-    "vite-tsconfig-paths": "^3.3.17"
+    "vite-tsconfig-paths": "^3.4.1"
   },
   "peerDependencies": {
     "react": "^17",

packages/components/src/components/Avatar/Avatar.docs.mdx → components/src/components/Avatar/Avatar.docs.mdx

@@ -4,7 +4,7 @@ description: Representation of entity
 ---
 
 ```tsx
-import { Avatar } from '@disco3/components';
+import { Avatar } from 'degen'
 ```
 
 ```tsx live=true expand=true
@@ -53,37 +53,33 @@ import { Avatar } from '@disco3/components';
 
 ## Border
 
-By default, there is a light border around the edge to define image edges on
-similarly colored backgrounds. This can be disabled by using the `noBorder`
-prop.
+By default, there is a light border around the edge to define image edges on similarly colored backgrounds. This can be disabled by using the `noBorder` prop.
 
 ```tsx live=true
 <Stack direction="horizontal">
   <Avatar
     size="24"
     src={
       mode === 'light'
-        ? 'https://d.pr/i/2532ep.jpeg'
-        : 'https://d.pr/i/QQNPxB.jpegg'
+        ? 'https://images.mirror-media.xyz/publication-images/152cd86f-45ad-4f48-8971-4dd33fde5bc1.png'
+        : 'https://images.mirror-media.xyz/publication-images/5eaba6b2-b9ee-4bea-aeac-75796d53798f.jpg'
     }
   />
   <Avatar
     noBorder
     size="24"
     src={
       mode === 'light'
-        ? 'https://d.pr/i/2532ep.jpeg'
-        : 'https://d.pr/i/QQNPxB.jpegg'
+        ? 'https://images.mirror-media.xyz/publication-images/152cd86f-45ad-4f48-8971-4dd33fde5bc1.png'
+        : 'https://images.mirror-media.xyz/publication-images/5eaba6b2-b9ee-4bea-aeac-75796d53798f.jpg'
     }
   />
 </Stack>
 ```
 
 ## next/image
 
-If you are using Next.js and configured
-[`next/image`](https://nextjs.org/docs/api-reference/next/image) appropriately,
-you can pass it in with the `as` prop.
+If you are using Next.js and configured [`next/image`](https://nextjs.org/docs/api-reference/next/image) appropriately, you can pass it in with the `as` prop.
 
 ```tsx live=true expand=true
 <Avatar as={NextImage} label="Noun 97" src={avatars.noun97} />

components/src/components/Avatar/Avatar.snippets.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { Snippet } from '!/playroom/src/types'
+import { Avatar } from './Avatar'
+
+export const snippets: Snippet[] = [
+  {
+    name: 'Basic',
+    code: (
+      <Avatar
+        label="Avatar"
+        src="https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png"
+      />
+    ),
+  },
+]

components/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import { cleanup, render, screen } from '@/test'
+
+import { Avatar } from './Avatar'
+
+describe('<Avatar />', () => {
+  afterEach(cleanup)
+
+  it('renders', () => {
+    render(
+      <Avatar
+        label="Avatar"
+        src="https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png"
+      />,
+    )
+    expect(screen.getByRole(/img/i)).toBeInTheDocument()
+  })
+})

packages/components/src/components/Avatar/Avatar.tsx → components/src/components/Avatar/Avatar.tsx

@@ -1,18 +1,17 @@
-import * as React from 'react';
-import * as styles from './styles.css';
+import * as React from 'react'
 
-import { Box, BoxProps } from '../Box';
-
-import { UserSolid } from '../disco-icons';
+import { Box, BoxProps } from '../Box'
+import { IconUserSolid } from '../icons'
+import * as styles from './styles.css'
 
 export type Props = {
-  as?: 'img' | React.ComponentType;
-  label: string;
-  placeholder?: boolean;
-  noBorder?: boolean;
-  size?: BoxProps['height'];
-  src?: string;
-} & styles.Variants;
+  as?: 'img' | React.ComponentType
+  label: string
+  placeholder?: boolean
+  noBorder?: boolean
+  size?: BoxProps['height']
+  src?: string
+} & styles.Variants
 
 export const Avatar = ({
   as = 'img',
@@ -62,5 +61,5 @@ export const Avatar = ({
         </>
       )}
     </Box>
-  );
-};
+  )
+}

components/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar'
+export type { Props } from './Avatar'

packages/components/src/components/Avatar/styles.css.ts → components/src/components/Avatar/styles.css.ts

@@ -1,7 +1,7 @@
-import { style } from '@vanilla-extract/css';
-import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { style } from '@vanilla-extract/css'
+import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
 
-import { atoms, vars } from '../../css';
+import { atoms, vars } from '../../css'
 
 export const variants = recipe({
   variants: {
@@ -42,6 +42,6 @@ export const variants = recipe({
   defaultVariants: {
     noBorder: false,
   },
-});
+})
 
-export type Variants = RecipeVariants<typeof variants>;
+export type Variants = RecipeVariants<typeof variants>

components/src/components/AvatarGroup/AvatarGroup.docs.mdx

@@ -0,0 +1,71 @@
+---
+title: AvatarGroup
+description: Group of entity representations
+---
+
+```tsx
+import { AvatarGroup } from 'degen'
+```
+
+```tsx live=true expand=true
+<AvatarGroup
+  members={[
+    { label: 'Noun 97', src: avatars.noun97 },
+    { label: 'Noun 11', src: avatars.noun11 },
+    { label: 'Noun 3', src: avatars.noun3 },
+  ]}
+/>
+```
+
+## Props
+
+See [`Avatar`'s props](/components/Avatar#props) for more info.
+
+<PropsTable sourceLink={sourceLink} types={types} />
+
+## Sizes
+
+```tsx live=true
+<Stack>
+  <AvatarGroup
+    limit={4}
+    members={[
+      { label: 'Noun 97', src: avatars.noun97 },
+      { label: 'Noun 11', src: avatars.noun11 },
+      { label: 'Noun 3', src: avatars.noun3 },
+      { label: 'Noun 17', src: avatars.noun17 },
+      { label: 'Noun 2', src: avatars.noun2 },
+      { label: 'Noun 102', src: avatars.noun102 },
+    ]}
+  />
+
+  <AvatarGroup
+    limit={4}
+    members={[
+      { label: 'Noun 97', src: avatars.noun97 },
+      { label: 'Noun 11', src: avatars.noun11 },
+      { label: 'Noun 3', src: avatars.noun3 },
+      { label: 'Noun 17', src: avatars.noun17 },
+      { label: 'Noun 2', src: avatars.noun2 },
+      { label: 'Noun 102', src: avatars.noun102 },
+    ]}
+    size="4"
+  />
+</Stack>
+```
+
+## Limit
+
+```tsx live=true expand=true
+<AvatarGroup
+  limit={3}
+  members={[
+    { label: 'Noun 97', src: avatars.noun97 },
+    { label: 'Noun 11', src: avatars.noun11 },
+    { label: 'Noun 3', src: avatars.noun3 },
+    { label: 'Noun 17', src: avatars.noun17 },
+    { label: 'Noun 2', src: avatars.noun2 },
+    { label: 'Noun 102', src: avatars.noun102 },
+  ]}
+/>
+```

components/src/components/AvatarGroup/AvatarGroup.snippets.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+import { Snippet } from '!/playroom/src/types'
+import { AvatarGroup } from './AvatarGroup'
+
+export const snippets: Snippet[] = [
+  {
+    name: 'Basic',
+    code: (
+      <AvatarGroup
+        members={[
+          {
+            label: 'Noun 97',
+            src: 'https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png',
+          },
+          {
+            label: 'Noun 11',
+            src: 'https://images.mirror-media.xyz/publication-images/9yZxF2aqRVvtb6xvYDOjs.png',
+          },
+          {
+            label: 'Noun 3',
+            src: 'https://images.mirror-media.xyz/publication-images/qmqVLl7GHPj4xfXRj21H-.png',
+          },
+        ]}
+      />
+    ),
+  },
+]