@kimdw-rtk/ui 0.0.0

package/src/utils/sprinklesUtils.ts

@@ -0,0 +1,28 @@
+import { sprinkles } from '#styles';
+
+type SprinklesKey =
+  typeof sprinkles.properties extends Set<infer U> ? U : never;
+
+export const filterSprinkles = (props: { [key: string]: unknown }) => {
+  const result = {} as { [key in SprinklesKey]: unknown };
+
+  for (const key in props) {
+    if (sprinkles.properties.has(key as SprinklesKey)) {
+      result[key as SprinklesKey] = props[key];
+    }
+  }
+
+  return result as Parameters<typeof sprinkles>[0];
+};
+
+export const omitSprinkles = (props: { [key: string]: unknown }) => {
+  const result = {} as { [key: string]: unknown };
+
+  for (const key in props) {
+    if (!sprinkles.properties.has(key as SprinklesKey)) {
+      result[key as SprinklesKey] = props[key];
+    }
+  }
+
+  return result;
+};

package/src/utils/styleUtils.css.ts

@@ -0,0 +1,109 @@
+import { style, type StyleRule } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { componentsLayer } from '#styles';
+
+type StyleRuleWithoutLayer =
+  | Omit<StyleRule, '@layer'>
+  | string
+  | (Omit<StyleRule, '@layer'> | string)[];
+type RecipeStyleRuleWithoutLayer =
+  | Omit<StyleRule, '@layer'>
+  | string
+  | (Omit<StyleRule, '@layer'> | string)[];
+type VariantDefinitions = Record<string, RecipeStyleRuleWithoutLayer>;
+type BooleanMap<T> = T extends 'true' | 'false' ? boolean : T;
+type VariantGroups = Record<string, VariantDefinitions>;
+type VariantSelection<Variants extends VariantGroups> = {
+  [VariantGroup in keyof Variants]?:
+    | BooleanMap<keyof Variants[VariantGroup]>
+    | undefined;
+};
+
+interface CompoundVariant<Variants extends VariantGroups> {
+  variants: VariantSelection<Variants>;
+  style: RecipeStyleRuleWithoutLayer;
+}
+type PatternOptions<Variants extends VariantGroups> = {
+  base?: RecipeStyleRuleWithoutLayer;
+  variants?: Variants;
+  defaultVariants?: VariantSelection<Variants>;
+  compoundVariants?: Array<CompoundVariant<Variants>>;
+};
+
+export const styleWithLayer = (
+  rule: StyleRuleWithoutLayer,
+  layer: string = componentsLayer,
+) => {
+  if (Array.isArray(rule)) {
+    return rule
+      .map((ruleItem) => {
+        if (typeof ruleItem === 'string') {
+          return ruleItem;
+        }
+        return style({ '@layer': { [layer]: ruleItem } });
+      })
+      .join(' ');
+  } else if (typeof rule === 'string') {
+    return rule;
+  }
+
+  return style({ '@layer': { [layer]: rule } });
+};
+
+export const recipeWithLayer = <Variants extends VariantGroups>(
+  options: PatternOptions<Variants>,
+  layer: string = componentsLayer,
+) => {
+  const { base, compoundVariants, defaultVariants, variants } = options;
+
+  let layeredBase: RecipeStyleRuleWithoutLayer | undefined;
+
+  if (base) {
+    if (typeof base === 'string') {
+      layeredBase = base;
+    } else if (Array.isArray(base)) {
+      layeredBase = base
+        .map((rule) => {
+          if (typeof rule === 'string') {
+            return rule;
+          }
+
+          if (Array.isArray(rule)) {
+            return rule.join(' ');
+          }
+
+          return style({ '@layer': { [layer]: rule } });
+        })
+        .join(' ');
+    } else {
+      layeredBase = style({ '@layer': { [layer]: base } });
+    }
+  }
+
+  let layeredVariants: Variants | undefined;
+
+  if (variants) {
+    layeredVariants = Object.entries(variants).reduce(
+      (prev, [variantKey, variantValue]) => {
+        return {
+          ...prev,
+          [variantKey]: Object.entries(variantValue).reduce(
+            (prev, [key, value]) => {
+              return { ...prev, [key]: styleWithLayer(value, layer) };
+            },
+            {},
+          ),
+        };
+      },
+      {} as Variants,
+    );
+  }
+
+  return recipe({
+    base: layeredBase,
+    compoundVariants,
+    defaultVariants,
+    variants: layeredVariants,
+  });
+};

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "dist",
+    "types": ["@testing-library/jest-dom"],
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/turbo/generators/config.ts

@@ -0,0 +1,30 @@
+import type { PlopTypes } from '@turbo/gen';
+
+// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+export default function generator(plop: PlopTypes.NodePlopAPI): void {
+  // A simple generator to add a new React component to the internal UI library
+  plop.setGenerator('react-component', {
+    description: 'Adds a new react component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is the name of the component?',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/{{kebabCase name}}.tsx',
+        templateFile: 'templates/component.hbs',
+      },
+      {
+        type: 'append',
+        path: 'package.json',
+        pattern: /"exports": {(?<insertion>)/g,
+        template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+      },
+    ],
+  });
+}

package/turbo/generators/templates/component.hbs

@@ -0,0 +1,8 @@
+export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h1>{{ pascalCase name }} Component</h1>
+      {children}
+    </div>
+  );
+};