@ssa-ui-kit/core 0.0.20-alpha → 0.0.21-alpha

package/src/components/TabBar/TabBarContext.tsx

@@ -1,43 +1,43 @@
-import { createContext, useState, useContext } from 'react';
-import { ITab, ITabBarContext } from './types';
-
-const defaultTab: ITab = {
-  tabId: Number.NaN,
-  renderContent() {
-    return null;
-  },
-};
-
-export const TabBarContext = createContext<ITabBarContext>({
-  activeTab: defaultTab,
-  setActiveTab() {
-    /* default no-op */
-  },
-});
-
-export const useTabBarContext = () => useContext(TabBarContext);
-
-const useTabBar = (initialTab?: ITab): ITabBarContext => {
-  const [tab, setTab] = useState<ITab | undefined>(initialTab);
-
-  return {
-    activeTab: tab,
-    setActiveTab: (tab) => setTab(tab),
-  };
-};
-
-export const TabBarContextProvider = ({
-  initialTab = defaultTab,
-  children,
-}: {
-  initialTab?: ITab;
-  children: React.ReactNode;
-}) => {
-  const { activeTab, setActiveTab } = useTabBar(initialTab);
-
-  return (
-    <TabBarContext.Provider value={{ activeTab, setActiveTab }}>
-      {children}
-    </TabBarContext.Provider>
-  );
-};
+import { createContext, useState, useContext } from 'react';
+import { ITab, ITabBarContext } from './types';
+
+const defaultTab: ITab = {
+  tabId: Number.NaN,
+  renderContent() {
+    return null;
+  },
+};
+
+export const TabBarContext = createContext<ITabBarContext>({
+  activeTab: defaultTab,
+  setActiveTab() {
+    /* default no-op */
+  },
+});
+
+export const useTabBarContext = () => useContext(TabBarContext);
+
+const useTabBar = (initialTab?: ITab): ITabBarContext => {
+  const [tab, setTab] = useState<ITab | undefined>(initialTab);
+
+  return {
+    activeTab: tab,
+    setActiveTab: (tab) => setTab(tab),
+  };
+};
+
+export const TabBarContextProvider = ({
+  initialTab = defaultTab,
+  children,
+}: {
+  initialTab?: ITab;
+  children: React.ReactNode;
+}) => {
+  const { activeTab, setActiveTab } = useTabBar(initialTab);
+
+  return (
+    <TabBarContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabBarContext.Provider>
+  );
+};

package/src/components/TabBar/index.ts

@@ -1,6 +1,6 @@
-export { default } from './TabBar';
-export {
-  TabBarContextProvider,
-  useTabBarContext,
-  TabBarContext,
-} from './TabBarContext';
+export { default } from './TabBar';
+export {
+  TabBarContextProvider,
+  useTabBarContext,
+  TabBarContext,
+} from './TabBarContext';

package/src/components/TabBar/stories/TimePeriodTabBar.stories.tsx

