24 feature create icons lib

.github/workflows/checks.yml

@@ -23,7 +23,7 @@ jobs:
       - run: pnpm run test:ci
         working-directory: ./tests
 
-  build:
+  preset-build:
     runs-on: ubuntu-latest
     name: Panda Preset successfully builds
     steps:
@@ -38,35 +38,3 @@ jobs:
       - run: pnpm install
       - run: pnpm run build
         working-directory: ./packages/panda-preset
-
-  # react-build:
-  #   runs-on: ubuntu-latest
-  #   name: React successfully builds
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: pnpm/action-setup@v3
-  #       with:
-  #         version: 8
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         cache: 'pnpm'
-
-  #     - run: pnpm install
-  #     - run: pnpm run build
-  #       working-directory: ./packages/react
-
-  # icons-build:
-  #   runs-on: ubuntu-latest
-  #   name: Icons successfully builds
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: pnpm/action-setup@v3
-  #       with:
-  #         version: 8
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         cache: 'pnpm'
-
-  #     - run: pnpm install
-  #     - run: pnpm run build
-  #       working-directory: ./packages/icons

.github/workflows/docs-checks.yml

@@ -6,6 +6,22 @@ on:
       - docs/**/*
 
 jobs:
+  lint-next:
+    runs-on: ubuntu-latest
+    name: Docs JS/TS valid
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'pnpm'
+
+      - run: pnpm install
+      - run: pnpm run lint
+        working-directory: ./docs
+
   docs-build:
     runs-on: ubuntu-latest
     name: Docs Build

.github/workflows/icons-build.yml

@@ -0,0 +1,25 @@
+name: 🧾 Icons Checks
+
+# We run this separately because it's rare that we will update icons
+
+on:
+  pull_request:
+    paths:
+      - packages/icons/**/*
+
+jobs:
+  icons-build:
+    runs-on: ubuntu-latest
+    name: Icons successfully builds
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'pnpm'
+
+      - run: pnpm install
+      - run: pnpm run build
+        working-directory: ./packages/icons

configs/src/versions.mjs

@@ -1,4 +1,4 @@
 export const version = '0.0.1'
 export const nextTag = 'next'
 
-export const packages = ['panda-preset']
+export const packages = ['panda-preset', 'icons']

docs/app/page.tsx

@@ -1,5 +1,6 @@
-import { container, hstack, vstack } from '@/styled-system/patterns'
-import Image from 'next/image'
+import { AiGovernanceLifecycle } from '@cerberus-design/icons'
+import { css } from '@/styled-system/css'
+import { container, vstack } from '@/styled-system/patterns'
 
 export default function Home() {
   return (
@@ -9,84 +10,18 @@ export default function Home() {
       })}
     >
       <div className={vstack()}>
-        <p>
-          Get started by editing&nbsp;
-          <code>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+        <section>
+          <h1
+            className={css({
+              textStyle: 'h1',
+            })}
           >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div>
-        <Image
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={hstack()}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
+            Cerberus Design System
+          </h1>
+          <p>This is a test of the typography</p>
+        </section>
 
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+        <AiGovernanceLifecycle />
       </div>
     </main>
   )

docs/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cerberus-design/icons": "workspace:*",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"

eslint.config.js

@@ -22,7 +22,7 @@ export default tseslint.config(
 
   {
     // Docs use local v8 lint checks
-    ignores: ['docs/**/*'],
+    ignores: ['docs/**/*', 'packages/*/build/**/*', 'packages/*/.tsup/**/*'],
   },
 
   {
@@ -31,6 +31,7 @@ export default tseslint.config(
         project: [
           './tsconfig.json',
           './packages/panda-preset/tsconfig.lint.json',
+          './packages/icons/tsconfig.lint.json',
           './configs/tsconfig.json',
           './tests/tsconfig.json',
           './docs/tsconfig.json',
@@ -56,6 +57,11 @@ export default tseslint.config(
     files: ['packages/panda-preset/**/*.ts'],
   },
 
+  {
+    name: '@cerberus-design/icons',
+    files: ['packages/icons/**/*.ts'],
+  },
+
   {
     name: '@cerberus-design/configs',
     files: ['configs/**/*.mjs', 'configs/**/*.ts'],

packages/icons/README.md

@@ -0,0 +1,50 @@
+# Icons
+
+This is the official icon library for the Cerberus design system for React.
+
+## Installation
+
+```bash
+pnpm add @cerberus-design/icons
+```
+
+## Usage
+
+```typescript
+import { Add } from '@cerberus-design/icons';
+import { IconButton, createIconButtonProps } from '@cerberus-design/react';
+
+// An optional helper to manage a11y for the IconButton
+const iconBtnProps = createIconButtonProps({
+  label: 'Add to order',
+  palette: 'neutral',
+  size: 'lg',
+});
+
+function App() {
+  return (
+    <IconButton {...iconBtnProps.btn}>
+      <Add {...iconBtnProps.icon} />
+    </IconButton>
+  );
+};
+```
+
+## Usage without the React library
+
+```typescript
+import { Add } from '@cerberus-design/icons';
+import { iconButton } from '@/styled-system/recipes';
+
+function App() {
+  return (
+    <button aria-label="Add to order" className={iconButton()}>
+      <Add aria-hidden />
+    </button>
+  );
+};
+```
+
+---
+
+_Copyright (c) 2024 Digital University, All Rights Reserved_

packages/icons/package.json

@@ -1,12 +1,64 @@
 {
   "name": "@cerberus-design/icons",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "0.0.0",
+  "description": "The official icon library for the Cerberus Design System.",
+  "browserslist": "> 0.25%, not dead",
+  "sideEffects": false,
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "types": "build/legacy/src/index.d.ts",
+    "main": "build/legacy/index.cjs",
+    "module": "build/legacy/index.js",
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./build/modern/index.d.ts",
+          "default": "./build/modern/index.js"
+        },
+        "require": {
+          "types": "./build/modern/index.d.cts",
+          "default": "./build/modern/index.cjs"
+        }
+      },
+      "./package.json": "./package.json"
+    },
+    "typesVersions": {
+      "*": {
+        ".": [
+          "build/legacy/src/index.d.ts"
+        ]
+      }
+    }
+  },
+  "files": [
+    "build/**/*",
+    "src/**/*",
+    "index.ts"
+  ],
   "scripts": {
+    "build": "tsup --experimental-dts",
+    "clean": "rm -rf ./build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
+  "dependencies": {
+    "@carbon/icons-react": "^11.40.0"
+  },
+  "devDependencies": {
+    "@cerberus-design/configs": "workspace:*",
+    "@microsoft/api-extractor": "^7.43.1",
+    "tsup": "^8.0.2"
+  },
+  "keywords": [
+    "cerberus",
+    "design",
+    "system",
+    "icons",
+    "digital university",
+    "omni federal"
+  ],
   "author": "[email protected]",
   "license": "ISC"
 }

packages/icons/src/index.ts

@@ -0,0 +1 @@
+export * from '@carbon/icons-react'

packages/icons/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "include": ["src"],
+  "exclude": ["build", "node_modules"]
+}

packages/icons/tsconfig.lint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*", "tsup.config.ts"]
+}