@jongh/ui 1.6.5

package/styled-system/types/system-types.d.ts

@@ -0,0 +1,109 @@
+/* eslint-disable */
+import type {  ConditionalValue, Nested  } from './conditions';
+import type {  AtRule, PropertiesFallback  } from './csstype';
+import type {  SystemProperties, CssVarProperties  } from './style-props';
+
+type String = string & {}
+type Number = number & {}
+
+export type Pretty<T> = { [K in keyof T]: T[K] } & {}
+
+export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
+
+export type DistributiveUnion<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]
+} & DistributiveOmit<U, keyof T>
+
+export type Assign<T, U> = {
+  [K in keyof T]: K extends keyof U ? U[K] : T[K]
+} & U
+
+/* -----------------------------------------------------------------------------
+ * Native css properties
+ * -----------------------------------------------------------------------------*/
+
+export type CssProperty = keyof PropertiesFallback
+
+export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}
+
+export interface CssKeyframes {
+  [name: string]: {
+    [time: string]: CssProperties
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Conditional css properties
+ * -----------------------------------------------------------------------------*/
+
+interface GenericProperties {
+  [key: string]: ConditionalValue<String | Number | boolean>
+}
+
+/* -----------------------------------------------------------------------------
+ * Native css props
+ * -----------------------------------------------------------------------------*/
+
+export type NestedCssProperties = Nested<CssProperties>
+
+export type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>
+
+export interface GlobalStyleObject {
+  [selector: string]: SystemStyleObject
+}
+export interface ExtendableGlobalStyleObject {
+  [selector: string]: SystemStyleObject | undefined
+  extend?: GlobalStyleObject | undefined
+}
+
+/* -----------------------------------------------------------------------------
+ * Composition (text styles, layer styles)
+ * -----------------------------------------------------------------------------*/
+
+type FilterStyleObject<P extends string> = {
+  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown
+}
+
+export type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>
+
+/* -----------------------------------------------------------------------------
+ * Font face
+ * -----------------------------------------------------------------------------*/
+
+export type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>
+
+export type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>
+
+export interface GlobalFontface {
+  [name: string]: FontfaceRule | FontfaceRule[]
+}
+
+export interface ExtendableGlobalFontface {
+  [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined
+  extend?: GlobalFontface | undefined
+}
+
+/* -----------------------------------------------------------------------------
+ * Jsx style props
+ * -----------------------------------------------------------------------------*/
+interface WithCss {
+  css?: SystemStyleObject | SystemStyleObject[]
+}
+
+export type JsxStyleProps = SystemStyleObject & WithCss
+
+export interface PatchedHTMLProps {
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+  htmlContent?: string
+}
+
+export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'
+
+type WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps
+
+export type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
+  WithHTMLProps<T>,
+  P
+>

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@jongh/tsconfig/react.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": "./",
+    "paths": {
+      "@styled-system/*": ["styled-system/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/turbo/generators/config.cjs

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const storyGen = require("./stories.cjs")
+const uiGen = require("./ui.cjs")
+module.exports = function generator(plop) {
+  storyGen(plop)
+  uiGen(plop)
+}

package/turbo/generators/stories.cjs

@@ -0,0 +1,23 @@
+module.exports = function generator(plop) {
+  plop.setGenerator("stories", {
+    description: "create new storybook template",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is the name of the new file to create?",
+        validate: (input) => {
+          console.log(input)
+          return true
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/stories/{{camelCase name}}.stories.tsx",
+        templateFile: "templates/stories.tsx.hbs",
+      },
+    ],
+  })
+}

package/turbo/generators/templates/stories.tsx.hbs

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import  { {{pascalCase name}} } from "../components/{{pascalCase name}}/{{pascalCase name}}.tsx"
+
+const meta = {
+  title: "{{pascalCase name}}",
+  tags: ["autodocs"],
+  } satisfies Meta<typeof {{pascalCase name}}>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {},
+}

package/turbo/generators/templates/ui.tsx.hbs

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react"
+
+export type {{pascalCase name}}Props = {
+  children?: ReactNode
+}
+export const {{pascalCase name}} = ({ children }: {{pascalCase name}}Props) => {
+  return <div></div>
+}

package/turbo/generators/ui.cjs

@@ -0,0 +1,19 @@
+module.exports = function generator(plop) {
+  plop.setGenerator("component", {
+    description: "Create a new React component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is the name of the component?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/component/{{camelCase name}}/ui/index.tsx",
+        templateFile: "templates/ui.tsx.hbs",
+      },
+    ],
+  })
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths({ root: "./" })],
+})

package/vitest.config.ts

@@ -0,0 +1,45 @@
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin"
+import { defineConfig, defineProject, mergeConfig } from "vitest/config"
+
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url))
+
+// 👇 If you're using Next.js, apply this framework plugin as well
+// import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+import viteConfig from "./vite.config"
+
+export default defineProject(
+  mergeConfig(
+    viteConfig,
+    defineConfig({
+      plugins: [
+        storybookTest({
+          configDir: path.join(dirname, ".storybook"),
+          storybookScript: "pnpm storybook --ci",
+        }),
+      ],
+      test: {
+        browser: {
+          instances: [
+            {
+              browser: "chromium",
+            },
+          ],
+          enabled: true,
+          provider: "playwright",
+          headless: true,
+        },
+        // Speed up tests and better match how they run in Storybook itself
+        // https://vitest.dev/config/#isolate
+        // Consider removing this if you have flaky tests
+        isolate: false,
+        setupFiles: ["./.storybook/vitest.setup.ts"],
+      },
+    }),
+  ),
+)