cetec-design-system 0.0.2

package/.github/CODEOWNERS

@@ -0,0 +1 @@
+* @Etwigg @shaunrfox

package/.husky/task-runner.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://alirezanet.github.io/Husky.Net/schema.json",
+  "tasks": [
+    {
+      "command": "npx",
+      "args": ["prettier", "--ignore-unknown", "--write", "${staged}"],
+      "pathMode": "absolute"
+    }
+  ]
+}

package/.nvmrc

@@ -0,0 +1 @@
+22.0.0

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx', 
+    '../src/components/Text/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview-head.tsx

@@ -0,0 +1 @@
+

package/.storybook/preview.tsx

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react';
+import DocTemplate from '../src/storybook/doctemplate.mdx';
+import '../styled-system/styles.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      page: DocTemplate,
+      toc: { 
+      },
+    },
+  },
+};
+
+export default preview;

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Cetec-ERP
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/eslint.config.js

@@ -0,0 +1,50 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import reactPlugin from 'eslint-plugin-react';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      'plugin:prettier/recommended',
+    ],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        React: true,
+        JSX: true,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      prettier: 'prettier',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'prettier/prettier': 'error',
+    },
+  },
+);

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "cetec-design-system",
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "cssgen": "npx panda cssgen 'src/**/*.css'",
+    "prepare": "npx panda codegen",
+    "dev": "npx panda codegen --watch & vite",
+    "build": "npx panda codegen && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "generate-sprite": "node src/utils/generate-sprite.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "husky": "dotnet tool restore && dotnet husky install"
+  },
+  "dependencies": {
+    "@fontsource-variable/recursive": "^5.1.1",
+    "@fontsource-variable/ruda": "^5.1.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@pandacss/dev": "^0.51.1",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-onboarding": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@types/node": "^22.7.7",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.11.2",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.1",
+    "prettier": "^3.3.3",
+    "storybook": "^8.5.2",
+    "svg-sprite": "^2.0.4",
+    "svgo": "^3.0.2",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  },
+  "eslintConfig": {
+    "extends": ["plugin:storybook/recommended"]
+  },
+  "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
+  "main": "eslint.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Cetec-ERP/Cetec-Design-System.git"
+  },
+  "author": "Cetec-ERP",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Cetec-ERP/Cetec-Design-System/issues"
+  },
+  "homepage": "https://github.com/Cetec-ERP/Cetec-Design-System#readme"
+}

package/panda.config.ts