@@ -1,84 +1,84 @@
-/* eslint-disable prettier/prettier */
-import { Meta, StoryObj } from '@storybook/react';
-import TabBar from '@components/TabBar';
-import Tab from '@components/Tab';
-
-import { TabBarDecorator, TabContents } from './helpers';
-
-type Args = Parameters<typeof TabBar>[0];
-
-export default {
-  title: 'Components/TabBar',
-  component: TabBar,
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-      },
-    },
-  },
-  decorators: [TabBarDecorator],
-} as Meta<typeof TabBar>;
-
-const TabBarOutput = ({ args }: {
-  args: Args
-}) => (
-  <TabBar {...args}>
-    <Tab
-      tabId="year"
-      text="Year"
-      ariaControls="year-panel"
-      renderContent={() => (
-        <TabContents id="year-panel" labelledBy="year" text="Year contents" />
-      )}
-    />
-    <Tab
-      tabId="month"
-      text="Month"
-      ariaControls="month-panel"
-      renderContent={() => (
-        <TabContents
-          id="month-panel"
-          labelledBy="month"
-          text="Month contents"
-        />
-      )}
-    />
-    <Tab
-      tabId="week"
-      text="Week"
-      ariaControls="week-panel"
-      renderContent={() => (
-        <TabContents id="week-panel" labelledBy="week" text="Week contents" />
-      )}
-    />
-    <Tab
-      tabId="day"
-      text="Day"
-      ariaControls="day-panel"
-      renderContent={() => (
-        <TabContents id="day-panel" labelledBy="day" text="Day contents" />
-      )}
-    />
-  </TabBar>
-)
-
-export const TimePeriodTabBarStory: StoryObj<typeof Tab> = (args: Args) => (
-  <TabBarOutput args={args} />
-);
-TimePeriodTabBarStory.storyName = 'Time Period Tab Bar';
-
-export const TimePeriodTabBarStoryWithActiveBar: StoryObj<typeof Tab> = (
-  args: Args,
-) => <TabBarOutput args={args} />;
-TimePeriodTabBarStoryWithActiveBar.storyName = 'Time Period Tab Bar (+Active Tab)';
-TimePeriodTabBarStoryWithActiveBar.args = {
-  selectedTabId: 'month',
-  renderContent: () => (
-    <TabContents
-      id="month-panel"
-      labelledBy="month"
-      text="Month contents"
-    />
-  )
-}
+/* eslint-disable prettier/prettier */
+import { Meta, StoryObj } from '@storybook/react';
+import TabBar from '@components/TabBar';
+import Tab from '@components/Tab';
+
+import { TabBarDecorator, TabContents } from './helpers';
+
+type Args = Parameters<typeof TabBar>[0];
+
+export default {
+  title: 'Components/TabBar',
+  component: TabBar,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [TabBarDecorator],
+} as Meta<typeof TabBar>;
+
+const TabBarOutput = ({ args }: {
+  args: Args
+}) => (
+  <TabBar {...args}>
+    <Tab
+      tabId="year"
+      text="Year"
+      ariaControls="year-panel"
+      renderContent={() => (
+        <TabContents id="year-panel" labelledBy="year" text="Year contents" />
+      )}
+    />
+    <Tab
+      tabId="month"
+      text="Month"
+      ariaControls="month-panel"
+      renderContent={() => (
+        <TabContents
+          id="month-panel"
+          labelledBy="month"
+          text="Month contents"
+        />
+      )}
+    />
+    <Tab
+      tabId="week"
+      text="Week"
+      ariaControls="week-panel"
+      renderContent={() => (
+        <TabContents id="week-panel" labelledBy="week" text="Week contents" />
+      )}
+    />
+    <Tab
+      tabId="day"
+      text="Day"
+      ariaControls="day-panel"
+      renderContent={() => (
+        <TabContents id="day-panel" labelledBy="day" text="Day contents" />
+      )}
+    />
+  </TabBar>
+)
+
+export const TimePeriodTabBarStory: StoryObj<typeof Tab> = (args: Args) => (
+  <TabBarOutput args={args} />
+);
+TimePeriodTabBarStory.storyName = 'Time Period Tab Bar';
+
+export const TimePeriodTabBarStoryWithActiveBar: StoryObj<typeof Tab> = (
+  args: Args,
+) => <TabBarOutput args={args} />;
+TimePeriodTabBarStoryWithActiveBar.storyName = 'Time Period Tab Bar (+Active Tab)';
+TimePeriodTabBarStoryWithActiveBar.args = {
+  selectedTabId: 'month',
+  renderContent: () => (
+    <TabContents
+      id="month-panel"
+      labelledBy="month"
+      text="Month contents"
+    />
+  )
+}

package/src/components/TabBar/stories/WeekTabBar.stories.tsx

