Merge pull request #29 from comfortdelgro/release/v0.9.05-beta

release/v0.9.05-beta

.npmignore

@@ -1,6 +1,7 @@
+# `yarn publish` should ignore `src`
+# Since all required files in src will be copied to dist by bable
 src
-public
-build
+# other npm unrealted directories
 .storybook
 .github
 .git

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfortdelgro/design-system",
   "description": "Comfort Delgro's design system",
-  "version": "0.9.0-beta",
+  "version": "0.9.05-beta",
   "dependencies": {
     "baseui": "^11.0.2",
     "react": "^17.0.2",

src/components/Accordions/Accordions.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import {
+  Accordion as BuiAccordion,
+  Panel as BuiPanel,
+} from "baseui/accordion";
+import override from "./override";
+
+export const Accordion = React.forwardRef(({ overrides, children, ...restProps }, ref) => {
+  const localOverrides = override(overrides);
+  return (
+    <BuiAccordion
+      ref={ref}
+      overrides={localOverrides}
+      {...restProps}
+    >
+      { children }
+    </BuiAccordion>
+  );
+});
+
+export const Panel = React.forwardRef((props, ref) => {
+  return (
+    <BuiPanel ref={ref} {...props}/>
+  )
+});
+
+Accordion.propTypes = {
+  overrides: PropTypes.shape({
+    Content: PropTypes.object,
+    ContentAnimationContainer: PropTypes.object,
+    Header: PropTypes.object,
+    PanelContainer: PropTypes.object,
+    Root: PropTypes.object,
+    ToggleIcon: PropTypes.object,
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element
+  ]).isRequired,
+};
+
+Accordion.defaultProps = {
+  overrides: {
+    Content: {},
+    ContentAnimationContainer: {},
+    Header: {},
+    PanelContainer: {},
+    Root: {},
+    ToggleIcon: {},
+  },
+};

src/components/Accordions/Accordions.stories.mdx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { Meta, Story, Preview } from "@storybook/addon-docs";
+import { action } from "@storybook/addon-actions";
+import { Accordion, Panel } from "./Accordions";
+
+<Meta title="Contents" component={Accordion} />
+
+<Canvas withToolbar>
+  <Story
+    name="Accordions">
+    <Accordion
+      onChange={action("onChange")}>
+      <Panel title="Panel 1">Content 1</Panel>
+      <Panel title="Panel 2">Content 2</Panel>
+      <Panel title="Panel 3">Content 3</Panel>
+    </Accordion>
+  </Story>
+</Canvas>

src/components/Accordions/Accordions.ts

@@ -0,0 +1,5 @@
+import { AccordionProps, PanelProps } from "baseui/accordion";
+import * as React from 'react';
+
+export declare const Accordion: React.FC<AccordionProps>; 
+export declare const Panel: React.FC<PanelProps>; 

src/components/Accordions/index.d.ts

@@ -0,0 +1 @@
+export * from "./Accordions.js";

src/components/Accordions/index.js

@@ -0,0 +1 @@
+export * from "./Accordions.js";

src/components/Accordions/override.js

@@ -0,0 +1,60 @@
+import { resolveComponent, resolveProps, resolveStyle } from "../override";
+import { margin, padding } from "../../utils/helpers/style";
+
+const override = ({ 
+  Content,
+  ContentAnimationContainer,
+  Header,
+  PanelContainer,
+  Root,
+  ToggleIcon
+}) => ({
+  Root: {
+    style: (props) => ({
+      ...resolveStyle(Root, props),
+    }),
+    props: resolveProps({}, Root),
+    ...resolveComponent(Root),
+  },
+  Content: {
+    style: ({ $theme, $disabled, $error, ...restProps }) => ({
+      ...resolveStyle(Content, { $theme, $disabled, $error, ...restProps }),
+    }),
+    props: resolveProps({}, Content),
+    ...resolveComponent(Content),
+  },
+  ContentAnimationContainer: {
+    style: ({ $theme, $disabled, $error, ...restProps }) => ({
+      ...resolveStyle(ContentAnimationContainer, { $theme, $disabled, $error, ...restProps }),
+    }),
+    props: resolveProps({}, ContentAnimationContainer),
+    ...resolveComponent(ContentAnimationContainer),
+  },
+  Header: {
+    style: ({ $theme, $disabled, $error, ...restProps }) => ({
+      ...$theme.typography.accordionHeader,
+      ...padding("24px 25px 24px 25px"),
+      ...resolveStyle(Header, { $theme, $disabled, $error, ...restProps }),
+    }),
+    props: resolveProps({}, Header),
+    ...resolveComponent(Header),
+  },
+  PanelContainer: {
+    style: ({ $theme, $disabled, $error, ...restProps }) => ({
+      ...resolveStyle(PanelContainer, { $theme, $disabled, $error, ...restProps }),
+    }),
+    props: resolveProps({}, PanelContainer),
+    ...resolveComponent(PanelContainer),
+  },
+  ToggleIcon: {
+    style: ({ $theme, $disabled, $error, ...restProps }) => ({
+      ...resolveStyle(ToggleIcon, { $theme, $disabled, $error, ...restProps }),
+    }),
+    props: resolveProps({}, ToggleIcon),
+    // component: (props) => {
+    //   console.debug("ToggleIconPorps", props);
+    // }
+    ...resolveComponent(ToggleIcon),
+  },
+});
+export default override;

src/components/Avatars/Avatar.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import {
+  Avatar as BuiAvatar,
+} from "baseui/avatar";
+import override from "./override";
+
+export const Avatar = React.forwardRef(({ overrides, size, ...restProps }, ref) => {
+  const localOverrides = override(overrides);
+  return (
+    <BuiAvatar
+      ref={ref}
+      overrides={localOverrides}
+      size={size}
+      {...restProps}
+    />
+  );
+});
+
+export const SIZES = {
+  lg: "40px",
+  md: "32px",
+  sm: "24px", 
+  xs: "16px",
+}
+
+Avatar.propTypes = {
+  overrides: PropTypes.shape({
+    Root: PropTypes.object,
+    Avatar: PropTypes.object,
+    Initials: PropTypes.object,
+  }),
+  size: PropTypes.string
+};
+
+Avatar.defaultProps = {
+  overrides: {
+    Root: {},
+    Avatar: {},
+    Initials: {},
+  },
+  size: SIZES.md,
+};

src/components/Avatars/Avatar.stories.mdx

@@ -0,0 +1,31 @@
+import { Meta, Story, Preview } from "@storybook/addon-docs";
+import { action } from "@storybook/addon-actions";
+import { Avatar, SIZES } from "./Avatar";
+import { FlexGrid, FlexGridItem } from "baseui/flex-grid";
+
+<Meta title="Components" component={Avatar} />
+
+export const Template = (props) => (
+  <React.Fragment>
+    <FlexGrid
+      flexGridColumnCount={4}>
+      {Object.keys(SIZES).map((key, index) => (
+        <FlexGridItem
+          key={`sb-avatar-wic-${key}-${index}`}>
+          <Avatar
+            name="Jane Doe"
+            size={SIZES[key]}
+            src={`https://avatars.dicebear.com/api/human/${index}.svg?width=285&mood=happy`}
+          />
+        </FlexGridItem>
+      ))}
+    </FlexGrid>
+  </React.Fragment>
+)
+
+<Canvas withToolbar>
+  <Story
+    name="Avatars">
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/components/Avatars/Avatar.ts

@@ -0,0 +1,10 @@
+import { AvatarProps } from "baseui/avatar";
+import * as React from 'react';
+
+export declare const Avatar: React.FC<AvatarProps>; 
+export declare const SIZES: {
+  lg: string,
+  md: string,
+  sm: string 
+  xs: string,
+};

src/components/Avatars/index.d.ts

@@ -0,0 +1 @@
+export * from "./Avatar.js";

src/components/Avatars/index.js

@@ -0,0 +1 @@
+export * from "./Avatar.js";

src/components/Avatars/override.js

@@ -0,0 +1,47 @@
+import { resolveComponent, resolveProps, resolveStyle } from "../override";
+import { SIZES } from "./Avatar";
+import { borderRadius, padding } from "../../utils/helpers/style";
+
+function resovleAvatarTypoScale(size, theme) {
+  console.debug('resovleAvatarTypoScale', size);
+  switch (size) {
+    case SIZES.lg:
+      return theme.typography.avatarLg;
+    case SIZES.sm:
+      return theme.typography.avatarSm;
+    case SIZES.xs:
+      return theme.typography.avatarXs;
+    default:
+      return theme.typography.avatarMd;
+  }
+};
+
+const override = ({ 
+  Avatar,
+  Root,
+  Initials,
+}) => ({
+  Avatar: {
+    style: (props) => ({
+      ...resolveStyle(Avatar, props),
+    }),
+    props: resolveProps({}, Avatar),
+    ...resolveComponent(Avatar),
+  },
+  Root: {
+    style: (props) => ({
+      ...resolveStyle(Root, props),
+    }),
+    props: resolveProps({}, Root),
+    ...resolveComponent(Root),
+  },
+  Initials: {
+    style: (props) => ({
+      // TODO:: fix baseweb err and apply typo
+      ...resolveStyle(Initials, props),
+    }),
+    props: resolveProps({}, Initials),
+    ...resolveComponent(Initials),
+  },
+});
+export default override;

src/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -18,5 +18,4 @@ export namespace Breadcrumbs {
         }
         export { overrides_1 as overrides };
     }
-}
-//# sourceMappingURL=Breadcrumbs.d.ts.map
+}