🔀 merge pull request #327 from tonightpass/antoinekm/full-exports

Antoinekm/full exports
tonightpass · Jan 12, 2024 · 7403aca · 7403aca · vercel · Jan 12, 2024
2 parents c56e0e8 + dd6434a
commit 7403aca
Show file tree

Hide file tree

Showing 45 changed files with 466 additions and 379 deletions.
diff --git a/.changeset/five-readers-push.md b/.changeset/five-readers-push.md
@@ -0,0 +1,5 @@
+---
+"@tonightpass/kitchen": patch
+---
+
+Add full exports for components
diff --git a/.changeset/wise-seals-decide.md b/.changeset/wise-seals-decide.md
@@ -0,0 +1,5 @@
+---
+"@tonightpass/kitchen": patch
+---
+
+Improve footer with grids
diff --git a/packages/kitchen/src/components/Avatar/Group/index.tsx b/packages/kitchen/src/components/Avatar/Group/index.tsx
@@ -31,7 +31,7 @@ type Props = {
 
 export type AvatarGroupProps = KitchenComponent<Props>;
 
-const AvatarGroup = styled(
+const AvatarGroupComponent = styled(
   ({ members, size, limit, ...props }: AvatarGroupProps) => {
     return (
       <div {...props}>
@@ -72,4 +72,6 @@ const AvatarGroup = styled(
   }
 `;
 
-export default withScale(AvatarGroup);
+AvatarGroupComponent.displayName = "KitchenAvatarGroup";
+export const AvatarGroup = withScale(AvatarGroupComponent);
+export default AvatarGroup;
diff --git a/packages/kitchen/src/components/Avatar/index.tsx b/packages/kitchen/src/components/Avatar/index.tsx
@@ -37,13 +37,13 @@ type Props = {
 
 export type AvatarProps = KitchenComponent<Props>;
 
-const Avatar = styled(
+const AvatarComponent = styled(
   ({ size = 30, src, text, shape, ...props }: AvatarProps) => {
     return (
       <div {...props}>
         {text && <Text size={"small"}>{shortenName(text)}</Text>}
         {src && (
-          <Image
+          <AvatarImage
             src={src}
             shape={shape}
             alt={"Avatar"}
@@ -72,12 +72,14 @@ const Avatar = styled(
   transition: all 0.2s;
 `;
 
-const Image = styled.img<{ shape?: AvatarProps["shape"] }>`
+export const AvatarImage = styled.img<{ shape?: AvatarProps["shape"] }>`
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: ${({ shape, theme }) =>
     shape === "square" ? theme.radius.square : theme.radius.round};
 `;
 
-export default withScale(Avatar);
+AvatarComponent.displayName = "KitchenAvatar";
+export const Avatar = withScale(AvatarComponent);
+export default Avatar;
diff --git a/packages/kitchen/src/components/Badge/index.tsx b/packages/kitchen/src/components/Badge/index.tsx
@@ -26,7 +26,7 @@ type Props = {
 
 export type BadgeProps = KitchenComponent<Props>;
 
-const Badge = styled(({ children, ...props }: BadgeProps) => {
+const BadgeComponent = styled(({ children, ...props }: BadgeProps) => {
   return (
     <span {...props}>
       {children && isString(children)
@@ -103,4 +103,6 @@ const Badge = styled(({ children, ...props }: BadgeProps) => {
   }};
 `;
 
-export default withScale(Badge);
+BadgeComponent.displayName = "KitchenBadge";
+export const Badge = withScale(BadgeComponent);
+export default Badge;
diff --git a/packages/kitchen/src/components/Button/index.tsx b/packages/kitchen/src/components/Button/index.tsx
@@ -8,7 +8,7 @@ import convertRGBToRGBA from "../../utils/convertRGBToRGBA";
 import isNumber from "../../utils/isNumber";
 import Spinner from "../Spinner";
 
-export type Props = {
+type Props = {
   shape?: "square" | "round";
   size?: NormalSizes;
   loading?: boolean;
@@ -30,7 +30,7 @@ export type ButtonProps = KitchenComponent<
   React.ButtonHTMLAttributes<HTMLButtonElement>
 >;
 
-const Button = styled(
+const ButtonComponent = styled(
   ({
     as: Component = "button",
     children,
@@ -45,7 +45,7 @@ const Button = styled(
     return (
       <Component {...props}>
         {(prefix || loading) && (
-          <Prefix hasContent={children !== undefined}>
+          <ButtonPrefix hasContent={children !== undefined}>
             {loading ? (
               <Spinner
                 size={
@@ -62,10 +62,10 @@ const Button = styled(
             ) : (
               prefix
             )}
-          </Prefix>
+          </ButtonPrefix>
         )}
-        <Content width={width}>{children}</Content>
-        {suffix && <Suffix>{suffix}</Suffix>}
+        <ButtonContent width={width}>{children}</ButtonContent>
+        {suffix && <ButtonSuffix>{suffix}</ButtonSuffix>}
       </Component>
     );
   },
@@ -271,7 +271,7 @@ const Button = styled(
   }
 `;
 
-const Content = styled.span<{ width?: string | number }>`
+export const ButtonContent = styled.span<{ width?: string | number }>`
   font-weight: ${({ theme }) => theme.weight.semiBold};
   font-size: inherit;
   font-family: inherit;
@@ -282,15 +282,17 @@ const Content = styled.span<{ width?: string | number }>`
     "text-overflow: ellipsis; overflow: hidden;  white-space: nowrap;"};
 `;
 
-const Prefix = styled.span<{ hasContent: boolean }>`
+export const ButtonPrefix = styled.span<{ hasContent: boolean }>`
   font-size: inherit;
   color: inherit;
   ${({ hasContent }) => hasContent && "margin-right: 7px;"}
 `;
-const Suffix = styled.span`
+export const ButtonSuffix = styled.span`
   font-size: inherit;
   margin-left: 7px;
   color: inherit;
 `;
 
-export default withScale(Button);
+ButtonComponent.displayName = "KitchenButton";
+export const Button = withScale(ButtonComponent);
+export default Button;
diff --git a/packages/kitchen/src/components/Checkbox/index.tsx b/packages/kitchen/src/components/Checkbox/index.tsx
@@ -20,7 +20,7 @@ export type CheckboxProps = KitchenComponent<
   React.InputHTMLAttributes<HTMLInputElement>
 >;
 
-const Checkbox = styled(
+const CheckboxComponent = styled(
   ({
     children,
     checked,
@@ -37,21 +37,21 @@ const Checkbox = styled(
     };
 
     return (
-      <Container
+      <CheckboxContainer
         disabled={disabled}
         fullWidth={fullWidth}
         label={label}
         {...props}
       >
-        {label && <Label>{label}</Label>}
-        <CheckContainer label={label}>
-          <Check>
+        {label && <CheckboxLabel>{label}</CheckboxLabel>}
+        <CheckboxCheckContainer label={!!label}>
+          <CheckboxCheck>
             <StyledCheckbox
               type={"checkbox"}
               checked={checked}
               onChange={handleChange}
             />
-            <Checkmark
+            <CheckboxCheckmark
               checked={checked}
               indeterminate={indeterminate}
               disabled={disabled}
@@ -67,11 +67,11 @@ const Checkbox = styled(
                   <Icon icon={RiSubtractLine} color={"darker"} size={16} />
                 )
               )}
-            </Checkmark>
-          </Check>
-          {children && <Content>{children}</Content>}
-        </CheckContainer>
-      </Container>
+            </CheckboxCheckmark>
+          </CheckboxCheck>
+          {children && <CheckboxContent>{children}</CheckboxContent>}
+        </CheckboxCheckContainer>
+      </CheckboxContainer>
     );
   },
 )<CheckboxProps>`
@@ -80,7 +80,7 @@ const Checkbox = styled(
   }
 `;
 
-const Checkmark = styled.span<{
+export const CheckboxCheckmark = styled.span<{
   checked?: boolean;
   indeterminate?: boolean;
   disabled?: boolean;
@@ -111,7 +111,7 @@ const Checkmark = styled.span<{
   }};
 `;
 
-const Container = styled.label<{
+export const CheckboxContainer = styled.label<{
   disabled?: boolean;
   fullWidth?: boolean;
   label: boolean;
@@ -126,7 +126,7 @@ const Container = styled.label<{
   ${({ fullWidth }) => fullWidth && "width: 100%;"};
 
   &:hover {
-    ${Checkmark} {
+    ${CheckboxCheckmark} {
       border-color: ${({ theme, disabled }) =>
         disabled ? theme.colors.layout.dark : theme.colors.layout.light};
     }
@@ -143,35 +143,47 @@ const Container = styled.label<{
   `}
 `;
 
-const Label = styled.div`
+export const CheckboxLabel = styled.div`
   margin-bottom: 8px;
   font-size: ${({ theme }) => theme.size.small};
   font-weight: ${({ theme }) => theme.weight.medium};
   color: ${({ theme }) => theme.colors.text.dark};
 `;
 
-const CheckContainer = styled(({ children, label, ...props }) =>
-  label ? <div {...props}>{children}</div> : children,
-)`
+export type CheckboxCheckContainerProps = KitchenComponent<
+  {
+    label?: boolean;
+  },
+  React.HTMLAttributes<HTMLDivElement>
+>;
+
+const BaseCheckboxCheckContainer: React.FC<CheckboxCheckContainerProps> = ({
+  children,
+  label,
+  ...props
+}: CheckboxCheckContainerProps) =>
+  label ? <div {...props}>{children}</div> : <>{children}</>;
+
+export const CheckboxCheckContainer = styled(BaseCheckboxCheckContainer)`
   display: inline-flex;
   align-items: flex-start;
   user-select: none;
 `;
 
-const Check = styled.span`
+export const CheckboxCheck = styled.span`
   display: flex;
   position: relative;
   align-items: center;
   padding: 2px;
   margin: -2px;
 `;
 
-const Content = styled.span`
+export const CheckboxContent = styled.span`
   margin-left: 8px;
   font-size: inherit;
 `;
 
-const StyledCheckbox = styled.input`
+export const StyledCheckbox = styled.input`
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -180,4 +192,6 @@ const StyledCheckbox = styled.input`
   width: 0;
 `;
 
-export default withScale(Checkbox);
+CheckboxComponent.displayName = "KitchenCheckbox";
+export const Checkbox = withScale(CheckboxComponent);
+export default Checkbox;
diff --git a/packages/kitchen/src/components/Code/Inline/index.tsx b/packages/kitchen/src/components/Code/Inline/index.tsx
@@ -2,8 +2,14 @@ import React from "react";
 import styled from "styled-components";
 
 import withScale from "../../../hoc/withScale";
+import { KitchenComponent } from "../../../types";
 
-const InlineCode = styled((props) => {
+export type InlineCodeProps = KitchenComponent<
+  object,
+  React.HTMLAttributes<HTMLElement>
+>;
+
+const InlineCodeComponent = styled((props: InlineCodeProps) => {
   return <code {...props} />;
 })`
   display: inline-block;
@@ -16,4 +22,6 @@ const InlineCode = styled((props) => {
   white-space: pre-wrap;
 `;
 
-export default withScale(InlineCode);
+InlineCodeComponent.displayName = "KitchenInlineCode";
+export const InlineCode = withScale(InlineCodeComponent);
+export default InlineCode;
diff --git a/packages/kitchen/src/components/Code/index.tsx b/packages/kitchen/src/components/Code/index.tsx
@@ -13,15 +13,15 @@ export type CodeProps = KitchenComponent<
   React.HTMLAttributes<HTMLPreElement>
 >;
 
-const Code = styled(({ children, title, ...props }: CodeProps) => {
+const CodeComponent = styled(({ children, title, ...props }: CodeProps) => {
   return (
     <pre title={title} {...props}>
       {title && (
-        <Header>
-          <Title>{title}</Title>
-        </Header>
+        <CodeHeader>
+          <CodeTitle>{title}</CodeTitle>
+        </CodeHeader>
       )}
-      <Content>{children}</Content>
+      <CodeContent>{children}</CodeContent>
     </pre>
   );
 })<CodeProps>`
@@ -34,7 +34,7 @@ const Code = styled(({ children, title, ...props }: CodeProps) => {
   overflow: auto;
 `;
 
-const Header = styled.header`
+export const CodeHeader = styled.header`
   position: absolute;
   top: 0;
   left: 0;
@@ -43,7 +43,7 @@ const Header = styled.header`
   border-radius: 6px;
 `;
 
-const Title = styled.div`
+export const CodeTitle = styled.div`
   font-size: ${({ theme }) => theme.size.small};
   background-color: ${({ theme }) => theme.colors.layout.dark};
   color: ${({ theme }) => theme.colors.text.lighter};
@@ -52,7 +52,7 @@ const Title = styled.div`
   padding: 5px;
 `;
 
-const Content = styled.code`
+export const CodeContent = styled.code`
   color: ${({ theme }) => theme.colors.text.lightest};
   text-align: left;
   white-space: pre;
@@ -65,4 +65,6 @@ const Content = styled.code`
   hyphens: none;
 `;
 
-export default withScale(Code);
+CodeComponent.displayName = "KitchenCode";
+export const Code = withScale(CodeComponent);
+export default Code;