Initial commit

pulumi · Aug 21, 2021 · 2c2f071 · 2c2f071
commit 2c2f071
Show file tree

Hide file tree

Showing 22 changed files with 4,140 additions and 0 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,22 @@
+name: Node.js Package
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to GitHub Packages
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://npm.pkg.github.com'
+      - run: yarn
+      - run: yarn build
+      - run: cp package.json dist/ && yarn --cwd dist publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+14
diff --git a/Makefile b/Makefile
@@ -0,0 +1,15 @@
+.PHONY: clean
+clean:
+	rm -rf dist
+
+.PHONY: ensure
+ensure:
+	yarn
+
+.PHONY: serve
+serve:
+	yarn run dev
+
+.PHONY: build
+build:
+	yarn run build
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+# pulumi-ui
+
+```
+$ nvm use
+$ make clean ensure serve
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<html>
+    <head>
+        <title>Playing with FAST</title>
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+            body {
+                font-family: var(--body-font);
+            }
+
+            :not(:defined) {
+                visibility: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <pulumi-counter></pulumi-counter>
+        <script src="./dist/app.js"></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+    "name": "@pulumi/pulumi-ui",
+    "version": "0.0.1",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/pulumi/pulumi-ui.git"
+    },
+    "dependencies": {
+        "@microsoft/fast-components": "^2.5.8",
+        "@microsoft/fast-element": "^1.4.1",
+        "http-server": "^13.0.0",
+        "lodash-es": "^4.17.21",
+        "typescript": "^4.3.5"
+    },
+    "scripts": {
+        "build": "rm -rf dist && tsc",
+        "dev": "rm -rf dist && webpack serve"
+    },
+    "devDependencies": {
+        "clean-webpack-plugin": "^4.0.0-alpha.0",
+        "ts-loader": "^9.2.5",
+        "webpack": "^5.50.0",
+        "webpack-cli": "^4.7.2",
+        "webpack-dev-server": "^3.11.2"
+    }
+}
diff --git a/src/app.ts b/src/app.ts
@@ -0,0 +1,8 @@
+import { initDesignSystem, counter } from "./";
+
+initDesignSystem({
+    prefix: "pulumi",
+    components: [
+        counter(),
+    ],
+});
diff --git a/src/components/buttons/cta.ts b/src/components/buttons/cta.ts
diff --git a/src/components/counter.ts b/src/components/counter.ts
@@ -0,0 +1,42 @@
+import { ElementDefinitionContext, FoundationElement, FoundationElementDefinition } from "@microsoft/fast-foundation";
+import { html, css, attr } from "@microsoft/fast-element";
+import { Button } from "@microsoft/fast-components";
+interface CounterDefinition extends FoundationElementDefinition {
+    defaultButtonContent?: string;
+}
+
+const counterTemplate = (context: ElementDefinitionContext, definition: CounterDefinition) => {
+    const buttonTag = context.tagFor(Button);
+
+    return html`
+        <p>The count is ${x => x.count}.</p>
+        <${buttonTag} appearance="accent" @click=${x => x.increment()}>
+            <slot>${definition.defaultButtonContent!}</slot> <!--Use the custom configuration-->
+        </${buttonTag}>
+    `;
+}
+
+const counterStyles = (context: ElementDefinitionContext) => {
+    const buttonTag = context.tagFor(Button);
+
+    return css`
+        ${buttonTag} {
+
+        }
+    `;
+}
+
+export class Counter extends FoundationElement {
+    @attr count = 0;
+
+    increment() {
+        this.count++;
+    }
+}
+
+export const counter = Counter.compose<CounterDefinition>({
+    baseName: "counter",
+    defaultButtonContent: "Click here",
+    template: counterTemplate as any, // https://github.com/microsoft/fast/issues/5047
+    styles: counterStyles,
+});
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1 @@
+export { counter } from "./counter";
diff --git a/src/design/border.ts b/src/design/border.ts
@@ -0,0 +1,4 @@
+export const border = {
+    width: 2,
+    radius: 4,
+};
diff --git a/src/design/color.ts b/src/design/color.ts
@@ -0,0 +1,144 @@
+const brand = {
+    yellow: "#f7bf2a",
+    salmon: "#f26e7e",
+    fuchsia: "#bd4c85",
+    purple: "#8a3391",
+    violet: "#805ac3",
+    blue: "#4d5bd9",
+};
+
+const red = {
+    100: "#fff5f5",
+    200: "#fed7d7",
+    300: "#feb2b2",
+    400: "#fc8181",
+    500: "#f56565",
+    600: "#e53e3e",
+    700: "#c53030",
+    800: "#9b2c2c",
+    900: "#742a2a",
+};
+
+const gray = {
+    100: "#f9f9fa",
+    200: "#f2f2f4",
+    300: "#e5e5e9",
+    400: "#d8d9df",
+    500: "#bebfc9",
+    600: "#8e8f97",
+    700: "#5f6065",
+    800: "#2f3032",
+    900: "#131314",
+};
+
+const yellow = {
+    100: "#fef9ea",
+    200: "#fdf2d4",
+    300: "#fce5aa",
+    400: "#fad97f",
+    500: "#f9cc55",
+    600: brand.yellow,
+    700: "#c69922",
+    800: "#947319",
+    900: "#634c11",
+};
+
+const salmon = {
+    100: "#fef1f2",
+    200: "#fce2e5",
+    300: "#fac5cb",
+    400: "#f7a8b2",
+    500: "#f58b98",
+    600: brand.salmon,
+    700: "#c25865",
+    800: "#91424c",
+    900: "#612c32",
+};
+
+const fuchsia = {
+    100: "#f8edf3",
+    200: "#f2dbe7",
+    300: "#e5b7ce",
+    400: "#d794b6",
+    500: "#ca709d",
+    600: brand.fuchsia,
+    700: "#973d6a",
+    800: "#712e50",
+    900: "#4c1e35",
+};
+
+const purple = {
+    100: "#f3ebf4",
+    200: "#e8d6e9",
+    300: "#d0add3",
+    400: "#b985bd",
+    500: "#a15ca7",
+    600: brand.purple,
+    700: "#6e2974",
+    800: "#531f57",
+    900: "#37143a",
+}
+
+const violet = {
+    100: "#f2eff9",
+    200: "#e6def3",
+    300: "#ccbde7",
+    400: "#b39cdb",
+    500: "#997bcf",
+    600: brand.violet,
+    700: "#66489c",
+    800: "#4d3675",
+    900: "#33244e",
+};
+
+const blue = {
+    100: "#edeffb",
+    200: "#dbdef7",
+    300: "#b8bdf0",
+    400: "#949de8",
+    500: "#717ce1",
+    600: brand.blue,
+    700: "#3e49ae",
+    800: "#2e3782",
+    900: "#1f2457",
+}
+
+const orange = {
+    100: "#fff7eb",
+    200: "#fde6c4",
+    300: "#fad49e",
+    400: "#f6ba7e",
+    500: "#ee975c",
+    600: "#e17d47",
+    700: "#d86131",
+    800: "#ba4a2c",
+    900: "#993d29",
+}
+
+const green = {
+    100: "#e0fff2",
+    200: "#b2fbe0",
+    300: "#81eeca",
+    400: "#4ce1b4",
+    500: "#2fc89f",
+    600: "#25a78b",
+    700: "#1d8673",
+    800: "#19675b",
+    900: "#155148",
+}
+
+export const color = {
+    white: "#ffffff",
+    black: "#000000",
+    brand,
+    red,
+    gray,
+    yellow,
+    salmon,
+    fuchsia,
+    purple,
+    violet,
+    blue,
+    orange,
+    green,
+};
diff --git a/src/design/index.ts b/src/design/index.ts
@@ -0,0 +1,4 @@
+export * from "./type";
+export * from "./color";
+export * from "./screen";
+export * from "./border";
diff --git a/src/design/screen.ts b/src/design/screen.ts
@@ -0,0 +1,6 @@
+export const screen = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+};
diff --git a/src/design/settings.ts b/src/design/settings.ts
@@ -0,0 +1 @@
+export const cornerRadius = 4;