Convert to module only

We only build the modules version and not the cjs as not for use in node.
Other improvements in found in testing and building.

.changeset/smart-ghosts-join.md

@@ -0,0 +1,14 @@
+---
+'@committed/eslint-config': minor
+'@committed/ds-utilities': minor
+'@committed/ds-tsconfig': minor
+'@committed/ds-storybook': minor
+'@committed/ds-colors': minor
+'@committed/ds-tokens': minor
+'@committed/ds-example': minor
+'@committed/ds': minor
+'@committed/ds-ss': minor
+'@committed/ds-next': minor
+---
+
+Updating the build to use only modules

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=16-bullseye
+ARG VARIANT=20-bullseye
 FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.
@@ -16,3 +16,4 @@ RUN echo "alias pm=pnpm" >> /home/node/.bashrc
 RUN echo "alias px='pnpm dlx'" >> /home/node/.bashrc
 RUN echo "alias pm=pnpm" >> /home/node/.zshrc
 RUN echo "alias px='pnpm dlx'" >> /home/node/.zshrc
+

.devcontainer/devcontainer.json

@@ -8,7 +8,7 @@
     // Append -bullseye or -buster to pin to an OS version.
     // Use -bullseye variants on local on arm64/Apple Silicon.
     "args": {
-      "VARIANT": "16-bullseye"
+      "VARIANT": "20-bullseye"
     }
   },
 

apps/next/next.config.js

@@ -3,9 +3,9 @@ const nextConfig = {
   reactStrictMode: true,
   // experimental: { esmExternals: "loose" },
   transpilePackages: [
-    '@committed/ds',
-    '@committed/ds-tokens',
-    '@committed/ds-colors',
+    //'@committed/ds',
+    //   '@committed/ds-tokens',
+    //   '@committed/ds-colors',
   ],
 }
 // eslint-disable-next-line no-undef

apps/next/package.json

@@ -16,15 +16,15 @@
     "@committed/hooks": "^0.10.4",
     "@faker-js/faker": "^8.0.2",
     "@mdi/js": "^7.2.96",
-    "next": "^13.4.1",
+    "next": "^14.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@committed/eslint-config": "workspace:*",
     "@committed/ds-tsconfig": "workspace:*",
-    "@pandacss/dev": "^0.16.0",
-    "@pandacss/types": "^0.16.0",
+    "@committed/eslint-config": "workspace:*",
+    "@pandacss/dev": "^0.18.2",
+    "@pandacss/types": "^0.18.2",
     "@types/node": "^17.0.12",
     "@types/react": "^18.0.22",
     "@types/react-dom": "^18.0.7",

apps/next/panda.config.ts

@@ -1,25 +1,35 @@
-import { componentsConfig } from '@committed/ds'
+import { componentsConfig } from '@committed/ds/config'
 
