Add anatomy example

cobaltinc · Nov 21, 2023 · 0129fb4 · 0129fb4
1 parent 07f2623
commit 0129fb4
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 67 deletions.
diff --git a/packages/co-design-core/package.json b/packages/co-design-core/package.json
@@ -19,6 +19,7 @@
     "directory": "packages/co-design-core"
   },
   "peerDependencies": {
+    "@co-design/anatomy": "^1.0.0",
     "@co-design/hooks": "^0.6.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"

diff --git a/packages/co-design-core/src/components/Abc/Abc.anatomy.ts b/packages/co-design-core/src/components/Abc/Abc.anatomy.ts
@@ -1,4 +1,4 @@
-import { createAnatomy } from './createAnatomy';
+import { createAnatomy } from '@co-design/anatomy';
 
-export const anatomy = createAnatomy('abc').parts('root', 'label', 'text');
-export const parts = anatomy.build();
+export const anatomy = createAnatomy('abc', ['root', 'label', 'text']);
+export const parts = anatomy.generate();
diff --git a/packages/co-design-core/src/components/Abc/Abc.style.ts b/packages/co-design-core/src/components/Abc/Abc.style.ts
@@ -1,13 +1,20 @@
-import { CoColor, CoPalette, createStyles } from '@co-design/styles';
-import { parts } from './Abc.anatomy';
+import { CSSObject, CoColor, CoPalette, createStyles } from '@co-design/styles';
+import { anatomy, parts } from './Abc.anatomy';
+import type { AnatomyPartName } from '@co-design/anatomy';
 
 interface AnchorStyles {
   color: CoPalette | CoColor | string;
   underlineOnHover: boolean;
 }
 
-export default createStyles((theme, { color, underlineOnHover }: AnchorStyles) => ({
-  [parts.label.key]: {
+type StyleKeys = Extract<AnatomyPartName<typeof anatomy>, 'root' | 'label'>;
+
+export default createStyles<StyleKeys, AnchorStyles>((theme, { color, underlineOnHover }: AnchorStyles) => ({
+  root: {
+    margin: 0,
+    padding: 0,
+  },
+  label: {
     color: color in theme.palettes ? theme.palettes[color][6] : color in theme.colors ? theme.colors[color] : color,
     backgroundColor: 'transparent',
     cursor: 'pointer',
@@ -19,3 +26,5 @@ export default createStyles((theme, { color, underlineOnHover }: AnchorStyles) =
     },
   },
 }));
+
+// as Record<AnatomyPartName<typeof anatomy>, CSSObject>
diff --git a/packages/co-design-core/src/components/Abc/Abc.tsx b/packages/co-design-core/src/components/Abc/Abc.tsx
@@ -1,14 +1,16 @@
 import React, { forwardRef } from 'react';
-import { CoComponentProps, CoZIndex, useCoTheme } from '@co-design/styles';
+import { CoComponentProps } from '@co-design/styles';
 import { View } from '../View';
-import { anatomy, parts } from './Abc.anatomy';
+import useStyles from './Abc.style';
 
 export interface AbcProps extends CoComponentProps, React.ComponentPropsWithoutRef<'div'> {}
 
 export const Abc = forwardRef<HTMLDivElement, AbcProps>(({ className, co, ...props }: AbcProps, ref) => {
+  const { classes, cx } = useStyles({ color: 'black', underlineOnHover: true });
+
   return (
-    <View co={[co]} ref={ref} {...props}>
-      Test
+    <View co={[co]} ref={ref} {...props} className={cx(classes.root)}>
+      <View className={cx(classes.label)}>Test</View>
     </View>
   );
 });

diff --git a/packages/co-design-core/src/components/Abc/createAnatomy.ts b/packages/co-design-core/src/components/Abc/createAnatomy.ts
diff --git a/packages/co-design-core/src/components/Abc/index.ts b/packages/co-design-core/src/components/Abc/index.ts
diff --git a/packages/co-design-core/src/components/Transition/getTransitionStyles.ts b/packages/co-design-core/src/components/Transition/getTransitionStyles.ts
@@ -43,5 +43,5 @@ export const getTransitionStyles = ({
     ...shared,
     ...transition.common,
     ...transition[transitionStatuses[state]],
-  };
+  }; //
 };
diff --git a/packages/co-design-core/tsconfig.build.json b/packages/co-design-core/tsconfig.build.json
@@ -18,6 +18,7 @@
     "declarationDir": "lib",
     "composite": true,
     "paths": {
+      "@co-design/anatomy": ["../co-design-anatomy/src"],
       "@co-design/hooks": ["../co-design-hooks/src"],
       "@co-design/styles": ["../co-design-styles/src"]
     }

diff --git a/packages/co-design-core/tsconfig.json b/packages/co-design-core/tsconfig.json
@@ -15,6 +15,7 @@
     "declarationDir": "lib",
     "composite": true,
     "paths": {
+      "@co-design/anatomy": ["../co-design-anatomy/src"],
       "@co-design/hooks": ["../co-design-hooks/src"],
       "@co-design/styles": ["../co-design-styles/src"]
     }