@@ -0,0 +1,201 @@
+import {
+  defineConfig,
+  defineTokens,
+  defineSemanticTokens,
+} from '@pandacss/dev';
+import pandaBasePreset from '@pandacss/preset-base';
+import cetecPreset from './src/index';
+import * as tokens from './src/styles/tokens';
+import * as semanticTokens from './src/styles/semanticTokens';
+import { globalCss } from './src/styles/globalStyle';
+import { conditions } from './src/styles/conditions';
+import {
+  buttonRecipe,
+  iconButtonRecipe,
+  inputRecipe,
+  textareaRecipe,
+  headingRecipe,
+  linkRecipe,
+  labelRecipe,
+  textRecipe,
+  checkBoxRecipe,
+  spinnerRecipe,
+  dividerRecipe,
+  preRecipe,
+  codeRecipe,
+  boxRecipe,
+  radioRecipe,
+} from './src/recipes/index';
+
+// https://panda-css.com/docs/concepts/extend#removing-something-from-the-base-presets
+// omit default patterns here
+const { box, divider, ...pandaBasePresetPatterns } = pandaBasePreset.patterns;
+const pandaBasePresetConditions = pandaBasePreset.conditions;
+const pandaBasePresetUtilities = pandaBasePreset.utilities;
+const pandaBasePresetGlobalCss = pandaBasePreset.globalCss;
+
+// using pandas methods to define type-safe tokens
+export const theme = {
+  tokens: defineTokens({
+    aspectRatios: tokens.aspectRatios,
+    borders: tokens.borders,
+    shadows: tokens.shadows,
+    easings: tokens.easings,
+    durations: tokens.durations,
+    letterSpacings: tokens.letterSpacings,
+    lineHeights: tokens.lineHeights,
+    blurs: tokens.blurs,
+    animations: tokens.animations,
+    colors: tokens.colors,
+    fonts: tokens.fonts,
+    fontSizes: tokens.fontSizes,
+    fontWeights: tokens.fontWeights,
+    sizes: tokens.sizes,
+    numericSizes: tokens.numericSizes,
+    spacing: tokens.sizes,
+    radii: tokens.radii,
+    keyframes: tokens.keyframes,
+    containerSizes: tokens.containerSizes,
+    breakpoints: tokens.breakpoints,
+  }),
+  semanticTokens: defineSemanticTokens({
+    colors: semanticTokens.colors,
+  }),
+};
+
+export default defineConfig({
+  presets: ['@pandacss/dev/presets', cetecPreset],
+  eject: true,
+  gitignore: true,
+  jsxFramework: 'react',
+  jsxStyleProps: 'all',
+  jsxFactory: 'styled',
+  watch: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
+  preflight: true,
+  exclude: [],
+  strictTokens: true,
+  importMap: '@styled-system',
+  outdir: './styled-system',
+  outExtension: 'js',
+  theme: {
+    containerSizes: tokens.containerSizes,
+    keyframes: tokens.keyframes,
+    tokens: {
+      aspectRatios: theme.tokens.aspectRatios,
+      borders: theme.tokens.borders,
+      shadows: theme.tokens.shadows,
+      easings: theme.tokens.easings,
+      durations: theme.tokens.durations,
+      letterSpacings: theme.tokens.letterSpacings,
+      lineHeights: theme.tokens.lineHeights,
+      blurs: theme.tokens.blurs,
+      animations: theme.tokens.animations,
+      colors: theme.tokens.colors,
+      fonts: theme.tokens.fonts,
+      fontSizes: theme.tokens.fontSizes,
+      fontWeights: theme.tokens.fontWeights,
+      sizes: theme.tokens.sizes,
+      //numericSizes: theme.tokens.numericSizes,
+      spacing: theme.tokens.sizes,
+      radii: theme.tokens.radii,
+    },
+    semanticTokens: {
+      colors: theme.semanticTokens.colors,
+    },
+    extend: {
+      breakpoints: theme.tokens.breakpoints,
+      textStyles: tokens.textStyles,
+      recipes: {
+        text: textRecipe,
+        heading: headingRecipe,
+        link: linkRecipe,
+        label: labelRecipe,
+        button: buttonRecipe,
+        iconButton: iconButtonRecipe,
+        input: inputRecipe,
+        textarea: textareaRecipe,
+        code: codeRecipe,
+        pre: preRecipe,
+        spinner: spinnerRecipe,
+        divider: dividerRecipe,
+        box: boxRecipe,
+      },
+      slotRecipes: {
+        checkbox: checkBoxRecipe,
+        radio: radioRecipe,
+      },
+    },
+  },
+
+  utilities: {
+    ...pandaBasePresetUtilities,
+  },
+
+  patterns: {
+    icon: {
+      properties: {
+        size: {
+          type: 'enum',
+          value: Object.keys(tokens.sizes),
+        },
+      },
+      transform(props) {
+        const { size, ...rest } = props;
+        return {
+          width: size,
+          height: size,
+          ...rest,
+        };
+      },
+    },
+    extend: {
+      ...pandaBasePresetPatterns,
+      container: {
+        transform(props) {
+          return Object.assign(
+            {
+              position: 'relative',
+              width: '100%',
+              maxWidth: '7xl',
+              mx: 'auto',
+              px: { base: '24', md: '20', sm: '16' },
+            },
+            props,
+          );
+        },
+      },
+    },
+  },
+
+  globalCss: {
+    ...pandaBasePresetGlobalCss,
+    ...globalCss,
+    html: {
+      '--global-font-heading': 'fonts.heading',
+      '--global-font-body': 'fonts.body',
+      '--global-font-mono': 'fonts.mono',
+    },
+  },
+  conditions: {
+    ...pandaBasePresetConditions,
+    // Core conditions pulled from panda preset-base package
+    ...conditions,
+
+    // Themes moved to conditions.tx
+
+    // States
+    indeterminate:
+      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
+    hidden: '&:is([hidden])',
+    current: '&:is([data-current])',
+    today: '&:is([data-today])',
+    collapsed:
+      '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
+
+    // Containers
+    containerSmall: '@container (max-width: 560px)',
+    containerMedium: '@container (min-width: 561px) and (max-width: 999px)',
+    containerLarge: '@container (min-width: 1000px)',
+  },
+});

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}