-export default componentsConfig({
-  include: [
-    '../../preset/src/**/*.ts*',
-    './app/**/*.{js,jsx,ts,tsx}',
-    './src/**/*.{js,jsx,ts,tsx}',
-  ],
-  exclude: [],
-  hooks: {
-    'config:resolved': (conf) => {
-      console.log('🐼 config:resolve')
-    },
-    'config:change': (conf) => {
-      console.log(
-        '🐼 config:change',
-        JSON.stringify(conf?.theme?.recipes, null, 5),
-      )
-    },
-    'generator:css': (file, _css) => {
-      console.log('🐼 generator:css', file)
-      // console.log('🐼 generator:css', _css)
+export default componentsConfig(
+  {
+    include: [
+      '../../preset/src/**/*.ts*',
+      './app/**/*.{js,jsx,ts,tsx}',
+      './src/**/*.{js,jsx,ts,tsx}',
+    ],
+    hooks: {
+      'config:resolved': (conf) => {
+        console.log('🐼 config:resolve')
+      },
+      'config:change': (conf) => {
+        console.log(
+          '🐼 config:change',
+          JSON.stringify(conf?.theme?.recipes, null, 5),
+        )
+      },
+      'generator:css': (file, _css) => {
+        console.log('🐼 generator:css', file)
+        // console.log('🐼 generator:css', _css)
+      },
     },
   },
-})
+  {
+    primary: 'plum',
+    secondary: 'sky',
+    neutral: 'mauve',
+    info: 'sky',
+    warn: 'orange',
+    error: 'red',
+    success: 'jade',
+  },
+)

apps/next/src/stack.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@committed/ds/src'
+import { Stack } from '@committed/ds'
 import { ExampleComponent } from './parts/ExampleComponent'
 
 export const StackExample = () => (

apps/next/src/svg.tsx

@@ -1,4 +1,4 @@
-import { Svg } from '@committed/ds/src/components'
+import { Svg } from '@committed/ds'
 
 export const SvgExample = () => (
   <Svg>

apps/next/src/table.tsx

@@ -1,5 +1,4 @@
-import { Avatar, Chip, Link } from '@committed/ds'
-import { Table } from '@committed/ds/src/components/Table'
+import { Avatar, Chip, Link, Table } from '@committed/ds'
 import { faker } from '@faker-js/faker'
 import React from 'react'
 

apps/next/tsconfig.json

@@ -3,12 +3,6 @@
   "compilerOptions": {
     "plugins": [{ "name": "next" }]
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "panda.config.ts"
-  ],
-  "exclude": ["node_modules"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "panda.config.ts"]
 }

apps/storybook/package.json

@@ -24,8 +24,8 @@
     "@fontsource/dosis": "^5.0.3",
     "@fontsource/inter": "^5.0.3",
     "@mdi/js": "^7.2.96",
-    "@pandacss/dev": "^0.16.0",
-    "@pandacss/types": "^0.16.0",
+    "@pandacss/dev": "^0.18.2",
+    "@pandacss/types": "^0.18.2",
     "@storybook/addon-actions": "^7.5.1",
     "@storybook/addon-docs": "^7.5.1",
     "@storybook/addon-essentials": "^7.5.1",

apps/storybook/panda.config.ts

@@ -1,4 +1,4 @@
-import { componentsConfig } from '@committed/ds'
+import { componentsConfig } from '@committed/ds/config'
 
 export default componentsConfig(
   {

apps/storybook/stories/Checkbox.stories.tsx

@@ -1,5 +1,4 @@
-import { Flex, Form, FormButton } from '@committed/ds/src/components'
-import { Checkbox, CheckedState } from '@committed/ds/src/components/Checkbox'
+import { Checkbox, CheckedState, Flex, Form, FormButton } from '@committed/ds'
 import { action } from '@storybook/addon-actions'
 import { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'

apps/storybook/stories/Divider.stories.tsx

@@ -1,5 +1,4 @@
-import { Column, Inline, Monospace, Stack, Text } from '@committed/ds'
-import { Divider } from '@committed/ds/src/components/Divider'
+import { Column, Divider, Inline, Monospace, Stack, Text } from '@committed/ds'
 import { expect } from '@storybook/jest'
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import { within } from '@storybook/testing-library'

apps/storybook/stories/Image.stories.tsx

@@ -1,4 +1,4 @@
-import { Image } from '@committed/ds/src/components/Image'
+import { Image } from '@committed/ds'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof Image> = {

apps/storybook/stories/Stack.stories.tsx

@@ -1,5 +1,5 @@
+import { Stack } from '@committed/ds'
 import { SystemStyleObject, token } from '@committed/ds-ss'
-import { Stack } from '@committed/ds/src'
 import { Meta, StoryObj } from '@storybook/react'
 import { ComponentProps } from 'react'
 import { ExampleComponent } from './utils'

apps/storybook/stories/Svg.stories.tsx

@@ -1,4 +1,4 @@
-import { Box, Svg } from '@committed/ds/src/components'
+import { Box, Svg } from '@committed/ds'
 import { Meta, StoryFn } from '@storybook/react'
 
 export default {

apps/storybook/stories/Table.stories.tsx

@@ -1,14 +1,17 @@
-import { Avatar, Box, Chip, Link } from '@committed/ds'
-import { css } from '@committed/ds-ss'
 import {
+  Avatar,
+  Box,
+  Chip,
+  Link,
   Table,
   TableBody,
   TableCaption,
   TableCell,
   TableFoot,
   TableHead,
   TableRow,
-} from '@committed/ds/src/components/Table'
+} from '@committed/ds'
+import { css } from '@committed/ds-ss'
 import { faker } from '@faker-js/faker'
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import React from 'react'

packages/ds/package.json

@@ -4,16 +4,33 @@
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    }
+  },
   "sideEffects": false,
   "license": "MIT",
-  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "clean": "rimraf dist",
     "debug": "panda debug",
     "studio": "panda studio",
     "prepare": "pnpm codegen",
     "codegen": "panda codegen",
-    "build:ts": "tsup src/index.ts --format cjs,esm --dts --external @committed/ds-ss",
+    "dev": "tsc --watch",
+    "build:ts": "tsc",
+    "build:tsup": "tsup src/index.ts --format esm --dts --external @committed/ds-ss",
     "build:css": "panda ship --outfile dist/panda.buildinfo.json",
     "build": "pnpm clean && pnpm build:ts && pnpm build:css",
     "lint": "eslint \"src/**/*.ts*\"",
@@ -23,16 +40,22 @@
     "@committed/eslint-config": "workspace:*",
     "@committed/ds-ss": "workspace:*",
     "@committed/ds-tsconfig": "workspace:*",
-    "@pandacss/dev": "^0.16.0",
-    "@pandacss/types": "^0.16.0",
+    "@pandacss/dev": "^0.18.2",
+    "@pandacss/types": "^0.18.2",
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "react": "^18.2.0",
     "typescript": "^5.1.6"
   },
+  "peerDependencies": {
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0",
+    "@committed/ds-ss": ">= 0.1.0"
+  },
   "dependencies": {
     "@committed/ds-colors": "workspace:*",
+    "@committed/ds-ss": "workspace:*",
     "@committed/ds-tokens": "workspace:*",
     "@committed/ds-utilities": "workspace:*",
     "@committed/hooks": "^0.10.4",

packages/ds/src/components/ContextMenu/ContextMenu.tsx

@@ -23,21 +23,27 @@ import {
   CComponent,
   ConditionalWrapper,
   ItemVariants,
-  StyledCheckIndicator,
-  StyledSubTriggerIndicator,
   baseItemStyles,
   checkboxItemStyles,
   component,
   contentStyles,
+  indicatorStyles,
   itemCva,
   itemIndicatorStyles,
   itemShortcutStyles,
   labelStyles,
   separatorCva,
   triggerItemStyles,
 } from '../../utils'
+import { Check, ChevronRight } from '../Icons'
 import { paperStyles } from '../Paper/Paper'
 
+export const StyledSubTriggerIndicator = component(
+  ChevronRight,
+  indicatorStyles,
+)
+export const StyledCheckIndicator = component(Check, indicatorStyles)
+
 const CONTEXT_MENU = 'c-context'
 const CONTEXT_MENU_ITEM = `${CONTEXT_MENU}-item`
 

packages/ds/src/components/Input/Input.tsx

@@ -10,7 +10,7 @@ import {
 import React from 'react'
 import {
   CComponent,
-  ConditionalWrapper,
+  SafeConditional,
   component,
   forwardRefExtend,
 } from '../../utils'
@@ -230,14 +230,9 @@ export const Input = forwardRefExtend<typeof DEFAULT_TAG, InputProps>(
     const [id, { state, disabled, required }, remainingProps] =
       useFormControl(props)
     return (
-      <ConditionalWrapper
+      <SafeConditional
         condition={label}
-        props={{
-          id,
-          label,
-          required,
-        }}
-        wrapper={InputLabel}
+        wrapper={<InputLabel id={id} label={label} required={required} />}
       >
         <StyledInput
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -252,7 +247,7 @@ export const Input = forwardRefExtend<typeof DEFAULT_TAG, InputProps>(
           required={required}
           ref={forwardedRef}
         />
-      </ConditionalWrapper>
+      </SafeConditional>
     )
   },
 )

packages/ds/src/components/Menu/Menu.tsx

@@ -24,14 +24,13 @@ import {
   ConditionalWrapper,
   ForwardRef,
   ItemVariants,
-  StyledCheckIndicator,
-  StyledSubTriggerIndicator,
   baseItemStyles,
   checkboxItemStyles,
   component,
   contentStyles,
   forwardRefDefine,
   forwardRefExtend,
+  indicatorStyles,
   itemCva,
   itemIndicatorStyles,
   itemShortcutStyles,
@@ -40,9 +39,15 @@ import {
   triggerItemStyles,
 } from '../../utils'
 import { Button } from '../Button'
-import { ChevronDown } from '../Icons'
+import { Check, ChevronDown, ChevronRight } from '../Icons'
 import { paperStyles } from '../Paper/Paper'
 
+export const StyledSubTriggerIndicator = component(
+  ChevronRight,
+  indicatorStyles,
+)
+export const StyledCheckIndicator = component(Check, indicatorStyles)
+
 const MENU_CLASS = 'c-menu'
 const MENU_ITEM_CLASS = 'c-meu-item'