feat: init project

.cache/storybook/default/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-3920d97c51b8ad2521918fb1205babd22b0ed3d7

@@ -0,0 +1 @@
+{"value":{"id":"fTzdu_b-kRN96JsBDUc1T","lastUsed":1716539663461},"type":"Object","created":"2024-05-24T08:34:23.461Z","ttl":0}

.cache/storybook/default/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-43fdebe5fc35e4e9fabee9a83c7faea931b05ea0

@@ -0,0 +1 @@
+{"value":1716534732634,"type":"Number","created":"2024-05-24T07:12:12.635Z","ttl":0}

.cache/storybook/default/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-f086b87885981c04ce7a583ff90a49313de83de7

@@ -0,0 +1 @@
+{"value":{"boot":{"body":{"eventType":"boot","eventId":"_gTr2WFMgOJKADJAacdr_","sessionId":"fTzdu_b-kRN96JsBDUc1T","payload":{"eventType":"init"},"context":{"inCI":false,"isTTY":true,"platform":"Linux","cliVersion":"8.1.3"}},"timestamp":1716534643392},"init":{"body":{"eventType":"init","eventId":"NGad0zLTWUKt_csxYbfMn","sessionId":"fTzdu_b-kRN96JsBDUc1T","metadata":{"generatedAt":1716534732694,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{},"packageManager":{"type":"npm","version":"10.5.0"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","storybookVersion":"8.1.3","storybookVersionSpecifier":"^8.1.3","language":"javascript","storybookPackages":{"@storybook/blocks":{"version":"8.1.3"},"@storybook/test":{"version":"8.1.3"},"@storybook/web-components":{"version":"8.1.3"},"@storybook/web-components-vite":{"version":"8.1.3"},"storybook":{"version":"8.1.3"}},"addons":{"@storybook/addon-links":{"version":"8.1.3"},"@storybook/addon-essentials":{"version":"8.1.3"},"@chromatic-com/storybook":{"version":"1.4.0"}}},"payload":{"projectType":"UNDETECTED"},"context":{"inCI":false,"isTTY":true,"platform":"Linux","cliVersion":"8.1.3","anonymousId":"dfd99072ccac2aecfb22b4db5c1e8eddaf860d5e2e45febd4c51b4846cd7f2a1"}},"timestamp":1716534734432},"canceled":{"body":{"eventType":"canceled","eventId":"0UQJoKNVkuWgABHZJmBxL","sessionId":"fTzdu_b-kRN96JsBDUc1T","payload":{"eventType":"init"},"context":{"inCI":false,"isTTY":true,"platform":"Linux","cliVersion":"8.1.3"}},"timestamp":1716539663463}},"type":"Object","created":"2024-05-24T08:34:23.463Z","ttl":0}

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+
+# vscode
+.vscode/

.npmrc

@@ -0,0 +1 @@
+link-workspace-packages=true

.storybook/main.ts

@@ -0,0 +1,23 @@
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+import type { StorybookConfig } from "@storybook/web-components-vite";
+const config: StorybookConfig = {
+    stories: [
+        "../stories/**/*.mdx",
+        "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+        "../packages/**/*.mdx",
+        "../packages/**/*.stories.@(js|jsx|ts|tsx)",
+    ],
+    docs: {
+        autodocs: "tag",
+    },
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+    ],
+    framework: {
+        name: "@storybook/web-components-vite",
+        options: {},
+    },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/web-components').Preview } */
+import { Preview } from '@storybook/web-components';
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

CrowdUI..code-workspace

@@ -0,0 +1,16 @@
+{
+    "folders": [
+        {
+            "path": ".",
+        },
+    ],
+    "extensions": {
+        "recommendations": [
+            "ms-vscode.vscode-github-issue-notebooks",
+            "GitHub.copilot",
+            "esbenp.prettier-vscode",
+            "bradlc.vscode-tailwindcss",
+            "unifiedjs.vscode-mdx",
+        ],
+    },
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "crowdui",
+  "version": "1.0.0",
+  "description": "基于 W3C Web Components 标准的前端通用组件库",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.4.0",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/test": "^8.1.3",
+    "@storybook/web-components": "^8.1.3",
+    "@storybook/web-components-vite": "^8.1.3",
+    "lit": "^3.1.3",
+    "storybook": "^8.1.3"
+  },
+  "dependencies": {
+    "@crowdui/button": "workspace:^"
+  }
+}

packages/button/Button.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  return html`
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};

packages/button/Button.stories.js

@@ -0,0 +1,45 @@
+import { fn } from '@storybook/test';
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+  title: 'Example/Button',
+  tags: ['autodocs'],
+  render: (args) => Button(args),
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+  args: { onClick: fn() },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

packages/button/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

packages/button/index.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  return html`
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};

packages/button/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@crowdui/button",
+    "version": "0.0.1",
+    "private": true,
+    "description": "A custom button component",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"No tests specified\" && exit 0"
+    },
+    "keywords": [
+        "button",
+        "component"
+    ],
+    "author": "zhanghengxin",
+    "license": "MIT"
+}