@@ -1,136 +1,136 @@
-import { Meta, StoryObj } from '@storybook/react';
-import TabBar from '@components/TabBar';
-import LargeTab from '@components/LargeTab';
-
-import { TabBarDecorator, TabContents } from './helpers';
-
-type Args = Parameters<typeof TabBar>[0];
-
-export default {
-  title: 'Components/TabBar',
-  component: TabBar,
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-      },
-    },
-  },
-  decorators: [TabBarDecorator],
-} as Meta<typeof TabBar>;
-
-const TabBarOutput = ({ args }: { args: Args }) => (
-  <TabBar {...args}>
-    <LargeTab
-      tabId="monday"
-      topText="Mon"
-      bottomText="02"
-      ariaControls="monday-panel"
-      renderContent={() => (
-        <TabContents
-          id="monday-panel"
-          labelledBy="monday"
-          text="Monday contents"
-        />
-      )}
-    />
-    <LargeTab
-      tabId="tuesday"
-      topText="Tue"
-      bottomText="03"
-      ariaControls="tuesday-panel"
-      renderContent={() => (
-        <TabContents
-          id="tuesday-panel"
-          labelledBy="tuesday"
-          text="Tuesday contents"
-        />
-      )}
-    />
-    <LargeTab
-      tabId="wednesday"
-      topText="Wed"
-      bottomText="04"
-      ariaControls="wednesday-panel"
-      renderContent={() => (
-        <TabContents
-          id="wednesday-panel"
-          labelledBy="wednesday"
-          text="Wednesday contents"
-        />
-      )}
-    />
-    <LargeTab
-      tabId="thursday"
-      topText="Thu"
-      bottomText="05"
-      ariaControls="thursday-panel"
-      renderContent={() => (
-        <TabContents
-          id="thursday-panel"
-          labelledBy="thursday"
-          text="Thursday contents"
-        />
-      )}
-    />
-    <LargeTab
-      tabId="friday"
-      topText="Fri"
-      bottomText="06"
-      ariaControls="friday-panel"
-      renderContent={() => (
-        <TabContents
-          id="friday-panel"
-          labelledBy="friday"
-          text="Friday contents"
-        />
-      )}
-    />
-    <LargeTab
-      tabId="saturday"
-      topText="Sat"
-      bottomText="07"
-      ariaControls="saturday-panel"
-      renderContent={() => (
-        <TabContents
-          id="saturday-panel"
-          labelledBy="saturday"
-          text="Saturday contents"
-        />
-      )}
-    />
-    <LargeTab
-      tabId="sunday"
-      topText="Sun"
-      bottomText="08"
-      ariaControls="sunday-panel"
-      renderContent={() => (
-        <TabContents
-          id="sunday-panel"
-          labelledBy="sunday"
-          text="Sunday contents"
-        />
-      )}
-    />
-  </TabBar>
-);
-
-export const WeekTabBarStory: StoryObj<typeof LargeTab> = (args: Args) => (
-  <TabBarOutput args={args} />
-);
-WeekTabBarStory.storyName = 'Week Tab Bar';
-
-export const WeekTabBarStoryWithActiveBar: StoryObj<typeof LargeTab> = (
-  args: Args,
-) => <TabBarOutput args={args} />;
-WeekTabBarStoryWithActiveBar.storyName = 'Week Tab Bar (+Active Tab)';
-WeekTabBarStoryWithActiveBar.args = {
-  selectedTabId: 'wednesday',
-  renderContent: () => (
-    <TabContents
-      id="wednesday-panel"
-      labelledBy="wednesday"
-      text="Wednesday contents"
-    />
-  ),
-};
+import { Meta, StoryObj } from '@storybook/react';
+import TabBar from '@components/TabBar';
+import LargeTab from '@components/LargeTab';
+
+import { TabBarDecorator, TabContents } from './helpers';
+
+type Args = Parameters<typeof TabBar>[0];
+
+export default {
+  title: 'Components/TabBar',
+  component: TabBar,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [TabBarDecorator],
+} as Meta<typeof TabBar>;
+
+const TabBarOutput = ({ args }: { args: Args }) => (
+  <TabBar {...args}>
+    <LargeTab
+      tabId="monday"
+      topText="Mon"
+      bottomText="02"
+      ariaControls="monday-panel"
+      renderContent={() => (
+        <TabContents
+          id="monday-panel"
+          labelledBy="monday"
+          text="Monday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="tuesday"
+      topText="Tue"
+      bottomText="03"
+      ariaControls="tuesday-panel"
+      renderContent={() => (
+        <TabContents
+          id="tuesday-panel"
+          labelledBy="tuesday"
+          text="Tuesday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="wednesday"
+      topText="Wed"
+      bottomText="04"
+      ariaControls="wednesday-panel"
+      renderContent={() => (
+        <TabContents
+          id="wednesday-panel"
+          labelledBy="wednesday"
+          text="Wednesday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="thursday"
+      topText="Thu"
+      bottomText="05"
+      ariaControls="thursday-panel"
+      renderContent={() => (
+        <TabContents
+          id="thursday-panel"
+          labelledBy="thursday"
+          text="Thursday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="friday"
+      topText="Fri"
+      bottomText="06"
+      ariaControls="friday-panel"
+      renderContent={() => (
+        <TabContents
+          id="friday-panel"
+          labelledBy="friday"
+          text="Friday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="saturday"
+      topText="Sat"
+      bottomText="07"
+      ariaControls="saturday-panel"
+      renderContent={() => (
+        <TabContents
+          id="saturday-panel"
+          labelledBy="saturday"
+          text="Saturday contents"
+        />
+      )}
+    />
+    <LargeTab
+      tabId="sunday"
+      topText="Sun"
+      bottomText="08"
+      ariaControls="sunday-panel"
+      renderContent={() => (
+        <TabContents
+          id="sunday-panel"
+          labelledBy="sunday"
+          text="Sunday contents"
+        />
+      )}
+    />
+  </TabBar>
+);
+
+export const WeekTabBarStory: StoryObj<typeof LargeTab> = (args: Args) => (
+  <TabBarOutput args={args} />
+);
+WeekTabBarStory.storyName = 'Week Tab Bar';
+
+export const WeekTabBarStoryWithActiveBar: StoryObj<typeof LargeTab> = (
+  args: Args,
+) => <TabBarOutput args={args} />;
+WeekTabBarStoryWithActiveBar.storyName = 'Week Tab Bar (+Active Tab)';
+WeekTabBarStoryWithActiveBar.args = {
+  selectedTabId: 'wednesday',
+  renderContent: () => (
+    <TabContents
+      id="wednesday-panel"
+      labelledBy="wednesday"
+      text="Wednesday contents"
+    />
+  ),
+};

package/src/components/TabBar/stories/helpers.tsx

@@ -1,69 +1,69 @@
-import React from 'react';
-import { Fragment, useLayoutEffect } from 'react';
-import { useTabBarContext, TabBarContextProvider } from '@components/TabBar';
-import { ITab } from '../types';
-import TabBar from '../TabBar';
-import { DecoratorFunction } from '@storybook/types';
-
-type Args = Parameters<typeof TabBar>[0];
-
-export const TabBarWrapper = ({
-  children,
-  selectedTabId,
-  renderContent,
-}: {
-  children: React.ReactNode;
-  selectedTabId?: ITab['tabId'];
-  renderContent?: ITab['renderContent'];
-}) => {
-  const { activeTab, setActiveTab } = useTabBarContext();
-  useLayoutEffect(() => {
-    if (selectedTabId && renderContent) {
-      setActiveTab({
-        tabId: selectedTabId,
-        renderContent,
-      });
-    }
-  }, []);
-
-  return (
-    <Fragment>
-      <div>{children}</div>
-      {activeTab?.renderContent()}
-    </Fragment>
-  );
-};
-
-export const TabContents = ({
-  text,
-  id,
-  labelledBy,
-}: {
-  text: string;
-  id?: string;
-  labelledBy?: string;
-}) => {
-  return (
-    <p id={id} role="tabpanel" tabIndex={0} aria-labelledby={labelledBy}>
-      {text}
-    </p>
-  );
-};
-
-/* istanbul ignore next */
-export const TabBarDecorator: DecoratorFunction<
-  {
-    component: typeof TabBar;
-    storyResult: React.ReactElement;
-    canvasElement: unknown;
-  },
-  Args
-> = (Story, { args }) => {
-  return (
-    <TabBarContextProvider>
-      <TabBarWrapper {...args}>
-        <Story {...args} />
-      </TabBarWrapper>
-    </TabBarContextProvider>
-  );
-};
+import React from 'react';
+import { Fragment, useLayoutEffect } from 'react';
+import { useTabBarContext, TabBarContextProvider } from '@components/TabBar';
+import { ITab } from '../types';
+import TabBar from '../TabBar';
+import { DecoratorFunction } from '@storybook/types';
+
+type Args = Parameters<typeof TabBar>[0];
+
+export const TabBarWrapper = ({
+  children,
+  selectedTabId,
+  renderContent,
+}: {
+  children: React.ReactNode;
+  selectedTabId?: ITab['tabId'];
+  renderContent?: ITab['renderContent'];
+}) => {
+  const { activeTab, setActiveTab } = useTabBarContext();
+  useLayoutEffect(() => {
+    if (selectedTabId && renderContent) {
+      setActiveTab({
+        tabId: selectedTabId,
+        renderContent,
+      });
+    }
+  }, []);
+
+  return (
+    <Fragment>
+      <div>{children}</div>
+      {activeTab?.renderContent()}
+    </Fragment>
+  );
+};
+
+export const TabContents = ({
+  text,
+  id,
+  labelledBy,
+}: {
+  text: string;
+  id?: string;
+  labelledBy?: string;
+}) => {
+  return (
+    <p id={id} role="tabpanel" tabIndex={0} aria-labelledby={labelledBy}>
+      {text}
+    </p>
+  );
+};
+
+/* istanbul ignore next */
+export const TabBarDecorator: DecoratorFunction<
+  {
+    component: typeof TabBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story, { args }) => {
+  return (
+    <TabBarContextProvider>
+      <TabBarWrapper {...args}>
+        <Story {...args} />
+      </TabBarWrapper>
+    </TabBarContextProvider>
+  );
+};