feat(store): add package

packages/date/package.json

@@ -48,10 +48,12 @@
   "dependencies": {
     "@vtex/shoreline-icons": "workspace",
     "@vtex/shoreline-utils": "workspace",
+    "@vtex/shoreline-store": "workspace",
     "@internationalized/date": "3.5.0",
     "@react-aria/calendar": "3.5.3",
     "@react-aria/datepicker": "3.9.0",
     "@react-stately/datepicker": "3.9.0",
-    "@react-stately/calendar": "3.4.2"
+    "@react-stately/calendar": "3.4.2",
+    "@react-aria/i18n": "3.9.0"
   }
 }

packages/date/src/calendar/calendar-cell.css

@@ -2,7 +2,9 @@
   [data-sl-calendar-cell] {
     /* height: 32px; */
   }
+}
 
+@layer sl-expended-components {
   [data-sl-calendar-cell-button] {
     width: 100%;
     height: 100%;

packages/date/src/calendar/calendar-cell.tsx

@@ -3,9 +3,12 @@ import { useCalendarCell } from '@react-aria/calendar'
 import { IconButton } from '@vtex/shoreline-components'
 
 import './calendar-cell.css'
+import { useCalendarContext } from './calendar-provider'
 
-export function CalendarCell({ state, date }: any) {
+export function CalendarCell({ date }: any) {
   const ref = useRef(null)
+  const store = useCalendarContext()
+
   const {
     cellProps,
     buttonProps,
@@ -15,7 +18,7 @@ export function CalendarCell({ state, date }: any) {
     isUnavailable,
     formattedDate,
     isFocused,
-  } = useCalendarCell({ date }, state, ref)
+  } = useCalendarCell({ date }, store.state, ref)
 
   return (
     <td data-sl-calendar-cell {...cellProps}>

packages/date/src/calendar/calendar-grid.tsx

@@ -1,16 +1,23 @@
 import React from 'react'
 import { useCalendarGrid } from '@react-aria/calendar'
 import { useLocale } from '@vtex/shoreline-components'
-import { getWeeksInMonth } from '../utils'
 
+import { getWeeksInMonth } from '../utils'
 import { CalendarCell } from './calendar-cell'
+import { useCalendarContext } from './calendar-provider'
 import './calendar-grid.css'
 
-export function CalendarGrid({ state, ...props }: any) {
+export function CalendarGrid(props: any) {
   const locale = useLocale()
-  const { gridProps, headerProps, weekDays } = useCalendarGrid(props, state)
 
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale)
+  const store = useCalendarContext()
+
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    props,
+    store.state
+  )
+
+  const weeksInMonth = getWeeksInMonth(store.state.visibleRange.start, locale)
 
   return (
     <table data-sl-calendar-grid {...gridProps}>
@@ -24,11 +31,11 @@ export function CalendarGrid({ state, ...props }: any) {
       <tbody>
         {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
           <tr key={weekIndex}>
-            {state
+            {store.state
               .getDatesInWeek(weekIndex)
               .map((date: any, i: number) =>
                 date ? (
-                  <CalendarCell key={i} state={state} date={date} />
+                  <CalendarCell key={i} date={date} />
                 ) : (
                   <td data-sl-calendar-cell key={i} />
                 )

packages/date/src/calendar/calendar-provider.tsx

@@ -0,0 +1,23 @@
+import type { CalendarState } from '@react-stately/calendar'
+import React, { createContext, useContext } from 'react'
+import type { Store } from '@vtex/shoreline-store'
+
+export const CalendarContext = createContext<Store<CalendarState> | null>(null)
+
+export function CalendarProvider({ store, children }: any) {
+  return (
+    <CalendarContext.Provider value={store}>
+      {children}
+    </CalendarContext.Provider>
+  )
+}
+
+export function useCalendarContext() {
+  const context = useContext(CalendarContext)
+
+  if (!context) {
+    throw new Error('Calendar components must be wrapped by CalendarProvider')
+  }
+
+  return context
+}

packages/date/src/calendar/calendar-store.ts

@@ -0,0 +1,15 @@
+import { createCalendar } from '@internationalized/date'
+import { useCalendarState } from '@react-stately/calendar'
+import { Store } from '@vtex/shoreline-store'
+import { useMemo } from 'react'
+
+export function useCalendarStore(props: any) {
+  const state = useCalendarState({
+    ...props,
+    createCalendar,
+  })
+
+  const store = useMemo(() => new Store(state), [state])
+
+  return store
+}

packages/date/src/calendar/calendar.tsx

@@ -1,52 +1,57 @@
 import React from 'react'
 import { useCalendar } from '@react-aria/calendar'
-import { useCalendarState } from '@react-stately/calendar'
 import { createCalendar } from '@internationalized/date'
 import { useLocale, IconButton } from '@vtex/shoreline-components'
 import { IconCaretLeft, IconCaretRight } from '@vtex/shoreline-icons'
+import { I18nProvider } from '@react-aria/i18n'
+
 import { CalendarGrid } from './calendar-grid'
+import { CalendarProvider } from './calendar-provider'
+import { useCalendarStore } from './calendar-store'
 
 import './calendar.css'
 
 export function Calendar(props: any) {
   const locale = useLocale()
-  const state = useCalendarState({
+  const store = useCalendarStore({
     ...props,
     locale,
     createCalendar,
   })
 
   const { calendarProps, prevButtonProps, nextButtonProps, title } =
-    useCalendar(props, state)
-
-  console.log(prevButtonProps)
+    useCalendar(props, store.state)
 
   return (
-    <div data-sl-calendar {...calendarProps}>
-      <div data-sl-calendar-header>
-        <IconButton
-          label="Previous month"
-          variant="tertiary"
-          disabled={prevButtonProps.isDisabled}
-          aria-label={prevButtonProps['aria-label']}
-          onClick={prevButtonProps.onPress as any}
-          onFocus={prevButtonProps.onFocusChange as any}
-        >
-          <IconCaretLeft />
-        </IconButton>
-        <h2 data-sl-calendar-title>{title}</h2>
-        <IconButton
-          label="Next month"
-          variant="tertiary"
-          disabled={nextButtonProps.isDisabled}
-          aria-label={nextButtonProps['aria-label']}
-          onClick={nextButtonProps.onPress as any}
-          onFocus={nextButtonProps.onFocusChange as any}
-        >
-          <IconCaretRight />
-        </IconButton>
-      </div>
-      <CalendarGrid state={state} />
-    </div>
+    <CalendarProvider store={store}>
+      <I18nProvider locale={locale}>
+        <div data-sl-calendar {...calendarProps}>
+          <div data-sl-calendar-header>
+            <IconButton
+              label="Previous month"
+              variant="tertiary"
+              disabled={prevButtonProps.isDisabled}
+              aria-label={prevButtonProps['aria-label']}
+              onClick={prevButtonProps.onPress as any}
+              onFocus={prevButtonProps.onFocusChange as any}
+            >
+              <IconCaretLeft />
+            </IconButton>
+            <h2 data-sl-calendar-title>{title}</h2>
+            <IconButton
+              label="Next month"
+              variant="tertiary"
+              disabled={nextButtonProps.isDisabled}
+              aria-label={nextButtonProps['aria-label']}
+              onClick={nextButtonProps.onPress as any}
+              onFocus={nextButtonProps.onFocusChange as any}
+            >
+              <IconCaretRight />
+            </IconButton>
+          </div>
+          <CalendarGrid />
+        </div>
+      </I18nProvider>
+    </CalendarProvider>
   )
 }

packages/date/src/calendar/stories/calendar.stories.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 // import { Stack } from '@vtex/shoreline-components'
 
 import { Calendar } from '../index'
+import { LocaleProvider } from '@vtex/shoreline-components'
+
 // import { parseDate } from '../../utils'
 
 export default {
@@ -18,9 +20,13 @@ export function Default() {
 //   return <DateField value={value} onChange={setValue} label="Date" />
 // }
 
-// export function Locale() {
-//   return <DateField label="Date" locale="ja-JP" />
-// }
+export function Locale() {
+  return (
+    <LocaleProvider locale="ja-JP">
+      <Calendar label="Date" />
+    </LocaleProvider>
+  )
+}
 
 // export function Granularity() {
 //   return (

packages/store/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/store/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vtex/shoreline-store",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/index.css"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "repository": {
+    "directory": "packages/shoreline",
+    "type": "git",
+    "url": "git+https://github.com/vtex/shoreline.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vtex/shoreline/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/use-sync-external-store": "0.0.6"
+  },
+  "dependencies": {
+    "use-sync-external-store": "1.2.0"
+  }
+}

packages/store/src/index.ts

@@ -0,0 +1,2 @@
+export * from './store'
+export * from './use-store'

packages/store/src/shallow.ts

@@ -0,0 +1,31 @@
+export function shallow<T>(objA: T, objB: T) {
+  if (Object.is(objA, objB)) {
+    return true
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false
+  }
+
+  const keysA = Object.keys(objA)
+
+  if (keysA.length !== Object.keys(objB).length) {
+    return false
+  }
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
+      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+    ) {
+      return false
+    }
+  }
+
+  return true
+}